@colijnit/corecomponents_v12 261.20.2 → 261.20.4

package/fesm2022/colijnit-corecomponents_v12.mjs

@@ -2127,7 +2127,7 @@ class OverlayService {
         this._appRef = _appRef;
         this._injector = _injector;
     }
-    createComponent(compClass, inputs, events, parentRef) {
+    createComponent(compClass, inputs, events) {
         if (this._componentRefExists(compClass)) {
             this._removeComponentRef(compClass);
         }
@@ -2151,8 +2151,7 @@ class OverlayService {
         this._appRef.attachView(componentRef.hostView);
         const domElem = componentRef.hostView
             .rootNodes[0];
-        const container = parentRef?.nativeElement ?? document.body;
-        container.appendChild(domElem);
+        document.body.appendChild(domElem);
         componentRef.onDestroy(() => {
             this._appRef.detachView(componentRef.hostView);
         });
@@ -8180,7 +8179,7 @@ class InputDatePickerComponent extends BaseInputDatePickerDirective {
             }, {
                 dateSelected: (event) => this.handleDateSelected(event),
                 clickedOutside: () => this.toggleCalendar(false) // Close when clicked outside
-            }, this.elementRef);
+            });
         }
         else {
             this.overlayService.removeComponent(this._calendarComponentRef);
@@ -8959,7 +8958,7 @@ class InputDateRangePickerComponent extends BaseInputDatePickerDirective {
                 datesSelected: (event) => this.handleDatesSelected(event),
                 secondDateSelected: () => this.handleSecondDateSelected(),
                 clickedOutside: () => this.toggleCalendar()
-            }, this.elementRef);
+            });
         }
         else {
             this.overlayService.removeComponent(this._doubleCalendarComponentRef);
@@ -14481,12 +14480,12 @@ class ListOfValuesComponent extends BaseInputComponent {
             showToggleAll: this.showToggleAll,
             model: this.model,
             collection: this.collection,
-            optionIcon: this.optionIcon,
+            optionIcon: this.optionIcon
         }, {
             modelChange: (value) => this.optionChosen(value),
             closePopup: () => this.closePopup(),
             keyDown: (event) => this.handleInputKeyDown(event)
-        }, this.elementRef);
+        });
         this.keepFocussed = true;
     }
     removeOptionFromModel(chip) {
@@ -18658,7 +18657,7 @@ class ScreenConfigurationDirective {
                 this._setHostVisible(myCfgObj.immediatelyVisible());
                 if (!this.screenConfigNativeElement) {
                     this.hostComponent.required = this.hostComponent.required || myCfgObj.isRequired();
-                    this.hostComponent.readonly = this.hostComponent.forceReadonly || this._moduleInReadonlyMode() || myCfgObj.isReadonly();
+                    this.hostComponent.readonly = this._moduleInReadonlyMode() || myCfgObj.isReadonly();
                     this.hostComponent.decimals = myCfgObj.scale;
                     this.hostComponent.maxLength = myCfgObj.maxLength;
                     this.hostComponent.defaultValue = myCfgObj.defaultValue;
@@ -19336,11 +19335,13 @@ class HourSchedulingExpandableComponent {
     currentDraggingObject = null;
     MIN_HEIGHT = 30;
     _schedule = {};
+    _onMouseMove = (e) => this.onResizing(e);
+    _onMouseUp = (e) => this.onResizeEnd(e);
     set schedule(value) {
-        if (value && value !== this._schedule) {
+        this._schedule = value;
+        if (this._schedule) {
             this.renderObjects();
         }
-        this._schedule = value;
     }
     get schedule() {
         return this._schedule;
@@ -19477,14 +19478,10 @@ class HourSchedulingExpandableComponent {
         if (this.currentDraggingObject) {
             let newStartDate = this.convertDateToEuropean(this.currentDraggingObject.start);
             let hourSplit = hour.split(":");
-            newStartDate.setHours(parseInt(hourSplit[0]));
-            newStartDate.setHours(parseInt(hourSplit[1]));
-            if (this.scheduledObjects.find((scheduledObject) => scheduledObject.start === newStartDate)) {
-                return false;
-            }
-            else {
-                return true;
-            }
+            newStartDate.setHours(parseInt(hourSplit[0], 10));
+            newStartDate.setMinutes(parseInt(hourSplit[1], 10));
+            const t = newStartDate.getTime();
+            return !this.scheduledObjects.some(o => o.start?.getTime() === t);
         }
     }
     handleDragLeave(event) {
@@ -19502,8 +19499,8 @@ class HourSchedulingExpandableComponent {
         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));
+        document.addEventListener("mousemove", this._onMouseMove);
+        document.addEventListener("mouseup", this._onMouseUp);
     }
     // Handle resizing with snapping to 30px increments and minimum height restriction
     onResizing(event) {
@@ -19548,9 +19545,8 @@ class HourSchedulingExpandableComponent {
             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));
+        document.removeEventListener("mousemove", this._onMouseMove);
+        document.removeEventListener("mouseup", this._onMouseUp);
     }
     timeDifference(date1, date2) {
         let difference = this.convertDateToEuropean(date1).getTime() / 1000 - this.convertDateToEuropean(date2).getTime() / 1000;
@@ -19602,90 +19598,92 @@ class HourSchedulingExpandableComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HourSchedulingExpandableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HourSchedulingExpandableComponent, isStandalone: false, selector: "co-hour-scheduling-expandable", inputs: { schedule: "schedule", startTimeProp: "startTimeProp", endTimeProp: "endTimeProp", objectsProp: "objectsProp", childProp: "childProp", customTemplate: "customTemplate", idProp: "idProp" }, outputs: { timeChangeEvent: "timeChangeEvent", newObjectPlanEvent: "newObjectPlanEvent", moveBetweenCalendarsEvent: "moveBetweenCalendarsEvent" }, host: { listeners: { "window:resize": "onResize($event)", "document:click": "clickOut($event)" }, properties: { "class.co-hour-scheduling-expandable": "this.showClass" } }, ngImport: i0, template: `
-    <div class="wrapper">
-      @for (hour of hourLabels; track hour) {
-        <div class="time-block">
-          <div class="hour-label"><span [textContent]="hour"></span></div>
-          <div class="object-display">
-            <div class="first-half-hour object-half"
-              (dragover)="allowDrop($event, hour)"
-              (dragleave)="handleDragLeave($event)"
-              (drop)="handleDrop($event, hour)">
-            </div>
-            <div class="second-half-hour object-half"
-              (dragover)="allowDrop($event, addHalfHour(hour))"
-              (dragleave)="handleDragLeave($event)"
-              (drop)="handleDrop($event, addHalfHour(hour))">
-            </div>
-          </div>
-        </div>
-      }
-    
-      <div class="scheduled-objects" >
-        <ng-container>
-          <ng-template
-            [ngTemplateOutlet]="customTemplate"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HourSchedulingExpandableComponent, isStandalone: false, selector: "co-hour-scheduling-expandable", inputs: { schedule: "schedule", startTimeProp: "startTimeProp", endTimeProp: "endTimeProp", objectsProp: "objectsProp", childProp: "childProp", customTemplate: "customTemplate", idProp: "idProp" }, outputs: { timeChangeEvent: "timeChangeEvent", newObjectPlanEvent: "newObjectPlanEvent", moveBetweenCalendarsEvent: "moveBetweenCalendarsEvent" }, host: { listeners: { "window:resize": "onResize($event)", "document:click": "clickOut($event)" }, properties: { "class.co-hour-scheduling-expandable": "this.showClass" } }, ngImport: i0, template: `
+    <div class="wrapper">
+      @for (hour of hourLabels; track hour) {
+        <div class="time-block">
+          <div class="hour-label"><span [textContent]="hour"></span></div>
+          <div class="object-display">
+            <div class="first-half-hour object-half"
+              (dragover)="allowDrop($event, hour)"
+              (dragleave)="handleDragLeave($event)"
+              (drop)="handleDrop($event, hour)">
+            </div>
+            <div class="second-half-hour object-half"
+              (dragover)="allowDrop($event, addHalfHour(hour))"
+              (dragleave)="handleDragLeave($event)"
+              (drop)="handleDrop($event, addHalfHour(hour))">
+            </div>
+          </div>
+        </div>
+      }
+    
+      <div class="scheduled-objects" >
+        <ng-container>
+          <ng-template
+            [ngTemplateOutlet]="customTemplate"
             [ngTemplateOutletContext]="{
               objects: scheduledObjects,
               onSelectBlock: this.onSelectBlock.bind(this),
               onResizeStart: this.onResizeStart.bind(this),
+              onResizeEnd: this.onResizeEnd.bind(this),
               onDragStartCustom: this.onDragStartCustom.bind(this)
 
             }"
-            >
-            <ng-content></ng-content>
-          </ng-template>
-        </ng-container>
-      </div>
-    
-    </div>
-    
+            >
+            <ng-content></ng-content>
+          </ng-template>
+        </ng-container>
+      </div>
+    
+    </div>
+    
     `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HourSchedulingExpandableComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-hour-scheduling-expandable',
-                    template: `
-    <div class="wrapper">
-      @for (hour of hourLabels; track hour) {
-        <div class="time-block">
-          <div class="hour-label"><span [textContent]="hour"></span></div>
-          <div class="object-display">
-            <div class="first-half-hour object-half"
-              (dragover)="allowDrop($event, hour)"
-              (dragleave)="handleDragLeave($event)"
-              (drop)="handleDrop($event, hour)">
-            </div>
-            <div class="second-half-hour object-half"
-              (dragover)="allowDrop($event, addHalfHour(hour))"
-              (dragleave)="handleDragLeave($event)"
-              (drop)="handleDrop($event, addHalfHour(hour))">
-            </div>
-          </div>
-        </div>
-      }
-    
-      <div class="scheduled-objects" >
-        <ng-container>
-          <ng-template
-            [ngTemplateOutlet]="customTemplate"
+                    template: `
+    <div class="wrapper">
+      @for (hour of hourLabels; track hour) {
+        <div class="time-block">
+          <div class="hour-label"><span [textContent]="hour"></span></div>
+          <div class="object-display">
+            <div class="first-half-hour object-half"
+              (dragover)="allowDrop($event, hour)"
+              (dragleave)="handleDragLeave($event)"
+              (drop)="handleDrop($event, hour)">
+            </div>
+            <div class="second-half-hour object-half"
+              (dragover)="allowDrop($event, addHalfHour(hour))"
+              (dragleave)="handleDragLeave($event)"
+              (drop)="handleDrop($event, addHalfHour(hour))">
+            </div>
+          </div>
+        </div>
+      }
+    
+      <div class="scheduled-objects" >
+        <ng-container>
+          <ng-template
+            [ngTemplateOutlet]="customTemplate"
             [ngTemplateOutletContext]="{
               objects: scheduledObjects,
               onSelectBlock: this.onSelectBlock.bind(this),
               onResizeStart: this.onResizeStart.bind(this),
+              onResizeEnd: this.onResizeEnd.bind(this),
               onDragStartCustom: this.onDragStartCustom.bind(this)
 
             }"
-            >
-            <ng-content></ng-content>
-          </ng-template>
-        </ng-container>
-      </div>
-    
-    </div>
-    
+            >
+            <ng-content></ng-content>
+          </ng-template>
+        </ng-container>
+      </div>
+    
+    </div>
+    
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
@@ -19741,11 +19739,9 @@ class HourSchedulingExpandableTemplateComponent {
     showClass() {
         return true;
     }
-    onExpandableDragStart(event, obj, onDragStartCustom) {
-        event.dataTransfer.setData('text', JSON.stringify({ obj }));
-        if (onDragStartCustom) {
-            onDragStartCustom?.call(obj);
-        }
+    onExpandableDragStart(event, obj) {
+        event.dataTransfer?.setData("text", JSON.stringify(obj));
+        this.onDragStartCustom?.(obj);
     }
     calculateLeftAndWidthOfObjects() {
         const layoutData = new Array(this._objects.length);
@@ -19790,76 +19786,66 @@ class HourSchedulingExpandableTemplateComponent {
         return layoutData;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HourSchedulingExpandableTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HourSchedulingExpandableTemplateComponent, isStandalone: false, selector: "co-hour-scheduling-expandable-template", inputs: { objectTemplate: "objectTemplate", objects: "objects", onDragStartCustom: "onDragStartCustom", onResizeStart: "onResizeStart", onSelectBlock: "onSelectBlock", startTimeProp: "startTimeProp", endTimeProp: "endTimeProp" }, host: { properties: { "class.co-hour-scheduling-expandable-template": "this.showClass" } }, ngImport: i0, template: `
-
-@for (obj of objects; track obj) {
-  <div
-    [class]="'custom-scheduled-object'"
-    [class.selected]="obj.selected"
-    [draggable]="!obj.selected"
-    [style.--height]="obj.height + 'px'"
-    [style.--top]="obj.top + 'px'"
-    [style.--left]="layouts[objects.indexOf(obj)].leftPercent + '%'"
-    [style.--width]="layouts[objects.indexOf(obj)].widthPercent + '%'"
-    (click)="onSelectBlock(obj)"
-    (dragstart)="onExpandableDragStart($event, obj, onDragStartCustom(obj) )">
-    @if (obj.selected) {
-      <div
-        class="top-resizer"
-      (mousedown)="onResizeStart($event, obj, 'top')"></div>
-    }
-    <ng-template
-      [ngTemplateOutlet]="objectTemplate"
-                  [ngTemplateOutletContext]="{
-              object: obj
-            }"
-      >
-    </ng-template>
-    @if (obj.selected) {
-      <div
-        class="bottom-resizer"
-      (mousedown)="onResizeStart($event, obj, 'bottom')"></div>
-    }
-  </div>
-}
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HourSchedulingExpandableTemplateComponent, isStandalone: false, selector: "co-hour-scheduling-expandable-template", inputs: { objectTemplate: "objectTemplate", objects: "objects", onDragStartCustom: "onDragStartCustom", onResizeStart: "onResizeStart", onSelectBlock: "onSelectBlock", startTimeProp: "startTimeProp", endTimeProp: "endTimeProp" }, host: { properties: { "class.co-hour-scheduling-expandable-template": "this.showClass" } }, ngImport: i0, template: `
+
+        @for (obj of objects; track obj.id; let i = $index) {
+            <div
+                    class="custom-scheduled-object"
+                    [class.selected]="obj.selected"
+                    [draggable]="!obj.selected"
+                    [style.--height]="obj.height + 'px'"
+                    [style.--top]="obj.top + 'px'"
+                    [style.--left]="layouts[i]?.leftPercent + '%'"
+                    [style.--width]="layouts[i]?.widthPercent + '%'"
+                    (click)="onSelectBlock(obj)"
+                    (dragstart)="onExpandableDragStart($event, obj)">
+                @if (obj.selected) {
+                    <div class="top-resizer" (mousedown)="onResizeStart($event, obj, 'top')"></div>
+                }
+
+                <ng-template
+                        [ngTemplateOutlet]="objectTemplate"
+                        [ngTemplateOutletContext]="{object: obj}">
+                </ng-template>
+
+                @if (obj.selected) {
+                    <div class="bottom-resizer" (mousedown)="onResizeStart($event, obj, 'bottom')"></div>
+                }
+            </div>
+        }
 `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HourSchedulingExpandableTemplateComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-hour-scheduling-expandable-template',
-                    template: `
-
-@for (obj of objects; track obj) {
-  <div
-    [class]="'custom-scheduled-object'"
-    [class.selected]="obj.selected"
-    [draggable]="!obj.selected"
-    [style.--height]="obj.height + 'px'"
-    [style.--top]="obj.top + 'px'"
-    [style.--left]="layouts[objects.indexOf(obj)].leftPercent + '%'"
-    [style.--width]="layouts[objects.indexOf(obj)].widthPercent + '%'"
-    (click)="onSelectBlock(obj)"
-    (dragstart)="onExpandableDragStart($event, obj, onDragStartCustom(obj) )">
-    @if (obj.selected) {
-      <div
-        class="top-resizer"
-      (mousedown)="onResizeStart($event, obj, 'top')"></div>
-    }
-    <ng-template
-      [ngTemplateOutlet]="objectTemplate"
-                  [ngTemplateOutletContext]="{
-              object: obj
-            }"
-      >
-    </ng-template>
-    @if (obj.selected) {
-      <div
-        class="bottom-resizer"
-      (mousedown)="onResizeStart($event, obj, 'bottom')"></div>
-    }
-  </div>
-}
+                    template: `
+
+        @for (obj of objects; track obj.id; let i = $index) {
+            <div
+                    class="custom-scheduled-object"
+                    [class.selected]="obj.selected"
+                    [draggable]="!obj.selected"
+                    [style.--height]="obj.height + 'px'"
+                    [style.--top]="obj.top + 'px'"
+                    [style.--left]="layouts[i]?.leftPercent + '%'"
+                    [style.--width]="layouts[i]?.widthPercent + '%'"
+                    (click)="onSelectBlock(obj)"
+                    (dragstart)="onExpandableDragStart($event, obj)">
+                @if (obj.selected) {
+                    <div class="top-resizer" (mousedown)="onResizeStart($event, obj, 'top')"></div>
+                }
+
+                <ng-template
+                        [ngTemplateOutlet]="objectTemplate"
+                        [ngTemplateOutletContext]="{object: obj}">
+                </ng-template>
+
+                @if (obj.selected) {
+                    <div class="bottom-resizer" (mousedown)="onResizeStart($event, obj, 'bottom')"></div>
+                }
+            </div>
+        }
 `,
                     encapsulation: ViewEncapsulation.None,
                     standalone: false