@acorex/components 22.1.0-next.4 → 22.1.0-next.6

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@acorex/components",
-  "version": "22.1.0-next.4",
+  "version": "22.1.0-next.6",
   "peerDependencies": {
-    "@acorex/core": "22.1.0-next.4",
-    "@acorex/cdk": "22.1.0-next.4",
+    "@acorex/core": "22.1.0-next.6",
+    "@acorex/cdk": "22.1.0-next.6",
     "polytype": ">=0.17.0",
     "angular-imask": ">=7.6.1",
     "imask": ">=7.6.1",

package/types/acorex-components-combo-box.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
-import { NXComponent, AXStyleLookType, AXValueChangedEvent, AXFocusEvent, AXItemClickEvent, AXItemSelectedEvent, AXEvent } from '@acorex/cdk/common';
+import { NXValueComponent, AXStyleLookType, AXValueChangedEvent, AXFocusEvent, AXItemClickEvent, AXItemSelectedEvent, AXEvent } from '@acorex/cdk/common';
 import { AXPopoverComponent } from '@acorex/components/popover';
 import { Combobox } from '@angular/aria/combobox';
 import { Listbox } from '@angular/aria/listbox';
@@ -44,8 +44,12 @@ type AXComboBoxValue = string | number | (string | number)[] | null;
  *
  * @category Components
  */
-declare class AXComboBoxComponent extends NXComponent implements FormValueControl<AXComboBoxValue> {
+declare class AXComboBoxComponent extends NXValueComponent implements FormValueControl<AXComboBoxValue> {
     #private;
+    /**
+     * The name of the form field, used by validation rules and `ax-form.validate(names)`.
+     */
+    name: _angular_core.InputSignal<string>;
     /**
      * The list of items the user can select from.
      * Each item has `id` (search/identity), `text` (display), and `value` (submitted).
@@ -225,12 +229,16 @@ declare class AXComboBoxComponent extends NXComponent implements FormValueContro
      * In multi-select mode the item is toggled and the popup stays open.
      */
     protected commit(event?: Event): void;
+    /**
+     * Focuses the combo box trigger input.
+     */
+    focus(options?: FocusOptions): void;
     /** Forwards native focus from the trigger input. */
     protected emitOnFocus(e: FocusEvent): void;
     /** Forwards native blur from the trigger input. */
     protected emitOnBlur(e: FocusEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXComboBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXComboBoxComponent, "ax-combo-box", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-header", "ax-footer"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXComboBoxComponent, "ax-combo-box", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-header", "ax-footer", "ax-validation-rule"], true, never>;
 }
 
 declare class AXComboBoxModule {

package/types/acorex-components-conversation.d.ts

@@ -1788,7 +1788,10 @@ interface AXConversationDropdownMenuItem {
 declare class AXConversationInfoBarComponent {
     private readonly conversationService;
     private readonly infoBar;
+    private readonly customUserAvatarComponent;
     protected get registry(): _acorex_components_conversation.AXConversationRegistryService;
+    /** Whether a custom user avatar component is registered via conversation config. */
+    readonly hasCustomUserAvatar: _angular_core.Signal<boolean>;
     /** Active conversation */
     readonly activeConversation: _angular_core.Signal<AXConversation>;
     /** Active component from service */
@@ -3838,6 +3841,9 @@ declare class AXConversationMessageListComponent implements OnDestroy {
     readonly showScrollButton: _angular_core.WritableSignal<boolean>;
     /** Active conversation */
     readonly activeConversation: _angular_core.Signal<_acorex_components_conversation.AXConversation>;
+    readonly isGroupConversation: _angular_core.Signal<boolean>;
+    /** Placeholder indices for the initial message list skeleton. */
+    protected readonly loadingSkeletonItems: readonly [0, 1, 2, 3, 4, 5];
     /** Whether the active conversation allows message reactions. */
     readonly reactionsEnabled: _angular_core.Signal<boolean>;
     /** Messages */
@@ -6269,6 +6275,7 @@ declare class AXConversationDefaultConversationAvatarComponent {
         displayAvatar: string;
         displayIcon: string;
     }>;
+    readonly filteredUserAvatarInputs: _angular_core.Signal<Record<string, unknown>>;
     readonly fallbackDisplay: _angular_core.Signal<_acorex_components_conversation.AXConversationAvatarDisplay>;
     readonly fallbackInitials: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXConversationDefaultConversationAvatarComponent, never>;

package/types/acorex-components-lookup.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef, ElementRef } from '@angular/core';
-import { AXEvent, AXDataSource, AXListDataSource, AXHtmlEvent, NXComponent, AXStyleLookType, AXValueChangedEvent, AXFocusEvent, AXItemClickEvent, AXItemSelectedEvent } from '@acorex/cdk/common';
+import { AXEvent, AXDataSource, AXListDataSource, AXHtmlEvent, NXValueComponent, AXStyleLookType, AXValueChangedEvent, AXFocusEvent, AXItemClickEvent, AXItemSelectedEvent } from '@acorex/cdk/common';
 import { AXPopoverComponent } from '@acorex/components/popover';
 import { AXTreeViewNode, AXTreeViewDataSource, AXTreeViewSelectionBehavior, AXTreeViewItemTemplateContext, AXTreeViewSelectionChangeEvent } from '@acorex/components/tree-view';
 import { FormValueControl } from '@angular/forms/signals';
@@ -127,6 +127,11 @@ declare abstract class AXLookupListViewBase {
     protected isSelected(item: AXLookupItem): boolean;
     protected isDisabled(item: AXLookupItem): boolean;
     protected handleItemClick(item: AXLookupItem | null | undefined): void;
+    /**
+     * Commit on mousedown (not click) so a searchable trigger blur cannot destroy the
+     * list before the pick is applied.
+     */
+    protected handleItemMouseDown(event: Event, item: AXLookupItem | null | undefined): void;
     protected handleItemKeypress(e: AXHtmlEvent<KeyboardEvent>, item: AXLookupItem | null | undefined): void;
     protected handleListKeypress(e: AXHtmlEvent<KeyboardEvent>): void;
     protected activateNavItem(nav: AXListNavigationDirective, item: AXListNavigationItemDirective): void;
@@ -205,8 +210,12 @@ declare class AXLookupMultiSelectTreeComponent {
  *
  * @category Components
  */
-declare class AXLookupComponent extends NXComponent implements FormValueControl<unknown | unknown[] | null> {
+declare class AXLookupComponent extends NXValueComponent implements FormValueControl<unknown | unknown[] | null> {
     #private;
+    /**
+     * The name of the form field, used by validation rules and `ax-form.validate(names)`.
+     */
+    name: _angular_core.InputSignal<string>;
     /**
      * The lookup rendering mode. Selects which mini component renders in the popup.
      */
@@ -466,7 +475,7 @@ declare class AXLookupComponent extends NXComponent implements FormValueControl<
      */
     reset(isUserInteraction?: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLookupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupComponent, "ax-lookup", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "treeDataSource": { "alias": "treeDataSource"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "treeSelectionBehavior": { "alias": "treeSelectionBehavior"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueItems": { "alias": "valueItems"; "required": false; "isSignal": true; }; }, { "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onSelectionChanged": "onSelectionChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-header", "ax-footer"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupComponent, "ax-lookup", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "treeDataSource": { "alias": "treeDataSource"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "treeSelectionBehavior": { "alias": "treeSelectionBehavior"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueItems": { "alias": "valueItems"; "required": false; "isSignal": true; }; }, { "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onSelectionChanged": "onSelectionChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-header", "ax-footer", "ax-validation-rule"], true, never>;
 }
 
 /**
@@ -620,6 +629,7 @@ declare class AXLookupMultiColumnComponent {
     protected resolveRowCssClass: (row: unknown) => string;
     protected handleRowClick(event: AXDataTableRowClick): void;
     protected handleItemClick(item: AXLookupItem | null | undefined): void;
+    protected handleItemMouseDown(event: Event, item: AXLookupItem | null | undefined): void;
     protected isSelected(item: AXLookupItem): boolean;
     protected isDisabled(item: AXLookupItem): boolean;
     private getValue;