@acorex/components 7.2.6 → 7.2.7

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 (98) hide show
  1. package/breadcrumbs/lib/breadcrumbs-item.component.d.ts +5 -69
  2. package/button/lib/button-group.component.d.ts +6 -6
  3. package/button/lib/button-item.component.d.ts +6 -6
  4. package/checkbox/lib/checkbox.component.d.ts +14 -9
  5. package/chips/lib/chips.component.d.ts +5 -64
  6. package/collapse/lib/collapse-group.component.d.ts +22 -10
  7. package/collapse/lib/collapse.component.d.ts +13 -7
  8. package/color-palette/lib/color-palette-input.component.d.ts +4 -6
  9. package/color-palette/lib/color-palette-picker.component.d.ts +4 -7
  10. package/color-palette/lib/color-palette-preview.component.d.ts +5 -5
  11. package/color-palette/lib/color-palette-swatches.component.d.ts +6 -7
  12. package/color-palette/lib/color-palette.class.d.ts +1 -1
  13. package/color-palette/lib/color-palette.component.d.ts +13 -7
  14. package/color-picker/lib/color-picker.component.d.ts +21 -18
  15. package/common/lib/components/base-component.class.d.ts +7 -7
  16. package/common/lib/components/value-component.class.d.ts +1 -0
  17. package/decorators/index.d.ts +1 -0
  18. package/decorators/lib/divider.component.d.ts +5 -0
  19. package/esm2022/alert/lib/alert.component.mjs +2 -1
  20. package/esm2022/breadcrumbs/lib/breadcrumbs-item.component.mjs +10 -19
  21. package/esm2022/breadcrumbs/lib/breadcrumbs.component.mjs +2 -2
  22. package/esm2022/calendar/lib/calendar.class.mjs +3 -2
  23. package/esm2022/checkbox/lib/checkbox.component.mjs +27 -19
  24. package/esm2022/chips/lib/chips.component.mjs +6 -9
  25. package/esm2022/collapse/lib/collapse-group.component.mjs +80 -24
  26. package/esm2022/collapse/lib/collapse.component.mjs +28 -15
  27. package/esm2022/color-palette/lib/color-palette-input.component.mjs +11 -11
  28. package/esm2022/color-palette/lib/color-palette-picker.component.mjs +25 -21
  29. package/esm2022/color-palette/lib/color-palette-preview.component.mjs +12 -11
  30. package/esm2022/color-palette/lib/color-palette-swatches.component.mjs +12 -12
  31. package/esm2022/color-palette/lib/color-palette.class.mjs +1 -1
  32. package/esm2022/color-palette/lib/color-palette.component.mjs +26 -37
  33. package/esm2022/color-picker/lib/color-picker.component.mjs +3 -6
  34. package/esm2022/common/lib/components/base-component.class.mjs +5 -4
  35. package/esm2022/common/lib/components/value-component.class.mjs +17 -11
  36. package/esm2022/decorators/index.mjs +2 -1
  37. package/esm2022/decorators/lib/divider.component.mjs +17 -0
  38. package/esm2022/decorators/lib/form-hint.component.mjs +4 -4
  39. package/esm2022/decorators/lib/suffix.component.mjs +1 -1
  40. package/esm2022/form/lib/form-field.component.mjs +2 -2
  41. package/esm2022/form/lib/form.component.mjs +1 -3
  42. package/esm2022/label/lib/label.component.mjs +2 -2
  43. package/esm2022/mixin/lib/value-mixin.class.mjs +4 -1
  44. package/esm2022/range-slider/lib/range-slider.component.mjs +28 -20
  45. package/esm2022/switch/lib/switch.component.mjs +2 -3
  46. package/esm2022/time-box/lib/time-box.component.mjs +2 -4
  47. package/fesm2022/acorex-components-alert.mjs +1 -0
  48. package/fesm2022/acorex-components-alert.mjs.map +1 -1
  49. package/fesm2022/acorex-components-breadcrumbs.mjs +11 -21
  50. package/fesm2022/acorex-components-breadcrumbs.mjs.map +1 -1
  51. package/fesm2022/acorex-components-calendar.mjs +2 -1
  52. package/fesm2022/acorex-components-calendar.mjs.map +1 -1
  53. package/fesm2022/acorex-components-checkbox.mjs +26 -18
  54. package/fesm2022/acorex-components-checkbox.mjs.map +1 -1
  55. package/fesm2022/acorex-components-chips.mjs +6 -9
  56. package/fesm2022/acorex-components-chips.mjs.map +1 -1
  57. package/fesm2022/acorex-components-collapse.mjs +104 -35
  58. package/fesm2022/acorex-components-collapse.mjs.map +1 -1
  59. package/fesm2022/acorex-components-color-palette.mjs +71 -76
  60. package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
  61. package/fesm2022/acorex-components-color-picker.mjs +2 -5
  62. package/fesm2022/acorex-components-color-picker.mjs.map +1 -1
  63. package/fesm2022/acorex-components-common.mjs +20 -13
  64. package/fesm2022/acorex-components-common.mjs.map +1 -1
  65. package/fesm2022/acorex-components-decorators.mjs +18 -3
  66. package/fesm2022/acorex-components-decorators.mjs.map +1 -1
  67. package/fesm2022/acorex-components-form.mjs +2 -4
  68. package/fesm2022/acorex-components-form.mjs.map +1 -1
  69. package/fesm2022/acorex-components-label.mjs +2 -2
  70. package/fesm2022/acorex-components-label.mjs.map +1 -1
  71. package/fesm2022/acorex-components-mixin.mjs +3 -0
  72. package/fesm2022/acorex-components-mixin.mjs.map +1 -1
  73. package/fesm2022/acorex-components-range-slider.mjs +26 -18
  74. package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
  75. package/fesm2022/acorex-components-switch.mjs +1 -2
  76. package/fesm2022/acorex-components-switch.mjs.map +1 -1
  77. package/fesm2022/acorex-components-time-box.mjs +1 -3
  78. package/fesm2022/acorex-components-time-box.mjs.map +1 -1
  79. package/mixin/lib/base-components.class.d.ts +2 -2
  80. package/mixin/lib/base-menu-mixin.class.d.ts +5 -5
  81. package/mixin/lib/button-mixin.class.d.ts +2 -2
  82. package/mixin/lib/clickable-mixin.class.d.ts +2 -2
  83. package/mixin/lib/color-look-mixing.class.d.ts +2 -2
  84. package/mixin/lib/datalist-component.class.d.ts +10 -10
  85. package/mixin/lib/dropdown-mixin.class.d.ts +2 -2
  86. package/mixin/lib/interactive-mixin.class.d.ts +4 -4
  87. package/mixin/lib/loading-mixin.class.d.ts +2 -2
  88. package/mixin/lib/mixin.class.d.ts +62 -61
  89. package/mixin/lib/page-component.class.d.ts +2 -2
  90. package/mixin/lib/selection-component.class.d.ts +2 -2
  91. package/mixin/lib/sizable-mixin.class.d.ts +2 -2
  92. package/mixin/lib/textbox-mixin.class.d.ts +2 -2
  93. package/mixin/lib/value-mixin.class.d.ts +9 -8
  94. package/package.json +8 -8
  95. package/range-slider/lib/range-slider.component.d.ts +16 -9
  96. package/switch/lib/switch.component.d.ts +1 -1
  97. package/tabs/lib/tab-item.component.d.ts +2 -2
  98. package/time-box/lib/time-box.component.d.ts +1 -1
@@ -1,18 +1,25 @@
1
- import { AXBaseComponent } from '@acorex/components/mixin';
2
1
  import * as i0 from '@angular/core';
3
- import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, Input, ContentChild, ContentChildren, NgModule } from '@angular/core';
2
+ import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, Input, ContentChildren, NgModule } from '@angular/core';
3
+ import { MXInteractiveComponent, MXBaseComponent } from '@acorex/components/common';
4
4
  import * as i1 from '@angular/common';
5
5
  import { CommonModule } from '@angular/common';
6
6
 
7
- class AXCollapseComponent extends AXBaseComponent {
8
- constructor(elementRef, cdr) {
9
- super(elementRef, cdr);
10
- this.cdr = cdr;
7
+ class AXCollapseComponent extends MXInteractiveComponent {
8
+ constructor() {
9
+ super(...arguments);
10
+ /**
11
+ * Fires each time the user clicks the panel header.
12
+ * @event
13
+ */
14
+ this.onClick = new EventEmitter();
11
15
  this.isCollapsedChange = new EventEmitter();
12
16
  this._isCollapsed = false;
13
17
  this.caption = '';
14
18
  this.icon = '';
15
19
  }
20
+ /**
21
+ * Providing a boolean value for its collapse state
22
+ */
16
23
  get isCollapsed() {
17
24
  return this._isCollapsed;
18
25
  }
@@ -20,19 +27,26 @@ class AXCollapseComponent extends AXBaseComponent {
20
27
  if (v != this._isCollapsed) {
21
28
  this._isCollapsed = v;
22
29
  this.isCollapsedChange.emit(v);
23
- this._cdr.detectChanges();
30
+ this.cdr.detectChanges();
24
31
  }
25
32
  }
26
- handleHeaderClick() {
33
+ handleHeaderClick(e) {
34
+ if (this.disabled)
35
+ return;
27
36
  this.isCollapsed = !this.isCollapsed;
37
+ this.onClick.emit({
38
+ component: this,
39
+ htmlElement: this.getHostElement(),
40
+ nativeEvent: e,
41
+ });
28
42
  }
29
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCollapseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
30
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXCollapseComponent, selector: "ax-collapse", inputs: { isCollapsed: "isCollapsed", caption: "caption", icon: "icon" }, outputs: { isCollapsedChange: "isCollapsedChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["collapseHeader"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick()\">\n <ng-container *ngIf=\"headerTemplate; else collapseHeader\">\n <div class=\"ax-collapse-custom-header-container\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\n </div>\n </ng-container>\n <ng-template #collapseHeader>\n <div class=\"ax-collapse-header-container\">\n <div class=\"ax-collapse-header-start\">\n <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n <span>\n {{ caption }}\n </span>\n </div>\n\n <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{ '-ax-rotation-90': isCollapsed, 'ax-rotation-90': !isCollapsed }\"></span>\n </div>\n </ng-template>\n</div>\n\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\n <ng-content></ng-content>\n</div>\n", styles: ["ax-collapse,ax-collapse-group{display:block;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);overflow:hidden;font-size:1rem}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{color:rgba(var(--ax-color-text-default));padding:.75rem}ax-collapse .ax-collapse-header{background-color:rgba(var(--ax-color-surface));cursor:pointer;-webkit-user-select:none;user-select:none}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start:not(:empty) .ax-collapse-header-icon{font-size:1.25rem;padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow{font-size:1.5rem}ax-collapse .ax-collapse-body{background-color:rgba(var(--ax-color-surface))}ax-collapse-group ax-collapse{border:0!important;border-radius:0!important}ax-collapse-group ax-collapse:not(ax-collapse-group ax-collapse:last-child){border-bottom:1px solid!important;border-color:rgba(var(--ax-color-border-default))!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
43
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
44
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXCollapseComponent, selector: "ax-collapse", inputs: { isCollapsed: "isCollapsed", caption: "caption", icon: "icon", headerTemplate: "headerTemplate" }, outputs: { isCollapsedChange: "isCollapsedChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick($event)\">\n <ng-container *ngIf=\"headerTemplate; else default\">\n <div class=\"ax-collapse-custom-header-container\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\n </div>\n </ng-container>\n <ng-template #default>\n <div class=\"ax-collapse-header-container\">\n <div class=\"ax-collapse-header-start\">\n <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n <span>\n {{ caption }}\n </span>\n </div>\n <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{ '-ax-rotation-90': isCollapsed, 'ax-rotation-90': !isCollapsed }\"></span>\n </div>\n </ng-template>\n</div>\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\n <ng-content></ng-content>\n</div>\n", styles: ["ax-collapse,ax-collapse-group{display:block;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);overflow:hidden;font-size:1rem;width:100%}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{color:rgba(var(--ax-color-text-default));padding:.75rem}ax-collapse .ax-collapse-header{background-color:rgba(var(--ax-color-surface));cursor:pointer;-webkit-user-select:none;user-select:none}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start:not(:empty) .ax-collapse-header-icon{font-size:1.25rem;padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow{font-size:1.5rem}ax-collapse .ax-collapse-body{background-color:rgba(var(--ax-color-surface))}ax-collapse-group ax-collapse{border:0!important;border-radius:0!important}ax-collapse-group ax-collapse:not(ax-collapse-group ax-collapse:last-child){border-bottom:1px solid!important;border-color:rgba(var(--ax-color-border-default))!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
31
45
  }
32
46
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCollapseComponent, decorators: [{
33
47
  type: Component,
34
- args: [{ selector: 'ax-collapse', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick()\">\n <ng-container *ngIf=\"headerTemplate; else collapseHeader\">\n <div class=\"ax-collapse-custom-header-container\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\n </div>\n </ng-container>\n <ng-template #collapseHeader>\n <div class=\"ax-collapse-header-container\">\n <div class=\"ax-collapse-header-start\">\n <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n <span>\n {{ caption }}\n </span>\n </div>\n\n <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{ '-ax-rotation-90': isCollapsed, 'ax-rotation-90': !isCollapsed }\"></span>\n </div>\n </ng-template>\n</div>\n\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\n <ng-content></ng-content>\n</div>\n", styles: ["ax-collapse,ax-collapse-group{display:block;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);overflow:hidden;font-size:1rem}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{color:rgba(var(--ax-color-text-default));padding:.75rem}ax-collapse .ax-collapse-header{background-color:rgba(var(--ax-color-surface));cursor:pointer;-webkit-user-select:none;user-select:none}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start:not(:empty) .ax-collapse-header-icon{font-size:1.25rem;padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow{font-size:1.5rem}ax-collapse .ax-collapse-body{background-color:rgba(var(--ax-color-surface))}ax-collapse-group ax-collapse{border:0!important;border-radius:0!important}ax-collapse-group ax-collapse:not(ax-collapse-group ax-collapse:last-child){border-bottom:1px solid!important;border-color:rgba(var(--ax-color-border-default))!important}\n"] }]
35
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isCollapsedChange: [{
48
+ args: [{ selector: 'ax-collapse', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick($event)\">\n <ng-container *ngIf=\"headerTemplate; else default\">\n <div class=\"ax-collapse-custom-header-container\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\n </div>\n </ng-container>\n <ng-template #default>\n <div class=\"ax-collapse-header-container\">\n <div class=\"ax-collapse-header-start\">\n <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n <span>\n {{ caption }}\n </span>\n </div>\n <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{ '-ax-rotation-90': isCollapsed, 'ax-rotation-90': !isCollapsed }\"></span>\n </div>\n </ng-template>\n</div>\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\n <ng-content></ng-content>\n</div>\n", styles: ["ax-collapse,ax-collapse-group{display:block;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);overflow:hidden;font-size:1rem;width:100%}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{color:rgba(var(--ax-color-text-default));padding:.75rem}ax-collapse .ax-collapse-header{background-color:rgba(var(--ax-color-surface));cursor:pointer;-webkit-user-select:none;user-select:none}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start:not(:empty) .ax-collapse-header-icon{font-size:1.25rem;padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-arrow{font-size:1.5rem}ax-collapse .ax-collapse-body{background-color:rgba(var(--ax-color-surface))}ax-collapse-group ax-collapse{border:0!important;border-radius:0!important}ax-collapse-group ax-collapse:not(ax-collapse-group ax-collapse:last-child){border-bottom:1px solid!important;border-color:rgba(var(--ax-color-border-default))!important}\n"] }]
49
+ }], propDecorators: { isCollapsedChange: [{
36
50
  type: Output
37
51
  }], isCollapsed: [{
38
52
  type: Input
@@ -41,40 +55,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
41
55
  }], icon: [{
42
56
  type: Input
43
57
  }], headerTemplate: [{
44
- type: ContentChild,
45
- args: ['collapseHeader', { static: true }]
58
+ type: Input
46
59
  }] } });
47
60
 
48
- class AXCollapseGroupComponent extends AXBaseComponent {
49
- constructor(elementRef, cdr) {
50
- super(elementRef, cdr);
51
- this.cdr = cdr;
52
- this.accordion = false;
53
- this.nonCollapsedIndex = 0;
61
+ class AXCollapseGroupComponent extends MXBaseComponent {
62
+ constructor() {
63
+ super(...arguments);
64
+ this.accordionChange = new EventEmitter();
65
+ this._accordion = false;
66
+ this.activeIndexChange = new EventEmitter();
67
+ this._activeIndex = 0;
54
68
  this._subs = [];
55
69
  }
56
- onViewInit() {
57
- if (this.accordion) {
70
+ /**
71
+ * Enables accordion behavior, allowing only one collapsible item to be expanded at a time
72
+ */
73
+ get accordion() {
74
+ return this._accordion;
75
+ }
76
+ set accordion(value) {
77
+ this.setOption({
78
+ name: 'accordion',
79
+ value,
80
+ afterCallback: (oldValue, newValue) => {
81
+ if (newValue)
82
+ this.applyAccordion();
83
+ else
84
+ this.removeAccordion();
85
+ },
86
+ });
87
+ }
88
+ /**
89
+ * Index of the currently active item within the group
90
+ */
91
+ get activeIndex() {
92
+ return this._activeIndex;
93
+ }
94
+ set activeIndex(value) {
95
+ this.setOption({
96
+ name: 'activeIndex',
97
+ value,
98
+ beforeCallback: (oldValue, newValue) => {
99
+ const len = this._items?.length || 0;
100
+ if (newValue < 0)
101
+ newValue = 0;
102
+ if (len > 0 && newValue >= len) {
103
+ newValue = len - 1;
104
+ }
105
+ return newValue;
106
+ },
107
+ afterCallback: (oldValue, newValue) => {
108
+ this.applyAccordion();
109
+ },
110
+ });
111
+ }
112
+ ngAfterViewInit() {
113
+ this.applyAccordion();
114
+ }
115
+ applyAccordion() {
116
+ if (!this.accordion)
117
+ return;
118
+ if (this._items && this._items.length > 1) {
119
+ const activeIndex = this._items.get(this.activeIndex) || this._items[0];
58
120
  this._items.forEach((c) => (c.isCollapsed = true));
59
- this._items.get(this.nonCollapsedIndex).isCollapsed = false;
60
- console.log(this._items[this.nonCollapsedIndex]);
121
+ if (activeIndex)
122
+ activeIndex.isCollapsed = false;
61
123
  this._items.forEach((c1) => {
62
- this._subs.push(c1.isCollapsedChange.subscribe((e) => {
63
- if (!e)
64
- this._items
65
- .toArray()
66
- .filter((c2) => c2 != c1)
67
- .forEach((c) => (c.isCollapsed = true));
124
+ const list = this._items.toArray();
125
+ this._subs.push(c1.onClick.subscribe((e) => {
126
+ this._activeIndex = list.indexOf(c1);
127
+ list
128
+ .filter((c2) => c2 != c1)
129
+ .forEach((c) => (c.isCollapsed = true));
68
130
  }));
69
131
  });
70
132
  }
71
133
  }
72
- onDestroy() {
134
+ removeAccordion() {
73
135
  this._subs.forEach((s) => s.unsubscribe());
74
136
  this._subs = [];
75
137
  }
76
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCollapseGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
77
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: { accordion: "accordion", nonCollapsedIndex: "nonCollapsedIndex" }, host: { classAttribute: "ax-collapse-group" }, queries: [{ propertyName: "_items", predicate: AXCollapseComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content select="ax-collapse"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
138
+ ngOnDestroy() {
139
+ this.removeAccordion();
140
+ }
141
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCollapseGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
142
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: { accordion: "accordion", activeIndex: "activeIndex" }, outputs: { accordionChange: "accordionChange", activeIndexChange: "activeIndexChange" }, host: { classAttribute: "ax-collapse-group" }, queries: [{ propertyName: "_items", predicate: AXCollapseComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content select="ax-collapse"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
78
143
  }
79
144
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXCollapseGroupComponent, decorators: [{
80
145
  type: Component,
@@ -85,9 +150,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
85
150
  changeDetection: ChangeDetectionStrategy.OnPush,
86
151
  encapsulation: ViewEncapsulation.None,
87
152
  }]
88
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { accordion: [{
153
+ }], propDecorators: { accordionChange: [{
154
+ type: Output
155
+ }], accordion: [{
89
156
  type: Input
90
- }], nonCollapsedIndex: [{
157
+ }], activeIndexChange: [{
158
+ type: Output
159
+ }], activeIndex: [{
91
160
  type: Input
92
161
  }], _items: [{
93
162
  type: ContentChildren,
@@ -1 +1 @@
1
- {"version":3,"file":"acorex-components-collapse.mjs","sources":["../../../../libs/components/collapse/src/lib/collapse.component.ts","../../../../libs/components/collapse/src/lib/collapse.component.html","../../../../libs/components/collapse/src/lib/collapse-group.component.ts","../../../../libs/components/collapse/src/lib/collapse.module.ts","../../../../libs/components/collapse/src/acorex-components-collapse.ts"],"sourcesContent":["import { AXBaseComponent } from '@acorex/components/mixin';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n TemplateRef,\n ViewEncapsulation,\n} from '@angular/core';\n\n@Component({\n selector: 'ax-collapse',\n templateUrl: './collapse.component.html',\n styleUrls: ['./collapse.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXCollapseComponent extends AXBaseComponent {\n constructor(elementRef: ElementRef, private cdr: ChangeDetectorRef) {\n super(elementRef, cdr);\n }\n\n @Output()\n isCollapsedChange: EventEmitter<any> = new EventEmitter<any>();\n\n private _isCollapsed: boolean = false;\n @Input()\n public get isCollapsed(): boolean {\n return this._isCollapsed;\n }\n public set isCollapsed(v: boolean) {\n if (v != this._isCollapsed) {\n this._isCollapsed = v;\n this.isCollapsedChange.emit(v);\n this._cdr.detectChanges();\n }\n }\n\n @Input()\n caption: string = '';\n\n @Input()\n icon: string = '';\n\n @ContentChild('collapseHeader', { static: true })\n headerTemplate: TemplateRef<any>;\n\n handleHeaderClick() {\n this.isCollapsed = !this.isCollapsed;\n }\n}\n","<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick()\">\n <ng-container *ngIf=\"headerTemplate; else collapseHeader\">\n <div class=\"ax-collapse-custom-header-container\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\n </div>\n </ng-container>\n <ng-template #collapseHeader>\n <div class=\"ax-collapse-header-container\">\n <div class=\"ax-collapse-header-start\">\n <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n <span>\n {{ caption }}\n </span>\n </div>\n\n <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{ '-ax-rotation-90': isCollapsed, 'ax-rotation-90': !isCollapsed }\"></span>\n </div>\n </ng-template>\n</div>\n\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\n <ng-content></ng-content>\n</div>\n","import { AXBaseComponent } from '@acorex/components/mixin';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n Input,\n QueryList,\n ViewEncapsulation,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { AXCollapseComponent } from './collapse.component';\n\n@Component({\n selector: 'ax-collapse-group',\n template: `<ng-content select=\"ax-collapse\"></ng-content>`,\n host: { class: 'ax-collapse-group' },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXCollapseGroupComponent extends AXBaseComponent {\n @Input() accordion = false;\n\n @Input() nonCollapsedIndex = 0;\n\n @ContentChildren(AXCollapseComponent)\n private _items: QueryList<AXCollapseComponent>;\n\n private _subs: Subscription[] = [];\n\n constructor(elementRef: ElementRef, private cdr: ChangeDetectorRef) {\n super(elementRef, cdr);\n }\n\n override onViewInit(): void {\n if (this.accordion) {\n this._items.forEach((c) => (c.isCollapsed = true));\n this._items.get(this.nonCollapsedIndex).isCollapsed = false;\n console.log(this._items[this.nonCollapsedIndex]);\n this._items.forEach((c1: AXCollapseComponent) => {\n this._subs.push(\n c1.isCollapsedChange.subscribe((e) => {\n if (!e)\n this._items\n .toArray()\n .filter((c2) => c2 != c1)\n .forEach((c) => (c.isCollapsed = true));\n })\n );\n });\n }\n }\n\n override onDestroy(): void {\n this._subs.forEach((s) => s.unsubscribe());\n this._subs = [];\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXCollapseComponent } from './collapse.component';\nimport { AXCollapseGroupComponent } from './collapse-group.component';\n\n@NgModule({\n declarations: [AXCollapseComponent,AXCollapseGroupComponent],\n imports: [ CommonModule ],\n exports: [AXCollapseComponent,AXCollapseGroupComponent],\n providers: [],\n})\nexport class AXCollapseModule {}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"acorex-components-collapse.mjs","sources":["../../../../libs/components/collapse/src/lib/collapse.component.ts","../../../../libs/components/collapse/src/lib/collapse.component.html","../../../../libs/components/collapse/src/lib/collapse-group.component.ts","../../../../libs/components/collapse/src/lib/collapse.module.ts","../../../../libs/components/collapse/src/acorex-components-collapse.ts"],"sourcesContent":["import { MXBaseComponent } from '@acorex/components/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n EventEmitter,\n Input,\n Output,\n TemplateRef,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXClickEvent, MXInteractiveComponent } from '@acorex/components/common';\n\n@Component({\n selector: 'ax-collapse',\n templateUrl: './collapse.component.html',\n styleUrls: ['./collapse.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXCollapseComponent extends MXInteractiveComponent {\n\n /**\n * Fires each time the user clicks the panel header.\n * @event\n */\n onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();\n\n\n @Output()\n isCollapsedChange: EventEmitter<any> = new EventEmitter<any>();\n\n private _isCollapsed: boolean = false;\n /**\n * Providing a boolean value for its collapse state\n */\n @Input()\n public get isCollapsed(): boolean {\n return this._isCollapsed;\n }\n public set isCollapsed(v: boolean) {\n if (v != this._isCollapsed) {\n this._isCollapsed = v;\n this.isCollapsedChange.emit(v);\n this.cdr.detectChanges();\n }\n }\n\n @Input()\n caption: string = '';\n\n @Input()\n icon: string = '';\n\n @Input()\n headerTemplate: TemplateRef<any>;\n\n handleHeaderClick(e: MouseEvent) {\n if (this.disabled) return;\n this.isCollapsed = !this.isCollapsed;\n this.onClick.emit({\n component: this,\n htmlElement: this.getHostElement(),\n nativeEvent: e,\n });\n }\n}\n","<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick($event)\">\n <ng-container *ngIf=\"headerTemplate; else default\">\n <div class=\"ax-collapse-custom-header-container\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\n </div>\n </ng-container>\n <ng-template #default>\n <div class=\"ax-collapse-header-container\">\n <div class=\"ax-collapse-header-start\">\n <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n <span>\n {{ caption }}\n </span>\n </div>\n <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{ '-ax-rotation-90': isCollapsed, 'ax-rotation-90': !isCollapsed }\"></span>\n </div>\n </ng-template>\n</div>\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\n <ng-content></ng-content>\n</div>\n","import {\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n EventEmitter,\n Input,\n Output,\n QueryList,\n ViewEncapsulation,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { AXCollapseComponent } from './collapse.component';\nimport { MXBaseComponent } from '@acorex/components/common';\n\n@Component({\n selector: 'ax-collapse-group',\n template: `<ng-content select=\"ax-collapse\"></ng-content>`,\n host: { class: 'ax-collapse-group' },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXCollapseGroupComponent extends MXBaseComponent {\n\n @Output()\n accordionChange: EventEmitter<boolean> = new EventEmitter();\n private _accordion?: boolean = false;\n\n /**\n * Enables accordion behavior, allowing only one collapsible item to be expanded at a time\n */\n @Input()\n get accordion(): boolean {\n return this._accordion!;\n }\n set accordion(value: boolean) {\n this.setOption({\n name: 'accordion',\n value,\n afterCallback: (oldValue, newValue) => {\n if (newValue)\n this.applyAccordion();\n else\n this.removeAccordion();\n },\n });\n }\n\n @Output()\n activeIndexChange: EventEmitter<number> = new EventEmitter<number>();\n private _activeIndex: number = 0;\n /**\n * Index of the currently active item within the group\n */\n @Input()\n get activeIndex(): number {\n return this._activeIndex;\n }\n set activeIndex(value: number) {\n this.setOption({\n name: 'activeIndex',\n value,\n beforeCallback: (oldValue, newValue) => {\n const len = this._items?.length || 0;\n if (newValue < 0)\n newValue = 0;\n if (len > 0 && newValue >= len) {\n newValue = len - 1;\n }\n return newValue;\n },\n afterCallback: (oldValue, newValue) => {\n this.applyAccordion();\n },\n });\n }\n\n @ContentChildren(AXCollapseComponent)\n private _items: QueryList<AXCollapseComponent>;\n\n private _subs: Subscription[] = [];\n\n\n ngAfterViewInit(): void {\n this.applyAccordion();\n }\n\n private applyAccordion() { \n if (!this.accordion)\n return;\n if (this._items && this._items.length > 1) {\n const activeIndex = this._items.get(this.activeIndex) || this._items[0];\n this._items.forEach((c) => (c.isCollapsed = true));\n if (activeIndex)\n activeIndex.isCollapsed = false;\n this._items.forEach((c1: AXCollapseComponent) => {\n const list = this._items.toArray();\n \n this._subs.push(\n c1.onClick.subscribe((e) => {\n this._activeIndex = list.indexOf(c1);\n list\n .filter((c2) => c2 != c1)\n .forEach((c) => (c.isCollapsed = true));\n })\n );\n });\n }\n }\n\n private removeAccordion() {\n this._subs.forEach((s) => s.unsubscribe());\n this._subs = [];\n }\n\n ngOnDestroy(): void {\n this.removeAccordion();\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXCollapseComponent } from './collapse.component';\nimport { AXCollapseGroupComponent } from './collapse-group.component';\n\n@NgModule({\n declarations: [AXCollapseComponent,AXCollapseGroupComponent],\n imports: [ CommonModule ],\n exports: [AXCollapseComponent,AXCollapseGroupComponent],\n providers: [],\n})\nexport class AXCollapseModule {}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}