@acorex/components 20.1.4 → 20.1.6

package/action-sheet/index.d.ts

@@ -69,6 +69,7 @@ declare class AXActionSheetComponent extends MXBaseComponent implements OnInit,
     private onTouchMoveListenerFn;
     private onTouchUpListenerFn;
     private isDragging;
+    private isFullScreen;
     private curserOffset;
     private actionSheetHeight;
     private isActionSheetHeightSet;
@@ -89,7 +90,7 @@ declare class AXActionSheetComponent extends MXBaseComponent implements OnInit,
     protected handleMouseDown(e: MouseEvent): void;
     protected handleTouchDown(e: TouchEvent): void;
     private handleDown;
-    private handleUp;
+    private snapToFinalPosition;
     private heightCalculator;
     protected handleAttched(ref: CdkPortalOutletAttachedRef): void;
     onItemClick(item: AXActionSheetItem): void;

package/badge/index.d.ts

@@ -1,21 +1,20 @@
 import * as i0 from '@angular/core';
-import { MXColorComponent } from '@acorex/cdk/common';
+import { MXColorLookComponent } from '@acorex/cdk/common';
 import * as i1 from '@angular/common';
 
-declare class AXBadgeComponent extends MXColorComponent {
+declare class AXBadgeComponent extends MXColorLookComponent {
     /**
      * Defines the text displayed inside the badge.
      *
      * @defaultValue ''
      */
     text: i0.InputSignal<string>;
-    look: i0.InputSignal<string>;
     /**
      *  @ignore
      */
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXBadgeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXBadgeComponent, "ax-badge", never, { "color": { "alias": "color"; "required": false; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; }, {}, never, ["ax-prefix", "ax-suffix"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXBadgeComponent, "ax-badge", never, { "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, {}, never, ["ax-prefix", "ax-suffix"], true, never>;
 }
 
 declare class AXBadgeModule {

package/check-box/index.d.ts

@@ -16,6 +16,7 @@ declare const AXCheckBoxComponent_base: polytype.Polytype.ClusteredConstructor<[
  * @category Components
  */
 declare class AXCheckBoxComponent extends AXCheckBoxComponent_base {
+    isLoading: i0.InputSignal<boolean>;
     /**
      *  @ignore
      */
@@ -62,7 +63,7 @@ declare class AXCheckBoxComponent extends AXCheckBoxComponent_base {
     private get __hostClass();
     protected changeValue(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCheckBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXCheckBoxComponent, "ax-check-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "color": { "alias": "color"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; }, ["_labels"], ["ax-label", "ax-form-hint", "ax-validation-rule"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXCheckBoxComponent, "ax-check-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "color": { "alias": "color"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; }, ["_labels"], ["ax-label", "ax-form-hint", "ax-validation-rule"], true, never>;
 }
 
 declare class AXCheckBoxModule {

package/color-box/index.d.ts

@@ -59,6 +59,7 @@ declare class AXColorBoxComponent extends AXColorBoxComponent_base {
      * @ignore
      */
     internalValueChanged(value?: Date): void;
+    handleKeyboardEvent(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXColorBoxComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXColorBoxComponent, "ax-color-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], true, never>;
 }

package/color-palette/index.d.ts

@@ -48,6 +48,7 @@ declare const AXDefaultColorPalette: {
 declare class AXColorPaletteInputComponent extends MXBaseComponent implements AfterViewInit {
     _parent: AXColorPaletteParentComponent;
     private _unsubscriber;
+    private colorService;
     isValid: boolean;
     _rgba: {
         r: number;
@@ -108,6 +109,7 @@ declare class AXColorPaletteInputComponent extends MXBaseComponent implements Af
 declare class AXColorPalettePickerComponent extends MXBaseComponent implements OnDestroy {
     _parent: AXColorPaletteParentComponent;
     private _unsubscriber;
+    private colorService;
     render: Renderer2;
     zone: NgZone;
     _rgba: {

package/conversation/index.d.ts

@@ -1,5 +1,5 @@
 import * as i3 from '@acorex/cdk/common';
-import { AXHtmlEvent, AXEvent, MXInputBaseValueComponent, MXLookComponent, AXClickEvent, MXBaseComponent } from '@acorex/cdk/common';
+import { AXHtmlEvent, AXEvent, AXStyleColorType, MXInputBaseValueComponent, MXLookComponent, AXClickEvent, MXBaseComponent } from '@acorex/cdk/common';
 import * as _angular_core from '@angular/core';
 import { Type, WritableSignal, ElementRef, Signal, OnDestroy, Renderer2, OnInit, ModuleWithProviders } from '@angular/core';
 import * as polytype from 'polytype';
@@ -54,6 +54,18 @@ interface AXConversationMessage {
     onDownloadClick?: () => void;
     onCancelClick?: () => void;
 }
+declare abstract class AXConversationMessageAction {
+    color?: AXStyleColorType;
+    text: string;
+    icon?: string;
+    onClick: (id: string) => void;
+    items?: AXConversationMessageAction[];
+}
+declare class AXConversationMenuOpeningEvent {
+    items: AXConversationMessageAction[];
+    canceled: boolean;
+    data: AXConversationMessage;
+}
 declare class AXConversationMessageBaseComponent {
     message: AXConversationMessage;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXConversationMessageBaseComponent, never>;
@@ -109,25 +121,10 @@ declare const AXConversationInputComponent_base: polytype.Polytype.ClusteredCons
  * @category Components
  */
 declare class AXConversationInputComponent extends AXConversationInputComponent_base {
-    /**
-     *  @ignore
-     */
     protected inputFile: ElementRef<HTMLInputElement>;
-    /**
-     *  @ignore
-     */
     protected sendIcon: Signal<unknown>;
-    /**
-     *  @ignore
-     */
     protected conversationService: AXConversationService;
-    /**
-     *  @ignore
-     */
     protected chats: Signal<AXConversationMessage[]>;
-    /**
-     *  @ignore
-     */
     protected replyChat: Signal<AXConversationMessage>;
     /** Maximum length of input text */
     maxLength: _angular_core.InputSignal<number>;
@@ -245,19 +242,23 @@ declare class AXConversationMessageTypeRegistryService {
 declare class AXConversationMessageComponent extends MXBaseComponent {
     protected popover: _angular_core.Signal<AXPopoverComponent>;
     isReplyArrowShown: _angular_core.InputSignal<boolean>;
-    protected conversationService: AXConversationService;
     chatMessage: _angular_core.InputSignal<AXConversationMessage>;
+    protected conversationService: AXConversationService;
     protected registryService: AXConversationMessageTypeRegistryService;
+    protected actionButtonItemsPrivate: _angular_core.WritableSignal<AXConversationMessageAction[]>;
+    private actionButtonItemsPublic;
+    onActionMenuOpening: _angular_core.OutputEmitterRef<AXConversationMenuOpeningEvent>;
     protected portal: _angular_core.Signal<ComponentPortal<any>>;
     protected messageType: _angular_core.Signal<string>;
     protected get isOwn(): boolean;
-    get __hostClass(): string;
+    protected handleActionClick(): void;
     protected _handleAttached(ref: CdkPortalOutletAttachedRef): void;
     protected handleResendClick(): void;
     protected handleDeleteClick(): void;
     protected replyHandler(e: any): void;
+    get __hostClass(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXConversationMessageComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXConversationMessageComponent, "ax-conversation-message", never, { "isReplyArrowShown": { "alias": "isReplyArrowShown"; "required": false; "isSignal": true; }; "chatMessage": { "alias": "chatMessage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXConversationMessageComponent, "ax-conversation-message", never, { "isReplyArrowShown": { "alias": "isReplyArrowShown"; "required": false; "isSignal": true; }; "chatMessage": { "alias": "chatMessage"; "required": false; "isSignal": true; }; }, { "onActionMenuOpening": "onActionMenuOpening"; }, never, never, true, never>;
 }
 
 /**
@@ -359,22 +360,17 @@ declare class AXConversationMessageAudioComponent extends AXConversationMessageB
  * @category Components
  */
 declare class AXConversationViewComponent extends MXBaseComponent {
-    /** @ignore */
     protected conversationService: AXConversationService;
     onScrollEnd: _angular_core.OutputEmitterRef<AXEvent>;
     chatBoxHeight: _angular_core.InputSignal<string>;
     isReplyArrowShown: _angular_core.InputSignal<boolean>;
-    /**
-     * Emits an event when an action is performed within the conversation view.
-     *
-     * @event
-     */
+    onActionMenuOpening: _angular_core.OutputEmitterRef<AXConversationMenuOpeningEvent>;
     onAction: _angular_core.OutputEmitterRef<AXConversationActionEvent>;
     updatePrevItems(item: any[]): void;
     callForUpdate(): void;
     addNewItem(item: any): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXConversationViewComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXConversationViewComponent, "ax-conversation-view", never, { "chatBoxHeight": { "alias": "chatBoxHeight"; "required": false; "isSignal": true; }; "isReplyArrowShown": { "alias": "isReplyArrowShown"; "required": false; "isSignal": true; }; }, { "onScrollEnd": "onScrollEnd"; "onAction": "onAction"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXConversationViewComponent, "ax-conversation-view", never, { "chatBoxHeight": { "alias": "chatBoxHeight"; "required": false; "isSignal": true; }; "isReplyArrowShown": { "alias": "isReplyArrowShown"; "required": false; "isSignal": true; }; }, { "onScrollEnd": "onScrollEnd"; "onActionMenuOpening": "onActionMenuOpening"; "onAction": "onAction"; }, never, never, true, never>;
 }
 
 /**
@@ -652,5 +648,5 @@ declare class AXConversationModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXConversationModule>;
 }
 
-export { AXConversationActionEvent, AXConversationContainerComponent, AXConversationFileMessageComponent, AXConversationInputComponent, AXConversationMessageAudioComponent, AXConversationMessageBaseComponent, AXConversationMessageComponent, AXConversationMessageImageComponent, AXConversationMessageVideoComponent, AXConversationModule, AXConversationTextMessageComponent, AXConversationViewComponent, AXConversationVoiceMessageComponent, AXRecordingService, ConversationMessageImagePopupComponent };
+export { AXConversationActionEvent, AXConversationContainerComponent, AXConversationFileMessageComponent, AXConversationInputComponent, AXConversationMenuOpeningEvent, AXConversationMessageAction, AXConversationMessageAudioComponent, AXConversationMessageBaseComponent, AXConversationMessageComponent, AXConversationMessageImageComponent, AXConversationMessageVideoComponent, AXConversationModule, AXConversationTextMessageComponent, AXConversationViewComponent, AXConversationVoiceMessageComponent, AXRecordingService, ConversationMessageImagePopupComponent };
 export type { AXAudioRecorder, AXChatModuleConfig, AXConversationMessage, AXConversationMessageType, AXInputFileChange };

package/fesm2022/acorex-components-action-sheet.mjs

@@ -103,6 +103,7 @@ class AXActionSheetComponent extends MXBaseComponent {
         this.onTouchMoveListenerFn = () => undefined;
         this.onTouchUpListenerFn = () => undefined;
         this.isDragging = signal(false);
+        this.isFullScreen = signal(false);
         this.curserOffset = signal(0);
         this.actionSheetHeight = signal(0);
         this.isActionSheetHeightSet = signal(false);
@@ -148,7 +149,7 @@ class AXActionSheetComponent extends MXBaseComponent {
                         isUserInteraction: true,
                         dialogRef: this.dialogRef,
                     });
-                    this.handleUp();
+                    this.snapToFinalPosition();
                 }
             });
             this.onTouchUpListenerFn = this.renderer.listen(this.document, 'touchend', (e) => {
@@ -160,7 +161,7 @@ class AXActionSheetComponent extends MXBaseComponent {
                         isUserInteraction: true,
                         dialogRef: this.dialogRef,
                     });
-                    this.handleUp();
+                    this.snapToFinalPosition();
                 }
             });
         }
@@ -206,32 +207,42 @@ class AXActionSheetComponent extends MXBaseComponent {
             this.isActionSheetHeightSet.set(true);
         }
     }
-    handleUp() {
+    snapToFinalPosition() {
         this.getHostElement().style.transitionDuration = `${this.transitionDuration()}ms`;
-        this.document.body.parentElement.style.overscrollBehaviorY = 'auto';
-        if (this.getHostElement().clientHeight < this.actionSheetHeight() / 2) {
+        const currentHeight = this.getHostElement().clientHeight;
+        const initialHeight = this.actionSheetHeight();
+        const windowHeight = this.document.documentElement.clientHeight;
+        if (currentHeight < initialHeight * 0.75) {
             this.close(null);
             return;
         }
-        if (this.getHostElement().clientHeight >
-            (this.document.documentElement.clientHeight + this.actionSheetHeight()) / 2 &&
-            this.data.dragUp) {
+        if (this.isFullScreen() && currentHeight < windowHeight * 0.9) {
+            this.getHostElement().style.height = `${initialHeight}px`;
+            this.isFullScreen.set(false);
+            this.actionSheetService.setActionSheetEventState({
+                data: { state: 'normalSize' },
+                isUserInteraction: true,
+                dialogRef: this.dialogRef,
+            });
+            return;
+        }
+        if (this.data.dragUp && currentHeight > (windowHeight + initialHeight) / 3) {
             this.getHostElement().style.height = '100vh';
+            this.isFullScreen.set(true);
+            this.document.body.parentElement.style.overscrollBehaviorY = 'contain';
             this.actionSheetService.setActionSheetEventState({
                 data: { state: 'fullScreen' },
                 isUserInteraction: true,
                 dialogRef: this.dialogRef,
             });
-            this.document.body.parentElement.style.overscrollBehaviorY = 'contain';
             return;
         }
-        this.getHostElement().style.height = this.actionSheetHeight() + 'px';
+        this.getHostElement().style.height = `${initialHeight}px`;
         this.actionSheetService.setActionSheetEventState({
             data: { state: 'normalSize' },
             isUserInteraction: true,
             dialogRef: this.dialogRef,
         });
-        return;
     }
     heightCalculator(clientY) {
         if (this.data.dragUp) {