@acorex/components 20.7.32 → 20.7.34

package/calendar/index.d.ts

@@ -1,13 +1,19 @@
 import * as polytype from 'polytype';
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { TemplateRef, EventEmitter, AfterViewInit } from '@angular/core';
-import { MXBaseComponent, AXItemClickEvent, AXRangeChangedEvent, MXValueComponent, AXRange, MXInteractiveComponent, AXClickEvent, MXComponentOptionChanged } from '@acorex/cdk/common';
+import { MXBaseComponent, AXItemClickEvent, AXRangeChangedEvent, MXValueComponent, AXRange, MXInteractiveComponent, AXValueChangedEvent, AXClickEvent, MXComponentOptionChanged } from '@acorex/cdk/common';
 import { AXCalendarService, AXDateTimeRange, AXDateTime } from '@acorex/core/date-time';
 import { AXLocaleService } from '@acorex/core/locale';
 import { AXTranslationService } from '@acorex/core/translation';
 
 type AXCalendarViewType = 'year' | 'month' | 'day';
 type AXCalendarViewDepth = AXCalendarViewType;
+/**
+ * Controls how month and year are chosen in the day view header.
+ * - `classic`: tap year/month labels to open month/year picker panels.
+ * - `select`: month/year dropdowns with prev/next arrows on the edges.
+ */
+type AXCalendarNavigationLookType = 'classic' | 'select';
 type AXCalendarDisabledDates = Date[] | ((date: Date) => boolean);
 type AXCalendarHolidayDates = Date[] | ((date: Date) => boolean);
 type AXCalendarCellCssClass = string | {
@@ -91,21 +97,25 @@ declare class MXCalendarBaseComponent extends MXBaseComponent {
     get holidayDates(): AXCalendarHolidayDates;
     set holidayDates(v: AXCalendarHolidayDates);
     render(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MXCalendarBaseComponent, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MXCalendarBaseComponent>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MXCalendarBaseComponent, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MXCalendarBaseComponent>;
 }
 declare const CALENDAR_INPUTS: string[];
 declare const CALENDAR_OUTPUTS: string[];
 
 declare const AXCalendarRangeComponent_base: polytype.Polytype.ClusteredConstructor<[{
     new (): MXValueComponent<AXRange<Date>>;
-    ɵfac: i0.ɵɵFactoryDeclaration<MXValueComponent<any>, never>;
-    ɵprov: i0.ɵɵInjectableDeclaration<MXValueComponent<any>>;
+    ɵfac: _angular_core.ɵɵFactoryDeclaration<MXValueComponent<any>, never>;
+    ɵprov: _angular_core.ɵɵInjectableDeclaration<MXValueComponent<any>>;
 }, typeof MXInteractiveComponent, typeof MXCalendarBaseComponent]>;
 declare class AXCalendarRangeComponent extends AXCalendarRangeComponent_base implements AfterViewInit {
     private formatService;
     private unsubscriber;
-    protected calendar: i0.WritableSignal<string>;
+    protected calendar: _angular_core.WritableSignal<string>;
+    /**
+     * Day view navigation style passed through to embedded calendars.
+     */
+    look: _angular_core.InputSignal<AXCalendarNavigationLookType>;
     /**
      *  @ignore
      */
@@ -174,14 +184,14 @@ declare class AXCalendarRangeComponent extends AXCalendarRangeComponent_base imp
      *  @ignore
      */
     private _syncNav2;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXCalendarRangeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXCalendarRangeComponent, "ax-calendar-range", never, { "rtl": { "alias": "rtl"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "type": { "alias": "type"; "required": false; }; "dayCellTemplate": { "alias": "dayCellTemplate"; "required": false; }; "monthCellTemplate": { "alias": "monthCellTemplate"; "required": false; }; "yearCellTemplate": { "alias": "yearCellTemplate"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; }, { "onOptionChanged": "onOptionChanged"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "depthChange": "depthChange"; "typeChange": "typeChange"; "activeViewChange": "activeViewChange"; "disabledDatesChange": "disabledDatesChange"; "holidayDatesChange": "holidayDatesChange"; "onNavigate": "onNavigate"; "onSlotClick": "onSlotClick"; }, never, ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCalendarRangeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCalendarRangeComponent, "ax-calendar-range", never, { "rtl": { "alias": "rtl"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "type": { "alias": "type"; "required": false; }; "dayCellTemplate": { "alias": "dayCellTemplate"; "required": false; }; "monthCellTemplate": { "alias": "monthCellTemplate"; "required": false; }; "yearCellTemplate": { "alias": "yearCellTemplate"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; }, { "onOptionChanged": "onOptionChanged"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "depthChange": "depthChange"; "typeChange": "typeChange"; "activeViewChange": "activeViewChange"; "disabledDatesChange": "disabledDatesChange"; "holidayDatesChange": "holidayDatesChange"; "onNavigate": "onNavigate"; "onSlotClick": "onSlotClick"; }, never, ["*"], true, never>;
 }
 
 declare const AXCalendarComponent_base: polytype.Polytype.ClusteredConstructor<[{
     new (): MXValueComponent<Date>;
-    ɵfac: i0.ɵɵFactoryDeclaration<MXValueComponent<any>, never>;
-    ɵprov: i0.ɵɵInjectableDeclaration<MXValueComponent<any>>;
+    ɵfac: _angular_core.ɵɵFactoryDeclaration<MXValueComponent<any>, never>;
+    ɵprov: _angular_core.ɵɵInjectableDeclaration<MXValueComponent<any>>;
 }, typeof MXInteractiveComponent, typeof MXCalendarBaseComponent]>;
 /**
  * A calendar component that provides a customizable calendar view with various options for selection, navigation, and styling.
@@ -190,9 +200,15 @@ declare const AXCalendarComponent_base: polytype.Polytype.ClusteredConstructor<[
  */
 declare class AXCalendarComponent extends AXCalendarComponent_base implements AfterViewInit {
     private formatService;
-    weekend: i0.InputSignal<number[]>;
-    weekdays: i0.InputSignal<number[]>;
-    protected calendar: i0.WritableSignal<string>;
+    weekend: _angular_core.InputSignal<number[]>;
+    weekdays: _angular_core.InputSignal<number[]>;
+    /**
+     * Day view navigation style.
+     * - `classic`: tap year/month labels to open month/year picker panels.
+     * - `select`: month/year dropdowns with prev/next arrows on the edges.
+     */
+    look: _angular_core.InputSignal<AXCalendarNavigationLookType>;
+    protected calendar: _angular_core.WritableSignal<string>;
     get displayRange(): AXDateTimeRange | null;
     /**
      *  @ignore
@@ -214,6 +230,28 @@ declare class AXCalendarComponent extends AXCalendarComponent_base implements Af
      *  @ignore
      */
     protected views: AXCalendarView[];
+    /**
+     *  @ignore
+     */
+    protected _monthOptions: {
+        id: number;
+        text: string;
+    }[];
+    /**
+     *  @ignore
+     */
+    protected _yearOptions: {
+        id: number;
+        text: string;
+    }[];
+    /**
+     *  @ignore
+     */
+    protected get _currentMonth(): number;
+    /**
+     *  @ignore
+     */
+    protected get _currentYear(): number;
     /**
      *  @ignore
      */
@@ -246,6 +284,22 @@ declare class AXCalendarComponent extends AXCalendarComponent_base implements Af
      *  @ignore
      */
     render(): void;
+    /**
+     *  @ignore
+     */
+    private _updateSelectOptions;
+    /**
+     *  @ignore
+     */
+    protected _handleMonthSelectChanged(e: AXValueChangedEvent): void;
+    /**
+     *  @ignore
+     */
+    protected _handleYearSelectChanged(e: AXValueChangedEvent): void;
+    /**
+     *  @ignore
+     */
+    private _getSelectBoxValue;
     /**
      *  @ignore
      */
@@ -371,15 +425,15 @@ declare class AXCalendarComponent extends AXCalendarComponent_base implements Af
      *  @ignore
      */
     protected getMonthName(date: AXDateTime, style: 'short' | 'long'): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXCalendarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXCalendarComponent, "ax-calendar", never, { "rtl": { "alias": "rtl"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "type": { "alias": "type"; "required": false; }; "dayCellTemplate": { "alias": "dayCellTemplate"; "required": false; }; "monthCellTemplate": { "alias": "monthCellTemplate"; "required": false; }; "yearCellTemplate": { "alias": "yearCellTemplate"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; "count": { "alias": "count"; "required": false; }; "id": { "alias": "id"; "required": false; }; "weekend": { "alias": "weekend"; "required": false; "isSignal": true; }; "weekdays": { "alias": "weekdays"; "required": false; "isSignal": true; }; }, { "onOptionChanged": "onOptionChanged"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; "minValueChange": "minValueChange"; "maxValueChange": "maxValueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "depthChange": "depthChange"; "typeChange": "typeChange"; "activeViewChange": "activeViewChange"; "disabledDatesChange": "disabledDatesChange"; "holidayDatesChange": "holidayDatesChange"; "onNavigate": "onNavigate"; "onSlotClick": "onSlotClick"; "countChange": "countChange"; }, never, ["ax-header", "ax-footer"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCalendarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCalendarComponent, "ax-calendar", never, { "rtl": { "alias": "rtl"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "type": { "alias": "type"; "required": false; }; "dayCellTemplate": { "alias": "dayCellTemplate"; "required": false; }; "monthCellTemplate": { "alias": "monthCellTemplate"; "required": false; }; "yearCellTemplate": { "alias": "yearCellTemplate"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; "count": { "alias": "count"; "required": false; }; "id": { "alias": "id"; "required": false; }; "weekend": { "alias": "weekend"; "required": false; "isSignal": true; }; "weekdays": { "alias": "weekdays"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; }, { "onOptionChanged": "onOptionChanged"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; "minValueChange": "minValueChange"; "maxValueChange": "maxValueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "depthChange": "depthChange"; "typeChange": "typeChange"; "activeViewChange": "activeViewChange"; "disabledDatesChange": "disabledDatesChange"; "holidayDatesChange": "holidayDatesChange"; "onNavigate": "onNavigate"; "onSlotClick": "onSlotClick"; "countChange": "countChange"; }, never, ["ax-header", "ax-footer"], true, never>;
 }
 
 declare class AXCalendarModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXCalendarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXCalendarModule, never, [typeof AXCalendarComponent, typeof AXCalendarRangeComponent], [typeof AXCalendarComponent, typeof AXCalendarRangeComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXCalendarModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCalendarModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXCalendarModule, never, [typeof AXCalendarComponent, typeof AXCalendarRangeComponent], [typeof AXCalendarComponent, typeof AXCalendarRangeComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXCalendarModule>;
 }
 
 export { AXCalendarComponent, AXCalendarModule, AXCalendarNavigateEvent, AXCalendarRangeComponent, AXCalendarSlotClick, CALENDAR_INPUTS, CALENDAR_OUTPUTS, MXCalendarBaseComponent };
-export type { AXCalendarCellCssClass, AXCalendarDisabledDates, AXCalendarHolidayDates, AXCalendarView, AXCalendarViewDepth, AXCalendarViewSlot, AXCalendarViewType, AXDateTimePickerType };
+export type { AXCalendarCellCssClass, AXCalendarDisabledDates, AXCalendarHolidayDates, AXCalendarNavigationLookType, AXCalendarView, AXCalendarViewDepth, AXCalendarViewSlot, AXCalendarViewType, AXDateTimePickerType };

package/conversation2/README.md

@@ -83,17 +83,16 @@ import {
   AXIndexedDBUserApi,
   AXIndexedDBConversationApi,
   AXIndexedDBMessageApi,
-  AXConversationIndexedDbUploaderApi,
   AXIndexedDBRealtimeApi,
 } from '@acorex/components/conversation2';
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    MyAppUploaderService,
     provideConversation({
       userApi: AXIndexedDBUserApi,
       conversationApi: AXIndexedDBConversationApi,
       messageApi: AXIndexedDBMessageApi,
-      uploaderApi: AXConversationIndexedDbUploaderApi,
       realtimeApi: AXIndexedDBRealtimeApi, // optional
       config: {
         messagePageSize: 50,
@@ -188,11 +187,12 @@ provideConversation({
   userApi: AXIndexedDBUserApi,
   conversationApi: AXIndexedDBConversationApi,
   messageApi: AXIndexedDBMessageApi,
-  uploaderApi: AXIndexedDBMediaUploaderApi,
   realtimeApi: AXIndexedDBRealtimeApi,
 });
 ```
 
+Register a service that subscribes to `AXUploaderService.onUpload`, `onResolveUrl`, and `onDeleteMedia` (see showcase `AXShowcaseConversationIndexedDbUploaderService`).
+
 #### IndexedDB with AI API (AI-Powered Demo)
 
 ```typescript
@@ -209,7 +209,6 @@ provideConversation({
   userApi: AXIndexedDBUserApi,
   conversationApi: AXIndexedDBConversationApi,
   messageApi: AXIndexedDBMessageAIApi,
-  uploaderApi: AXIndexedDBMediaUploaderApi,
   realtimeApi: AXIndexedDBRealtimeApi,
 });
 ```
@@ -226,10 +225,6 @@ interface AXConversationConfig {
   infiniteScrollThreshold?: number;     // Default: 200px
   scrollThreshold?: number;             // Default: 100px
 
-  // File upload (fallback when action omits uploadConstraints fields)
-  maxFileSize?: number;                 // Default: 10MB
-  allowedFileTypes?: string[];          // Default: image/*, video/*, audio/*, pdf, doc
-
   // UI Behavior
   messageHighlightDuration?: number;    // Default: 2000ms
   typingIndicatorTimeout?: number;      // Default: 3000ms
@@ -433,8 +428,8 @@ Supported message types out of the box:
 
 **Issue**: File upload fails
 
-- Check `config.maxFileSize` / `config.allowedFileTypes` and per-action `uploadConstraints` (`allowedMimeTypes`, `minSize`, `maxSize`)
-- Verify `uploaderApi` is provided and implements `AXUploaderApi.upload()` with progress and `AbortSignal` support
+- Check composer file-type catalogs and per-action `uploadConstraints` (`allowedMimeTypes`, `minSize`, `maxSize`)
+- Register a handler service subscribed to `AXUploaderService.onUpload` (and resolve/delete events) with progress and `AbortSignal` support
 
 **Issue**: Styling issues