@colijnit/corecomponents_v12 258.1.3 → 258.1.5

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -7109,9 +7109,14 @@
         };
         CalendarTemplateComponent.prototype.selectDate = function (day) {
             if (day) {
-                this.selectedDate = day;
-                this._fillDatesBetweenSelected();
-                if (this.doubleCalendar) {
+                if (!this.doubleCalendar) {
+                    // Single calendar → select and close
+                    this.selectedDate = day;
+                    this.setAndClose();
+                }
+                else {
+                    this.selectedDate = day;
+                    this._fillDatesBetweenSelected();
                     this.dateSelected.emit(new Date(this.selectedDate));
                 }
             }
@@ -7247,7 +7252,7 @@
     CalendarTemplateComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "calendar-template",
-                    template: "\n      <div class=\"calendar\">\n        <div class=\"selected-date-display\">\n            <span *ngIf=\"selectedDate\" class=\"selected-date-year\">\n                {{ selectedDate.getFullYear() }}\n            </span>\n            <span *ngIf=\"selectedDate\" class=\"selected-date-day\">\n              {{ selectedDate | date: 'EEE d MMM' }}\n            </span>\n            <span *ngIf=\"!selectedDate\" class=\"no-date-selected\" [textContent]=\"'Selecteer datum'\"></span>\n        </div>\n        <div class=\"calendar-header\" *ngIf=\"monthSelection || yearSelection\">\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointLeft\" (click)=\"prevMonth()\"></co-icon>\n\n          <div class=\"calendar-header-title-wrapper\">\n            <span class=\"calendar-header-title\" [textContent]=\"monthSelection ? monthHeader : yearHeader\"\n                  (click)=\"monthSelection ? openMonthSelection() : openYearSelection()\"\n            ></span>\n          </div>\n\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointRight\" (click)=\"nextMonth()\"></co-icon>\n        </div>\n\n        <div class=\"selection-grid month\" *ngIf=\"showMonthSelection\">\n          <div *ngFor=\"let month of monthSelectionNames\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectMonth(month)\">\n            <ng-container *ngIf=\"month\">\n              <div class=\"month\" [textContent]=\"month\"></div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"selection-grid year\" *ngIf=\"showYearSelection\">\n          <div *ngFor=\"let year of yearSelectionYears\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectYear(year)\"\n               [textContent]=\"year\">\n            <ng-container *ngIf=\"year\">\n              <div class=\"year\" [textContent]=\"year\"></div>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"calendar-wrapper\">\n          <div class=\"week-wrapper\" *ngIf=\"showWeekNumbers && showCalendarBody\">\n            <div class=\"week-number\" [textContent]=\"'W'\"></div>\n            <div class=\"week-number\" *ngFor=\"let weekNumber of weekNumbers\">\n              {{ weekNumber }}\n            </div>\n          </div>\n          <div class=\"calendar-body\" *ngIf=\"showCalendarBody\">\n            <div class=\"day-names\">\n              <div class=\"weekday\" *ngFor=\"let dayName of dayNames\" [textContent]=\"dayName\"></div>\n            </div>\n            <div *ngFor=\"let day of daysInMonth\" class=\"calendar-day\"\n                 [class.highlighted-day]=\"daysToHighlight.includes(day)\"\n                 [class.selected-day]=\"selectedDate && (day && day.getTime() === selectedDate.getTime()) ||\n            secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||\n            temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())\"\n                 (click)=\"selectDate(day)\"\n                 (mouseover)=\"handleMouseOverDay(day)\">\n              <!-- Day number -->\n              <ng-container *ngIf=\"day\">\n                <div class=\"day-number\" [textContent]=\"day.getDate()\"></div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n        <div class=\"calendar-action-buttons\" *ngIf=\"showButtons\">\n          <span class=\"set-and-close-button\" (click)=\"setAndClose()\">Instellen</span>\n          <span class=\"clear-date-button\" (click)=\"clearDate()\">Wissen</span>\n          <span class=\"cancel-button\" (click)=\"closeDate()\">Annuleren</span>\n        </div>\n      </div>\n  ",
+                    template: "\n      <div class=\"calendar\">\n        <div class=\"selected-date-display\">\n            <span *ngIf=\"selectedDate\" class=\"selected-date-year\">\n                {{ selectedDate.getFullYear() }}\n            </span>\n            <span *ngIf=\"selectedDate\" class=\"selected-date-day\">\n              {{ selectedDate | date: 'EEE d MMM' }}\n            </span>\n            <span *ngIf=\"!selectedDate\" class=\"no-date-selected\" [textContent]=\"'Selecteer datum'\"></span>\n        </div>\n        <div class=\"calendar-header\" *ngIf=\"monthSelection || yearSelection\">\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointLeft\" (click)=\"prevMonth()\"></co-icon>\n\n          <div class=\"calendar-header-title-wrapper\">\n            <span class=\"calendar-header-title\" [textContent]=\"monthSelection ? monthHeader : yearHeader\"\n                  (click)=\"monthSelection ? openMonthSelection() : openYearSelection()\"\n            ></span>\n          </div>\n\n          <co-icon class=\"calendar-change-month-button\" [icon]=\"icons.ArrowPointRight\" (click)=\"nextMonth()\"></co-icon>\n        </div>\n\n        <div class=\"selection-grid month\" *ngIf=\"showMonthSelection\">\n          <div *ngFor=\"let month of monthSelectionNames\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectMonth(month)\">\n            <ng-container *ngIf=\"month\">\n              <div class=\"month\" [textContent]=\"month\"></div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"selection-grid year\" *ngIf=\"showYearSelection\">\n          <div *ngFor=\"let year of yearSelectionYears\"\n               class=\"calendar-month-or-year\"\n               (click)=\"selectYear(year)\"\n               [textContent]=\"year\">\n            <ng-container *ngIf=\"year\">\n              <div class=\"year\" [textContent]=\"year\"></div>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"calendar-wrapper\">\n          <div class=\"week-wrapper\" *ngIf=\"showWeekNumbers && showCalendarBody\">\n            <div class=\"week-number\" [textContent]=\"'W'\"></div>\n            <div class=\"week-number\" *ngFor=\"let weekNumber of weekNumbers\">\n              {{ weekNumber }}\n            </div>\n          </div>\n          <div class=\"calendar-body\" *ngIf=\"showCalendarBody\">\n            <div class=\"day-names\">\n              <div class=\"weekday\" *ngFor=\"let dayName of dayNames\" [textContent]=\"dayName\"></div>\n            </div>\n            <div *ngFor=\"let day of daysInMonth\" class=\"calendar-day\"\n                 [class.highlighted-day]=\"daysToHighlight.includes(day)\"\n                 [class.selected-day]=\"selectedDate && (day && day.getTime() === selectedDate.getTime()) ||\n            secondSelectedDate && (day && day.getTime() === secondSelectedDate.getTime()) ||\n            temporarySelectedSecondaryDate && (day && day.getTime() === temporarySelectedSecondaryDate.getTime())\"\n                 (click)=\"selectDate(day)\"\n                 (mouseover)=\"handleMouseOverDay(day)\">\n              <!-- Day number -->\n              <ng-container *ngIf=\"day\">\n                <div class=\"day-number\" [textContent]=\"day.getDate()\"></div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n        <div class=\"calendar-action-buttons\" *ngIf=\"showButtons\">\n          <span class=\"set-and-close-button\" *ngIf=\"this.doubleCalendar\" (click)=\"setAndClose()\">Instellen</span>\n          <span class=\"clear-date-button\" *ngIf=\"this.selectedDate\" (click)=\"clearDate()\">Wissen</span>\n          <span class=\"cancel-button\" (click)=\"closeDate()\">Annuleren</span>\n        </div>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -14982,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;
         };
@@ -14991,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
                 },] }
     ];
@@ -15022,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",] }]
     };