@acorex/components 19.11.0-next.2 → 19.11.0-next.3

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 (75) hide show
  1. package/autocomplete/README.md +3 -0
  2. package/autocomplete/index.d.ts +2 -0
  3. package/autocomplete/lib/autocomplete.component.d.ts +113 -0
  4. package/autocomplete/lib/autocomplete.module.d.ts +7 -0
  5. package/common/lib/classes/components.class.d.ts +14 -1
  6. package/data-table/lib/columns/row-select-column.component.d.ts +8 -7
  7. package/dropdown/lib/dropdown-box.component.d.ts +2 -1
  8. package/dropdown/lib/dropdown-panel.component.d.ts +3 -1
  9. package/dropdown-button/lib/dropdown-button.component.d.ts +1 -1
  10. package/fesm2022/acorex-components-autocomplete.mjs +317 -0
  11. package/fesm2022/acorex-components-autocomplete.mjs.map +1 -0
  12. package/fesm2022/acorex-components-color-box.mjs +1 -1
  13. package/fesm2022/acorex-components-color-box.mjs.map +1 -1
  14. package/fesm2022/acorex-components-common.mjs +650 -610
  15. package/fesm2022/acorex-components-common.mjs.map +1 -1
  16. package/fesm2022/acorex-components-conversation.mjs +2 -2
  17. package/fesm2022/acorex-components-conversation.mjs.map +1 -1
  18. package/fesm2022/acorex-components-data-pager.mjs +13 -16
  19. package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
  20. package/fesm2022/acorex-components-data-table.mjs +52 -29
  21. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  22. package/fesm2022/acorex-components-datetime-box.mjs +1 -1
  23. package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
  24. package/fesm2022/acorex-components-dropdown-button.mjs +2 -2
  25. package/fesm2022/acorex-components-dropdown-button.mjs.map +1 -1
  26. package/fesm2022/acorex-components-dropdown.mjs +12 -4
  27. package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
  28. package/fesm2022/acorex-components-grid-layout-builder.mjs +122 -507
  29. package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
  30. package/fesm2022/acorex-components-image-editor.mjs +303 -172
  31. package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
  32. package/fesm2022/acorex-components-loading.mjs +2 -2
  33. package/fesm2022/acorex-components-loading.mjs.map +1 -1
  34. package/fesm2022/acorex-components-map.mjs +6 -16
  35. package/fesm2022/acorex-components-map.mjs.map +1 -1
  36. package/fesm2022/acorex-components-media-viewer.mjs +2 -2
  37. package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
  38. package/fesm2022/acorex-components-query-builder.mjs +19 -8
  39. package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
  40. package/fesm2022/acorex-components-scheduler.mjs +1 -1
  41. package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
  42. package/fesm2022/acorex-components-select-box.mjs +1 -1
  43. package/fesm2022/acorex-components-select-box.mjs.map +1 -1
  44. package/fesm2022/acorex-components-tag-box.mjs +121 -0
  45. package/fesm2022/acorex-components-tag-box.mjs.map +1 -0
  46. package/fesm2022/acorex-components-tag.mjs +2 -2
  47. package/fesm2022/acorex-components-tag.mjs.map +1 -1
  48. package/fesm2022/acorex-components-text-box.mjs +2 -2
  49. package/fesm2022/acorex-components-text-box.mjs.map +1 -1
  50. package/grid-layout-builder/index.d.ts +0 -1
  51. package/grid-layout-builder/lib/grid-layout-builder.module.d.ts +1 -2
  52. package/grid-layout-builder/lib/grid-layout-container.component.d.ts +34 -188
  53. package/grid-layout-builder/lib/grid-layout-widget.component.d.ts +4 -56
  54. package/grid-layout-builder/lib/types.d.ts +8 -12
  55. package/image-editor/index.d.ts +7 -2
  56. package/image-editor/lib/image-editor-container/image-editor-container.component.d.ts +4 -1
  57. package/image-editor/lib/image-editor-tools/image-editor-crop/image-editor-crop.component.d.ts +3 -8
  58. package/image-editor/lib/image-editor-tools/image-editor-header/image-editor-header.component.d.ts +12 -0
  59. package/image-editor/lib/image-editor-tools/image-editor-highlight/image-editor-highlight.component.d.ts +18 -0
  60. package/image-editor/lib/image-editor-tools/image-editor-history/image-editor-history.component.d.ts +13 -0
  61. package/image-editor/lib/image-editor-tools/image-editor-pen/image-editor-pen.component.d.ts +18 -0
  62. package/image-editor/lib/image-editor-tools/image-editor-rotate/image-editor-rotate.component.d.ts +16 -0
  63. package/image-editor/lib/image-editor-tools/image-editor-tool-selector/image-editor-tool-selector.component.d.ts +12 -0
  64. package/image-editor/lib/image-editor-view/image-editor-view.component.d.ts +7 -1
  65. package/image-editor/lib/image-editor.module.d.ts +10 -6
  66. package/image-editor/lib/image-editor.service.d.ts +6 -10
  67. package/package.json +9 -1
  68. package/query-builder/lib/query-builder.component.d.ts +5 -2
  69. package/tag-box/README.md +3 -0
  70. package/tag-box/index.d.ts +2 -0
  71. package/tag-box/lib/tag-box.component.d.ts +30 -0
  72. package/tag-box/lib/tag-box.module.d.ts +7 -0
  73. package/grid-layout-builder/lib/grid-layout-widget.directive.d.ts +0 -106
  74. package/image-editor/lib/image-editor-tools/image-editor-color-picker/image-editor-color-picker.component.d.ts +0 -17
  75. package/image-editor/lib/image-editor-tools/image-editor-pen-mode-changer/image-editor-pen-mode-changer.component.d.ts +0 -34
@@ -0,0 +1,3 @@
1
+ # @acorex/components/autocomplete
2
+
3
+ Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/autocomplete`.
@@ -0,0 +1,2 @@
1
+ export * from './lib/autocomplete.component';
2
+ export * from './lib/autocomplete.module';
@@ -0,0 +1,113 @@
1
+ import { AXAutocompleteParentComponent, AXDataSource, AXEvent, AXValueChangedEvent, MXLookComponent, MXSelectionBridgeService, MXSelectionValueComponent } from '@acorex/components/common';
2
+ import { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';
3
+ import { AXListComponent } from '@acorex/components/list';
4
+ import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
5
+ import * as i0 from "@angular/core";
6
+ declare const AXAutocompleteComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXDropdownBoxBaseComponent, typeof MXSelectionValueComponent, typeof MXLookComponent]>;
7
+ /**
8
+ * The Button is a component which detects user interaction and triggers a corresponding event
9
+ * @category
10
+ */
11
+ export declare class AXAutocompleteComponent extends AXAutocompleteComponent_base implements AfterViewInit, OnDestroy {
12
+ delayTime: import("@angular/core").InputSignal<number>;
13
+ protected inputValue: import("@angular/core").WritableSignal<string>;
14
+ protected isLoading: import("@angular/core").WritableSignal<boolean>;
15
+ /** @ignore */
16
+ protected renderList: boolean;
17
+ /** @ignore */
18
+ protected dropdownSizes: {
19
+ width: string;
20
+ height: string;
21
+ };
22
+ /** @ignore */
23
+ protected _listDataSource: AXDataSource<any>;
24
+ /** @ignore */
25
+ private _dataSource;
26
+ /** @ignore */
27
+ private onChangedSubscription;
28
+ /**
29
+ * Gets the data source for the component, which can be either an `AXDataSource` or an array of items.
30
+ * @returns {AXDataSource<any> | any[]}
31
+ */
32
+ get dataSource(): AXDataSource<any> | any[];
33
+ /**
34
+ * Sets the data source, either as `AXDataSource` or an array. Converts arrays to `AXDataSource` and subscribes to data and loading changes.
35
+ * @param {AXDataSource<any> | any[]} v
36
+ */
37
+ set dataSource(v: AXDataSource<any> | any[]);
38
+ /**
39
+ * The placeholder text displayed when the component is empty.
40
+ * @param {string} placeholder
41
+ */
42
+ placeholder: string;
43
+ /**
44
+ * The caption text to be displayed in the component.
45
+ * @param {string} caption
46
+ */
47
+ caption: string;
48
+ /**
49
+ * The template used to customize the rendering of items.
50
+ * @param {TemplateRef<any>} itemTemplate
51
+ */
52
+ itemTemplate: TemplateRef<any>;
53
+ /**
54
+ * The template used to customize the rendering of selected items.
55
+ * @param {TemplateRef<any>} selectedTemplate
56
+ */
57
+ selectedTemplate: TemplateRef<any>;
58
+ /**
59
+ * The template used to display when there are no items.
60
+ * @param {TemplateRef<any>} emptyTemplate
61
+ */
62
+ emptyTemplate: TemplateRef<any>;
63
+ /**
64
+ * The template used to display while loading.
65
+ * @param {TemplateRef<any>} loadingTemplate
66
+ */
67
+ loadingTemplate: TemplateRef<any>;
68
+ /**
69
+ * The width of the dropdown in pixels.
70
+ * @defaultValue 260
71
+ */
72
+ dropdownWidth: number;
73
+ /** @ignore */
74
+ list: AXListComponent;
75
+ /** @ignore */
76
+ protected dropdown: AXDropdownBoxComponent;
77
+ /**
78
+ * Service for managing selection data, injected via `AX_SELECTION_DATA_TOKEN`.
79
+ */
80
+ selectionService: MXSelectionBridgeService;
81
+ /** @ignore */
82
+ private _unsubscriber;
83
+ parent: AXAutocompleteParentComponent;
84
+ /** @ignore */
85
+ ngAfterViewInit(): void;
86
+ /** @ignore */
87
+ ngOnDestroy(): void;
88
+ /**
89
+ * Retrieves an item by its key.
90
+ * @param {any} key
91
+ */
92
+ getItemByKey(key: any): Promise<any> | any;
93
+ /** @ignore */
94
+ protected _handleOnOpenedEvent(e: AXEvent): void;
95
+ /** @ignore */
96
+ protected _handleOnClosedEvent(e: AXEvent): void;
97
+ /** @ignore */
98
+ protected _handleValueChanged(e: AXValueChangedEvent): void;
99
+ /** @ignore */
100
+ private setDropdownSize;
101
+ /**
102
+ * Filters the data source based on the provided search term.
103
+ * @param {string} term
104
+ */
105
+ search(term: string): void;
106
+ /**
107
+ * Refreshes the component by resetting state, clearing selection cache, refreshing the list, and closing the component.
108
+ */
109
+ refresh(): void;
110
+ static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteComponent, never>;
111
+ static ɵcmp: i0.ɵɵComponentDeclaration<AXAutocompleteComponent, "ax-autocomplete", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "delayTime": { "alias": "delayTime"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-footer"], true, never>;
112
+ }
113
+ export {};
@@ -0,0 +1,7 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./autocomplete.component";
3
+ export declare class AXAutocompleteModule {
4
+ static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteModule, never>;
5
+ static ɵmod: i0.ɵɵNgModuleDeclaration<AXAutocompleteModule, never, [typeof i1.AXAutocompleteComponent], [typeof i1.AXAutocompleteComponent]>;
6
+ static ɵinj: i0.ɵɵInjectorDeclaration<AXAutocompleteModule>;
7
+ }
@@ -1,6 +1,8 @@
1
+ import { AXUnsubscriber } from '@acorex/core/utils';
1
2
  import { AXValidationRuleOptions, AXValidationSummary } from '@acorex/core/validation';
2
3
  import { EventEmitter } from '@angular/core';
3
- import { AXEvent, AXValueChangedEvent } from './events.class';
4
+ import { MXValueComponent } from '../components/value-component.class';
5
+ import { AXEvent, AXHtmlEvent, AXValueChangedEvent } from './events.class';
4
6
  import * as i0 from "@angular/core";
5
7
  export declare const TAB_META_KEY = "__meta__";
6
8
  export declare class AXComponentCloseEvent extends AXEvent {
@@ -83,3 +85,14 @@ export declare abstract class AXPagedComponent extends AXComponent implements AX
83
85
  static ɵfac: i0.ɵɵFactoryDeclaration<AXPagedComponent, never>;
84
86
  static ɵprov: i0.ɵɵInjectableDeclaration<AXPagedComponent>;
85
87
  }
88
+ export declare abstract class AXAutocompleteParentComponent extends MXValueComponent {
89
+ oldInputValue: string;
90
+ abstract _unsubscriber: AXUnsubscriber;
91
+ onKeyDown: EventEmitter<AXHtmlEvent<KeyboardEvent>>;
92
+ onInputValueEmit: EventEmitter<AXValueChangedEvent<string>>;
93
+ onInputValueChanged: EventEmitter<AXValueChangedEvent<string>>;
94
+ handleInputValueChanged(value: string, isUserInteraction?: boolean): void;
95
+ handleInputValueEmit(value: string, isUserInteraction?: boolean): void;
96
+ static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteParentComponent, never>;
97
+ static ɵprov: i0.ɵɵInjectableDeclaration<AXAutocompleteParentComponent>;
98
+ }
@@ -1,3 +1,4 @@
1
+ import { AXValueChangedEvent } from '@acorex/components/common';
1
2
  import { TemplateRef } from '@angular/core';
2
3
  import { AXDataTableColumnComponent } from './data-table-column';
3
4
  import * as i0 from "@angular/core";
@@ -47,23 +48,23 @@ export declare class AXRowSelectColumnComponent extends AXDataTableColumnCompone
47
48
  /**
48
49
  * @ignore
49
50
  */
50
- protected checkAllSelected(rows: any): any;
51
+ protected checkAllSelected(rows: any): boolean;
51
52
  /**
52
53
  * @ignore
53
54
  */
54
- protected checkAnySelected(rows: any): any;
55
+ protected handleChange(e: AXValueChangedEvent, item: unknown): void;
55
56
  /**
56
57
  * @ignore
57
58
  */
58
- protected handleChange(item: unknown): void;
59
- /**
60
- * @ignore
61
- */
62
- protected handleSelectAll(rows: any): void;
59
+ protected handleSelectAll(e: AXValueChangedEvent, rows: any): void;
63
60
  /**
64
61
  * Indicates whether loading is enabled for the column.
65
62
  */
66
63
  get loadingEnabled(): boolean;
64
+ /**
65
+ * Gets the CSS class applied to the component.
66
+ */
67
+ get cssClass(): string | undefined;
67
68
  static ɵfac: i0.ɵɵFactoryDeclaration<AXRowSelectColumnComponent, never>;
68
69
  static ɵcmp: i0.ɵɵComponentDeclaration<AXRowSelectColumnComponent, "ax-select-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; }, {}, never, never, true, never>;
69
70
  }
@@ -4,6 +4,7 @@ import { EventEmitter, OnInit } from '@angular/core';
4
4
  import * as i0 from "@angular/core";
5
5
  declare const AXDropdownBoxComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXLookComponent]>;
6
6
  export declare class AXDropdownBoxComponent extends AXDropdownBoxComponent_base implements OnInit {
7
+ hasInput: import("@angular/core").InputSignal<boolean>;
7
8
  private _platform;
8
9
  /**
9
10
  * @ignore
@@ -91,6 +92,6 @@ export declare class AXDropdownBoxComponent extends AXDropdownBoxComponent_base
91
92
  */
92
93
  private get __hostClass();
93
94
  static ɵfac: i0.ɵɵFactoryDeclaration<AXDropdownBoxComponent, never>;
94
- static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownBoxComponent, "ax-dropdown-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "disabledChange": "disabledChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["[input]", "[panel]"], true, never>;
95
+ static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownBoxComponent, "ax-dropdown-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "look": { "alias": "look"; "required": false; }; "hasInput": { "alias": "hasInput"; "required": false; "isSignal": true; }; }, { "disabledChange": "disabledChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["[input]", "[panel]"], true, never>;
95
96
  }
96
97
  export {};
@@ -9,6 +9,7 @@ import * as i0 from "@angular/core";
9
9
  * @category Components
10
10
  */
11
11
  export declare class AXDropdownPanelComponent extends MXInteractiveComponent implements OnDestroy {
12
+ #private;
12
13
  private _platform;
13
14
  /**
14
15
  * @ignore
@@ -22,6 +23,7 @@ export declare class AXDropdownPanelComponent extends MXInteractiveComponent imp
22
23
  * @ignore
23
24
  */
24
25
  protected _placement: import("@acorex/components/common").AXConnectedPosition[];
26
+ placement: import("@angular/core").InputSignal<"bottom-start" | "bottom-end">;
25
27
  /**
26
28
  * @ignore
27
29
  */
@@ -114,5 +116,5 @@ export declare class AXDropdownPanelComponent extends MXInteractiveComponent imp
114
116
  */
115
117
  private get __hostClass();
116
118
  static ɵfac: i0.ɵɵFactoryDeclaration<AXDropdownPanelComponent, never>;
117
- static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownPanelComponent, "ax-dropdown-panel", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "fitParent": { "alias": "fitParent"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; "position": { "alias": "position"; "required": false; }; "_target": { "alias": "_target"; "required": false; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; }; }, { "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["*"], true, never>;
119
+ static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownPanelComponent, "ax-dropdown-panel", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "fitParent": { "alias": "fitParent"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; "position": { "alias": "position"; "required": false; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "_target": { "alias": "_target"; "required": false; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; }; }, { "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["*"], true, never>;
118
120
  }
@@ -63,5 +63,5 @@ export declare class AXDropdownButtonComponent extends MXButtonBaseComponent imp
63
63
  close(): void;
64
64
  private get __hostClass();
65
65
  static ɵfac: i0.ɵɵFactoryDeclaration<AXDropdownButtonComponent, never>;
66
- static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownButtonComponent, "ax-dropdown-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; }, never, ["*", "ax-prefix, ax-loading, ax-loading-spinner"], true, never>;
66
+ static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownButtonComponent, "ax-dropdown-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; }, never, ["ax-button-item-list", "ax-prefix, ax-loading, ax-loading-spinner"], true, never>;
67
67
  }
@@ -0,0 +1,317 @@
1
+ import { MXSelectionValueComponent, MXLookComponent, convertArrayToDataSource, AX_SELECTION_DATA_TOKEN, AXAutocompleteParentComponent, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent, AXClosbaleComponent, AXSearchableComponent, MXSelectionBridgeService } from '@acorex/components/common';
2
+ import { AXDecoratorGenericComponent, AXDecoratorCloseButtonComponent } from '@acorex/components/decorators';
3
+ import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
4
+ import { AXListComponent } from '@acorex/components/list';
5
+ import { AXLoadingComponent } from '@acorex/components/loading';
6
+ import { AXTranslatorPipe } from '@acorex/core/translation';
7
+ import { AXUnsubscriber } from '@acorex/core/utils';
8
+ import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
9
+ import * as i0 from '@angular/core';
10
+ import { input, signal, inject, forwardRef, ViewChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
11
+ import * as i1 from '@angular/forms';
12
+ import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
13
+ import { classes } from 'polytype';
14
+ import { debounceTime } from 'rxjs';
15
+
16
+ /**
17
+ * The Button is a component which detects user interaction and triggers a corresponding event
18
+ * @category
19
+ */
20
+ class AXAutocompleteComponent extends classes(MXDropdownBoxBaseComponent, MXSelectionValueComponent, MXLookComponent) {
21
+ constructor() {
22
+ super(...arguments);
23
+ this.delayTime = input(300);
24
+ this.inputValue = signal('');
25
+ this.isLoading = signal(false);
26
+ /** @ignore */
27
+ this.renderList = false;
28
+ /** @ignore */
29
+ this.dropdownSizes = {
30
+ width: '100%',
31
+ height: 'auto',
32
+ };
33
+ /** @ignore */
34
+ this._listDataSource = convertArrayToDataSource([], {
35
+ key: this.valueField,
36
+ pageSize: 10,
37
+ });
38
+ /**
39
+ * The width of the dropdown in pixels.
40
+ * @defaultValue 260
41
+ */
42
+ this.dropdownWidth = 260;
43
+ /**
44
+ * Service for managing selection data, injected via `AX_SELECTION_DATA_TOKEN`.
45
+ */
46
+ this.selectionService = inject(AX_SELECTION_DATA_TOKEN);
47
+ /** @ignore */
48
+ this._unsubscriber = inject(AXUnsubscriber);
49
+ this.parent = inject(AXAutocompleteParentComponent);
50
+ }
51
+ /**
52
+ * Gets the data source for the component, which can be either an `AXDataSource` or an array of items.
53
+ * @returns {AXDataSource<any> | any[]}
54
+ */
55
+ get dataSource() {
56
+ return this._dataSource;
57
+ }
58
+ /**
59
+ * Sets the data source, either as `AXDataSource` or an array. Converts arrays to `AXDataSource` and subscribes to data and loading changes.
60
+ * @param {AXDataSource<any> | any[]} v
61
+ */
62
+ set dataSource(v) {
63
+ this._dataSource = v;
64
+ if (Array.isArray(v)) {
65
+ this._listDataSource = convertArrayToDataSource(v, {
66
+ key: this.valueField,
67
+ pageSize: 10,
68
+ });
69
+ }
70
+ else {
71
+ this._listDataSource = this.dataSource;
72
+ }
73
+ //
74
+ this.onChangedSubscription = this._listDataSource.onChanged.subscribe((data) => {
75
+ this.setDropdownSize(data.totalCount);
76
+ });
77
+ this._listDataSource.onLoadingChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe((loading) => {
78
+ this.isLoading.set(loading);
79
+ });
80
+ }
81
+ /** @ignore */
82
+ ngAfterViewInit() {
83
+ this.setDropdownSize();
84
+ this.registerValidation();
85
+ this.parent.onInputValueChanged.pipe(debounceTime(this.delayTime()), this.parent._unsubscriber.takeUntilDestroy).subscribe((e) => {
86
+ if (!e.isUserInteraction)
87
+ return;
88
+ this.inputValue.set(e.value);
89
+ if (!e.value) {
90
+ this.close();
91
+ return;
92
+ }
93
+ this.search(e.value);
94
+ this.open();
95
+ });
96
+ this.parent.onKeyDown.pipe(this.parent._unsubscriber.takeUntilDestroy).subscribe((e) => {
97
+ if (e.nativeEvent.key === 'ArrowDown') {
98
+ this.search(this.inputValue());
99
+ this.open();
100
+ this.list.focus();
101
+ }
102
+ });
103
+ }
104
+ /** @ignore */
105
+ ngOnDestroy() {
106
+ this.onChangedSubscription.unsubscribe();
107
+ }
108
+ /**
109
+ * Retrieves an item by its key.
110
+ * @param {any} key
111
+ */
112
+ getItemByKey(key) {
113
+ const startTime = Date.now();
114
+ const check = async () => {
115
+ while (Date.now() - startTime < 2000) {
116
+ if (typeof this._listDataSource.find === 'function') {
117
+ return this._listDataSource.find(key);
118
+ }
119
+ else {
120
+ await new Promise((resolve) => setTimeout(resolve, 50));
121
+ }
122
+ }
123
+ console.warn('Timeout reached without finding the "getItemByKey" method');
124
+ };
125
+ return check();
126
+ }
127
+ /** @ignore */
128
+ _handleOnOpenedEvent(e) {
129
+ if (!this.renderList) {
130
+ this.renderList = true;
131
+ this.list?.render();
132
+ }
133
+ else if (!this._listDataSource.totalCount || this._listDataSource.totalCount == 0) {
134
+ this.list?.refresh(false);
135
+ }
136
+ //
137
+ this.onOpened.emit({
138
+ component: this,
139
+ isUserInteraction: e.isUserInteraction,
140
+ });
141
+ }
142
+ /** @ignore */
143
+ _handleOnClosedEvent(e) {
144
+ this.parent.focus();
145
+ this.onClosed.emit({
146
+ component: this,
147
+ isUserInteraction: e.isUserInteraction,
148
+ });
149
+ this._unsubscriber.unsubscribe();
150
+ }
151
+ /** @ignore */
152
+ _handleValueChanged(e) {
153
+ if (e.isUserInteraction) {
154
+ if (!this.multiple) {
155
+ this.close();
156
+ }
157
+ this.parent.handleInputValueEmit(e.value, true);
158
+ }
159
+ }
160
+ /** @ignore */
161
+ setDropdownSize(count = 0) {
162
+ if (this.dropdown.isActionsheetStyle) {
163
+ this.dropdownSizes = {
164
+ width: '100%',
165
+ height: ['auto', '0px'].includes(this.dropdownSizes.height) ? `${Math.min(15, count) * 40}px` : this.dropdownSizes.height,
166
+ };
167
+ }
168
+ else {
169
+ const hostWidth = Math.max(this.parent.getHostElement().offsetWidth, this.dropdownWidth);
170
+ this.dropdownSizes = {
171
+ width: `${hostWidth}px`,
172
+ height: count == 0 ? 'auto' : `${Math.min(5, count) * 40}px`,
173
+ };
174
+ }
175
+ setTimeout(() => {
176
+ this.dropdown.updatePosition();
177
+ });
178
+ }
179
+ /**
180
+ * Filters the data source based on the provided search term.
181
+ * @param {string} term
182
+ */
183
+ search(term) {
184
+ if (term) {
185
+ this._listDataSource.filter({
186
+ field: this.textField,
187
+ value: term,
188
+ operator: { type: 'contains' },
189
+ });
190
+ }
191
+ else {
192
+ this._listDataSource.clearFilter();
193
+ }
194
+ this._listDataSource.refresh();
195
+ }
196
+ /**
197
+ * Refreshes the component by resetting state, clearing selection cache, refreshing the list, and closing the component.
198
+ */
199
+ refresh() {
200
+ this.reset(false);
201
+ this.clearSelectionCache();
202
+ this.list?.refresh();
203
+ this.close();
204
+ }
205
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
206
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXAutocompleteComponent, isStandalone: true, selector: "ax-autocomplete", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: false, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: false, isRequired: false, transformFunction: null }, textTemplate: { classPropertyName: "textTemplate", publicName: "textTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, delayTime: { classPropertyName: "delayTime", publicName: "delayTime", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", isSignal: false, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: false, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: false, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onOpened: "onOpened", onClosed: "onClosed" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
207
+ { provide: AXComponent, useExisting: AXAutocompleteComponent },
208
+ { provide: AXFocusableComponent, useExisting: AXAutocompleteComponent },
209
+ { provide: AXValuableComponent, useExisting: AXAutocompleteComponent },
210
+ { provide: AXClearableComponent, useExisting: AXAutocompleteComponent },
211
+ { provide: AXClosbaleComponent, useExisting: AXAutocompleteComponent },
212
+ { provide: AXSearchableComponent, useExisting: AXAutocompleteComponent },
213
+ {
214
+ provide: NG_VALUE_ACCESSOR,
215
+ useExisting: forwardRef(() => AXAutocompleteComponent),
216
+ multi: true,
217
+ },
218
+ {
219
+ provide: AX_SELECTION_DATA_TOKEN,
220
+ useClass: MXSelectionBridgeService,
221
+ },
222
+ AXUnsubscriber,
223
+ ], viewQueries: [{ propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n [look]=\"look\"\n [hasInput]=\"false\"\n [disabled]=\"disabled\"\n (blur)=\"emitOnBlurEvent($event)\"\n (focus)=\"emitOnFocusEvent($event)\"\n [class.ax-state-multiple]=\"multiple\"\n (onOpened)=\"_handleOnOpenedEvent($event)\"\n (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n <ng-container panel>\n <div #panel class=\"ax-autocomplete-panel\" [style.min-width]=\"dropdownSizes.width\">\n @if (dropdown.isActionsheetStyle) {\n <ax-header class=\"ax-solid\">\n <ax-title>{{ caption || placeholder || 'autocomplete.popover.title' | translate | async }}</ax-title>\n <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n </ax-header>\n }\n @if (renderList) {\n <ax-list\n [ngModel]=\"value\"\n [readonly]=\"readonly\"\n [multiple]=\"multiple\"\n [textField]=\"textField\"\n [selectionMode]=\"'item'\"\n [valueField]=\"valueField\"\n [textTemplate]=\"textTemplate\"\n [itemTemplate]=\"itemTemplate\"\n [dataSource]=\"_listDataSource\"\n [loadingTemplate]=\"loadingTemplate\"\n [style.height]=\"dropdownSizes.height\"\n [emptyTemplate]=\"emptyTemplate ?? empty\"\n (onValueChanged)=\"_handleValueChanged($event)\"\n >\n <ng-template #empty> {{ 'no-result-found' | translate | async }} </ng-template>\n </ax-list>\n }\n\n @if (isLoading()) {\n @if (loadingTemplate) {\n <ng-template *ngTemplateOutlet=\"loadingTemplate\"></ng-template>\n } @else {\n <div class=\"ax-autocomplete-loading-container\">\n <ax-loading></ax-loading>\n </div>\n }\n }\n\n <ng-content select=\"ax-footer\"> </ng-content>\n </div>\n </ng-container>\n</ax-dropdown-box>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readOnlyChange", "onBlur", "onFocus", "onItemClick", "onScrolledIndexChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
224
+ }
225
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteComponent, decorators: [{
226
+ type: Component,
227
+ args: [{ selector: 'ax-autocomplete', inputs: [
228
+ 'disabled',
229
+ 'readonly',
230
+ 'tabIndex',
231
+ 'placeholder',
232
+ 'minValue',
233
+ 'maxValue',
234
+ 'value',
235
+ 'state',
236
+ 'name',
237
+ 'id',
238
+ 'type',
239
+ 'look',
240
+ 'multiple',
241
+ 'valueField',
242
+ 'textField',
243
+ 'disabledField',
244
+ 'textTemplate',
245
+ 'selectedItems',
246
+ ], outputs: ['valueChange', 'stateChange', 'onValueChanged', 'onBlur', 'onFocus', 'readonlyChange', 'disabledChange', 'onOpened', 'onClosed'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
247
+ { provide: AXComponent, useExisting: AXAutocompleteComponent },
248
+ { provide: AXFocusableComponent, useExisting: AXAutocompleteComponent },
249
+ { provide: AXValuableComponent, useExisting: AXAutocompleteComponent },
250
+ { provide: AXClearableComponent, useExisting: AXAutocompleteComponent },
251
+ { provide: AXClosbaleComponent, useExisting: AXAutocompleteComponent },
252
+ { provide: AXSearchableComponent, useExisting: AXAutocompleteComponent },
253
+ {
254
+ provide: NG_VALUE_ACCESSOR,
255
+ useExisting: forwardRef(() => AXAutocompleteComponent),
256
+ multi: true,
257
+ },
258
+ {
259
+ provide: AX_SELECTION_DATA_TOKEN,
260
+ useClass: MXSelectionBridgeService,
261
+ },
262
+ AXUnsubscriber,
263
+ ], host: { ngSkipHydration: 'true' }, imports: [
264
+ AsyncPipe,
265
+ FormsModule,
266
+ AXListComponent,
267
+ NgTemplateOutlet,
268
+ AXTranslatorPipe,
269
+ AXLoadingComponent,
270
+ AXDropdownBoxComponent,
271
+ AXDecoratorGenericComponent,
272
+ AXDecoratorCloseButtonComponent,
273
+ ], template: "<ax-dropdown-box\n [look]=\"look\"\n [hasInput]=\"false\"\n [disabled]=\"disabled\"\n (blur)=\"emitOnBlurEvent($event)\"\n (focus)=\"emitOnFocusEvent($event)\"\n [class.ax-state-multiple]=\"multiple\"\n (onOpened)=\"_handleOnOpenedEvent($event)\"\n (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n <ng-container panel>\n <div #panel class=\"ax-autocomplete-panel\" [style.min-width]=\"dropdownSizes.width\">\n @if (dropdown.isActionsheetStyle) {\n <ax-header class=\"ax-solid\">\n <ax-title>{{ caption || placeholder || 'autocomplete.popover.title' | translate | async }}</ax-title>\n <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n </ax-header>\n }\n @if (renderList) {\n <ax-list\n [ngModel]=\"value\"\n [readonly]=\"readonly\"\n [multiple]=\"multiple\"\n [textField]=\"textField\"\n [selectionMode]=\"'item'\"\n [valueField]=\"valueField\"\n [textTemplate]=\"textTemplate\"\n [itemTemplate]=\"itemTemplate\"\n [dataSource]=\"_listDataSource\"\n [loadingTemplate]=\"loadingTemplate\"\n [style.height]=\"dropdownSizes.height\"\n [emptyTemplate]=\"emptyTemplate ?? empty\"\n (onValueChanged)=\"_handleValueChanged($event)\"\n >\n <ng-template #empty> {{ 'no-result-found' | translate | async }} </ng-template>\n </ax-list>\n }\n\n @if (isLoading()) {\n @if (loadingTemplate) {\n <ng-template *ngTemplateOutlet=\"loadingTemplate\"></ng-template>\n } @else {\n <div class=\"ax-autocomplete-loading-container\">\n <ax-loading></ax-loading>\n </div>\n }\n }\n\n <ng-content select=\"ax-footer\"> </ng-content>\n </div>\n </ng-container>\n</ax-dropdown-box>\n" }]
274
+ }], propDecorators: { dataSource: [{
275
+ type: Input
276
+ }], placeholder: [{
277
+ type: Input
278
+ }], caption: [{
279
+ type: Input
280
+ }], itemTemplate: [{
281
+ type: Input
282
+ }], selectedTemplate: [{
283
+ type: Input
284
+ }], emptyTemplate: [{
285
+ type: Input
286
+ }], loadingTemplate: [{
287
+ type: Input
288
+ }], dropdownWidth: [{
289
+ type: Input
290
+ }], list: [{
291
+ type: ViewChild,
292
+ args: [AXListComponent]
293
+ }], dropdown: [{
294
+ type: ViewChild,
295
+ args: [AXDropdownBoxComponent, { static: true }]
296
+ }] } });
297
+
298
+ class AXAutocompleteModule {
299
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
300
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteModule, imports: [AXAutocompleteComponent], exports: [AXAutocompleteComponent] }); }
301
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteModule, imports: [AXAutocompleteComponent] }); }
302
+ }
303
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteModule, decorators: [{
304
+ type: NgModule,
305
+ args: [{
306
+ imports: [AXAutocompleteComponent],
307
+ exports: [AXAutocompleteComponent],
308
+ providers: [],
309
+ }]
310
+ }] });
311
+
312
+ /**
313
+ * Generated bundle index. Do not edit.
314
+ */
315
+
316
+ export { AXAutocompleteComponent, AXAutocompleteModule };
317
+ //# sourceMappingURL=acorex-components-autocomplete.mjs.map