@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.
Files changed (180) hide show
  1. package/badge/lib/badge.component.d.ts +3 -3
  2. package/button/lib/button-item.component.d.ts +3 -1
  3. package/calendar/lib/calendar.component.d.ts +6 -4
  4. package/chips/lib/chips.component.d.ts +1 -1
  5. package/collapse/lib/collapse.component.d.ts +15 -2
  6. package/collapse/lib/collapse.module.d.ts +2 -1
  7. package/common/index.d.ts +1 -0
  8. package/common/lib/classes/datalist.class.d.ts +0 -31
  9. package/common/lib/classes/datasource.class.d.ts +55 -0
  10. package/common/lib/classes/styles.class.d.ts +1 -1
  11. package/common/lib/components/interactive-component.class.d.ts +1 -7
  12. package/common/lib/components/selection-base.component.class.d.ts +4 -6
  13. package/common/lib/directives/ripple.directive.d.ts +2 -1
  14. package/datetime-box/lib/datetime-box.component.d.ts +2 -1
  15. package/datetime-input/lib/datetime-input.component.d.ts +2 -1
  16. package/esm2022/action-sheet/lib/action-sheet.component.mjs +2 -2
  17. package/esm2022/alert/lib/alert.component.mjs +4 -5
  18. package/esm2022/avatar/lib/avatar.component.mjs +4 -4
  19. package/esm2022/badge/lib/badge.component.mjs +6 -6
  20. package/esm2022/button/lib/button-item.component.mjs +12 -3
  21. package/esm2022/button/lib/button.component.mjs +2 -2
  22. package/esm2022/button-group/lib/button-group.component.mjs +2 -2
  23. package/esm2022/calendar/lib/calendar.class.mjs +1 -58
  24. package/esm2022/calendar/lib/calendar.component.mjs +27 -16
  25. package/esm2022/chips/lib/chips.component.mjs +4 -4
  26. package/esm2022/collapse/lib/collapse-group.component.mjs +8 -4
  27. package/esm2022/collapse/lib/collapse.component.mjs +63 -15
  28. package/esm2022/collapse/lib/collapse.module.mjs +5 -4
  29. package/esm2022/color-box/lib/color-box.module.mjs +1 -1
  30. package/esm2022/common/index.mjs +2 -1
  31. package/esm2022/common/lib/classes/datalist.class.mjs +2 -41
  32. package/esm2022/common/lib/classes/datasource.class.mjs +106 -0
  33. package/esm2022/common/lib/classes/styles.class.mjs +1 -1
  34. package/esm2022/common/lib/components/interactive-component.class.mjs +13 -13
  35. package/esm2022/common/lib/components/selection-base.component.class.mjs +55 -27
  36. package/esm2022/common/lib/directives/ripple.directive.mjs +14 -8
  37. package/esm2022/datetime-box/lib/datetime-box.component.mjs +6 -3
  38. package/esm2022/datetime-input/lib/datetime-input.component.mjs +11 -4
  39. package/esm2022/datetime-picker/lib/datetime-picker.component.mjs +3 -3
  40. package/esm2022/list/lib/list.component.mjs +34 -60
  41. package/esm2022/menu/index.mjs +1 -2
  42. package/esm2022/menu/lib/class/root-menu.class.mjs +1 -1
  43. package/esm2022/menu/lib/menu-item/menu-item.component.mjs +60 -18
  44. package/esm2022/menu/lib/menu.component.mjs +37 -342
  45. package/esm2022/menu/lib/menu.module.mjs +3 -4
  46. package/esm2022/notification/lib/notification.component.mjs +2 -2
  47. package/esm2022/otp/lib/otp.component.mjs +4 -3
  48. package/esm2022/otp/lib/otp.module.mjs +4 -3
  49. package/esm2022/picker/lib/picker.component.mjs +2 -2
  50. package/esm2022/progress-bar/lib/progress-bar.component.mjs +2 -2
  51. package/esm2022/range-slider/lib/range-slider.component.mjs +2 -2
  52. package/esm2022/routing-progress/lib/routing-progress.component.mjs +3 -3
  53. package/esm2022/search-box/lib/search-box.component.mjs +5 -4
  54. package/esm2022/select-box/index.mjs +2 -2
  55. package/esm2022/select-box/lib/select-box.component.mjs +168 -308
  56. package/esm2022/select-box/lib/select-box.module.mjs +5 -6
  57. package/esm2022/selection-list/lib/selection-list.component.mjs +11 -1
  58. package/esm2022/side-menu/acorex-components-side-menu.mjs +5 -0
  59. package/esm2022/side-menu/index.mjs +4 -0
  60. package/esm2022/side-menu/lib/side-menu-item/side-menu-item.compoent.mjs +116 -0
  61. package/esm2022/side-menu/lib/side-menu.component.mjs +15 -0
  62. package/esm2022/side-menu/lib/side-menu.module.mjs +23 -0
  63. package/esm2022/skeleton/acorex-components-skeleton.mjs +5 -0
  64. package/esm2022/skeleton/index.mjs +3 -0
  65. package/esm2022/skeleton/lib/skeleton.component.mjs +24 -0
  66. package/esm2022/skeleton/lib/skeleton.module.mjs +18 -0
  67. package/esm2022/tabs/lib/tab-item.component.mjs +9 -2
  68. package/esm2022/tag/lib/tag.component.mjs +6 -12
  69. package/esm2022/toast/lib/toast.component.mjs +3 -3
  70. package/fesm2022/acorex-components-action-sheet.mjs +2 -2
  71. package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
  72. package/fesm2022/acorex-components-alert.mjs +3 -4
  73. package/fesm2022/acorex-components-alert.mjs.map +1 -1
  74. package/fesm2022/acorex-components-avatar.mjs +3 -3
  75. package/fesm2022/acorex-components-avatar.mjs.map +1 -1
  76. package/fesm2022/acorex-components-badge.mjs +5 -5
  77. package/fesm2022/acorex-components-badge.mjs.map +1 -1
  78. package/fesm2022/acorex-components-button-group.mjs +2 -2
  79. package/fesm2022/acorex-components-button-group.mjs.map +1 -1
  80. package/fesm2022/acorex-components-button.mjs +13 -4
  81. package/fesm2022/acorex-components-button.mjs.map +1 -1
  82. package/fesm2022/acorex-components-calendar.mjs +27 -73
  83. package/fesm2022/acorex-components-calendar.mjs.map +1 -1
  84. package/fesm2022/acorex-components-chips.mjs +3 -3
  85. package/fesm2022/acorex-components-chips.mjs.map +1 -1
  86. package/fesm2022/acorex-components-collapse.mjs +74 -21
  87. package/fesm2022/acorex-components-collapse.mjs.map +1 -1
  88. package/fesm2022/acorex-components-color-box.mjs.map +1 -1
  89. package/fesm2022/acorex-components-common.mjs +161 -62
  90. package/fesm2022/acorex-components-common.mjs.map +1 -1
  91. package/fesm2022/acorex-components-datetime-box.mjs +5 -2
  92. package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
  93. package/fesm2022/acorex-components-datetime-input.mjs +10 -3
  94. package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
  95. package/fesm2022/acorex-components-datetime-picker.mjs +2 -2
  96. package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
  97. package/fesm2022/acorex-components-list.mjs +33 -59
  98. package/fesm2022/acorex-components-list.mjs.map +1 -1
  99. package/fesm2022/acorex-components-menu.mjs +78 -381
  100. package/fesm2022/acorex-components-menu.mjs.map +1 -1
  101. package/fesm2022/acorex-components-notification.mjs +2 -2
  102. package/fesm2022/acorex-components-notification.mjs.map +1 -1
  103. package/fesm2022/acorex-components-otp.mjs +6 -4
  104. package/fesm2022/acorex-components-otp.mjs.map +1 -1
  105. package/fesm2022/acorex-components-picker.mjs +2 -2
  106. package/fesm2022/acorex-components-picker.mjs.map +1 -1
  107. package/fesm2022/acorex-components-progress-bar.mjs +2 -2
  108. package/fesm2022/acorex-components-progress-bar.mjs.map +1 -1
  109. package/fesm2022/acorex-components-range-slider.mjs +2 -2
  110. package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
  111. package/fesm2022/acorex-components-routing-progress.mjs +2 -2
  112. package/fesm2022/acorex-components-routing-progress.mjs.map +1 -1
  113. package/fesm2022/acorex-components-search-box.mjs +4 -4
  114. package/fesm2022/acorex-components-search-box.mjs.map +1 -1
  115. package/fesm2022/acorex-components-select-box.mjs +96 -417
  116. package/fesm2022/acorex-components-select-box.mjs.map +1 -1
  117. package/fesm2022/acorex-components-selection-list.mjs +10 -0
  118. package/fesm2022/acorex-components-selection-list.mjs.map +1 -1
  119. package/fesm2022/acorex-components-side-menu.mjs +153 -0
  120. package/fesm2022/acorex-components-side-menu.mjs.map +1 -0
  121. package/fesm2022/acorex-components-skeleton.mjs +46 -0
  122. package/fesm2022/acorex-components-skeleton.mjs.map +1 -0
  123. package/fesm2022/acorex-components-tabs.mjs +8 -1
  124. package/fesm2022/acorex-components-tabs.mjs.map +1 -1
  125. package/fesm2022/acorex-components-tag.mjs +5 -11
  126. package/fesm2022/acorex-components-tag.mjs.map +1 -1
  127. package/fesm2022/acorex-components-toast.mjs +2 -2
  128. package/fesm2022/acorex-components-toast.mjs.map +1 -1
  129. package/list/lib/list.component.d.ts +11 -23
  130. package/menu/index.d.ts +0 -1
  131. package/menu/lib/class/root-menu.class.d.ts +2 -0
  132. package/menu/lib/menu-item/menu-item.component.d.ts +19 -6
  133. package/menu/lib/menu.component.d.ts +10 -40
  134. package/menu/lib/menu.module.d.ts +7 -8
  135. package/mixin/lib/base-components.class.d.ts +2 -2
  136. package/mixin/lib/base-menu-mixin.class.d.ts +5 -5
  137. package/mixin/lib/button-mixin.class.d.ts +2 -2
  138. package/mixin/lib/clickable-mixin.class.d.ts +2 -2
  139. package/mixin/lib/color-look-mixing.class.d.ts +2 -2
  140. package/mixin/lib/datalist-component.class.d.ts +10 -10
  141. package/mixin/lib/dropdown-mixin.class.d.ts +2 -2
  142. package/mixin/lib/interactive-mixin.class.d.ts +4 -4
  143. package/mixin/lib/mixin.class.d.ts +61 -61
  144. package/mixin/lib/page-component.class.d.ts +2 -2
  145. package/mixin/lib/selection-component.class.d.ts +2 -2
  146. package/mixin/lib/sizable-mixin.class.d.ts +2 -2
  147. package/mixin/lib/textbox-mixin.class.d.ts +2 -2
  148. package/mixin/lib/value-mixin.class.d.ts +8 -8
  149. package/otp/lib/otp.module.d.ts +2 -1
  150. package/package.json +13 -7
  151. package/search-box/lib/search-box.component.d.ts +2 -1
  152. package/select-box/index.d.ts +1 -1
  153. package/select-box/lib/select-box.component.d.ts +37 -59
  154. package/select-box/lib/select-box.module.d.ts +14 -15
  155. package/selection-list/lib/selection-list.component.d.ts +3 -0
  156. package/side-menu/README.md +3 -0
  157. package/side-menu/index.d.ts +3 -0
  158. package/side-menu/lib/side-menu-item/side-menu-item.compoent.d.ts +37 -0
  159. package/side-menu/lib/side-menu.component.d.ts +8 -0
  160. package/side-menu/lib/side-menu.module.d.ts +10 -0
  161. package/skeleton/README.md +3 -0
  162. package/skeleton/index.d.ts +2 -0
  163. package/skeleton/lib/skeleton.component.d.ts +8 -0
  164. package/skeleton/lib/skeleton.module.d.ts +8 -0
  165. package/tabs/lib/tab-item.component.d.ts +2 -1
  166. package/tag/lib/tag.component.d.ts +3 -4
  167. package/context-menu/README.md +0 -3
  168. package/context-menu/index.d.ts +0 -2
  169. package/context-menu/lib/context-menu.component.d.ts +0 -34
  170. package/context-menu/lib/context-menu.module.d.ts +0 -13
  171. package/esm2022/context-menu/acorex-components-context-menu.mjs +0 -5
  172. package/esm2022/context-menu/index.mjs +0 -3
  173. package/esm2022/context-menu/lib/context-menu.component.mjs +0 -262
  174. package/esm2022/context-menu/lib/context-menu.module.mjs +0 -26
  175. package/esm2022/menu/lib/menu2.component.mjs +0 -45
  176. package/esm2022/select-box/lib/select-box2.component.mjs +0 -191
  177. package/fesm2022/acorex-components-context-menu.mjs +0 -290
  178. package/fesm2022/acorex-components-context-menu.mjs.map +0 -1
  179. package/menu/lib/menu2.component.d.ts +0 -12
  180. 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, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, NgModule } from '@angular/core';
6
- import * as i3 from '@angular/common';
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 MXBaseComponent {
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
- // this.parent.children.forEach((c) => {
46
- // if (c != this) {
47
- // c.close();
48
- // }
49
- // });
65
+ this.parent.children.forEach((c) => {
66
+ if (c != this) {
67
+ c.close();
68
+ }
69
+ });
50
70
  }
51
71
  _handleOnClosed() {
52
- // this.children.forEach((c) => {
53
- // c.close();
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", disabled: "disabled" }, host: { 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]=\"'click'\"\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: i3.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"] }] }); }
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]=\"'click'\"\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" }]
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: AXMenu2Component, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
467
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXMenu2Component, selector: "ax-menu2", inputs: { oriatation: "oriatation" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
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: AXMenu2Component,
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-menu2{font-size:inherit;width:100%}ax-menu2.ax-oriatation-horizontal{display:flex}ax-menu2.ax-oriatation-horizontal ax-menu-item:not(ax-menu2.ax-oriatation-horizontal ax-menu-item:last-child){margin-inline-end:1.75rem}ax-menu2.ax-oriatation-vertical{display:flex;flex-direction:column}ax-menu2.ax-oriatation-vertical ax-menu-item:not(ax-menu2.ax-oriatation-vertical ax-menu-item:last-child){margin-block-end:1.75rem}ax-menu2 ax-menu-item:hover:not(ax-menu2 ax-menu-item:hover.ax-state-disabled){color:rgba(var(--ax-color-primary-500))}ax-menu-item{font-weight:500;transition:all .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 }); }
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: AXMenu2Component, decorators: [{
169
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXMenuComponent, decorators: [{
475
170
  type: Component,
476
- args: [{ selector: 'ax-menu2', template: `<ng-content select="ax-menu-item"></ng-content>`, encapsulation: ViewEncapsulation.None, providers: [
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: AXMenu2Component,
174
+ useExisting: AXMenuComponent,
480
175
  },
481
- ], styles: ["ax-menu2{font-size:inherit;width:100%}ax-menu2.ax-oriatation-horizontal{display:flex}ax-menu2.ax-oriatation-horizontal ax-menu-item:not(ax-menu2.ax-oriatation-horizontal ax-menu-item:last-child){margin-inline-end:1.75rem}ax-menu2.ax-oriatation-vertical{display:flex;flex-direction:column}ax-menu2.ax-oriatation-vertical ax-menu-item:not(ax-menu2.ax-oriatation-vertical ax-menu-item:last-child){margin-block-end:1.75rem}ax-menu2 ax-menu-item:hover:not(ax-menu2 ax-menu-item:hover.ax-state-disabled){color:rgba(var(--ax-color-primary-500))}ax-menu-item{font-weight:500;transition:all .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"] }]
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, AXMenu2Component];
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, AXMenu2Component], imports: [CommonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule], exports: [AXMenuItemComponent, AXMenuComponent, AXMenu2Component] }); }
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 { AXMenu2Component, AXMenuComponent, AXMenuItemComponent, AXMenuModule, AXRootMenu };
210
+ export { AXMenuComponent, AXMenuItemComponent, AXMenuModule, AXRootMenu };
514
211
  //# sourceMappingURL=acorex-components-menu.mjs.map