@colijnit/corecomponents_v12 300.1.2 → 300.1.3

package/fesm2022/colijnit-corecomponents_v12.mjs

@@ -10720,6 +10720,7 @@ class PopupWindowShellComponent {
     popupWindow;
     hasMobileSizings;
     _viewContainer;
+    _blankViewContainer;
     _appPopupButtons;
     isError;
     isWarning;
@@ -10762,8 +10763,10 @@ class PopupWindowShellComponent {
     ngOnDestroy() {
         this._close();
         this._viewContainer.clear();
+        this._blankViewContainer.clear();
         this._popupCompRef = undefined;
         this._viewContainer = undefined;
+        this._blankViewContainer = undefined;
         this._changeDetector = undefined;
     }
     async close(eventType) {
@@ -10795,7 +10798,12 @@ class PopupWindowShellComponent {
         this.onCloseClick();
     };
     _createPopupComponent() {
-        this._popupCompRef = this._viewContainer.createComponent(this.popupWindow.factory);
+        if (this._viewContainer) {
+            this._popupCompRef = this._viewContainer.createComponent(this.popupWindow.factory);
+        }
+        else {
+            this._popupCompRef = this._blankViewContainer.createComponent(this.popupWindow.factory);
+        }
         ObjectUtils.ForOwnProperty(this.popupWindow.inputs, (value, key) => {
             this._popupCompRef.instance[key] = value;
         });
@@ -10840,45 +10848,61 @@ class PopupWindowShellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PopupWindowShellComponent, deps: [{ token: IconCacheService }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PopupWindowShellComponent, isStandalone: false, selector: "co-popup-window-shell", inputs: { popupWindow: "popupWindow", hasMobileSizings: "hasMobileSizings" }, host: { properties: { "class.mobile-sizings": "this.hasMobileSizings", "class.popup-error": "this.isError", "class.popup-warning": "this.isWarning", "class.popup-notification": "this.isNotification", "class.popup-question": "this.isQuestion", "class.movable": "this.isMovable" } }, viewQueries: [{ propertyName: "_viewContainer", first: true, predicate: ["popupContent"], descendants: true, read: ViewContainerRef }, { propertyName: "_appPopupButtons", first: true, predicate: PopupButtonsComponent, descendants: true }], ngImport: i0, template: `
-    <ng-container *ngIf="!isBlank">
-      <co-button *ngIf="popupWindow?.settings.downloadable" class="circle shadowed popup-downloadable" [iconData]="downloadIcon"
-                 iconClass="light"
-                 (click)="onDownloadClick()"></co-button>
-      <co-button *ngIf="!popupWindow?.settings.hideCloseIcon" class="circle shadowed popup-close" [iconData]="closeIcon"
-                 iconClass="light"
-                 (click)="onCloseClick()"></co-button>
-      <div class="popup-wrapper" *ngIf="!isBlank">
-        <div class="popup-title"><h2 [textContent]="popupWindow?.settings.title"></h2></div>
-        <div class="popup-content" (mousedown)="$event.stopImmediatePropagation()">
-          <ng-template #popupContent></ng-template>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PopupWindowShellComponent, isStandalone: false, selector: "co-popup-window-shell", inputs: { popupWindow: "popupWindow", hasMobileSizings: "hasMobileSizings" }, host: { properties: { "class.mobile-sizings": "this.hasMobileSizings", "class.popup-error": "this.isError", "class.popup-warning": "this.isWarning", "class.popup-notification": "this.isNotification", "class.popup-question": "this.isQuestion", "class.movable": "this.isMovable" } }, viewQueries: [{ propertyName: "_viewContainer", first: true, predicate: ["popupContent"], descendants: true, read: ViewContainerRef }, { propertyName: "_blankViewContainer", first: true, predicate: ["blankPopupContent"], descendants: true, read: ViewContainerRef }, { propertyName: "_appPopupButtons", first: true, predicate: PopupButtonsComponent, descendants: true }], ngImport: i0, template: `
+    @if (!isBlank) {
+      @if (popupWindow?.settings.downloadable) {
+        <co-button class="circle shadowed popup-downloadable" [iconData]="downloadIcon"
+          iconClass="light"
+        (click)="onDownloadClick()"></co-button>
+      }
+      @if (!popupWindow?.settings.hideCloseIcon) {
+        <co-button class="circle shadowed popup-close" [iconData]="closeIcon"
+          iconClass="light"
+        (click)="onCloseClick()"></co-button>
+      }
+      @if (!isBlank) {
+        <div class="popup-wrapper">
+          <div class="popup-title"><h2 [textContent]="popupWindow?.settings.title"></h2></div>
+          <div class="popup-content" (mousedown)="$event.stopImmediatePropagation()">
+            <ng-template #popupContent></ng-template>
+          </div>
+          <co-popup-buttons [popupWindow]="popupWindow" (buttonClick)="onButtonClick($event)"></co-popup-buttons>
         </div>
-        <co-popup-buttons [popupWindow]="popupWindow" (buttonClick)="onButtonClick($event)"></co-popup-buttons>
-      </div>
-    </ng-container>
-    <ng-template #popupContent *ngIf="isBlank"></ng-template>
-  `, isInline: true, styles: [":host{position:fixed;display:flex;top:50%;left:50%;transform:translate(-50%,-50%)}:host.popup-error div.popup-wrapper{background:#cfd0d1}:host.popup-warning .secondary-font{color:#fff}:host.popup-warning div.popup-wrapper{background:#484f60}:host.popup-warning div.popup-title,:host.popup-warning div.popup-content{color:#fff}:host.popup-notification div.popup-wrapper,:host.popup-question div.popup-wrapper{background:#cfd0d1}co-button.popup-close,co-button.popup-downloadable{position:absolute;transform:translateY(-50%)}co-button.popup-close{right:5px}co-button.popup-downloadable{right:45px}.popup-wrapper{padding:30px;border-radius:5px;box-shadow:0 0 13px -2px #0003;background:#cfd0d1;min-width:320px}.popup-wrapper .popup-title{padding-bottom:20px;border-bottom:1px solid #DAD9D9}.popup-wrapper .popup-content{margin-top:20px;margin-bottom:20px;max-height:50vh;max-width:80vw;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "component", type: PopupButtonsComponent, selector: "co-popup-buttons", inputs: ["popupWindow"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+      }
+    }
+    @if (isBlank) {
+      <ng-template #blankPopupContent></ng-template>
+    }
+    `, isInline: true, styles: [":host{position:fixed;display:flex;top:50%;left:50%;transform:translate(-50%,-50%)}:host.popup-error div.popup-wrapper{background:#cfd0d1}:host.popup-warning .secondary-font{color:#fff}:host.popup-warning div.popup-wrapper{background:#484f60}:host.popup-warning div.popup-title,:host.popup-warning div.popup-content{color:#fff}:host.popup-notification div.popup-wrapper,:host.popup-question div.popup-wrapper{background:#cfd0d1}co-button.popup-close,co-button.popup-downloadable{position:absolute;transform:translateY(-50%)}co-button.popup-close{right:5px}co-button.popup-downloadable{right:45px}.popup-wrapper{padding:30px;border-radius:5px;box-shadow:0 0 13px -2px #0003;background:#cfd0d1;min-width:320px}.popup-wrapper .popup-title{padding-bottom:20px;border-bottom:1px solid #DAD9D9}.popup-wrapper .popup-content{margin-top:20px;margin-bottom:20px;max-height:50vh;max-width:80vw;overflow:auto}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "component", type: PopupButtonsComponent, selector: "co-popup-buttons", inputs: ["popupWindow"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PopupWindowShellComponent, decorators: [{
             type: Component,
             args: [{ selector: "co-popup-window-shell", template: `
-    <ng-container *ngIf="!isBlank">
-      <co-button *ngIf="popupWindow?.settings.downloadable" class="circle shadowed popup-downloadable" [iconData]="downloadIcon"
-                 iconClass="light"
-                 (click)="onDownloadClick()"></co-button>
-      <co-button *ngIf="!popupWindow?.settings.hideCloseIcon" class="circle shadowed popup-close" [iconData]="closeIcon"
-                 iconClass="light"
-                 (click)="onCloseClick()"></co-button>
-      <div class="popup-wrapper" *ngIf="!isBlank">
-        <div class="popup-title"><h2 [textContent]="popupWindow?.settings.title"></h2></div>
-        <div class="popup-content" (mousedown)="$event.stopImmediatePropagation()">
-          <ng-template #popupContent></ng-template>
+    @if (!isBlank) {
+      @if (popupWindow?.settings.downloadable) {
+        <co-button class="circle shadowed popup-downloadable" [iconData]="downloadIcon"
+          iconClass="light"
+        (click)="onDownloadClick()"></co-button>
+      }
+      @if (!popupWindow?.settings.hideCloseIcon) {
+        <co-button class="circle shadowed popup-close" [iconData]="closeIcon"
+          iconClass="light"
+        (click)="onCloseClick()"></co-button>
+      }
+      @if (!isBlank) {
+        <div class="popup-wrapper">
+          <div class="popup-title"><h2 [textContent]="popupWindow?.settings.title"></h2></div>
+          <div class="popup-content" (mousedown)="$event.stopImmediatePropagation()">
+            <ng-template #popupContent></ng-template>
+          </div>
+          <co-popup-buttons [popupWindow]="popupWindow" (buttonClick)="onButtonClick($event)"></co-popup-buttons>
         </div>
-        <co-popup-buttons [popupWindow]="popupWindow" (buttonClick)="onButtonClick($event)"></co-popup-buttons>
-      </div>
-    </ng-container>
-    <ng-template #popupContent *ngIf="isBlank"></ng-template>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{position:fixed;display:flex;top:50%;left:50%;transform:translate(-50%,-50%)}:host.popup-error div.popup-wrapper{background:#cfd0d1}:host.popup-warning .secondary-font{color:#fff}:host.popup-warning div.popup-wrapper{background:#484f60}:host.popup-warning div.popup-title,:host.popup-warning div.popup-content{color:#fff}:host.popup-notification div.popup-wrapper,:host.popup-question div.popup-wrapper{background:#cfd0d1}co-button.popup-close,co-button.popup-downloadable{position:absolute;transform:translateY(-50%)}co-button.popup-close{right:5px}co-button.popup-downloadable{right:45px}.popup-wrapper{padding:30px;border-radius:5px;box-shadow:0 0 13px -2px #0003;background:#cfd0d1;min-width:320px}.popup-wrapper .popup-title{padding-bottom:20px;border-bottom:1px solid #DAD9D9}.popup-wrapper .popup-content{margin-top:20px;margin-bottom:20px;max-height:50vh;max-width:80vw;overflow:auto}\n"] }]
+      }
+    }
+    @if (isBlank) {
+      <ng-template #blankPopupContent></ng-template>
+    }
+    `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{position:fixed;display:flex;top:50%;left:50%;transform:translate(-50%,-50%)}:host.popup-error div.popup-wrapper{background:#cfd0d1}:host.popup-warning .secondary-font{color:#fff}:host.popup-warning div.popup-wrapper{background:#484f60}:host.popup-warning div.popup-title,:host.popup-warning div.popup-content{color:#fff}:host.popup-notification div.popup-wrapper,:host.popup-question div.popup-wrapper{background:#cfd0d1}co-button.popup-close,co-button.popup-downloadable{position:absolute;transform:translateY(-50%)}co-button.popup-close{right:5px}co-button.popup-downloadable{right:45px}.popup-wrapper{padding:30px;border-radius:5px;box-shadow:0 0 13px -2px #0003;background:#cfd0d1;min-width:320px}.popup-wrapper .popup-title{padding-bottom:20px;border-bottom:1px solid #DAD9D9}.popup-wrapper .popup-content{margin-top:20px;margin-bottom:20px;max-height:50vh;max-width:80vw;overflow:auto}\n"] }]
         }], ctorParameters: () => [{ type: IconCacheService }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }], propDecorators: { popupWindow: [{
                 type: Input
             }], hasMobileSizings: [{
@@ -10889,6 +10913,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], _viewContainer: [{
                 type: ViewChild,
                 args: ["popupContent", { read: ViewContainerRef }]
+            }], _blankViewContainer: [{
+                type: ViewChild,
+                args: ["blankPopupContent", { read: ViewContainerRef }]
             }], _appPopupButtons: [{
                 type: ViewChild,
                 args: [PopupButtonsComponent]
@@ -12043,38 +12070,36 @@ class SimpleGridCellComponent {
         this._changeDetector.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SimpleGridCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: FormComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SimpleGridCellComponent, isStandalone: false, selector: "co-simple-grid-cell", inputs: { editMode: "editMode", column: "column", row: "row", fieldEditMode: "fieldEditMode" }, outputs: { cellClick: "cellClick" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class.co-simple-grid-cell": "this.showClass" } }, viewQueries: [{ propertyName: "editTemplateContent", first: true, predicate: ["editTemplate"], descendants: true, read: BaseInputComponent }, { propertyName: "noEditTemplateContent", first: true, predicate: ["noEditTemplate"], descendants: true }, { propertyName: "noTemplateContent", first: true, predicate: ["noTemplate"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SimpleGridCellComponent, isStandalone: false, selector: "co-simple-grid-cell", inputs: { editMode: "editMode", column: "column", row: "row", fieldEditMode: "fieldEditMode" }, outputs: { cellClick: "cellClick" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class.co-simple-grid-cell": "this.showClass" } }, viewQueries: [{ propertyName: "editTemplateContent", first: true, predicate: ["editTemplate"], descendants: true, read: BaseInputComponent }, { propertyName: "noEditTemplateContent", first: true, predicate: ["noEditTemplate"], descendants: true }, { propertyName: "noTemplateContent", first: true, predicate: ["noTemplate"], descendants: true }], ngImport: i0, template: `
       <div class="simple-grid-column-cell-value" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
-          <ng-container *ngIf="editMode; else noInlineEdit">
-              <div class="simple-grid-column-cell-field">
-                <ng-container #editTemplate *ngIf="column.editTemplate; else noEditTemplate"
-                              [ngTemplateOutlet]="column.editTemplate"
-                              [ngTemplateOutletInjector]="columnInjector"
-                              [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
-                <ng-template #noEditTemplate>
-                    <ng-container *ngIf="column.template; else noTemplate">
-                        <ng-container [ngTemplateOutlet]="column.template"
-                                      [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
-                    </ng-container>
-                    <ng-template #noTemplate>
-                        <co-input-text [(model)]="row[column.field]" [required]="column.required"></co-input-text>
-                    </ng-template>
-                </ng-template>
-              </div>
-          </ng-container>
-          <ng-template #noInlineEdit>
-              <div class="simple-grid-column-cell-field">
-                <ng-container *ngIf="column.template; else noTemplate">
-                    <ng-container [ngTemplateOutlet]="column.template"
-                                  [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
-                </ng-container>
-                <ng-template #noTemplate>
-                    <span [textContent]="column.getFieldValue(row[column.field])"  [title]="row[column.field]"></span>
-                </ng-template>
-              </div>
-          </ng-template>
+        @if (editMode) {
+          <div class="simple-grid-column-cell-field">
+            @if (column.editTemplate) {
+              <ng-container #editTemplate
+                [ngTemplateOutlet]="column.editTemplate"
+                [ngTemplateOutletInjector]="columnInjector"
+              [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
+            } @else {
+              @if (column.template) {
+                <ng-container [ngTemplateOutlet]="column.template"
+                [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
+              } @else {
+                <co-input-text [(model)]="row[column.field]" [required]="column.required"></co-input-text>
+              }
+            }
+          </div>
+        } @else {
+          <div class="simple-grid-column-cell-field">
+            @if (column.template) {
+              <ng-container [ngTemplateOutlet]="column.template"
+              [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
+            } @else {
+              <span [textContent]="column.getFieldValue(row[column.field])"  [title]="row[column.field]"></span>
+            }
+          </div>
+        }
       </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputTextComponent, selector: "co-input-text", inputs: ["useContent", "placeholder", "align", "type", "formatPipe", "min", "max", "pattern", "digitsOnly", "excludePlusMinus", "showClearButton", "keyDownWhiteList", "showPlaceholderOnFocus", "leftIcon", "rightIcon", "leftIconData", "rightIconData", "selectOnFocus", "emptyPlace", "firstDayOfWeek", "noStyle", "hideArrowButtons", "model"], outputs: ["leftIconClick", "leftIconMouseDown", "leftIconMouseUp", "rightIconClick", "rightIconMouseDown", "rightIconMouseUp", "clearIconClick", "isFocused"] }], encapsulation: i0.ViewEncapsulation.None });
+      `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputTextComponent, selector: "co-input-text", inputs: ["useContent", "placeholder", "align", "type", "formatPipe", "min", "max", "pattern", "digitsOnly", "excludePlusMinus", "showClearButton", "keyDownWhiteList", "showPlaceholderOnFocus", "leftIcon", "rightIcon", "leftIconData", "rightIconData", "selectOnFocus", "emptyPlace", "firstDayOfWeek", "noStyle", "hideArrowButtons", "model"], outputs: ["leftIconClick", "leftIconMouseDown", "leftIconMouseUp", "rightIconClick", "rightIconMouseDown", "rightIconMouseUp", "clearIconClick", "isFocused"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SimpleGridCellComponent, decorators: [{
             type: Component,
@@ -12082,36 +12107,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     selector: "co-simple-grid-cell",
                     template: `
       <div class="simple-grid-column-cell-value" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
-          <ng-container *ngIf="editMode; else noInlineEdit">
-              <div class="simple-grid-column-cell-field">
-                <ng-container #editTemplate *ngIf="column.editTemplate; else noEditTemplate"
-                              [ngTemplateOutlet]="column.editTemplate"
-                              [ngTemplateOutletInjector]="columnInjector"
-                              [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
-                <ng-template #noEditTemplate>
-                    <ng-container *ngIf="column.template; else noTemplate">
-                        <ng-container [ngTemplateOutlet]="column.template"
-                                      [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
-                    </ng-container>
-                    <ng-template #noTemplate>
-                        <co-input-text [(model)]="row[column.field]" [required]="column.required"></co-input-text>
-                    </ng-template>
-                </ng-template>
-              </div>
-          </ng-container>
-          <ng-template #noInlineEdit>
-              <div class="simple-grid-column-cell-field">
-                <ng-container *ngIf="column.template; else noTemplate">
-                    <ng-container [ngTemplateOutlet]="column.template"
-                                  [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
-                </ng-container>
-                <ng-template #noTemplate>
-                    <span [textContent]="column.getFieldValue(row[column.field])"  [title]="row[column.field]"></span>
-                </ng-template>
-              </div>
-          </ng-template>
+        @if (editMode) {
+          <div class="simple-grid-column-cell-field">
+            @if (column.editTemplate) {
+              <ng-container #editTemplate
+                [ngTemplateOutlet]="column.editTemplate"
+                [ngTemplateOutletInjector]="columnInjector"
+              [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
+            } @else {
+              @if (column.template) {
+                <ng-container [ngTemplateOutlet]="column.template"
+                [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
+              } @else {
+                <co-input-text [(model)]="row[column.field]" [required]="column.required"></co-input-text>
+              }
+            }
+          </div>
+        } @else {
+          <div class="simple-grid-column-cell-field">
+            @if (column.template) {
+              <ng-container [ngTemplateOutlet]="column.template"
+              [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
+            } @else {
+              <span [textContent]="column.getFieldValue(row[column.field])"  [title]="row[column.field]"></span>
+            }
+          </div>
+        }
       </div>
-  `,
+      `,
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
                 }]
@@ -14319,6 +14342,7 @@ class ListOfValuesComponent extends BaseInputComponent {
     searchPlaceholder = '';
     searchDisabled = false;
     showChips = true;
+    leftIconClick = new EventEmitter();
     showClass() {
         return true;
     }
@@ -14578,7 +14602,7 @@ class ListOfValuesComponent extends BaseInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfValuesComponent, deps: [{ token: FormComponent, optional: true }, { token: IconCacheService }, { token: i0.ChangeDetectorRef }, { token: OverlayService }, { token: FormInputUserModelChangeListenerService }, { token: NgZoneWrapperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListOfValuesComponent, isStandalone: false, selector: "co-list-of-values", inputs: { model: "model", multiselect: "multiselect", showToggleAll: "showToggleAll", largeCollection: "largeCollection", displayField: "displayField", optionIcon: "optionIcon", collection: "collection", collectionLoadFn: "collectionLoadFn", collectionLoadFnProp: "collectionLoadFnProp", leftIconData: "leftIconData", searchPlaceholder: "searchPlaceholder", searchDisabled: "searchDisabled", showChips: "showChips" }, host: { properties: { "class.custom-height": "this.multiselect", "class.multi-select": "this.multiselect", "class.co-list-of-values": "this.showClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListOfValuesComponent, isStandalone: false, selector: "co-list-of-values", inputs: { model: "model", multiselect: "multiselect", showToggleAll: "showToggleAll", largeCollection: "largeCollection", displayField: "displayField", optionIcon: "optionIcon", collection: "collection", collectionLoadFn: "collectionLoadFn", collectionLoadFnProp: "collectionLoadFnProp", leftIconData: "leftIconData", searchPlaceholder: "searchPlaceholder", searchDisabled: "searchDisabled", showChips: "showChips" }, outputs: { leftIconClick: "leftIconClick" }, host: { properties: { "class.custom-height": "this.multiselect", "class.multi-select": "this.multiselect", "class.co-list-of-values": "this.showClass" } }, providers: [
             OverlayService,
             {
                 provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
@@ -14613,6 +14637,7 @@ class ListOfValuesComponent extends BaseInputComponent {
         (click)="openPopup()"
         (rightIconClick)="toggleSelect()"
         (keydown)="handleInputKeyDown($event)"
+        (leftIconClick)="leftIconClick.emit()"
         (clearIconClick)="clearModel($event)"
         (blur)="checkModel()">
         @if (multiselect && showChips) {
@@ -14665,6 +14690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         (click)="openPopup()"
         (rightIconClick)="toggleSelect()"
         (keydown)="handleInputKeyDown($event)"
+        (leftIconClick)="leftIconClick.emit()"
         (clearIconClick)="clearModel($event)"
         (blur)="checkModel()">
         @if (multiselect && showChips) {
@@ -14730,6 +14756,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], showChips: [{
                 type: Input
+            }], leftIconClick: [{
+                type: Output
             }], showClass: [{
                 type: HostBinding,
                 args: ['class.co-list-of-values']
@@ -19694,6 +19722,7 @@ class HourSchedulingExpandableComponent {
     hourLabels = [];
     scheduledObjects = [];
     selectedHour;
+    layouts = [];
     resizing = false;
     resizeDirection;
     initialY;
@@ -19784,6 +19813,7 @@ class HourSchedulingExpandableComponent {
                 });
             }
             this.scheduledObjects = schedulingObjects;
+            this.layouts = this.calculateLeftAndWidthOfObjects();
             this.cdRef.markForCheck();
             this.cdRef.detectChanges();
         }
@@ -19837,6 +19867,7 @@ class HourSchedulingExpandableComponent {
                 this.moveBetweenCalendarsEvent.emit({ hour: hour, data: parsed });
             }
         }
+        this.layouts = this.calculateLeftAndWidthOfObjects();
     }
     allowDrop(event, hour) {
         event.preventDefault();
@@ -19914,6 +19945,7 @@ class HourSchedulingExpandableComponent {
             this.resizing = false;
             this.currentResizingObject.selected = false;
             this.currentResizingObject = null;
+            this.layouts = this.calculateLeftAndWidthOfObjects();
         }
         document.removeEventListener("mousemove", this._onMouseMove);
         document.removeEventListener("mouseup", this._onMouseUp);
@@ -19982,6 +20014,48 @@ class HourSchedulingExpandableComponent {
         this.taskCreationEvent.emit(hour);
         this.selectedHour = "";
     }
+    calculateLeftAndWidthOfObjects() {
+        const layoutData = new Array(this.scheduledObjects.length);
+        // Helper: check if two time ranges overlap
+        const isOverlapping = (startA, endA, startB, endB) => {
+            return startA < endB && startB < endA;
+        };
+        // Step 1: build overlap groups
+        const overlapGroups = [];
+        const processed = new Set();
+        for (let i = 0; i < this.scheduledObjects.length; i++) {
+            if (processed.has(i)) {
+                continue;
+            }
+            const group = [i];
+            const objA = this.scheduledObjects[i];
+            const startA = new Date(objA.start);
+            const endA = new Date(objA.end);
+            for (let j = i + 1; j < this.scheduledObjects.length; j++) {
+                const objB = this.scheduledObjects[j];
+                const startB = new Date(objB.start);
+                const endB = new Date(objB.end);
+                if (isOverlapping(startA, endA, startB, endB)) {
+                    group.push(j);
+                    processed.add(j);
+                }
+            }
+            group.forEach(index => processed.add(index));
+            overlapGroups.push(group);
+        }
+        // Step 2: assign layout per group
+        overlapGroups.forEach(group => {
+            const total = group.length;
+            const width = 100 / total;
+            group.forEach((objectIndex, i) => {
+                layoutData[objectIndex] = {
+                    leftPercent: i * width,
+                    widthPercent: width
+                };
+            });
+        });
+        return layoutData;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HourSchedulingExpandableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: IconCacheService }], 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", taskCreationEvent: "taskCreationEvent", 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">
@@ -20016,6 +20090,7 @@ class HourSchedulingExpandableComponent {
             [ngTemplateOutlet]="customTemplate"
             [ngTemplateOutletContext]="{
               objects: scheduledObjects,
+              layouts: layouts,
               onSelectBlock: this.onSelectBlock.bind(this),
               onResizeStart: this.onResizeStart.bind(this),
               onResizeEnd: this.onResizeEnd.bind(this),
@@ -20069,6 +20144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             [ngTemplateOutlet]="customTemplate"
             [ngTemplateOutletContext]="{
               objects: scheduledObjects,
+              layouts: layouts,
               onSelectBlock: this.onSelectBlock.bind(this),
               onResizeStart: this.onResizeStart.bind(this),
               onResizeEnd: this.onResizeEnd.bind(this),
@@ -20127,7 +20203,6 @@ class HourSchedulingExpandableTemplateComponent {
     objectTemplate;
     set objects(objects) {
         this._objects = objects;
-        this.layouts = this.calculateLeftAndWidthOfObjects();
     }
     get objects() {
         return this._objects;
@@ -20144,50 +20219,8 @@ class HourSchedulingExpandableTemplateComponent {
         event.dataTransfer?.setData("text", JSON.stringify(obj));
         this.onDragStartCustom?.(obj);
     }
-    calculateLeftAndWidthOfObjects() {
-        const layoutData = new Array(this._objects.length);
-        // Helper: check if two time ranges overlap
-        const isOverlapping = (startA, endA, startB, endB) => {
-            return startA < endB && startB < endA;
-        };
-        // Step 1: build overlap groups
-        const overlapGroups = [];
-        const processed = new Set();
-        for (let i = 0; i < this._objects.length; i++) {
-            if (processed.has(i)) {
-                continue;
-            }
-            const group = [i];
-            const objA = this._objects[i];
-            const startA = new Date(objA.start);
-            const endA = new Date(objA.end);
-            for (let j = i + 1; j < this._objects.length; j++) {
-                const objB = this._objects[j];
-                const startB = new Date(objB.start);
-                const endB = new Date(objB.end);
-                if (isOverlapping(startA, endA, startB, endB)) {
-                    group.push(j);
-                    processed.add(j);
-                }
-            }
-            group.forEach(index => processed.add(index));
-            overlapGroups.push(group);
-        }
-        // Step 2: assign layout per group
-        overlapGroups.forEach(group => {
-            const total = group.length;
-            const width = 100 / total;
-            group.forEach((objectIndex, i) => {
-                layoutData[objectIndex] = {
-                    leftPercent: i * width,
-                    widthPercent: width
-                };
-            });
-        });
-        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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HourSchedulingExpandableTemplateComponent, isStandalone: false, selector: "co-hour-scheduling-expandable-template", inputs: { layouts: "layouts", 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
@@ -20206,7 +20239,7 @@ class HourSchedulingExpandableTemplateComponent {
 
                 <ng-template
                         [ngTemplateOutlet]="objectTemplate"
-                        [ngTemplateOutletContext]="{object: obj}">
+                        [ngTemplateOutletContext]="{object: obj, layouts: layouts}">
                 </ng-template>
 
                 @if (obj.selected) {
@@ -20239,7 +20272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
                 <ng-template
                         [ngTemplateOutlet]="objectTemplate"
-                        [ngTemplateOutletContext]="{object: obj}">
+                        [ngTemplateOutletContext]="{object: obj, layouts: layouts}">
                 </ng-template>
 
                 @if (obj.selected) {
@@ -20251,7 +20284,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
                 }]
-        }], propDecorators: { objectTemplate: [{
+        }], propDecorators: { layouts: [{
+                type: Input
+            }], objectTemplate: [{
                 type: Input
             }], objects: [{
                 type: Input