@colijnit/corecomponents_v12 300.1.4 → 300.1.6

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);
@@ -11942,35 +11951,17 @@ class SimpleGridCellComponent {
     _changeDetector;
     _injector;
     _formComponent;
-    get editMode() {
-        return this._editMode;
-    }
-    set editMode(value) {
-        this._editMode = value;
-    }
+    editMode;
     defaultTextAlign = ColumnAlign.Left;
-    set editTemplateContent(template) {
-        if (template) {
-            this._editTemplate = template;
-            this._setFocusComponent();
-        }
-    }
-    set noEditTemplateContent(template) {
-        if (template) {
-            this._template = template;
-            this._setFocusComponent();
-        }
-    }
-    set noTemplateContent(template) {
-        if (template) {
-            this._inputTemplate = template;
+    set cellFieldContent(element) {
+        if (element) {
+            this._cellField = element;
             this._setFocusComponent();
         }
     }
     column;
     row;
     columnInjector;
-    _editMode = false;
     set fieldEditMode(value) {
         this._fieldEditMode = value;
         this._setFocusComponent();
@@ -11989,9 +11980,7 @@ class SimpleGridCellComponent {
     }
     _fieldEditMode = false;
     _focused = false;
-    _editTemplate;
-    _template;
-    _inputTemplate;
+    _cellField;
     constructor(_changeDetector, _injector, _formComponent) {
         this._changeDetector = _changeDetector;
         this._injector = _injector;
@@ -12006,7 +11995,7 @@ class SimpleGridCellComponent {
         });
     }
     _setFocusComponent() {
-        if (this._editMode && this.fieldEditMode) {
+        if (this.editMode && this.fieldEditMode) {
             const element = this._getElement();
             if (element) {
                 const focusEvent = this._createNewEvent(element, 'focus');
@@ -12050,22 +12039,10 @@ class SimpleGridCellComponent {
         return event;
     }
     _getElement() {
-        let templ;
-        if (this._editTemplate) {
-            templ = this._editTemplate;
-        }
-        else if (this._template) {
-            templ = this._template;
-        }
-        else {
-            templ = this._inputTemplate;
-        }
-        if (templ) {
-            if (templ && templ.elementRef) {
-                const inputElement = this._getFirstFormInput(templ.elementRef.nativeElement.parentElement);
-                if (inputElement) {
-                    return inputElement;
-                }
+        if (this._cellField && this._cellField.nativeElement) {
+            const inputElement = this._getFirstFormInput(this._cellField.nativeElement);
+            if (inputElement) {
+                return inputElement;
             }
         }
     }
@@ -12073,12 +12050,12 @@ 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: "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: `
+    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: "cellFieldContent", first: true, predicate: ["cellField"], descendants: true }], ngImport: i0, template: `
       <div class="simple-grid-column-cell-value" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
         @if (editMode) {
-          <div class="simple-grid-column-cell-field">
+          <div #cellField class="simple-grid-column-cell-field">
             @if (column.editTemplate) {
-              <ng-container #editTemplate
+              <ng-container
                 [ngTemplateOutlet]="column.editTemplate"
                 [ngTemplateOutletInjector]="columnInjector"
               [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
@@ -12092,7 +12069,7 @@ class SimpleGridCellComponent {
             }
           </div>
         } @else {
-          <div class="simple-grid-column-cell-field">
+          <div #cellField class="simple-grid-column-cell-field">
             @if (column.template) {
               <ng-container [ngTemplateOutlet]="column.template"
               [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
@@ -12111,9 +12088,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     template: `
       <div class="simple-grid-column-cell-value" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
         @if (editMode) {
-          <div class="simple-grid-column-cell-field">
+          <div #cellField class="simple-grid-column-cell-field">
             @if (column.editTemplate) {
-              <ng-container #editTemplate
+              <ng-container
                 [ngTemplateOutlet]="column.editTemplate"
                 [ngTemplateOutletInjector]="columnInjector"
               [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
@@ -12127,7 +12104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }
           </div>
         } @else {
-          <div class="simple-grid-column-cell-field">
+          <div #cellField class="simple-grid-column-cell-field">
             @if (column.template) {
               <ng-container [ngTemplateOutlet]="column.template"
               [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
@@ -12145,15 +12122,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     type: Optional
                 }] }], propDecorators: { editMode: [{
                 type: Input
-            }], editTemplateContent: [{
-                type: ViewChild,
-                args: ["editTemplate", { read: BaseInputComponent }]
-            }], noEditTemplateContent: [{
-                type: ViewChild,
-                args: ["noEditTemplate"]
-            }], noTemplateContent: [{
+            }], cellFieldContent: [{
                 type: ViewChild,
-                args: ["noTemplate"]
+                args: ["cellField"]
             }], column: [{
                 type: Input
             }], row: [{
@@ -12277,10 +12248,13 @@ 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.
         const headerElements = cells.toArray();
-        for (let i = 0; i < headerElements.length; i++) {
-            this.columns[i].elementRef = headerElements[i];
+        for (let i = 0; i < headerElements.length && i < this.headerColumnsCopy.length; i++) {
+            this.headerColumnsCopy[i].elementRef = headerElements[i];
         }
     }
     rowElements;
@@ -12315,8 +12289,11 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
                 .then((index) => {
                 this.editCellIndex = index;
                 this.changeDetection.markForCheck();
+                this._detectChanges();
+            })
+                .catch(() => {
+                // row change was blocked by validation, keep the current cell in edit mode
             });
-            this._detectChanges();
         }
         if (event.code === 'Escape') {
             this.cancelEditRow();
@@ -12585,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) => {
@@ -12621,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;
@@ -12719,6 +12706,9 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
         }, 500);
     }
     /**
+     * Cell indexes are expressed in `headerColumnsCopy` space, because that is the
+     * collection the rows are rendered from. Using `columns` here would drift as soon
+     * as a column is hidden or marked as single column.
      *
      * @param next; Move to next or previous cell
      * @param start; Start from cellindex
@@ -12726,9 +12716,16 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
      */
     _nextAvailableCellToEdit(next, start = -1) {
         return new Promise((resolve, reject) => {
-            const numEditableColumns = this.columns.filter(c => !c.readonly).length;
             const wantedIndex = start + (next ? 1 : -1);
-            if (wantedIndex >= numEditableColumns) {
+            const cellIndex = next
+                ? this._getNextEditCellIndex(Math.max(wantedIndex, 0))
+                : this._getPreviousEditCellIndex(wantedIndex);
+            // Still an editable column left in the current row
+            if (cellIndex > -1) {
+                resolve(cellIndex);
+                return;
+            }
+            if (next) {
                 this._getNextEditRowIndex()
                     .then((index) => {
                     this.editRowIndex = index;
@@ -12738,34 +12735,37 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
                     reject();
                 });
             }
-            else if (wantedIndex < 0) {
+            else {
                 this._getPreviousEditRowIndex()
                     .then((index) => {
                     this.editRowIndex = index;
-                    resolve(this._getPreviousEditCellIndex(this.columns.length - 1));
+                    resolve(this._getPreviousEditCellIndex(this.headerColumnsCopy.length - 1));
                 })
                     .catch((e) => {
                     reject();
                 });
             }
-            else {
-                resolve(next ? this._getNextEditCellIndex(start + 1) : this._getPreviousEditCellIndex(start - 1));
-            }
         });
     }
     _getNextEditCellIndex(start) {
-        for (let i = start; i < this.columns.length; i++) {
-            if (!this.columns[i].readonly) {
+        for (let i = start; i < this.headerColumnsCopy.length; i++) {
+            if (this._isCellEditable(i)) {
                 return i;
             }
         }
+        return -1;
     }
     _getPreviousEditCellIndex(start) {
-        for (let i = start; i >= 0; i--) {
-            if (!this.columns[i].readonly) {
+        for (let i = Math.min(start, this.headerColumnsCopy.length - 1); i >= 0; i--) {
+            if (this._isCellEditable(i)) {
                 return i;
             }
         }
+        return -1;
+    }
+    _isCellEditable(cellIndex) {
+        const column = this.headerColumnsCopy[cellIndex];
+        return !!column && !column.readonly;
     }
     _getNextEditRowIndex() {
         return new Promise((resolve, reject) => {
@@ -14960,215 +14960,732 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
-class ListOfIconsComponent {
-    icons;
-    set collection(value) {
-        this._collection = value || [];
-        this.activeItem = this.collection[0];
+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 collection() {
-        return this._collection;
+    get hostElement() {
+        return this._hostElement;
     }
-    iconSize = 25;
-    activeItem;
-    itemSelected = new EventEmitter();
+    toolTip;
+    orientation = CoDirection.Up;
+    tooltipClosed = new EventEmitter();
     showClass() {
         return true;
     }
-    Icon = CoreComponentsIcon;
-    showMenu = false;
-    showSubCategories = false;
-    _collection = [];
-    constructor(icons) {
-        this.icons = icons;
+    top = -100;
+    left = -100;
+    get isTop() {
+        return this._resolvedOrientation === CoDirection.Up;
     }
-    ngOnInit() {
-        if (this.activeItem === undefined) {
-            this.activeItem = this.collection[0];
-        }
+    get isBottom() {
+        return this._resolvedOrientation === CoDirection.Down;
     }
-    toggleMenu() {
-        this.showMenu = !this.showMenu;
+    get isLeft() {
+        return this._resolvedOrientation === CoDirection.Left;
     }
-    selectItem(item) {
-        if (item.children) {
-            this.showSubCategories = !this.showSubCategories;
+    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;
         }
-        this.activeItem = item;
-        this.showMenu = false;
-        this.itemSelected.emit(this.activeItem);
+        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();
     }
-    handlePickingCategoryClicked(subCategory) {
-        this.activeItem = subCategory;
-        this.showMenu = false;
-        this.itemSelected.emit(subCategory);
-        this.showSubCategories = false;
+    _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);
+        }
     }
-    onClickOutside() {
-        this.showMenu = false;
-        this.showSubCategories = false;
+    _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;
+        }
     }
-    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>
-        @if (!showMenu) {
-          <co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.CaretDownSolid)"></co-icon>
-        }
-        @if (showMenu) {
-          <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 });
+    _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: ListOfIconsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'co-list-of-icons',
+                    selector: 'co-tooltip',
                     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>
-        @if (!showMenu) {
-          <co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.CaretDownSolid)"></co-icon>
-        }
-        @if (showMenu) {
-          <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>
-      }
-      `,
+      <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: IconCacheService }], propDecorators: { collection: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { hostElement: [{
                 type: Input
-            }], iconSize: [{
+            }], toolTip: [{
                 type: Input
-            }], activeItem: [{
+            }], orientation: [{
                 type: Input
-            }], itemSelected: [{
+            }], tooltipClosed: [{
                 type: Output
             }], showClass: [{
                 type: HostBinding,
-                args: ['class.co-list-of-icons']
+                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']
             }] } });
 
-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,
-            FormsModule,
-            IconModule,
-            ClickoutsideModule,
-            CoreComponentsTranslationModule], exports: [ListOfIconsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsModule, imports: [CommonModule,
-            FormsModule,
-            IconModule,
-            ClickoutsideModule,
-            CoreComponentsTranslationModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        IconModule,
-                        ClickoutsideModule,
-                        CoreComponentsTranslationModule
-                    ],
-                    declarations: [
-                        ListOfIconsComponent
-                    ],
-                    exports: [
-                        ListOfIconsComponent
-                    ]
-                }]
-        }] });
-
-class ResponsiveTextComponent {
-    text;
-    showClass() {
-        return true;
+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;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ResponsiveTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ResponsiveTextComponent, isStandalone: false, selector: "co-responsive-text", inputs: { text: "text" }, host: { properties: { "class.co-responsive-text": "this.showClass" } }, ngImport: i0, template: `
-        <svg viewBox="0 0 100 100">
-            <foreignObject height="100%" width="100%">
-                <div class="text" [textContent]="text"></div>
-            </foreignObject>            
-        </svg>
-    `, isInline: true, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ResponsiveTextComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'co-responsive-text',
-                    template: `
-        <svg viewBox="0 0 100 100">
-            <foreignObject height="100%" width="100%">
-                <div class="text" [textContent]="text"></div>
-            </foreignObject>            
-        </svg>
+    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];
+    }
+    get collection() {
+        return this._collection;
+    }
+    activeItem;
+    showLabels = true;
+    customCssClass;
+    itemSelected = new EventEmitter();
+    showClass() {
+        return true;
+    }
+    Icon = CoreComponentsIcon;
+    showMenu = false;
+    _collection = [];
+    _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() {
+        if (this.showMenu) {
+            this.closePopup();
+        }
+        else {
+            this.openPopup();
+        }
+    }
+    // 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.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()
+        });
+    }
+    closePopup() {
+        this.showMenu = false;
+        if (this._popupComponentRef) {
+            this._overlayService.removeComponent(this._popupComponentRef);
+            this._popupComponentRef = undefined;
+        }
+    }
+    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 }, { 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>
+        }
+        @if (showMenu) {
+          <co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.CaretUpSolid)"></co-icon>
+        }
+      </div>
+      `, 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"
+           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>
+        }
+        @if (showMenu) {
+          <co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.CaretUpSolid)"></co-icon>
+        }
+      </div>
+      `,
+                    providers: [
+                        OverlayService
+                    ],
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: false
+                }]
+        }], 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,
+            ListOfIconsPopupComponent], imports: [CommonModule,
+            FormsModule,
+            IconModule,
+            ClickoutsideModule,
+            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,
+            OverlayModule,
+            CoreComponentsTranslationModule,
+            TooltipDirectiveModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfIconsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        IconModule,
+                        ClickoutsideModule,
+                        OverlayModule,
+                        CoreComponentsTranslationModule,
+                        TooltipDirectiveModule
+                    ],
+                    declarations: [
+                        ListOfIconsComponent,
+                        ListOfIconsPopupComponent
+                    ],
+                    exports: [
+                        ListOfIconsComponent
+                    ]
+                }]
+        }] });
+
+class ResponsiveTextComponent {
+    text;
+    showClass() {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ResponsiveTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ResponsiveTextComponent, isStandalone: false, selector: "co-responsive-text", inputs: { text: "text" }, host: { properties: { "class.co-responsive-text": "this.showClass" } }, ngImport: i0, template: `
+        <svg viewBox="0 0 100 100">
+            <foreignObject height="100%" width="100%">
+                <div class="text" [textContent]="text"></div>
+            </foreignObject>            
+        </svg>
+    `, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ResponsiveTextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'co-responsive-text',
+                    template: `
+        <svg viewBox="0 0 100 100">
+            <foreignObject height="100%" width="100%">
+                <div class="text" [textContent]="text"></div>
+            </foreignObject>            
+        </svg>
     `,
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
@@ -18146,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