@acorex/components 20.3.16 → 20.3.18
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.
- package/action-sheet/index.d.ts +92 -32
- package/fesm2022/acorex-components-action-sheet.mjs +161 -43
- package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
- package/fesm2022/acorex-components-tooltip.mjs +45 -43
- package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
- package/package.json +7 -7
- package/tooltip/index.d.ts +1 -4
package/action-sheet/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { TemplateRef, Type, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
|
|
1
3
|
import { AXStyleColorType, AXComponentCloseEvent, MXBaseComponent } from '@acorex/cdk/common';
|
|
2
4
|
import { AXOverlayRef } from '@acorex/cdk/overlay';
|
|
3
|
-
import
|
|
4
|
-
import { TemplateRef, Type, OnInit, OnDestroy, ComponentRef } from '@angular/core';
|
|
5
|
+
import { AXComponentInputs, AXComponentType } from '@acorex/core/components';
|
|
5
6
|
import * as rxjs from 'rxjs';
|
|
6
7
|
import { Subject } from 'rxjs';
|
|
7
8
|
|
|
@@ -27,13 +28,52 @@ interface AXActionSheetConfig {
|
|
|
27
28
|
subTitle?: string;
|
|
28
29
|
closeButton?: boolean;
|
|
29
30
|
header?: boolean;
|
|
31
|
+
/** @deprecated Use `inputs` instead to pass data to the action sheet content component. */
|
|
30
32
|
data?: unknown;
|
|
33
|
+
/** Input values to pass to the content component */
|
|
34
|
+
inputs?: unknown;
|
|
31
35
|
closeOnBackdropClick?: boolean;
|
|
32
36
|
items?: AXActionSheetItem[];
|
|
33
37
|
content?: AXActionSheetContentType;
|
|
34
38
|
draggable?: boolean;
|
|
35
39
|
dragUp?: boolean;
|
|
36
40
|
}
|
|
41
|
+
/**
|
|
42
|
+
* Reference to an open action sheet, providing methods to interact with it.
|
|
43
|
+
*/
|
|
44
|
+
interface AXActionSheetRef<TResult = unknown> {
|
|
45
|
+
/** Closes the action sheet with optional result data */
|
|
46
|
+
close: (data?: TResult) => void;
|
|
47
|
+
/** Sets input values on the content component */
|
|
48
|
+
setInputs: (values: AXComponentInputs) => void;
|
|
49
|
+
/** Observable that emits when the action sheet is closed */
|
|
50
|
+
onClose: Subject<TResult>;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Base class for components that are displayed inside an action sheet.
|
|
54
|
+
* Extend this class to get access to the action sheet reference and helper methods.
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* ```typescript
|
|
58
|
+
* @Component({...})
|
|
59
|
+
* export class MyActionSheetContent extends AXActionSheetComponentBase {
|
|
60
|
+
* save() {
|
|
61
|
+
* this.close({ saved: true });
|
|
62
|
+
* }
|
|
63
|
+
* }
|
|
64
|
+
* ```
|
|
65
|
+
*/
|
|
66
|
+
declare abstract class AXActionSheetComponentBase {
|
|
67
|
+
/** Reference to the parent action sheet */
|
|
68
|
+
__actionSheet__: _angular_core.InputSignal<AXActionSheetRef<unknown>>;
|
|
69
|
+
/**
|
|
70
|
+
* Closes the action sheet with optional result data.
|
|
71
|
+
* @param data - Optional data to pass to the close handler
|
|
72
|
+
*/
|
|
73
|
+
close(data?: any): void;
|
|
74
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXActionSheetComponentBase, never>;
|
|
75
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXActionSheetComponentBase, never, never, { "__actionSheet__": { "alias": "__actionSheet__"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
76
|
+
}
|
|
37
77
|
interface AXActionSheetEvent {
|
|
38
78
|
overlayRef?: AXOverlayRef<unknown>;
|
|
39
79
|
nativeEvent?: Event;
|
|
@@ -56,13 +96,16 @@ interface AXActionSheetInternalRef {
|
|
|
56
96
|
*
|
|
57
97
|
* @category Components
|
|
58
98
|
*/
|
|
59
|
-
declare class AXActionSheetComponent extends MXBaseComponent implements OnInit, OnDestroy {
|
|
99
|
+
declare class AXActionSheetComponent extends MXBaseComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
60
100
|
/** Action sheet configuration data */
|
|
61
|
-
data:
|
|
101
|
+
data: _angular_core.InputSignal<AXActionSheetConfig>;
|
|
62
102
|
/** @internal Callback function to close the action sheet */
|
|
63
|
-
onClose:
|
|
103
|
+
onClose: _angular_core.InputSignal<(result?: AXComponentCloseEvent) => void>;
|
|
64
104
|
/** @internal Overlay reference for event tracking */
|
|
65
|
-
overlayRef:
|
|
105
|
+
overlayRef: _angular_core.InputSignal<AXOverlayRef<unknown>>;
|
|
106
|
+
/** @internal Reference to the action sheet for content components */
|
|
107
|
+
__actionSheetRef__: _angular_core.InputSignal<AXActionSheetRef<unknown>>;
|
|
108
|
+
private contentContainerRef;
|
|
66
109
|
private document;
|
|
67
110
|
private platformID;
|
|
68
111
|
private renderer;
|
|
@@ -82,28 +125,40 @@ declare class AXActionSheetComponent extends MXBaseComponent implements OnInit,
|
|
|
82
125
|
*/
|
|
83
126
|
private _componentRef;
|
|
84
127
|
/** Template content if data.content is a TemplateRef */
|
|
85
|
-
protected templateContent:
|
|
128
|
+
protected templateContent: _angular_core.Signal<TemplateRef<unknown>>;
|
|
86
129
|
/** Component content if data.content is a component Type */
|
|
87
|
-
protected componentContent:
|
|
130
|
+
protected componentContent: _angular_core.Signal<AXComponentType<unknown>>;
|
|
88
131
|
/** Template context for ngTemplateOutlet */
|
|
89
|
-
protected templateContext:
|
|
132
|
+
protected templateContext: _angular_core.Signal<{
|
|
90
133
|
$implicit: AXActionSheetConfig;
|
|
91
134
|
ref: AXActionSheetComponent;
|
|
92
135
|
}>;
|
|
136
|
+
/** Whether content has been rendered (for component content) */
|
|
137
|
+
protected isContentRendered: _angular_core.WritableSignal<boolean>;
|
|
93
138
|
/**
|
|
94
139
|
* @ignore
|
|
95
140
|
*/
|
|
96
141
|
ngOnInit(): void;
|
|
142
|
+
/**
|
|
143
|
+
* @ignore
|
|
144
|
+
*/
|
|
145
|
+
ngAfterViewInit(): void;
|
|
146
|
+
/**
|
|
147
|
+
* Renders the component content if provided.
|
|
148
|
+
* Uses ViewContainerRef to create the component and properly set inputs.
|
|
149
|
+
*/
|
|
150
|
+
private renderComponentContent;
|
|
151
|
+
/**
|
|
152
|
+
* Sets input values on the content component.
|
|
153
|
+
* @param values - Object containing input values to set
|
|
154
|
+
*/
|
|
155
|
+
setContentInputs(values: AXComponentInputs): void;
|
|
97
156
|
ngOnDestroy(): void;
|
|
98
157
|
protected handleMouseDown(e: MouseEvent): void;
|
|
99
158
|
protected handleTouchDown(e: TouchEvent): void;
|
|
100
159
|
private handleDown;
|
|
101
160
|
private snapToFinalPosition;
|
|
102
161
|
private heightCalculator;
|
|
103
|
-
/**
|
|
104
|
-
* Handles component attachment from ngComponentOutlet
|
|
105
|
-
*/
|
|
106
|
-
protected handleComponentCreated(componentRef: ComponentRef<any>): void;
|
|
107
162
|
/**
|
|
108
163
|
* Handles click events on action sheet items.
|
|
109
164
|
* This method is called when a user clicks on an action sheet item. It closes the action sheet
|
|
@@ -124,25 +179,29 @@ declare class AXActionSheetComponent extends MXBaseComponent implements OnInit,
|
|
|
124
179
|
* This affects how the action sheet handles accessibility and event tracking.
|
|
125
180
|
* @returns void
|
|
126
181
|
*/
|
|
127
|
-
close(e?:
|
|
182
|
+
close(e?: unknown, isUserInteraction?: boolean): void;
|
|
128
183
|
/**
|
|
129
184
|
* @ignore
|
|
130
185
|
*/
|
|
131
186
|
protected onKeydownHandler(): void;
|
|
132
|
-
static ɵfac:
|
|
133
|
-
static ɵcmp:
|
|
187
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXActionSheetComponent, never>;
|
|
188
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXActionSheetComponent, "ax-action-sheet", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "onClose": { "alias": "onClose"; "required": false; "isSignal": true; }; "overlayRef": { "alias": "overlayRef"; "required": false; "isSignal": true; }; "__actionSheetRef__": { "alias": "__actionSheetRef__"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
134
189
|
}
|
|
135
190
|
|
|
136
191
|
declare class AXActionSheetModule {
|
|
137
|
-
static ɵfac:
|
|
138
|
-
static ɵmod:
|
|
139
|
-
static ɵinj:
|
|
192
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXActionSheetModule, never>;
|
|
193
|
+
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXActionSheetModule, never, [typeof AXActionSheetComponent], [typeof AXActionSheetComponent]>;
|
|
194
|
+
static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXActionSheetModule>;
|
|
140
195
|
}
|
|
141
196
|
|
|
142
|
-
|
|
143
|
-
|
|
197
|
+
/**
|
|
198
|
+
* @deprecated Use `AXActionSheetRef` instead
|
|
199
|
+
*/
|
|
200
|
+
interface AXActionSheetDialogRef<TResult = unknown> {
|
|
201
|
+
close: (e?: TResult) => void;
|
|
202
|
+
setInputs: (values: AXComponentInputs) => void;
|
|
144
203
|
closed: Subject<{
|
|
145
|
-
data?:
|
|
204
|
+
data?: TResult;
|
|
146
205
|
}>;
|
|
147
206
|
}
|
|
148
207
|
declare class AXActionSheetService {
|
|
@@ -160,23 +219,24 @@ declare class AXActionSheetService {
|
|
|
160
219
|
* @param isUserInteraction - Whether the action sheet is opened by user interaction (default: true).
|
|
161
220
|
* This affects how the action sheet handles accessibility and focus management.
|
|
162
221
|
* @returns A promise that resolves to a dialog reference containing methods to control the action sheet.
|
|
163
|
-
* The reference includes methods like close() and a closed observable for tracking dialog state.
|
|
222
|
+
* The reference includes methods like close(), setInputs() and a closed observable for tracking dialog state.
|
|
164
223
|
* @example
|
|
165
224
|
* ```typescript
|
|
166
225
|
* const dialogRef = await actionSheetService.open({
|
|
167
226
|
* title: 'Choose an option',
|
|
168
|
-
*
|
|
169
|
-
*
|
|
170
|
-
* { text: 'Option 2', value: 'opt2' }
|
|
171
|
-
* ]
|
|
227
|
+
* content: MyCustomComponent,
|
|
228
|
+
* inputs: { userId: 123, userName: 'John' }
|
|
172
229
|
* });
|
|
173
230
|
*
|
|
231
|
+
* // Update inputs dynamically
|
|
232
|
+
* dialogRef.setInputs({ userName: 'Jane' });
|
|
233
|
+
*
|
|
174
234
|
* dialogRef.closed.subscribe(result => {
|
|
175
235
|
* console.log('Action sheet closed with:', result.data);
|
|
176
236
|
* });
|
|
177
237
|
* ```
|
|
178
238
|
*/
|
|
179
|
-
open(config: AXActionSheetConfig, isUserInteraction?: boolean): Promise<
|
|
239
|
+
open<TResult = unknown>(config: AXActionSheetConfig, isUserInteraction?: boolean): Promise<AXActionSheetRef<TResult>>;
|
|
180
240
|
/**
|
|
181
241
|
* Sets the current state of action sheet events.
|
|
182
242
|
* This method is used internally to track action sheet lifecycle events such as open, close,
|
|
@@ -188,9 +248,9 @@ declare class AXActionSheetService {
|
|
|
188
248
|
* @returns void
|
|
189
249
|
*/
|
|
190
250
|
setActionSheetEventState(event: AXActionSheetEvent): void;
|
|
191
|
-
static ɵfac:
|
|
192
|
-
static ɵprov:
|
|
251
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXActionSheetService, never>;
|
|
252
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXActionSheetService>;
|
|
193
253
|
}
|
|
194
254
|
|
|
195
|
-
export { AXActionSheetComponent, AXActionSheetModule, AXActionSheetService };
|
|
196
|
-
export type { AXActionSheetConfig, AXActionSheetContentType, AXActionSheetDialogRef, AXActionSheetEvent, AXActionSheetInternalRef, AXActionSheetItem };
|
|
255
|
+
export { AXActionSheetComponent, AXActionSheetComponentBase, AXActionSheetModule, AXActionSheetService };
|
|
256
|
+
export type { AXActionSheetConfig, AXActionSheetContentType, AXActionSheetDialogRef, AXActionSheetEvent, AXActionSheetInternalRef, AXActionSheetItem, AXActionSheetRef };
|
|
@@ -1,11 +1,44 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, Directive, inject, ComponentRef, Injectable, DOCUMENT, PLATFORM_ID, Renderer2, signal, computed, TemplateRef, ViewContainerRef, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
1
3
|
import { MXBaseComponent, AXComponent, AXClosableComponent, AXFocusableComponent } from '@acorex/cdk/common';
|
|
2
4
|
import { AXDecoratorGenericComponent, AXDecoratorCloseButtonComponent } from '@acorex/components/decorators';
|
|
3
5
|
import { AXTranslatorPipe } from '@acorex/core/translation';
|
|
4
|
-
import { isPlatformBrowser, NgTemplateOutlet,
|
|
5
|
-
import * as i0 from '@angular/core';
|
|
6
|
-
import { inject, Injectable, input, DOCUMENT, PLATFORM_ID, Renderer2, signal, computed, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
6
|
+
import { isPlatformBrowser, NgTemplateOutlet, AsyncPipe } from '@angular/common';
|
|
7
7
|
import { AXOverlayService } from '@acorex/cdk/overlay';
|
|
8
|
-
import { Subject
|
|
8
|
+
import { Subject } from 'rxjs';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Base class for components that are displayed inside an action sheet.
|
|
12
|
+
* Extend this class to get access to the action sheet reference and helper methods.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```typescript
|
|
16
|
+
* @Component({...})
|
|
17
|
+
* export class MyActionSheetContent extends AXActionSheetComponentBase {
|
|
18
|
+
* save() {
|
|
19
|
+
* this.close({ saved: true });
|
|
20
|
+
* }
|
|
21
|
+
* }
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
class AXActionSheetComponentBase {
|
|
25
|
+
constructor() {
|
|
26
|
+
/** Reference to the parent action sheet */
|
|
27
|
+
this.__actionSheet__ = input(...(ngDevMode ? [undefined, { debugName: "__actionSheet__" }] : []));
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Closes the action sheet with optional result data.
|
|
31
|
+
* @param data - Optional data to pass to the close handler
|
|
32
|
+
*/
|
|
33
|
+
close(data = null) {
|
|
34
|
+
this.__actionSheet__()?.close(data);
|
|
35
|
+
}
|
|
36
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
37
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: AXActionSheetComponentBase, isStandalone: true, inputs: { __actionSheet__: { classPropertyName: "__actionSheet__", publicName: "__actionSheet__", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
38
|
+
}
|
|
39
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetComponentBase, decorators: [{
|
|
40
|
+
type: Directive
|
|
41
|
+
}], propDecorators: { __actionSheet__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__actionSheet__", required: false }] }] } });
|
|
9
42
|
|
|
10
43
|
class AXActionSheetService {
|
|
11
44
|
constructor() {
|
|
@@ -24,17 +57,18 @@ class AXActionSheetService {
|
|
|
24
57
|
* @param isUserInteraction - Whether the action sheet is opened by user interaction (default: true).
|
|
25
58
|
* This affects how the action sheet handles accessibility and focus management.
|
|
26
59
|
* @returns A promise that resolves to a dialog reference containing methods to control the action sheet.
|
|
27
|
-
* The reference includes methods like close() and a closed observable for tracking dialog state.
|
|
60
|
+
* The reference includes methods like close(), setInputs() and a closed observable for tracking dialog state.
|
|
28
61
|
* @example
|
|
29
62
|
* ```typescript
|
|
30
63
|
* const dialogRef = await actionSheetService.open({
|
|
31
64
|
* title: 'Choose an option',
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
* { text: 'Option 2', value: 'opt2' }
|
|
35
|
-
* ]
|
|
65
|
+
* content: MyCustomComponent,
|
|
66
|
+
* inputs: { userId: 123, userName: 'John' }
|
|
36
67
|
* });
|
|
37
68
|
*
|
|
69
|
+
* // Update inputs dynamically
|
|
70
|
+
* dialogRef.setInputs({ userName: 'Jane' });
|
|
71
|
+
*
|
|
38
72
|
* dialogRef.closed.subscribe(result => {
|
|
39
73
|
* console.log('Action sheet closed with:', result.data);
|
|
40
74
|
* });
|
|
@@ -48,23 +82,53 @@ class AXActionSheetService {
|
|
|
48
82
|
header: true,
|
|
49
83
|
};
|
|
50
84
|
config = Object.assign(defaultConfig, config);
|
|
51
|
-
const closed = new
|
|
85
|
+
const closed = new Subject();
|
|
86
|
+
const onClose = new Subject();
|
|
87
|
+
// Using let because internalRef is assigned after overlayRef is created
|
|
88
|
+
// eslint-disable-next-line prefer-const
|
|
52
89
|
let internalRef;
|
|
53
90
|
const closeActionSheet = (result) => {
|
|
54
91
|
if (internalRef) {
|
|
55
92
|
internalRef.overlayRef.dispose();
|
|
93
|
+
onClose.next(result?.data);
|
|
94
|
+
onClose.complete();
|
|
56
95
|
if (result?.data) {
|
|
57
96
|
closed.next({ data: result.data });
|
|
58
97
|
}
|
|
59
98
|
else {
|
|
60
99
|
closed.next({});
|
|
61
100
|
}
|
|
101
|
+
closed.complete();
|
|
62
102
|
}
|
|
63
103
|
};
|
|
104
|
+
// Create the action sheet reference that will be passed to content components
|
|
105
|
+
const actionSheetRef = {
|
|
106
|
+
close: (data) => {
|
|
107
|
+
const component = internalRef?.overlayRef.instance;
|
|
108
|
+
if (component && 'close' in component) {
|
|
109
|
+
component.close(data);
|
|
110
|
+
}
|
|
111
|
+
else {
|
|
112
|
+
closeActionSheet({ data });
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
setInputs: (values) => {
|
|
116
|
+
const ref = internalRef?.overlayRef.instance;
|
|
117
|
+
if (ref && ref instanceof ComponentRef) {
|
|
118
|
+
const componentInstance = ref.instance;
|
|
119
|
+
componentInstance.setContentInputs(values);
|
|
120
|
+
}
|
|
121
|
+
else if (ref && 'setContentInputs' in ref) {
|
|
122
|
+
ref.setContentInputs(values);
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
onClose,
|
|
126
|
+
};
|
|
64
127
|
const overlayRef = await this.overlayService.create(AXActionSheetComponent, {
|
|
65
128
|
inputs: {
|
|
66
129
|
data: config,
|
|
67
130
|
onClose: closeActionSheet,
|
|
131
|
+
__actionSheetRef__: actionSheetRef,
|
|
68
132
|
},
|
|
69
133
|
centered: false,
|
|
70
134
|
panelClass: ['ax-action-sheet-panel'],
|
|
@@ -76,6 +140,7 @@ class AXActionSheetService {
|
|
|
76
140
|
onDispose: () => {
|
|
77
141
|
// Clean up when disposed externally (e.g., backdrop click)
|
|
78
142
|
closed.next({});
|
|
143
|
+
closed.complete();
|
|
79
144
|
},
|
|
80
145
|
});
|
|
81
146
|
internalRef = {
|
|
@@ -93,16 +158,9 @@ class AXActionSheetService {
|
|
|
93
158
|
isUserInteraction,
|
|
94
159
|
});
|
|
95
160
|
const axDialogRef = {
|
|
96
|
-
close:
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
component.close(e);
|
|
100
|
-
}
|
|
101
|
-
else {
|
|
102
|
-
closeActionSheet({ data: e });
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
closed,
|
|
161
|
+
close: actionSheetRef.close,
|
|
162
|
+
setInputs: actionSheetRef.setInputs,
|
|
163
|
+
onClose: actionSheetRef.onClose,
|
|
106
164
|
};
|
|
107
165
|
return axDialogRef;
|
|
108
166
|
}
|
|
@@ -143,6 +201,8 @@ class AXActionSheetComponent extends MXBaseComponent {
|
|
|
143
201
|
this.onClose = input(...(ngDevMode ? [undefined, { debugName: "onClose" }] : []));
|
|
144
202
|
/** @internal Overlay reference for event tracking */
|
|
145
203
|
this.overlayRef = input(...(ngDevMode ? [undefined, { debugName: "overlayRef" }] : []));
|
|
204
|
+
/** @internal Reference to the action sheet for content components */
|
|
205
|
+
this.__actionSheetRef__ = input(...(ngDevMode ? [undefined, { debugName: "__actionSheetRef__" }] : []));
|
|
146
206
|
this.document = inject(DOCUMENT);
|
|
147
207
|
this.platformID = inject(PLATFORM_ID);
|
|
148
208
|
this.renderer = inject(Renderer2);
|
|
@@ -157,6 +217,10 @@ class AXActionSheetComponent extends MXBaseComponent {
|
|
|
157
217
|
this.actionSheetHeight = signal(0, ...(ngDevMode ? [{ debugName: "actionSheetHeight" }] : []));
|
|
158
218
|
this.isActionSheetHeightSet = signal(false, ...(ngDevMode ? [{ debugName: "isActionSheetHeightSet" }] : []));
|
|
159
219
|
this.transitionDuration = signal(300, ...(ngDevMode ? [{ debugName: "transitionDuration" }] : []));
|
|
220
|
+
/**
|
|
221
|
+
* @ignore
|
|
222
|
+
*/
|
|
223
|
+
this._componentRef = null;
|
|
160
224
|
/** Template content if data.content is a TemplateRef */
|
|
161
225
|
this.templateContent = computed(() => {
|
|
162
226
|
const content = this.data().content;
|
|
@@ -172,6 +236,8 @@ class AXActionSheetComponent extends MXBaseComponent {
|
|
|
172
236
|
$implicit: this.data(),
|
|
173
237
|
ref: this,
|
|
174
238
|
}), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
|
|
239
|
+
/** Whether content has been rendered (for component content) */
|
|
240
|
+
this.isContentRendered = signal(false, ...(ngDevMode ? [{ debugName: "isContentRendered" }] : []));
|
|
175
241
|
}
|
|
176
242
|
/**
|
|
177
243
|
* @ignore
|
|
@@ -239,11 +305,77 @@ class AXActionSheetComponent extends MXBaseComponent {
|
|
|
239
305
|
});
|
|
240
306
|
}
|
|
241
307
|
}
|
|
308
|
+
/**
|
|
309
|
+
* @ignore
|
|
310
|
+
*/
|
|
311
|
+
ngAfterViewInit() {
|
|
312
|
+
// Render component content after view is initialized (ViewChild is available)
|
|
313
|
+
this.renderComponentContent();
|
|
314
|
+
}
|
|
315
|
+
/**
|
|
316
|
+
* Renders the component content if provided.
|
|
317
|
+
* Uses ViewContainerRef to create the component and properly set inputs.
|
|
318
|
+
*/
|
|
319
|
+
renderComponentContent() {
|
|
320
|
+
const componentType = this.componentContent();
|
|
321
|
+
if (!componentType || !this.contentContainerRef)
|
|
322
|
+
return;
|
|
323
|
+
const config = this.data();
|
|
324
|
+
// Create the component using ViewContainerRef
|
|
325
|
+
const componentRef = this.contentContainerRef.createComponent(componentType);
|
|
326
|
+
this._componentRef = componentRef;
|
|
327
|
+
// Get component input definitions to check before setting inputs
|
|
328
|
+
const inputDefs = componentRef.componentType?.ɵcmp
|
|
329
|
+
?.inputs;
|
|
330
|
+
// Set data inputs (legacy support - deprecated)
|
|
331
|
+
if (config?.data && typeof config.data === 'object') {
|
|
332
|
+
Object.entries(config.data).forEach(([key, value]) => {
|
|
333
|
+
componentRef.instance[key] = value;
|
|
334
|
+
});
|
|
335
|
+
}
|
|
336
|
+
// Set inputs using setInput for proper change detection
|
|
337
|
+
if (config?.inputs && typeof config.inputs === 'object') {
|
|
338
|
+
Object.entries(config.inputs).forEach(([key, value]) => {
|
|
339
|
+
if (inputDefs && key in inputDefs) {
|
|
340
|
+
componentRef.setInput(key, value);
|
|
341
|
+
}
|
|
342
|
+
});
|
|
343
|
+
}
|
|
344
|
+
// Set action sheet reference (only if the component has this input)
|
|
345
|
+
if (inputDefs && '__actionSheet__' in inputDefs) {
|
|
346
|
+
componentRef.setInput('__actionSheet__', this.__actionSheetRef__());
|
|
347
|
+
}
|
|
348
|
+
// Subscribe to close event if available
|
|
349
|
+
const instance = componentRef.instance;
|
|
350
|
+
if (instance.onClosed) {
|
|
351
|
+
instance.onClosed.subscribe((e) => {
|
|
352
|
+
this.close(e);
|
|
353
|
+
});
|
|
354
|
+
}
|
|
355
|
+
this.isContentRendered.set(true);
|
|
356
|
+
this.cdr.markForCheck();
|
|
357
|
+
}
|
|
358
|
+
/**
|
|
359
|
+
* Sets input values on the content component.
|
|
360
|
+
* @param values - Object containing input values to set
|
|
361
|
+
*/
|
|
362
|
+
setContentInputs(values) {
|
|
363
|
+
if (this._componentRef) {
|
|
364
|
+
Object.entries(values).forEach(([key, value]) => {
|
|
365
|
+
this._componentRef.setInput(key, value);
|
|
366
|
+
});
|
|
367
|
+
}
|
|
368
|
+
}
|
|
242
369
|
ngOnDestroy() {
|
|
243
370
|
this.onMouseMoveListenerFn();
|
|
244
371
|
this.onMouseUpListenerFn();
|
|
245
372
|
this.onTouchMoveListenerFn();
|
|
246
373
|
this.onTouchUpListenerFn();
|
|
374
|
+
// Clean up component reference
|
|
375
|
+
if (this._componentRef) {
|
|
376
|
+
this._componentRef.destroy();
|
|
377
|
+
this._componentRef = null;
|
|
378
|
+
}
|
|
247
379
|
}
|
|
248
380
|
handleMouseDown(e) {
|
|
249
381
|
if (!this.data().draggable || e.button !== 0)
|
|
@@ -326,22 +458,6 @@ class AXActionSheetComponent extends MXBaseComponent {
|
|
|
326
458
|
}
|
|
327
459
|
return (this.actionSheetHeight() + (this.document.documentElement.clientHeight - clientY - this.actionSheetHeight()) / 10);
|
|
328
460
|
}
|
|
329
|
-
/**
|
|
330
|
-
* Handles component attachment from ngComponentOutlet
|
|
331
|
-
*/
|
|
332
|
-
handleComponentCreated(componentRef) {
|
|
333
|
-
if (componentRef?.instance) {
|
|
334
|
-
this._componentRef = componentRef.instance;
|
|
335
|
-
Object.assign(this._componentRef, this.data());
|
|
336
|
-
Object.assign(this._componentRef, { _isPopup: true });
|
|
337
|
-
if (componentRef.instance
|
|
338
|
-
.onClosed) {
|
|
339
|
-
componentRef.instance.onClosed.subscribe((e) => {
|
|
340
|
-
this.close(e);
|
|
341
|
-
});
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
}
|
|
345
461
|
/**
|
|
346
462
|
* Handles click events on action sheet items.
|
|
347
463
|
* This method is called when a user clicks on an action sheet item. It closes the action sheet
|
|
@@ -380,7 +496,7 @@ class AXActionSheetComponent extends MXBaseComponent {
|
|
|
380
496
|
const closeCallback = this.onClose();
|
|
381
497
|
if (closeCallback) {
|
|
382
498
|
closeCallback({
|
|
383
|
-
component: this._componentRef,
|
|
499
|
+
component: this._componentRef?.instance,
|
|
384
500
|
htmlElement: this.getHostElement(),
|
|
385
501
|
data: e,
|
|
386
502
|
});
|
|
@@ -397,7 +513,7 @@ class AXActionSheetComponent extends MXBaseComponent {
|
|
|
397
513
|
}
|
|
398
514
|
}
|
|
399
515
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
400
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXActionSheetComponent, isStandalone: true, selector: "ax-action-sheet", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, onClose: { classPropertyName: "onClose", publicName: "onClose", isSignal: true, isRequired: false, transformFunction: null }, overlayRef: { classPropertyName: "overlayRef", publicName: "overlayRef", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onKeydownHandler()" } }, providers: [
|
|
516
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXActionSheetComponent, isStandalone: true, selector: "ax-action-sheet", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, onClose: { classPropertyName: "onClose", publicName: "onClose", isSignal: true, isRequired: false, transformFunction: null }, overlayRef: { classPropertyName: "overlayRef", publicName: "overlayRef", isSignal: true, isRequired: false, transformFunction: null }, __actionSheetRef__: { classPropertyName: "__actionSheetRef__", publicName: "__actionSheetRef__", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onKeydownHandler()" } }, providers: [
|
|
401
517
|
{ provide: AXComponent, useExisting: AXActionSheetComponent },
|
|
402
518
|
{
|
|
403
519
|
provide: AXClosableComponent,
|
|
@@ -407,7 +523,7 @@ class AXActionSheetComponent extends MXBaseComponent {
|
|
|
407
523
|
provide: AXFocusableComponent,
|
|
408
524
|
useExisting: AXActionSheetComponent,
|
|
409
525
|
},
|
|
410
|
-
], usesInheritance: true, ngImport: i0, template: "@if (data().draggable) {\n <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n <div class=\"ax-drag-handle\"></div>\n </div>\n}\n@if (data().header) {\n <ax-header\n [class.draggable-header]=\"data().draggable\"\n (mousedown)=\"data().draggable ? handleMouseDown($event) : null\"\n (touchstart)=\"data().draggable ? handleTouchDown($event) : null\"\n >\n <ax-prefix>\n <ax-title>{{ data().title | translate | async }}</ax-title>\n\n @if (data().subTitle) {\n <ax-subtitle>\n {{ data().subTitle }}\n </ax-subtitle>\n }\n </ax-prefix>\n @if (data().closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n@if (data().content) {\n <div class=\"ax-custom-template-container\">\n @if (templateContent()) {\n <ng-container *ngTemplateOutlet=\"templateContent(); context: templateContext()\"></ng-container>\n }
|
|
526
|
+
], viewQueries: [{ propertyName: "contentContainerRef", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "@if (data().draggable) {\n <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n <div class=\"ax-drag-handle\"></div>\n </div>\n}\n@if (data().header) {\n <ax-header\n [class.draggable-header]=\"data().draggable\"\n (mousedown)=\"data().draggable ? handleMouseDown($event) : null\"\n (touchstart)=\"data().draggable ? handleTouchDown($event) : null\"\n >\n <ax-prefix>\n <ax-title>{{ data().title | translate | async }}</ax-title>\n\n @if (data().subTitle) {\n <ax-subtitle>\n {{ data().subTitle }}\n </ax-subtitle>\n }\n </ax-prefix>\n @if (data().closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n@if (data().content) {\n <div class=\"ax-custom-template-container\">\n @if (templateContent()) {\n <ng-container *ngTemplateOutlet=\"templateContent(); context: templateContext()\"></ng-container>\n }\n <!-- Component content container - always present but only populated when componentContent() is truthy -->\n <ng-container #contentContainer></ng-container>\n </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n @for (item of data().items; let i = $index; track i) {\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <div\n class=\"ax-action-item ax-{{ item.color || 'default' }}\"\n [class.ax-state-disabled]=\"item.disabled\"\n [tabindex]=\"i\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"ax-action-item-prefix\">\n @if (item.icon) {\n <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n }\n <ax-text>{{ item.text | translate | async }}</ax-text>\n </div>\n <div class=\"ax-action-item-suffix\"></div>\n </div>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-primary-surface), .1}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-secondary-surface), .1}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-success-surface), .1}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-warning-surface), .1}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-danger-surface), .1}ax-action-sheet .ax-action-item.ax-accent1{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent1-surface), .1}ax-action-sheet .ax-action-item.ax-accent2{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent2-surface), .1}ax-action-sheet .ax-action-item.ax-accent3{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent3-surface), .1}ax-action-sheet .ax-action-item.ax-accent4{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent4-surface), .1}ax-action-sheet .ax-action-item.ax-accent5{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent5-surface), .1}ax-action-sheet .ax-action-item.ax-accent6{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent6-surface), .1}ax-action-sheet .ax-action-item.ax-accent7{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent7-surface), .1}.ax-action-sheet-panel{position:fixed!important;bottom:0!important;left:50%!important;transform:translate(-50%)!important;top:auto!important;right:auto!important;width:auto!important;height:auto!important;display:block!important;align-items:unset!important;justify-content:unset!important;max-width:none!important}ax-action-sheet{display:block;width:var(--ax-comp-action-sheet-width-sm, 100vw);position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-md, 70vw)}}@media (min-width: 1024px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-lg, 50vw)}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:rgba(var(--ax-comp-action-sheet-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"], dependencies: [{ 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
411
527
|
}
|
|
412
528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetComponent, decorators: [{
|
|
413
529
|
type: Component,
|
|
@@ -427,11 +543,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
427
543
|
AXDecoratorGenericComponent,
|
|
428
544
|
AXDecoratorCloseButtonComponent,
|
|
429
545
|
NgTemplateOutlet,
|
|
430
|
-
NgComponentOutlet,
|
|
431
546
|
AXTranslatorPipe,
|
|
432
547
|
AsyncPipe,
|
|
433
|
-
], template: "@if (data().draggable) {\n <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n <div class=\"ax-drag-handle\"></div>\n </div>\n}\n@if (data().header) {\n <ax-header\n [class.draggable-header]=\"data().draggable\"\n (mousedown)=\"data().draggable ? handleMouseDown($event) : null\"\n (touchstart)=\"data().draggable ? handleTouchDown($event) : null\"\n >\n <ax-prefix>\n <ax-title>{{ data().title | translate | async }}</ax-title>\n\n @if (data().subTitle) {\n <ax-subtitle>\n {{ data().subTitle }}\n </ax-subtitle>\n }\n </ax-prefix>\n @if (data().closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n@if (data().content) {\n <div class=\"ax-custom-template-container\">\n @if (templateContent()) {\n <ng-container *ngTemplateOutlet=\"templateContent(); context: templateContext()\"></ng-container>\n }
|
|
434
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], onClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClose", required: false }] }], overlayRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayRef", required: false }] }] } }
|
|
548
|
+
], template: "@if (data().draggable) {\n <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n <div class=\"ax-drag-handle\"></div>\n </div>\n}\n@if (data().header) {\n <ax-header\n [class.draggable-header]=\"data().draggable\"\n (mousedown)=\"data().draggable ? handleMouseDown($event) : null\"\n (touchstart)=\"data().draggable ? handleTouchDown($event) : null\"\n >\n <ax-prefix>\n <ax-title>{{ data().title | translate | async }}</ax-title>\n\n @if (data().subTitle) {\n <ax-subtitle>\n {{ data().subTitle }}\n </ax-subtitle>\n }\n </ax-prefix>\n @if (data().closeButton) {\n <ax-suffix>\n <ax-close-button></ax-close-button>\n </ax-suffix>\n }\n </ax-header>\n}\n@if (data().content) {\n <div class=\"ax-custom-template-container\">\n @if (templateContent()) {\n <ng-container *ngTemplateOutlet=\"templateContent(); context: templateContext()\"></ng-container>\n }\n <!-- Component content container - always present but only populated when componentContent() is truthy -->\n <ng-container #contentContainer></ng-container>\n </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n @for (item of data().items; let i = $index; track i) {\n @if (item.group?.title) {\n <ax-title>{{ item.group?.title }}</ax-title>\n }\n <div\n class=\"ax-action-item ax-{{ item.color || 'default' }}\"\n [class.ax-state-disabled]=\"item.disabled\"\n [tabindex]=\"i\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"ax-action-item-prefix\">\n @if (item.icon) {\n <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n }\n <ax-text>{{ item.text | translate | async }}</ax-text>\n </div>\n <div class=\"ax-action-item-suffix\"></div>\n </div>\n @if (item.break) {\n <ax-divider></ax-divider>\n }\n }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-primary-surface), .1}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-secondary-surface), .1}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-success-surface), .1}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-warning-surface), .1}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-danger-surface), .1}ax-action-sheet .ax-action-item.ax-accent1{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent1-surface), .1}ax-action-sheet .ax-action-item.ax-accent2{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent2-surface), .1}ax-action-sheet .ax-action-item.ax-accent3{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent3-surface), .1}ax-action-sheet .ax-action-item.ax-accent4{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent4-surface), .1}ax-action-sheet .ax-action-item.ax-accent5{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent5-surface), .1}ax-action-sheet .ax-action-item.ax-accent6{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent6-surface), .1}ax-action-sheet .ax-action-item.ax-accent7{--ax-comp-action-sheet-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-action-sheet-hover-bg-color: var(--ax-sys-color-accent7-surface), .1}.ax-action-sheet-panel{position:fixed!important;bottom:0!important;left:50%!important;transform:translate(-50%)!important;top:auto!important;right:auto!important;width:auto!important;height:auto!important;display:block!important;align-items:unset!important;justify-content:unset!important;max-width:none!important}ax-action-sheet{display:block;width:var(--ax-comp-action-sheet-width-sm, 100vw);position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-md, 70vw)}}@media (min-width: 1024px){ax-action-sheet{width:var(--ax-comp-action-sheet-width-lg, 50vw)}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:1;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item:hover:not(ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-disabled,ax-action-sheet .ax-action-list .ax-action-item:hover.ax-state-selected){background-color:rgba(var(--ax-comp-action-sheet-hover-bg-color, var(--ax-sys-color-surface)))!important}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"] }]
|
|
549
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], onClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClose", required: false }] }], overlayRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayRef", required: false }] }], __actionSheetRef__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__actionSheetRef__", required: false }] }], contentContainerRef: [{
|
|
550
|
+
type: ViewChild,
|
|
551
|
+
args: ['contentContainer', { read: ViewContainerRef }]
|
|
552
|
+
}] } });
|
|
435
553
|
|
|
436
554
|
class AXActionSheetModule {
|
|
437
555
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
@@ -451,5 +569,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
451
569
|
* Generated bundle index. Do not edit.
|
|
452
570
|
*/
|
|
453
571
|
|
|
454
|
-
export { AXActionSheetComponent, AXActionSheetModule, AXActionSheetService };
|
|
572
|
+
export { AXActionSheetComponent, AXActionSheetComponentBase, AXActionSheetModule, AXActionSheetService };
|
|
455
573
|
//# sourceMappingURL=acorex-components-action-sheet.mjs.map
|