@colijnit/corecomponents_v12 300.1.5 → 300.1.7

package/fesm2022/colijnit-corecomponents_v12.mjs

@@ -1,6 +1,6 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Input, Injectable, HostBinding, ViewEncapsulation, Component, Directive, ElementRef, Pipe, EventEmitter, Output, ViewChildren, ViewContainerRef, HostListener, ViewChild, Optional, NgModule, SkipSelf, InjectionToken, Inject, forwardRef, ChangeDetectionStrategy, ContentChildren, LOCALE_ID, NO_ERRORS_SCHEMA, Injector, QueryList } from '@angular/core';
+import { Input, Injectable, HostBinding, ViewEncapsulation, Component, Directive, ElementRef, Pipe, EventEmitter, Output, ViewChildren, ViewContainerRef, HostListener, ViewChild, Optional, NgModule, SkipSelf, InjectionToken, Inject, forwardRef, ChangeDetectionStrategy, ContentChildren, LOCALE_ID, NO_ERRORS_SCHEMA, Injector, RendererStyleFlags2, computed, signal, QueryList } from '@angular/core';
 import * as i5 from '@angular/forms';
 import { NgModel, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/platform-browser';
@@ -11461,6 +11461,7 @@ class BaseSimpleGridComponent {
     }
     set data(value) {
         this._data = value;
+        this.repeatSortOnDataChange();
         this._prepareData();
         this._currentDataJSON = JSON.stringify(this._data);
         this.dataChanged.next();
@@ -11568,6 +11569,14 @@ class BaseSimpleGridComponent {
     }
     async prepareDataRow(row, index) {
     }
+    repeatSortOnDataChange() {
+    }
+    setData(value) {
+        this._data = value;
+        this._prepareData();
+        this._currentDataJSON = JSON.stringify(this._data);
+        this.dataChanged.next();
+    }
     _setColumns(columns) {
         this.columns.push(...columns);
         this.columns.sort((a, b) => a.order < b.order ? -1 : 1);
@@ -12239,6 +12248,7 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
     _formMaster;
     defaultTextAlign = ColumnAlign.Left;
     scrollDirections = ScrollDirection;
+    _previouslySortedColumn;
     set headerCells(cells) {
         // The header cells are rendered from headerColumnsCopy, so the elementRefs
         // have to be handed back to that same collection.
@@ -12552,14 +12562,18 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
             return obj !== col;
         });
     }
-    sortColumn(col, columnValue) {
+    sortColumn(col, columnValue, preserveSortDirection) {
         col.isSelected = false;
         if (this.sortColumnValue === columnValue) {
-            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+            if (!preserveSortDirection) {
+                this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+            }
         }
         else {
             this.sortColumnValue = columnValue;
-            this.sortDirection = 'asc';
+            if (!preserveSortDirection) {
+                this.sortDirection = 'asc';
+            }
         }
         const direction = this.sortDirection === 'asc' ? 1 : -1;
         const sorted = [...this.data].sort((a, b) => {
@@ -12588,9 +12602,15 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
             }
             return (valA > valB ? 1 : valA < valB ? -1 : 0) * direction;
         });
-        this.data = sorted;
+        this.setData(sorted);
+        this._previouslySortedColumn = col;
         this._detectChanges();
     }
+    repeatSortOnDataChange() {
+        if (this._previouslySortedColumn) {
+            this.sortColumn(this._previouslySortedColumn, this.sortColumnValue, true);
+        }
+    }
     showAllColumns() {
         this.isSettingsMenuOpen = false;
         this.headerColumnsCopy = this.headerColumns;
@@ -14940,8 +14960,493 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+const ARROW_CENTER_PROPERTY = '--co-tooltip-arrow-center';
+const ARROW_EDGE_INSET_PX = 15;
+const VIEWPORT_MARGIN_PX = 5;
+const ORIENTATIONS = [CoDirection.Up, CoDirection.Down, CoDirection.Left, CoDirection.Right];
+const OPPOSITE_ORIENTATION = new Map([
+    [CoDirection.Up, CoDirection.Down],
+    [CoDirection.Down, CoDirection.Up],
+    [CoDirection.Left, CoDirection.Right],
+    [CoDirection.Right, CoDirection.Left]
+]);
+class TooltipComponent {
+    _elementRef;
+    _changeDetector;
+    _renderer;
+    set hostElement(value) {
+        this._hostElement = value;
+        // this._positionTooltip();
+    }
+    get hostElement() {
+        return this._hostElement;
+    }
+    toolTip;
+    orientation = CoDirection.Up;
+    tooltipClosed = new EventEmitter();
+    showClass() {
+        return true;
+    }
+    top = -100;
+    left = -100;
+    get isTop() {
+        return this._resolvedOrientation === CoDirection.Up;
+    }
+    get isBottom() {
+        return this._resolvedOrientation === CoDirection.Down;
+    }
+    get isLeft() {
+        return this._resolvedOrientation === CoDirection.Left;
+    }
+    get isRight() {
+        return this._resolvedOrientation === CoDirection.Right;
+    }
+    animate = true;
+    _resolvedOrientation = CoDirection.Up;
+    _hostElement;
+    _documentClickListener;
+    constructor(_elementRef, _changeDetector, _renderer) {
+        this._elementRef = _elementRef;
+        this._changeDetector = _changeDetector;
+        this._renderer = _renderer;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this._positionTooltip();
+        });
+        this._documentClickListener = this._renderer.listen('document', 'click', (event) => {
+            if (!this._elementRef.nativeElement.contains(event.target)) {
+                this.closeTooltip();
+            }
+        });
+    }
+    ngOnDestroy() {
+        // Remove the click listener to prevent memory leaks
+        if (this._documentClickListener) {
+            this._documentClickListener();
+        }
+    }
+    _positionTooltip() {
+        if (!this.hostElement || !this._elementRef || !this._elementRef.nativeElement) {
+            return;
+        }
+        const element = this._elementRef.nativeElement;
+        const hostRect = this.hostElement.getBoundingClientRect();
+        this._resolvedOrientation = this._resolveOrientation(hostRect, element.getBoundingClientRect());
+        // Apply the horizontal position first: it determines the available width, and therefore the height.
+        this.left = this._calculateLeft(hostRect, element.getBoundingClientRect());
+        this._changeDetector.detectChanges();
+        const ownRect = element.getBoundingClientRect();
+        this.top = this._calculateTop(hostRect, ownRect);
+        this._positionArrow(hostRect, ownRect);
+        this._changeDetector.markForCheck();
+        this._changeDetector.detectChanges();
+    }
+    _resolveOrientation(hostRect, ownRect) {
+        const preferred = ORIENTATIONS.indexOf(this.orientation) < 0 ? CoDirection.Up : this.orientation;
+        const opposite = OPPOSITE_ORIENTATION.get(preferred);
+        const candidates = [
+            preferred,
+            opposite,
+            ...ORIENTATIONS.filter((orientation) => orientation !== preferred && orientation !== opposite)
+        ];
+        const fitting = candidates.find((orientation) => this._fits(orientation, hostRect, ownRect));
+        if (fitting) {
+            return fitting;
+        }
+        // Nothing fits: fall back to the side with the most room, so the tooltip overlaps the host as little as possible.
+        return candidates.reduce((best, orientation) => this._availableSpace(orientation, hostRect) > this._availableSpace(best, hostRect) ? orientation : best, preferred);
+    }
+    _fits(orientation, hostRect, ownRect) {
+        switch (orientation) {
+            case CoDirection.Up:
+                return (hostRect.top - ownRect.height) >= VIEWPORT_MARGIN_PX;
+            case CoDirection.Down:
+                return (hostRect.bottom + ownRect.height) <= (document.documentElement.clientHeight - VIEWPORT_MARGIN_PX);
+            case CoDirection.Left:
+                return (hostRect.left - ownRect.width) >= VIEWPORT_MARGIN_PX;
+            default:
+                return (hostRect.right + ownRect.width) <= (document.documentElement.clientWidth - VIEWPORT_MARGIN_PX);
+        }
+    }
+    _availableSpace(orientation, hostRect) {
+        switch (orientation) {
+            case CoDirection.Up:
+                return hostRect.top;
+            case CoDirection.Down:
+                return document.documentElement.clientHeight - hostRect.bottom;
+            case CoDirection.Left:
+                return hostRect.left;
+            default:
+                return document.documentElement.clientWidth - hostRect.right;
+        }
+    }
+    _calculateLeft(hostRect, ownRect) {
+        let wantedLeft = hostRect.left; // aligned with the host for the vertical orientations
+        if (this._resolvedOrientation === CoDirection.Left) {
+            wantedLeft = hostRect.left - ownRect.width;
+        }
+        else if (this._resolvedOrientation === CoDirection.Right) {
+            wantedLeft = hostRect.right;
+        }
+        const maxLeft = document.documentElement.clientWidth - ownRect.width - VIEWPORT_MARGIN_PX;
+        return Math.max(VIEWPORT_MARGIN_PX, Math.min(wantedLeft, maxLeft));
+    }
+    _calculateTop(hostRect, ownRect) {
+        // Centred on the host for the horizontal orientations, so the arrow lands halfway up the edge
+        // instead of being clamped against the top corner by hosts that are shorter than the tooltip.
+        let wantedTop = hostRect.top + ((hostRect.height - ownRect.height) / 2);
+        if (this._resolvedOrientation === CoDirection.Up) {
+            wantedTop = hostRect.top - ownRect.height;
+        }
+        else if (this._resolvedOrientation === CoDirection.Down) {
+            wantedTop = hostRect.bottom;
+        }
+        const maxTop = document.documentElement.clientHeight - ownRect.height - VIEWPORT_MARGIN_PX;
+        return Math.max(VIEWPORT_MARGIN_PX, Math.min(wantedTop, maxTop));
+    }
+    _positionArrow(hostRect, ownRect) {
+        const element = this._elementRef.nativeElement;
+        const alongVerticalEdge = this.isLeft || this.isRight;
+        const borderWidth = alongVerticalEdge ? element.clientTop : element.clientLeft;
+        const paddingBoxSize = (alongVerticalEdge ? ownRect.height : ownRect.width) - (2 * borderWidth);
+        const hostCenter = alongVerticalEdge
+            ? (hostRect.top + (hostRect.height / 2)) - this.top - borderWidth
+            : (hostRect.left + (hostRect.width / 2)) - this.left - borderWidth;
+        const maxCenter = Math.max(ARROW_EDGE_INSET_PX, paddingBoxSize - ARROW_EDGE_INSET_PX);
+        const arrowCenter = Math.min(Math.max(hostCenter, ARROW_EDGE_INSET_PX), maxCenter);
+        this._renderer.setStyle(element, ARROW_CENTER_PROPERTY, `${arrowCenter}px`, RendererStyleFlags2.DashCase);
+    }
+    closeTooltip() {
+        this.tooltipClosed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TooltipComponent, isStandalone: false, selector: "co-tooltip", inputs: { hostElement: "hostElement", toolTip: "toolTip", orientation: "orientation" }, outputs: { tooltipClosed: "tooltipClosed" }, host: { properties: { "class.co-tooltip": "this.showClass", "style.top.px": "this.top", "style.left.px": "this.left", "class.top": "this.isTop", "class.bottom": "this.isBottom", "class.left": "this.isLeft", "class.right": "this.isRight", "@showHide": "this.animate" } }, ngImport: i0, template: `
+      <div class="tooltip" [innerHTML]="toolTip"></div>
+    `, isInline: true, animations: [
+            trigger("showHide", [
+                state("void", style({ opacity: 0 })),
+                state("*", style({ opacity: 1 })),
+                transition("void <=> *", animate("200ms ease-in-out")),
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'co-tooltip',
+                    template: `
+      <div class="tooltip" [innerHTML]="toolTip"></div>
+    `,
+                    animations: [
+                        trigger("showHide", [
+                            state("void", style({ opacity: 0 })),
+                            state("*", style({ opacity: 1 })),
+                            transition("void <=> *", animate("200ms ease-in-out")),
+                        ])
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { hostElement: [{
+                type: Input
+            }], toolTip: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], tooltipClosed: [{
+                type: Output
+            }], showClass: [{
+                type: HostBinding,
+                args: ['class.co-tooltip']
+            }], top: [{
+                type: HostBinding,
+                args: ["style.top.px"]
+            }], left: [{
+                type: HostBinding,
+                args: ["style.left.px"]
+            }], isTop: [{
+                type: HostBinding,
+                args: ["class.top"]
+            }], isBottom: [{
+                type: HostBinding,
+                args: ["class.bottom"]
+            }], isLeft: [{
+                type: HostBinding,
+                args: ["class.left"]
+            }], isRight: [{
+                type: HostBinding,
+                args: ["class.right"]
+            }], animate: [{
+                type: HostBinding,
+                args: ['@showHide']
+            }] } });
+
+const SHOW_DELAY_PROPERTY = '--co-tooltip-show-delay';
+const AUTO_HIDE_DELAY_PROPERTY = '--co-tooltip-auto-hide-delay';
+const DEFAULT_SHOW_DELAY_MS = 400;
+const DEFAULT_AUTO_HIDE_DELAY_MS = 10000;
+class TooltipDirective {
+    _compFactoryResolver;
+    _appRef;
+    _injector;
+    _sanitizer;
+    set tooltip(str) {
+        this._tooltipMessage = str;
+    }
+    orientation = CoDirection.Up;
+    _elementRef;
+    _tooltipMessage;
+    _componentRef;
+    _showTimeoutId = undefined;
+    _autoHideTimeoutId = undefined;
+    _mouseEnterHandler = () => this._startShowTimeout();
+    _mouseLeaveHandler = () => this._removeTooltip();
+    _scrollHandler = () => this._handleScroll();
+    constructor(elementRef, _compFactoryResolver, _appRef, _injector, _sanitizer) {
+        this._compFactoryResolver = _compFactoryResolver;
+        this._appRef = _appRef;
+        this._injector = _injector;
+        this._sanitizer = _sanitizer;
+        this._elementRef = elementRef;
+    }
+    ngOnDestroy() {
+        this._removeTooltip();
+        if (this._elementRef && this._elementRef.nativeElement) {
+            this._elementRef.nativeElement.removeEventListener('mouseenter', this._mouseEnterHandler);
+            this._elementRef.nativeElement.removeEventListener('mouseleave', this._mouseLeaveHandler);
+        }
+        window.removeEventListener("scroll", this._scrollHandler);
+        this._elementRef = undefined;
+    }
+    ngOnInit() {
+        window.addEventListener("scroll", this._scrollHandler);
+        if (this._elementRef && this._elementRef.nativeElement) {
+            this._elementRef.nativeElement.addEventListener('mouseenter', this._mouseEnterHandler);
+            this._elementRef.nativeElement.addEventListener('mouseleave', this._mouseLeaveHandler);
+        }
+    }
+    _handleScroll() {
+        this._removeTooltip();
+    }
+    _startShowTimeout() {
+        this._clearShowTimeout();
+        this._showTimeoutId = window.setTimeout(() => {
+            this._showTimeoutId = undefined;
+            this._createTooltipComponent();
+        }, this._resolveDelay(SHOW_DELAY_PROPERTY, DEFAULT_SHOW_DELAY_MS));
+    }
+    // Delays come from custom properties, read from the host so a scoped override wins over the
+    // :root default; falls back when the stylesheet is absent. A bare number is read as milliseconds.
+    _resolveDelay(property, fallback) {
+        if (!this._elementRef || !this._elementRef.nativeElement) {
+            return fallback;
+        }
+        const raw = window.getComputedStyle(this._elementRef.nativeElement)
+            .getPropertyValue(property)
+            .trim();
+        const value = parseFloat(raw);
+        if (isNaN(value)) {
+            return fallback;
+        }
+        return Math.max(0, raw.endsWith('ms') || !raw.endsWith('s') ? value : value * 1000);
+    }
+    _clearShowTimeout() {
+        if (this._showTimeoutId !== undefined) {
+            window.clearTimeout(this._showTimeoutId);
+            this._showTimeoutId = undefined;
+        }
+    }
+    _removeTooltip() {
+        this._clearShowTimeout();
+        this._clearAutoHideTimeout();
+        if (this._componentRef) {
+            this._appRef.detachView(this._componentRef.hostView);
+            this._componentRef.destroy();
+            this._componentRef = undefined;
+        }
+    }
+    _startAutoHideTimeout() {
+        this._clearAutoHideTimeout();
+        const delay = this._resolveDelay(AUTO_HIDE_DELAY_PROPERTY, DEFAULT_AUTO_HIDE_DELAY_MS);
+        if (delay <= 0) { // guard switched off by the consumer
+            return;
+        }
+        this._autoHideTimeoutId = window.setTimeout(() => {
+            this._autoHideTimeoutId = undefined;
+            this._removeTooltip();
+        }, delay);
+    }
+    _clearAutoHideTimeout() {
+        if (this._autoHideTimeoutId !== undefined) {
+            window.clearTimeout(this._autoHideTimeoutId);
+            this._autoHideTimeoutId = undefined;
+        }
+    }
+    _createTooltipComponent() {
+        if (!this._tooltipMessage) {
+            return;
+        }
+        if (this._componentRef) {
+            return;
+        }
+        this._componentRef = this._compFactoryResolver
+            .resolveComponentFactory(TooltipComponent)
+            .create(this._injector);
+        this._componentRef.instance.hostElement = this._elementRef.nativeElement;
+        this._componentRef.instance.orientation = this.orientation;
+        this._componentRef.instance.toolTip = this._sanitizer.bypassSecurityTrustHtml(this._tooltipMessage);
+        this._appRef.attachView(this._componentRef.hostView);
+        const domElem = this._componentRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+        this._startAutoHideTimeout();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: TooltipDirective, isStandalone: false, selector: "[tooltip]", inputs: { tooltip: "tooltip", orientation: ["tooltipOrientation", "orientation"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tooltip]",
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i1.DomSanitizer }], propDecorators: { tooltip: [{
+                type: Input,
+                args: ["tooltip"]
+            }], orientation: [{
+                type: Input,
+                args: ["tooltipOrientation"]
+            }] } });
+
+class ListOfIconsPopupComponent {
+    collection = [];
+    activeItem;
+    parentForOverlay;
+    customCssClass;
+    showLabels = true;
+    itemSelected = new EventEmitter();
+    closePopup = new EventEmitter();
+    showClass() {
+        return true;
+    }
+    showSubCategories = computed(() => this._showSubCategories(), ...(ngDevMode ? [{ debugName: "showSubCategories" }] : []));
+    _showSubCategories = signal(false, ...(ngDevMode ? [{ debugName: "_showSubCategories" }] : []));
+    selectItem(item) {
+        if (item.children) {
+            this._showSubCategories.set(!this._showSubCategories());
+            return;
+        }
+        this.itemSelected.emit(item);
+    }
+    // Stop the bubble: the enclosing .icon-item would otherwise toggle the sub categories again
+    // on a view the parent already destroyed by closing the popup.
+    handlePickingCategoryClicked(subCategory, event) {
+        event.stopPropagation();
+        this.itemSelected.emit(subCategory);
+    }
+    CoDirection = CoDirection;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListOfIconsPopupComponent, isStandalone: false, selector: "co-list-of-icons-popup", inputs: { collection: "collection", activeItem: "activeItem", parentForOverlay: "parentForOverlay", customCssClass: "customCssClass", showLabels: "showLabels" }, outputs: { itemSelected: "itemSelected", closePopup: "closePopup" }, host: { properties: { "class.co-list-of-icons-popup": "this.showClass" } }, ngImport: i0, template: `
+      <div class="dropdown-menu" id="list-of-icons-popup" role="listbox"
+           [overlay]="parentForOverlay"
+           [ngClass]="customCssClass"
+           [tabindex]="-1"
+           (clickOutside)="closePopup.emit($event)">
+        @for (item of collection; track item) {
+          <div class="icon-item" role="option" 
+               [class.active]="item === activeItem"
+               [attr.aria-selected]="item === activeItem"
+               [tooltip]="item.label"
+               [tooltipOrientation]="CoDirection.Left"
+               (click)="selectItem(item)" 
+          >
+            <co-icon [iconData]="item.icon"></co-icon>
+            @if (showLabels) {
+              <div class="label" [textContent]="item.label | coreLocalize"></div>
+            }
+            @if (showSubCategories() && item.children?.length > 0) {
+              <div class="picking-type-wrapper">
+                @for (subCategory of item.children; track subCategory) {
+                  <div class="button-wrapper" (click)="handlePickingCategoryClicked(subCategory, $event)">
+                    <co-icon class="co-transaction-button-bar-icon" [iconData]="subCategory.icon"></co-icon>
+                    @if (showLabels) {
+                      <span class="button-title" [textContent]="subCategory.label | coreLocalize"></span>
+                    }
+                  </div>
+                }
+              </div>
+            }
+          </div>
+        }
+      </div>
+      `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutside", "alwaysTrigger"], outputs: ["clickOutside"], exportAs: ["clickOutside"] }, { kind: "directive", type: OverlayDirective, selector: "[overlay]", inputs: ["overlay", "view", "inline", "keepInView", "inheritWidth", "rightAlign", "fullSize"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltipOrientation"] }, { kind: "pipe", type: CoreLocalizePipe, name: "coreLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'co-list-of-icons-popup',
+                    template: `
+      <div class="dropdown-menu" id="list-of-icons-popup" role="listbox"
+           [overlay]="parentForOverlay"
+           [ngClass]="customCssClass"
+           [tabindex]="-1"
+           (clickOutside)="closePopup.emit($event)">
+        @for (item of collection; track item) {
+          <div class="icon-item" role="option" 
+               [class.active]="item === activeItem"
+               [attr.aria-selected]="item === activeItem"
+               [tooltip]="item.label"
+               [tooltipOrientation]="CoDirection.Left"
+               (click)="selectItem(item)" 
+          >
+            <co-icon [iconData]="item.icon"></co-icon>
+            @if (showLabels) {
+              <div class="label" [textContent]="item.label | coreLocalize"></div>
+            }
+            @if (showSubCategories() && item.children?.length > 0) {
+              <div class="picking-type-wrapper">
+                @for (subCategory of item.children; track subCategory) {
+                  <div class="button-wrapper" (click)="handlePickingCategoryClicked(subCategory, $event)">
+                    <co-icon class="co-transaction-button-bar-icon" [iconData]="subCategory.icon"></co-icon>
+                    @if (showLabels) {
+                      <span class="button-title" [textContent]="subCategory.label | coreLocalize"></span>
+                    }
+                  </div>
+                }
+              </div>
+            }
+          </div>
+        }
+      </div>
+      `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false
+                }]
+        }], propDecorators: { collection: [{
+                type: Input
+            }], activeItem: [{
+                type: Input
+            }], parentForOverlay: [{
+                type: Input
+            }], customCssClass: [{
+                type: Input
+            }], showLabels: [{
+                type: Input
+            }], itemSelected: [{
+                type: Output
+            }], closePopup: [{
+                type: Output
+            }], showClass: [{
+                type: HostBinding,
+                args: ['class.co-list-of-icons-popup']
+            }] } });
+
 class ListOfIconsComponent {
     icons;
+    _overlayService;
+    _elementRef;
     set collection(value) {
         this._collection = value || [];
         this.activeItem = this.collection[0];
@@ -14949,50 +15454,82 @@ class ListOfIconsComponent {
     get collection() {
         return this._collection;
     }
-    iconSize = 25;
     activeItem;
+    showLabels = true;
+    customCssClass;
     itemSelected = new EventEmitter();
     showClass() {
         return true;
     }
     Icon = CoreComponentsIcon;
     showMenu = false;
-    showSubCategories = false;
     _collection = [];
-    constructor(icons) {
+    _popupComponentRef;
+    constructor(icons, _overlayService, _elementRef) {
         this.icons = icons;
+        this._overlayService = _overlayService;
+        this._elementRef = _elementRef;
     }
     ngOnInit() {
         if (this.activeItem === undefined) {
             this.activeItem = this.collection[0];
         }
     }
+    ngOnDestroy() {
+        this.closePopup();
+    }
     toggleMenu() {
-        this.showMenu = !this.showMenu;
+        if (this.showMenu) {
+            this.closePopup();
+        }
+        else {
+            this.openPopup();
+        }
     }
-    selectItem(item) {
-        if (item.children) {
-            this.showSubCategories = !this.showSubCategories;
+    // The menu is rendered into a component that the OverlayService appends to the document body,
+    // so it escapes the parent DOM (and any overflow / z-index / stacking context there) instead of
+    // being clipped by it.
+    openPopup() {
+        if (this._popupComponentRef) {
             return;
         }
-        this.activeItem = item;
-        this.showMenu = false;
-        this.itemSelected.emit(this.activeItem);
+        this.showMenu = true;
+        this._popupComponentRef = this._overlayService.createComponent(ListOfIconsPopupComponent, {
+            parentForOverlay: this._elementRef,
+            customCssClass: this.customCssClass,
+            collection: this.collection,
+            activeItem: this.activeItem,
+            showLabels: this.showLabels
+        }, {
+            itemSelected: (item) => this.selectItem(item),
+            closePopup: () => this.closePopup()
+        });
     }
-    handlePickingCategoryClicked(subCategory) {
-        this.activeItem = subCategory;
+    closePopup() {
         this.showMenu = false;
-        this.itemSelected.emit(subCategory);
-        this.showSubCategories = false;
+        if (this._popupComponentRef) {
+            this._overlayService.removeComponent(this._popupComponentRef);
+            this._popupComponentRef = undefined;
+        }
     }
-    onClickOutside() {
-        this.showMenu = false;
-        this.showSubCategories = false;
+    selectItem(item) {
+        this.activeItem = item;
+        this.closePopup();
+        this.itemSelected.emit(this.activeItem);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsComponent, deps: [{ token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListOfIconsComponent, isStandalone: false, selector: "co-list-of-icons", inputs: { collection: "collection", iconSize: "iconSize", activeItem: "activeItem" }, outputs: { itemSelected: "itemSelected" }, host: { properties: { "class.co-list-of-icons": "this.showClass" } }, ngImport: i0, template: `
-      <div class="icon-item active" [class.menu-opened]="showMenu" (click)="toggleMenu()">
-        <co-icon [iconData]="activeItem.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsComponent, deps: [{ token: IconCacheService }, { token: OverlayService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListOfIconsComponent, isStandalone: false, selector: "co-list-of-icons", inputs: { collection: "collection", activeItem: "activeItem", showLabels: "showLabels", customCssClass: "customCssClass" }, outputs: { itemSelected: "itemSelected" }, host: { properties: { "class.co-list-of-icons": "this.showClass" } }, providers: [
+            OverlayService
+        ], ngImport: i0, template: `
+      <div class="icon-item active"
+           role="combobox"
+           aria-haspopup="listbox"
+           aria-controls="list-of-icons-popup"
+           [tooltip]="activeItem.label"
+           [attr.aria-expanded]="showMenu"
+           [class.menu-opened]="showMenu"
+           (click)="toggleMenu()">
+        <co-icon [iconData]="activeItem.icon"></co-icon>
         @if (!showMenu) {
           <co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.CaretDownSolid)"></co-icon>
         }
@@ -15000,45 +15537,22 @@ class ListOfIconsComponent {
           <co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.CaretUpSolid)"></co-icon>
         }
       </div>
-      @if (showMenu) {
-        <div class="dropdown-menu" (clickOutside)="onClickOutside()">
-          @for (item of collection; track item) {
-            <div
-              class="icon-item"
-              [class.active]="item === activeItem"
-              (click)="selectItem(item)">
-              <co-icon [iconData]="item.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
-              <div class="label" [textContent]="item.label | coreLocalize"></div>
-              @if (showSubCategories && item.children?.length > 0) {
-                <div class="picking-type-wrapper">
-                  @for (subCategory of item.children; track subCategory) {
-                    <div
-                      class="button-wrapper"
-                      (click)="handlePickingCategoryClicked(subCategory)">
-                      <co-icon
-                        class="co-transaction-button-bar-icon"
-                        [iconData]="subCategory.icon"
-                        [style.width.px]="iconSize"
-                        [style.height.px]="iconSize">
-                      </co-icon>
-                      <span class="button-title" [textContent]="subCategory.label | coreLocalize"></span>
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          }
-        </div>
-      }
-      `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutside", "alwaysTrigger"], outputs: ["clickOutside"], exportAs: ["clickOutside"] }, { kind: "pipe", type: CoreLocalizePipe, name: "coreLocalize" }], encapsulation: i0.ViewEncapsulation.None });
+      `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltipOrientation"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-list-of-icons',
                     template: `
-      <div class="icon-item active" [class.menu-opened]="showMenu" (click)="toggleMenu()">
-        <co-icon [iconData]="activeItem.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
+      <div class="icon-item active"
+           role="combobox"
+           aria-haspopup="listbox"
+           aria-controls="list-of-icons-popup"
+           [tooltip]="activeItem.label"
+           [attr.aria-expanded]="showMenu"
+           [class.menu-opened]="showMenu"
+           (click)="toggleMenu()">
+        <co-icon [iconData]="activeItem.icon"></co-icon>
         @if (!showMenu) {
           <co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.CaretDownSolid)"></co-icon>
         }
@@ -15046,65 +15560,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           <co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.CaretUpSolid)"></co-icon>
         }
       </div>
-      @if (showMenu) {
-        <div class="dropdown-menu" (clickOutside)="onClickOutside()">
-          @for (item of collection; track item) {
-            <div
-              class="icon-item"
-              [class.active]="item === activeItem"
-              (click)="selectItem(item)">
-              <co-icon [iconData]="item.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
-              <div class="label" [textContent]="item.label | coreLocalize"></div>
-              @if (showSubCategories && item.children?.length > 0) {
-                <div class="picking-type-wrapper">
-                  @for (subCategory of item.children; track subCategory) {
-                    <div
-                      class="button-wrapper"
-                      (click)="handlePickingCategoryClicked(subCategory)">
-                      <co-icon
-                        class="co-transaction-button-bar-icon"
-                        [iconData]="subCategory.icon"
-                        [style.width.px]="iconSize"
-                        [style.height.px]="iconSize">
-                      </co-icon>
-                      <span class="button-title" [textContent]="subCategory.label | coreLocalize"></span>
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          }
-        </div>
-      }
       `,
+                    providers: [
+                        OverlayService
+                    ],
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: IconCacheService }], propDecorators: { collection: [{
-                type: Input
-            }], iconSize: [{
-                type: Input
-            }], activeItem: [{
-                type: Input
-            }], itemSelected: [{
-                type: Output
-            }], showClass: [{
-                type: HostBinding,
-                args: ['class.co-list-of-icons']
-            }] } });
+        }], ctorParameters: () => [{ type: IconCacheService }, { type: OverlayService }, { type: i0.ElementRef }], propDecorators: { collection: [{
+                type: Input
+            }], activeItem: [{
+                type: Input
+            }], showLabels: [{
+                type: Input
+            }], customCssClass: [{
+                type: Input
+            }], itemSelected: [{
+                type: Output
+            }], showClass: [{
+                type: HostBinding,
+                args: ['class.co-list-of-icons']
+            }] } });
+
+class TooltipModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TooltipModule, declarations: [TooltipComponent], imports: [CommonModule], exports: [TooltipComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    declarations: [
+                        TooltipComponent
+                    ],
+                    exports: [
+                        TooltipComponent
+                    ]
+                }]
+        }] });
+
+class TooltipDirectiveModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirectiveModule, declarations: [TooltipDirective], imports: [TooltipModule], exports: [TooltipDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirectiveModule, imports: [TooltipModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TooltipModule
+                    ],
+                    declarations: [
+                        TooltipDirective
+                    ],
+                    exports: [
+                        TooltipDirective
+                    ]
+                }]
+        }] });
 
 class ListOfIconsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsModule, declarations: [ListOfIconsComponent], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsModule, declarations: [ListOfIconsComponent,
+            ListOfIconsPopupComponent], imports: [CommonModule,
             FormsModule,
             IconModule,
             ClickoutsideModule,
-            CoreComponentsTranslationModule], exports: [ListOfIconsComponent] });
+            OverlayModule,
+            CoreComponentsTranslationModule,
+            TooltipDirectiveModule], exports: [ListOfIconsComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsModule, imports: [CommonModule,
             FormsModule,
             IconModule,
             ClickoutsideModule,
-            CoreComponentsTranslationModule] });
+            OverlayModule,
+            CoreComponentsTranslationModule,
+            TooltipDirectiveModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsModule, decorators: [{
             type: NgModule,
@@ -15114,10 +15648,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         FormsModule,
                         IconModule,
                         ClickoutsideModule,
-                        CoreComponentsTranslationModule
+                        OverlayModule,
+                        CoreComponentsTranslationModule,
+                        TooltipDirectiveModule
                     ],
                     declarations: [
-                        ListOfIconsComponent
+                        ListOfIconsComponent,
+                        ListOfIconsPopupComponent
                     ],
                     exports: [
                         ListOfIconsComponent
@@ -18126,242 +18663,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
-class TooltipComponent {
-    _elementRef;
-    _changeDetector;
-    _renderer;
-    set hostElement(value) {
-        this._hostElement = value;
-        // this._positionTooltip();
-    }
-    get hostElement() {
-        return this._hostElement;
-    }
-    toolTip;
-    tooltipClosed = new EventEmitter();
-    showClass() {
-        return true;
-    }
-    top = -100;
-    left = -100;
-    bottom = false;
-    animate = true;
-    _hostElement;
-    _documentClickListener;
-    constructor(_elementRef, _changeDetector, _renderer) {
-        this._elementRef = _elementRef;
-        this._changeDetector = _changeDetector;
-        this._renderer = _renderer;
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this._positionTooltip();
-        });
-        this._documentClickListener = this._renderer.listen('document', 'click', (event) => {
-            if (!this._elementRef.nativeElement.contains(event.target)) {
-                this.closeTooltip();
-            }
-        });
-    }
-    ngOnDestroy() {
-        // Remove the click listener to prevent memory leaks
-        if (this._documentClickListener) {
-            this._documentClickListener();
-        }
-    }
-    _positionTooltip() {
-        if (this.hostElement && this._elementRef && this._elementRef.nativeElement) {
-            const rect = this.hostElement.getBoundingClientRect();
-            const ownRect = this._elementRef.nativeElement.getBoundingClientRect();
-            let wantedLeft = rect.left;
-            let wantedTop = rect.top - ownRect.height;
-            if (wantedTop < 0) { // out of view, move to bottom
-                this.bottom = true;
-                wantedTop = rect.bottom;
-            }
-            else {
-                this.bottom = false;
-            }
-            this.left = wantedLeft;
-            this.top = wantedTop;
-            this._changeDetector.markForCheck();
-            this._changeDetector.detectChanges();
-        }
-    }
-    closeTooltip() {
-        this.tooltipClosed.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TooltipComponent, isStandalone: false, selector: "co-tooltip", inputs: { hostElement: "hostElement", toolTip: "toolTip" }, outputs: { tooltipClosed: "tooltipClosed" }, host: { properties: { "class.co-tooltip": "this.showClass", "style.top.px": "this.top", "style.left.px": "this.left", "class.bottom": "this.bottom", "@showHide": "this.animate" } }, ngImport: i0, template: `
-    <div class="tooltip" [innerHTML]="toolTip"></div>
-  `, isInline: true, animations: [
-            trigger("showHide", [
-                state("void", style({ opacity: 0 })),
-                state("*", style({ opacity: 1 })),
-                transition("void <=> *", animate("200ms ease-in-out")),
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'co-tooltip',
-                    template: `
-    <div class="tooltip" [innerHTML]="toolTip"></div>
-  `,
-                    animations: [
-                        trigger("showHide", [
-                            state("void", style({ opacity: 0 })),
-                            state("*", style({ opacity: 1 })),
-                            transition("void <=> *", animate("200ms ease-in-out")),
-                        ])
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { hostElement: [{
-                type: Input
-            }], toolTip: [{
-                type: Input
-            }], tooltipClosed: [{
-                type: Output
-            }], showClass: [{
-                type: HostBinding,
-                args: ['class.co-tooltip']
-            }], top: [{
-                type: HostBinding,
-                args: ["style.top.px"]
-            }], left: [{
-                type: HostBinding,
-                args: ["style.left.px"]
-            }], bottom: [{
-                type: HostBinding,
-                args: ["class.bottom"]
-            }], animate: [{
-                type: HostBinding,
-                args: ['@showHide']
-            }] } });
-
-class TooltipDirective {
-    _compFactoryResolver;
-    _appRef;
-    _injector;
-    _sanitizer;
-    set tooltip(str) {
-        this._tooltipMessage = str;
-    }
-    _elementRef;
-    _tooltipMessage;
-    _componentRef;
-    constructor(elementRef, _compFactoryResolver, _appRef, _injector, _sanitizer) {
-        this._compFactoryResolver = _compFactoryResolver;
-        this._appRef = _appRef;
-        this._injector = _injector;
-        this._sanitizer = _sanitizer;
-        this._elementRef = elementRef;
-    }
-    ngOnDestroy() {
-        if (this._elementRef && this._elementRef.nativeElement) {
-            this._elementRef.nativeElement.removeEventListener('mouseenter', (event) => this._handleMouseMove(event));
-            this._elementRef.nativeElement.removeEventListener('mouseleave', () => this._removeTooltip());
-        }
-        window.removeEventListener("scroll", (event) => this._handleScroll);
-        this._elementRef = undefined;
-    }
-    ngOnInit() {
-        window.addEventListener("scroll", (event) => this._handleScroll);
-        if (this._elementRef && this._elementRef.nativeElement) {
-            this._elementRef.nativeElement.addEventListener('mouseenter', (event) => this._handleMouseMove(event));
-            this._elementRef.nativeElement.addEventListener('mouseleave', () => this._removeTooltip());
-        }
-    }
-    _handleScroll() {
-        this._removeTooltip();
-    }
-    _handleMouseMove(event) {
-        this._showTooltip(event.clientY, event.clientX);
-    }
-    _showTooltip(top, left) {
-        this._createTooltipComponent(top, left);
-    }
-    _removeTooltip() {
-        if (this._componentRef) {
-            this._appRef.detachView(this._componentRef.hostView);
-            this._componentRef.destroy();
-            this._componentRef = undefined;
-        }
-    }
-    _createTooltipComponent(top, left) {
-        if (!this._tooltipMessage) {
-            return;
-        }
-        if (this._componentRef) {
-            return;
-        }
-        this._componentRef = this._compFactoryResolver
-            .resolveComponentFactory(TooltipComponent)
-            .create(this._injector);
-        this._componentRef.instance.hostElement = this._elementRef.nativeElement;
-        this._componentRef.instance.toolTip = this._sanitizer.bypassSecurityTrustHtml(this._tooltipMessage);
-        this._appRef.attachView(this._componentRef.hostView);
-        const domElem = this._componentRef.hostView.rootNodes[0];
-        document.body.appendChild(domElem);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: TooltipDirective, isStandalone: false, selector: "[tooltip]", inputs: { tooltip: "tooltip" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[tooltip]",
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i1.DomSanitizer }], propDecorators: { tooltip: [{
-                type: Input,
-                args: ["tooltip"]
-            }] } });
-
-class TooltipModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TooltipModule, declarations: [TooltipComponent], imports: [CommonModule], exports: [TooltipComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        TooltipComponent
-                    ],
-                    exports: [
-                        TooltipComponent
-                    ]
-                }]
-        }] });
-
-class TooltipDirectiveModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirectiveModule, declarations: [TooltipDirective], imports: [TooltipModule], exports: [TooltipDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirectiveModule, imports: [TooltipModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirectiveModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        TooltipModule
-                    ],
-                    declarations: [
-                        TooltipDirective
-                    ],
-                    exports: [
-                        TooltipDirective
-                    ]
-                }]
-        }] });
-
 // Base screen configuration service for one "screen module", e.g. 'Crm'. Db-loads, stores and and interprets ObjectConfiguration config objects.
 class BaseModuleScreenConfigService {
     // emits the params of the loaded config, each time when a new config was loaded
@@ -19721,6 +20022,7 @@ class HourSchedulingExpandableComponent {
         this._schedule = value;
         if (this._schedule) {
             this.renderObjects();
+            this.generateTimeBlocks();
         }
     }
     get schedule() {
@@ -19851,6 +20153,10 @@ class HourSchedulingExpandableComponent {
             }
         }
         this.layouts = this.calculateLeftAndWidthOfObjects();
+        const event = dragEvent.target;
+        if (event.classList.contains('drag-over')) {
+            event.classList.remove('drag-over');
+        }
     }
     allowDrop(event, hour) {
         event.preventDefault();
@@ -19938,12 +20244,19 @@ class HourSchedulingExpandableComponent {
         return Math.abs(difference / 60);
     }
     generateTimeBlocks() {
-        let startUnix = !this.childProp ? this.dateToUnixEpoch(this.convertDateToEuropean(this.schedule[this.startTimeProp])) : this.dateToUnixEpoch(this.convertDateToEuropean(this.schedule[this.childProp][this.startTimeProp]));
-        let endUnix = !this.childProp ? this.dateToUnixEpoch(this.convertDateToEuropean(this.schedule[this.endTimeProp])) : this.dateToUnixEpoch(this.convertDateToEuropean(this.schedule[this.childProp][this.endTimeProp]));
-        let interval = 60 * 60;
+        this.hourLabels = [];
+        const schedule = this.childProp
+            ? this.schedule[this.childProp]
+            : this.schedule;
+        if (!schedule || !schedule[this.startTimeProp] || !schedule[this.endTimeProp]) {
+            return;
+        }
+        const startUnix = this.dateToUnixEpoch(this.convertDateToEuropean(schedule[this.startTimeProp]));
+        const endUnix = this.dateToUnixEpoch(this.convertDateToEuropean(schedule[this.endTimeProp]));
+        const interval = 60 * 60;
         for (let hourCount = startUnix; hourCount <= endUnix; hourCount += interval) {
-            let hour = new Date(hourCount * 1000);
-            let hourString = `${hour.getHours()}:${hour.getMinutes() === 0 ? '00' : hour.getMinutes()}`;
+            const hour = new Date(hourCount * 1000);
+            const hourString = `${hour.getHours()}:${hour.getMinutes() === 0 ? "00" : hour.getMinutes()}`;
             this.hourLabels.push(hourString);
         }
     }