@acorex/components 21.0.1-next.7 → 21.0.1-next.71

package/types/acorex-components-media-viewer.d.ts

@@ -0,0 +1,184 @@
+import * as swiper_types from 'swiper/types';
+import * as _angular_core from '@angular/core';
+import { Type, OnDestroy, ModuleWithProviders } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i4 from '@angular/cdk/portal';
+import { ComponentPortal, CdkPortalOutletAttachedRef } from '@angular/cdk/portal';
+import * as i1 from '@angular/common';
+import * as i2 from '@acorex/components/button';
+import * as i3 from '@acorex/components/decorators';
+import * as i5 from '@angular/forms';
+import * as i6 from '@acorex/components/image';
+import * as i7 from '@acorex/components/loading';
+import * as i8 from '@acorex/cdk/carousel';
+import * as i9 from '@acorex/components/pdf-reader';
+import * as i10 from '@acorex/components/video-player';
+
+interface AXMediaViewerType {
+    name: string;
+    component: Type<any>;
+}
+type AXMediaViewerData = {
+    id: string;
+    name?: string;
+    size?: string;
+    type: 'image' | 'audio' | 'pdf' | 'video';
+    url: string | (() => Promise<string>);
+    thumbnailUrl?: string | (() => Promise<string>);
+    tooltip?: string;
+};
+type AXThumbnail = {
+    thumbnailImage: string | (() => Promise<string>);
+    svg: string;
+    type: string;
+    id: string;
+    tooltip?: string;
+    index: number;
+};
+declare class AXMediaViewerBaseComponent {
+    message: {
+        data: AXMediaViewerData;
+        index: number;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXMediaViewerBaseComponent, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXMediaViewerBaseComponent>;
+}
+
+declare class AXMediaViewerService {
+    dataArray: _angular_core.WritableSignal<AXMediaViewerData[]>;
+    selectedIndex: _angular_core.WritableSignal<number>;
+    dirtyItems: Map<any, any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXMediaViewerService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXMediaViewerService>;
+}
+
+declare class AXMediaViewerContainerComponent implements OnDestroy {
+    #private;
+    dataArray: _angular_core.InputSignal<AXMediaViewerData[]>;
+    thumbnail: _angular_core.InputSignal<boolean>;
+    pagination: _angular_core.InputSignal<boolean>;
+    protected service: AXMediaViewerService;
+    protected sanitizer: DomSanitizer;
+    protected isMobile: boolean;
+    private readonly elementRef;
+    protected thumbnailArray: _angular_core.WritableSignal<AXThumbnail[]>;
+    protected option: _angular_core.WritableSignal<swiper_types.SwiperOptions>;
+    protected thumbnailOption: _angular_core.WritableSignal<swiper_types.SwiperOptions>;
+    protected isFullScreen: _angular_core.WritableSignal<boolean>;
+    private swiperRef;
+    private swiperRef2;
+    private fullScreenButton;
+    private globalOptions;
+    private setActiveIndex;
+    getActiveIndex(): number;
+    ngOnDestroy(): void;
+    next(): void;
+    prev(): void;
+    private interVal?;
+    goToIndex(index: number, speed?: number): void;
+    private init;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXMediaViewerContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXMediaViewerContainerComponent, "ax-media-viewer-container", never, { "dataArray": { "alias": "dataArray"; "required": false; "isSignal": true; }; "thumbnail": { "alias": "thumbnail"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; }, {}, ["fullScreenButton"], ["ax-header", "ax-suffix", "ax-prefix"], true, never>;
+}
+
+declare class AXMediaViewerTypeRegistryService {
+    private plugins;
+    register(...plugins: AXMediaViewerType[]): void;
+    resolve(name: string): AXMediaViewerType | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXMediaViewerTypeRegistryService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXMediaViewerTypeRegistryService>;
+}
+
+declare class AXMediaViewerSliderComponent {
+    #private;
+    protected service: AXMediaViewerService;
+    dataObject: _angular_core.InputSignal<AXMediaViewerData>;
+    index: _angular_core.InputSignal<unknown>;
+    /**  @ignore */
+    protected portal: _angular_core.WritableSignal<ComponentPortal<any>>;
+    /**  @ignore */
+    protected registryService: AXMediaViewerTypeRegistryService;
+    /**  @ignore */
+    protected _handleAttached(ref: CdkPortalOutletAttachedRef): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXMediaViewerSliderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXMediaViewerSliderComponent, "ax-media-viewer-slider", never, { "dataObject": { "alias": "dataObject"; "required": false; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXAudioPlayerComponent extends AXMediaViewerBaseComponent {
+    #private;
+    protected src: _angular_core.WritableSignal<any>;
+    protected service: AXMediaViewerService;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXAudioPlayerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXAudioPlayerComponent, "ax-audio-player", never, {}, {}, never, never, true, never>;
+}
+
+declare class AXFileInfoComponent {
+    protected service: AXMediaViewerService;
+    protected infoData: _angular_core.Signal<AXMediaViewerData>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFileInfoComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXFileInfoComponent, "ax-file-info", never, {}, {}, never, never, true, never>;
+}
+
+declare class AXImageViewerComponent extends AXMediaViewerBaseComponent {
+    #private;
+    protected hasError: _angular_core.WritableSignal<boolean>;
+    protected src: _angular_core.WritableSignal<any>;
+    protected service: AXMediaViewerService;
+    protected loading: _angular_core.WritableSignal<boolean>;
+    protected handleImageError(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageViewerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXImageViewerComponent, "ax-image-viewer", never, {}, {}, never, never, true, never>;
+}
+
+declare class PdfComponent extends AXMediaViewerBaseComponent {
+    #private;
+    sanitizer: DomSanitizer;
+    protected src: _angular_core.WritableSignal<any>;
+    protected service: AXMediaViewerService;
+    protected loading: _angular_core.WritableSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PdfComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PdfComponent, "ax-pdf", never, {}, {}, never, never, true, never>;
+}
+
+declare class AXThumbnailViewerComponent extends AXMediaViewerBaseComponent implements OnDestroy {
+    #private;
+    protected hasError: _angular_core.WritableSignal<boolean>;
+    protected src: _angular_core.WritableSignal<any>;
+    item: _angular_core.InputSignal<string | (() => Promise<string>)>;
+    index: _angular_core.InputSignal<number>;
+    protected service: AXMediaViewerService;
+    private host;
+    protected loading: _angular_core.WritableSignal<boolean>;
+    private observer;
+    private isElementVisible;
+    protected handleImageError(): void;
+    private observeElementVisibility;
+    private cleanupObserver;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXThumbnailViewerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXThumbnailViewerComponent, "ax-thumbnail-viewer", never, { "item": { "alias": "item"; "required": false; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class VideoPlayerComponent extends AXMediaViewerBaseComponent {
+    #private;
+    protected src: _angular_core.WritableSignal<any>;
+    protected service: AXMediaViewerService;
+    protected loading: _angular_core.WritableSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VideoPlayerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VideoPlayerComponent, "ax-video", never, {}, {}, never, never, true, never>;
+}
+
+interface AXMediaViewerModuleConfig {
+    types: AXMediaViewerType[];
+}
+declare class AXMediaViewerModule {
+    constructor();
+    static forRoot(config?: AXMediaViewerModuleConfig): ModuleWithProviders<AXMediaViewerModule>;
+    static forChild(config?: AXMediaViewerModuleConfig): ModuleWithProviders<AXMediaViewerModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXMediaViewerModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXMediaViewerModule, never, [typeof i1.CommonModule, typeof i2.AXButtonModule, typeof i3.AXDecoratorModule, typeof i4.CdkPortalOutlet, typeof i5.FormsModule, typeof i6.AXImageModule, typeof i7.AXLoadingModule, typeof i8.AXCarouselDirective, typeof i9.AXPdfReaderModule, typeof i10.AXVideoPlayerModule, typeof AXMediaViewerContainerComponent, typeof AXMediaViewerSliderComponent, typeof AXAudioPlayerComponent, typeof AXImageViewerComponent, typeof PdfComponent, typeof VideoPlayerComponent, typeof AXFileInfoComponent, typeof AXThumbnailViewerComponent], [typeof AXMediaViewerContainerComponent, typeof AXMediaViewerSliderComponent, typeof AXAudioPlayerComponent, typeof AXImageViewerComponent, typeof PdfComponent, typeof VideoPlayerComponent, typeof AXFileInfoComponent, typeof AXThumbnailViewerComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXMediaViewerModule>;
+}
+
+export { AXAudioPlayerComponent, AXFileInfoComponent, AXImageViewerComponent, AXMediaViewerBaseComponent, AXMediaViewerContainerComponent, AXMediaViewerModule, AXMediaViewerSliderComponent, AXThumbnailViewerComponent, PdfComponent, VideoPlayerComponent };
+export type { AXMediaViewerData, AXMediaViewerModuleConfig, AXMediaViewerType, AXThumbnail };

package/{menu/index.d.ts → types/acorex-components-menu.d.ts}

@@ -60,11 +60,15 @@ declare class AXContextMenuComponent extends NXComponent {
     readonly target: _angular_core.InputSignal<string | HTMLElement | HTMLElement[]>;
     onItemClick: _angular_core.OutputEmitterRef<AXContextMenuItemsClickEvent>;
     onOpening: _angular_core.OutputEmitterRef<AXContextMenuOpeningEvent>;
+    /** Emitted when the menu closes (backdrop, item click, scroll, another menu opening, etc.). */
+    onClose: _angular_core.OutputEmitterRef<void>;
     hasArrow: _angular_core.WritableSignal<boolean>;
     private service;
     private renderer;
     private document;
     private platformID;
+    private zIndexService;
+    private zToken;
     /** @ignore */
     constructor();
     ngOnDestroy(): void;
@@ -103,11 +107,11 @@ declare class AXContextMenuComponent extends NXComponent {
     private removeBackdrop;
     private createEventListeners;
     /** @ignore */
-    private onWindowEvent;
+    onWindowEvent(): void;
     /** @ignore */
     get __hostClass(): any;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXContextMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXContextMenuComponent, "ax-context-menu", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "closeOn": { "alias": "closeOn"; "required": false; "isSignal": true; }; "originalItems": { "alias": "items"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; "onOpening": "onOpening"; }, never, ["ax-menu-item,ax-divider,ax-title,ng-container"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXContextMenuComponent, "ax-context-menu", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "closeOn": { "alias": "closeOn"; "required": false; "isSignal": true; }; "originalItems": { "alias": "items"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; "onOpening": "onOpening"; "onClose": "onClose"; }, never, ["ax-menu-item,ax-divider,ax-title,ng-container"], true, never>;
 }
 
 type AXMenuItemClickEvent = AXMenuItemClickBaseEvent<AXMenuItemComponent>;
@@ -127,6 +131,8 @@ declare class AXMenuItemComponent extends NXComponent implements OnDestroy {
     private scrollableParents;
     private unsuscriber;
     private renderer;
+    private zIndexService;
+    private zToken;
     protected arrowIcon: _angular_core.Signal<string>;
     onClick: _angular_core.OutputEmitterRef<AXMenuItemClickEvent>;
     name: _angular_core.InputSignal<string>;
@@ -159,15 +165,15 @@ declare class AXMenuItemComponent extends NXComponent implements OnDestroy {
      * Calculate the position of the submenu to avoid it going out of the viewport.
      */
     private calculatePosition;
-    private handleClick;
-    private handleMouseEnter;
+    handleClick(e: MouseEvent): void;
+    handleMouseEnter(event: MouseEvent): void;
     private mouseLeaveTimeout;
-    private handleMouseLeave;
-    private onWindowEvent;
+    handleMouseLeave(event: MouseEvent): void;
+    onWindowEvent(): void;
     /**
      * Close all menus if clicking outside the root menu and all sub-items.
      */
-    private onClickOutside;
+    onClickOutside(event: MouseEvent): void;
     ngOnDestroy(): void;
     private bindScrollEvents;
     private removeScrollEvents;

package/{modal/index.d.ts → types/acorex-components-modal.d.ts}

@@ -33,6 +33,8 @@ interface AXModalRef<TResult = any> {
     restore: () => void;
     close: (data?: TResult) => void;
     setInputs: (values: AXComponentInputs) => void;
+    /** Brings this modal to the front of all other overlays */
+    bringToFront: () => void;
     onClose: Subject<TResult>;
 }
 declare abstract class AXModalComponentBase {
@@ -41,6 +43,7 @@ declare abstract class AXModalComponentBase {
     minimize(): void;
     restore(): void;
     maximize(): void;
+    bringToFront(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXModalComponentBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AXModalComponentBase, never, never, { "__modal__": { "alias": "__modal__"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -117,6 +120,10 @@ declare class AXModalService {
      * Restores the modal from minimized or maximized state.
      */
     restore(): Promise<void>;
+    /**
+     * Brings the modal to the front of all other overlays.
+     */
+    bringToFront(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AXModalService>;
 }

package/{notification/index.d.ts → types/acorex-components-notification.d.ts}

@@ -1,10 +1,9 @@
-import { AXStyleColorType, AXStyleLookType, AXLocation, MXBaseComponent, AXComponentCloseEvent } from '@acorex/cdk/common';
-import { ComponentType, Portal } from '@angular/cdk/portal';
-import * as i0 from '@angular/core';
-import { TemplateRef, OnInit, InjectionToken } from '@angular/core';
-import { DialogRef } from '@angular/cdk/dialog';
+import { AXStyleColorType, AXStyleLookType, AXLocation, MXBaseComponent } from '@acorex/cdk/common';
+import { AXOverlayRef } from '@acorex/cdk/overlay';
+import * as _angular_core from '@angular/core';
+import { TemplateRef, Type, OnInit, InjectionToken } from '@angular/core';
 
-type AXNotificationContentType = string | TemplateRef<unknown> | ComponentType<unknown>;
+type AXNotificationContentType = string | TemplateRef<unknown> | Type<unknown>;
 interface AXNotificationButtonItem {
     color?: AXStyleColorType;
     look?: AXStyleLookType;
@@ -43,6 +42,16 @@ interface AXNotificationData {
 interface AXNotificationRef {
     close(): void;
 }
+/**
+ * @internal
+ * Internal reference used by notification service to manage overlay instances
+ */
+interface AXNotificationInternalRef {
+    id: string;
+    overlayRef: AXOverlayRef<unknown>;
+    config: AXNotificationData;
+    close: () => void;
+}
 
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
@@ -50,33 +59,40 @@ interface AXNotificationRef {
  * @category Components
  */
 declare class AXNotificationComponent extends MXBaseComponent implements OnInit {
-    config: AXNotificationData;
-    dialogRef: DialogRef<AXComponentCloseEvent, unknown>;
+    /** Notification configuration data */
+    config: _angular_core.InputSignal<AXNotificationData>;
+    /** @internal Callback function to close the notification */
+    onClose: _angular_core.InputSignal<() => void>;
+    private notificationService;
     /** @ignore */
-    _selectedPortal: Portal<unknown>;
-    /** @ignore */
-    _icon: string;
+    protected _icon: string;
     private intervalId;
     private isPaused;
-    protected remainingTime: i0.WritableSignal<number>;
-    protected transitionDuration: i0.WritableSignal<number>;
+    protected remainingTime: _angular_core.WritableSignal<number>;
+    protected transitionDuration: _angular_core.WritableSignal<number>;
+    /** Template content if config.content is a TemplateRef */
+    protected templateContent: _angular_core.Signal<TemplateRef<unknown>>;
+    /** Component content if config.content is a component Type */
+    protected componentContent: _angular_core.Signal<Type<unknown>>;
+    /** String content if config.content is a string */
+    protected stringContent: _angular_core.Signal<string>;
     ngOnInit(): void;
     private pauseAnimation;
     private _handleTimeOut;
     /** @ignore */
-    private _initContent;
-    /** @ignore */
     private _initIcon;
     /** @ignore */
-    protected get _stringContent(): string;
-    /** @ignore */
     protected _handleButtonClick(button: AXNotificationButtonItem): void;
     /**
-     * Closes the dialog and provides the component and HTML element for reference.
+     * Closes the notification.
      */
     close(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXNotificationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXNotificationComponent, "ax-notification", never, {}, {}, never, never, true, never>;
+    /**
+     * Closes all notifications.
+     */
+    closeAll(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXNotificationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXNotificationComponent, "ax-notification", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "onClose": { "alias": "onClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface AXNotificationConfig {
@@ -94,18 +110,18 @@ type PartialNotificationConfig = Partial<AXNotificationConfig>;
 declare function notificationConfig(config?: PartialNotificationConfig): AXNotificationConfig;
 
 declare class AXNotificationModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXNotificationModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXNotificationModule, never, [typeof AXNotificationComponent], [typeof AXNotificationComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXNotificationModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXNotificationModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXNotificationModule, never, [typeof AXNotificationComponent], [typeof AXNotificationComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXNotificationModule>;
 }
 
 declare class AXNotificationService {
-    private dialog;
+    private overlayService;
     private translationService;
     private defaultConfig;
     private activeNotifications;
     private reservedNotifications;
-    private notificationCounterElement;
+    private notificationCounterRef;
     private moreNotificationsColor;
     private moreNotificationsLocation;
     private reserveCounter;
@@ -114,14 +130,15 @@ declare class AXNotificationService {
     hideAll(): void;
     private handleShowReservedNotification;
     private handleReservedNotificationCounter;
-    private createReservedCounternotification;
+    private createReservedCounterNotification;
+    private positionNotification;
     private reposition;
     private getRepositionPosition;
+    private applyRepositionPosition;
     private getPosition;
-    private getPositionStrategy;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXNotificationService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<AXNotificationService>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXNotificationService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXNotificationService>;
 }
 
 export { AXNotificationComponent, AXNotificationDefaultConfig, AXNotificationModule, AXNotificationService, AX_NOTIFICATION_CONFIG, notificationConfig };
-export type { AXNotificationButtonItem, AXNotificationConfig, AXNotificationContentType, AXNotificationData, AXNotificationOptions, AXNotificationRef, PartialNotificationConfig };
+export type { AXNotificationButtonItem, AXNotificationConfig, AXNotificationContentType, AXNotificationData, AXNotificationInternalRef, AXNotificationOptions, AXNotificationRef, PartialNotificationConfig };

package/{number-box/index.d.ts → types/acorex-components-number-box.d.ts}

@@ -32,6 +32,9 @@ declare class AXNumberBoxComponent extends AXNumberBoxComponent_base {
     protected internalValueChanged(value: number | undefined): void;
     private plusValue;
     private minusValue;
+    private getNumericValue;
+    private getSteppedValue;
+    private getFractionDigits;
     protected handleOnKeydownEvent(e: KeyboardEvent): void;
     protected handleUpClick(): void;
     protected handleDownClick(): void;

package/{paint/index.d.ts → types/acorex-components-paint.d.ts}

@@ -121,6 +121,12 @@ declare class AXPaintViewComponent implements OnDestroy {
     protected mouseMoveHandler(e: MouseEvent): void;
     /** @ignore */
     protected mouseUpHandler(): void;
+    /**
+     * Loads an image onto the canvas (e.g. for editing an existing signature).
+     *
+     * @param dataUrl - Data URL of the image (e.g. from toDataURL or existing value)
+     */
+    loadImage(dataUrl: string): void;
     /**
      * Exports the canvas content as an image.
      *

package/{phone-box/index.d.ts → types/acorex-components-phone-box.d.ts}

@@ -1,6 +1,6 @@
 import * as polytype from 'polytype';
 import * as _angular_core from '@angular/core';
-import { MXInputBaseValueComponent, MXLookComponent, AXDataSource, AXValueChangedEvent } from '@acorex/cdk/common';
+import { MXInputBaseValueComponent, MXLookComponent, AXValueChangedEvent, AXDataSource } from '@acorex/cdk/common';
 import { CountryItem } from '@acorex/core/constants';
 import * as i1 from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -56,12 +56,12 @@ declare class AXPhoneBoxComponent extends AXPhoneBoxComponent_base {
     /** @ignore */
     protected selectedCountry: _angular_core.WritableSignal<CountryItem>;
     /** @ignore */
-    protected _handleModelChange(value: string | null): void;
+    protected _handleModelChange(e: AXValueChangedEvent<any>): void;
+    protected internalValueChanged(value: any): void;
     /** @ignore */
     protected dataSource: AXDataSource<CountryItem>;
     /** @ignore */
     protected handleCountryOnClosed(): void;
-    protected internalValueChanged(value: any): void;
     /**
      * Determines if the keyboard event is a valid action based on allowed keys and key codes.
      *
@@ -77,8 +77,18 @@ declare class AXPhoneBoxComponent extends AXPhoneBoxComponent_base {
     setCountries(): void;
     protected handleKeyDown(e: KeyboardEvent): void;
     private parsePhoneNumber;
+    /**
+     * Formats a national phone number according to the country's format pattern.
+     * The format pattern uses '0' as digit placeholders and preserves other characters (like spaces).
+     *
+     * @param number - The raw national number (digits only)
+     * @param format - The country's phone number format pattern (e.g., '000 000 0000')
+     * @returns The formatted national number with spaces according to the format
+     */
+    private formatNationalNumber;
     /** @ignore */
     _handleCountryValueChanged(event: AXValueChangedEvent): void;
+    private removeValidation;
     private get __hostName();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXPhoneBoxComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXPhoneBoxComponent, "ax-phone-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "type": { "alias": "type"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "look": { "alias": "look"; "required": false; }; "classNames": { "alias": "class"; "required": false; }; "precode": { "alias": "precode"; "required": false; "isSignal": true; }; "country": { "alias": "country"; "required": false; "isSignal": true; }; "included": { "alias": "included"; "required": false; "isSignal": true; }; "excluded": { "alias": "excluded"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onKeyPress": "onKeyPress"; "country": "countryChange"; }, never, ["ax-validation-rule", "ax-clear-button "], true, never>;