@colijnit/corecomponents_v12 258.1.4 → 258.1.5

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -14987,8 +14987,19 @@
 
     var HourSchedulingExpandableTemplateComponent = /** @class */ (function () {
         function HourSchedulingExpandableTemplateComponent() {
-            this.objects = [];
+            this.layouts = [];
         }
+        Object.defineProperty(HourSchedulingExpandableTemplateComponent.prototype, "objects", {
+            get: function () {
+                return this._objects;
+            },
+            set: function (objects) {
+                this._objects = objects;
+                this.layouts = this.calculateLeftAndWidthOfObjects();
+            },
+            enumerable: false,
+            configurable: true
+        });
         HourSchedulingExpandableTemplateComponent.prototype.showClass = function () {
             return true;
         };
@@ -14996,28 +15007,53 @@
             onDragStartCustom === null || onDragStartCustom === void 0 ? void 0 : onDragStartCustom.call(obj);
             event.dataTransfer.setData("text", JSON.stringify({ obj: obj }));
         };
-        HourSchedulingExpandableTemplateComponent.prototype.leftForObject = function (index, objects) {
-            if (index === 0) {
-                return 0;
-            }
-            else {
-                return index * this.widthForObject(index, objects);
-            }
-        };
-        HourSchedulingExpandableTemplateComponent.prototype.widthForObject = function (index, objects) {
-            if (objects.length > 1) {
-                return 100 / objects.length;
-            }
-            if (objects.length === 1) {
-                return 100;
-            }
+        HourSchedulingExpandableTemplateComponent.prototype.calculateLeftAndWidthOfObjects = function () {
+            var layoutData = new Array(this._objects.length);
+            // Helper: check if two time ranges overlap
+            var isOverlapping = function (startA, endA, startB, endB) {
+                return startA < endB && startB < endA;
+            };
+            // Step 1: build overlap groups
+            var overlapGroups = [];
+            var processed = new Set();
+            for (var i = 0; i < this._objects.length; i++) {
+                if (processed.has(i))
+                    continue;
+                var group = [i];
+                var objA = this._objects[i];
+                var startA = new Date(objA.start);
+                var endA = new Date(objA.end);
+                for (var j = i + 1; j < this._objects.length; j++) {
+                    var objB = this._objects[j];
+                    var startB = new Date(objB.start);
+                    var endB = new Date(objB.end);
+                    if (isOverlapping(startA, endA, startB, endB)) {
+                        group.push(j);
+                        processed.add(j);
+                    }
+                }
+                group.forEach(function (index) { return processed.add(index); });
+                overlapGroups.push(group);
+            }
+            // Step 2: assign layout per group
+            overlapGroups.forEach(function (group) {
+                var total = group.length;
+                var width = 100 / total;
+                group.forEach(function (objectIndex, i) {
+                    layoutData[objectIndex] = {
+                        leftPercent: i * width,
+                        widthPercent: width
+                    };
+                });
+            });
+            return layoutData;
         };
         return HourSchedulingExpandableTemplateComponent;
     }());
     HourSchedulingExpandableTemplateComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-hour-scheduling-expandable-template",
-                    template: "\n        <div class=\"row\">\n            <div\n                    *ngFor=\"let obj of objects\"\n                    [class]=\"'custom-scheduled-object'\"\n                    [class.selected]=\"obj['selected']\"\n                    [draggable]=\"!obj['selected']\"\n                    [style.--height]=\"obj['height'] + 'px'\"\n                    [style.--top]=\"obj['top'] + 'px'\"\n                    [style.--left]=\"leftForObject(objects.indexOf(obj), objects) + '%'\"\n                    [style.--width]=\"widthForObject(objects.indexOf(obj), objects) + '%'\"\n                    (click)=\"onSelectBlock(obj)\"\n                    (dragstart)=\"onExpandableDragStart($event, obj, onDragStartCustom(obj) )\">\n\n                <div\n                        *ngIf=\"obj['selected']\"\n                        class=\"top-resizer\"\n                        (mousedown)=\"onResizeStart($event, obj, 'top')\"></div>\n                <ng-template\n                        [ngTemplateOutlet]=\"objectTemplate\"\n                        [ngTemplateOutletContext]=\"{\n              object: obj\n            }\"\n                >\n                </ng-template>\n                <div *ngIf=\"obj['selected']\"\n                     class=\"bottom-resizer\"\n                     (mousedown)=\"onResizeStart($event, obj, 'bottom')\"></div>\n            </div>\n        </div>\n    ",
+                    template: "\n       \n            <div\n                    *ngFor=\"let obj of objects\"\n                    [class]=\"'custom-scheduled-object'\"\n                    [class.selected]=\"obj.selected\"\n                    [draggable]=\"!obj.selected\"\n                    [style.--height]=\"obj.height + 'px'\"\n                    [style.--top]=\"obj.top + 'px'\"\n                    [style.--left]=\"layouts[objects.indexOf(obj)].leftPercent + '%'\"\n                    [style.--width]=\"layouts[objects.indexOf(obj)].widthPercent + '%'\"\n                    (click)=\"onSelectBlock(obj)\"\n                    (dragstart)=\"onExpandableDragStart($event, obj, onDragStartCustom(obj) )\">\n\n                <div\n                        *ngIf=\"obj.selected\"\n                        class=\"top-resizer\"\n                        (mousedown)=\"onResizeStart($event, obj, 'top')\"></div>\n                <ng-template\n                        [ngTemplateOutlet]=\"objectTemplate\"\n                        [ngTemplateOutletContext]=\"{\n              object: obj\n            }\"\n                >\n                </ng-template>\n                <div *ngIf=\"obj.selected\"\n                     class=\"bottom-resizer\"\n                     (mousedown)=\"onResizeStart($event, obj, 'bottom')\"></div>\n            </div>\n    ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -15027,6 +15063,8 @@
         onDragStartCustom: [{ type: i0.Input }],
         onResizeStart: [{ type: i0.Input }],
         onSelectBlock: [{ type: i0.Input }],
+        startTimeProp: [{ type: i0.Input }],
+        endTimeProp: [{ type: i0.Input }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-hour-scheduling-expandable-template",] }]
     };