@acorex/components 21.0.1-next.4 → 21.0.1-next.6
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 +19 -41
- package/dialog/index.d.ts +14 -18
- package/dropdown/index.d.ts +4 -3
- package/fesm2022/acorex-components-action-sheet.mjs +93 -141
- package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation2.mjs +2 -2
- package/fesm2022/acorex-components-conversation2.mjs.map +1 -1
- package/fesm2022/acorex-components-dialog.mjs +45 -66
- package/fesm2022/acorex-components-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown.mjs +4 -0
- package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
- package/fesm2022/acorex-components-grid-layout-builder.mjs +2 -2
- package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-kanban.mjs +148 -8
- package/fesm2022/acorex-components-kanban.mjs.map +1 -1
- package/fesm2022/acorex-components-loading-dialog.mjs +36 -73
- package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +5 -26
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/{acorex-components-modal-acorex-components-modal-Bmoz9DL5.mjs → acorex-components-modal-acorex-components-modal-CXXcFToK.mjs} +3 -27
- package/fesm2022/acorex-components-modal-acorex-components-modal-CXXcFToK.mjs.map +1 -0
- package/fesm2022/{acorex-components-modal-modal-content.component-CSJU1vRi.mjs → acorex-components-modal-modal-content.component-B4rhHeEz.mjs} +2 -2
- package/fesm2022/{acorex-components-modal-modal-content.component-CSJU1vRi.mjs.map → acorex-components-modal-modal-content.component-B4rhHeEz.mjs.map} +1 -1
- package/fesm2022/acorex-components-modal.mjs +1 -1
- package/fesm2022/acorex-components-notification.mjs +257 -374
- package/fesm2022/acorex-components-notification.mjs.map +1 -1
- package/fesm2022/acorex-components-popover.mjs +175 -136
- package/fesm2022/acorex-components-popover.mjs.map +1 -1
- package/fesm2022/acorex-components-popup.mjs +105 -308
- package/fesm2022/acorex-components-popup.mjs.map +1 -1
- package/fesm2022/acorex-components-routing-progress.mjs +2 -2
- package/fesm2022/acorex-components-routing-progress.mjs.map +1 -1
- package/fesm2022/acorex-components-toast.mjs +123 -231
- package/fesm2022/acorex-components-toast.mjs.map +1 -1
- package/fesm2022/acorex-components-tooltip.mjs +3 -2
- package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
- package/kanban/index.d.ts +61 -4
- package/loading-dialog/index.d.ts +15 -31
- package/menu/index.d.ts +0 -4
- package/modal/index.d.ts +0 -7
- package/notification/index.d.ts +32 -47
- package/package.json +7 -7
- package/popover/index.d.ts +27 -20
- package/popup/index.d.ts +27 -103
- package/toast/index.d.ts +18 -24
- package/tooltip/index.d.ts +2 -1
- package/fesm2022/acorex-components-modal-acorex-components-modal-Bmoz9DL5.mjs.map +0 -1
|
@@ -1,17 +1,19 @@
|
|
|
1
|
-
import { AXOverlayService } from '@acorex/cdk/overlay';
|
|
2
|
-
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, NgZone, DOCUMENT, input, signal, TemplateRef, ViewContainerRef, HostListener, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, ComponentRef, Injectable, Directive, NgModule } from '@angular/core';
|
|
4
|
-
import { Subject } from 'rxjs';
|
|
5
1
|
import { AXPlatform } from '@acorex/core/platform';
|
|
2
|
+
import { TemplatePortal, ComponentPortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { inject, NgZone, ViewContainerRef, TemplateRef, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, NgModule } from '@angular/core';
|
|
6
5
|
import { MXBaseComponent, AXClosableComponent, AXComponent, AXComponentClosedPromise, AXCommonModule } from '@acorex/cdk/common';
|
|
7
6
|
import { AXDecoratorCloseButtonComponent, AXDecoratorModule } from '@acorex/components/decorators';
|
|
8
7
|
import { AXLoadingService } from '@acorex/components/loading';
|
|
9
|
-
import { AXComponentService } from '@acorex/core/components';
|
|
10
8
|
import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
|
|
9
|
+
import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
|
|
10
|
+
import { DIALOG_DATA, DialogRef, Dialog, DialogModule } from '@angular/cdk/dialog';
|
|
11
|
+
import { CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
|
|
11
12
|
import { AsyncPipe, CommonModule } from '@angular/common';
|
|
13
|
+
import { AXHtmlUtil } from '@acorex/core/utils';
|
|
12
14
|
|
|
13
15
|
/**
|
|
14
|
-
* The
|
|
16
|
+
* The Button is a component which detects user interaction and triggers a corresponding event
|
|
15
17
|
*
|
|
16
18
|
* @category Components
|
|
17
19
|
*/
|
|
@@ -19,119 +21,69 @@ class AXPopupComponent extends MXBaseComponent {
|
|
|
19
21
|
constructor() {
|
|
20
22
|
super(...arguments);
|
|
21
23
|
this._zone = inject(NgZone);
|
|
22
|
-
this.
|
|
24
|
+
this._viewContainerRef = inject(ViewContainerRef);
|
|
23
25
|
this.loadingService = inject(AXLoadingService);
|
|
24
26
|
this._platform = inject(AXPlatform);
|
|
25
|
-
this.
|
|
26
|
-
|
|
27
|
-
this.__content__ = input(...(ngDevMode ? [undefined, { debugName: "__content__" }] : []));
|
|
28
|
-
this.__config__ = input(...(ngDevMode ? [undefined, { debugName: "__config__" }] : []));
|
|
29
|
-
this.__popupRef__ = input(...(ngDevMode ? [undefined, { debugName: "__popupRef__" }] : []));
|
|
30
|
-
this.__id__ = input(...(ngDevMode ? [undefined, { debugName: "__id__" }] : []));
|
|
27
|
+
this.data = inject(DIALOG_DATA);
|
|
28
|
+
this.dialogRef = inject(DialogRef);
|
|
31
29
|
/**
|
|
32
30
|
* Indicates whether the component is loading.
|
|
33
31
|
* @defaultValue true
|
|
34
32
|
*/
|
|
35
33
|
this.isLoading = true;
|
|
36
|
-
/** @ignore */
|
|
37
|
-
this._componentRef = null;
|
|
38
|
-
/** Current title */
|
|
39
|
-
this.title = signal('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
40
|
-
/** @ignore */
|
|
41
|
-
this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
|
|
42
|
-
/** @ignore */
|
|
43
|
-
this.dragOffset = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dragOffset" }] : []));
|
|
44
|
-
/** @ignore */
|
|
45
|
-
this.dragStartPos = { x: 0, y: 0 };
|
|
46
|
-
/** @ignore */
|
|
47
|
-
this.elementStartPos = { x: 0, y: 0 };
|
|
48
34
|
}
|
|
49
35
|
/** @ignore */
|
|
50
36
|
ngOnInit() {
|
|
51
37
|
super.ngOnInit();
|
|
52
|
-
const config = this.__config__();
|
|
53
38
|
if (this._platform.is('SM')) {
|
|
54
|
-
|
|
55
|
-
if (config) {
|
|
56
|
-
config.draggable = false;
|
|
57
|
-
}
|
|
39
|
+
this.data.draggable = false;
|
|
58
40
|
}
|
|
59
|
-
this.title.set(config?.title ?? '');
|
|
60
41
|
this._loadingId = this.loadingService.show({
|
|
61
42
|
location: this.getHostElement(),
|
|
62
43
|
});
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const content = this.__content__();
|
|
68
|
-
const config = this.__config__();
|
|
69
|
-
if (!content) {
|
|
70
|
-
this.loadingService.hide(this._loadingId);
|
|
71
|
-
return;
|
|
72
|
-
}
|
|
73
|
-
if (content instanceof TemplateRef) {
|
|
74
|
-
// Render template using ViewContainerRef (supports context)
|
|
75
|
-
this.contentContainerRef.createEmbeddedView(content, {
|
|
76
|
-
$implicit: config?.data,
|
|
44
|
+
//
|
|
45
|
+
if (this.data.content instanceof TemplateRef) {
|
|
46
|
+
this._selectedPortal = new TemplatePortal(this.data.content, this._viewContainerRef, {
|
|
47
|
+
$implicit: this.data,
|
|
77
48
|
ref: this,
|
|
78
49
|
});
|
|
79
|
-
this.
|
|
50
|
+
this.cdr.markForCheck();
|
|
80
51
|
}
|
|
81
|
-
else if (typeof content === 'function') {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
// Set popup reference (only if the component has this input)
|
|
101
|
-
if (inputDefs && '__popup__' in inputDefs) {
|
|
102
|
-
componentRef.setInput('__popup__', this.__popupRef__());
|
|
103
|
-
}
|
|
104
|
-
// Move component to container
|
|
105
|
-
const hostElement = componentRef.location.nativeElement;
|
|
106
|
-
this.contentContainerEl.nativeElement.appendChild(hostElement);
|
|
107
|
-
// Subscribe to close event if available
|
|
108
|
-
const instance = componentRef.instance;
|
|
109
|
-
if (instance.onClosed) {
|
|
110
|
-
instance.onClosed.subscribe((e) => {
|
|
52
|
+
else if (typeof this.data.content === 'function') {
|
|
53
|
+
this._selectedPortal = new ComponentPortal(this.data.content);
|
|
54
|
+
this.cdr.markForCheck();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
/** @ignore */
|
|
58
|
+
_handleAttched(ref) {
|
|
59
|
+
ref = ref;
|
|
60
|
+
if (ref.instance) {
|
|
61
|
+
this._componentRef = ref.instance;
|
|
62
|
+
Object.assign(this._componentRef, this.data.data);
|
|
63
|
+
Object.assign(this._componentRef, { _isPopup: true });
|
|
64
|
+
Object.assign(this._componentRef, {
|
|
65
|
+
setTitle: (title) => {
|
|
66
|
+
this.data.title = title;
|
|
67
|
+
},
|
|
68
|
+
});
|
|
69
|
+
if (ref.instance.onClosed) {
|
|
70
|
+
ref.instance.onClosed.subscribe((e) => {
|
|
111
71
|
this.close(e.data);
|
|
112
72
|
});
|
|
113
73
|
}
|
|
114
|
-
this.handleContentRendered();
|
|
115
74
|
}
|
|
116
|
-
}
|
|
117
|
-
/** @ignore */
|
|
118
|
-
handleContentRendered() {
|
|
119
75
|
this._zone.runOutsideAngular(() => {
|
|
120
76
|
setTimeout(() => {
|
|
121
77
|
const body = this.getHostElement().querySelector('.ax-popup-body-container');
|
|
122
|
-
if (!body)
|
|
123
|
-
return;
|
|
124
78
|
const content = body.children[0];
|
|
125
|
-
if (!content)
|
|
126
|
-
return;
|
|
127
79
|
const popHeader = this.getHostElement().querySelector('.ax-popup-header-container');
|
|
128
80
|
const popFooter = this.getHostElement().querySelector('.ax-popup-footer-container');
|
|
129
81
|
const footer = content.querySelector(':scope > ax-footer');
|
|
130
82
|
const header = content.querySelector(':scope > ax-header');
|
|
131
|
-
if (footer
|
|
132
|
-
popFooter
|
|
83
|
+
if (footer) {
|
|
84
|
+
popFooter?.append(footer);
|
|
133
85
|
}
|
|
134
|
-
if (header
|
|
86
|
+
if (header) {
|
|
135
87
|
popHeader.innerHTML = '';
|
|
136
88
|
popHeader.append(header);
|
|
137
89
|
}
|
|
@@ -142,9 +94,9 @@ class AXPopupComponent extends MXBaseComponent {
|
|
|
142
94
|
this.cdr.markForCheck();
|
|
143
95
|
}
|
|
144
96
|
/** @ignore */
|
|
145
|
-
onKeydownHandler() {
|
|
97
|
+
onKeydownHandler(event) {
|
|
146
98
|
const focusedOrHasFocused = this.getHostElement().matches(':focus-within');
|
|
147
|
-
if (this.
|
|
99
|
+
if (this.data.closeButton && focusedOrHasFocused) {
|
|
148
100
|
this.close();
|
|
149
101
|
}
|
|
150
102
|
}
|
|
@@ -155,10 +107,6 @@ class AXPopupComponent extends MXBaseComponent {
|
|
|
155
107
|
/** @ignore */
|
|
156
108
|
ngOnDestroy() {
|
|
157
109
|
this.loadingService.hide(this._loadingId);
|
|
158
|
-
if (this._componentRef) {
|
|
159
|
-
this._componentRef.destroy();
|
|
160
|
-
this._componentRef = null;
|
|
161
|
-
}
|
|
162
110
|
}
|
|
163
111
|
/**
|
|
164
112
|
* Sets focus on the `.ax-popup` element within the host element after a short delay.
|
|
@@ -167,20 +115,23 @@ class AXPopupComponent extends MXBaseComponent {
|
|
|
167
115
|
setTimeout(() => this.getHostElement().querySelector('.ax-popup')?.focus());
|
|
168
116
|
}
|
|
169
117
|
/**
|
|
170
|
-
* Closes the
|
|
118
|
+
* Closes the dialog, emitting component reference, host element, and optional data.
|
|
171
119
|
* @param {unknown} [data]
|
|
172
120
|
*/
|
|
173
121
|
close(data) {
|
|
174
122
|
const closeFn = () => {
|
|
175
|
-
this.
|
|
123
|
+
this.dialogRef.close({
|
|
124
|
+
component: this._componentRef,
|
|
125
|
+
htmlElement: this.getHostElement(),
|
|
126
|
+
data: data,
|
|
127
|
+
});
|
|
176
128
|
};
|
|
177
|
-
|
|
178
|
-
if (typeof componentInstance?.onClosing === 'function') {
|
|
129
|
+
if (typeof this._componentRef?.onClosing === 'function') {
|
|
179
130
|
const ee = {
|
|
180
131
|
cancel: false,
|
|
181
132
|
data,
|
|
182
133
|
};
|
|
183
|
-
const closingResult =
|
|
134
|
+
const closingResult = this._componentRef?.onClosing(ee);
|
|
184
135
|
if (closingResult instanceof Promise) {
|
|
185
136
|
closingResult.then(() => {
|
|
186
137
|
if (!ee.cancel) {
|
|
@@ -198,215 +149,31 @@ class AXPopupComponent extends MXBaseComponent {
|
|
|
198
149
|
closeFn();
|
|
199
150
|
}
|
|
200
151
|
}
|
|
201
|
-
/**
|
|
202
|
-
* Sets inputs on the content component.
|
|
203
|
-
* @param values - Object containing input values to set
|
|
204
|
-
*/
|
|
205
|
-
setContentInputs(values) {
|
|
206
|
-
const componentRef = this._componentRef;
|
|
207
|
-
if (componentRef) {
|
|
208
|
-
Object.entries(values).forEach(([key, value]) => {
|
|
209
|
-
componentRef.setInput(key, value);
|
|
210
|
-
});
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
/**
|
|
214
|
-
* Sets the popup title.
|
|
215
|
-
* @param title - The new title
|
|
216
|
-
*/
|
|
217
|
-
setTitle(title) {
|
|
218
|
-
this.title.set(title);
|
|
219
|
-
this.cdr.markForCheck();
|
|
220
|
-
}
|
|
221
|
-
// Drag functionality
|
|
222
|
-
onDragStart(event) {
|
|
223
|
-
const config = this.__config__();
|
|
224
|
-
if (!config?.draggable)
|
|
225
|
-
return;
|
|
226
|
-
this.isDragging.set(true);
|
|
227
|
-
this.dragStartPos = { x: event.clientX, y: event.clientY };
|
|
228
|
-
const popup = this.getHostElement().querySelector('.ax-popup');
|
|
229
|
-
if (popup) {
|
|
230
|
-
const rect = popup.getBoundingClientRect();
|
|
231
|
-
this.elementStartPos = { x: rect.left, y: rect.top };
|
|
232
|
-
}
|
|
233
|
-
event.preventDefault();
|
|
234
|
-
}
|
|
235
|
-
onDragMove(event) {
|
|
236
|
-
if (!this.isDragging())
|
|
237
|
-
return;
|
|
238
|
-
const deltaX = event.clientX - this.dragStartPos.x;
|
|
239
|
-
const deltaY = event.clientY - this.dragStartPos.y;
|
|
240
|
-
this.dragOffset.set({
|
|
241
|
-
x: this.elementStartPos.x + deltaX,
|
|
242
|
-
y: this.elementStartPos.y + deltaY,
|
|
243
|
-
});
|
|
244
|
-
}
|
|
245
|
-
onDragEnd() {
|
|
246
|
-
this.isDragging.set(false);
|
|
247
|
-
}
|
|
248
152
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
249
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXPopupComponent, isStandalone: true, selector: "ax-popup",
|
|
153
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXPopupComponent, isStandalone: true, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [
|
|
250
154
|
{ provide: AXClosableComponent, useExisting: AXPopupComponent },
|
|
251
155
|
{ provide: AXComponent, useExisting: AXPopupComponent },
|
|
252
|
-
],
|
|
156
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\n <div class=\"ax-popup ax-popup-{{ data.size }}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!data.draggable\">\n <div cdkDragHandle class=\"ax-popup-header-container\">\n @if (data.header) {\n <div class=\"ax-popup-header\">\n <span class=\"ax-popup-title\">{{ data.title | translate | async }}</span>\n @if (data.closeButton) {\n <ax-close-button tabindex=\"1\"></ax-close-button>\n }\n </div>\n }\n </div>\n <div class=\"ax-popup-main-container ax-loading-container\">\n <div class=\"ax-popup-body-container\">\n <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n </div>\n <div class=\"ax-popup-footer-container\"></div>\n </div>\n </div>\n</div>\n", styles: [":root{--ax-comp-popup-border-radius: var(--ax-sys-border-radius);--ax-comp-popup-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-lighter-surface)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));margin-left:auto;margin-right:auto;display:flex;width:auto;flex-direction:column;overflow:hidden;border-radius:var(--ax-comp-popup-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));padding:0;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);outline:2px solid transparent;outline-offset:2px;color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{background-color:rgba(var(--ax-comp-popup-header-bg-color))}.ax-popup .ax-popup-header-container .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-comp-popup-header-border-color));padding:.75rem}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1rem;font-weight:500}@media (min-width: 768px){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1.125rem;line-height:1.75rem}}.ax-popup ax-footer{box-shadow:0 2px 10px #0000004d;display:flex;align-items:center;justify-content:space-between;border-top-width:1px;border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color));padding:.75rem}.ax-popup:focus{outline:2px solid transparent;outline-offset:2px}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{flex:1 1 0%;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media (min-width: 320px) and (max-width: 640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:fit-content;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-body-container>ng-component>div{width:100%}}@media (min-width: 768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media (min-width: 1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media (min-width: 1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}.ax-dark .ax-popup{--ax-comp-popup-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-dark-surface)}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
253
157
|
}
|
|
254
158
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupComponent, decorators: [{
|
|
255
159
|
type: Component,
|
|
256
160
|
args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
257
161
|
{ provide: AXClosableComponent, useExisting: AXPopupComponent },
|
|
258
162
|
{ provide: AXComponent, useExisting: AXPopupComponent },
|
|
259
|
-
], imports: [
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
163
|
+
], imports: [
|
|
164
|
+
CdkTrapFocus,
|
|
165
|
+
CdkDrag,
|
|
166
|
+
CdkDragHandle,
|
|
167
|
+
AXDecoratorCloseButtonComponent,
|
|
168
|
+
CdkPortalOutlet,
|
|
169
|
+
AsyncPipe,
|
|
170
|
+
AXTranslatorPipe,
|
|
171
|
+
], template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\n <div class=\"ax-popup ax-popup-{{ data.size }}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!data.draggable\">\n <div cdkDragHandle class=\"ax-popup-header-container\">\n @if (data.header) {\n <div class=\"ax-popup-header\">\n <span class=\"ax-popup-title\">{{ data.title | translate | async }}</span>\n @if (data.closeButton) {\n <ax-close-button tabindex=\"1\"></ax-close-button>\n }\n </div>\n }\n </div>\n <div class=\"ax-popup-main-container ax-loading-container\">\n <div class=\"ax-popup-body-container\">\n <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n </div>\n <div class=\"ax-popup-footer-container\"></div>\n </div>\n </div>\n</div>\n", styles: [":root{--ax-comp-popup-border-radius: var(--ax-sys-border-radius);--ax-comp-popup-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-lighter-surface)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));margin-left:auto;margin-right:auto;display:flex;width:auto;flex-direction:column;overflow:hidden;border-radius:var(--ax-comp-popup-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));padding:0;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);outline:2px solid transparent;outline-offset:2px;color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{background-color:rgba(var(--ax-comp-popup-header-bg-color))}.ax-popup .ax-popup-header-container .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-comp-popup-header-border-color));padding:.75rem}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1rem;font-weight:500}@media (min-width: 768px){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1.125rem;line-height:1.75rem}}.ax-popup ax-footer{box-shadow:0 2px 10px #0000004d;display:flex;align-items:center;justify-content:space-between;border-top-width:1px;border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color));padding:.75rem}.ax-popup:focus{outline:2px solid transparent;outline-offset:2px}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{flex:1 1 0%;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media (min-width: 320px) and (max-width: 640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:fit-content;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-body-container>ng-component>div{width:100%}}@media (min-width: 768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media (min-width: 1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media (min-width: 1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}.ax-dark .ax-popup{--ax-comp-popup-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-dark-surface)}\n"] }]
|
|
172
|
+
}], propDecorators: { onKeydownHandler: [{
|
|
267
173
|
type: HostListener,
|
|
268
|
-
args: ['keydown.escape']
|
|
269
|
-
}], onDragMove: [{
|
|
270
|
-
type: HostListener,
|
|
271
|
-
args: ['document:mousemove', ['$event']]
|
|
272
|
-
}], onDragEnd: [{
|
|
273
|
-
type: HostListener,
|
|
274
|
-
args: ['document:mouseup']
|
|
174
|
+
args: ['keydown.escape', ['$event']]
|
|
275
175
|
}] } });
|
|
276
176
|
|
|
277
|
-
class AXPopupStateService {
|
|
278
|
-
constructor() {
|
|
279
|
-
this.popupList = new Map();
|
|
280
|
-
this.overlayService = inject(AXOverlayService);
|
|
281
|
-
}
|
|
282
|
-
/**
|
|
283
|
-
* Opens a popup with the specified content and configuration.
|
|
284
|
-
* @param content - Component or template to display
|
|
285
|
-
* @param config - Configuration options for the popup
|
|
286
|
-
* @returns Promise<AXPopupRef> - Reference to the opened popup
|
|
287
|
-
*/
|
|
288
|
-
async open(content, config) {
|
|
289
|
-
const randomId = Math.floor(Math.random() * 100000000000);
|
|
290
|
-
const onClose = new Subject();
|
|
291
|
-
const returnRef = {
|
|
292
|
-
close: (data) => {
|
|
293
|
-
this.close(randomId, data);
|
|
294
|
-
},
|
|
295
|
-
setInputs: (values) => {
|
|
296
|
-
this.setInputs(randomId, values);
|
|
297
|
-
},
|
|
298
|
-
setTitle: (title) => {
|
|
299
|
-
this.setTitle(randomId, title);
|
|
300
|
-
},
|
|
301
|
-
bringToFront: () => {
|
|
302
|
-
this.bringToFront(randomId);
|
|
303
|
-
},
|
|
304
|
-
onClose,
|
|
305
|
-
};
|
|
306
|
-
// Build panel classes
|
|
307
|
-
const panelClasses = ['ax-popup-overlay'];
|
|
308
|
-
if (config.panelClass) {
|
|
309
|
-
panelClasses.push(...config.panelClass);
|
|
310
|
-
}
|
|
311
|
-
const ref = await this.overlayService.create(AXPopupComponent, {
|
|
312
|
-
backdrop: {
|
|
313
|
-
enabled: config.hasBackdrop ?? true,
|
|
314
|
-
background: true,
|
|
315
|
-
closeOnClick: config.closeOnBackdropClick ?? false,
|
|
316
|
-
},
|
|
317
|
-
panelClass: panelClasses,
|
|
318
|
-
inputs: {
|
|
319
|
-
__content__: content,
|
|
320
|
-
__config__: config,
|
|
321
|
-
__popupRef__: returnRef,
|
|
322
|
-
__id__: randomId,
|
|
323
|
-
},
|
|
324
|
-
});
|
|
325
|
-
this.popupList.set(randomId, { overlay: ref, popup: returnRef });
|
|
326
|
-
return returnRef;
|
|
327
|
-
}
|
|
328
|
-
/**
|
|
329
|
-
* Closes a popup by its ID.
|
|
330
|
-
* @param id - The popup ID to close
|
|
331
|
-
* @param data - Optional data to pass to the close event
|
|
332
|
-
*/
|
|
333
|
-
async close(id, data) {
|
|
334
|
-
const ref = this.popupList.get(id);
|
|
335
|
-
if (!ref)
|
|
336
|
-
return;
|
|
337
|
-
ref.popup.onClose.next(data);
|
|
338
|
-
ref.popup.onClose.complete();
|
|
339
|
-
ref.overlay.dispose();
|
|
340
|
-
this.popupList.delete(id);
|
|
341
|
-
}
|
|
342
|
-
/**
|
|
343
|
-
* Sets input values for a popup by its ID.
|
|
344
|
-
* @param id - The popup ID
|
|
345
|
-
* @param values - Object containing input values to set
|
|
346
|
-
*/
|
|
347
|
-
async setInputs(id, values) {
|
|
348
|
-
const ref = this.popupList.get(id)?.overlay.instance;
|
|
349
|
-
if (!ref)
|
|
350
|
-
return;
|
|
351
|
-
if (ref instanceof ComponentRef) {
|
|
352
|
-
const componentInstance = ref.instance;
|
|
353
|
-
componentInstance.setContentInputs(values);
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
/**
|
|
357
|
-
* Sets the title for a popup by its ID.
|
|
358
|
-
* @param id - The popup ID
|
|
359
|
-
* @param title - The new title
|
|
360
|
-
*/
|
|
361
|
-
async setTitle(id, title) {
|
|
362
|
-
const ref = this.popupList.get(id)?.overlay.instance;
|
|
363
|
-
if (!ref)
|
|
364
|
-
return;
|
|
365
|
-
if (ref instanceof ComponentRef) {
|
|
366
|
-
const componentInstance = ref.instance;
|
|
367
|
-
componentInstance.setTitle(title);
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
/**
|
|
371
|
-
* Brings a popup to the front of all other overlays.
|
|
372
|
-
* @param id - The popup ID to bring to front
|
|
373
|
-
*/
|
|
374
|
-
bringToFront(id) {
|
|
375
|
-
const ref = this.popupList.get(id);
|
|
376
|
-
if (!ref)
|
|
377
|
-
return;
|
|
378
|
-
ref.overlay.bringToFront();
|
|
379
|
-
}
|
|
380
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
381
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupStateService, providedIn: 'root' }); }
|
|
382
|
-
}
|
|
383
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupStateService, decorators: [{
|
|
384
|
-
type: Injectable,
|
|
385
|
-
args: [{
|
|
386
|
-
providedIn: 'root',
|
|
387
|
-
}]
|
|
388
|
-
}] });
|
|
389
|
-
|
|
390
|
-
class AXPopupComponentBase {
|
|
391
|
-
constructor() {
|
|
392
|
-
this.__popup__ = input(...(ngDevMode ? [undefined, { debugName: "__popup__" }] : []));
|
|
393
|
-
}
|
|
394
|
-
close(data = null) {
|
|
395
|
-
this.__popup__().close(data);
|
|
396
|
-
}
|
|
397
|
-
setTitle(title) {
|
|
398
|
-
this.__popup__().setTitle(title);
|
|
399
|
-
}
|
|
400
|
-
bringToFront() {
|
|
401
|
-
this.__popup__().bringToFront();
|
|
402
|
-
}
|
|
403
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
404
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: AXPopupComponentBase, isStandalone: true, inputs: { __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
405
|
-
}
|
|
406
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupComponentBase, decorators: [{
|
|
407
|
-
type: Directive
|
|
408
|
-
}], propDecorators: { __popup__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__popup__", required: false }] }] } });
|
|
409
|
-
|
|
410
177
|
/**
|
|
411
178
|
* This is a service which you can create popup with it
|
|
412
179
|
*
|
|
@@ -414,8 +181,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
414
181
|
*/
|
|
415
182
|
class AXPopupService {
|
|
416
183
|
constructor() {
|
|
417
|
-
this.
|
|
184
|
+
this.dialog = inject(Dialog);
|
|
185
|
+
this.#platform = inject(AXPlatform);
|
|
418
186
|
}
|
|
187
|
+
#platform;
|
|
419
188
|
/**
|
|
420
189
|
* @ignore
|
|
421
190
|
*/
|
|
@@ -436,16 +205,28 @@ class AXPopupService {
|
|
|
436
205
|
else {
|
|
437
206
|
config = Object.assign(config, arg2);
|
|
438
207
|
}
|
|
208
|
+
const dialogRef = this.dialog.open(AXPopupComponent, {
|
|
209
|
+
data: Object.assign(config, { content: arg1 }),
|
|
210
|
+
autoFocus: true,
|
|
211
|
+
restoreFocus: true,
|
|
212
|
+
closeOnNavigation: true,
|
|
213
|
+
closeOnDestroy: true,
|
|
214
|
+
hasBackdrop: config.hasBackdrop,
|
|
215
|
+
backdropClass: config.backdropClass,
|
|
216
|
+
disableClose: config.closeOnBackdropClick ? false : true,
|
|
217
|
+
viewContainerRef: config.viewContainerRef,
|
|
218
|
+
providers: config.providers,
|
|
219
|
+
panelClass: config.panelClass ? config.panelClass : [this.#platform.isDark() ? 'ax-dark' : ''],
|
|
220
|
+
direction: config.direction ? config.direction : AXHtmlUtil.isRtl() ? 'rtl' : 'ltr',
|
|
221
|
+
});
|
|
439
222
|
const promise = new AXComponentClosedPromise((resolve) => {
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
}
|
|
448
|
-
});
|
|
223
|
+
dialogRef.closed.subscribe((d) => {
|
|
224
|
+
if (resolve) {
|
|
225
|
+
resolve({
|
|
226
|
+
sender: d?.component,
|
|
227
|
+
data: d?.data,
|
|
228
|
+
});
|
|
229
|
+
}
|
|
449
230
|
});
|
|
450
231
|
});
|
|
451
232
|
return promise;
|
|
@@ -458,10 +239,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
458
239
|
}] });
|
|
459
240
|
|
|
460
241
|
const COMPONENT = [AXPopupComponent];
|
|
461
|
-
const MODULES = [
|
|
242
|
+
const MODULES = [
|
|
243
|
+
CommonModule,
|
|
244
|
+
AXCommonModule,
|
|
245
|
+
DragDropModule,
|
|
246
|
+
A11yModule,
|
|
247
|
+
PortalModule,
|
|
248
|
+
AXDecoratorModule,
|
|
249
|
+
DialogModule,
|
|
250
|
+
AXTranslationModule,
|
|
251
|
+
];
|
|
462
252
|
class AXPopupModule {
|
|
463
253
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
464
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXPopupModule, imports: [CommonModule,
|
|
254
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXPopupModule, imports: [CommonModule,
|
|
255
|
+
AXCommonModule,
|
|
256
|
+
DragDropModule,
|
|
257
|
+
A11yModule,
|
|
258
|
+
PortalModule,
|
|
259
|
+
AXDecoratorModule,
|
|
260
|
+
DialogModule,
|
|
261
|
+
AXTranslationModule, AXPopupComponent], exports: [AXPopupComponent] }); }
|
|
465
262
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [MODULES, COMPONENT] }); }
|
|
466
263
|
}
|
|
467
264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupModule, decorators: [{
|
|
@@ -477,5 +274,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
477
274
|
* Generated bundle index. Do not edit.
|
|
478
275
|
*/
|
|
479
276
|
|
|
480
|
-
export { AXPopupComponent,
|
|
277
|
+
export { AXPopupComponent, AXPopupModule, AXPopupService };
|
|
481
278
|
//# sourceMappingURL=acorex-components-popup.mjs.map
|