@acorex/components 7.5.1 → 7.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/badge/lib/badge.component.d.ts +3 -3
- package/button/lib/button-item.component.d.ts +3 -1
- package/calendar/lib/calendar.component.d.ts +6 -4
- package/chips/lib/chips.component.d.ts +1 -1
- package/collapse/lib/collapse.component.d.ts +15 -2
- package/collapse/lib/collapse.module.d.ts +2 -1
- package/common/index.d.ts +1 -0
- package/common/lib/classes/datalist.class.d.ts +0 -31
- package/common/lib/classes/datasource.class.d.ts +55 -0
- package/common/lib/classes/styles.class.d.ts +1 -1
- package/common/lib/components/interactive-component.class.d.ts +1 -7
- package/common/lib/components/selection-base.component.class.d.ts +4 -6
- package/common/lib/directives/ripple.directive.d.ts +2 -1
- package/datetime-box/lib/datetime-box.component.d.ts +2 -1
- package/datetime-input/lib/datetime-input.component.d.ts +2 -1
- package/esm2022/action-sheet/lib/action-sheet.component.mjs +2 -2
- package/esm2022/alert/lib/alert.component.mjs +4 -5
- package/esm2022/avatar/lib/avatar.component.mjs +4 -4
- package/esm2022/badge/lib/badge.component.mjs +6 -6
- package/esm2022/button/lib/button-item.component.mjs +12 -3
- package/esm2022/button/lib/button.component.mjs +2 -2
- package/esm2022/button-group/lib/button-group.component.mjs +2 -2
- package/esm2022/calendar/lib/calendar.class.mjs +1 -58
- package/esm2022/calendar/lib/calendar.component.mjs +27 -16
- package/esm2022/chips/lib/chips.component.mjs +4 -4
- package/esm2022/collapse/lib/collapse-group.component.mjs +8 -4
- package/esm2022/collapse/lib/collapse.component.mjs +63 -15
- package/esm2022/collapse/lib/collapse.module.mjs +5 -4
- package/esm2022/color-box/lib/color-box.module.mjs +1 -1
- package/esm2022/common/index.mjs +2 -1
- package/esm2022/common/lib/classes/datalist.class.mjs +2 -41
- package/esm2022/common/lib/classes/datasource.class.mjs +106 -0
- package/esm2022/common/lib/classes/styles.class.mjs +1 -1
- package/esm2022/common/lib/components/interactive-component.class.mjs +13 -13
- package/esm2022/common/lib/components/selection-base.component.class.mjs +55 -27
- package/esm2022/common/lib/directives/ripple.directive.mjs +14 -8
- package/esm2022/datetime-box/lib/datetime-box.component.mjs +6 -3
- package/esm2022/datetime-input/lib/datetime-input.component.mjs +11 -4
- package/esm2022/datetime-picker/lib/datetime-picker.component.mjs +3 -3
- package/esm2022/list/lib/list.component.mjs +34 -60
- package/esm2022/menu/index.mjs +1 -2
- package/esm2022/menu/lib/class/root-menu.class.mjs +1 -1
- package/esm2022/menu/lib/menu-item/menu-item.component.mjs +60 -18
- package/esm2022/menu/lib/menu.component.mjs +37 -342
- package/esm2022/menu/lib/menu.module.mjs +3 -4
- package/esm2022/notification/lib/notification.component.mjs +2 -2
- package/esm2022/otp/lib/otp.component.mjs +4 -3
- package/esm2022/otp/lib/otp.module.mjs +4 -3
- package/esm2022/picker/lib/picker.component.mjs +2 -2
- package/esm2022/progress-bar/lib/progress-bar.component.mjs +2 -2
- package/esm2022/range-slider/lib/range-slider.component.mjs +2 -2
- package/esm2022/routing-progress/lib/routing-progress.component.mjs +3 -3
- package/esm2022/search-box/lib/search-box.component.mjs +5 -4
- package/esm2022/select-box/index.mjs +2 -2
- package/esm2022/select-box/lib/select-box.component.mjs +168 -308
- package/esm2022/select-box/lib/select-box.module.mjs +5 -6
- package/esm2022/selection-list/lib/selection-list.component.mjs +11 -1
- package/esm2022/side-menu/acorex-components-side-menu.mjs +5 -0
- package/esm2022/side-menu/index.mjs +4 -0
- package/esm2022/side-menu/lib/side-menu-item/side-menu-item.compoent.mjs +116 -0
- package/esm2022/side-menu/lib/side-menu.component.mjs +15 -0
- package/esm2022/side-menu/lib/side-menu.module.mjs +23 -0
- package/esm2022/skeleton/acorex-components-skeleton.mjs +5 -0
- package/esm2022/skeleton/index.mjs +3 -0
- package/esm2022/skeleton/lib/skeleton.component.mjs +24 -0
- package/esm2022/skeleton/lib/skeleton.module.mjs +18 -0
- package/esm2022/tabs/lib/tab-item.component.mjs +9 -2
- package/esm2022/tag/lib/tag.component.mjs +6 -12
- package/esm2022/toast/lib/toast.component.mjs +3 -3
- package/fesm2022/acorex-components-action-sheet.mjs +2 -2
- package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
- package/fesm2022/acorex-components-alert.mjs +3 -4
- package/fesm2022/acorex-components-alert.mjs.map +1 -1
- package/fesm2022/acorex-components-avatar.mjs +3 -3
- package/fesm2022/acorex-components-avatar.mjs.map +1 -1
- package/fesm2022/acorex-components-badge.mjs +5 -5
- package/fesm2022/acorex-components-badge.mjs.map +1 -1
- package/fesm2022/acorex-components-button-group.mjs +2 -2
- package/fesm2022/acorex-components-button-group.mjs.map +1 -1
- package/fesm2022/acorex-components-button.mjs +13 -4
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-calendar.mjs +27 -73
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-chips.mjs +3 -3
- package/fesm2022/acorex-components-chips.mjs.map +1 -1
- package/fesm2022/acorex-components-collapse.mjs +74 -21
- package/fesm2022/acorex-components-collapse.mjs.map +1 -1
- package/fesm2022/acorex-components-color-box.mjs.map +1 -1
- package/fesm2022/acorex-components-common.mjs +161 -62
- package/fesm2022/acorex-components-common.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-box.mjs +5 -2
- package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-input.mjs +10 -3
- package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-picker.mjs +2 -2
- package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-list.mjs +33 -59
- package/fesm2022/acorex-components-list.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +78 -381
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-notification.mjs +2 -2
- package/fesm2022/acorex-components-notification.mjs.map +1 -1
- package/fesm2022/acorex-components-otp.mjs +6 -4
- package/fesm2022/acorex-components-otp.mjs.map +1 -1
- package/fesm2022/acorex-components-picker.mjs +2 -2
- package/fesm2022/acorex-components-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-progress-bar.mjs +2 -2
- package/fesm2022/acorex-components-progress-bar.mjs.map +1 -1
- package/fesm2022/acorex-components-range-slider.mjs +2 -2
- package/fesm2022/acorex-components-range-slider.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-search-box.mjs +4 -4
- package/fesm2022/acorex-components-search-box.mjs.map +1 -1
- package/fesm2022/acorex-components-select-box.mjs +96 -417
- package/fesm2022/acorex-components-select-box.mjs.map +1 -1
- package/fesm2022/acorex-components-selection-list.mjs +10 -0
- package/fesm2022/acorex-components-selection-list.mjs.map +1 -1
- package/fesm2022/acorex-components-side-menu.mjs +153 -0
- package/fesm2022/acorex-components-side-menu.mjs.map +1 -0
- package/fesm2022/acorex-components-skeleton.mjs +46 -0
- package/fesm2022/acorex-components-skeleton.mjs.map +1 -0
- package/fesm2022/acorex-components-tabs.mjs +8 -1
- package/fesm2022/acorex-components-tabs.mjs.map +1 -1
- package/fesm2022/acorex-components-tag.mjs +5 -11
- package/fesm2022/acorex-components-tag.mjs.map +1 -1
- package/fesm2022/acorex-components-toast.mjs +2 -2
- package/fesm2022/acorex-components-toast.mjs.map +1 -1
- package/list/lib/list.component.d.ts +11 -23
- package/menu/index.d.ts +0 -1
- package/menu/lib/class/root-menu.class.d.ts +2 -0
- package/menu/lib/menu-item/menu-item.component.d.ts +19 -6
- package/menu/lib/menu.component.d.ts +10 -40
- package/menu/lib/menu.module.d.ts +7 -8
- package/mixin/lib/base-components.class.d.ts +2 -2
- package/mixin/lib/base-menu-mixin.class.d.ts +5 -5
- package/mixin/lib/button-mixin.class.d.ts +2 -2
- package/mixin/lib/clickable-mixin.class.d.ts +2 -2
- package/mixin/lib/color-look-mixing.class.d.ts +2 -2
- package/mixin/lib/datalist-component.class.d.ts +10 -10
- package/mixin/lib/dropdown-mixin.class.d.ts +2 -2
- package/mixin/lib/interactive-mixin.class.d.ts +4 -4
- package/mixin/lib/mixin.class.d.ts +61 -61
- package/mixin/lib/page-component.class.d.ts +2 -2
- package/mixin/lib/selection-component.class.d.ts +2 -2
- package/mixin/lib/sizable-mixin.class.d.ts +2 -2
- package/mixin/lib/textbox-mixin.class.d.ts +2 -2
- package/mixin/lib/value-mixin.class.d.ts +8 -8
- package/otp/lib/otp.module.d.ts +2 -1
- package/package.json +13 -7
- package/search-box/lib/search-box.component.d.ts +2 -1
- package/select-box/index.d.ts +1 -1
- package/select-box/lib/select-box.component.d.ts +37 -59
- package/select-box/lib/select-box.module.d.ts +14 -15
- package/selection-list/lib/selection-list.component.d.ts +3 -0
- package/side-menu/README.md +3 -0
- package/side-menu/index.d.ts +3 -0
- package/side-menu/lib/side-menu-item/side-menu-item.compoent.d.ts +37 -0
- package/side-menu/lib/side-menu.component.d.ts +8 -0
- package/side-menu/lib/side-menu.module.d.ts +10 -0
- package/skeleton/README.md +3 -0
- package/skeleton/index.d.ts +2 -0
- package/skeleton/lib/skeleton.component.d.ts +8 -0
- package/skeleton/lib/skeleton.module.d.ts +8 -0
- package/tabs/lib/tab-item.component.d.ts +2 -1
- package/tag/lib/tag.component.d.ts +3 -4
- package/context-menu/README.md +0 -3
- package/context-menu/index.d.ts +0 -2
- package/context-menu/lib/context-menu.component.d.ts +0 -34
- package/context-menu/lib/context-menu.module.d.ts +0 -13
- package/esm2022/context-menu/acorex-components-context-menu.mjs +0 -5
- package/esm2022/context-menu/index.mjs +0 -3
- package/esm2022/context-menu/lib/context-menu.component.mjs +0 -262
- package/esm2022/context-menu/lib/context-menu.module.mjs +0 -26
- package/esm2022/menu/lib/menu2.component.mjs +0 -45
- package/esm2022/select-box/lib/select-box2.component.mjs +0 -191
- package/fesm2022/acorex-components-context-menu.mjs +0 -290
- package/fesm2022/acorex-components-context-menu.mjs.map +0 -1
- package/menu/lib/menu2.component.d.ts +0 -12
- package/select-box/lib/select-box2.component.d.ts +0 -44
@@ -1,31 +1,51 @@
|
|
1
|
-
import { MXBaseComponent } from '@acorex/components/common';
|
1
|
+
import { MXInteractiveComponent, MXBaseComponent } from '@acorex/components/common';
|
2
2
|
import * as i2 from '@acorex/components/popover';
|
3
3
|
import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
|
4
4
|
import * as i0 from '@angular/core';
|
5
|
-
import { inject, Component, ViewChild, Input, ContentChildren, HostBinding,
|
6
|
-
import * as
|
5
|
+
import { EventEmitter, inject, Component, ViewChild, Input, Output, ContentChildren, HostBinding, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
|
6
|
+
import * as i1 from '@angular/common';
|
7
7
|
import { CommonModule } from '@angular/common';
|
8
|
-
import * as i1 from '@angular/cdk/overlay';
|
9
|
-
import { OverlayModule } from '@angular/cdk/overlay';
|
10
|
-
import { ComponentPortal } from '@angular/cdk/portal';
|
11
|
-
import { AXBaseMenuMixin } from '@acorex/components/mixin';
|
12
|
-
import * as i2$1 from '@acorex/core/platform';
|
13
|
-
import { AXPlatform } from '@acorex/core/platform';
|
14
|
-
import * as i5 from '@acorex/core/translation';
|
15
|
-
import { AXTranslator, AXTranslationModule } from '@acorex/core/translation';
|
16
|
-
import * as i4 from '@acorex/components/loading';
|
17
|
-
import { AXLoadingModule } from '@acorex/components/loading';
|
18
8
|
import { AXDecoratorModule } from '@acorex/components/decorators';
|
9
|
+
import { AXLoadingModule } from '@acorex/components/loading';
|
10
|
+
import { AXTranslationModule } from '@acorex/core/translation';
|
11
|
+
import { OverlayModule } from '@angular/cdk/overlay';
|
19
12
|
|
20
13
|
class AXRootMenu {
|
21
14
|
}
|
22
15
|
|
23
|
-
class AXMenuItemComponent extends
|
16
|
+
class AXMenuItemComponent extends MXInteractiveComponent {
|
24
17
|
constructor() {
|
25
18
|
super(...arguments);
|
19
|
+
this.activeChange = new EventEmitter();
|
20
|
+
this._active = false;
|
21
|
+
this.onClick = new EventEmitter();
|
26
22
|
this.isRoot = false;
|
27
23
|
this.rootMenu = inject(AXRootMenu);
|
28
24
|
}
|
25
|
+
/**
|
26
|
+
* Providing a string value for its text state
|
27
|
+
*/
|
28
|
+
get text() {
|
29
|
+
return this._text;
|
30
|
+
}
|
31
|
+
set text(v) {
|
32
|
+
this.setOption({
|
33
|
+
name: 'text',
|
34
|
+
value: v,
|
35
|
+
});
|
36
|
+
}
|
37
|
+
/**
|
38
|
+
* Providing a string value for its text state
|
39
|
+
*/
|
40
|
+
get active() {
|
41
|
+
return this._active;
|
42
|
+
}
|
43
|
+
set active(v) {
|
44
|
+
this.setOption({
|
45
|
+
name: 'active',
|
46
|
+
value: v,
|
47
|
+
});
|
48
|
+
}
|
29
49
|
ngAfterViewInit() {
|
30
50
|
this.children.forEach((c) => {
|
31
51
|
c.parent = this;
|
@@ -42,16 +62,16 @@ class AXMenuItemComponent extends MXBaseComponent {
|
|
42
62
|
// });
|
43
63
|
// }
|
44
64
|
_handleOnOpened() {
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
65
|
+
this.parent.children.forEach((c) => {
|
66
|
+
if (c != this) {
|
67
|
+
c.close();
|
68
|
+
}
|
69
|
+
});
|
50
70
|
}
|
51
71
|
_handleOnClosed() {
|
52
|
-
|
53
|
-
|
54
|
-
|
72
|
+
this.children.forEach((c) => {
|
73
|
+
c.close();
|
74
|
+
});
|
55
75
|
}
|
56
76
|
getIcon() {
|
57
77
|
switch (this.rootMenu.oriatation) {
|
@@ -84,375 +104,50 @@ class AXMenuItemComponent extends MXBaseComponent {
|
|
84
104
|
}
|
85
105
|
}
|
86
106
|
get __hostClass() {
|
87
|
-
return [`${this.disabled ? 'ax-state-disabled' : ''}`];
|
107
|
+
return [`${this.disabled ? 'ax-state-disabled' : ''}`, `${this.active ? 'ax-state-active' : ''}`];
|
108
|
+
}
|
109
|
+
__hostClick(e) {
|
110
|
+
if (!this.disabled) {
|
111
|
+
this.onClick.emit({
|
112
|
+
component: this,
|
113
|
+
htmlElement: this.getHostElement(),
|
114
|
+
nativeEvent: e,
|
115
|
+
});
|
116
|
+
}
|
88
117
|
}
|
89
118
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
90
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: { text: "text",
|
119
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: { disabled: "disabled", text: "text", active: "active" }, outputs: { activeChange: "activeChange", onClick: "onClick" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "children", predicate: AXMenuItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-menu-item-text\">{{ text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n<i class=\"ax-icon {{ getIcon() }} ax-menu-item-child-icon\" *ngIf=\"children.length\"></i>\n\n<ax-popover\n [closeOn]=\"'clickOut'\"\n [openOn]=\"rootMenu.openOn\"\n [target]=\"getHostElement()\"\n [offsetY]=\"isRoot ? 8 : 0\"\n [offsetX]=\"isRoot ? 0 : 4\"\n [placement]=\"getPlacement()\"\n (onOpened)=\"_handleOnOpened()\"\n (onClosed)=\"_handleOnClosed()\"\n>\n <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.oriatation }}\">\n <ng-content select=\"ax-menu-item\"></ng-content>\n </div>\n</ax-popover>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }] }); }
|
91
120
|
}
|
92
121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuItemComponent, decorators: [{
|
93
122
|
type: Component,
|
94
|
-
args: [{ selector: 'ax-menu-item', template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-menu-item-text\">{{ text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n<i class=\"ax-icon {{ getIcon() }} ax-menu-item-child-icon\" *ngIf=\"children.length\"></i>\n\n<ax-popover\n [closeOn]=\"'clickOut'\"\n [openOn]=\"
|
123
|
+
args: [{ selector: 'ax-menu-item', inputs: ['disabled'], template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-menu-item-text\">{{ text }}</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n<i class=\"ax-icon {{ getIcon() }} ax-menu-item-child-icon\" *ngIf=\"children.length\"></i>\n\n<ax-popover\n [closeOn]=\"'clickOut'\"\n [openOn]=\"rootMenu.openOn\"\n [target]=\"getHostElement()\"\n [offsetY]=\"isRoot ? 8 : 0\"\n [offsetX]=\"isRoot ? 0 : 4\"\n [placement]=\"getPlacement()\"\n (onOpened)=\"_handleOnOpened()\"\n (onClosed)=\"_handleOnClosed()\"\n>\n <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.oriatation }}\">\n <ng-content select=\"ax-menu-item\"></ng-content>\n </div>\n</ax-popover>\n" }]
|
95
124
|
}], propDecorators: { popover: [{
|
96
125
|
type: ViewChild,
|
97
126
|
args: [AXPopoverComponent]
|
98
127
|
}], text: [{
|
99
|
-
type: Input,
|
100
|
-
args: [{ required: true }]
|
101
|
-
}], disabled: [{
|
102
128
|
type: Input
|
129
|
+
}], activeChange: [{
|
130
|
+
type: Output
|
131
|
+
}], active: [{
|
132
|
+
type: Input
|
133
|
+
}], onClick: [{
|
134
|
+
type: Output
|
103
135
|
}], children: [{
|
104
136
|
type: ContentChildren,
|
105
137
|
args: [AXMenuItemComponent]
|
106
138
|
}], __hostClass: [{
|
107
139
|
type: HostBinding,
|
108
140
|
args: ['class']
|
141
|
+
}], __hostClick: [{
|
142
|
+
type: HostListener,
|
143
|
+
args: ['click', ['$event']]
|
109
144
|
}] } });
|
110
145
|
|
111
|
-
|
112
|
-
* The Button is a component which detects user interaction and triggers a corresponding event
|
113
|
-
*
|
114
|
-
* @category Components
|
115
|
-
*/
|
116
|
-
class AXMenuComponent extends AXBaseMenuMixin {
|
117
|
-
get emptyTemplate() {
|
118
|
-
return this._contentEmptyTemplate;
|
119
|
-
}
|
120
|
-
get itemTemplate() {
|
121
|
-
return this._contentItemTemplate;
|
122
|
-
}
|
123
|
-
constructor(_elementRef, cdr, _overlay, _platform) {
|
124
|
-
super(_elementRef, cdr);
|
125
|
-
this._elementRef = _elementRef;
|
126
|
-
this.cdr = cdr;
|
127
|
-
this._overlay = _overlay;
|
128
|
-
this._platform = _platform;
|
129
|
-
this.isRtl = new AXPlatform().isRtl();
|
130
|
-
this._levelCount = 0;
|
131
|
-
this._loadingOptions = {
|
132
|
-
text: AXTranslator.get('layout.loading.text'),
|
133
|
-
};
|
134
|
-
}
|
135
|
-
onInit() {
|
136
|
-
super.onInit();
|
137
|
-
}
|
138
|
-
ngAfterViewInit() {
|
139
|
-
super.onViewInit();
|
140
|
-
}
|
141
|
-
_onMenuMouseEnter(e, item) {
|
142
|
-
const targetElement = e.target;
|
143
|
-
if (this.isLoading || targetElement.tagName === 'UL') {
|
144
|
-
return;
|
145
|
-
}
|
146
|
-
if (this.openMode === 'hover') {
|
147
|
-
this._handelMenuLogic(e, item);
|
148
|
-
}
|
149
|
-
e.stopPropagation();
|
150
|
-
e.preventDefault();
|
151
|
-
}
|
152
|
-
_onMenuClick(e, item) {
|
153
|
-
const targetElement = e.target;
|
154
|
-
if (this.isLoading || targetElement.tagName === 'UL') {
|
155
|
-
return;
|
156
|
-
}
|
157
|
-
if (this.openMode === 'click') {
|
158
|
-
this._handelMenuLogic(e, item);
|
159
|
-
}
|
160
|
-
this.onMenuItemClick.emit({
|
161
|
-
component: this,
|
162
|
-
item: item,
|
163
|
-
nativeEvent: e,
|
164
|
-
});
|
165
|
-
e.stopPropagation();
|
166
|
-
e.preventDefault();
|
167
|
-
}
|
168
|
-
_getDirection() {
|
169
|
-
if (this.displayMode === 'horizontal' && this._levelCount === 0) {
|
170
|
-
return 'ax-horizontal';
|
171
|
-
}
|
172
|
-
else if (this._levelCount > 0) {
|
173
|
-
return 'ax-vertical ax-submenu-ul';
|
174
|
-
}
|
175
|
-
else if (this.displayMode === 'sidemenu') {
|
176
|
-
return 'ax-side-menu';
|
177
|
-
}
|
178
|
-
else {
|
179
|
-
return 'ax-vertical';
|
180
|
-
}
|
181
|
-
}
|
182
|
-
// private _removeActive(items: any): void {
|
183
|
-
// items.forEach((element) => {
|
184
|
-
// element.active = false;
|
185
|
-
// if (element?.children?.length > 0) {
|
186
|
-
// this._removeActive(element.children);
|
187
|
-
// }
|
188
|
-
// });
|
189
|
-
// }
|
190
|
-
_closeOpenChild(items) {
|
191
|
-
items.forEach((element) => {
|
192
|
-
element.opened = false;
|
193
|
-
if (element?.children?.length > 0) {
|
194
|
-
this._closeOpenChild(element.children);
|
195
|
-
}
|
196
|
-
});
|
197
|
-
}
|
198
|
-
_initParent(items, parentId) {
|
199
|
-
items.forEach((element) => {
|
200
|
-
element.parentId = parentId;
|
201
|
-
});
|
202
|
-
}
|
203
|
-
_handelMenuLogic(e, item) {
|
204
|
-
if (!item[this.disableField] || item[this.dividerField] === false) {
|
205
|
-
const targetElement = e.target;
|
206
|
-
if ((targetElement.closest('li') && this.openMode === 'click') ||
|
207
|
-
(targetElement.closest('li') && this.openMode === 'hover')) {
|
208
|
-
if (this._overlayRef && this._oldItem !== item) {
|
209
|
-
this._overlayRef.detach();
|
210
|
-
}
|
211
|
-
if (this.displayMode === 'horizontal') {
|
212
|
-
this.displayItems.forEach((element) => {
|
213
|
-
if (!item.parentId && item[this.valueField] !== element[this.valueField]) {
|
214
|
-
element.opened = false;
|
215
|
-
}
|
216
|
-
});
|
217
|
-
}
|
218
|
-
if (item?.children?.length > 0) {
|
219
|
-
if (this.displayMode === 'horizontal') {
|
220
|
-
this._initParent(item.children, item[this.valueField]);
|
221
|
-
}
|
222
|
-
if (this.displayMode === 'horizontal' || this.displayMode === 'vertical') {
|
223
|
-
if (this._oldItem !== item) {
|
224
|
-
this._openAsOverlay(targetElement.closest('li'), item.children);
|
225
|
-
}
|
226
|
-
}
|
227
|
-
this._closeOpenChild(item.children);
|
228
|
-
if (this.displayMode === 'horizontal' || this.displayMode === 'vertical') {
|
229
|
-
item.opened = true;
|
230
|
-
}
|
231
|
-
else {
|
232
|
-
item.opened = !item.opened;
|
233
|
-
}
|
234
|
-
}
|
235
|
-
if (this.displayMode === 'horizontal' || this.displayMode === 'vertical') {
|
236
|
-
if (this._oldItem &&
|
237
|
-
this._oldItem?.opened &&
|
238
|
-
item[this.valueField] !== this._oldItem[this.valueField]) {
|
239
|
-
this._oldItem.opened = false;
|
240
|
-
}
|
241
|
-
this._oldItem = item;
|
242
|
-
}
|
243
|
-
}
|
244
|
-
}
|
245
|
-
}
|
246
|
-
_openAsOverlay(targetRef, overlayItems) {
|
247
|
-
let positions = [];
|
248
|
-
if (this.displayMode === 'vertical') {
|
249
|
-
if (this._levelCount >= 1) {
|
250
|
-
positions = [
|
251
|
-
{
|
252
|
-
originX: 'end',
|
253
|
-
originY: 'center',
|
254
|
-
overlayX: 'start',
|
255
|
-
overlayY: 'top',
|
256
|
-
},
|
257
|
-
{
|
258
|
-
originX: 'end',
|
259
|
-
originY: 'center',
|
260
|
-
overlayX: 'start',
|
261
|
-
overlayY: 'bottom',
|
262
|
-
},
|
263
|
-
{
|
264
|
-
originX: 'center',
|
265
|
-
originY: 'center',
|
266
|
-
overlayX: 'center',
|
267
|
-
overlayY: 'center',
|
268
|
-
},
|
269
|
-
];
|
270
|
-
}
|
271
|
-
else {
|
272
|
-
positions = [
|
273
|
-
{
|
274
|
-
originX: 'end',
|
275
|
-
originY: 'center',
|
276
|
-
overlayX: 'start',
|
277
|
-
overlayY: 'top',
|
278
|
-
},
|
279
|
-
{
|
280
|
-
originX: 'end',
|
281
|
-
originY: 'top',
|
282
|
-
overlayX: 'start',
|
283
|
-
overlayY: 'bottom',
|
284
|
-
},
|
285
|
-
{
|
286
|
-
originX: 'center',
|
287
|
-
originY: 'center',
|
288
|
-
overlayX: 'center',
|
289
|
-
overlayY: 'center',
|
290
|
-
},
|
291
|
-
];
|
292
|
-
}
|
293
|
-
}
|
294
|
-
else {
|
295
|
-
if (this._levelCount >= 1) {
|
296
|
-
positions = [
|
297
|
-
{
|
298
|
-
originX: 'end',
|
299
|
-
originY: 'top',
|
300
|
-
overlayX: 'start',
|
301
|
-
overlayY: 'top',
|
302
|
-
},
|
303
|
-
{
|
304
|
-
originX: 'end',
|
305
|
-
originY: 'center',
|
306
|
-
overlayX: 'start',
|
307
|
-
overlayY: 'bottom',
|
308
|
-
},
|
309
|
-
{
|
310
|
-
originX: 'end',
|
311
|
-
originY: 'top',
|
312
|
-
overlayX: 'center',
|
313
|
-
overlayY: 'top',
|
314
|
-
},
|
315
|
-
{
|
316
|
-
originX: 'center',
|
317
|
-
originY: 'top',
|
318
|
-
overlayX: 'center',
|
319
|
-
overlayY: 'top',
|
320
|
-
},
|
321
|
-
];
|
322
|
-
}
|
323
|
-
else {
|
324
|
-
positions = [
|
325
|
-
{
|
326
|
-
originX: 'start',
|
327
|
-
originY: 'bottom',
|
328
|
-
overlayX: 'start',
|
329
|
-
overlayY: 'top',
|
330
|
-
},
|
331
|
-
{
|
332
|
-
originX: 'end',
|
333
|
-
originY: 'center',
|
334
|
-
overlayX: 'start',
|
335
|
-
overlayY: 'bottom',
|
336
|
-
},
|
337
|
-
{
|
338
|
-
originX: 'end',
|
339
|
-
originY: 'top',
|
340
|
-
overlayX: 'center',
|
341
|
-
overlayY: 'top',
|
342
|
-
},
|
343
|
-
{
|
344
|
-
originX: 'center',
|
345
|
-
originY: 'top',
|
346
|
-
overlayX: 'center',
|
347
|
-
overlayY: 'top',
|
348
|
-
},
|
349
|
-
];
|
350
|
-
}
|
351
|
-
}
|
352
|
-
this._overlayRef = this._overlay.create({
|
353
|
-
scrollStrategy: this._overlay.scrollStrategies.close(),
|
354
|
-
positionStrategy: this._overlay
|
355
|
-
.position()
|
356
|
-
.flexibleConnectedTo(targetRef)
|
357
|
-
.withPositions([...positions])
|
358
|
-
.withPush(false)
|
359
|
-
.withDefaultOffsetX(12),
|
360
|
-
direction: this._platform.isRtl() ? 'rtl' : 'ltr',
|
361
|
-
disposeOnNavigation: true,
|
362
|
-
panelClass: ['ax-animate-fadeIn', 'ax-animate-faster', 'ax-overlay-menu'],
|
363
|
-
maxHeight: 'unset',
|
364
|
-
hasBackdrop: false,
|
365
|
-
backdropClass: ['cdk-overlay-transparent-backdrop'],
|
366
|
-
});
|
367
|
-
const ref = this._overlayRef.attach(new ComponentPortal(AXMenuComponent));
|
368
|
-
ref.instance.items = overlayItems;
|
369
|
-
ref.instance.displayMode = this.displayMode;
|
370
|
-
ref.instance.openMode = 'hover';
|
371
|
-
ref.instance._levelCount = this._levelCount + 1;
|
372
|
-
ref.instance.disableField = this.disableField;
|
373
|
-
ref.instance.visibleField = this.visibleField;
|
374
|
-
ref.instance.valueField = this.valueField;
|
375
|
-
ref.instance.textField = this.textField;
|
376
|
-
ref.instance.iconField = this.iconField;
|
377
|
-
ref.instance.dividerField = this.dividerField;
|
378
|
-
ref.onDestroy(() => {
|
379
|
-
ref.instance?._overlayRef?.dispose();
|
380
|
-
});
|
381
|
-
this._overlayRef.outsidePointerEvents().subscribe((e) => {
|
382
|
-
if (this._overlayRef && this.openMode === 'click') {
|
383
|
-
this._close();
|
384
|
-
e.stopPropagation();
|
385
|
-
}
|
386
|
-
});
|
387
|
-
this._platform.scroll.subscribe(() => {
|
388
|
-
if (this._overlayRef) {
|
389
|
-
this._close();
|
390
|
-
}
|
391
|
-
});
|
392
|
-
this._platform.resize.subscribe(() => {
|
393
|
-
if (this._overlayRef) {
|
394
|
-
this._close();
|
395
|
-
}
|
396
|
-
});
|
397
|
-
}
|
398
|
-
_close() {
|
399
|
-
this._overlayRef.detach();
|
400
|
-
this._oldItem = null;
|
401
|
-
this.displayItems.forEach((element) => {
|
402
|
-
element.opened = false;
|
403
|
-
element.active = false;
|
404
|
-
});
|
405
|
-
this.cdr.detectChanges();
|
406
|
-
}
|
407
|
-
onDestroy() {
|
408
|
-
this._overlayRef?.detach();
|
409
|
-
}
|
410
|
-
isActive(item) {
|
411
|
-
if (typeof this.activeCallback == 'function') {
|
412
|
-
return this.activeCallback(item);
|
413
|
-
}
|
414
|
-
return false;
|
415
|
-
}
|
416
|
-
refresh() {
|
417
|
-
this.cdr.markForCheck();
|
418
|
-
}
|
419
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Overlay }, { token: i2$1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component }); }
|
420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", parentId: "parentId", iconField: "iconField", tooltip: "tooltip", opened: "opened", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", dividerField: "dividerField", openMode: "openMode", displayMode: "displayMode", showModal: "showModal", activeCallback: "activeCallback" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onMenuItemClick: "onMenuItemClick" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n <ul [ngClass]=\"_getDirection()\" [class.ax-rtl]=\"rtl\">\n <ng-container\n *ngTemplateOutlet=\"recursiveListTmpl; context: { list: displayItems, isRoot: true }\"\n ></ng-container>\n </ul>\n <ng-template #recursiveListTmpl let-list=\"list\" let-isRoot=\"isRoot\">\n <ng-container *ngFor=\"let item of list\">\n <li\n *ngIf=\"item[visibleField] !== false\"\n [class.ax-state-disabled]=\"item[disableField]\"\n (click)=\"_onMenuClick($event, item)\"\n >\n <div\n class=\"ax-menu-item\"\n [ngClass]=\"{\n 'ax-is-parent': item.children?.length,\n 'ax-is-child': !isRoot,\n 'ax-state-active ': item.isActive\n }\"\n *ngIf=\"itemTemplate == null; else tmpItem\"\n >\n <div class=\"ax-menu-item-prefix\">\n <span class=\"ax-menu-item-icon\" *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></span>\n <span>{{ _getItemDisplayTextTemplte(item) }}</span>\n </div>\n <div class=\"ax-menu-item-suffix\">\n <span\n class=\"ax-menu-item-icon ax-icon ax-menu-item-icon-chevron\"\n [ngClass]=\"{\n 'ax-icon-chevron-down': item?.children?.length > 0,\n 'ax-menu-active-icon': item.opened\n }\"\n *ngIf=\"!item.isLoading\"\n ></span>\n <ax-loading *ngIf=\"item.isLoading\"> </ax-loading>\n </div>\n </div>\n <!--------------- check for custom item template --------------->\n <ng-template #tmpItem>\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"> </ng-container>\n </ng-container>\n </ng-template>\n <ul\n *ngIf=\"item?.children?.length > 0 && item.opened && !_overlayRef\"\n [class.ax-state-disabled]=\"item[disableField]\"\n >\n <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: item.children }\">\n </ng-container>\n </ul>\n </li>\n <li class=\"ax-menu-item-divider\" *ngIf=\"item[this.dividerField]\"></li>\n </ng-container>\n </ng-template>\n</ng-container>\n<ng-container *ngIf=\"isLoading\">\n <ng-template>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n <ax-loading [context]=\"_loadingOptions\"></ax-loading>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #tmpEmpty>\n <ng-container *ngIf=\"!isLoading\">\n <!--------------- check for custom template --------------->\n <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n </ng-container>\n <ng-template #elseEmptyTemplate>\n {{ 'common.no-result-found' | trans }}\n </ng-template>\n </ng-container>\n</ng-template>\n", styles: ["ax-menu{font-size:.875rem;display:block}ax-menu ul{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column}ax-menu ul li.ax-state-active{color:rgba(var(--ax-color-primary-500))}ax-menu ul li .ax-menu-item{display:flex}ax-menu ul li .ax-menu-item.ax-state-active{color:rgba(var(--ax-color-primary-500))}ax-menu ul li .ax-menu-item .ax-menu-item-prefix,ax-menu ul li .ax-menu-item .ax-menu-item-suffix{display:flex;align-items:center;justify-content:center}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon-chevron,ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon-chevron{transform:rotate(-90deg)}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon:not(:empty),ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon:not(:empty){min-width:1.25rem;min-height:1.25rem}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon{padding-inline-end:.5rem}ax-menu ul li .ax-menu-item .ax-menu-item-icon{font-size:1.25rem}ax-menu ul li.ax-state-disabled{cursor:not-allowed!important;opacity:.5}ax-menu ul li.ax-state-active .ax-menu-item-icon-chevron{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-menu .ax-horizontal>li,ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-horizontal{flex-direction:row;align-items:center}ax-menu .ax-horizontal .ax-menu-item-divider{width:1px;height:1rem;background-color:rgba(var(--ax-color-border-default))}ax-menu .ax-horizontal li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-horizontal li:not(.ax-menu-item-divider){padding:.5rem;cursor:pointer}ax-menu .ax-vertical{flex-direction:column;width:100%}ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-vertical .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-border-default));margin:.375rem 0}ax-menu .ax-vertical li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-vertical li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul{background-color:rgba(var(--ax-color-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);padding:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}ax-menu .ax-vertical.ax-submenu-ul li{border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-menu-item-divider){padding:.5rem}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-state-disabled,.ax-menu-item-divider):hover{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore))}ax-menu .ax-side-menu{width:100%;flex-direction:column;gap:.5rem;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}ax-menu .ax-side-menu .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-border-default));margin:.375rem 0}ax-menu .ax-side-menu ul{display:flex;flex-direction:column;margin-top:.5rem;width:100%;padding-inline-start:.75rem}ax-menu .ax-side-menu li .ax-menu-item-icon-chevron.ax-menu-active-icon{transform:rotate(180deg)!important}ax-menu .ax-side-menu li .ax-menu-item{justify-content:space-between}ax-menu .ax-side-menu li .ax-menu-item.ax-is-parent{font-weight:500}ax-menu .ax-side-menu li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer;font-size:1rem}ax-menu .ax-side-menu li:not(.ax-menu-item-divider) .ax-is-child{font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
421
|
-
}
|
422
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuComponent, decorators: [{
|
423
|
-
type: Component,
|
424
|
-
args: [{ selector: 'ax-menu', inputs: [
|
425
|
-
'disabled',
|
426
|
-
'tabIndex',
|
427
|
-
'textField',
|
428
|
-
'valueField',
|
429
|
-
'items',
|
430
|
-
'parentId',
|
431
|
-
'iconField',
|
432
|
-
'tooltip',
|
433
|
-
'opened',
|
434
|
-
'visibleField',
|
435
|
-
'disableField',
|
436
|
-
'hasChildField',
|
437
|
-
'dividerField',
|
438
|
-
'openMode',
|
439
|
-
'displayMode',
|
440
|
-
'showModal',
|
441
|
-
], outputs: ['onBlur', 'onFocus', 'onMenuItemClick'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n <ul [ngClass]=\"_getDirection()\" [class.ax-rtl]=\"rtl\">\n <ng-container\n *ngTemplateOutlet=\"recursiveListTmpl; context: { list: displayItems, isRoot: true }\"\n ></ng-container>\n </ul>\n <ng-template #recursiveListTmpl let-list=\"list\" let-isRoot=\"isRoot\">\n <ng-container *ngFor=\"let item of list\">\n <li\n *ngIf=\"item[visibleField] !== false\"\n [class.ax-state-disabled]=\"item[disableField]\"\n (click)=\"_onMenuClick($event, item)\"\n >\n <div\n class=\"ax-menu-item\"\n [ngClass]=\"{\n 'ax-is-parent': item.children?.length,\n 'ax-is-child': !isRoot,\n 'ax-state-active ': item.isActive\n }\"\n *ngIf=\"itemTemplate == null; else tmpItem\"\n >\n <div class=\"ax-menu-item-prefix\">\n <span class=\"ax-menu-item-icon\" *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></span>\n <span>{{ _getItemDisplayTextTemplte(item) }}</span>\n </div>\n <div class=\"ax-menu-item-suffix\">\n <span\n class=\"ax-menu-item-icon ax-icon ax-menu-item-icon-chevron\"\n [ngClass]=\"{\n 'ax-icon-chevron-down': item?.children?.length > 0,\n 'ax-menu-active-icon': item.opened\n }\"\n *ngIf=\"!item.isLoading\"\n ></span>\n <ax-loading *ngIf=\"item.isLoading\"> </ax-loading>\n </div>\n </div>\n <!--------------- check for custom item template --------------->\n <ng-template #tmpItem>\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"> </ng-container>\n </ng-container>\n </ng-template>\n <ul\n *ngIf=\"item?.children?.length > 0 && item.opened && !_overlayRef\"\n [class.ax-state-disabled]=\"item[disableField]\"\n >\n <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context: { list: item.children }\">\n </ng-container>\n </ul>\n </li>\n <li class=\"ax-menu-item-divider\" *ngIf=\"item[this.dividerField]\"></li>\n </ng-container>\n </ng-template>\n</ng-container>\n<ng-container *ngIf=\"isLoading\">\n <ng-template>\n <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n <ax-loading [context]=\"_loadingOptions\"></ax-loading>\n </div>\n </ng-template>\n</ng-container>\n\n<ng-template #tmpEmpty>\n <ng-container *ngIf=\"!isLoading\">\n <!--------------- check for custom template --------------->\n <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n </ng-container>\n <ng-template #elseEmptyTemplate>\n {{ 'common.no-result-found' | trans }}\n </ng-template>\n </ng-container>\n</ng-template>\n", styles: ["ax-menu{font-size:.875rem;display:block}ax-menu ul{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column}ax-menu ul li.ax-state-active{color:rgba(var(--ax-color-primary-500))}ax-menu ul li .ax-menu-item{display:flex}ax-menu ul li .ax-menu-item.ax-state-active{color:rgba(var(--ax-color-primary-500))}ax-menu ul li .ax-menu-item .ax-menu-item-prefix,ax-menu ul li .ax-menu-item .ax-menu-item-suffix{display:flex;align-items:center;justify-content:center}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon-chevron,ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon-chevron{transform:rotate(-90deg)}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon:not(:empty),ax-menu ul li .ax-menu-item .ax-menu-item-suffix .ax-menu-item-icon:not(:empty){min-width:1.25rem;min-height:1.25rem}ax-menu ul li .ax-menu-item .ax-menu-item-prefix .ax-menu-item-icon{padding-inline-end:.5rem}ax-menu ul li .ax-menu-item .ax-menu-item-icon{font-size:1.25rem}ax-menu ul li.ax-state-disabled{cursor:not-allowed!important;opacity:.5}ax-menu ul li.ax-state-active .ax-menu-item-icon-chevron{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-menu .ax-horizontal>li,ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-horizontal{flex-direction:row;align-items:center}ax-menu .ax-horizontal .ax-menu-item-divider{width:1px;height:1rem;background-color:rgba(var(--ax-color-border-default))}ax-menu .ax-horizontal li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-horizontal li:not(.ax-menu-item-divider){padding:.5rem;cursor:pointer}ax-menu .ax-vertical{flex-direction:column;width:100%}ax-menu .ax-vertical>li{font-weight:500}ax-menu .ax-vertical .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-border-default));margin:.375rem 0}ax-menu .ax-vertical li.ax-state-active .ax-menu-item-icon-chevron{transform:rotate(0)!important}ax-menu .ax-vertical li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul{background-color:rgba(var(--ax-color-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);padding:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}ax-menu .ax-vertical.ax-submenu-ul li{border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-menu-item-divider){padding:.5rem}ax-menu .ax-vertical.ax-submenu-ul li:not(.ax-state-disabled,.ax-menu-item-divider):hover{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-on-surface-fore))}ax-menu .ax-side-menu{width:100%;flex-direction:column;gap:.5rem;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}ax-menu .ax-side-menu .ax-menu-item-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-border-default));margin:.375rem 0}ax-menu .ax-side-menu ul{display:flex;flex-direction:column;margin-top:.5rem;width:100%;padding-inline-start:.75rem}ax-menu .ax-side-menu li .ax-menu-item-icon-chevron.ax-menu-active-icon{transform:rotate(180deg)!important}ax-menu .ax-side-menu li .ax-menu-item{justify-content:space-between}ax-menu .ax-side-menu li .ax-menu-item.ax-is-parent{font-weight:500}ax-menu .ax-side-menu li:not(.ax-menu-item-divider){padding:.5rem 0;cursor:pointer;font-size:1rem}ax-menu .ax-side-menu li:not(.ax-menu-item-divider) .ax-is-child{font-size:.875rem}\n"] }]
|
442
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i2$1.AXPlatform }]; }, propDecorators: { activeCallback: [{
|
443
|
-
type: Input
|
444
|
-
}], _contentEmptyTemplate: [{
|
445
|
-
type: ContentChild,
|
446
|
-
args: ['emptyTemplate']
|
447
|
-
}], _contentItemTemplate: [{
|
448
|
-
type: ContentChild,
|
449
|
-
args: ['itemTemplate']
|
450
|
-
}] } });
|
451
|
-
|
452
|
-
class AXMenu2Component extends MXBaseComponent {
|
146
|
+
class AXMenuComponent extends MXBaseComponent {
|
453
147
|
constructor() {
|
454
148
|
super(...arguments);
|
455
149
|
this.oriatation = 'horizontal';
|
150
|
+
this.openOn = 'click';
|
456
151
|
}
|
457
152
|
ngAfterViewInit() {
|
458
153
|
this.children.forEach((c) => {
|
@@ -463,24 +158,26 @@ class AXMenu2Component extends MXBaseComponent {
|
|
463
158
|
get __hostClass() {
|
464
159
|
return `ax-oriatation-${this.oriatation}`;
|
465
160
|
}
|
466
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type:
|
467
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type:
|
161
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
162
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXMenuComponent, selector: "ax-menu", inputs: { oriatation: "oriatation", openOn: "openOn" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
|
468
163
|
{
|
469
164
|
provide: AXRootMenu,
|
470
|
-
useExisting:
|
165
|
+
useExisting: AXMenuComponent,
|
471
166
|
},
|
472
|
-
], queries: [{ propertyName: "children", predicate: AXMenuItemComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content select="ax-menu-item"></ng-content>`, isInline: true, styles: ["ax-
|
167
|
+
], queries: [{ propertyName: "children", predicate: AXMenuItemComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content select="ax-menu-item,ng-container"></ng-content>`, isInline: true, styles: ["ax-menu{font-size:.875em;width:100%;color:inherit}ax-menu.ax-oriatation-horizontal{display:flex}ax-menu.ax-oriatation-horizontal ax-menu-item:not(ax-menu.ax-oriatation-horizontal ax-menu-item:last-child){margin-inline-end:1.75rem}ax-menu.ax-oriatation-vertical{display:flex;flex-direction:column}ax-menu.ax-oriatation-vertical ax-menu-item{justify-content:space-between}ax-menu.ax-oriatation-vertical ax-menu-item:not(ax-menu.ax-oriatation-vertical ax-menu-item:last-child){margin-block-end:1.75rem}ax-menu.ax-oriatation-vertical ax-menu-item ax-popover{position:absolute}ax-menu ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled){color:rgba(var(--ax-color-primary-500))}ax-menu-item{font-weight:500;transition:color .3s;position:relative;display:flex;align-items:center}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{font-size:1.25rem}.ax-menu-item-children{padding:.5rem 0}.ax-menu-item-children:not(.ax-menu-item-children:empty){background-color:rgba(var(--ax-color-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);min-width:12rem;display:flex;flex-direction:column}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-on-surface),.5)}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-suffix{opacity:1}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-suffix{opacity:.5}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix{margin-inline-end:.75rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1}html[dir=rtl] ax-menu.ax-oriatation-horizontal .ax-menu-item-child-icon{transform:scaleX(-1);-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
473
168
|
}
|
474
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type:
|
169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuComponent, decorators: [{
|
475
170
|
type: Component,
|
476
|
-
args: [{ selector: 'ax-
|
171
|
+
args: [{ selector: 'ax-menu', template: `<ng-content select="ax-menu-item,ng-container"></ng-content>`, encapsulation: ViewEncapsulation.None, providers: [
|
477
172
|
{
|
478
173
|
provide: AXRootMenu,
|
479
|
-
useExisting:
|
174
|
+
useExisting: AXMenuComponent,
|
480
175
|
},
|
481
|
-
], styles: ["ax-
|
176
|
+
], styles: ["ax-menu{font-size:.875em;width:100%;color:inherit}ax-menu.ax-oriatation-horizontal{display:flex}ax-menu.ax-oriatation-horizontal ax-menu-item:not(ax-menu.ax-oriatation-horizontal ax-menu-item:last-child){margin-inline-end:1.75rem}ax-menu.ax-oriatation-vertical{display:flex;flex-direction:column}ax-menu.ax-oriatation-vertical ax-menu-item{justify-content:space-between}ax-menu.ax-oriatation-vertical ax-menu-item:not(ax-menu.ax-oriatation-vertical ax-menu-item:last-child){margin-block-end:1.75rem}ax-menu.ax-oriatation-vertical ax-menu-item ax-popover{position:absolute}ax-menu ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled){color:rgba(var(--ax-color-primary-500))}ax-menu-item{font-weight:500;transition:color .3s;position:relative;display:flex;align-items:center}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{font-size:1.25rem}.ax-menu-item-children{padding:.5rem 0}.ax-menu-item-children:not(.ax-menu-item-children:empty){background-color:rgba(var(--ax-color-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);min-width:12rem;display:flex;flex-direction:column}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-on-surface),.5)}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-suffix{opacity:1}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-suffix{opacity:.5}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix{margin-inline-end:.75rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1}html[dir=rtl] ax-menu.ax-oriatation-horizontal .ax-menu-item-child-icon{transform:scaleX(-1);-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"] }]
|
482
177
|
}], propDecorators: { oriatation: [{
|
483
178
|
type: Input
|
179
|
+
}], openOn: [{
|
180
|
+
type: Input
|
484
181
|
}], children: [{
|
485
182
|
type: ContentChildren,
|
486
183
|
args: [AXMenuItemComponent]
|
@@ -489,11 +186,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
|
|
489
186
|
args: ['class']
|
490
187
|
}] } });
|
491
188
|
|
492
|
-
const COMPONENT = [AXMenuItemComponent, AXMenuComponent
|
189
|
+
const COMPONENT = [AXMenuItemComponent, AXMenuComponent];
|
493
190
|
const MODULES = [AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule];
|
494
191
|
class AXMenuModule {
|
495
192
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
496
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXMenuModule, declarations: [AXMenuItemComponent, AXMenuComponent
|
193
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXMenuModule, declarations: [AXMenuItemComponent, AXMenuComponent], imports: [CommonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule], exports: [AXMenuItemComponent, AXMenuComponent] }); }
|
497
194
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuModule, imports: [CommonModule, MODULES] }); }
|
498
195
|
}
|
499
196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuModule, decorators: [{
|
@@ -510,5 +207,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
|
|
510
207
|
* Generated bundle index. Do not edit.
|
511
208
|
*/
|
512
209
|
|
513
|
-
export {
|
210
|
+
export { AXMenuComponent, AXMenuItemComponent, AXMenuModule, AXRootMenu };
|
514
211
|
//# sourceMappingURL=acorex-components-menu.mjs.map
|