@acorex/components 20.9.0 → 20.9.2

package/file-viewer/index.d.ts

@@ -0,0 +1,178 @@
+import * as _angular_core from '@angular/core';
+import { Provider, OnDestroy } from '@angular/core';
+import * as _acorex_core_file from '@acorex/core/file';
+import { AXFileTypeExtensionHint, AXFileType, AXFileTypeViewComponent } from '@acorex/core/file';
+import { AXStyleColorType } from '@acorex/cdk/common';
+import { SafeResourceUrl } from '@angular/platform-browser';
+
+/** Single item displayed in a file-viewer carousel. */
+interface AXFileViewerItem {
+    id: string;
+    /** Catalog name (`image`, `video`, `audio`, `document`, `file`). Inferred from mimeType/extension when omitted. */
+    fileType?: string;
+    name?: string;
+    size?: number;
+    url: string | (() => Promise<string>);
+    thumbnailUrl?: string | (() => Promise<string>);
+    mimeType?: string;
+    extension?: string;
+    tooltip?: string;
+}
+/** Payload passed to each file-type viewer component inside the carousel. */
+interface AXFileViewerViewPayload {
+    item: AXFileViewerItem;
+    index: number;
+    active: boolean;
+}
+
+/** Carousel state shared between container, slides and thumbnails. Provided per-container. */
+declare class AXFileViewerService {
+    readonly items: _angular_core.WritableSignal<AXFileViewerItem[]>;
+    readonly selectedIndex: _angular_core.WritableSignal<number>;
+    private readonly urlCache;
+    /** Resolve a potentially lazy URL — caches the result. */
+    resolveUrl(item: AXFileViewerItem, key: 'url' | 'thumbnailUrl'): Promise<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFileViewerService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXFileViewerService>;
+}
+
+/** Registers file-viewer components on standard file-type catalog entries. */
+declare function provideFileViewer(): Provider[];
+
+/** Infers a file-type catalog name from the item. */
+declare function resolveFileViewerFileType(item: AXFileViewerItem): string;
+/** Builds an extension hint from item metadata. */
+declare function buildFileViewerExtensionHint(item: AXFileViewerItem): AXFileTypeExtensionHint | undefined;
+
+declare function createFileViewerFileTypes(): AXFileType[];
+
+declare class AXFileViewerContainerComponent implements OnDestroy {
+    #private;
+    readonly items: _angular_core.InputSignal<AXFileViewerItem[]>;
+    readonly thumbnail: _angular_core.InputSignal<boolean>;
+    readonly pagination: _angular_core.InputSignal<boolean>;
+    readonly download: _angular_core.InputSignal<boolean>;
+    readonly fullscreen: _angular_core.InputSignal<boolean>;
+    /** External loading flag — show overlay while parent data is being fetched. */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly service: AXFileViewerService;
+    private readonly host;
+    private readonly zIndexService;
+    private readonly mainCarouselRef;
+    private readonly thumbCarouselRef;
+    private readonly fullScreenButton;
+    private zToken;
+    private initToken;
+    /** True while carousels are being (re)initialized. */
+    readonly initializing: _angular_core.WritableSignal<boolean>;
+    readonly isBusy: _angular_core.Signal<boolean>;
+    readonly isFirstSlide: _angular_core.Signal<boolean>;
+    readonly isLastSlide: _angular_core.Signal<boolean>;
+    readonly currentItem: _angular_core.Signal<AXFileViewerItem>;
+    readonly currentFileType: _angular_core.Signal<string>;
+    readonly currentTypeLabel: _angular_core.Signal<string>;
+    readonly currentTypeColor: _angular_core.Signal<AXStyleColorType>;
+    readonly slideCounter: _angular_core.Signal<string>;
+    readonly resolveFileType: typeof resolveFileViewerFileType;
+    resolveTypeLabel(item: AXFileViewerItem): string;
+    formatSize(size?: number): string;
+    private readonly mainCarouselOptions;
+    private readonly thumbnailCarouselOptions;
+    private acquireFullscreenZIndex;
+    private releaseFullscreenZIndex;
+    private initCarousels;
+    private readonly onSlideChange;
+    next(): void;
+    prev(): void;
+    goToIndex(index: number, speed?: number): void;
+    downloadCurrent(): Promise<void>;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFileViewerContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXFileViewerContainerComponent, "ax-file-viewer-container", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "thumbnail": { "alias": "thumbnail"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "download": { "alias": "download"; "required": false; "isSignal": true; }; "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXFileViewerSlideComponent {
+    readonly item: _angular_core.InputSignal<AXFileViewerItem>;
+    readonly index: _angular_core.InputSignal<number>;
+    private readonly service;
+    readonly fileTypeName: _angular_core.Signal<string>;
+    readonly extensionHint: _angular_core.Signal<_acorex_core_file.AXFileTypeExtensionHint>;
+    readonly viewPayload: _angular_core.Signal<AXFileViewerViewPayload>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFileViewerSlideComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXFileViewerSlideComponent, "ax-file-viewer-slide", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "index": { "alias": "index"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXFileViewerThumbPreviewComponent {
+    #private;
+    readonly item: _angular_core.InputSignal<AXFileViewerItem>;
+    private readonly service;
+    readonly src: _angular_core.WritableSignal<string>;
+    readonly icon: _angular_core.Signal<string>;
+    private resolvePreview;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFileViewerThumbPreviewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXFileViewerThumbPreviewComponent, "ax-file-viewer-thumb-preview", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface ThumbnailEntry {
+    id: string;
+    index: number;
+    type: string;
+    icon: string;
+}
+declare class AXFileViewerThumbnailsComponent {
+    readonly service: AXFileViewerService;
+    readonly thumbnails: _angular_core.Signal<ThumbnailEntry[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFileViewerThumbnailsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXFileViewerThumbnailsComponent, "ax-file-viewer-thumbnails", never, {}, {}, never, never, true, never>;
+}
+
+declare class AXFileViewerImageComponent implements AXFileTypeViewComponent<AXFileViewerViewPayload> {
+    #private;
+    readonly payload: _angular_core.InputSignal<AXFileViewerViewPayload>;
+    private readonly service;
+    readonly src: _angular_core.WritableSignal<string>;
+    readonly loading: _angular_core.WritableSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFileViewerImageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXFileViewerImageComponent, "ax-file-viewer-image", never, { "payload": { "alias": "payload"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXFileViewerVideoComponent implements AXFileTypeViewComponent<AXFileViewerViewPayload> {
+    #private;
+    readonly payload: _angular_core.InputSignal<AXFileViewerViewPayload>;
+    private readonly service;
+    readonly src: _angular_core.WritableSignal<string>;
+    readonly loading: _angular_core.WritableSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFileViewerVideoComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXFileViewerVideoComponent, "ax-file-viewer-video", never, { "payload": { "alias": "payload"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXFileViewerAudioComponent implements AXFileTypeViewComponent<AXFileViewerViewPayload> {
+    #private;
+    readonly payload: _angular_core.InputSignal<AXFileViewerViewPayload>;
+    private readonly service;
+    readonly src: _angular_core.WritableSignal<string>;
+    readonly loading: _angular_core.WritableSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFileViewerAudioComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXFileViewerAudioComponent, "ax-file-viewer-audio", never, { "payload": { "alias": "payload"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXFileViewerPdfComponent implements AXFileTypeViewComponent<AXFileViewerViewPayload> {
+    #private;
+    readonly payload: _angular_core.InputSignal<AXFileViewerViewPayload>;
+    private readonly service;
+    private readonly sanitizer;
+    readonly safeSrc: _angular_core.WritableSignal<SafeResourceUrl>;
+    readonly loading: _angular_core.WritableSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFileViewerPdfComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXFileViewerPdfComponent, "ax-file-viewer-pdf", never, { "payload": { "alias": "payload"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXFileViewerFileFallbackComponent implements AXFileTypeViewComponent<AXFileViewerViewPayload> {
+    readonly payload: _angular_core.InputSignal<AXFileViewerViewPayload>;
+    readonly name: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFileViewerFileFallbackComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXFileViewerFileFallbackComponent, "ax-file-viewer-fallback", never, { "payload": { "alias": "payload"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { AXFileViewerAudioComponent, AXFileViewerContainerComponent, AXFileViewerFileFallbackComponent, AXFileViewerImageComponent, AXFileViewerPdfComponent, AXFileViewerService, AXFileViewerSlideComponent, AXFileViewerThumbPreviewComponent, AXFileViewerThumbnailsComponent, AXFileViewerVideoComponent, buildFileViewerExtensionHint, createFileViewerFileTypes, provideFileViewer, resolveFileViewerFileType };
+export type { AXFileViewerItem, AXFileViewerViewPayload };

package/list/index.d.ts

@@ -1,4 +1,4 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { OnInit, WritableSignal, TemplateRef, EventEmitter } from '@angular/core';
 import { MXSelectionValueComponent, AXDataSource, AXEvent, AXListDataSource } from '@acorex/cdk/common';
 
@@ -17,13 +17,13 @@ declare class AXListComponent extends MXSelectionValueComponent implements OnIni
      *
      * @defaultValue true
      */
-    isItemTruncated: i0.InputSignal<boolean>;
+    isItemTruncated: _angular_core.InputSignal<boolean>;
     /**
      * Determines if a tooltip is shown for an item.
      *
      * @defaultValue false
      */
-    showItemTooltip: i0.InputSignal<boolean>;
+    showItemTooltip: _angular_core.InputSignal<boolean>;
     /** @ignore */
     private _dataSource;
     /** @ignore */
@@ -43,6 +43,16 @@ declare class AXListComponent extends MXSelectionValueComponent implements OnIni
      *  @ignore
      */
     itemHeightSignal: WritableSignal<number | 'auto'>;
+    /**
+     * Fixed pixel size for CDK virtual scroll. Falls back to 40 when `itemHeight` is `'auto'`.
+     * @ignore
+     */
+    protected cdkItemSize: _angular_core.Signal<number>;
+    /**
+     * CSS value applied to `--ax-comp-list-item-height` so rendered rows match the virtual slot.
+     * @ignore
+     */
+    protected itemHeightCss: _angular_core.Signal<string>;
     /**
      * Sets the height of each item in the list.
      */
@@ -172,15 +182,15 @@ declare class AXListComponent extends MXSelectionValueComponent implements OnIni
      * Determines whether to show the empty template based on the presence of items and loading state.
      * @ignore
      */
-    showEmptyTemplate: i0.Signal<boolean>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXListComponent, "ax-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "isItemTruncated": { "alias": "isItemTruncated"; "required": false; "isSignal": true; }; "showItemTooltip": { "alias": "showItemTooltip"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "checkbox": { "alias": "checkbox"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "disabledChange": "disabledChange"; "readonlyChange": "readonlyChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, never, ["ax-header", "ax-footer"], true, never>;
+    showEmptyTemplate: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXListComponent, "ax-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "isItemTruncated": { "alias": "isItemTruncated"; "required": false; "isSignal": true; }; "showItemTooltip": { "alias": "showItemTooltip"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "checkbox": { "alias": "checkbox"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "disabledChange": "disabledChange"; "readonlyChange": "readonlyChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, never, ["ax-header", "ax-footer"], true, never>;
 }
 
 declare class AXListModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXListModule, never, [typeof AXListComponent], [typeof AXListComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXListModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXListModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXListModule, never, [typeof AXListComponent], [typeof AXListComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXListModule>;
 }
 
 export { AXListComponent, AXListModule };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@acorex/components",
-  "version": "20.9.0",
+  "version": "20.9.2",
   "peerDependencies": {
-    "@acorex/core": "20.9.0",
-    "@acorex/cdk": "20.9.0",
+    "@acorex/core": "20.9.2",
+    "@acorex/cdk": "20.9.2",
     "polytype": ">=0.17.0",
     "angular-imask": ">=7.6.1",
+    "imask": ">=7.6.1",
     "gridstack": ">=12.0.0",
     "rrule": ">=2.8.1",
     "leaflet": ">=1.9.4",
@@ -60,14 +61,14 @@
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/acorex-components-accordion.mjs"
     },
-    "./alert": {
-      "types": "./alert/index.d.ts",
-      "default": "./fesm2022/acorex-components-alert.mjs"
-    },
     "./action-sheet": {
       "types": "./action-sheet/index.d.ts",
       "default": "./fesm2022/acorex-components-action-sheet.mjs"
     },
+    "./alert": {
+      "types": "./alert/index.d.ts",
+      "default": "./fesm2022/acorex-components-alert.mjs"
+    },
     "./aspect-ratio": {
       "types": "./aspect-ratio/index.d.ts",
       "default": "./fesm2022/acorex-components-aspect-ratio.mjs"
@@ -96,14 +97,14 @@
       "types": "./breadcrumbs/index.d.ts",
       "default": "./fesm2022/acorex-components-breadcrumbs.mjs"
     },
-    "./button-group": {
-      "types": "./button-group/index.d.ts",
-      "default": "./fesm2022/acorex-components-button-group.mjs"
-    },
     "./button": {
       "types": "./button/index.d.ts",
       "default": "./fesm2022/acorex-components-button.mjs"
     },
+    "./button-group": {
+      "types": "./button-group/index.d.ts",
+      "default": "./fesm2022/acorex-components-button-group.mjs"
+    },
     "./calendar": {
       "types": "./calendar/index.d.ts",
       "default": "./fesm2022/acorex-components-calendar.mjs"
@@ -212,6 +213,10 @@
       "types": "./file-explorer/index.d.ts",
       "default": "./fesm2022/acorex-components-file-explorer.mjs"
     },
+    "./file-viewer": {
+      "types": "./file-viewer/index.d.ts",
+      "default": "./fesm2022/acorex-components-file-viewer.mjs"
+    },
     "./flow-chart": {
       "types": "./flow-chart/index.d.ts",
       "default": "./fesm2022/acorex-components-flow-chart.mjs"
@@ -412,14 +417,14 @@
       "types": "./slider/index.d.ts",
       "default": "./fesm2022/acorex-components-slider.mjs"
     },
-    "./sliding-item": {
-      "types": "./sliding-item/index.d.ts",
-      "default": "./fesm2022/acorex-components-sliding-item.mjs"
-    },
     "./step-wizard": {
       "types": "./step-wizard/index.d.ts",
       "default": "./fesm2022/acorex-components-step-wizard.mjs"
     },
+    "./sliding-item": {
+      "types": "./sliding-item/index.d.ts",
+      "default": "./fesm2022/acorex-components-sliding-item.mjs"
+    },
     "./switch": {
       "types": "./switch/index.d.ts",
       "default": "./fesm2022/acorex-components-switch.mjs"

package/select-box/index.d.ts

@@ -160,6 +160,12 @@ declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements
     private resetSearchAfterSelection;
     /** @ignore */
     private setDropdownSize;
+    /**
+     * Shrinks list height to the visible overlay area so virtual scroll ends on fully
+     * visible rows instead of inside an overflow:hidden clipped region.
+     * @ignore
+     */
+    private _fitListHeightToAvailableSpace;
     private updateDropdownPosition;
     private updateDropdownSize;
     private _fitDropdownToContent;