@colijnit/corecomponents_v12 255.1.12 → 255.1.14

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -7013,9 +7013,11 @@
             this.showYearSelection = true;
         };
         CalendarTemplateComponent.prototype.selectDate = function (day) {
-            this.selectedDate = day;
-            this._fillDatesBetweenSelected();
-            this.dateSelected.emit(new Date(this.selectedDate));
+            if (day) {
+                this.selectedDate = day;
+                this._fillDatesBetweenSelected();
+                this.dateSelected.emit(new Date(this.selectedDate));
+            }
         };
         CalendarTemplateComponent.prototype.selectMonth = function (month) {
             this.showSelectedMonth = month;
@@ -14320,6 +14322,331 @@
         showClass: [{ type: i0.HostBinding, args: ['class.co-hour-scheduling',] }]
     };
 
+    var HourSchedulingExpandableComponent = /** @class */ (function () {
+        function HourSchedulingExpandableComponent(cdRef, eRef) {
+            this.cdRef = cdRef;
+            this.eRef = eRef;
+            this.hourLabels = [];
+            this.scheduledObjects = [];
+            this.resizing = false;
+            this.currentResizingObject = null;
+            this.currentDraggingObject = null;
+            this.MIN_HEIGHT = 30;
+            this._schedule = {};
+            this.timeChangeEvent = new i0.EventEmitter();
+            this.newObjectPlanEvent = new i0.EventEmitter();
+            this.moveBetweenCalendarsEvent = new i0.EventEmitter();
+            this.showClass = true;
+        }
+        Object.defineProperty(HourSchedulingExpandableComponent.prototype, "schedule", {
+            get: function () {
+                return this._schedule;
+            },
+            set: function (value) {
+                if (value && value !== this._schedule) {
+                    this.renderObjects();
+                }
+                this._schedule = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        HourSchedulingExpandableComponent.prototype.onResize = function (event) {
+            event.target.innerWidth;
+        };
+        HourSchedulingExpandableComponent.prototype.clickOut = function (event) {
+            if (!this.eRef.nativeElement.contains(event.target)) {
+                this.handleDeselectAll();
+            }
+        };
+        HourSchedulingExpandableComponent.prototype.ngOnInit = function () {
+            this.generateTimeBlocks();
+            if (this.schedule) {
+                this.renderObjects();
+            }
+            this._calculateSchedulingObjectProperties();
+        };
+        // Calculate properties for each scheduled object to determine resizer visibility
+        HourSchedulingExpandableComponent.prototype._calculateSchedulingObjectProperties = function () {
+            var _this = this;
+            var scheduleStart = this.convertDateToEuropean(this.schedule[this.childProp][this.startTimeProp]);
+            var scheduleEnd = this.convertDateToEuropean(this.schedule[this.childProp][this.endTimeProp]);
+            this.scheduledObjects.forEach(function (obj) {
+                obj.showTopResizer = _this.timeDifference(scheduleStart, obj.start) > 0; // Show top resizer if the start time differs
+                obj.showBottomResizer = _this.timeDifference(scheduleEnd, obj.end) > 0; // Show bottom resizer if the end time differs
+            });
+        };
+        // Find the next object in the scheduledObjects list
+        HourSchedulingExpandableComponent.prototype._findNextObject = function (currentObject) {
+            var currentIndex = this.scheduledObjects.indexOf(currentObject);
+            if (currentIndex >= 0 && currentIndex < this.scheduledObjects.length - 1) {
+                return this.scheduledObjects[currentIndex + 1]; // The next object in the list
+            }
+            return null; // No next object (it's the last one)
+        };
+        // Find the previous object in the scheduledObjects list
+        HourSchedulingExpandableComponent.prototype._findPreviousObject = function (currentObject) {
+            var currentIndex = this.scheduledObjects.indexOf(currentObject);
+            if (currentIndex > 0) {
+                return this.scheduledObjects[currentIndex - 1]; // The previous object in the list
+            }
+            return null; // No previous object (it's the first one)
+        };
+        HourSchedulingExpandableComponent.prototype.renderObjects = function () {
+            var _this = this;
+            if (this.schedule) {
+                if (this.scheduledObjects.length > 1) {
+                    this.scheduledObjects = [];
+                }
+                var objects = this.schedule[this.objectsProp];
+                var schedulingObjects_1 = [];
+                if (objects && objects.length > 0) {
+                    objects.forEach(function (object) {
+                        var topDifference = _this.timeDifference(_this.schedule[_this.childProp][_this.startTimeProp], object[_this.startTimeProp]);
+                        schedulingObjects_1.push({
+                            title: object['title'],
+                            subTitle: object['subTitle'],
+                            start: _this.convertDateToEuropean(object[_this.startTimeProp]),
+                            end: _this.convertDateToEuropean(object[_this.endTimeProp]),
+                            id: object[_this.idProp],
+                            height: _this.timeDifference(object[_this.startTimeProp], object[_this.endTimeProp]),
+                            top: topDifference,
+                            selected: false
+                        });
+                    });
+                }
+                this.scheduledObjects = schedulingObjects_1;
+                this.cdRef.markForCheck();
+                this.cdRef.detectChanges();
+            }
+        };
+        HourSchedulingExpandableComponent.prototype.onSelectBlock = function (obj) {
+            obj.selected = !obj.selected;
+            if (obj.selected) {
+                this.scheduledObjects.forEach(function (scheduledObject) {
+                    if (scheduledObject.selected && scheduledObject !== obj) {
+                        scheduledObject.selected = false;
+                    }
+                });
+            }
+            this.currentResizingObject = obj;
+        };
+        HourSchedulingExpandableComponent.prototype.onDragStartCustom = function (obj) {
+            this.currentDraggingObject = obj;
+        };
+        HourSchedulingExpandableComponent.prototype.handleDrop = function (dragEvent, hour) {
+            var _this = this;
+            if (this.currentDraggingObject) {
+                //The order was scheduled and needs to be moved
+                var start = this.currentDraggingObject.start;
+                var hourSplit = hour.split(":");
+                start.setHours(parseInt(hourSplit[0]));
+                start.setMinutes(parseInt(hourSplit[1]));
+                var scheduledObject = this.scheduledObjects.find(function (scheduledObject) { return scheduledObject.id === _this.currentDraggingObject.id; });
+                scheduledObject.start = start;
+                var originalObject = this.schedule[this.objectsProp].find(function (object) { return object[_this.idProp] === _this.currentDraggingObject.id; });
+                originalObject[this.startTimeProp] = start;
+                var end = this.addMinutes(originalObject[this.startTimeProp], this.currentDraggingObject.height);
+                originalObject[this.endTimeProp] = end;
+                scheduledObject.end = end;
+                scheduledObject.top = this.timeDifference(this.schedule[this.childProp][this.startTimeProp], scheduledObject.start);
+                scheduledObject.height = this.timeDifference(scheduledObject.start, scheduledObject.end);
+                this.timeChangeEvent.emit(originalObject);
+                this.currentDraggingObject = undefined;
+            }
+            else {
+                var parsed = this.tryParseJSONObject(dragEvent.dataTransfer.getData("text"));
+                if (!parsed) {
+                    this.newObjectPlanEvent.emit({ currentHour: hour, data: parsed.toString() });
+                    return;
+                }
+                this.moveBetweenCalendarsEvent.emit({ hour: hour, data: parsed });
+            }
+        };
+        HourSchedulingExpandableComponent.prototype.allowDrop = function (event, hour) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.currentDraggingObject) {
+                var newStartDate_1 = this.convertDateToEuropean(this.currentDraggingObject.start);
+                var hourSplit = hour.split(":");
+                newStartDate_1.setHours(parseInt(hourSplit[0]));
+                newStartDate_1.setHours(parseInt(hourSplit[1]));
+                if (this.scheduledObjects.find(function (scheduledObject) { return scheduledObject.start === newStartDate_1; })) {
+                    return false;
+                }
+                else {
+                    return true;
+                }
+            }
+        };
+        // Triggered when resizing starts
+        HourSchedulingExpandableComponent.prototype.onResizeStart = function (event, obj, direction) {
+            this.resizing = true;
+            this.resizeDirection = direction;
+            this.currentResizingObject = obj;
+            this.initialY = event.clientY;
+            this.initialHeight = obj.height || 0;
+            this.initialTop = obj.top || 0;
+            // Listen to mousemove and mouseup events globally
+            document.addEventListener('mousemove', this.onResizing.bind(this));
+            document.addEventListener('mouseup', this.onResizeEnd.bind(this));
+        };
+        // Handle resizing with snapping to 30px increments and minimum height restriction
+        HourSchedulingExpandableComponent.prototype.onResizing = function (event) {
+            if (!this.resizing || !this.currentResizingObject)
+                return;
+            var deltaY = event.clientY - this.initialY;
+            var snappedDeltaY = Math.round(deltaY / 30) * 30;
+            if (this.resizeDirection === 'bottom') {
+                var nextObject = this._findNextObject(this.currentResizingObject);
+                var maxHeight = nextObject ? nextObject.top - this.currentResizingObject.top : Infinity;
+                // Block expanding beyond the next object and shrinking below 30px
+                var newHeight = Math.max(this.initialHeight + snappedDeltaY, this.MIN_HEIGHT);
+                this.currentResizingObject.height = Math.min(newHeight, maxHeight);
+            }
+            else if (this.resizeDirection === 'top') {
+                var previousObject = this._findPreviousObject(this.currentResizingObject);
+                var minTop = previousObject ? previousObject.top + previousObject.height : 0;
+                var newHeight = Math.max(this.initialHeight - snappedDeltaY, this.MIN_HEIGHT);
+                var newTop = this.initialTop + (this.initialHeight - newHeight);
+                // Block moving above the previous object's bottom and shrinking below MIN_HEIGHT
+                if (newHeight >= this.MIN_HEIGHT && newTop >= minTop) {
+                    this.currentResizingObject.top = newTop;
+                    this.currentResizingObject.height = newHeight;
+                }
+            }
+            // Ensure change detection happens
+            this.cdRef.detectChanges();
+        };
+        // Triggered when resizing ends
+        HourSchedulingExpandableComponent.prototype.onResizeEnd = function (event) {
+            var _this = this;
+            var object = this.currentResizingObject;
+            if (object && object.selected) {
+                var originalObject = this.schedule[this.objectsProp].find(function (scheduledObject) { return scheduledObject[_this.idProp] === object.id; });
+                if (originalObject) {
+                    // Start date calculation first
+                    originalObject[this.startTimeProp] = this.addMinutes(this.convertDateToEuropean(this.schedule[this.childProp][this.startTimeProp]), object.top);
+                    // Then  end date calculation based on the height of the object
+                    originalObject[this.endTimeProp] = this.addMinutes(this.convertDateToEuropean(originalObject[this.startTimeProp]), object.height);
+                }
+                this.timeChangeEvent.emit(originalObject);
+                this.resizing = false;
+                this.currentResizingObject.selected = false;
+                this.currentResizingObject = null;
+            }
+            // Remove global event listeners
+            document.removeEventListener('mousemove', this.onResizing.bind(this));
+            document.removeEventListener('mouseup', this.onResizeEnd.bind(this));
+        };
+        HourSchedulingExpandableComponent.prototype.timeDifference = function (date1, date2) {
+            var difference = this.convertDateToEuropean(date1).getTime() / 1000 - this.convertDateToEuropean(date2).getTime() / 1000;
+            return Math.abs(difference / 60);
+        };
+        HourSchedulingExpandableComponent.prototype.generateTimeBlocks = function () {
+            var startUnix = !this.childProp ? this.dateToUnixEpoch(this.convertDateToEuropean(this.schedule[this.startTimeProp])) : this.dateToUnixEpoch(this.convertDateToEuropean(this.schedule[this.childProp][this.startTimeProp]));
+            var endUnix = !this.childProp ? this.dateToUnixEpoch(this.convertDateToEuropean(this.schedule[this.endTimeProp])) : this.dateToUnixEpoch(this.convertDateToEuropean(this.schedule[this.childProp][this.endTimeProp]));
+            var interval = 60 * 60;
+            for (var hourCount = startUnix; hourCount <= endUnix; hourCount += interval) {
+                var hour = new Date(hourCount * 1000);
+                var hourString = hour.getHours() + ":" + (hour.getMinutes() === 0 ? '00' : hour.getMinutes());
+                this.hourLabels.push(hourString);
+            }
+        };
+        HourSchedulingExpandableComponent.prototype.dateToUnixEpoch = function (date) {
+            return Math.floor(date.getTime()) / 1000;
+        };
+        HourSchedulingExpandableComponent.prototype.addMinutes = function (date, minutes) {
+            return new Date(date.getTime() + minutes * 60000);
+        };
+        HourSchedulingExpandableComponent.prototype.tryParseJSONObject = function (jsonString) {
+            try {
+                var o = JSON.parse(jsonString);
+                if (o && typeof o === "object") {
+                    return o;
+                }
+            }
+            catch (e) {
+            }
+            return false;
+        };
+        HourSchedulingExpandableComponent.prototype.addHalfHour = function (hour) {
+            var split = hour.split(":");
+            split[1] = "30";
+            return split.join(':');
+        };
+        HourSchedulingExpandableComponent.prototype.convertTZ = function (date, tzString) {
+            return new Date((typeof date === "string" ? new Date(date) : date).toLocaleString("en-US", { timeZone: tzString }));
+        };
+        HourSchedulingExpandableComponent.prototype.convertDateToEuropean = function (date) {
+            return this.convertTZ(date, 'Europe/Amsterdam');
+        };
+        HourSchedulingExpandableComponent.prototype.handleDeselectAll = function () {
+            this.scheduledObjects.forEach(function (scheduledObject) {
+                if (scheduledObject.selected) {
+                    scheduledObject.selected = false;
+                }
+            });
+        };
+        return HourSchedulingExpandableComponent;
+    }());
+    HourSchedulingExpandableComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'co-hour-scheduling-expandable',
+                    template: "\n    <div class=\"wrapper\">\n      <div class=\"time-block\" *ngFor=\"let hour of hourLabels\">\n        <div class=\"hour-label\"><span [textContent]=\"hour\"></span></div>\n\n        <div class=\"object-display\">\n          <div class=\"first-half-hour object-half\" (dragover)=\"allowDrop($event, hour)\"\n               (drop)=\"handleDrop($event, hour)\">\n          </div>\n\n          <div class=\"second-half-hour object-half\" (dragover)=\"allowDrop($event, addHalfHour(hour))\"\n               (drop)=\"handleDrop($event, addHalfHour(hour))\">\n          </div>\n        </div>\n      </div>\n\n      <div class=\"scheduled-objects\" >\n        <ng-container>\n          <ng-template\n            [ngTemplateOutlet]=\"customTemplate\"\n            [ngTemplateOutletContext]=\"{\n              objects: scheduledObjects,\n              onSelectBlock: this.onSelectBlock.bind(this),\n              onResizeStart: this.onResizeStart.bind(this),\n              onDragStartCustom: this.onDragStartCustom.bind(this)\n\n            }\"\n          >\n            <ng-content></ng-content>\n          </ng-template>\n        </ng-container>\n      </div>\n\n    </div>\n\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    HourSchedulingExpandableComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef }
+    ]; };
+    HourSchedulingExpandableComponent.propDecorators = {
+        schedule: [{ type: i0.Input }],
+        startTimeProp: [{ type: i0.Input }],
+        endTimeProp: [{ type: i0.Input }],
+        objectsProp: [{ type: i0.Input }],
+        childProp: [{ type: i0.Input }],
+        customTemplate: [{ type: i0.Input }],
+        idProp: [{ type: i0.Input }],
+        timeChangeEvent: [{ type: i0.Output }],
+        newObjectPlanEvent: [{ type: i0.Output }],
+        moveBetweenCalendarsEvent: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-hour-scheduling-expandable',] }],
+        onResize: [{ type: i0.HostListener, args: ['window:resize', ['$event'],] }],
+        clickOut: [{ type: i0.HostListener, args: ['document:click', ['$event'],] }]
+    };
+
+    var HourSchedulingExpandableTemplateComponent = /** @class */ (function () {
+        function HourSchedulingExpandableTemplateComponent() {
+            this.objects = [];
+        }
+        HourSchedulingExpandableTemplateComponent.prototype.showClass = function () {
+            return true;
+        };
+        HourSchedulingExpandableTemplateComponent.prototype.onExpandableDragStart = function (event, obj, onDragStartCustom) {
+            onDragStartCustom === null || onDragStartCustom === void 0 ? void 0 : onDragStartCustom.call(obj);
+            event.dataTransfer.setData("text", JSON.stringify({ obj: obj }));
+        };
+        return HourSchedulingExpandableTemplateComponent;
+    }());
+    HourSchedulingExpandableTemplateComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-hour-scheduling-expandable-template",
+                    template: "\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        (click)=\"onSelectBlock(obj)\"\n        (dragstart)=\"onExpandableDragStart($event, obj, onDragStartCustom(obj) )\">\n\n        <div\n          *ngIf=\"obj['selected'] && obj['showTopResizer']\"\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'] && obj['showBottomResizer']\"\n             class=\"bottom-resizer\"\n             (mousedown)=\"onResizeStart($event, obj, 'bottom')\"></div>\n      </div>\n    ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    HourSchedulingExpandableTemplateComponent.propDecorators = {
+        objectTemplate: [{ type: i0.Input }],
+        objects: [{ type: i0.Input }],
+        onDragStartCustom: [{ type: i0.Input }],
+        onResizeStart: [{ type: i0.Input }],
+        onSelectBlock: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-hour-scheduling-expandable-template",] }]
+    };
+
     var HourSchedulingTestObjectComponent = /** @class */ (function () {
         function HourSchedulingTestObjectComponent() {
         }
@@ -14336,7 +14663,7 @@
                 },] }
     ];
     HourSchedulingTestObjectComponent.propDecorators = {
-        showClass: [{ type: i0.HostBinding, args: ["class.co-test-object",] }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-hour-scheduling-test-object",] }],
         title: [{ type: i0.Input }],
         subTitle: [{ type: i0.Input }]
     };
@@ -14363,6 +14690,29 @@
                 },] }
     ];
 
+    var HourSchedulingExpandableComponentModule = /** @class */ (function () {
+        function HourSchedulingExpandableComponentModule() {
+        }
+        return HourSchedulingExpandableComponentModule;
+    }());
+    HourSchedulingExpandableComponentModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        HourSchedulingComponentModule,
+                    ],
+                    declarations: [
+                        HourSchedulingExpandableComponent,
+                        HourSchedulingExpandableTemplateComponent
+                    ],
+                    exports: [
+                        HourSchedulingExpandableComponent,
+                        HourSchedulingExpandableTemplateComponent
+                    ],
+                    providers: [common.DatePipe]
+                },] }
+    ];
+
     /*
      * Public API Surface of corecomponents
      */
@@ -14421,6 +14771,9 @@
     exports.GridToolbarModule = GridToolbarModule;
     exports.HourSchedulingComponent = HourSchedulingComponent;
     exports.HourSchedulingComponentModule = HourSchedulingComponentModule;
+    exports.HourSchedulingExpandableComponent = HourSchedulingExpandableComponent;
+    exports.HourSchedulingExpandableComponentModule = HourSchedulingExpandableComponentModule;
+    exports.HourSchedulingExpandableTemplateComponent = HourSchedulingExpandableTemplateComponent;
     exports.IconCacheService = IconCacheService;
     exports.IconCollapseHandleComponent = IconCollapseHandleComponent;
     exports.IconCollapseHandleModule = IconCollapseHandleModule;