@acorex/components 22.2.11 → 22.2.13

package/types/acorex-components-message-time.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from '@angular/core';
+import { OnInit } from '@angular/core';
+import * as i1 from '@angular/common';
+
+declare class AXMessageTimeComponent implements OnInit {
+    constructor();
+    time: i0.InputSignal<string>;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXMessageTimeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXMessageTimeComponent, "ax-message-time", never, { "time": { "alias": "time"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXMessageTimeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXMessageTimeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXMessageTimeModule, never, [typeof i1.CommonModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXMessageTimeModule>;
+}
+
+export { AXMessageTimeComponent, AXMessageTimeModule };

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

@@ -0,0 +1,59 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { AXMenuItem, AXContextMenuOpeningEvent, AXContextMenuItemsClickEvent } from '@acorex/components/menu';
+import { AXEmoji } from '@acorex/core/constants';
+import { MessageStatus } from '@acorex/components/message-status';
+
+type AXMessageLayout = 'ping-pong' | 'stack';
+type AXBubbleTail = 'none' | 'start' | 'end';
+/** @deprecated Use AXMessageLayout. Kept for backward compatibility in data models. */
+type AXMessageAlign = 'start' | 'end';
+interface AXMessageTemplateContext<T> {
+    $implicit: T;
+}
+
+declare class AXMessageComponent<T = unknown> {
+    templateData: _angular_core.InputSignal<T>;
+    itemTemplate: _angular_core.InputSignal<TemplateRef<AXMessageTemplateContext<T>>>;
+    layout: _angular_core.InputSignal<AXMessageLayout>;
+    /** Own message: aligned end in ping-pong and styled via inner ax-bubble. */
+    isown: _angular_core.InputSignal<boolean>;
+    text: _angular_core.InputSignal<string>;
+    avatarSrc: _angular_core.InputSignal<string>;
+    avatarSize: _angular_core.InputSignal<number>;
+    showAvatar: _angular_core.InputSignal<boolean>;
+    status: _angular_core.InputSignal<MessageStatus>;
+    time: _angular_core.InputSignal<string>;
+    /** Quick reactions shown in the context menu header. */
+    quickReactions: _angular_core.InputSignal<readonly AXEmoji[]>;
+    /** Context menu action items. Parent can also append via `contextMenuOpening`. */
+    contextMenuItems: _angular_core.InputSignal<readonly AXMenuItem[]>;
+    /** Whether right-click context menu is enabled on the bubble. */
+    contextMenuEnabled: _angular_core.InputSignal<boolean>;
+    /** Emoji size in pixels inside the context menu reaction bar. */
+    reactionSize: _angular_core.InputSignal<number>;
+    /** Emits when a quick reaction or picker emoji is selected from the context menu. */
+    reactionSelected: _angular_core.OutputEmitterRef<AXEmoji>;
+    /** Emits while the context menu opens so the parent can customize `event.items`. */
+    contextMenuOpening: _angular_core.OutputEmitterRef<AXContextMenuOpeningEvent>;
+    /** Emits when a context menu action item is clicked. */
+    menuItemClick: _angular_core.OutputEmitterRef<AXContextMenuItemsClickEvent>;
+    private readonly contextMenu;
+    protected readonly hasTemplate: _angular_core.Signal<boolean>;
+    protected readonly showReactionBar: _angular_core.Signal<boolean>;
+    protected readonly hostClass: _angular_core.Signal<string>;
+    protected onContextMenuOpening(event: AXContextMenuOpeningEvent): void;
+    protected onReactionSelected(emoji: AXEmoji): void;
+    protected onMenuItemClick(event: AXContextMenuItemsClickEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXMessageComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXMessageComponent<any>, "ax-message", never, { "templateData": { "alias": "templateData"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "isown": { "alias": "isown"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarSize": { "alias": "avatarSize"; "required": false; "isSignal": true; }; "showAvatar": { "alias": "showAvatar"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "time": { "alias": "time"; "required": false; "isSignal": true; }; "quickReactions": { "alias": "quickReactions"; "required": false; "isSignal": true; }; "contextMenuItems": { "alias": "contextMenuItems"; "required": false; "isSignal": true; }; "contextMenuEnabled": { "alias": "contextMenuEnabled"; "required": false; "isSignal": true; }; "reactionSize": { "alias": "reactionSize"; "required": false; "isSignal": true; }; }, { "reactionSelected": "reactionSelected"; "contextMenuOpening": "contextMenuOpening"; "menuItemClick": "menuItemClick"; }, never, ["*"], true, never>;
+}
+
+declare class AXMessageModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXMessageModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXMessageModule, never, [typeof AXMessageComponent], [typeof AXMessageComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXMessageModule>;
+}
+
+export { AXMessageComponent, AXMessageModule };
+export type { AXBubbleTail, AXMessageAlign, AXMessageLayout, AXMessageTemplateContext };

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

@@ -0,0 +1,85 @@
+import * as _angular_core from '@angular/core';
+import { AXEmoji } from '@acorex/core/constants';
+
+/**
+ * A single aggregated reaction shown by {@link AXReactionComponent}.
+ */
+interface AXReactionItem {
+    /** Emoji metadata rendered with {@link AXEmojiComponent}. */
+    emoji: AXEmoji;
+    /** Number of users who reacted with this emoji. */
+    count: number;
+    /** Whether the current user has selected this reaction. */
+    selected?: boolean;
+}
+
+/**
+ * Telegram-style reaction chips for chat messages.
+ * Renders emojis with {@link AXEmojiComponent} and opens {@link AXEmojiPickerComponent}
+ * inside {@link AXPopoverComponent} when editable.
+ *
+ * @category Components
+ */
+declare class AXReactionComponent {
+    /**
+     * Aggregated reactions to display.
+     *
+     * @defaultValue []
+     */
+    readonly items: _angular_core.InputSignal<readonly AXReactionItem[]>;
+    /**
+     * Rendered emoji size in pixels.
+     *
+     * @defaultValue 18
+     */
+    readonly size: _angular_core.InputSignal<number>;
+    /**
+     * When true, reactions are interactive and an add button opens the emoji picker popover.
+     *
+     * @defaultValue false
+     */
+    readonly editable: _angular_core.InputSignal<boolean>;
+    /**
+     * When true, the emoji picker popover is opened.
+     *
+     * @defaultValue false
+     */
+    readonly showPicker: _angular_core.InputSignal<boolean>;
+    /**
+     * Emits when the user selects a new reaction or an unselected existing one.
+     */
+    readonly add: _angular_core.OutputEmitterRef<AXEmoji>;
+    /**
+     * Emits when the user removes their own reaction.
+     */
+    readonly remove: _angular_core.OutputEmitterRef<AXEmoji>;
+    private readonly pickerPopover;
+    /** Whether the emoji picker popover is currently open. */
+    protected readonly pickerOpen: _angular_core.WritableSignal<boolean>;
+    /** Whether the add button should appear pressed while the picker is open. */
+    protected readonly isPickerVisible: _angular_core.Signal<boolean>;
+    constructor();
+    /** Toggles a reaction without mutating counts; parent owns state. */
+    protected onItemClick(item: AXReactionItem): void;
+    /** Opens or closes the emoji picker popover. */
+    protected togglePicker(event?: Event): void;
+    /** Forwards a picker selection as `add` and closes the popover. */
+    protected onPickerSelected(emoji: AXEmoji): void;
+    /** Syncs the add-button pressed state when the popover opens. */
+    protected onPickerOpened(): void;
+    /** Syncs the add-button pressed state when the popover closes. */
+    protected onPickerClosed(): void;
+    /** Accessible name for an existing reaction chip. */
+    protected itemAriaLabel(item: AXReactionItem): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXReactionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXReactionComponent, "ax-reaction", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "showPicker": { "alias": "showPicker"; "required": false; "isSignal": true; }; }, { "add": "add"; "remove": "remove"; }, never, never, true, never>;
+}
+
+declare class AXReactionModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXReactionModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXReactionModule, never, [typeof AXReactionComponent], [typeof AXReactionComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXReactionModule>;
+}
+
+export { AXReactionComponent, AXReactionModule };
+export type { AXReactionItem };