@igo2/common 20.1.0-next.3 → 20.1.0-next.30

package/badge/index.d.ts

@@ -20,7 +20,7 @@ declare class IgoBadgeIconDirective implements OnInit {
     private inheritColor;
     set igoMatBadgeColor(value: string);
     private color;
-    set igoMatBadgeBackgroundColor(value: string);
+    set igoMatBadgeBackgroundColor(value: string | null);
     private backgroundColor;
     get badge(): any;
     private originalColor;

package/drag-drop/index.d.ts

@@ -1,7 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { OnDestroy, ModuleWithProviders } from '@angular/core';
-import { SelectionModel } from '@angular/cdk/collections';
-import { FlatTreeControl } from '@angular/cdk/tree';
+import { CdkTree } from '@angular/cdk/tree';
 import { MatTreeNode } from '@angular/material/tree';
 
 declare class DragAndDropDirective {
@@ -17,13 +16,10 @@ declare class DragAndDropDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DragAndDropDirective, "[igoDragAndDrop]", never, { "allowedExtensions": { "alias": "allowedExtensions"; "required": false; "isSignal": true; }; }, { "filesDropped": "filesDropped"; "filesInvalid": "filesInvalid"; }, never, never, true, never>;
 }
 
-interface TreeFlatNode<T = any> {
-    id: string;
-    isGroup: boolean;
-    disabled: boolean;
-    level: number;
-    descendantLevels?: number;
-    data: T;
+interface TreeDropEvent<T> {
+    node: T;
+    ref: T;
+    position: DropPositionType;
 }
 interface DropPosition {
     x: number;
@@ -32,20 +28,19 @@ interface DropPosition {
     type: DropPositionType;
 }
 type DropPositionType = 'above' | 'below' | 'inside';
-
-interface TreeDropEvent<T = any> {
-    node: TreeFlatNode<T>;
-    ref: TreeFlatNode<T>;
-    position: DropPositionType;
+interface DropPermission {
+    canDrop: boolean;
+    message?: string;
+    params?: Record<string, unknown>;
 }
+
 interface DragNodeListeners {
     element: HTMLElement;
     listeners: [string, EventListenerOrEventListenerObject][];
 }
-interface DropPermission {
-    canDrop: boolean;
-    message?: string;
-    params?: Record<string, unknown>;
+interface ITreeConfig<T> {
+    isGroup: (node: T) => boolean;
+    descendantLevels: (node: T) => number | undefined;
 }
 /**
  * This directive should be use with a MatTree flatened
@@ -54,32 +49,43 @@ interface DropPermission {
  *    Tree: --dragging
  *    Node: --drag-hover | --dragged
  */
-declare class TreeDragDropDirective implements OnDestroy {
+declare class TreeDragDropDirective<T extends {
+    id: string | number;
+} = {
+    id: string | number;
+}, K = T> implements OnDestroy {
     private elementRef;
     private renderer;
-    draggedNode: TreeFlatNode;
-    dropNodeTarget: TreeFlatNode;
+    draggedNode: T;
+    dropNodeTarget: _angular_core.WritableSignal<T>;
     expandTimeout: number;
     nodesListeners: DragNodeListeners[] | undefined;
     private nodesEffect;
-    dropLineTarget: HTMLElement;
-    highlightedNode: SelectionModel<TreeFlatNode<any>>;
-    readonly treeControl: _angular_core.InputSignal<FlatTreeControl<TreeFlatNode<any>, TreeFlatNode<any>>>;
+    dropLineTarget: _angular_core.WritableSignal<HTMLElement>;
+    previousDropLine: _angular_core.WritableSignal<HTMLElement>;
+    dropPosition: _angular_core.WritableSignal<DropPosition>;
+    dragging: _angular_core.WritableSignal<boolean>;
+    highlightedNode: T | undefined;
+    readonly tree: _angular_core.InputSignal<CdkTree<T, K>>;
+    readonly childrenAccessor: _angular_core.InputSignal<(node: T) => T[]>;
+    readonly config: _angular_core.InputSignal<ITreeConfig<T>>;
     /** The default is 5 */
     readonly maxLevel: _angular_core.InputSignal<number>;
     readonly treeDragDropIsDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly dragStart: _angular_core.OutputEmitterRef<TreeFlatNode<any>>;
-    readonly onDrop: _angular_core.OutputEmitterRef<TreeDropEvent<any>>;
-    readonly onDropError: _angular_core.OutputEmitterRef<DropPermission>;
-    hostDragOver(event: Event): void;
-    hostDrop(event: DragEvent): void;
-    dragging: boolean;
+    readonly dragStart: _angular_core.OutputEmitterRef<T>;
+    readonly dropped: _angular_core.OutputEmitterRef<TreeDropEvent<T>>;
+    readonly droppedError: _angular_core.OutputEmitterRef<DropPermission>;
     readonly nodes: _angular_core.Signal<readonly MatTreeNode<any, any>[]>;
     constructor();
+    get isGroup(): (node: T) => boolean;
+    get getDescendantLevels(): (node: T) => number | undefined;
     ngOnDestroy(): void;
-    onDragStart(node: TreeFlatNode): void;
+    hostDragOver(event: Event): void;
+    hostDragLeave(event: DragEvent): void;
+    hostDrop(event: DragEvent): void;
+    onDragStart(node: T): void;
     dragEnd(): void;
-    dragOver(node: TreeFlatNode, event: DragEvent): void;
+    dragOver(node: T, event: DragEvent): void;
     dragLeave(): void;
     drop(event: DragEvent): void;
     private addNodeClass;
@@ -90,12 +96,15 @@ declare class TreeDragDropDirective implements OnDestroy {
     private setHighlightedNode;
     private addDropTargetLine;
     private removeDropTargetLine;
+    private hideDropTargetLine;
+    private showDropTargetLine;
     private updateDropTargetLinePosition;
     private handleGroupExpansion;
     private getNodeElement;
     private canDropNode;
     private canDropGroup;
     private validateMaxHierarchyLevel;
+    private getDescendants;
     private isHoverDescendant;
     private getPosition;
     private getPositionY;
@@ -105,9 +114,13 @@ declare class TreeDragDropDirective implements OnDestroy {
      * @param level if level is defined with go to the defined levle to find ancestor. Sinon on prend le current ancestor
      */
     private getNodeAncestors;
+    private getAncestorsPath;
+    private findPath;
+    private getNodeLevel;
     private getDirectDescendants;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TreeDragDropDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TreeDragDropDirective, "[igoTreeDragDrop]", never, { "treeControl": { "alias": "treeControl"; "required": true; "isSignal": true; }; "maxLevel": { "alias": "maxLevel"; "required": false; "isSignal": true; }; "treeDragDropIsDisabled": { "alias": "treeDragDropIsDisabled"; "required": false; "isSignal": true; }; }, { "dragStart": "dragStart"; "onDrop": "onDrop"; "onDropError": "onDropError"; }, ["nodes"], never, true, never>;
+    private findTreeNode;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TreeDragDropDirective<any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TreeDragDropDirective<any, any>, "[igoTreeDragDrop]", never, { "tree": { "alias": "tree"; "required": true; "isSignal": true; }; "childrenAccessor": { "alias": "childrenAccessor"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": true; "isSignal": true; }; "maxLevel": { "alias": "maxLevel"; "required": false; "isSignal": true; }; "treeDragDropIsDisabled": { "alias": "treeDragDropIsDisabled"; "required": false; "isSignal": true; }; }, { "dragStart": "dragStart"; "dropped": "dropped"; "droppedError": "droppedError"; }, ["nodes"], never, true, never>;
 }
 
 /**
@@ -121,4 +134,4 @@ declare class IgoDrapDropModule {
 }
 
 export { DragAndDropDirective, IgoDrapDropModule, TreeDragDropDirective };
-export type { DropPermission, DropPosition, DropPositionType, TreeDropEvent, TreeFlatNode };
+export type { DropPermission, DropPosition, DropPositionType, ITreeConfig, TreeDropEvent };

package/entity/index.d.ts

@@ -87,28 +87,7 @@ interface EntityTableColumnValidation {
 interface TableRelation {
     table: string;
 }
-interface EntityTableColumn {
-    validation?: EntityTableColumnValidation;
-    name: string;
-    title: string;
-    renderer?: EntityTableColumnRenderer;
-    valueAccessor?: (entity: object, record: EntityRecord<object>) => any;
-    visible?: boolean;
-    linkColumnForce?: string;
-    sort?: boolean;
-    type?: string;
-    multiple?: boolean;
-    domainValues?: SelectOption[];
-    relation?: TableRelation;
-    tooltip?: string;
-    cellClassFunc?: (entity: object, record: EntityRecord<object>) => Record<string, boolean>;
-    step?: number;
-    icon?: string;
-    onBlur?: (event: Event) => void;
-    onChange?: (event: Event) => void;
-    onClick?: (event: Event) => void;
-    onFocus?: (event: Event) => void;
-}
+type EntityTableColumn = SelectEntityTableColumn | BaseEntityTableColumn;
 interface SelectOption {
     id: number;
     value: string;
@@ -122,6 +101,90 @@ interface EntityTableButton {
     style?: 'mat-mini-fab' | 'mat-icon-button';
     editMode?: boolean;
 }
+type AnyEntityField = AnyChoiceEntityField | BaseEntityField;
+type AnyChoiceEntityField = ChoiceEntityFieldWithDomain | ChoiceEntityFieldWithLabelField;
+interface ChoiceEntityFieldWithDomain extends BaseChoiceEntityField {
+    domainValues: SelectOption[];
+}
+interface ChoiceEntityFieldWithLabelField extends BaseChoiceEntityField {
+    labelField: string;
+}
+interface BaseChoiceEntityField extends BaseEntityField {
+    domainValues?: SelectOption[];
+    type: 'list' | 'autocomplete';
+    dataType: EntityDataType;
+    /** Define the caracters who structure the array. This allow a workaround to handle stringify list with custom caracter */
+    arrayIdentifier?: [string, string];
+}
+type EntityDataType = 'string' | 'number' | 'object';
+interface BaseEntityField {
+    multiple?: boolean;
+    name: string;
+    relation?: EntityRelation;
+    type?: string;
+}
+interface EntityRelation {
+    table?: string;
+    url?: string;
+    params?: EntityRelationParam;
+    choiceList?: {
+        path?: {
+            /**
+             * The list property allows you to determine a path to resolve to access the list in an Object.
+             * This is required when the API returns an Object instead of a raw List
+             **/
+            list?: string;
+            /** Default is "id" */
+            id?: string;
+            /** Default is "value" */
+            value?: string;
+        };
+    };
+}
+interface EntityRelationParam {
+    name?: string;
+    field: string;
+}
+type SelectEntityTableColumn = AnyChoiceEntityField & BaseEntityTableColumn;
+interface BaseEntityTableColumn extends BaseEntityField {
+    primary?: boolean;
+    renderer?: EntityTableColumnRenderer;
+    sort?: boolean;
+    step?: number;
+    title: string;
+    tooltip?: string;
+    validation?: EntityTableColumnValidation & {
+        send?: boolean;
+    };
+    visible?: boolean;
+    icon?: string;
+    linkColumnForce?: string;
+    cellClassFunc?: (entity: object, record: EntityRecord<object>) => {
+        [key: string]: boolean;
+    };
+    valueAccessor?: (entity: object, record?: EntityRecord<object>) => any;
+    onBlur?: (event: Event) => void;
+    onChange?: (event: Event) => void;
+    onClick?: (event: Event) => void;
+    onFocus?: (event: Event) => void;
+}
+
+declare class EntityService {
+    private http;
+    private configService;
+    encodeListValue(state: EntityState, column: SelectEntityTableColumn): EntityState | string;
+    getDomainValues(field: AnyChoiceEntityField, paramsValue?: {
+        [key: string]: unknown;
+    }): Observable<SelectOption[]>;
+    resolveDomainValues(state: EntityState, column: SelectEntityTableColumn): unknown | unknown[];
+    private buildUrl;
+    private parseDomainValues;
+    private getRelationFilterParamName;
+    private findDomainValue;
+    private parseListValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EntityService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<EntityService>;
+}
 
 /**
  * Get an entity's named property. Nested properties are supported
@@ -171,6 +234,9 @@ declare function getEntityIcon(entity: object): string;
  * @returns Entity revision
  */
 declare function getEntityRevision(entity: object): number;
+declare function getColumnKeyWithoutPropertiesTag(key: string): string;
+declare function isChoiceField(field: AnyEntityField): field is AnyChoiceEntityField;
+declare function isChoiceFieldWithLabelField(field: AnyEntityField): field is ChoiceEntityFieldWithLabelField;
 
 interface EntityStateManagerOptions<E extends object> {
     getKey?: (entity: object) => EntityKey;
@@ -1527,5 +1593,5 @@ declare class IgoEntityModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<IgoEntityModule>;
 }
 
-export { ENTITY_DIRECTIVES, EntityOperationType, EntitySelectorComponent, EntityStateManager, EntityStore, EntityStoreFilterCustomFuncStrategy, EntityStoreFilterSelectionStrategy, EntityStoreStrategy, EntityStoreWatcher, EntityTableColumnRenderer, EntityTableComponent, EntityTablePaginatorComponent, EntityTableScrollBehavior, EntityTableSelectionState, EntityTransaction, EntityView, IgoEntityModule, IgoEntitySelectorModule, IgoEntityTableModule, IgoEntityTablePaginatorModule, getEntityIcon, getEntityId, getEntityProperty, getEntityRevision, getEntityTitle, getEntityTitleHtml };
-export type { EntityFilterClause, EntityJoinClause, EntityKey, EntityOperation, EntityOperationState, EntityRecord, EntitySelectorChange, EntitySortClause, EntityState, EntityStoreOptions, EntityStoreStrategyFuncOptions, EntityStoreStrategyOptions, EntityTableButton, EntityTableColumn, EntityTableColumnValidation, EntityTablePaginatorOptions, EntityTableTemplate, EntityTransactionCommitHandler, EntityTransactionOptions, SelectOption, TableRelation };
+export { ENTITY_DIRECTIVES, EntityOperationType, EntitySelectorComponent, EntityService, EntityStateManager, EntityStore, EntityStoreFilterCustomFuncStrategy, EntityStoreFilterSelectionStrategy, EntityStoreStrategy, EntityStoreWatcher, EntityTableColumnRenderer, EntityTableComponent, EntityTablePaginatorComponent, EntityTableScrollBehavior, EntityTableSelectionState, EntityTransaction, EntityView, IgoEntityModule, IgoEntitySelectorModule, IgoEntityTableModule, IgoEntityTablePaginatorModule, getColumnKeyWithoutPropertiesTag, getEntityIcon, getEntityId, getEntityProperty, getEntityRevision, getEntityTitle, getEntityTitleHtml, isChoiceField, isChoiceFieldWithLabelField };
+export type { AnyChoiceEntityField, AnyEntityField, BaseEntityTableColumn, ChoiceEntityFieldWithDomain, ChoiceEntityFieldWithLabelField, EntityDataType, EntityFilterClause, EntityJoinClause, EntityKey, EntityOperation, EntityOperationState, EntityRecord, EntityRelation, EntityRelationParam, EntitySelectorChange, EntitySortClause, EntityState, EntityStoreOptions, EntityStoreStrategyFuncOptions, EntityStoreStrategyOptions, EntityTableButton, EntityTableColumn, EntityTableColumnValidation, EntityTablePaginatorOptions, EntityTableTemplate, EntityTransactionCommitHandler, EntityTransactionOptions, SelectEntityTableColumn, SelectOption, TableRelation };

package/fesm2022/igo2-common-action.mjs

@@ -16,7 +16,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { IgoLanguageModule } from '@igo2/core/language';
-import { MediaService, Media } from '@igo2/core/media';
+import { MediaService } from '@igo2/core/media';
 import { BehaviorSubject, isObservable } from 'rxjs';
 import * as i4 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -165,7 +165,7 @@ class ActionbarItemComponent {
      * @internal
      */
     onClick() {
-        if (this.disabled === true) {
+        if (this.disabled) {
             return;
         }
         this.trigger.emit(this.action());
@@ -179,10 +179,10 @@ class ActionbarItemComponent {
     updateCheckCondition(checkCondition) {
         this.checkCondition$.next(checkCondition);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ActionbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ActionbarItemComponent, isStandalone: true, selector: "igo-actionbar-item", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, withTitle: { classPropertyName: "withTitle", publicName: "withTitle", isSignal: true, isRequired: false, transformFunction: null }, withIcon: { classPropertyName: "withIcon", publicName: "withIcon", isSignal: true, isRequired: false, transformFunction: null }, withTooltip: { classPropertyName: "withTooltip", publicName: "withTooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, noDisplay: { classPropertyName: "noDisplay", publicName: "noDisplay", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { trigger: "trigger" }, ngImport: i0, template: "@if (!action().checkbox) {\n  <mat-list-item\n    class=\"actionbar-item\"\n    matTooltipClass=\"actionbarItemTooltip\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      withTooltip() ? ((tooltip$ | async) || title | translate) : ''\n    \"\n    [ngClass]=\"ngClass$ | async\"\n    (click)=\"onClick()\"\n  >\n    @if (withIcon()) {\n      <button\n        matListItemAvatar\n        mat-icon-button\n        [color]=\"color()\"\n        [disabled]=\"disabled$ | async\"\n        [disableRipple]=\"true\"\n      >\n        @let icon = action().icon;\n        <igo-icon [icon]=\"isObservable(icon) ? (icon | async) : icon\" />\n      </button>\n    }\n    @if (withTitle()) {\n      <span matLine>{{ title | translate }}</span>\n    }\n  </mat-list-item>\n}\n\n@if (action().checkbox) {\n  <mat-list-item\n    class=\"item-checkbox\"\n    matTooltipClass=\"actionbarItemTooltip\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      withTooltip() ? ((tooltip$ | async) || title | translate) : ''\n    \"\n    [ngClass]=\"ngClass$ | async\"\n  >\n    @if (withTitle()) {\n      <mat-checkbox\n        (change)=\"action().handler()\"\n        [checked]=\"checkCondition$ | async\"\n      >\n        {{ title | translate }}\n      </mat-checkbox>\n    }\n  </mat-list-item>\n}\n", styles: [":host ::ng-deep mat-list-item:hover{cursor:pointer}:host{--mat-list-list-item-leading-avatar-size: 48px}:host .mdc-icon-button{--mat-icon-button-state-layer-size: 48px}:host mat-list-item{padding-right:0}:host mat-list-item.igo-actionbar-item-disabled{color:#00000042;cursor:default!important}:host mat-list-item.igo-actionbar-item-no-display{display:none}:host mat-list-item ::ng-deep button[matlistitemavatar]{margin-left:0;background-color:inherit}:host mat-list-item ::ng-deep button .mat-mdc-button-persistent-ripple{display:none}:host .item-checkbox ::ng-deep mat-checkbox label{margin-left:28px}:host .actionbar-item [matline]{padding-left:16px}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "component", type: IgoIconComponent, selector: "igo-icon", inputs: ["color", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ActionbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ActionbarItemComponent, isStandalone: true, selector: "igo-actionbar-item", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, withTitle: { classPropertyName: "withTitle", publicName: "withTitle", isSignal: true, isRequired: false, transformFunction: null }, withIcon: { classPropertyName: "withIcon", publicName: "withIcon", isSignal: true, isRequired: false, transformFunction: null }, withTooltip: { classPropertyName: "withTooltip", publicName: "withTooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, noDisplay: { classPropertyName: "noDisplay", publicName: "noDisplay", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { trigger: "trigger" }, ngImport: i0, template: "@if (!action().checkbox) {\n  <mat-list-item\n    class=\"actionbar-item\"\n    matTooltipClass=\"actionbarItemTooltip\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      withTooltip() ? ((tooltip$ | async) || title | translate) : ''\n    \"\n    [ngClass]=\"ngClass$ | async\"\n    (click)=\"onClick()\"\n  >\n    @if (withIcon()) {\n      <button\n        matListItemAvatar\n        matIconButton\n        [color]=\"color()\"\n        [disabled]=\"disabled$ | async\"\n        [disableRipple]=\"true\"\n      >\n        @let icon = action().icon;\n        <igo-icon [icon]=\"isObservable(icon) ? (icon | async) : icon\" />\n      </button>\n    }\n    @if (withTitle()) {\n      <span matLine>{{ title | translate }}</span>\n    }\n  </mat-list-item>\n}\n\n@if (action().checkbox) {\n  <mat-list-item\n    class=\"item-checkbox\"\n    matTooltipClass=\"actionbarItemTooltip\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      withTooltip() ? ((tooltip$ | async) || title | translate) : ''\n    \"\n    [ngClass]=\"ngClass$ | async\"\n  >\n    @if (withTitle()) {\n      <mat-checkbox\n        (change)=\"action().handler()\"\n        [checked]=\"checkCondition$ | async\"\n      >\n        {{ title | translate }}\n      </mat-checkbox>\n    }\n  </mat-list-item>\n}\n", styles: [":host ::ng-deep mat-list-item:hover{cursor:pointer}:host{--mat-list-list-item-leading-avatar-size: 48px}:host .mdc-icon-button{--mat-icon-button-state-layer-size: 48px}:host mat-list-item{padding-right:0}:host mat-list-item.igo-actionbar-item-disabled{color:#00000042;cursor:default!important}:host mat-list-item.igo-actionbar-item-no-display{display:none}:host mat-list-item ::ng-deep button[matlistitemavatar]{margin-left:0;background-color:inherit}:host mat-list-item ::ng-deep button .mat-mdc-button-persistent-ripple{display:none}:host .item-checkbox ::ng-deep mat-checkbox label{margin-left:28px}:host .actionbar-item [matline]{padding-left:16px}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "component", type: IgoIconComponent, selector: "igo-icon", inputs: ["color", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ActionbarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ActionbarItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-actionbar-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatListModule,
@@ -193,8 +193,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         MatCheckboxModule,
                         AsyncPipe,
                         IgoLanguageModule,
-                        IgoIconComponent
-                    ], template: "@if (!action().checkbox) {\n  <mat-list-item\n    class=\"actionbar-item\"\n    matTooltipClass=\"actionbarItemTooltip\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      withTooltip() ? ((tooltip$ | async) || title | translate) : ''\n    \"\n    [ngClass]=\"ngClass$ | async\"\n    (click)=\"onClick()\"\n  >\n    @if (withIcon()) {\n      <button\n        matListItemAvatar\n        mat-icon-button\n        [color]=\"color()\"\n        [disabled]=\"disabled$ | async\"\n        [disableRipple]=\"true\"\n      >\n        @let icon = action().icon;\n        <igo-icon [icon]=\"isObservable(icon) ? (icon | async) : icon\" />\n      </button>\n    }\n    @if (withTitle()) {\n      <span matLine>{{ title | translate }}</span>\n    }\n  </mat-list-item>\n}\n\n@if (action().checkbox) {\n  <mat-list-item\n    class=\"item-checkbox\"\n    matTooltipClass=\"actionbarItemTooltip\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      withTooltip() ? ((tooltip$ | async) || title | translate) : ''\n    \"\n    [ngClass]=\"ngClass$ | async\"\n  >\n    @if (withTitle()) {\n      <mat-checkbox\n        (change)=\"action().handler()\"\n        [checked]=\"checkCondition$ | async\"\n      >\n        {{ title | translate }}\n      </mat-checkbox>\n    }\n  </mat-list-item>\n}\n", styles: [":host ::ng-deep mat-list-item:hover{cursor:pointer}:host{--mat-list-list-item-leading-avatar-size: 48px}:host .mdc-icon-button{--mat-icon-button-state-layer-size: 48px}:host mat-list-item{padding-right:0}:host mat-list-item.igo-actionbar-item-disabled{color:#00000042;cursor:default!important}:host mat-list-item.igo-actionbar-item-no-display{display:none}:host mat-list-item ::ng-deep button[matlistitemavatar]{margin-left:0;background-color:inherit}:host mat-list-item ::ng-deep button .mat-mdc-button-persistent-ripple{display:none}:host .item-checkbox ::ng-deep mat-checkbox label{margin-left:28px}:host .actionbar-item [matline]{padding-left:16px}\n"] }]
+                        IgoIconComponent,
+                        MatButtonModule
+                    ], template: "@if (!action().checkbox) {\n  <mat-list-item\n    class=\"actionbar-item\"\n    matTooltipClass=\"actionbarItemTooltip\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      withTooltip() ? ((tooltip$ | async) || title | translate) : ''\n    \"\n    [ngClass]=\"ngClass$ | async\"\n    (click)=\"onClick()\"\n  >\n    @if (withIcon()) {\n      <button\n        matListItemAvatar\n        matIconButton\n        [color]=\"color()\"\n        [disabled]=\"disabled$ | async\"\n        [disableRipple]=\"true\"\n      >\n        @let icon = action().icon;\n        <igo-icon [icon]=\"isObservable(icon) ? (icon | async) : icon\" />\n      </button>\n    }\n    @if (withTitle()) {\n      <span matLine>{{ title | translate }}</span>\n    }\n  </mat-list-item>\n}\n\n@if (action().checkbox) {\n  <mat-list-item\n    class=\"item-checkbox\"\n    matTooltipClass=\"actionbarItemTooltip\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      withTooltip() ? ((tooltip$ | async) || title | translate) : ''\n    \"\n    [ngClass]=\"ngClass$ | async\"\n  >\n    @if (withTitle()) {\n      <mat-checkbox\n        (change)=\"action().handler()\"\n        [checked]=\"checkCondition$ | async\"\n      >\n        {{ title | translate }}\n      </mat-checkbox>\n    }\n  </mat-list-item>\n}\n", styles: [":host ::ng-deep mat-list-item:hover{cursor:pointer}:host{--mat-list-list-item-leading-avatar-size: 48px}:host .mdc-icon-button{--mat-icon-button-state-layer-size: 48px}:host mat-list-item{padding-right:0}:host mat-list-item.igo-actionbar-item-disabled{color:#00000042;cursor:default!important}:host mat-list-item.igo-actionbar-item-no-display{display:none}:host mat-list-item ::ng-deep button[matlistitemavatar]{margin-left:0;background-color:inherit}:host mat-list-item ::ng-deep button .mat-mdc-button-persistent-ripple{display:none}:host .item-checkbox ::ng-deep mat-checkbox label{margin-left:28px}:host .actionbar-item [matline]{padding-left:16px}\n"] }]
         }], propDecorators: { action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], withTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTitle", required: false }] }], withIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "withIcon", required: false }] }], withTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTooltip", required: false }] }], disabled: [{
                 type: Input
             }], noDisplay: [{
@@ -331,28 +332,19 @@ class ActionbarComponent {
     }
     get heightCondition() {
         const el = this.elRef.nativeElement;
-        if (this.scrollActive() === false) {
-            if (el.clientHeight < el.scrollHeight) {
-                return true;
-            }
-        }
-        return false;
+        return !this.scrollActive() && el.clientHeight < el.scrollHeight
+            ? true
+            : false;
     }
     get positionConditionTop() {
-        if (this.elRef.nativeElement.scrollTop === 0) {
-            return false;
-        }
-        return true;
+        return this.elRef.nativeElement.scrollTop === 0 ? false : true;
     }
     get positionConditionLow() {
         const el = this.elRef.nativeElement;
-        if (el.scrollTop >= el.scrollHeight - el.clientHeight) {
-            return false;
-        }
-        return true;
+        return el.scrollTop >= el.scrollHeight - el.clientHeight ? false : true;
     }
     get isDesktop() {
-        return this.mediaService.getMedia() === Media.Desktop;
+        return this.mediaService.isDesktop() || this.mediaService.isTablet();
     }
     /**
      * @internal
@@ -386,10 +378,10 @@ class ActionbarComponent {
     scrollUp() {
         this.elRef.nativeElement.scrollBy(0, -52);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ActionbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ActionbarComponent, isStandalone: true, selector: "igo-actionbar", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, withToggleButton: { classPropertyName: "withToggleButton", publicName: "withToggleButton", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, withTitle: { classPropertyName: "withTitle", publicName: "withTitle", isSignal: true, isRequired: false, transformFunction: null }, withTooltip: { classPropertyName: "withTooltip", publicName: "withTooltip", isSignal: true, isRequired: false, transformFunction: null }, scrollActive: { classPropertyName: "scrollActive", publicName: "scrollActive", isSignal: true, isRequired: false, transformFunction: null }, withIcon: { classPropertyName: "withIcon", publicName: "withIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, xPosition: { classPropertyName: "xPosition", publicName: "xPosition", isSignal: true, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-collapsed": "this.isCollapsed", "class.with-title": "this.withTitleClass", "class.with-icon": "this.withIconClass", "class.horizontal": "this.horizontalClass" } }, usesOnChanges: true, ngImport: i0, template: "@if (heightCondition && positionConditionTop && isDesktop) {\n  <div id=\"topChevron\">\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.scrollUp' | translate\"\n      (click)=\"scrollUp()\"\n    >\n      <mat-icon>expand_less</mat-icon>\n    </button>\n  </div>\n}\n@if (mode() === actionbarMode.Dock) {\n  <mat-list matListItemIcon>\n    @if (withToggleButton()) {\n      <igo-actionbar-item\n        color=\"accent\"\n        [withTitle]=\"false\"\n        [withIcon]=\"true\"\n        [color]=\"color()\"\n        [disabled]=\"store().view.empty\"\n        [action]=\"toggleCollapseAction\"\n        (trigger)=\"onTriggerAction(toggleCollapseAction)\"\n      />\n    }\n    @if (!collapsed; as action) {\n      @for (action of store().view.all$() | async; track action) {\n        <igo-actionbar-item\n          color=\"accent\"\n          [withTitle]=\"withTitle()\"\n          [withIcon]=\"withIcon()\"\n          [withTooltip]=\"withTooltip()\"\n          [color]=\"color()\"\n          [disabled]=\"store().state.get(action).disabled\"\n          [action]=\"action\"\n          (trigger)=\"onTriggerAction(action)\"\n        />\n      }\n    }\n  </mat-list>\n}\n\n@if (heightCondition && positionConditionLow && isDesktop) {\n  <div id=\"lowChevron\">\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.scrollDown' | translate\"\n      (click)=\"scrollDown()\"\n    >\n      <mat-icon>expand_more</mat-icon>\n    </button>\n  </div>\n}\n\n@if (mode() === actionbarMode.Overlay) {\n  <div>\n    <button\n      class=\"buttonOverlay\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.icon' | translate\"\n      [matMenuTriggerFor]=\"actionbarMenu\"\n      [disabled]=\"store().view.empty\"\n      [color]=\"iconColor()\"\n    >\n      <mat-icon>{{ icon() }}</mat-icon>\n    </button>\n    <mat-menu\n      #actionbarMenu=\"matMenu\"\n      class=\"igo-compact-menu igo-no-min-width-menu\"\n      overlapTrigger=\"true\"\n      [xPosition]=\"xPosition()\"\n      [yPosition]=\"yPosition()\"\n      [class]=\"overlayClass\"\n    >\n      <mat-list>\n        @for (action of store().view.all$() | async; track action) {\n          <igo-actionbar-item\n            color=\"accent\"\n            [withTitle]=\"withTitle()\"\n            [withIcon]=\"withIcon()\"\n            [color]=\"color()\"\n            [action]=\"action\"\n            (trigger)=\"onTriggerAction(action)\"\n          />\n        }\n      </mat-list>\n    </mat-menu>\n  </div>\n}\n@if (mode() === actionbarMode.Context) {\n  <mat-card class=\"context-menu-card mat-elevation-z4\">\n    <mat-list>\n      @for (action of store().view.all$() | async; track action) {\n        <igo-actionbar-item\n          color=\"accent\"\n          [withTitle]=\"withTitle()\"\n          [withIcon]=\"withIcon()\"\n          [color]=\"color()\"\n          [action]=\"action\"\n          (trigger)=\"onTriggerAction(action)\"\n        />\n        <br />\n      }\n    </mat-list>\n  </mat-card>\n}\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}:host.horizontal{max-width:100%;overflow:unset}:host.horizontal mat-list{width:auto;white-space:nowrap}:host.horizontal igo-actionbar-item{display:inline-block}:host mat-list{padding-top:0}:host .buttonOverlay{margin:0}:host .context-menu-card{padding:8px 3px;margin:10px}:host #topChevron{position:sticky;top:0;background-color:#fff;z-index:3;display:flex;justify-content:center}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){:host #topChevron{position:fixed;top:unset}}@supports (-ms-accelerator: true){:host #topChevron{position:fixed;top:unset}}:host #lowChevron{position:sticky;bottom:0;background-color:#fff;z-index:3;display:flex;justify-content:center}:host .igo-actionbar-overlay{min-width:inherit!important;padding-top:0;padding-bottom:0}:host .igo-actionbar-overlay .mat-mdc-list{padding-top:0}:host .igo-actionbar-overlay .mat-mdc-menu-content:not(:empty){padding-top:0;padding-bottom:0}:host.with-title ::ng-deep .mdc-list-item--with-leading-avatar .mdc-list-item__start{margin-right:0}:host ::ng-deep .mdc-list-item__primary-text{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "directive", type: i1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: ActionbarItemComponent, selector: "igo-actionbar-item", inputs: ["action", "color", "withTitle", "withIcon", "withTooltip", "disabled", "noDisplay"], outputs: ["trigger"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ActionbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ActionbarComponent, isStandalone: true, selector: "igo-actionbar", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, withToggleButton: { classPropertyName: "withToggleButton", publicName: "withToggleButton", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, withTitle: { classPropertyName: "withTitle", publicName: "withTitle", isSignal: true, isRequired: false, transformFunction: null }, withTooltip: { classPropertyName: "withTooltip", publicName: "withTooltip", isSignal: true, isRequired: false, transformFunction: null }, scrollActive: { classPropertyName: "scrollActive", publicName: "scrollActive", isSignal: true, isRequired: false, transformFunction: null }, withIcon: { classPropertyName: "withIcon", publicName: "withIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, xPosition: { classPropertyName: "xPosition", publicName: "xPosition", isSignal: true, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-collapsed": "this.isCollapsed", "class.with-title": "this.withTitleClass", "class.with-icon": "this.withIconClass", "class.horizontal": "this.horizontalClass" } }, usesOnChanges: true, ngImport: i0, template: "@let actions = store().view.all$() | async;\n\n@if (heightCondition && positionConditionTop && isDesktop) {\n  <div id=\"topChevron\">\n    <button\n      matIconButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.scrollUp' | translate\"\n      (click)=\"scrollUp()\"\n    >\n      <mat-icon>keyboard_arrow_up</mat-icon>\n    </button>\n  </div>\n}\n@if (mode() === actionbarMode.Dock) {\n  <mat-list matListItemIcon>\n    @if (withToggleButton()) {\n      <igo-actionbar-item\n        color=\"accent\"\n        [withTitle]=\"false\"\n        [withIcon]=\"true\"\n        [color]=\"color()\"\n        [disabled]=\"store().view.empty\"\n        [action]=\"toggleCollapseAction\"\n        (trigger)=\"onTriggerAction(toggleCollapseAction)\"\n      />\n    }\n    @if (!collapsed) {\n      @for (action of actions; track action) {\n        <igo-actionbar-item\n          color=\"accent\"\n          [withTitle]=\"withTitle()\"\n          [withIcon]=\"withIcon()\"\n          [withTooltip]=\"withTooltip()\"\n          [color]=\"color()\"\n          [disabled]=\"store().state.get(action).disabled\"\n          [action]=\"action\"\n          (trigger)=\"onTriggerAction(action)\"\n        />\n      }\n    }\n  </mat-list>\n}\n\n@if (heightCondition && positionConditionLow && isDesktop) {\n  <div id=\"lowChevron\">\n    <button\n      matIconButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.scrollDown' | translate\"\n      (click)=\"scrollDown()\"\n    >\n      <mat-icon>keyboard_arrow_down</mat-icon>\n    </button>\n  </div>\n}\n\n@if (mode() === actionbarMode.Overlay) {\n  <div>\n    <button\n      class=\"buttonOverlay\"\n      matIconButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.icon' | translate\"\n      [matMenuTriggerFor]=\"actionbarMenu\"\n      [disabled]=\"store().view.empty\"\n      [color]=\"iconColor()\"\n    >\n      <mat-icon>{{ icon() }}</mat-icon>\n    </button>\n    <mat-menu\n      #actionbarMenu=\"matMenu\"\n      class=\"igo-compact-menu igo-no-min-width-menu\"\n      overlapTrigger=\"true\"\n      [xPosition]=\"xPosition()\"\n      [yPosition]=\"yPosition()\"\n      [class]=\"overlayClass\"\n    >\n      <mat-list>\n        @for (action of actions; track action) {\n          <igo-actionbar-item\n            color=\"accent\"\n            [withTitle]=\"withTitle()\"\n            [withIcon]=\"withIcon()\"\n            [color]=\"color()\"\n            [action]=\"action\"\n            (trigger)=\"onTriggerAction(action)\"\n          />\n        }\n      </mat-list>\n    </mat-menu>\n  </div>\n}\n@if (mode() === actionbarMode.Context) {\n  <mat-card class=\"context-menu-card mat-elevation-z4\">\n    <mat-list>\n      @for (action of actions; track action) {\n        <igo-actionbar-item\n          color=\"accent\"\n          [withTitle]=\"withTitle()\"\n          [withIcon]=\"withIcon()\"\n          [color]=\"color()\"\n          [action]=\"action\"\n          (trigger)=\"onTriggerAction(action)\"\n        />\n        <br />\n      }\n    </mat-list>\n  </mat-card>\n}\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}:host.horizontal{max-width:100%;overflow:unset}:host.horizontal mat-list{width:auto;white-space:nowrap}:host.horizontal igo-actionbar-item{display:inline-block}:host mat-list{padding-top:0}:host .buttonOverlay{margin:0}:host .context-menu-card{padding:8px 3px;margin:10px}:host #topChevron{position:sticky;top:0;background-color:var(--mat-sys-on-primary-container);z-index:3;display:flex;justify-content:center}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host #topChevron{position:fixed;top:unset}}@supports (-ms-accelerator: true){:host #topChevron{position:fixed;top:unset}}:host #lowChevron{position:sticky;bottom:0;background-color:var(--mat-sys-on-primary-container);z-index:3;display:flex;justify-content:center}:host .igo-actionbar-overlay{min-width:inherit!important;padding-top:0;padding-bottom:0}:host .igo-actionbar-overlay .mat-mdc-list{padding-top:0}:host .igo-actionbar-overlay .mat-mdc-menu-content:not(:empty){padding-top:0;padding-bottom:0}:host.with-title ::ng-deep .mdc-list-item--with-leading-avatar .mdc-list-item__start{margin-right:0}:host ::ng-deep .mdc-list-item__primary-text{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "directive", type: i1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: ActionbarItemComponent, selector: "igo-actionbar-item", inputs: ["action", "color", "withTitle", "withIcon", "withTooltip", "disabled", "noDisplay"], outputs: ["trigger"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ActionbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ActionbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-actionbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatButtonModule,
@@ -401,7 +393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         MatCardModule,
                         AsyncPipe,
                         IgoLanguageModule
-                    ], template: "@if (heightCondition && positionConditionTop && isDesktop) {\n  <div id=\"topChevron\">\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.scrollUp' | translate\"\n      (click)=\"scrollUp()\"\n    >\n      <mat-icon>expand_less</mat-icon>\n    </button>\n  </div>\n}\n@if (mode() === actionbarMode.Dock) {\n  <mat-list matListItemIcon>\n    @if (withToggleButton()) {\n      <igo-actionbar-item\n        color=\"accent\"\n        [withTitle]=\"false\"\n        [withIcon]=\"true\"\n        [color]=\"color()\"\n        [disabled]=\"store().view.empty\"\n        [action]=\"toggleCollapseAction\"\n        (trigger)=\"onTriggerAction(toggleCollapseAction)\"\n      />\n    }\n    @if (!collapsed; as action) {\n      @for (action of store().view.all$() | async; track action) {\n        <igo-actionbar-item\n          color=\"accent\"\n          [withTitle]=\"withTitle()\"\n          [withIcon]=\"withIcon()\"\n          [withTooltip]=\"withTooltip()\"\n          [color]=\"color()\"\n          [disabled]=\"store().state.get(action).disabled\"\n          [action]=\"action\"\n          (trigger)=\"onTriggerAction(action)\"\n        />\n      }\n    }\n  </mat-list>\n}\n\n@if (heightCondition && positionConditionLow && isDesktop) {\n  <div id=\"lowChevron\">\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.scrollDown' | translate\"\n      (click)=\"scrollDown()\"\n    >\n      <mat-icon>expand_more</mat-icon>\n    </button>\n  </div>\n}\n\n@if (mode() === actionbarMode.Overlay) {\n  <div>\n    <button\n      class=\"buttonOverlay\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.icon' | translate\"\n      [matMenuTriggerFor]=\"actionbarMenu\"\n      [disabled]=\"store().view.empty\"\n      [color]=\"iconColor()\"\n    >\n      <mat-icon>{{ icon() }}</mat-icon>\n    </button>\n    <mat-menu\n      #actionbarMenu=\"matMenu\"\n      class=\"igo-compact-menu igo-no-min-width-menu\"\n      overlapTrigger=\"true\"\n      [xPosition]=\"xPosition()\"\n      [yPosition]=\"yPosition()\"\n      [class]=\"overlayClass\"\n    >\n      <mat-list>\n        @for (action of store().view.all$() | async; track action) {\n          <igo-actionbar-item\n            color=\"accent\"\n            [withTitle]=\"withTitle()\"\n            [withIcon]=\"withIcon()\"\n            [color]=\"color()\"\n            [action]=\"action\"\n            (trigger)=\"onTriggerAction(action)\"\n          />\n        }\n      </mat-list>\n    </mat-menu>\n  </div>\n}\n@if (mode() === actionbarMode.Context) {\n  <mat-card class=\"context-menu-card mat-elevation-z4\">\n    <mat-list>\n      @for (action of store().view.all$() | async; track action) {\n        <igo-actionbar-item\n          color=\"accent\"\n          [withTitle]=\"withTitle()\"\n          [withIcon]=\"withIcon()\"\n          [color]=\"color()\"\n          [action]=\"action\"\n          (trigger)=\"onTriggerAction(action)\"\n        />\n        <br />\n      }\n    </mat-list>\n  </mat-card>\n}\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}:host.horizontal{max-width:100%;overflow:unset}:host.horizontal mat-list{width:auto;white-space:nowrap}:host.horizontal igo-actionbar-item{display:inline-block}:host mat-list{padding-top:0}:host .buttonOverlay{margin:0}:host .context-menu-card{padding:8px 3px;margin:10px}:host #topChevron{position:sticky;top:0;background-color:#fff;z-index:3;display:flex;justify-content:center}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){:host #topChevron{position:fixed;top:unset}}@supports (-ms-accelerator: true){:host #topChevron{position:fixed;top:unset}}:host #lowChevron{position:sticky;bottom:0;background-color:#fff;z-index:3;display:flex;justify-content:center}:host .igo-actionbar-overlay{min-width:inherit!important;padding-top:0;padding-bottom:0}:host .igo-actionbar-overlay .mat-mdc-list{padding-top:0}:host .igo-actionbar-overlay .mat-mdc-menu-content:not(:empty){padding-top:0;padding-bottom:0}:host.with-title ::ng-deep .mdc-list-item--with-leading-avatar .mdc-list-item__start{margin-right:0}:host ::ng-deep .mdc-list-item__primary-text{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}\n"] }]
+                    ], template: "@let actions = store().view.all$() | async;\n\n@if (heightCondition && positionConditionTop && isDesktop) {\n  <div id=\"topChevron\">\n    <button\n      matIconButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.scrollUp' | translate\"\n      (click)=\"scrollUp()\"\n    >\n      <mat-icon>keyboard_arrow_up</mat-icon>\n    </button>\n  </div>\n}\n@if (mode() === actionbarMode.Dock) {\n  <mat-list matListItemIcon>\n    @if (withToggleButton()) {\n      <igo-actionbar-item\n        color=\"accent\"\n        [withTitle]=\"false\"\n        [withIcon]=\"true\"\n        [color]=\"color()\"\n        [disabled]=\"store().view.empty\"\n        [action]=\"toggleCollapseAction\"\n        (trigger)=\"onTriggerAction(toggleCollapseAction)\"\n      />\n    }\n    @if (!collapsed) {\n      @for (action of actions; track action) {\n        <igo-actionbar-item\n          color=\"accent\"\n          [withTitle]=\"withTitle()\"\n          [withIcon]=\"withIcon()\"\n          [withTooltip]=\"withTooltip()\"\n          [color]=\"color()\"\n          [disabled]=\"store().state.get(action).disabled\"\n          [action]=\"action\"\n          (trigger)=\"onTriggerAction(action)\"\n        />\n      }\n    }\n  </mat-list>\n}\n\n@if (heightCondition && positionConditionLow && isDesktop) {\n  <div id=\"lowChevron\">\n    <button\n      matIconButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.scrollDown' | translate\"\n      (click)=\"scrollDown()\"\n    >\n      <mat-icon>keyboard_arrow_down</mat-icon>\n    </button>\n  </div>\n}\n\n@if (mode() === actionbarMode.Overlay) {\n  <div>\n    <button\n      class=\"buttonOverlay\"\n      matIconButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.common.actionbar.icon' | translate\"\n      [matMenuTriggerFor]=\"actionbarMenu\"\n      [disabled]=\"store().view.empty\"\n      [color]=\"iconColor()\"\n    >\n      <mat-icon>{{ icon() }}</mat-icon>\n    </button>\n    <mat-menu\n      #actionbarMenu=\"matMenu\"\n      class=\"igo-compact-menu igo-no-min-width-menu\"\n      overlapTrigger=\"true\"\n      [xPosition]=\"xPosition()\"\n      [yPosition]=\"yPosition()\"\n      [class]=\"overlayClass\"\n    >\n      <mat-list>\n        @for (action of actions; track action) {\n          <igo-actionbar-item\n            color=\"accent\"\n            [withTitle]=\"withTitle()\"\n            [withIcon]=\"withIcon()\"\n            [color]=\"color()\"\n            [action]=\"action\"\n            (trigger)=\"onTriggerAction(action)\"\n          />\n        }\n      </mat-list>\n    </mat-menu>\n  </div>\n}\n@if (mode() === actionbarMode.Context) {\n  <mat-card class=\"context-menu-card mat-elevation-z4\">\n    <mat-list>\n      @for (action of actions; track action) {\n        <igo-actionbar-item\n          color=\"accent\"\n          [withTitle]=\"withTitle()\"\n          [withIcon]=\"withIcon()\"\n          [color]=\"color()\"\n          [action]=\"action\"\n          (trigger)=\"onTriggerAction(action)\"\n        />\n        <br />\n      }\n    </mat-list>\n  </mat-card>\n}\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}:host.horizontal{max-width:100%;overflow:unset}:host.horizontal mat-list{width:auto;white-space:nowrap}:host.horizontal igo-actionbar-item{display:inline-block}:host mat-list{padding-top:0}:host .buttonOverlay{margin:0}:host .context-menu-card{padding:8px 3px;margin:10px}:host #topChevron{position:sticky;top:0;background-color:var(--mat-sys-on-primary-container);z-index:3;display:flex;justify-content:center}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host #topChevron{position:fixed;top:unset}}@supports (-ms-accelerator: true){:host #topChevron{position:fixed;top:unset}}:host #lowChevron{position:sticky;bottom:0;background-color:var(--mat-sys-on-primary-container);z-index:3;display:flex;justify-content:center}:host .igo-actionbar-overlay{min-width:inherit!important;padding-top:0;padding-bottom:0}:host .igo-actionbar-overlay .mat-mdc-list{padding-top:0}:host .igo-actionbar-overlay .mat-mdc-menu-content:not(:empty){padding-top:0;padding-bottom:0}:host.with-title ::ng-deep .mdc-list-item--with-leading-avatar .mdc-list-item__start{margin-right:0}:host ::ng-deep .mdc-list-item__primary-text{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}\n"] }]
         }], propDecorators: { store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], withToggleButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "withToggleButton", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], withTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTitle", required: false }] }], withTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTooltip", required: false }] }], scrollActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollActive", required: false }] }], withIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "withIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], xPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "xPosition", required: false }] }], yPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "yPosition", required: false }] }], overlayClass: [{
                 type: Input
             }], isCollapsed: [{
@@ -422,11 +414,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * @deprecated import the ActionbarComponent directly
  */
 class IgoActionModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: IgoActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: IgoActionModule, imports: [ActionbarComponent], exports: [ActionbarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: IgoActionModule, imports: [ActionbarComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: IgoActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: IgoActionModule, imports: [ActionbarComponent], exports: [ActionbarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: IgoActionModule, imports: [ActionbarComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: IgoActionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: IgoActionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ActionbarComponent],
@@ -438,11 +430,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * @deprecated import the ActionbarComponent directly
  */
 class IgoActionbarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: IgoActionbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: IgoActionbarModule, imports: [ActionbarComponent], exports: [ActionbarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: IgoActionbarModule, imports: [ActionbarComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: IgoActionbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: IgoActionbarModule, imports: [ActionbarComponent], exports: [ActionbarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: IgoActionbarModule, imports: [ActionbarComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: IgoActionbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: IgoActionbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ActionbarComponent],