@acorex/components 22.1.0-next.8 → 22.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/fesm2022/acorex-components-alert.mjs +2 -2
  2. package/fesm2022/acorex-components-alert.mjs.map +1 -1
  3. package/fesm2022/acorex-components-audio-wave.mjs +15 -0
  4. package/fesm2022/acorex-components-audio-wave.mjs.map +1 -1
  5. package/fesm2022/acorex-components-calendar.mjs +321 -118
  6. package/fesm2022/acorex-components-calendar.mjs.map +1 -1
  7. package/fesm2022/acorex-components-combo-box.mjs +259 -37
  8. package/fesm2022/acorex-components-combo-box.mjs.map +1 -1
  9. package/fesm2022/acorex-components-conversation-acorex-components-conversation-BtkyQUlh.mjs +16548 -0
  10. package/fesm2022/acorex-components-conversation-acorex-components-conversation-BtkyQUlh.mjs.map +1 -0
  11. package/fesm2022/acorex-components-conversation-composer-action-choice-dialog.component-D4ca9Mvt.mjs +51 -0
  12. package/fesm2022/acorex-components-conversation-composer-action-choice-dialog.component-D4ca9Mvt.mjs.map +1 -0
  13. package/fesm2022/acorex-components-conversation-image-picker-editor-dialog.component-QVs1XWYf.mjs +85 -0
  14. package/fesm2022/acorex-components-conversation-image-picker-editor-dialog.component-QVs1XWYf.mjs.map +1 -0
  15. package/fesm2022/{acorex-components-conversation-open-composer-picker-for-files-BuNEjswI.mjs → acorex-components-conversation-open-composer-picker-for-files-BKKO_8x6.mjs} +7 -20
  16. package/fesm2022/acorex-components-conversation-open-composer-picker-for-files-BKKO_8x6.mjs.map +1 -0
  17. package/fesm2022/acorex-components-conversation-picker-rename-file-dialog.component-BNKFb5yO.mjs +65 -0
  18. package/fesm2022/acorex-components-conversation-picker-rename-file-dialog.component-BNKFb5yO.mjs.map +1 -0
  19. package/fesm2022/acorex-components-conversation.mjs +1 -17608
  20. package/fesm2022/acorex-components-conversation.mjs.map +1 -1
  21. package/fesm2022/acorex-components-data-table.mjs +57 -23
  22. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  23. package/fesm2022/acorex-components-decorators.mjs +2 -2
  24. package/fesm2022/acorex-components-decorators.mjs.map +1 -1
  25. package/fesm2022/acorex-components-dropdown.mjs +2 -2
  26. package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
  27. package/fesm2022/acorex-components-fab.mjs +5 -5
  28. package/fesm2022/acorex-components-fab.mjs.map +1 -1
  29. package/fesm2022/acorex-components-image-editor.mjs +600 -409
  30. package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
  31. package/fesm2022/acorex-components-loading-dialog.mjs +59 -42
  32. package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
  33. package/fesm2022/acorex-components-lookup.mjs +1259 -169
  34. package/fesm2022/acorex-components-lookup.mjs.map +1 -1
  35. package/fesm2022/acorex-components-menu.mjs +11 -5
  36. package/fesm2022/acorex-components-menu.mjs.map +1 -1
  37. package/fesm2022/acorex-components-notification.mjs +6 -6
  38. package/fesm2022/acorex-components-notification.mjs.map +1 -1
  39. package/fesm2022/acorex-components-popover.mjs +33 -0
  40. package/fesm2022/acorex-components-popover.mjs.map +1 -1
  41. package/fesm2022/acorex-components-rail-navigation.mjs +2 -2
  42. package/fesm2022/acorex-components-rail-navigation.mjs.map +1 -1
  43. package/fesm2022/acorex-components-range-slider.mjs +2 -2
  44. package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
  45. package/fesm2022/acorex-components-select-box.mjs +38 -11
  46. package/fesm2022/acorex-components-select-box.mjs.map +1 -1
  47. package/fesm2022/acorex-components-tabs.mjs +2 -2
  48. package/fesm2022/acorex-components-tabs.mjs.map +1 -1
  49. package/fesm2022/acorex-components-tree-view.mjs +45 -3
  50. package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
  51. package/lookup/README.md +19 -8
  52. package/package.json +4 -3
  53. package/types/acorex-components-audio-wave.d.ts +3 -0
  54. package/types/acorex-components-calendar.d.ts +41 -9
  55. package/types/acorex-components-combo-box.d.ts +50 -10
  56. package/types/acorex-components-conversation.d.ts +1232 -1782
  57. package/types/acorex-components-data-table.d.ts +12 -2
  58. package/types/acorex-components-image-editor.d.ts +54 -49
  59. package/types/acorex-components-loading-dialog.d.ts +12 -4
  60. package/types/acorex-components-lookup.d.ts +286 -71
  61. package/types/acorex-components-popover.d.ts +8 -0
  62. package/types/acorex-components-select-box.d.ts +11 -0
  63. package/types/acorex-components-tree-view.d.ts +11 -1
  64. package/fesm2022/acorex-components-conversation-composer-action-choice-dialog.component-DCcRJYfF.mjs +0 -50
  65. package/fesm2022/acorex-components-conversation-composer-action-choice-dialog.component-DCcRJYfF.mjs.map +0 -1
  66. package/fesm2022/acorex-components-conversation-open-composer-picker-for-files-BuNEjswI.mjs.map +0 -1
package/lookup/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @acorex/components/lookup
2
2
 
3
- An advanced drop-down (lookup) component with five modes, `AXDataSource` support, and virtual scrolling.
3
+ An advanced drop-down (lookup) component with six modes, `AXDataSource` support, and virtual scrolling.
4
4
 
5
5
  ## Modes
6
6
 
@@ -11,6 +11,7 @@ An advanced drop-down (lookup) component with five modes, `AXDataSource` support
11
11
  | `drop-down-tree` | A tree-like structure for single item selection. |
12
12
  | `multi-select-tree` | A tree-like structure for multiple item selection. |
13
13
  | `multi-column` | An `ax-data-table` grid; further pages load on scroll. |
14
+ | `multi-column-tree` | A multi-column table with a drop-down tree inside it (expandable rows). |
14
15
 
15
16
  ## Usage
16
17
 
@@ -42,22 +43,32 @@ import { AXDataSource } from '@acorex/cdk/common';
42
43
 
43
44
  <!-- MultiColumnComboBox -->
44
45
  <ax-lookup mode="multi-column" [dataSource]="items" [columns]="columns" [(ngModel)]="selected"></ax-lookup>
46
+
47
+ <!-- MultiColumnTree (table + expandable tree) -->
48
+ <ax-lookup
49
+ mode="multi-column-tree"
50
+ [treeDataSource]="nodes"
51
+ [columns]="columns"
52
+ textField="title"
53
+ [(ngModel)]="selectedNode"
54
+ ></ax-lookup>
45
55
  ```
46
56
 
47
57
  Value binding uses the signal `value` model (`FormValueControl`) — prefer `[(ngModel)]` (or `[(value)]` / signal forms). No `ControlValueAccessor`.
48
58
 
49
- - `dataSource`: `AXDataSource` or a plain array (list and multi-column modes). Supports remote paging, `byKey` value resolution, and server-side filtering.
59
+ - `dataSource`: `AXDataSource` or a plain array (list and multi-column modes). Supports remote paging, `byKey` value resolution, and server-side filtering. Also used by `multi-column-tree` when `treeDataSource` is not set (hierarchical load via `treeParentField`).
50
60
  - `valueItems`: full items that resolve the current `value` key(s) without calling `byKey` (useful when the parent already loaded the selected entity). Missing keys still fall through to `find` / `byKey`. You can also call `seedItems(items)` imperatively.
51
- - `treeDataSource`: node array or lazy children callback (tree modes).
61
+ - `treeDataSource`: node array or lazy children callback (tree modes, including `multi-column-tree`).
52
62
  - `valueField` / `textField` / `disabledField`: field mappings. For tree modes these map to the tree `idField` / `titleField`.
53
- - `columns`: column definitions (`{ field, title, width? }`) for `multi-column` mode (mapped to `ax-text-column`).
54
- - `searchable`: when `true` (default), the trigger accepts typing and filters the list (`drop-down-list`, `multi-select`, `multi-column`). When `false`, the trigger is select-only. Tree modes have no search UI.
63
+ - `columns`: column definitions (`{ field, title, width?, expandHandler? }`) for `multi-column` and `multi-column-tree` (mapped to `ax-text-column`).
64
+ - `treeParentField` / `hasChildrenField`: hierarchy fields for `multi-column-tree` (defaults `parentId` / `hasChild`).
65
+ - `searchable`: when `true` (default), the trigger accepts typing and filters the list or tree in every mode. Nested array trees keep matching branches and expand ancestors of hits; lazy callback trees filter each loaded level (unloaded descendants are not searched). When `false`, the trigger is select-only.
55
66
  - `adaptivityEnabled`: when `true` (default), the list opens as a bottom actionsheet on small screens instead of a dropdown; set `false` to always use the anchored dropdown.
56
67
  - `caption`: title shown in the actionsheet header (falls back to `placeholder`).
57
- - `alternate`: when `true`, list rows use alternating background colors for easier scanning (`drop-down-list`, `multi-select`, `multi-column`).
58
- - `searchPlaceholder`: placeholder for the multi-select trigger search input when chips are already selected.
68
+ - `alternate`: when `true`, list rows use alternating background colors for easier scanning (all modes, including tree).
69
+ - `searchPlaceholder`: placeholder for the multi-select / multi-select-tree trigger search input when chips are already selected.
59
70
  - `itemHeight` / `maxVisibleItems`: list virtual-scroll sizing, and multi-column table viewport height (multi-column loads more pages on scroll, not via a pager).
60
71
  - `look`: the same editor-container look schemes as other editors like `ax-text-box`.
61
72
  - `ax-prefix` / `ax-suffix`: project decorators into the editor container.
62
73
 
63
- Each mode is rendered by its own internal mini component (`ax-lookup-drop-down-list`, `ax-lookup-multi-select`, `ax-lookup-drop-down-tree`, `ax-lookup-multi-select-tree`, `ax-lookup-multi-column`), all exported for direct use.
74
+ Each mode is rendered by its own internal mini component (`ax-lookup-drop-down-list`, `ax-lookup-multi-select`, `ax-lookup-drop-down-tree`, `ax-lookup-multi-select-tree`, `ax-lookup-multi-column`, `ax-lookup-multi-column-tree`), all exported for direct use.
package/package.json CHANGED
@@ -1,9 +1,10 @@
1
1
  {
2
2
  "name": "@acorex/components",
3
- "version": "22.1.0-next.8",
3
+ "version": "22.1.0",
4
4
  "peerDependencies": {
5
- "@acorex/core": "22.1.0-next.8",
6
- "@acorex/cdk": "22.1.0-next.8",
5
+ "@acorex/core": "22.1.0",
6
+ "@acorex/cdk": "22.1.0",
7
+ "@angular/aria": ">=22.1.0",
7
8
  "polytype": ">=0.17.0",
8
9
  "angular-imask": ">=7.6.1",
9
10
  "imask": ">=7.6.1",
@@ -84,12 +84,15 @@ declare class AXAudioWaveComponent implements OnDestroy {
84
84
  *
85
85
  */
86
86
  getMediaElement(): HTMLMediaElement;
87
+ getCurrentTime(): number;
87
88
  /**
88
89
  * Sets the playback rate of the audio.
89
90
  *
90
91
  * @param rate - The playback rate to set.
91
92
  */
92
93
  setRate(rate: number): void;
94
+ setMuted(muted: boolean): void;
95
+ isMuted(): boolean;
93
96
  /**
94
97
  * @ignore
95
98
  */
@@ -71,6 +71,7 @@ interface AXCalendarViewSlot {
71
71
  interface AXCalendarView {
72
72
  range: AXDateTimeRange;
73
73
  slots: AXCalendarViewSlot[];
74
+ weekCount?: number;
74
75
  }
75
76
  declare class MXCalendarBaseComponent extends MXBaseComponent {
76
77
  protected localeService: AXLocaleService;
@@ -134,8 +135,8 @@ declare const AXCalendarRangeComponent_base: polytype.Polytype.ClusteredConstruc
134
135
  ɵprov: _angular_core.ɵɵInjectableDeclaration<MXValueComponent<any>>;
135
136
  }, typeof MXInteractiveComponent, typeof MXCalendarBaseComponent]>;
136
137
  declare class AXCalendarRangeComponent extends AXCalendarRangeComponent_base implements AfterViewInit {
137
- private formatService;
138
138
  private unsubscriber;
139
+ protected readonly isRtl: _angular_core.Signal<boolean>;
139
140
  protected calendar: _angular_core.WritableSignal<string>;
140
141
  /**
141
142
  * Day view navigation style passed through to embedded calendars.
@@ -151,7 +152,8 @@ declare class AXCalendarRangeComponent extends AXCalendarRangeComponent_base imp
151
152
  private _calendarService;
152
153
  private _c1;
153
154
  private _c2;
154
- _navText: string;
155
+ _navText1: string;
156
+ _navText2: string;
155
157
  /**
156
158
  * @ignore
157
159
  */
@@ -164,6 +166,14 @@ declare class AXCalendarRangeComponent extends AXCalendarRangeComponent_base imp
164
166
  * @ignore
165
167
  */
166
168
  private _refreshCalendars;
169
+ /**
170
+ * @ignore
171
+ */
172
+ private _scheduleNavTextSync;
173
+ /**
174
+ * @ignore
175
+ */
176
+ private _ensureCalendarsReady;
167
177
  /**
168
178
  * @ignore
169
179
  */
@@ -173,10 +183,10 @@ declare class AXCalendarRangeComponent extends AXCalendarRangeComponent_base imp
173
183
  */
174
184
  ngAfterViewInit(): void;
175
185
  internalValueChanged(value: any): void;
176
- /** w
186
+ /**
177
187
  * @ignore
178
188
  */
179
- getCellClass: (date: AXDateTime) => "ax-range-start" | "ax-range-end" | "ax-range-between";
189
+ getCellClass: (date: AXDateTime) => string;
180
190
  /**
181
191
  * @ignore
182
192
  */
@@ -197,6 +207,18 @@ declare class AXCalendarRangeComponent extends AXCalendarRangeComponent_base imp
197
207
  * @ignore
198
208
  */
199
209
  private _syncNavText;
210
+ /**
211
+ * @ignore
212
+ */
213
+ private _formatNavDate;
214
+ /**
215
+ * @ignore
216
+ */
217
+ private _monthLabel;
218
+ /**
219
+ * @ignore
220
+ */
221
+ private _fallbackMonthName;
200
222
  /**
201
223
  * @ignore
202
224
  */
@@ -213,12 +235,16 @@ declare class AXCalendarRangeComponent extends AXCalendarRangeComponent_base imp
213
235
  * @ignore
214
236
  */
215
237
  private _syncNav1;
238
+ /**
239
+ * @ignore
240
+ */
241
+ protected handleCalendar2Navigate(): void;
216
242
  /**
217
243
  * @ignore
218
244
  */
219
245
  private _syncNav2;
220
246
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCalendarRangeComponent, never>;
221
- 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; }; "holidays": { "alias": "holidays"; "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>;
247
+ 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; }; "holidays": { "alias": "holidays"; "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, ["ax-footer"], true, never>;
222
248
  }
223
249
 
224
250
  declare const AXCalendarComponent_base: polytype.Polytype.ClusteredConstructor<[{
@@ -255,8 +281,11 @@ declare class AXCalendarComponent extends AXCalendarComponent_base {
255
281
  holidays: _angular_core.InputSignal<AXCalendarHolidaysLoader>;
256
282
  protected readonly isRtl: _angular_core.Signal<boolean>;
257
283
  protected calendar: _angular_core.WritableSignal<string>;
284
+ /** Explicit `type` input wins over the locale profile calendar. */
285
+ protected calendarSystem: _angular_core.Signal<string>;
258
286
  /** Week column order from the active locale profile (0 = Sun … 6 = Sat). */
259
287
  protected weekLayout: _angular_core.Signal<number[]>;
288
+ protected weekdayLabel(index: number): string;
260
289
  get displayRange(): AXDateTimeRange | null;
261
290
  /**
262
291
  * @ignore
@@ -317,10 +346,6 @@ declare class AXCalendarComponent extends AXCalendarComponent_base {
317
346
  * @ignore
318
347
  */
319
348
  private _initValues;
320
- /**
321
- * Maps a date to a 1-based grid column using the active week layout.
322
- */
323
- private _getWeekColumn;
324
349
  /**
325
350
  * Defers refresh so explicit `type` input can sync after locale profile changes.
326
351
  */
@@ -345,6 +370,7 @@ declare class AXCalendarComponent extends AXCalendarComponent_base {
345
370
  * @ignore
346
371
  */
347
372
  private _updateSelectOptions;
373
+ private _createMonthDate;
348
374
  /**
349
375
  * @ignore
350
376
  */
@@ -357,6 +383,10 @@ declare class AXCalendarComponent extends AXCalendarComponent_base {
357
383
  * @ignore
358
384
  */
359
385
  private _getSelectBoxValue;
386
+ /**
387
+ * Builds the day grid for a single month (no leading/trailing days from adjacent months).
388
+ */
389
+ private _getDayGridRange;
360
390
  /**
361
391
  * @ignore
362
392
  */
@@ -486,6 +516,8 @@ declare class AXCalendarComponent extends AXCalendarComponent_base {
486
516
  * @ignore
487
517
  */
488
518
  protected getMonthName(date: AXDateTime, style: 'short' | 'long'): string;
519
+ private monthLabel;
520
+ private fallbackMonthName;
489
521
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCalendarComponent, never>;
490
522
  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; }; "yearRange": { "alias": "yearRange"; "required": false; "isSignal": true; }; "holidays": { "alias": "holidays"; "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>;
491
523
  }
@@ -1,7 +1,8 @@
1
1
  import * as _angular_core from '@angular/core';
2
- import { TemplateRef } from '@angular/core';
3
- import { NXValueComponent, AXStyleLookType, AXValueChangedEvent, AXFocusEvent, AXItemClickEvent, AXItemSelectedEvent, AXEvent } from '@acorex/cdk/common';
2
+ import { TemplateRef, ElementRef } from '@angular/core';
3
+ import { NXValueComponent, AXStyleLookType, AXValueChangedEvent, AXFocusEvent, AXItemClickEvent, AXItemSelectedEvent, AXEvent, AXHtmlEvent } from '@acorex/cdk/common';
4
4
  import { AXPopoverComponent } from '@acorex/components/popover';
5
+ import { AXSearchBoxComponent } from '@acorex/components/search-box';
5
6
  import { Combobox } from '@angular/aria/combobox';
6
7
  import { Listbox } from '@angular/aria/listbox';
7
8
  import { FormValueControl } from '@angular/forms/signals';
@@ -28,12 +29,14 @@ type AXComboBoxValue = string | number | (string | number)[] | null;
28
29
  * A minimal combo box for selecting one or more values from a list of items.
29
30
  *
30
31
  * Built on top of the `@angular/aria/combobox` directives, it supports two behaviors:
31
- * - `searchable="true"` (default): an input with typeahead filtering (matches `id`).
32
+ * - `searchable="true"` (default): an input with typeahead filtering (matches `id`). On small
33
+ * screens with `adaptivityEnabled`, the trigger is select-like and search moves into the actionsheet.
32
34
  * - `searchable="false"`: a select-like, non-editable trigger (same input; typing blocked without
33
35
  * Combobox `readonly`, so Tab focus and keyboard open/select keep working).
34
36
  *
35
37
  * With `multiple="true"`, selected values are shown as chips in the trigger and the popup stays
36
- * open while toggling items (same interaction model as `ax-lookup` multi-select).
38
+ * open while toggling items (same interaction model as `ax-lookup` multi-select). Backspace with
39
+ * an empty trigger input removes the last chip; repeated presses clear the whole selection.
37
40
  *
38
41
  * With `adaptivityEnabled` (default `true`), the list opens as a bottom actionsheet on small
39
42
  * screens instead of an anchored dropdown — the same alternate presentation as `ax-select-box`.
@@ -58,6 +61,7 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
58
61
  /**
59
62
  * Whether the combo box accepts typing and filters the list (`true`),
60
63
  * or is a select-like, non-editable trigger (`false`).
64
+ * On small screens with `adaptivityEnabled`, search is typed in the actionsheet instead of the trigger.
61
65
  */
62
66
  searchable: _angular_core.InputSignal<boolean>;
63
67
  /**
@@ -67,7 +71,8 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
67
71
  multiple: _angular_core.InputSignal<boolean>;
68
72
  /**
69
73
  * When `true` (default), the popup list uses the alternate actionsheet presentation on small
70
- * screens (`SM`). When `false`, the list always opens as an anchored dropdown.
74
+ * screens (`SM`). Searchable mode then shows a search field inside the sheet. When `false`,
75
+ * the list always opens as an anchored dropdown.
71
76
  */
72
77
  adaptivityEnabled: _angular_core.InputSignal<boolean>;
73
78
  /**
@@ -83,10 +88,16 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
83
88
  */
84
89
  placeholder: _angular_core.InputSignal<string>;
85
90
  /**
86
- * Placeholder for the trigger search input when items are already selected (multi-select).
87
- * Falls back to `placeholder` when the selection is empty.
91
+ * Placeholder for the trigger search input when items are already selected (multi-select),
92
+ * and for the in-sheet search field on small screens. Falls back to `placeholder` when the
93
+ * selection is empty on desktop.
88
94
  */
89
95
  searchPlaceholder: _angular_core.InputSignal<string>;
96
+ /**
97
+ * When `true` (default), matching characters in popup result items are highlighted
98
+ * while the user searches.
99
+ */
100
+ highlightSearch: _angular_core.InputSignalWithTransform<boolean, unknown>;
90
101
  /**
91
102
  * Custom template rendered when the filtered list has no items.
92
103
  * When omitted, a default "no result found" message is shown.
@@ -154,6 +165,12 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
154
165
  protected expanded: _angular_core.WritableSignal<boolean>;
155
166
  /** Whether the list is currently shown as a bottom actionsheet (small screens + adaptivity). */
156
167
  protected isActionsheetStyle: _angular_core.WritableSignal<boolean>;
168
+ /** Whether the trigger input is writable and filters as you type (desktop searchable only). */
169
+ protected isEditableTrigger: _angular_core.Signal<boolean>;
170
+ /** Whether search is typed in the actionsheet instead of the trigger. */
171
+ protected isSheetSearchEnabled: _angular_core.Signal<boolean>;
172
+ /** Query typed in the actionsheet search field (independent of the trigger display text). */
173
+ protected sheetSearchText: _angular_core.WritableSignal<string>;
157
174
  /** The current selection normalized to an array of submitted values. */
158
175
  protected selectedValues: _angular_core.Signal<(string | number)[]>;
159
176
  /** Whether there is at least one selected value. */
@@ -175,11 +192,20 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
175
192
  protected triggerSearchPlaceholder: _angular_core.Signal<string>;
176
193
  /** The listbox selection (item ids), kept in sync with the selected value(s). */
177
194
  protected selection: _angular_core.WritableSignal<string[]>;
195
+ /** Active search query used for filtering and highlighting. */
196
+ protected searchQuery: _angular_core.Signal<string>;
197
+ /** Query passed to result-item highlighting (empty when disabled). */
198
+ protected highlightQuery: _angular_core.Signal<string>;
178
199
  /** Items filtered by typed query against `id` when the combo box is searchable. */
179
200
  protected filteredItems: _angular_core.Signal<AXComboBoxItem[]>;
201
+ /** Whether the filtered list is empty (empty-state vs hidden listbox). */
202
+ protected hasNoMatches: _angular_core.Signal<boolean>;
180
203
  protected comboboxRef: _angular_core.Signal<Combobox>;
181
204
  protected listboxRef: _angular_core.Signal<Listbox<any>>;
182
205
  protected popoverRef: _angular_core.Signal<AXPopoverComponent>;
206
+ protected originRef: _angular_core.Signal<ElementRef<HTMLElement>>;
207
+ protected popupRef: _angular_core.Signal<ElementRef<HTMLElement>>;
208
+ protected sheetSearchRef: _angular_core.Signal<AXSearchBoxComponent>;
183
209
  constructor();
184
210
  /** Stable unique key for `@for` — avoids NG0955 when `id` is missing or duplicated. */
185
211
  protected trackItemKey(index: number, item: AXComboBoxItem): string;
@@ -191,12 +217,24 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
191
217
  protected onTriggerClick(): void;
192
218
  /**
193
219
  * Keyboard handling on the trigger:
220
+ * - Searchable: Enter never submits the form; with no matches the value is cleared (`null`).
194
221
  * - Non-searchable: open with Enter/Space when collapsed; commit with Space when expanded.
195
- * - Multi-select: Backspace removes the last chip when the search input is empty.
222
+ * - Multi-select: Backspace with an empty trigger input removes the last chip; repeated presses
223
+ * clear the whole selection.
196
224
  */
197
225
  protected onTriggerKeydown(event: KeyboardEvent): void;
198
- /** Blocks typing in non-searchable mode without Combobox `readonly` (keeps Tab/keyboard working). */
226
+ /** Handles Enter in the actionsheet search field (no form submit; clear on no matches). */
227
+ protected onSheetSearchKeydown(e: AXHtmlEvent<KeyboardEvent>): void;
228
+ /** Blocks typing when the trigger is not editable (keeps Tab / keyboard open working). */
199
229
  protected onBeforeInput(event: Event): void;
230
+ /**
231
+ * Combobox `expanded` two-way binding. On actionsheet with in-sheet search, ignore collapse
232
+ * so focusing the search field (Aria combobox blur) does not close the popup. Dismiss is owned
233
+ * by the header Apply/close button, `commit()`, and Escape. On desktop, outside click also closes.
234
+ */
235
+ protected onExpandedChange(open: boolean): void;
236
+ /** Filters the list from the actionsheet search field (reads the input so delayed ngModel cannot block typing). */
237
+ protected onSheetSearchInput(): void;
200
238
  /**
201
239
  * Keeps the combobox expanded state in sync when the popover closes (e.g. click outside).
202
240
  */
@@ -227,7 +265,9 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
227
265
  * that option. Clicks resolve from the event target so we do not depend on listener order vs ngListbox.
228
266
  *
229
267
  * In multi-select mode the item is toggled and the popup stays open.
268
+ * When the user typed a query with no matches, Enter clears single-select to `null`.
230
269
  */
270
+ protected onListEnter(event: Event): void;
231
271
  protected commit(event?: Event): void;
232
272
  /**
233
273
  * Focuses the combo box trigger input.
@@ -238,7 +278,7 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
238
278
  /** Forwards native blur from the trigger input. */
239
279
  protected emitOnBlur(e: FocusEvent): void;
240
280
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXComboBoxComponent, never>;
241
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXComboBoxComponent, "ax-combo-box", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-header", "ax-footer", "ax-validation-rule"], true, never>;
281
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXComboBoxComponent, "ax-combo-box", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "highlightSearch": { "alias": "highlightSearch"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-header", "ax-footer", "ax-validation-rule"], true, never>;
242
282
  }
243
283
 
244
284
  declare class AXComboBoxModule {