@colijnit/transaction 12.1.25 → 12.1.26

package/bundles/colijnit-transaction.umd.js

@@ -11431,9 +11431,6 @@
         TransactionSearchSalesOrderGridComponent.prototype.showClass = function () {
             return true;
         };
-        TransactionSearchSalesOrderGridComponent.prototype.onTransactionClick = function (event) {
-            console.log(this.searchService.transactions.length);
-        };
         return TransactionSearchSalesOrderGridComponent;
     }(TransactionSearchGridBaseComponent));
     TransactionSearchSalesOrderGridComponent.decorators = [
@@ -13017,15 +13014,22 @@
                 },] }
     ];
 
+    exports.SearchBarViewMode = void 0;
+    (function (SearchBarViewMode) {
+        SearchBarViewMode[SearchBarViewMode["Expanded"] = 0] = "Expanded";
+        SearchBarViewMode[SearchBarViewMode["Collapsed"] = 1] = "Collapsed";
+    })(exports.SearchBarViewMode || (exports.SearchBarViewMode = {}));
     var TransactionSearchComponent = /** @class */ (function () {
         function TransactionSearchComponent(_transactionSearchService) {
             this._transactionSearchService = _transactionSearchService;
             this.searchViewModes = SearchViewMode;
+            this.orientations = corecomponents_v12.CoOrientation;
+            this.directionRight = corecomponents_v12.CoDirection.Right;
             this.activeSearchViewMode = SearchViewMode.FullScreen;
-            this.closeClick = new i0.EventEmitter();
+            this.activeSearchBarViewMode = exports.SearchBarViewMode.Expanded;
+            this.showFilterSidebar = false;
             this.transactionClick = new i0.EventEmitter();
             this.searchViewModeChange = new i0.EventEmitter();
-            this.showFilterSidebar = false;
         }
         Object.defineProperty(TransactionSearchComponent.prototype, "transactionType", {
             get: function () {
@@ -13048,6 +13052,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(TransactionSearchComponent.prototype, "collapsed", {
+            get: function () {
+                return this.activeSearchBarViewMode === exports.SearchBarViewMode.Collapsed;
+            },
+            enumerable: false,
+            configurable: true
+        });
         TransactionSearchComponent.prototype.toggleFilter = function () {
             this.showFilterSidebar = !this.showFilterSidebar;
         };
@@ -13058,12 +13069,18 @@
             var _this = this;
             this._transactionSearchService.resetFilters();
             this.showFilterSidebar = false;
-            setTimeout(function () { _this.showFilterSidebar = true; }, 10);
+            setTimeout(function () {
+                _this.showFilterSidebar = true;
+            }, 10);
         };
         TransactionSearchComponent.prototype.onTransactionClick = function (transaction) {
+            if (this.activeSearchViewMode === this.searchViewModes.FullScreen) {
+                this.collapseSearchBar();
+            }
+            this._scrollToTop();
             this.transactionClick.emit(transaction);
         };
-        TransactionSearchComponent.prototype.onResizeClick = function () {
+        TransactionSearchComponent.prototype.onSearchViewResizeClick = function () {
             if (this.activeSearchViewMode === this.searchViewModes.SideBar) {
                 this.activeSearchViewMode = this.searchViewModes.FullScreen;
             }
@@ -13072,12 +13089,44 @@
             }
             this.searchViewModeChange.emit(this.activeSearchViewMode);
         };
+        TransactionSearchComponent.prototype.onSideCollapseHandleClick = function () {
+            this.toggleSearchBar();
+        };
+        TransactionSearchComponent.prototype.toggleSearchBar = function () {
+            if (this.collapsed || this.fullscreen) {
+                this.expandSearchBar();
+            }
+            else {
+                this.collapseSearchBar();
+            }
+        };
+        TransactionSearchComponent.prototype.collapseSearchBar = function () {
+            this.activeSearchViewMode = this.searchViewModes.SideBar;
+            this.activeSearchBarViewMode = exports.SearchBarViewMode.Collapsed;
+            this.searchViewModeChange.emit(this.activeSearchViewMode);
+        };
+        TransactionSearchComponent.prototype.expandSearchBar = function () {
+            this.activeSearchViewMode = this.searchViewModes.SideBar;
+            this.activeSearchBarViewMode = exports.SearchBarViewMode.Expanded;
+            this.searchViewModeChange.emit(this.activeSearchViewMode);
+        };
+        TransactionSearchComponent.prototype.calculateClasses = function () {
+            return {
+                'fullscreen': this.fullscreen,
+                'sidebar': !this.fullscreen,
+                'collapsed': this.collapsed,
+                'expanded': !this.collapsed,
+            };
+        };
+        TransactionSearchComponent.prototype._scrollToTop = function () {
+            document.documentElement.scrollTop = 0;
+        };
         return TransactionSearchComponent;
     }());
     TransactionSearchComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-transaction-search',
-                    template: "\n      <div class=\"transaction-search-wrapper\" [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\">\n        <div class=\"transaction-filter-wrapper narrow-scrollbar\" [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\"\n             *ngIf=\"showFilterSidebar\" @showHideFilterSidebar>\n          <co-transaction-filter\n            [transactionType]=\"transactionType\"\n            [activeSearchViewMode]=\"activeSearchViewMode\"\n            (closeButtonClick)=\"handleHideFilter()\"\n            (resetFilterClick)=\"handleResetFilter()\"></co-transaction-filter>\n        </div>\n        <div class=\"transaction-search-result-wrapper\">\n          <co-transaction-search-result\n            [transactionType]=\"transactionType\"\n            [activeSearchViewMode]=\"activeSearchViewMode\"\n            (filterClick)=\"toggleFilter()\"\n            (transactionClick)=\"onTransactionClick($event)\"\n            (resizeClick)=\"onResizeClick()\"\n            (closeClick)=\"closeClick.emit()\"\n          ></co-transaction-search-result>\n        </div>\n      </div>\n      <ng-content></ng-content>\n  ",
+                    template: "\n    <div class=\"transaction-search-wrapper\"\n         [ngClass]=\"calculateClasses()\">\n      <div class=\"transaction-filter-wrapper narrow-scrollbar\"\n           [ngClass]=\"calculateClasses()\"\n           *ngIf=\"showFilterSidebar\" @showHideFilterSidebar>\n        <co-transaction-filter\n          [transactionType]=\"transactionType\"\n          [activeSearchViewMode]=\"activeSearchViewMode\"\n          (closeButtonClick)=\"handleHideFilter()\"\n          (resetFilterClick)=\"handleResetFilter()\"></co-transaction-filter>\n      </div>\n      <div class=\"transaction-search-result-wrapper\" [ngClass]=\"calculateClasses()\">\n        <co-transaction-search-result\n          [transactionType]=\"transactionType\"\n          [activeSearchViewMode]=\"activeSearchViewMode\"\n          (filterClick)=\"toggleFilter()\"\n          (transactionClick)=\"onTransactionClick($event)\"\n          (resizeClick)=\"onSearchViewResizeClick()\"\n          (closeClick)=\"collapseSearchBar()\"\n        ></co-transaction-search-result>\n      </div>\n    </div>\n    <div class=\"transaction-search-content-wrapper\" [ngClass]=\"calculateClasses()\">\n      <ng-content></ng-content>\n    </div>\n\n    <co-icon-collapse-handle\n      class=\"for-sidebar\"\n      [ngClass]=\"calculateClasses()\"\n      [orientation]=\"orientations.Vertical\"\n      [arrowDirection]=\"directionRight\"\n      [twoArrows]=\"true\"\n      (click)=\"onSideCollapseHandleClick()\">\n    </co-icon-collapse-handle>\n  ",
                     animations: [
                         animations.trigger("showHideFilterSidebar", [
                             animations.state("void", animations.style({ transform: 'translateX(-100%)' })),
@@ -13092,7 +13141,6 @@
         { type: TransactionSearchService }
     ]; };
     TransactionSearchComponent.propDecorators = {
-        closeClick: [{ type: i0.Output }],
         transactionType: [{ type: i0.Input }],
         transactionClick: [{ type: i0.Output }],
         searchViewModeChange: [{ type: i0.Output }],
@@ -14384,6 +14432,7 @@
         });
         TransactionSearchResultComponent.prototype.onTransactionClick = function (transaction) {
             this.selectedTransaction = transaction;
+            this.activeContentViewMode = this.contentViewModes.Tiles;
             this.transactionClick.emit(transaction);
         };
         TransactionSearchResultComponent.prototype.onResizeClick = function () {
@@ -14410,7 +14459,7 @@
     TransactionSearchResultComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-transaction-search-result',
-                    template: "\n    <div class=\"transaction-search-header-wrapper\">\n      <co-transaction-search-header\n        [transactionType]=\"transactionType\"\n        [activeSearchViewMode]=\"activeSearchViewMode\"\n        [activeContentViewMode]=\"activeContentViewMode\"\n        (viewModeChange)=\"activeContentViewMode = $event\"\n        (resizeClick)=\"onResizeClick()\"\n        (filterButtonClick)=\"onFilterClick()\"\n        (closeClick)=\"onCloseClick()\">\n      </co-transaction-search-header>\n    </div>\n\n    <div class=\"transaction-search-result-content-tiles-wrapper\" [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\"\n         *ngIf=\"activeContentViewMode === contentViewModes.Tiles\">\n      <div class=\"transaction-tile\" *ngFor=\"let transaction of searchService.transactions\">\n        <co-transaction-search-tile\n          [transaction]=\"transaction\"\n          [transactionType]=\"transactionType\"\n          [class]=\"transaction === selectedTransaction ? 'selected' : ''\"\n          (transactionClick)=\"onTransactionClick($event)\">\n        </co-transaction-search-tile>\n      </div>\n    </div>\n\n    <div class=\"transaction-search-result-content-grid-wrapper\" *ngIf=\"activeContentViewMode === contentViewModes.Grid\">\n      <co-transaction-search-grid\n        [transactionType]=\"transactionType\"\n        (transactionClick)=\"onTransactionClick($event)\"\n      ></co-transaction-search-grid>\n    </div>\n    <co-pagination-bar *ngIf=\"searchService.transactions?.length > 0\"\n                       [currentPage]=\"searchService.currentPage\"\n                       [itemsPerPage]=\"searchService.transactionsPerPage\"\n                       [totalItems]=\"searchService.resultCount\"\n                       [previousLabel]=\"'PREVIOUS' | localize\"\n                       [nextLabel]=\"'NEXT' | localize\"\n                       [autoHide]=\"true\"\n                       (previousClick)=\"onPreviousClick()\"\n                       (nextClick)=\"onNextClick()\"\n                       (pageClick)=\"onPageClick($event)\">\n    </co-pagination-bar>\n  ",
+                    template: "\n    <div class=\"transaction-search-header-wrapper\">\n      <co-transaction-search-header\n        [transactionType]=\"transactionType\"\n        [activeSearchViewMode]=\"activeSearchViewMode\"\n        [activeContentViewMode]=\"activeContentViewMode\"\n        (viewModeChange)=\"activeContentViewMode = $event\"\n        (resizeClick)=\"onResizeClick()\"\n        (filterButtonClick)=\"onFilterClick()\"\n        (closeClick)=\"onCloseClick()\">\n      </co-transaction-search-header>\n    </div>\n\n    <div class=\"transaction-search-result-content-tiles-wrapper\" [ngClass]=\"fullscreen ? 'fullscreen' : 'sidebar'\"\n         *ngIf=\"activeContentViewMode === contentViewModes.Tiles\">\n      <div class=\"transaction-tile\" *ngFor=\"let transaction of searchService.transactions\">\n        <co-transaction-search-tile\n          [transaction]=\"transaction\"\n          [transactionType]=\"transactionType\"\n          [class]=\"transaction === selectedTransaction ? 'selected' : ''\"\n          (transactionClick)=\"onTransactionClick($event)\">\n        </co-transaction-search-tile>\n      </div>\n    </div>\n\n    <div class=\"transaction-search-result-content-grid-wrapper\" *ngIf=\"activeContentViewMode === contentViewModes.Grid\">\n      <co-transaction-search-grid\n        [transactionType]=\"transactionType\"\n        (transactionClick)=\"onTransactionClick($event)\"\n      ></co-transaction-search-grid>\n    </div>\n    <co-pagination-bar *ngIf=\"searchService.transactions?.length > 0\"\n                       [currentPage]=\"searchService.currentPage\"\n                       [itemsPerPage]=\"searchService.transactionsPerPage\"\n                       [totalItems]=\"searchService.resultCount\"\n                       [previousLabel]=\"'PREVIOUS' | localize\"\n                       [nextLabel]=\"'NEXT' | localize\"\n                       [autoHide]=\"true\"\n                       [directionLinks]=\"fullscreen\"\n                       [paginationRange]=\"!fullscreen ? 6 : 8\"\n                       (previousClick)=\"onPreviousClick()\"\n                       (nextClick)=\"onNextClick()\"\n                       (pageClick)=\"onPageClick($event)\">\n    </co-pagination-bar>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -14820,7 +14869,8 @@
                         TransactionSearchResultModule,
                         TransactionSalesOrderFilterModule,
                         TransactionPurchaseOrderFilterModule,
-                        TransactionFilterModule
+                        TransactionFilterModule,
+                        corecomponents_v12.IconCollapseHandleModule
                     ],
                     declarations: [
                         TransactionSearchComponent