@colijnit/corecomponents_v12 255.1.5 → 255.1.7

package/fesm2015/colijnit-corecomponents_v12.js

@@ -5,7 +5,7 @@ import { NgModel, FormGroup, FormsModule } from '@angular/forms';
 import { Subject, merge, fromEvent, BehaviorSubject } from 'rxjs';
 import { DomSanitizer, HammerGestureConfig, HammerModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import { trigger, state, style, transition, animate, query, animateChild } from '@angular/animations';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { auditTime } from 'rxjs/operators';
 import { PlaneGeometry, Mesh, Vector2, Vector3, MeshPhongMaterial, SpotLight, PerspectiveCamera, Scene, Color, AmbientLight, Fog, WebGLRenderer, Box3 } from 'three';
@@ -1022,6 +1022,7 @@ var CoreComponentsIcon;
     CoreComponentsIcon["Barcode"] = "Barcode";
     CoreComponentsIcon["BigMac"] = "big_mac";
     CoreComponentsIcon["Boxes"] = "boxes";
+    CoreComponentsIcon["BoxesPackingRegular"] = "boxes_packing_regular";
     CoreComponentsIcon["Brush"] = "brush";
     CoreComponentsIcon["BrushRoundOpen"] = "brush_round_open";
     CoreComponentsIcon["BuildingColumns"] = "building_columns";
@@ -1207,6 +1208,7 @@ var CoreComponentsIcon;
     CoreComponentsIcon["RangeSelect"] = "range_select";
     CoreComponentsIcon["Rectangles"] = "rectangles";
     CoreComponentsIcon["Refresh"] = "refresh";
+    CoreComponentsIcon["RegularBoxesPackingCircleCheck"] = "regular_boxes_packing_circle_check";
     CoreComponentsIcon["Relations"] = "relations";
     CoreComponentsIcon["Remark"] = "remark";
     CoreComponentsIcon["RemarkRoundOpen"] = "remark_round_open";
@@ -1321,6 +1323,7 @@ const CoreComponentsIconSvg = {
     "Barcode": "<svg preserveAspectRatio=\"none\" version=\"1.1\" viewBox=\"0 0 50 50\" x=\"0px\" xmlns=\"http://www.w3.org/2000/svg\" y=\"0px\"><path d=\"M 32.002 0 L 3.001 0 C 1.345 0 0 1.344 0 2.999 L 0 20.002 C 0 21.66 1.345 23.002 3.001 23.002 L 32.002 23.002 C 33.66 23.002 35 21.66 35 20.002 L 35 2.999 C 35 1.344 33.66 0 32.002 0 Z M 5 20.5 L 2.503 20.5 L 2.503 2.501 L 5 2.501 L 5 20.5 Z M 7.301 20.5 L 5.801 20.5 L 5.801 2.501 L 7.301 2.501 L 7.301 20.5 Z M 10.302 20.5 L 8.8 20.5 L 8.8 2.501 L 10.302 2.501 L 10.302 20.5 Z M 14.403 20.5 L 11.9 20.5 L 11.9 2.501 L 14.403 2.501 L 14.403 20.5 Z M 16.802 20.5 L 15.3 20.5 L 15.3 2.501 L 16.802 2.501 L 16.802 20.5 Z M 19.204 20.5 L 17.703 20.5 L 17.703 2.501 L 19.204 2.501 L 19.204 20.5 Z M 22.306 20.5 L 20.804 20.5 L 20.804 2.501 L 22.306 2.501 L 22.306 20.5 Z M 26.404 20.5 L 24.902 20.5 L 24.902 2.501 L 26.404 2.501 L 26.404 20.5 Z M 30.304 20.5 L 27.303 20.5 L 27.303 2.501 L 30.304 2.501 L 30.304 20.5 Z M 33 20.5 L 31.505 20.5 L 31.505 2.501 L 33 2.501 L 33 20.5 Z\" fill=\"#1E2930\" transform=\" translate(7.5 13.499)\" /></svg>",
     "big_mac": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 51 51\"><rect x=\"10.5\" y=\"14.5\" width=\"30\" height=\"4\" fill=\"#4d5050\"/><rect x=\"10.5\" y=\"20.5\" width=\"30\" height=\"4\" fill=\"#4d5050\"/><rect x=\"10.5\" y=\"26.5\" width=\"30\" height=\"4\" fill=\"#4d5050\"/><rect x=\"10.5\" y=\"32.5\" width=\"30\" height=\"4\" fill=\"#4d5050\"/></svg>",
     "boxes": "<svg preserveAspectRatio=\"none\" version=\"1.1\" viewBox=\"0 0 50 50\" x=\"0px\" xmlns=\"http://www.w3.org/2000/svg\" y=\"0px\"><g transform=\" translate(9 11)\"><path d=\"M 0 12.292 L 0 0 L 8.563 1.518 L 8.563 14.576 L 0 12.292 Z\" fill=\"#1E2930\" transform=\" translate(0 13.24)\" /><path d=\"M 0 1.132 L 7.909 0 L 7.909 11.897 L 0 14.153 L 0 1.132 Z\" fill=\"#1E2930\" transform=\" translate(9.813 13.647)\" /><path d=\"M 0 11.868 L 0 0 L 3.111 0.625 L 3.111 12.876 L 0 11.868 Z\" fill=\"#1E2930\" transform=\" translate(18.969 13.69)\" /><path d=\"M 0 1.433 L 8.673 0 L 8.673 11.434 L 0 13.721 L 0 1.433 Z\" fill=\"#1E2930\" transform=\" translate(23.327 12.898)\" /><path d=\"M 0 0.752 L 7.691 0 L 7.691 10.344 L 0 11.655 L 0 0.752 Z\" fill=\"#1E2930\" transform=\" translate(17.633 1.08)\" /><path d=\"M 0 10.344 L 0 0 L 8.13 0.755 L 8.13 11.669 L 0 10.344 Z\" fill=\"#1E2930\" transform=\" translate(8.258 1.077)\" /><path d=\"M 0 0.752 L 5.708 0 L 5.708 0.444 L 12.023 1.475 L 7.602 2.106 L 0 0.752 Z\" fill=\"#1E2930\" transform=\" translate(1.588 11.791)\" /><path d=\"M 0 1.434 L 5.278 0.54 L 5.182 0 L 9.086 0.528 L 1.549 1.772 L 0 1.434 Z\" fill=\"#1E2930\" transform=\" translate(21.162 11.687)\" /><path d=\"M 0 0.29 L 5.135 0 L 9.542 0.281 L 4.829 0.741 L 0 0.29 Z\" fill=\"#1E2930\" transform=\" translate(12.179 0.185)\" /></g></svg>",
+    "boxes_packing_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\"><path d=\"M592 48H304v80H256V48c0-26.5 21.5-48 48-48H592c26.5 0 48 21.5 48 48V464c0 26.5-21.5 48-48 48H381.3c1.8-5 2.7-10.4 2.7-16V464H592V48zM561 311c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-23-23V392c0 13.3-10.7 24-24 24s-24-10.7-24-24V321.9l-23 23c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l64-64c9.4-9.4 24.6-9.4 33.9 0l64 64zM48 208v48H80 304h32V208H48zM0 272V192c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32v80c0 17.7-14.3 32-32 32V480c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32l0-176c-17.7 0-32-14.3-32-32zm80 32V464H304V304H80zm72 32h80c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z\"/></svg>",
     "brush": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M28.16,26a9.71,9.71,0,0,1-4-3.66A.88.88,0,0,0,22.92,22c-1.08.48-2.19.92-3.27,1.43-3.71,1.74-6,4.5-6.23,8.75-.17,2.75-.89,5.32-3.42,7.25,1.18,0,2.12,0,3.05,0,.73,0,1.46-.07,2.18-.12a10.82,10.82,0,0,0,4.86-3.38c1.31-1.61,3.14-3.58,3.95-5.49l-.08.38a22.78,22.78,0,0,1-3.09,5.74A11.79,11.79,0,0,1,18.13,39a22.35,22.35,0,0,0,4.29-1A8.2,8.2,0,0,0,28.06,32c.38-1.62.44-3.31.66-5A1,1,0,0,0,28.16,26Z\" fill=\"#484f60\"/><path d=\"M26.23,20.43l6.57-9.32a1.23,1.23,0,0,1,1.87-.18l4.94,4.7a1.24,1.24,0,0,1-.11,1.9l-9.15,6.78a1.25,1.25,0,0,1-1.58-.08L26.4,22.06A1.23,1.23,0,0,1,26.23,20.43Z\" fill=\"#484f60\"/></svg>",
     "brush_round_open": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><title>Tekengebied 13 kopie 739</title><path d=\"M25,45A20,20,0,1,1,45,25,20,20,0,0,1,25,45ZM25,6.29A18.71,18.71,0,1,0,43.71,25,18.73,18.73,0,0,0,25,6.29Z\" fill=\"#484f60\"/><path d=\"M13.39,36.15A7,7,0,0,0,16,30.53a7.59,7.59,0,0,1,4.83-6.77c.83-.39,1.69-.73,2.53-1.11a.69.69,0,0,1,1,.29,7.34,7.34,0,0,0,3.09,2.83.73.73,0,0,1,.43.82c-.17,1.28-.22,2.59-.51,3.84A6.35,6.35,0,0,1,23,35a24.09,24.09,0,0,1-7.25,1.14C15,36.18,14.3,36.15,13.39,36.15Z\" fill=\"#484f60\"/><path d=\"M26,21.46,31,14.25a1,1,0,0,1,1.46-.14l3.82,3.64a1,1,0,0,1-.09,1.47l-7.08,5.24a1,1,0,0,1-1.22-.06l-1.83-1.67A1,1,0,0,1,26,21.46Z\" fill=\"#484f60\"/></svg>",
     "building_columns": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path style= \"fill: #484f60\" d=\"M243.4 2.587C251.4-.8625 260.6-.8625 268.6 2.587L492.6 98.59C506.6 104.6 514.4 119.6 511.3 134.4C508.3 149.3 495.2 159.1 479.1 160V168C479.1 181.3 469.3 192 455.1 192H55.1C42.74 192 31.1 181.3 31.1 168V160C16.81 159.1 3.708 149.3 .6528 134.4C-2.402 119.6 5.429 104.6 19.39 98.59L243.4 2.587zM256 128C273.7 128 288 113.7 288 96C288 78.33 273.7 64 256 64C238.3 64 224 78.33 224 96C224 113.7 238.3 128 256 128zM127.1 416H167.1V224H231.1V416H280V224H344V416H384V224H448V420.3C448.6 420.6 449.2 420.1 449.8 421.4L497.8 453.4C509.5 461.2 514.7 475.8 510.6 489.3C506.5 502.8 494.1 512 480 512H31.1C17.9 512 5.458 502.8 1.372 489.3C-2.715 475.8 2.515 461.2 14.25 453.4L62.25 421.4C62.82 420.1 63.41 420.6 63.1 420.3V224H127.1V416z\"/></svg>",
@@ -1506,6 +1509,7 @@ const CoreComponentsIconSvg = {
     "range_select": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"18\" y=\"11.17\" width=\"22\" height=\"4\" fill=\"#484f60\" opacity=\"0.25\"/><rect x=\"18\" y=\"19.17\" width=\"22\" height=\"4\" fill=\"#484f60\"/><rect x=\"18\" y=\"27.17\" width=\"22\" height=\"4\" fill=\"#484f60\"/><circle cx=\"13\" cy=\"13.17\" r=\"3\" fill=\"#484f60\" opacity=\"0.25\"/><circle cx=\"13\" cy=\"21.17\" r=\"3\" fill=\"#484f60\"/><circle cx=\"13\" cy=\"29.17\" r=\"3\" fill=\"#484f60\"/><rect x=\"18\" y=\"35.17\" width=\"22\" height=\"4\" fill=\"#484f60\"/><circle cx=\"13\" cy=\"37.17\" r=\"3\" fill=\"#484f60\"/></svg>",
     "rectangles": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\" ><g><path fill=\"#484F5F\" d=\"M24.7,24.2c0,0.2-0.2,0.4-0.4,0.4H10.9c-0.2,0-0.4-0.2-0.4-0.4v-8.4c0-0.2,0.2-0.4,0.4-0.4h13.3c0.2,0,0.4,0.2,0.4,0.4V24.2z\"/><path fill=\"#484F5F\" d=\"M40.5,24.2c0,0.2-0.2,0.4-0.4,0.4H26.8c-0.2,0-0.4-0.2-0.4-0.4v-8.4c0-0.2,0.2-0.4,0.4-0.4h13.3c0.2,0,0.4,0.2,0.4,0.4V24.2z\"/><path fill=\"#484F5F\" d=\"M24.7,35.2c0,0.2-0.2,0.4-0.4,0.4H10.9c-0.2,0-0.4-0.2-0.4-0.4v-8.4c0-0.2,0.2-0.4,0.4-0.4h13.3c0.2,0,0.4,0.2,0.4,0.4V35.2z\"/><path opacity=\"0.5\" fill=\"#484F5F\" d=\"M40.5,35.2c0,0.2-0.2,0.4-0.4,0.4H26.8c-0.2,0-0.4-0.2-0.4-0.4v-8.4c0-0.2,0.2-0.4,0.4-0.4h13.3c0.2,0,0.4,0.2,0.4,0.4V35.2z\"/></g></svg>",
     "refresh": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"14.58 22.71 14.58 10 27.29 22.71 14.58 22.71\" fill=\"#484f60\"/><polygon points=\"35.42 27.29 35.42 40 22.71 27.29 35.42 27.29\" fill=\"#484f60\"/><path d=\"M19.9,15.32c4.09-4.09,10.2-8.13,18.33,0h0C31.73,8.82,26.65,13.9,22.56,18Z\" fill=\"#484f60\"/><path d=\"M30.1,34.68c-4.09,4.08-10.2,8.13-18.33,0h0c6.51,6.5,11.58,1.43,15.67-2.66Z\" fill=\"#484f60\"/></svg>",
+    "regular_boxes_packing_circle_check": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\"><path d=\"M0 192c0-17.7 14.3-32 32-32c106.7 0 213.3 0 320 0c17.7 0 32 14.3 32 32c0 13.4 0 26.8 0 40.2c-39.1 32.3-64 81.1-64 135.8c0 37.6 11.8 72.5 32 101.2c0 3.6 0 7.2 0 10.8c0 17.7-14.3 32-32 32c-85.4 0-170.7 0-256 0c-17.7 0-32-14.3-32-32c0-58.7 0-117.3 0-176c-17.7 0-32-14.3-32-32c0-26.7 0-53.3 0-80zm48 16c0 16 0 32 0 48c10.7 0 21.3 0 32 0c74.7 0 149.3 0 224 0c10.7 0 21.3 0 32 0c0-16 0-32 0-48L48 208zm32 96c0 53.3 0 106.7 0 160c74.7 0 149.3 0 224 0c0-53.3 0-106.7 0-160L80 304zm48 56c0-13.3 10.7-24 24-24c26.7 0 53.3 0 80 0c13.3 0 24 10.7 24 24s-10.7 24-24 24c-26.7 0-53.3 0-80 0c-13.3 0-24-10.7-24-24zM256 48c0-26.5 21.5-48 48-48c96 0 192 0 288 0c26.5 0 48 21.5 48 48c0 72.9 0 145.9 0 218.8c-12.9-18.3-29.2-34-48-46.3c0-57.5 0-115 0-172.5L304 48c0 26.7 0 53.3 0 80c-16 0-32 0-48 0c0-26.7 0-53.3 0-80zm96 320c0-79.5 64.5-144 144-144s144 64.5 144 144s-64.5 144-144 144s-144-64.5-144-144zm29.3 144c1-2.8 1.7-5.7 2.2-8.7c3.7 3 7.4 5.9 11.3 8.7c-4.5 0-9 0-13.5 0zm47.4-155.3c-6.2 6.2-6.2 16.4 0 22.6c13.3 13.3 26.7 26.7 40 40c6.2 6.2 16.4 6.2 22.6 0c24-24 48-48 72-72c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0c-20.2 20.2-40.5 40.5-60.7 60.7c-9.6-9.6-19.1-19.1-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0z\"/></svg>",
     "relations": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 50 50\" enable-background=\"new 0 0 50 50\" ><g><path fill=\"#2A363B\" d=\"M32.8,35.2c1.4-1.3,2.5-4.7,2.9-6.7l-1.5,1.7C34,31.3,33.6,33.3,32.8,35.2z\"/><path fill=\"#2A363B\" d=\"M37,26.1l1.6-1.8c0-1.8-1.9-4-4.1-4h-0.5c-0.2,0.3-0.5,0.6-0.7,0.9C35.3,22,36.8,24.1,37,26.1z\"/><path fill=\"#2A363B\" d=\"M34.6,15.3c0-2.8-2.8-5.3-6.4-5.3c-1,0-1.9,0.2-2.8,0.6c4.1,0.2,7.5,3.3,7.5,6.9c0,0.6-0.1,1.3-0.3,1.9C33.8,18.2,34.6,16.7,34.6,15.3z\"/><path fill=\"#2A363B\" d=\"M33.7,28.2l1.6-1.8c0-1.8-1.9-4-4.1-4h-0.5c-0.2,0.3-0.5,0.6-0.7,0.9C32.1,24.2,33.6,26.2,33.7,28.2z\"/><path fill=\"#2A363B\" d=\"M29.6,37.3c1.4-1.3,2.5-4.7,2.9-6.7l-1.5,1.7C30.8,33.4,30.4,35.5,29.6,37.3z\"/><path fill=\"#2A363B\" d=\"M31.4,17.4c0-2.8-2.8-5.3-6.4-5.3c-1,0-1.9,0.2-2.8,0.6c4.1,0.2,7.5,3.3,7.5,6.9c0,0.6-0.1,1.3-0.3,1.9C30.6,20.4,31.4,18.9,31.4,17.4z\"/><path fill=\"#2A363B\" d=\"M28,24.6h-0.5c-0.9,1.2-2.5,2.7-4.2,3.3c0.1,0.2,0.2,0.4,0.2,0.6c0,0.4-0.3,0.8-0.6,1l1.5,7.1l-2.6,2.6l-2.6-2.6l1.5-7.1c-0.4-0.2-0.6-0.6-0.6-1c0-0.2,0.1-0.4,0.2-0.6c-1.7-0.6-3.3-2-4.2-3.3h-0.5c-2.3,0-4.1,2.2-4.1,4l2.8,3c0,1.8,1.9,8.4,4.1,8.4h6.9c2.3,0,4.2-6.6,4.2-8.4l2.8-3C32.2,26.8,30.3,24.6,28,24.6z\"/><path fill=\"#2A363B\" d=\"M28.1,19.6c0,2.8-2.8,5.9-6.4,5.9c-3.5,0-6.4-3.1-6.4-5.9c0-2.8,2.8-5.3,6.4-5.3C25.3,14.3,28.1,16.8,28.1,19.6z\"/></g></svg>",
     "remark": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M25,10.93c-8.28,0-15,4.9-15,11a8.87,8.87,0,0,0,2.27,5.77h-.16c.15.1.28.22.43.32a13.37,13.37,0,0,0,1.34,1.25c3.07,3.74.06,8.71-3.25,9.84,5.79-1.34,9.32-3.89,10.91-6.53a19.53,19.53,0,0,0,3.46.31c8.28,0,15-4.91,15-11S33.28,10.93,25,10.93Z\" fill=\"#484f60\"/></svg>",
     "remark_round_open": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 51 51\"><path d=\"M683,375.62c-5.52,0-10,3.27-10,7.31a5.91,5.91,0,0,0,1.51,3.85h-.11c.11.07.19.14.29.22a8.27,8.27,0,0,0,.9.83c2,2.5,0,5.81-2.16,6.56,3.86-.89,6.21-2.59,7.27-4.35a13.52,13.52,0,0,0,2.31.2c5.52,0,10-3.27,10-7.3S688.52,375.62,683,375.62Z\" transform=\"translate(-658.5 -359.5)\" fill=\"#4d5050\"/><path d=\"M683,405a20,20,0,1,1,20-20A20,20,0,0,1,683,405Zm0-38.71A18.71,18.71,0,1,0,701.71,385,18.73,18.73,0,0,0,683,366.29Z\" transform=\"translate(-658.5 -359.5)\" fill=\"#4d5050\"/></svg>",
@@ -11305,13 +11309,19 @@ ListOfValuesModule.decorators = [
 ];
 
 class ListOfIconsComponent {
-    constructor(icons) {
+    constructor(iconCacheService, icons) {
+        this.iconCacheService = iconCacheService;
         this.icons = icons;
         this.iconSize = 25;
         this.itemSelected = new EventEmitter();
         this.Icon = CoreComponentsIcon;
         this.showMenu = false;
+        this.showSubCategories = false;
         this._collection = [];
+        this.subCategories = [
+            { icon: this.iconCacheService.getIcon(this.Icon.BoxesPackingRegular), label: 'To be picked' },
+            { icon: this.iconCacheService.getIcon(this.Icon.RegularBoxesPackingCircleCheck), label: 'Picked' }
+        ];
     }
     set collection(value) {
         this._collection = value || [];
@@ -11331,10 +11341,23 @@ class ListOfIconsComponent {
         this.showMenu = !this.showMenu;
     }
     selectItem(item) {
+        if (item.label === "Logistiek") {
+            this.showSubCategories = !this.showSubCategories;
+            return;
+        }
         this.activeItem = item;
         this.showMenu = false;
         this.itemSelected.emit(this.activeItem);
     }
+    handlePickingCategoryClicked(subCategory) {
+        this.itemSelected.emit(subCategory);
+        this.showMenu = false;
+        this.showSubCategories = false;
+    }
+    onClickOutside() {
+        this.showMenu = false;
+        this.showSubCategories = false;
+    }
 }
 ListOfIconsComponent.decorators = [
     { type: Component, args: [{
@@ -11344,17 +11367,25 @@ ListOfIconsComponent.decorators = [
       <co-icon [iconData]="activeItem.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
       <co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.ArrowPointDown)"></co-icon>
     </div>
-    <div class="dropdown-menu" *ngIf="showMenu" (clickOutside)="showMenu = false">
-      <div class="icon-item" *ngFor="let item of collection" (click)="selectItem(item)" [class.active]="item === activeItem">
+    <div class="dropdown-menu" *ngIf="showMenu" (clickOutside)="onClickOutside()">
+      <div class="icon-item" *ngFor="let item of collection" (click)="selectItem(item)"
+           [class.active]="item === activeItem">
         <co-icon [iconData]="item.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
         <div class="label">{{ item.label }}</div>
       </div>
+      <div class="picking-type-wrapper" *ngIf="showSubCategories">
+        <div class="button-wrapper" *ngFor="let subCategory of subCategories" (click)="handlePickingCategoryClicked(subCategory)">
+          <co-icon class="co-transaction-button-bar-icon" [iconData]="subCategory.icon"></co-icon>
+          <span class="button-title">{{subCategory.label}}</span>
+        </div>
+      </div>
     </div>
   `,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 ListOfIconsComponent.ctorParameters = () => [
+    { type: IconCacheService },
     { type: IconCacheService }
 ];
 ListOfIconsComponent.propDecorators = {
@@ -13654,8 +13685,9 @@ ColorSequenceService.decorators = [
 ];
 
 class HourSchedulingComponent {
-    constructor(cdRef) {
+    constructor(cdRef, _datepipe) {
         this.cdRef = cdRef;
+        this._datepipe = _datepipe;
         this.showClass = true;
         this.customTemplateUsed = false;
         this.hours = [];
@@ -13663,21 +13695,27 @@ class HourSchedulingComponent {
         this.draggedObject = null;
     }
     ngOnInit() {
+        if (!this.childProp) {
+            this.startTime = parseInt(this._datepipe.transform(new Date(this.schedule[this.startTimeProp]).toISOString(), 'H:mm'));
+            this.endTime = parseInt(this._datepipe.transform(new Date(this.schedule[this.endTimeProp]).toISOString(), 'H:mm'));
+        }
+        else {
+            this.startTime = parseInt(this._datepipe.transform(new Date(this.schedule[this.childProp][this.startTimeProp]).toISOString(), 'H:mm'));
+            this.endTime = parseInt(this._datepipe.transform(new Date(this.schedule[this.childProp][this.endTimeProp]).toISOString(), 'H:mm'));
+        }
         this.generateTimeBlocks();
     }
     generateTimeBlocks() {
-        const startTime = this.schedule[this.startTimeProp];
-        const endTime = this.schedule[this.endTimeProp];
         const objectsList = this.schedule[this.objectsProp];
-        for (let hour = startTime; hour <= endTime; hour++) {
+        for (let hour = this.startTime; hour <= this.endTime; hour++) {
             this.hours.push(this.formatHour(hour));
-            this.scheduledObjects[this.formatHour(hour)] = this.getObjectsForHour(hour, objectsList);
+            this.scheduledObjects[this.formatHour(hour)] = this._getObjectsForHour(hour, objectsList);
         }
     }
-    getObjectsForHour(hour, objectsList) {
+    _getObjectsForHour(hour, objectsList) {
         const objectsForHour = [];
-        objectsList.forEach(obj => {
-            if (obj.start === hour) {
+        objectsList.forEach((obj) => {
+            if (this.convertToHourNotation(obj[this.startTimeProp]) === hour) {
                 objectsForHour.push(Object.assign({}, obj));
             }
         });
@@ -13691,28 +13729,52 @@ class HourSchedulingComponent {
         const currentHourSpan = currentTarget.parentElement.parentElement.querySelector('.hour-label span');
         const currentHour = currentHourSpan.textContent;
         this.draggedObject = obj;
-        event.dataTransfer.setData('text', JSON.stringify({ obj, currentHour }));
+        event.dataTransfer.setData('text', JSON.stringify({ obj: this.draggedObject, currentHour }));
+    }
+    onCustomDragStart(event, obj) {
+        this.onDragStart(event, obj);
     }
     onDragOver(event) {
         event.preventDefault();
     }
     onDrop(event, hour) {
         event.preventDefault();
+        event.stopPropagation();
         const data = JSON.parse(event.dataTransfer.getData('text'));
+        if (!data || !data.obj) {
+            return;
+        }
         const newStartHour = parseInt(hour.split(':')[0], 10);
         const newEndHour = newStartHour + 1;
-        data.obj.start = newStartHour;
-        data.obj.end = newEndHour;
-        const currentHourBlock = data.currentHour;
-        this.scheduledObjects[currentHourBlock] = this.scheduledObjects[currentHourBlock].filter(o => o !== this.draggedObject);
+        const originalStartHour = this.convertToHourNotation(data.obj[this.startTimeProp]);
+        // Get the unique identifier value from the object using the `idProp`
+        const objId = data.obj[this.idProp];
+        // Ensure we create a new object to avoid mutation issues
+        const updatedObject = Object.assign(Object.assign({}, data.obj), { start: newStartHour, end: newEndHour });
+        const updatedObject2 = Object.assign(Object.assign({}, data.obj), { [this.startTimeProp]: this.createDate(newStartHour), [this.endTimeProp]: this.createDate(newEndHour) });
+        // Remove the object from its old hour block using its unique id
+        const originalHourBlock = this.formatHour(originalStartHour);
+        this.scheduledObjects[originalHourBlock] = this.scheduledObjects[originalHourBlock].filter(o => o[this.idProp] !== objId);
+        // Add the object to the new hour block
         const newHourBlock = this.formatHour(newStartHour);
         if (!this.scheduledObjects[newHourBlock]) {
             this.scheduledObjects[newHourBlock] = [];
         }
-        this.scheduledObjects[newHourBlock].push(data.obj);
+        this.scheduledObjects[newHourBlock].push(updatedObject2);
+        // Clear the dragged object
         this.draggedObject = null;
+        // Trigger change detection to update the view
         this.cdRef.detectChanges();
     }
+    convertToHourNotation(date) {
+        return parseInt(this._datepipe.transform(new Date(date).toISOString(), 'H:mm'));
+    }
+    createDate(hours) {
+        let date = new Date();
+        date.setHours(hours);
+        date.setMinutes(0, 0, 0);
+        return date;
+    }
 }
 HourSchedulingComponent.decorators = [
     { type: Component, args: [{
@@ -13720,23 +13782,35 @@ HourSchedulingComponent.decorators = [
                 template: `
     <div class="time-block" *ngFor="let hour of hours">
       <div class="hour-label"><span [textContent]="hour"></span></div>
-      <div class="object-display"
-           (dragover)="onDragOver($event)"
-           (drop)="onDrop($event, hour)">
+      <div
+        class="object-display"
+        (dragover)="onDragOver($event)"
+        (drop)="onDrop($event, hour)"
+      >
         <ng-container *ngIf="!customTemplateUsed">
           <ng-container *ngIf="scheduledObjects[hour]">
-            <div *ngFor="let obj of scheduledObjects[hour]" class="scheduled-object"
-                 [draggable]="true"
-                 (dragstart)="onDragStart($event, obj)">
+            <div
+              *ngFor="let obj of scheduledObjects[hour]"
+              class="scheduled-object"
+              [draggable]="true"
+              (dragstart)="onDragStart($event, obj)"
+            >
               <span class="title" [textContent]="obj.title"></span>
               <span class="sub-title" [textContent]="obj.subTitle"></span>
             </div>
           </ng-container>
         </ng-container>
-        <ng-template #customContent *ngIf="customTemplateUsed">
-          <ng-container *ngTemplateOutlet="customTemplate; context: { objects: scheduledObjects[hour] }">
-          </ng-container>
-        </ng-template>
+
+        <ng-container *ngIf="customTemplateUsed">
+          <ng-template
+            [ngTemplateOutlet]="customTemplate"
+            [ngTemplateOutletContext]="{
+              hour: hour,
+              objects: scheduledObjects[hour]
+            }"
+          >
+          </ng-template>
+        </ng-container>
       </div>
     </div>
   `,
@@ -13744,16 +13818,19 @@ HourSchedulingComponent.decorators = [
             },] }
 ];
 HourSchedulingComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
+    { type: ChangeDetectorRef },
+    { type: DatePipe }
 ];
 HourSchedulingComponent.propDecorators = {
-    showClass: [{ type: HostBinding, args: ['class.co-hour-scheduling',] }],
     schedule: [{ type: Input }],
     startTimeProp: [{ type: Input }],
     endTimeProp: [{ type: Input }],
     objectsProp: [{ type: Input }],
+    childProp: [{ type: Input }],
     customTemplate: [{ type: Input }],
-    customTemplateUsed: [{ type: Input }]
+    customTemplateUsed: [{ type: Input }],
+    idProp: [{ type: Input }],
+    generateTimeBlocks: [{ type: HostBinding, args: ['class.co-hour-scheduling',] }]
 };
 
 class HourSchedulingTestObjectComponent {
@@ -13791,7 +13868,8 @@ HourSchedulingComponentModule.decorators = [
                 exports: [
                     HourSchedulingComponent,
                     HourSchedulingTestObjectComponent
-                ]
+                ],
+                providers: [DatePipe]
             },] }
 ];