@colijnit/corecomponents_v12 255.1.5 → 255.1.7

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -1403,6 +1403,7 @@
         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";
@@ -1588,6 +1589,7 @@
         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";
@@ -1702,6 +1704,7 @@
         "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>",
@@ -1887,6 +1890,7 @@
         "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>",
@@ -11821,13 +11825,19 @@
     ];
 
     var ListOfIconsComponent = /** @class */ (function () {
-        function ListOfIconsComponent(icons) {
+        function ListOfIconsComponent(iconCacheService, icons) {
+            this.iconCacheService = iconCacheService;
             this.icons = icons;
             this.iconSize = 25;
             this.itemSelected = new i0.EventEmitter();
             this.Icon = exports.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' }
+            ];
         }
         Object.defineProperty(ListOfIconsComponent.prototype, "collection", {
             get: function () {
@@ -11851,20 +11861,34 @@
             this.showMenu = !this.showMenu;
         };
         ListOfIconsComponent.prototype.selectItem = function (item) {
+            if (item.label === "Logistiek") {
+                this.showSubCategories = !this.showSubCategories;
+                return;
+            }
             this.activeItem = item;
             this.showMenu = false;
             this.itemSelected.emit(this.activeItem);
         };
+        ListOfIconsComponent.prototype.handlePickingCategoryClicked = function (subCategory) {
+            this.itemSelected.emit(subCategory);
+            this.showMenu = false;
+            this.showSubCategories = false;
+        };
+        ListOfIconsComponent.prototype.onClickOutside = function () {
+            this.showMenu = false;
+            this.showSubCategories = false;
+        };
         return ListOfIconsComponent;
     }());
     ListOfIconsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-list-of-icons',
-                    template: "\n    <div class=\"icon-item active\" [class.menu-opened]=\"showMenu\" (click)=\"toggleMenu()\">\n      <co-icon [iconData]=\"activeItem.icon\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\"></co-icon>\n      <co-icon class=\"drop-arrow\" [iconData]=\"icons.getIcon(Icon.ArrowPointDown)\"></co-icon>\n    </div>\n    <div class=\"dropdown-menu\" *ngIf=\"showMenu\" (clickOutside)=\"showMenu = false\">\n      <div class=\"icon-item\" *ngFor=\"let item of collection\" (click)=\"selectItem(item)\" [class.active]=\"item === activeItem\">\n        <co-icon [iconData]=\"item.icon\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\"></co-icon>\n        <div class=\"label\">{{ item.label }}</div>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"icon-item active\" [class.menu-opened]=\"showMenu\" (click)=\"toggleMenu()\">\n      <co-icon [iconData]=\"activeItem.icon\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\"></co-icon>\n      <co-icon class=\"drop-arrow\" [iconData]=\"icons.getIcon(Icon.ArrowPointDown)\"></co-icon>\n    </div>\n    <div class=\"dropdown-menu\" *ngIf=\"showMenu\" (clickOutside)=\"onClickOutside()\">\n      <div class=\"icon-item\" *ngFor=\"let item of collection\" (click)=\"selectItem(item)\"\n           [class.active]=\"item === activeItem\">\n        <co-icon [iconData]=\"item.icon\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\"></co-icon>\n        <div class=\"label\">{{ item.label }}</div>\n      </div>\n      <div class=\"picking-type-wrapper\" *ngIf=\"showSubCategories\">\n        <div class=\"button-wrapper\" *ngFor=\"let subCategory of subCategories\" (click)=\"handlePickingCategoryClicked(subCategory)\">\n          <co-icon class=\"co-transaction-button-bar-icon\" [iconData]=\"subCategory.icon\"></co-icon>\n          <span class=\"button-title\">{{subCategory.label}}</span>\n        </div>\n      </div>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     ListOfIconsComponent.ctorParameters = function () { return [
+        { type: IconCacheService },
         { type: IconCacheService }
     ]; };
     ListOfIconsComponent.propDecorators = {
@@ -14091,8 +14115,9 @@
     ];
 
     var HourSchedulingComponent = /** @class */ (function () {
-        function HourSchedulingComponent(cdRef) {
+        function HourSchedulingComponent(cdRef, _datepipe) {
             this.cdRef = cdRef;
+            this._datepipe = _datepipe;
             this.showClass = true;
             this.customTemplateUsed = false;
             this.hours = [];
@@ -14100,21 +14125,28 @@
             this.draggedObject = null;
         }
         HourSchedulingComponent.prototype.ngOnInit = function () {
+            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();
         };
         HourSchedulingComponent.prototype.generateTimeBlocks = function () {
-            var startTime = this.schedule[this.startTimeProp];
-            var endTime = this.schedule[this.endTimeProp];
             var objectsList = this.schedule[this.objectsProp];
-            for (var hour = startTime; hour <= endTime; hour++) {
+            for (var 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);
             }
         };
-        HourSchedulingComponent.prototype.getObjectsForHour = function (hour, objectsList) {
+        HourSchedulingComponent.prototype._getObjectsForHour = function (hour, objectsList) {
+            var _this = this;
             var objectsForHour = [];
             objectsList.forEach(function (obj) {
-                if (obj.start === hour) {
+                if (_this.convertToHourNotation(obj[_this.startTimeProp]) === hour) {
                     objectsForHour.push(Object.assign({}, obj));
                 }
             });
@@ -14128,49 +14160,77 @@
             var currentHourSpan = currentTarget.parentElement.parentElement.querySelector('.hour-label span');
             var currentHour = currentHourSpan.textContent;
             this.draggedObject = obj;
-            event.dataTransfer.setData('text', JSON.stringify({ obj: obj, currentHour: currentHour }));
+            event.dataTransfer.setData('text', JSON.stringify({ obj: this.draggedObject, currentHour: currentHour }));
+        };
+        HourSchedulingComponent.prototype.onCustomDragStart = function (event, obj) {
+            this.onDragStart(event, obj);
         };
         HourSchedulingComponent.prototype.onDragOver = function (event) {
             event.preventDefault();
         };
         HourSchedulingComponent.prototype.onDrop = function (event, hour) {
+            var _a;
             var _this = this;
             event.preventDefault();
+            event.stopPropagation();
             var data = JSON.parse(event.dataTransfer.getData('text'));
+            if (!data || !data.obj) {
+                return;
+            }
             var newStartHour = parseInt(hour.split(':')[0], 10);
             var newEndHour = newStartHour + 1;
-            data.obj.start = newStartHour;
-            data.obj.end = newEndHour;
-            var currentHourBlock = data.currentHour;
-            this.scheduledObjects[currentHourBlock] = this.scheduledObjects[currentHourBlock].filter(function (o) { return o !== _this.draggedObject; });
+            var originalStartHour = this.convertToHourNotation(data.obj[this.startTimeProp]);
+            // Get the unique identifier value from the object using the `idProp`
+            var objId = data.obj[this.idProp];
+            // Ensure we create a new object to avoid mutation issues
+            var updatedObject = Object.assign(Object.assign({}, data.obj), { start: newStartHour, end: newEndHour });
+            var updatedObject2 = Object.assign(Object.assign({}, data.obj), (_a = {}, _a[this.startTimeProp] = this.createDate(newStartHour), _a[this.endTimeProp] = this.createDate(newEndHour), _a));
+            // Remove the object from its old hour block using its unique id
+            var originalHourBlock = this.formatHour(originalStartHour);
+            this.scheduledObjects[originalHourBlock] = this.scheduledObjects[originalHourBlock].filter(function (o) { return o[_this.idProp] !== objId; });
+            // Add the object to the new hour block
             var 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();
         };
+        HourSchedulingComponent.prototype.convertToHourNotation = function (date) {
+            return parseInt(this._datepipe.transform(new Date(date).toISOString(), 'H:mm'));
+        };
+        HourSchedulingComponent.prototype.createDate = function (hours) {
+            var date = new Date();
+            date.setHours(hours);
+            date.setMinutes(0, 0, 0);
+            return date;
+        };
         return HourSchedulingComponent;
     }());
     HourSchedulingComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-hour-scheduling',
-                    template: "\n    <div class=\"time-block\" *ngFor=\"let hour of hours\">\n      <div class=\"hour-label\"><span [textContent]=\"hour\"></span></div>\n      <div class=\"object-display\"\n           (dragover)=\"onDragOver($event)\"\n           (drop)=\"onDrop($event, hour)\">\n        <ng-container *ngIf=\"!customTemplateUsed\">\n          <ng-container *ngIf=\"scheduledObjects[hour]\">\n            <div *ngFor=\"let obj of scheduledObjects[hour]\" class=\"scheduled-object\"\n                 [draggable]=\"true\"\n                 (dragstart)=\"onDragStart($event, obj)\">\n              <span class=\"title\" [textContent]=\"obj.title\"></span>\n              <span class=\"sub-title\" [textContent]=\"obj.subTitle\"></span>\n            </div>\n          </ng-container>\n        </ng-container>\n        <ng-template #customContent *ngIf=\"customTemplateUsed\">\n          <ng-container *ngTemplateOutlet=\"customTemplate; context: { objects: scheduledObjects[hour] }\">\n          </ng-container>\n        </ng-template>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"time-block\" *ngFor=\"let hour of hours\">\n      <div class=\"hour-label\"><span [textContent]=\"hour\"></span></div>\n      <div\n        class=\"object-display\"\n        (dragover)=\"onDragOver($event)\"\n        (drop)=\"onDrop($event, hour)\"\n      >\n        <ng-container *ngIf=\"!customTemplateUsed\">\n          <ng-container *ngIf=\"scheduledObjects[hour]\">\n            <div\n              *ngFor=\"let obj of scheduledObjects[hour]\"\n              class=\"scheduled-object\"\n              [draggable]=\"true\"\n              (dragstart)=\"onDragStart($event, obj)\"\n            >\n              <span class=\"title\" [textContent]=\"obj.title\"></span>\n              <span class=\"sub-title\" [textContent]=\"obj.subTitle\"></span>\n            </div>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"customTemplateUsed\">\n          <ng-template\n            [ngTemplateOutlet]=\"customTemplate\"\n            [ngTemplateOutletContext]=\"{\n              hour: hour,\n              objects: scheduledObjects[hour]\n            }\"\n          >\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     HourSchedulingComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef },
+        { type: common.DatePipe }
     ]; };
     HourSchedulingComponent.propDecorators = {
-        showClass: [{ type: i0.HostBinding, args: ['class.co-hour-scheduling',] }],
         schedule: [{ type: i0.Input }],
         startTimeProp: [{ type: i0.Input }],
         endTimeProp: [{ type: i0.Input }],
         objectsProp: [{ type: i0.Input }],
+        childProp: [{ type: i0.Input }],
         customTemplate: [{ type: i0.Input }],
-        customTemplateUsed: [{ type: i0.Input }]
+        customTemplateUsed: [{ type: i0.Input }],
+        idProp: [{ type: i0.Input }],
+        generateTimeBlocks: [{ type: i0.HostBinding, args: ['class.co-hour-scheduling',] }]
     };
 
     var HourSchedulingTestObjectComponent = /** @class */ (function () {
@@ -14211,7 +14271,8 @@
                     exports: [
                         HourSchedulingComponent,
                         HourSchedulingTestObjectComponent
-                    ]
+                    ],
+                    providers: [common.DatePipe]
                 },] }
     ];