@acorex/components 21.0.1-next.4 → 21.0.1-next.5
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 +119 -6
- 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 +58 -2
- 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
|
@@ -3,12 +3,12 @@ import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
|
|
|
3
3
|
import { AXDecoratorGenericComponent, AXDecoratorModule } from '@acorex/components/decorators';
|
|
4
4
|
import { AXLoadingComponent, AXLoadingModule } from '@acorex/components/loading';
|
|
5
5
|
import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
|
|
6
|
+
import { DIALOG_DATA, DialogRef, Dialog, DialogModule } from '@angular/cdk/dialog';
|
|
6
7
|
import { CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
|
|
7
8
|
import { AsyncPipe, CommonModule } from '@angular/common';
|
|
8
9
|
import * as i0 from '@angular/core';
|
|
9
|
-
import {
|
|
10
|
+
import { inject, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Injectable, NgModule } from '@angular/core';
|
|
10
11
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
11
|
-
import { AXOverlayService } from '@acorex/cdk/overlay';
|
|
12
12
|
import { AXHtmlUtil } from '@acorex/core/utils';
|
|
13
13
|
import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
|
|
14
14
|
import { set } from 'lodash-es';
|
|
@@ -20,10 +20,8 @@ import { set } from 'lodash-es';
|
|
|
20
20
|
class AXDialogComponent extends MXBaseComponent {
|
|
21
21
|
constructor() {
|
|
22
22
|
super(...arguments);
|
|
23
|
-
|
|
24
|
-
this.
|
|
25
|
-
/** @internal Callback function to close the dialog */
|
|
26
|
-
this.onClose = input(...(ngDevMode ? [undefined, { debugName: "onClose" }] : []));
|
|
23
|
+
this.data = inject(DIALOG_DATA);
|
|
24
|
+
this.dialogRef = inject(DialogRef);
|
|
27
25
|
}
|
|
28
26
|
/**
|
|
29
27
|
* @ignore
|
|
@@ -37,15 +35,14 @@ class AXDialogComponent extends MXBaseComponent {
|
|
|
37
35
|
* @ignore
|
|
38
36
|
*/
|
|
39
37
|
_hasAutoFocus(button) {
|
|
40
|
-
const
|
|
41
|
-
const autoFocusItem = buttons.find((item) => item.autofocus === true);
|
|
38
|
+
const autoFocusItem = this.data.buttons.find((item) => item.autofocus === true);
|
|
42
39
|
if (autoFocusItem && autoFocusItem.text === button.text) {
|
|
43
40
|
return true;
|
|
44
41
|
}
|
|
45
42
|
if (!autoFocusItem) {
|
|
46
|
-
if (buttons.length > 0) {
|
|
47
|
-
buttons[0].autofocus = true;
|
|
48
|
-
return buttons[0].text === button.text;
|
|
43
|
+
if (this.data.buttons.length > 0) {
|
|
44
|
+
this.data.buttons[0].autofocus = true;
|
|
45
|
+
return this.data.buttons[0].text === button.text;
|
|
49
46
|
}
|
|
50
47
|
}
|
|
51
48
|
return false;
|
|
@@ -56,13 +53,20 @@ class AXDialogComponent extends MXBaseComponent {
|
|
|
56
53
|
* @returns void - No return value. The dialog is closed and removed from the DOM.
|
|
57
54
|
*/
|
|
58
55
|
close() {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
this.dialogRef.close();
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* @ignore
|
|
60
|
+
*/
|
|
61
|
+
get tabIndex() {
|
|
62
|
+
return '-1';
|
|
63
|
+
}
|
|
64
|
+
/** @ignore */
|
|
65
|
+
get __hostClass() {
|
|
66
|
+
return `ax-${this.data.type}`;
|
|
63
67
|
}
|
|
64
68
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
65
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXDialogComponent, isStandalone: true, selector: "ax-dialog",
|
|
69
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXDialogComponent, isStandalone: true, selector: "ax-dialog", host: { properties: { "attr.tabIndex": "this.tabIndex", "class": "this.__hostClass" } }, providers: [
|
|
66
70
|
{
|
|
67
71
|
provide: AXClosableComponent,
|
|
68
72
|
useExisting: AXDialogComponent,
|
|
@@ -71,14 +75,11 @@ class AXDialogComponent extends MXBaseComponent {
|
|
|
71
75
|
provide: AXComponent,
|
|
72
76
|
useExisting: AXDialogComponent,
|
|
73
77
|
},
|
|
74
|
-
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax-dialog ax-orientation-{{ data
|
|
78
|
+
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax-dialog ax-orientation-{{ data.orientation }}\"\n tabindex=\"-1\"\n cdkDrag\n cdkDragHandle\n [cdkDragDisabled]=\"!data.draggable\"\n>\n <div class=\"ax-dialog-content-wrapper\">\n @if (data.icon !== 'none') {\n <div class=\"ax-dialog-icon-side\">\n <i class=\"ax-dialog-icon {{ data.icon }}\"></i>\n </div>\n }\n <div class=\"ax-dialog-content-side\">\n <div class=\"ax-dialog-title\">{{ data.title | translate | async }}</div>\n <div class=\"ax-dialog-content\">{{ data.content | translate | async }}</div>\n </div>\n <div class=\"ax-dialog-dismiss-icon\">\n @if (data.closeButton) {\n <i class=\"ax-icon ax-icon-close\"></i>\n }\n </div>\n </div>\n\n <ax-footer>\n @for (button of data.buttons; let i = $index; track i) {\n <ax-button\n [text]=\"button.text | translate | async\"\n [tabindex]=\"i\"\n [axHotkey]=\"button.hotkey\"\n [axAutoFocus]=\"_hasAutoFocus(button)\"\n (onClick)=\"_handleButtonClick(button)\"\n [look]=\"button.look\"\n [disabled]=\"button.disabled\"\n [color]=\"button.color\"\n >\n @if (button.loading) {\n <ax-loading></ax-loading>\n }\n </ax-button>\n }\n </ax-footer>\n</div>\n", styles: ["ax-dialog.ax-primary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-primary-surface)}ax-dialog.ax-secondary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-secondary-surface)}ax-dialog.ax-success{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-success-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-success-surface)}ax-dialog.ax-warning{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-warning-surface)}ax-dialog.ax-danger{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-danger-surface)}ax-dialog.ax-accent1{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent1-surface)}ax-dialog.ax-accent2{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent2-surface)}ax-dialog.ax-accent3{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent3-surface)}ax-dialog.ax-accent4{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent4-surface)}ax-dialog.ax-accent5{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent5-surface)}ax-dialog.ax-accent6{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent6-surface)}ax-dialog.ax-accent7{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent7-surface)}.ax-dialog{position:relative;display:flex;width:93vw;flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface));outline:2px solid transparent;outline-offset:2px}@media (min-width: 768px){.ax-dialog{width:75vw}}@media (min-width: 1024px){.ax-dialog{width:50vw}}@media (min-width: 1280px){.ax-dialog{width:35vw}}@media (min-width: 1536px){.ax-dialog{width:25vw}}.ax-dialog.ax-orientation-horizontal .ax-dialog-content-wrapper{flex-direction:row}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper{flex-direction:column;align-items:center}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-icon-side{margin-bottom:1rem}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-content-side{margin:0;text-align:center}.ax-dialog.ax-orientation-vertical ax-footer ax-button{flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper{display:flex;gap:.5rem;padding:1.5rem 1.5rem 1rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-icon-side .ax-dialog-icon{background-color:rgba(var(--ax-comp-dialog-icon-bg-color));color:rgba(var(--ax-comp-dialog-icon-text-color));border-width:1px;border-color:rgba(var(--ax-comp-dialog-border-color));border-style:solid;display:flex;height:3rem;width:3rem;cursor:move;align-items:center;justify-content:center;border-radius:9999px;font-size:1.5rem;line-height:2rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side{margin-inline-start:1rem;flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.5rem;font-weight:500}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-content{font-size:.875rem;line-height:1.25rem}.ax-dialog ax-footer{justify-content:flex-end;padding:.75rem 1.5rem}\n"], dependencies: [{ 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: 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: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXHotkeyDirective, selector: "[axHotkey]", inputs: ["axHotkey"] }, { kind: "directive", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
75
79
|
}
|
|
76
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDialogComponent, decorators: [{
|
|
77
81
|
type: Component,
|
|
78
|
-
args: [{ selector: 'ax-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None,
|
|
79
|
-
'[attr.tabIndex]': '"-1"',
|
|
80
|
-
'[class]': '"ax-" + data().type',
|
|
81
|
-
}, providers: [
|
|
82
|
+
args: [{ selector: 'ax-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
82
83
|
{
|
|
83
84
|
provide: AXClosableComponent,
|
|
84
85
|
useExisting: AXDialogComponent,
|
|
@@ -97,8 +98,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
97
98
|
AXLoadingComponent,
|
|
98
99
|
AsyncPipe,
|
|
99
100
|
AXTranslatorPipe,
|
|
100
|
-
], template: "<div\n class=\"ax-dialog ax-orientation-{{ data
|
|
101
|
-
}], propDecorators: {
|
|
101
|
+
], template: "<div\n class=\"ax-dialog ax-orientation-{{ data.orientation }}\"\n tabindex=\"-1\"\n cdkDrag\n cdkDragHandle\n [cdkDragDisabled]=\"!data.draggable\"\n>\n <div class=\"ax-dialog-content-wrapper\">\n @if (data.icon !== 'none') {\n <div class=\"ax-dialog-icon-side\">\n <i class=\"ax-dialog-icon {{ data.icon }}\"></i>\n </div>\n }\n <div class=\"ax-dialog-content-side\">\n <div class=\"ax-dialog-title\">{{ data.title | translate | async }}</div>\n <div class=\"ax-dialog-content\">{{ data.content | translate | async }}</div>\n </div>\n <div class=\"ax-dialog-dismiss-icon\">\n @if (data.closeButton) {\n <i class=\"ax-icon ax-icon-close\"></i>\n }\n </div>\n </div>\n\n <ax-footer>\n @for (button of data.buttons; let i = $index; track i) {\n <ax-button\n [text]=\"button.text | translate | async\"\n [tabindex]=\"i\"\n [axHotkey]=\"button.hotkey\"\n [axAutoFocus]=\"_hasAutoFocus(button)\"\n (onClick)=\"_handleButtonClick(button)\"\n [look]=\"button.look\"\n [disabled]=\"button.disabled\"\n [color]=\"button.color\"\n >\n @if (button.loading) {\n <ax-loading></ax-loading>\n }\n </ax-button>\n }\n </ax-footer>\n</div>\n", styles: ["ax-dialog.ax-primary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-primary-surface)}ax-dialog.ax-secondary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-secondary-surface)}ax-dialog.ax-success{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-success-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-success-surface)}ax-dialog.ax-warning{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-warning-surface)}ax-dialog.ax-danger{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-danger-surface)}ax-dialog.ax-accent1{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent1-surface)}ax-dialog.ax-accent2{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent2-surface)}ax-dialog.ax-accent3{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent3-surface)}ax-dialog.ax-accent4{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent4-surface)}ax-dialog.ax-accent5{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent5-surface)}ax-dialog.ax-accent6{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent6-surface)}ax-dialog.ax-accent7{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent7-surface)}.ax-dialog{position:relative;display:flex;width:93vw;flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface));outline:2px solid transparent;outline-offset:2px}@media (min-width: 768px){.ax-dialog{width:75vw}}@media (min-width: 1024px){.ax-dialog{width:50vw}}@media (min-width: 1280px){.ax-dialog{width:35vw}}@media (min-width: 1536px){.ax-dialog{width:25vw}}.ax-dialog.ax-orientation-horizontal .ax-dialog-content-wrapper{flex-direction:row}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper{flex-direction:column;align-items:center}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-icon-side{margin-bottom:1rem}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-content-side{margin:0;text-align:center}.ax-dialog.ax-orientation-vertical ax-footer ax-button{flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper{display:flex;gap:.5rem;padding:1.5rem 1.5rem 1rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-icon-side .ax-dialog-icon{background-color:rgba(var(--ax-comp-dialog-icon-bg-color));color:rgba(var(--ax-comp-dialog-icon-text-color));border-width:1px;border-color:rgba(var(--ax-comp-dialog-border-color));border-style:solid;display:flex;height:3rem;width:3rem;cursor:move;align-items:center;justify-content:center;border-radius:9999px;font-size:1.5rem;line-height:2rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side{margin-inline-start:1rem;flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.5rem;font-weight:500}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-content{font-size:.875rem;line-height:1.25rem}.ax-dialog ax-footer{justify-content:flex-end;padding:.75rem 1.5rem}\n"] }]
|
|
102
|
+
}], propDecorators: { tabIndex: [{
|
|
103
|
+
type: HostBinding,
|
|
104
|
+
args: ['attr.tabIndex']
|
|
105
|
+
}], __hostClass: [{
|
|
106
|
+
type: HostBinding,
|
|
107
|
+
args: ['class']
|
|
108
|
+
}] } });
|
|
102
109
|
|
|
103
110
|
const AX_DIALOG_CONFIG = new InjectionToken('AX_DIALOG_CONFIG', {
|
|
104
111
|
providedIn: 'root',
|
|
@@ -126,7 +133,7 @@ function dialogConfig(config = {}) {
|
|
|
126
133
|
*/
|
|
127
134
|
class AXDialogService {
|
|
128
135
|
constructor() {
|
|
129
|
-
this.
|
|
136
|
+
this.dialog = inject(Dialog);
|
|
130
137
|
this.defaultConfig = inject(AX_DIALOG_CONFIG);
|
|
131
138
|
}
|
|
132
139
|
detectIcon(type) {
|
|
@@ -287,51 +294,21 @@ class AXDialogService {
|
|
|
287
294
|
open(config) {
|
|
288
295
|
config.orientation = config.orientation || 'horizontal';
|
|
289
296
|
config.icon = config.icon ?? this.detectIcon(config.type);
|
|
290
|
-
const
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
const closeDialog = () => {
|
|
302
|
-
if (internalRef) {
|
|
303
|
-
internalRef.overlayRef.dispose();
|
|
304
|
-
}
|
|
305
|
-
};
|
|
306
|
-
this.overlayService
|
|
307
|
-
.create(AXDialogComponent, {
|
|
308
|
-
inputs: {
|
|
309
|
-
data: dialogData,
|
|
310
|
-
onClose: closeDialog,
|
|
311
|
-
},
|
|
312
|
-
backdrop: {
|
|
313
|
-
enabled: true,
|
|
314
|
-
background: true,
|
|
315
|
-
closeOnClick: false, // disableClose: true equivalent
|
|
316
|
-
},
|
|
317
|
-
panelClass: ['ax-dialog-panel', 'ax-animate-bounceIn', 'ax-animate-faster'],
|
|
318
|
-
})
|
|
319
|
-
.then((overlayRef) => {
|
|
320
|
-
internalRef = {
|
|
321
|
-
overlayRef,
|
|
322
|
-
close: closeDialog,
|
|
323
|
-
};
|
|
324
|
-
// Apply direction if specified
|
|
325
|
-
if (config.direction || AXHtmlUtil.isRtl()) {
|
|
326
|
-
const dir = config.direction ? config.direction : AXHtmlUtil.isRtl() ? 'rtl' : 'ltr';
|
|
327
|
-
if (overlayRef.overlayElement) {
|
|
328
|
-
overlayRef.overlayElement.setAttribute('dir', dir);
|
|
329
|
-
}
|
|
330
|
-
}
|
|
297
|
+
const dialogRef = this.dialog.open(AXDialogComponent, {
|
|
298
|
+
data: config,
|
|
299
|
+
role: 'alertdialog',
|
|
300
|
+
ariaModal: true,
|
|
301
|
+
restoreFocus: true,
|
|
302
|
+
closeOnNavigation: true,
|
|
303
|
+
closeOnDestroy: true,
|
|
304
|
+
hasBackdrop: true,
|
|
305
|
+
disableClose: true,
|
|
306
|
+
panelClass: ['ax-animate-bounceIn', 'ax-animate-faster'],
|
|
307
|
+
direction: config.direction ? config.direction : AXHtmlUtil.isRtl() ? 'rtl' : 'ltr',
|
|
331
308
|
});
|
|
332
309
|
return {
|
|
333
310
|
close: () => {
|
|
334
|
-
|
|
311
|
+
dialogRef.componentInstance?.close();
|
|
335
312
|
},
|
|
336
313
|
};
|
|
337
314
|
}
|
|
@@ -351,6 +328,7 @@ const MODULES = [
|
|
|
351
328
|
AXButtonModule,
|
|
352
329
|
AXDecoratorModule,
|
|
353
330
|
AXLoadingModule,
|
|
331
|
+
DialogModule,
|
|
354
332
|
AXTranslationModule,
|
|
355
333
|
];
|
|
356
334
|
class AXDialogModule {
|
|
@@ -362,6 +340,7 @@ class AXDialogModule {
|
|
|
362
340
|
AXButtonModule,
|
|
363
341
|
AXDecoratorModule,
|
|
364
342
|
AXLoadingModule,
|
|
343
|
+
DialogModule,
|
|
365
344
|
AXTranslationModule, AXDialogComponent], exports: [AXDialogComponent] }); }
|
|
366
345
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDialogModule, providers: [AXDialogService, AXHotkeysService], imports: [MODULES, COMPONENT] }); }
|
|
367
346
|
}
|