@nanahoshi/mona-ui 0.18.5 → 0.19.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 (112) hide show
  1. package/README.md +71 -13
  2. package/fesm2022/nanahoshi-mona-ui-auto-complete.mjs +11 -3
  3. package/fesm2022/nanahoshi-mona-ui-breadcrumb.mjs +17 -9
  4. package/fesm2022/nanahoshi-mona-ui-button-group.mjs +16 -7
  5. package/fesm2022/nanahoshi-mona-ui-calendar.mjs +122 -48
  6. package/fesm2022/nanahoshi-mona-ui-card.mjs +22 -14
  7. package/fesm2022/nanahoshi-mona-ui-chart.mjs +78 -18
  8. package/fesm2022/nanahoshi-mona-ui-check-box.mjs +1 -1
  9. package/fesm2022/nanahoshi-mona-ui-chip.mjs +199 -77
  10. package/fesm2022/nanahoshi-mona-ui-circular-progress-bar.mjs +1 -2
  11. package/fesm2022/nanahoshi-mona-ui-color-gradient.mjs +23 -5
  12. package/fesm2022/nanahoshi-mona-ui-color-palette.mjs +49 -28
  13. package/fesm2022/nanahoshi-mona-ui-color-picker.mjs +42 -26
  14. package/fesm2022/nanahoshi-mona-ui-combo-box.mjs +11 -3
  15. package/fesm2022/nanahoshi-mona-ui-date-picker.mjs +28 -16
  16. package/fesm2022/nanahoshi-mona-ui-datetime-picker.mjs +74 -51
  17. package/fesm2022/nanahoshi-mona-ui-dialog.mjs +57 -25
  18. package/fesm2022/nanahoshi-mona-ui-dropdown-list.mjs +13 -5
  19. package/fesm2022/nanahoshi-mona-ui-dropdowns.mjs +17 -6
  20. package/fesm2022/nanahoshi-mona-ui-editor.mjs +178 -59
  21. package/fesm2022/nanahoshi-mona-ui-filter.mjs +137 -54
  22. package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-cell.component-WEDbZ5vy.mjs → nanahoshi-mona-ui-grid-grid-footer-cell.component-Bg7rckst.mjs} +2 -2
  23. package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-ibH5osCg.mjs → nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-BSSpaCLL.mjs} +2 -2
  24. package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-D9AwQFDV.mjs +145 -0
  25. package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-hc-LeIb0.mjs → nanahoshi-mona-ui-grid-grid-toggle.component-Byb9iTes.mjs} +21 -17
  26. package/fesm2022/{nanahoshi-mona-ui-grid-grid-virtual-list.component-DYajpOb9.mjs → nanahoshi-mona-ui-grid-grid-virtual-list.component-CBmdtrXm.mjs} +5 -5
  27. package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-Pm8Fbp6M.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DPmJmCap.mjs} +90 -42
  28. package/fesm2022/nanahoshi-mona-ui-grid.mjs +1 -1
  29. package/fesm2022/nanahoshi-mona-ui-i18n.mjs +1168 -0
  30. package/fesm2022/nanahoshi-mona-ui-internal-list.mjs +12 -4
  31. package/fesm2022/nanahoshi-mona-ui-internal-tree.mjs +48 -21
  32. package/fesm2022/nanahoshi-mona-ui-list-box.mjs +33 -18
  33. package/fesm2022/nanahoshi-mona-ui-list-view.mjs +10 -10
  34. package/fesm2022/nanahoshi-mona-ui-list.mjs +2 -0
  35. package/fesm2022/nanahoshi-mona-ui-menubar.mjs +29 -16
  36. package/fesm2022/nanahoshi-mona-ui-multi-select.mjs +12 -3
  37. package/fesm2022/nanahoshi-mona-ui-notification.mjs +23 -18
  38. package/fesm2022/nanahoshi-mona-ui-numeric-text-box.mjs +211 -106
  39. package/fesm2022/nanahoshi-mona-ui-otp-input.mjs +14 -6
  40. package/fesm2022/nanahoshi-mona-ui-pager.mjs +46 -19
  41. package/fesm2022/nanahoshi-mona-ui-popup-menu.mjs +57 -46
  42. package/fesm2022/nanahoshi-mona-ui-popup.mjs +35 -15
  43. package/fesm2022/nanahoshi-mona-ui-progress-bar.mjs +38 -17
  44. package/fesm2022/nanahoshi-mona-ui-rating.mjs +25 -7
  45. package/fesm2022/nanahoshi-mona-ui-scroll-view.mjs +431 -101
  46. package/fesm2022/nanahoshi-mona-ui-segmented.mjs +1 -1
  47. package/fesm2022/nanahoshi-mona-ui-sheet.mjs +26 -8
  48. package/fesm2022/nanahoshi-mona-ui-sidebar.mjs +222 -28
  49. package/fesm2022/nanahoshi-mona-ui-slider.mjs +91 -36
  50. package/fesm2022/nanahoshi-mona-ui-spinner.mjs +34 -15
  51. package/fesm2022/nanahoshi-mona-ui-split-button.mjs +39 -23
  52. package/fesm2022/nanahoshi-mona-ui-splitter.mjs +50 -25
  53. package/fesm2022/nanahoshi-mona-ui-stepper.mjs +32 -14
  54. package/fesm2022/nanahoshi-mona-ui-switch.mjs +9 -9
  55. package/fesm2022/nanahoshi-mona-ui-tabs.mjs +74 -56
  56. package/fesm2022/nanahoshi-mona-ui-text-box.mjs +16 -8
  57. package/fesm2022/nanahoshi-mona-ui-time-picker.mjs +33 -19
  58. package/fesm2022/nanahoshi-mona-ui-time-selector.mjs +66 -27
  59. package/fesm2022/nanahoshi-mona-ui-tree-view.mjs +23 -15
  60. package/fesm2022/nanahoshi-mona-ui-window.mjs +71 -40
  61. package/i18n/package.json +4 -0
  62. package/package.json +5 -1
  63. package/types/nanahoshi-mona-ui-auto-complete.d.ts +6 -1
  64. package/types/nanahoshi-mona-ui-breadcrumb.d.ts +9 -3
  65. package/types/nanahoshi-mona-ui-button-group.d.ts +9 -3
  66. package/types/nanahoshi-mona-ui-calendar.d.ts +13 -3
  67. package/types/nanahoshi-mona-ui-card.d.ts +8 -2
  68. package/types/nanahoshi-mona-ui-chart.d.ts +10 -1
  69. package/types/nanahoshi-mona-ui-chip.d.ts +14 -5
  70. package/types/nanahoshi-mona-ui-color-gradient.d.ts +6 -1
  71. package/types/nanahoshi-mona-ui-color-palette.d.ts +21 -10
  72. package/types/nanahoshi-mona-ui-color-picker.d.ts +30 -20
  73. package/types/nanahoshi-mona-ui-combo-box.d.ts +6 -1
  74. package/types/nanahoshi-mona-ui-date-picker.d.ts +7 -2
  75. package/types/nanahoshi-mona-ui-datetime-picker.d.ts +33 -8
  76. package/types/nanahoshi-mona-ui-dialog.d.ts +16 -7
  77. package/types/nanahoshi-mona-ui-dropdown-list.d.ts +6 -1
  78. package/types/nanahoshi-mona-ui-dropdowns.d.ts +4 -1
  79. package/types/nanahoshi-mona-ui-editor.d.ts +6 -1
  80. package/types/nanahoshi-mona-ui-filter.d.ts +16 -10
  81. package/types/nanahoshi-mona-ui-grid.d.ts +38 -1
  82. package/types/nanahoshi-mona-ui-i18n.d.ts +633 -0
  83. package/types/nanahoshi-mona-ui-internal-list.d.ts +7 -2
  84. package/types/nanahoshi-mona-ui-internal-tree.d.ts +7 -3
  85. package/types/nanahoshi-mona-ui-list-box.d.ts +9 -4
  86. package/types/nanahoshi-mona-ui-list-view.d.ts +6 -6
  87. package/types/nanahoshi-mona-ui-list.d.ts +1 -1
  88. package/types/nanahoshi-mona-ui-menubar.d.ts +59 -58
  89. package/types/nanahoshi-mona-ui-multi-select.d.ts +6 -1
  90. package/types/nanahoshi-mona-ui-notification.d.ts +11 -5
  91. package/types/nanahoshi-mona-ui-numeric-text-box.d.ts +24 -15
  92. package/types/nanahoshi-mona-ui-otp-input.d.ts +9 -3
  93. package/types/nanahoshi-mona-ui-pager.d.ts +19 -6
  94. package/types/nanahoshi-mona-ui-popup.d.ts +2 -1
  95. package/types/nanahoshi-mona-ui-progress-bar.d.ts +9 -7
  96. package/types/nanahoshi-mona-ui-rating.d.ts +19 -12
  97. package/types/nanahoshi-mona-ui-scroll-view.d.ts +34 -28
  98. package/types/nanahoshi-mona-ui-sheet.d.ts +8 -2
  99. package/types/nanahoshi-mona-ui-sidebar.d.ts +3 -0
  100. package/types/nanahoshi-mona-ui-slider.d.ts +44 -26
  101. package/types/nanahoshi-mona-ui-spinner.d.ts +13 -4
  102. package/types/nanahoshi-mona-ui-split-button.d.ts +62 -56
  103. package/types/nanahoshi-mona-ui-splitter.d.ts +9 -6
  104. package/types/nanahoshi-mona-ui-stepper.d.ts +9 -3
  105. package/types/nanahoshi-mona-ui-switch.d.ts +1 -1
  106. package/types/nanahoshi-mona-ui-tabs.d.ts +96 -35
  107. package/types/nanahoshi-mona-ui-text-box.d.ts +11 -5
  108. package/types/nanahoshi-mona-ui-time-picker.d.ts +7 -2
  109. package/types/nanahoshi-mona-ui-time-selector.d.ts +16 -5
  110. package/types/nanahoshi-mona-ui-tree-view.d.ts +15 -10
  111. package/types/nanahoshi-mona-ui-window.d.ts +26 -20
  112. package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-ZM3CneJ0.mjs +0 -145
@@ -3,6 +3,8 @@ import * as _nanahoshi_mona_ui_date_input from '@nanahoshi/mona-ui/date-input';
3
3
  import { Meridiem, HourFormat } from '@nanahoshi/mona-ui/date-input';
4
4
  import * as luxon from 'luxon';
5
5
  import { DateTime } from 'luxon';
6
+ import * as _nanahoshi_mona_ui_i18n from '@nanahoshi/mona-ui/i18n';
7
+ import { MonaTimeSelectorMessages } from '@nanahoshi/mona-ui/i18n';
6
8
  import * as _angular_core from '@angular/core';
7
9
  import { ElementRef } from '@angular/core';
8
10
  import { FormValueControl } from '@angular/forms/signals';
@@ -40,6 +42,7 @@ type TimeSelectorVariantInput = TimeSelectorBaseVariantInput & TimeSelectorHeade
40
42
 
41
43
  declare class TimeSelectorComponent implements FormValueControl<Date | null>, TimeSelectorVariantInput {
42
44
  #private;
45
+ protected readonly isRtl: _angular_core.Signal<boolean>;
43
46
  protected readonly amMeridiemVisible: _angular_core.Signal<boolean>;
44
47
  protected readonly baseClass: _angular_core.Signal<string>;
45
48
  protected readonly computedPopupHeight: _angular_core.Signal<number>;
@@ -56,6 +59,7 @@ declare class TimeSelectorComponent implements FormValueControl<Date | null>, Ti
56
59
  protected readonly meridiem: _angular_core.WritableSignal<Meridiem>;
57
60
  protected readonly meridiemListId: string;
58
61
  protected readonly meridiemListRef: _angular_core.Signal<ElementRef<HTMLOListElement> | undefined>;
62
+ protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaTimeSelectorMessages>;
59
63
  protected readonly minDate: _angular_core.Signal<DateTime<true> | DateTime<false> | null>;
60
64
  protected readonly minute: _angular_core.Signal<luxon.SecondNumbers>;
61
65
  protected readonly minuteListId: string;
@@ -69,6 +73,10 @@ declare class TimeSelectorComponent implements FormValueControl<Date | null>, Ti
69
73
  protected readonly secondListRef: _angular_core.Signal<ElementRef<HTMLOListElement> | undefined>;
70
74
  protected readonly seconds: _angular_core.Signal<_mirei_ts_collections.ImmutableSet<_nanahoshi_mona_ui_date_input.TimeUnit>>;
71
75
  protected readonly viewHours: _angular_core.Signal<_mirei_ts_collections.ImmutableSet<_nanahoshi_mona_ui_date_input.TimeUnit>>;
76
+ /**
77
+ * @description Accessible label for the time selector group.
78
+ * @default ""
79
+ */
72
80
  readonly ariaLabel: _angular_core.InputSignal<string>;
73
81
  readonly disabled: _angular_core.InputSignal<boolean>;
74
82
  readonly focusOnMount: _angular_core.InputSignal<boolean>;
@@ -117,18 +125,19 @@ declare class TimeSelectorComponent implements FormValueControl<Date | null>, Ti
117
125
  readonly value: _angular_core.ModelSignal<Date | null>;
118
126
  constructor();
119
127
  focus(): void;
128
+ protected formatTwoDigit(value: number): string;
120
129
  protected onBlur(): void;
121
130
  protected onHourChange(hour: number): void;
122
131
  protected onMeridiemClick(meridiem: "AM" | "PM"): void;
123
132
  protected onMinuteChange(minute: number): void;
124
- protected onNowClick(event: Event): void;
133
+ protected onNowClick(_event: Event): void;
125
134
  protected onSecondChange(second: number): void;
126
135
  protected onSetTimeClick(): void;
136
+ private dateValuesEqual;
137
+ private focusList;
127
138
  private getListRef;
128
139
  private getNextList;
129
140
  private handleKeydown;
130
- private focusList;
131
- private dateValuesEqual;
132
141
  private initializeNavigatedDate;
133
142
  private navigateItem;
134
143
  private navigateToEdge;
@@ -136,8 +145,10 @@ declare class TimeSelectorComponent implements FormValueControl<Date | null>, Ti
136
145
  private setupKeyboardNavigation;
137
146
  private updateValue;
138
147
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimeSelectorComponent, never>;
139
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimeSelectorComponent, "mona-time-selector", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusOnMount": { "alias": "focusOnMount"; "required": false; "isSignal": true; }; "footer": { "alias": "footer"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, never, never, true, never>;
148
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimeSelectorComponent, "mona-time-selector", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusOnMount": { "alias": "focusOnMount"; "required": false; "isSignal": true; }; "footer": { "alias": "footer"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, never, never, true, never>;
140
149
  }
141
150
 
142
- export { TimeSelectorComponent };
151
+ declare const TIME_SELECTOR_DEFAULT_MESSAGES: MonaTimeSelectorMessages;
152
+
153
+ export { TIME_SELECTOR_DEFAULT_MESSAGES, TimeSelectorComponent };
143
154
  export type { TimeSelectorVariantProps };
@@ -1,3 +1,5 @@
1
+ import * as _nanahoshi_mona_ui_i18n from '@nanahoshi/mona-ui/i18n';
2
+ import { MonaTreeViewMessages } from '@nanahoshi/mona-ui/i18n';
1
3
  import * as _angular_core from '@angular/core';
2
4
  import { TemplateRef, OnInit } from '@angular/core';
3
5
  import { FilterChangeEvent, FilterableOptions } from '@nanahoshi/mona-ui/common';
@@ -12,9 +14,10 @@ interface TreeViewNodeTemplateContext<T> {
12
14
 
13
15
  declare class TreeViewComponent<T> implements ITreeView<T> {
14
16
  #private;
17
+ protected readonly filterAriaLabel: _angular_core.Signal<string>;
18
+ protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaTreeViewMessages>;
15
19
  protected readonly nodeTemplate: _angular_core.Signal<TemplateRef<TreeViewNodeTemplateContext<T>> | undefined>;
16
20
  protected readonly treeService: TreeService<T>;
17
- protected readonly filterAriaLabel: _angular_core.Signal<string>;
18
21
  /**
19
22
  * @description Enables CSS transitions when nodes expand or collapse.
20
23
  * @default true
@@ -25,6 +28,10 @@ declare class TreeViewComponent<T> implements ITreeView<T> {
25
28
  * @default ""
26
29
  */
27
30
  readonly ariaLabel: _angular_core.InputSignal<string>;
31
+ /**
32
+ * @description Emitted when the tree-view loses focus.
33
+ */
34
+ readonly blur: _angular_core.OutputEmitterRef<FocusEvent>;
28
35
  /**
29
36
  * @description Property name or accessor used to derive a node's children from a data item. Accepts a property name, a function returning the children, or a function returning an observable of the children.
30
37
  * @default ""
@@ -35,6 +42,10 @@ declare class TreeViewComponent<T> implements ITreeView<T> {
35
42
  * @default []
36
43
  */
37
44
  readonly data: _angular_core.InputSignal<Iterable<T>>;
45
+ /**
46
+ * @description Emitted when the tree-view gains focus.
47
+ */
48
+ readonly focus: _angular_core.OutputEmitterRef<FocusEvent>;
38
49
  /**
39
50
  * @description Predicate that determines whether a node has children. Required when the children selector returns an observable.
40
51
  * @default null
@@ -50,14 +61,6 @@ declare class TreeViewComponent<T> implements ITreeView<T> {
50
61
  * @default "hierarchical"
51
62
  */
52
63
  readonly mode: _angular_core.InputSignal<DataStructure>;
53
- /**
54
- * @description Emitted when the tree-view loses focus.
55
- */
56
- readonly blur: _angular_core.OutputEmitterRef<FocusEvent>;
57
- /**
58
- * @description Emitted when the tree-view gains focus.
59
- */
60
- readonly focus: _angular_core.OutputEmitterRef<FocusEvent>;
61
64
  /**
62
65
  * @description Emitted when a node is clicked.
63
66
  */
@@ -271,4 +274,6 @@ declare class TreeViewSelectableDirective<T, K = T> implements OnInit {
271
274
  static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TreeViewSelectableDirective<any, any>, "mona-tree-view[monaTreeViewSelectable]", ["monaTreeViewSelectable"], { "selectBy": { "alias": "selectBy"; "required": false; "isSignal": true; }; "selectedKeys": { "alias": "selectedKeys"; "required": false; "isSignal": true; }; "options": { "alias": "monaTreeViewSelectable"; "required": false; "isSignal": true; }; }, { "nodeSelect": "nodeSelect"; "selectedKeysChange": "selectedKeysChange"; "selectionChange": "selectionChange"; }, never, never, true, never>;
272
275
  }
273
276
 
274
- export { TreeViewCheckableDirective, TreeViewComponent, TreeViewDisableDirective, TreeViewDragAndDropDirective, TreeViewExpandableDirective, TreeViewFilterableDirective, TreeViewNodeTemplateDirective, TreeViewSelectableDirective };
277
+ declare const TREE_VIEW_DEFAULT_MESSAGES: MonaTreeViewMessages;
278
+
279
+ export { TREE_VIEW_DEFAULT_MESSAGES, TreeViewCheckableDirective, TreeViewComponent, TreeViewDisableDirective, TreeViewDragAndDropDirective, TreeViewExpandableDirective, TreeViewFilterableDirective, TreeViewNodeTemplateDirective, TreeViewSelectableDirective };
@@ -1,3 +1,5 @@
1
+ import * as _nanahoshi_mona_ui_i18n from '@nanahoshi/mona-ui/i18n';
2
+ import { MonaWindowMessages, WindowMessages } from '@nanahoshi/mona-ui/i18n';
1
3
  import * as _angular_core from '@angular/core';
2
4
  import { ElementRef, ComponentRef, TemplateRef, Type } from '@angular/core';
3
5
  import { PopupCloseEvent, PopupRef } from '@nanahoshi/mona-ui/popup';
@@ -54,19 +56,16 @@ declare class WindowComponent implements WindowVariantInput {
54
56
  * @default true
55
57
  */
56
58
  readonly closable: _angular_core.InputSignal<boolean>;
57
- /**
58
- * @description Emits when the window is about to be closed.
59
- */
60
59
  readonly close: _angular_core.OutputEmitterRef<PopupCloseEvent<unknown>>;
61
- /**
62
- * @description Emitted after the window has fully closed (post-animation). Preventing this event has no effect.
63
- */
64
- readonly closed: _angular_core.OutputEmitterRef<void>;
65
60
  /**
66
61
  * @description Sets whether the window should close when the escape key is pressed.
67
62
  * @default true
68
63
  */
69
64
  readonly closeOnEscape: _angular_core.InputSignal<boolean>;
65
+ /**
66
+ * @description Emitted after the window has fully closed (post-animation). Preventing this event has no effect.
67
+ */
68
+ readonly closed: _angular_core.OutputEmitterRef<void>;
70
69
  /**
71
70
  * @description Emits when the window dragging ends.
72
71
  */
@@ -111,6 +110,10 @@ declare class WindowComponent implements WindowVariantInput {
111
110
  * @default true
112
111
  */
113
112
  readonly maximizable: _angular_core.InputSignal<boolean | undefined>;
113
+ /**
114
+ * @description Internationalization message overrides for accessible labels.
115
+ */
116
+ readonly messages: _angular_core.InputSignal<Partial<_nanahoshi_mona_ui_i18n.MonaWindowMessages> | undefined>;
114
117
  /**
115
118
  * @description Sets the minimum height of the window.
116
119
  */
@@ -163,7 +166,7 @@ declare class WindowComponent implements WindowVariantInput {
163
166
  height?: number;
164
167
  }): void;
165
168
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<WindowComponent, never>;
166
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<WindowComponent, "mona-window", never, { "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "focusedElement": { "alias": "focusedElement"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "left": { "alias": "left"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "maximizable": { "alias": "maximizable"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "minimizable": { "alias": "minimizable"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "top": { "alias": "top"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "height": "heightChange"; "left": "leftChange"; "top": "topChange"; "width": "widthChange"; }, ["actionTemplate", "contentTemplate", "footerTemplate", "titleTemplate"], never, true, never>;
169
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<WindowComponent, "mona-window", never, { "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "focusedElement": { "alias": "focusedElement"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "left": { "alias": "left"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "maximizable": { "alias": "maximizable"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "minimizable": { "alias": "minimizable"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "top": { "alias": "top"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "height": "heightChange"; "left": "leftChange"; "top": "topChange"; "width": "widthChange"; }, ["actionTemplate", "contentTemplate", "footerTemplate", "titleTemplate"], never, true, never>;
167
170
  }
168
171
 
169
172
  declare class WindowActionTemplateDirective {
@@ -186,40 +189,42 @@ declare class WindowTitleTemplateDirective {
186
189
  static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WindowTitleTemplateDirective, "ng-template[monaWindowTitleTemplate]", never, {}, {}, never, never, true, never>;
187
190
  }
188
191
 
192
+ declare const WINDOW_DEFAULT_MESSAGES: MonaWindowMessages;
193
+
189
194
  interface MoveEvent {
190
195
  left: number;
191
196
  top: number;
192
197
  }
193
198
 
194
199
  interface ResizeEvent {
195
- left: number;
196
200
  height: number;
201
+ left: number;
197
202
  top: number;
198
203
  width: number;
199
204
  }
200
205
 
201
206
  interface WindowRefParams<R = unknown> {
202
- close: (result?: R) => void;
203
207
  center: () => void;
208
+ close: (result?: R) => void;
209
+ get close$(): Observable<PopupCloseEvent<R>>;
204
210
  closeWithDelay: (delay: number, result?: R) => void;
211
+ get closed$(): Observable<void>;
212
+ get component(): ComponentRef<unknown> | null;
213
+ get drag$(): Observable<MoveEvent>;
214
+ get dragEnd$(): Observable<void>;
215
+ get dragStart$(): Observable<void>;
216
+ get element(): HTMLElement;
217
+ get height(): number;
205
218
  move: (params: {
206
219
  top?: number;
207
220
  left?: number;
208
221
  }) => void;
222
+ get popupRef(): PopupRef;
209
223
  resize: (params: {
210
224
  width?: number;
211
225
  height?: number;
212
226
  center?: boolean;
213
227
  }) => void;
214
- get close$(): Observable<PopupCloseEvent<R>>;
215
- get closed$(): Observable<void>;
216
- get component(): ComponentRef<unknown> | null;
217
- get drag$(): Observable<MoveEvent>;
218
- get dragEnd$(): Observable<void>;
219
- get dragStart$(): Observable<void>;
220
- get element(): HTMLElement;
221
- get height(): number;
222
- get popupRef(): PopupRef;
223
228
  get resize$(): Observable<ResizeEvent>;
224
229
  get width(): number;
225
230
  }
@@ -270,6 +275,7 @@ interface WindowSettings {
270
275
  maxHeight?: number;
271
276
  maxWidth?: number;
272
277
  maximizable?: boolean;
278
+ messages?: Partial<WindowMessages>;
273
279
  minHeight?: number;
274
280
  minWidth?: number;
275
281
  minimizable?: boolean;
@@ -290,5 +296,5 @@ declare class WindowService {
290
296
  static ɵprov: _angular_core.ɵɵInjectableDeclaration<WindowService>;
291
297
  }
292
298
 
293
- export { WindowActionTemplateDirective, WindowComponent, WindowContentTemplateDirective, WindowFooterTemplateDirective, WindowRef, WindowService, WindowTitleTemplateDirective };
299
+ export { WINDOW_DEFAULT_MESSAGES, WindowActionTemplateDirective, WindowComponent, WindowContentTemplateDirective, WindowFooterTemplateDirective, WindowRef, WindowService, WindowTitleTemplateDirective };
294
300
  export type { MoveEvent, ResizeEvent, WindowActionTemplateContext, WindowSettings, WindowVariantProps };
@@ -1,145 +0,0 @@
1
- import { CdkDropList, CdkDrag, CdkDragPreview } from '@angular/cdk/drag-drop';
2
- import { NgTemplateOutlet } from '@angular/common';
3
- import * as i0 from '@angular/core';
4
- import { inject, DestroyRef, ElementRef, viewChild, computed, input, afterNextRender, Component } from '@angular/core';
5
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
6
- import { ImmutableList, span } from '@mirei/ts-collections';
7
- import { SlicePipe } from '@nanahoshi/mona-ui/common';
8
- import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
9
- import { fromEvent } from 'rxjs';
10
- import { G as GridAddRowComponent, a as GridCellComponent, b as GridRowDirective, c as GridCellDirective, d as GridDetailRowDirective, e as GridDetailIndentCellDirective, f as GridDetailContentCellDirective, g as GridToggleComponent, h as GridSelectionCheckboxComponent, i as GridRowReorderHandleComponent } from './nanahoshi-mona-ui-grid-grid-toggle.component-hc-LeIb0.mjs';
11
- import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-ibH5osCg.mjs';
12
- import { G as GridNavigationService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, b as gridFooterTableRowThemeVariants, c as GridService, d as gridGroupRowThemeVariants, e as gridRowDragPlaceholderThemeVariants, f as gridRowDragPreviewThemeVariants, h as gridListTableThemeVariants, i as GridLogicalCellDirective, j as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-Pm8Fbp6M.mjs';
13
- import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-WEDbZ5vy.mjs';
14
-
15
- class GridListComponent {
16
- #destroyRef;
17
- #gridNavigationService;
18
- #hostElementRef;
19
- #rowFlattener;
20
- constructor() {
21
- this.#destroyRef = inject(DestroyRef);
22
- this.#gridNavigationService = inject(GridNavigationService);
23
- this.#hostElementRef = inject((ElementRef));
24
- this.#rowFlattener = inject(GridRowFlattenerService);
25
- this.bodyTableElementRef = viewChild.required("bodyTable", /* @ts-ignore */
26
- ...(ngDevMode ? [{ debugName: "bodyTableElementRef" }] : /* istanbul ignore next */ []));
27
- this.baseClass = computed(() => {
28
- return gridListBaseThemeVariants({ virtual: false });
29
- }, /* @ts-ignore */
30
- ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
31
- this.flattenedGroupedRows = computed(() => {
32
- const groupColumns = this.gridService.groupColumns();
33
- if (groupColumns.length === 0) {
34
- return [];
35
- }
36
- const collapsedKeys = new Set(this.gridService.collapsedGroupKeys());
37
- const groupAggregateDict = this.gridService.groupAggregateMap().toDictionary(e => e.key, e => e.value);
38
- const showFooter = this.gridService.groupableOptions().showFooter;
39
- return this.#rowFlattener.flatten(this.data(), groupColumns, collapsedKeys, showFooter, groupAggregateDict);
40
- }, /* @ts-ignore */
41
- ...(ngDevMode ? [{ debugName: "flattenedGroupedRows" }] : /* istanbul ignore next */ []));
42
- this.footerTableRowClass = computed(() => {
43
- return gridFooterTableRowThemeVariants();
44
- }, /* @ts-ignore */
45
- ...(ngDevMode ? [{ debugName: "footerTableRowClass" }] : /* istanbul ignore next */ []));
46
- this.gridService = inject(GridService);
47
- this.groupRowClass = computed(() => {
48
- return gridGroupRowThemeVariants();
49
- }, /* @ts-ignore */
50
- ...(ngDevMode ? [{ debugName: "groupRowClass" }] : /* istanbul ignore next */ []));
51
- this.rowDragPlaceholderClass = computed(() => {
52
- return gridRowDragPlaceholderThemeVariants();
53
- }, /* @ts-ignore */
54
- ...(ngDevMode ? [{ debugName: "rowDragPlaceholderClass" }] : /* istanbul ignore next */ []));
55
- this.rowDragPreviewClass = computed(() => {
56
- return gridRowDragPreviewThemeVariants();
57
- }, /* @ts-ignore */
58
- ...(ngDevMode ? [{ debugName: "rowDragPreviewClass" }] : /* istanbul ignore next */ []));
59
- this.tableClass = computed(() => {
60
- return gridListTableThemeVariants();
61
- }, /* @ts-ignore */
62
- ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
63
- this.columns = input(ImmutableList.create(), /* @ts-ignore */
64
- ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
65
- this.data = input(ImmutableList.create(), /* @ts-ignore */
66
- ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
67
- this.span = span;
68
- afterNextRender({
69
- read: () => {
70
- const bodyTableElement = this.bodyTableElementRef().nativeElement;
71
- const bodyScrollElement = this.#hostElementRef.nativeElement;
72
- this.gridService.bodyTableElement.set(bodyTableElement);
73
- this.gridService.bodyScrollElement.set(bodyScrollElement);
74
- this.setSubscriptions();
75
- this.#destroyRef.onDestroy(() => {
76
- if (this.gridService.bodyTableElement() === bodyTableElement) {
77
- this.gridService.bodyTableElement.set(null);
78
- }
79
- if (this.gridService.bodyScrollElement() === bodyScrollElement) {
80
- this.gridService.bodyScrollElement.set(null);
81
- }
82
- });
83
- }
84
- });
85
- }
86
- onGridRowClick(event, row) {
87
- this.gridService.handleRowClick(event, row);
88
- }
89
- onGroupExpandChange(groupKey) {
90
- this.gridService.toggleGroupCollapse(groupKey);
91
- }
92
- onRowDragEnded(_event) {
93
- this.gridService.draggingRowUid.set(null);
94
- }
95
- onRowDragStarted(event) {
96
- this.gridService.draggingRowUid.set(event.source.data.uid);
97
- }
98
- onRowDrop(event) {
99
- this.gridService.draggingRowUid.set(null);
100
- this.gridService.requestRowReorder(event.item.data, event.previousIndex, event.currentIndex);
101
- }
102
- onToggleDetailClick(row) {
103
- const expanded = this.gridService.isRowExpanded(row);
104
- this.gridService.setRowExpanded(row, !expanded);
105
- }
106
- setSubscriptions() {
107
- fromEvent(this.#hostElementRef.nativeElement, "focus")
108
- .pipe(takeUntilDestroyed(this.#destroyRef))
109
- .subscribe(() => {
110
- this.#gridNavigationService.focusActiveCellOrFirstHeader();
111
- });
112
- }
113
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
114
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridListComponent, isStandalone: true, selector: "mona-grid-list", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "bodyTableElementRef", first: true, predicate: ["bodyTable"], descendants: true, isSignal: true }], ngImport: i0, template: "<table #bodyTable [class]=\"tableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n <colgroup>\n @for (_ of gridService.groupColumns(); track $index) {\n <col [style.width.px]=\"gridService.groupColumnWidth\" />\n }\n @if (gridService.rowReorderColumnVisible()) {\n <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n }\n @if (gridService.masterDetailTemplate()) {\n <col [style.width.px]=\"gridService.detailColumnWidth\" />\n }\n @if (gridService.selectionColumnVisible()) {\n <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n }\n @for (col of columns(); track $index) {\n <col [style.width.px]=\"col.calculatedWidth\" />\n }\n </colgroup>\n <tbody\n role=\"rowgroup\"\n cdkDropList\n [cdkDropListData]=\"data().toArray()\"\n [cdkDropListDisabled]=\"!gridService.rowReorderInteractionEnabled()\"\n (cdkDropListDropped)=\"onRowDrop($event)\">\n @if (gridService.addRowVisible()) {\n <tr monaGridAddRow [columns]=\"columns()\"></tr>\n }\n @if (gridService.groupColumns().length === 0) {\n @for (row of data(); track row.uid) {\n @let rowIndex = $index;\n <tr\n (click)=\"onGridRowClick($event, row)\"\n monaGridRow\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"!gridService.canReorderRow(row)\"\n (cdkDragStarted)=\"onRowDragStarted($event)\"\n (cdkDragEnded)=\"onRowDragEnded($event)\"\n [index]=\"rowIndex\"\n [row]=\"row\"\n #gridRow=\"monaGridRow\"\n #rowElement>\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n monaGridLogicalCell\n [structuralColumn]=\"'reorder'\"\n [cellKind]=\"'command'\"\n [columnId]=\"'$rowReorder'\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"row.uid\"\n [section]=\"'body'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('reorder') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('reorder') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'reorder'\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\"\n [attr.colspan]=\"1\">\n <mona-grid-row-reorder-handle [row]=\"row\" [pageIndex]=\"rowIndex\" />\n </td>\n }\n @if (gridService.masterDetailTemplate()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'detail'\"\n [masterDetailToggle]=\"true\"\n monaGridLogicalCell\n [cellKind]=\"'detail'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'detail'\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"row.uid\"\n [section]=\"'body'\"\n [style.width.px]=\"gridService.detailColumnWidth\"\n [attr.colspan]=\"1\">\n <span class=\"flex h-full w-full items-stretch justify-center\">\n <mona-grid-toggle\n [expanded]=\"gridRow.expanded()\"\n [type]=\"'detail'\"\n [width]=\"gridService.detailColumnWidth\"\n (expandedChange)=\"onToggleDetailClick(row)\"></mona-grid-toggle>\n </span>\n </td>\n }\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'selection'\"\n monaGridLogicalCell\n [cellKind]=\"'command'\"\n [columnId]=\"'$selection'\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"row.uid\"\n [section]=\"'body'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('selection') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('selection') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'selection'\"\n [style.width.px]=\"gridService.selectionColumnWidth\"\n [attr.colspan]=\"1\">\n <mona-grid-selection-checkbox [row]=\"row\" [rowIndex]=\"rowIndex\" />\n </td>\n }\n @for (column of columns(); track $index) {\n @let colIndex = $index + gridService.leadingLogicalColumnCount();\n <td\n monaGridCell\n monaGridLockedCell\n [column]=\"column\"\n [dataCell]=\"true\"\n monaGridLogicalCell\n [cellKind]=\"column.kind\"\n [colIndex]=\"colIndex\"\n [columnId]=\"column.id\"\n [editable]=\"\n gridService.editableOptions().enabled === true &&\n gridService.editableOptions().mode === 'cell' &&\n column.kind === 'data' &&\n column.editable === true\n \"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"row.uid\"\n [section]=\"'body'\"\n [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n [lastInRow]=\"\n colIndex ===\n gridService.leadingLogicalColumnCount() + columns().length - 1\n \"\n [attr.colspan]=\"1\"\n [style.width.px]=\"column.calculatedWidth\"\n [style.min-width.px]=\"column.minWidth\"\n (edit)=\"gridCell.handleLogicalCellEnter()\">\n <mona-grid-cell #gridCell [column]=\"column\" [row]=\"row\"></mona-grid-cell>\n </td>\n }\n @if (gridService.contextMenuItems().length !== 0) {\n <ng-container\n [ngTemplateOutlet]=\"contextMenuTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row.data, element: rowElement, index: $index }\">\n </ng-container>\n }\n <ng-template cdkDragPreview>\n <div [class]=\"rowDragPreviewClass()\">\n <i aria-hidden=\"true\" class=\"ri-draggable\"></i>\n <span>{{ gridService.getRowReorderAriaLabel(row, rowIndex + gridService.paginationState().skip) }}</span>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <tr [class]=\"rowDragPlaceholderClass()\">\n <td\n [attr.colspan]=\"gridService.leadingStructuralColumnCount() + columns().length\"\n class=\"h-9 px-2\">\n <span class=\"flex items-center text-xs text-muted-foreground\">Move row</span>\n </td>\n </tr>\n </ng-template>\n </tr>\n @if (gridRow.expanded() && !gridService.rowDragInProgress()) {\n <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'reorder'\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n }\n <td\n monaGridCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"gridService.rowReorderStructuralWidth()\"\n [indentCell]=\"true\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'selection'\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n }\n <td monaGridCell [masterDetailContent]=\"true\" [attr.colspan]=\"columns().length\">\n <ng-container\n [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: row.data }\"></ng-container>\n </td>\n </tr>\n }\n }\n } @else {\n @for (viewRow of flattenedGroupedRows(); track $index) {\n @let rowIndex = $index;\n @if (viewRow.type === \"group\") {\n @let isCollapsed = gridService.isGroupCollapsed(viewRow.groupKey);\n @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n\n <tr\n [class]=\"groupRowClass()\"\n role=\"row\"\n [attr.aria-level]=\"viewRow.depth + 1\"\n [attr.aria-expanded]=\"!isCollapsed\">\n @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth; track $index) {\n <td\n monaGridCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n [grouped]=\"true\"\n [indentCell]=\"true\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.groupColumnWidth\"></td>\n }\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [structuralColumn]=\"'reorder'\"\n [groupPrefixWidth]=\"viewRow.depth * gridService.groupColumnWidth\"\n [grouped]=\"true\"\n [indentCell]=\"true\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n }\n @let colspan =\n columns().length +\n gridService.groupColumns().length +\n (gridService.masterDetailTemplate() ? 1 : 0) +\n (gridService.selectionColumnVisible() ? 1 : 0) -\n viewRow.depth +\n 1;\n\n <td\n monaGridCell\n monaGridLogicalCell\n [cellKind]=\"'group'\"\n [rowIndex]=\"rowIndex\"\n [colIndex]=\"0\"\n [section]=\"'body'\"\n [grouped]=\"true\"\n [groupHeader]=\"true\"\n [prevRowType]=\"prevRow?.type\"\n [firstInRow]=\"true\"\n [lastInRow]=\"columns().length === 0\"\n [groupKey]=\"viewRow.groupKey\"\n (toggle)=\"onGroupExpandChange(viewRow.groupKey)\"\n [attr.colspan]=\"colspan\">\n <p class=\"flex h-full items-center text-sm whitespace-nowrap\">\n <mona-grid-toggle\n [expanded]=\"!isCollapsed\"\n [width]=\"gridService.groupColumnWidth\"\n [type]=\"'group'\"\n (expandedChange)=\"onGroupExpandChange(viewRow.groupKey)\"></mona-grid-toggle>\n <span class=\"font-bold\">{{ viewRow.title }}: {{ viewRow.groupValue }}</span>\n </p>\n </td>\n </tr>\n } @else if (viewRow.type === \"groupFooter\") {\n <tr role=\"row\" [class]=\"footerTableRowClass()\">\n @for (_ of gridService.groupColumns(); track $index) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n }\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [structuralColumn]=\"'reorder'\"\n [footerCellWidth]=\"gridService.rowReorderColumnWidth\"></td>\n }\n @if (gridService.masterDetailTemplate()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [structuralColumn]=\"'detail'\"\n [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n }\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [structuralColumn]=\"'selection'\"\n [footerCellWidth]=\"gridService.selectionColumnWidth\"></td>\n }\n @for (column of columns(); track $index) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [column]=\"column\"\n [lockedCellHeader]=\"true\"\n [footerColumn]=\"column\">\n <mona-grid-footer-cell\n [column]=\"column\"\n [columnIndex]=\"$index\"\n [groupKey]=\"viewRow.groupAggregate.groupKey\"></mona-grid-footer-cell>\n </td>\n }\n </tr>\n } @else {\n @let nextRow = flattenedGroupedRows()[rowIndex + 1];\n @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n <tr\n (click)=\"onGridRowClick($event, viewRow.row)\"\n monaGridRow\n [index]=\"rowIndex\"\n [row]=\"viewRow.row\"\n #gridRow=\"monaGridRow\"\n #rowElement>\n @for (_ of gridService.groupColumns(); track $index) {\n <td\n monaGridCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n [grouped]=\"true\"\n [indentCell]=\"true\"\n [style.width.px]=\"gridService.groupColumnWidth\"></td>\n }\n\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n monaGridLogicalCell\n [structuralColumn]=\"'reorder'\"\n [grouped]=\"true\"\n [cellKind]=\"'command'\"\n [columnId]=\"'$rowReorder'\"\n [prevRowType]=\"prevRow?.type\"\n [nextRowType]=\"nextRow?.type\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"viewRow.row.uid\"\n [section]=\"'body'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('reorder') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('reorder') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'reorder'\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\">\n <mona-grid-row-reorder-handle [row]=\"viewRow.row\" [pageIndex]=\"rowIndex\" />\n </td>\n }\n @if (gridService.masterDetailTemplate()) {\n <td\n monaGridCell\n monaGridLogicalCell\n monaGridLockedCell\n [structuralColumn]=\"'detail'\"\n [grouped]=\"true\"\n [masterDetailToggle]=\"true\"\n [prevRowType]=\"prevRow?.type\"\n [nextRowType]=\"nextRow?.type\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"viewRow.row.uid\"\n [section]=\"'body'\"\n [cellKind]=\"'detail'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'detail'\"\n [style.width.px]=\"gridService.detailColumnWidth\">\n <span class=\"flex h-full w-full items-stretch justify-center\">\n <mona-grid-toggle\n [expanded]=\"gridRow.expanded()\"\n [type]=\"'detail'\"\n [width]=\"gridService.detailColumnWidth\"\n (expandedChange)=\"onToggleDetailClick(viewRow.row)\"></mona-grid-toggle>\n </span>\n </td>\n }\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'selection'\"\n [grouped]=\"true\"\n monaGridLogicalCell\n [cellKind]=\"'command'\"\n [columnId]=\"'$selection'\"\n [prevRowType]=\"prevRow?.type\"\n [nextRowType]=\"nextRow?.type\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"viewRow.row.uid\"\n [section]=\"'body'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('selection') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('selection') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'selection'\"\n [style.width.px]=\"gridService.selectionColumnWidth\">\n <mona-grid-selection-checkbox [row]=\"viewRow.row\" [rowIndex]=\"rowIndex\" />\n </td>\n }\n @for (column of columns(); track $index) {\n @let colIndex = $index + gridService.leadingLogicalColumnCount();\n <td\n monaGridCell\n monaGridLockedCell\n [column]=\"column\"\n [grouped]=\"true\"\n [dataCell]=\"true\"\n [prevRowType]=\"prevRow?.type\"\n [nextRowType]=\"nextRow?.type\"\n monaGridLogicalCell\n [cellKind]=\"column.kind\"\n [colIndex]=\"colIndex\"\n [columnId]=\"column.id\"\n [editable]=\"\n gridService.editableOptions().enabled === true &&\n gridService.editableOptions().mode === 'cell' &&\n column.kind === 'data' &&\n column.editable === true\n \"\n [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n [lastInRow]=\"\n colIndex ===\n gridService.leadingLogicalColumnCount() + columns().length - 1\n \"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"viewRow.row.uid\"\n [section]=\"'body'\"\n [style.width.px]=\"column.calculatedWidth\"\n [style.min-width.px]=\"column.minWidth\"\n (edit)=\"gridCell.handleLogicalCellEnter()\">\n <mona-grid-cell #gridCell [column]=\"column\" [row]=\"viewRow.row\"></mona-grid-cell>\n </td>\n }\n @if (gridService.contextMenuItems().length !== 0) {\n <ng-container\n [ngTemplateOutlet]=\"contextMenuTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: viewRow.row.data,\n element: rowElement,\n index: rowIndex\n }\">\n </ng-container>\n }\n </tr>\n @if (gridRow.expanded() && !gridService.rowDragInProgress()) {\n <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth + 1; track $index) {\n <td\n monaGridCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n [grouped]=\"true\"\n [indentCell]=\"true\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.groupColumnWidth\"></td>\n }\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'reorder'\"\n [grouped]=\"true\"\n [indentCell]=\"true\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n }\n @let colspan = columns().length + gridService.groupColumns().length - 1;\n <td\n monaGridDetailIndentCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"\n (viewRow.depth + 1) * gridService.groupColumnWidth +\n gridService.rowReorderStructuralWidth()\n \"\n [nextRowType]=\"nextRow?.type\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'selection'\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n }\n <td monaGridDetailContentCell [nextRowType]=\"nextRow?.type\" [attr.colspan]=\"colspan\">\n <ng-container\n [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: viewRow.row.data }\"></ng-container>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n</table>\n\n<ng-template let-rowData let-element=\"element\" let-rowIndex=\"index\" #contextMenuTemplate>\n <mona-contextmenu [target]=\"element\" [items]=\"gridService.contextMenuItems()\"></mona-contextmenu>\n <!-- [context]=\"{rowData, element, rowIndex}\"-->\n</ng-template>\n", dependencies: [{ kind: "component", type: GridAddRowComponent, selector: "tr[monaGridAddRow]", inputs: ["columns"] }, { kind: "component", type: GridCellComponent, selector: "mona-grid-cell", inputs: ["column", "row"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ContextMenuComponent, selector: "mona-contextmenu", inputs: ["ariaLabel", "items", "minWidth", "rounded", "size", "target", "width"], outputs: ["menuClick"] }, { kind: "directive", type: GridRowDirective, selector: "tr[monaGridRow]", inputs: ["index", "row"], exportAs: ["monaGridRow"] }, { kind: "directive", type: GridCellDirective, selector: "td[monaGridCell]", inputs: ["dataCell", "groupHeader", "groupToggle", "grouped", "indentCell", "lastInRow", "masterDetailContent", "masterDetailToggle", "nextRowType", "prevRowType"] }, { kind: "directive", type: GridDetailRowDirective, selector: "tr[monaGridDetailRow]" }, { kind: "directive", type: GridDetailIndentCellDirective, selector: "td[monaGridDetailIndentCell]", inputs: ["nextRowType"] }, { kind: "directive", type: GridDetailContentCellDirective, selector: "td[monaGridDetailContentCell]", inputs: ["nextRowType"] }, { kind: "component", type: GridToggleComponent, selector: "mona-grid-toggle", inputs: ["expanded", "type", "width"], outputs: ["expandedChange"] }, { kind: "directive", type: GridFooterTableCellDirective, selector: "td[monaGridFooterTableCell]", inputs: ["footerCellMinWidth", "footerCellWidth", "footerColumn"] }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "groupPrefixWidth", "lockedCellHeader", "lockedStructuralOffset", "structuralColumn"] }, { kind: "component", type: GridFooterCellComponent, selector: "mona-grid-footer-cell", inputs: ["column", "columnIndex", "groupKey"] }, { kind: "component", type: GridSelectionCheckboxComponent, selector: "mona-grid-selection-checkbox", inputs: ["row", "rowIndex"] }, { kind: "component", type: GridRowReorderHandleComponent, selector: "mona-grid-row-reorder-handle", inputs: ["pageIndex", "row"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
115
- }
116
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridListComponent, decorators: [{
117
- type: Component,
118
- args: [{ selector: "mona-grid-list", imports: [
119
- GridAddRowComponent,
120
- GridCellComponent,
121
- NgTemplateOutlet,
122
- ContextMenuComponent,
123
- GridRowDirective,
124
- GridCellDirective,
125
- GridDetailRowDirective,
126
- GridDetailIndentCellDirective,
127
- GridDetailContentCellDirective,
128
- SlicePipe,
129
- GridToggleComponent,
130
- GridFooterTableCellDirective,
131
- GridLogicalCellDirective,
132
- GridLockedCellDirective,
133
- GridFooterCellComponent,
134
- GridSelectionCheckboxComponent,
135
- GridRowReorderHandleComponent,
136
- CdkDropList,
137
- CdkDrag,
138
- CdkDragPreview
139
- ], host: {
140
- "[class]": "baseClass()"
141
- }, template: "<table #bodyTable [class]=\"tableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n <colgroup>\n @for (_ of gridService.groupColumns(); track $index) {\n <col [style.width.px]=\"gridService.groupColumnWidth\" />\n }\n @if (gridService.rowReorderColumnVisible()) {\n <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n }\n @if (gridService.masterDetailTemplate()) {\n <col [style.width.px]=\"gridService.detailColumnWidth\" />\n }\n @if (gridService.selectionColumnVisible()) {\n <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n }\n @for (col of columns(); track $index) {\n <col [style.width.px]=\"col.calculatedWidth\" />\n }\n </colgroup>\n <tbody\n role=\"rowgroup\"\n cdkDropList\n [cdkDropListData]=\"data().toArray()\"\n [cdkDropListDisabled]=\"!gridService.rowReorderInteractionEnabled()\"\n (cdkDropListDropped)=\"onRowDrop($event)\">\n @if (gridService.addRowVisible()) {\n <tr monaGridAddRow [columns]=\"columns()\"></tr>\n }\n @if (gridService.groupColumns().length === 0) {\n @for (row of data(); track row.uid) {\n @let rowIndex = $index;\n <tr\n (click)=\"onGridRowClick($event, row)\"\n monaGridRow\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"!gridService.canReorderRow(row)\"\n (cdkDragStarted)=\"onRowDragStarted($event)\"\n (cdkDragEnded)=\"onRowDragEnded($event)\"\n [index]=\"rowIndex\"\n [row]=\"row\"\n #gridRow=\"monaGridRow\"\n #rowElement>\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n monaGridLogicalCell\n [structuralColumn]=\"'reorder'\"\n [cellKind]=\"'command'\"\n [columnId]=\"'$rowReorder'\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"row.uid\"\n [section]=\"'body'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('reorder') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('reorder') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'reorder'\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\"\n [attr.colspan]=\"1\">\n <mona-grid-row-reorder-handle [row]=\"row\" [pageIndex]=\"rowIndex\" />\n </td>\n }\n @if (gridService.masterDetailTemplate()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'detail'\"\n [masterDetailToggle]=\"true\"\n monaGridLogicalCell\n [cellKind]=\"'detail'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'detail'\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"row.uid\"\n [section]=\"'body'\"\n [style.width.px]=\"gridService.detailColumnWidth\"\n [attr.colspan]=\"1\">\n <span class=\"flex h-full w-full items-stretch justify-center\">\n <mona-grid-toggle\n [expanded]=\"gridRow.expanded()\"\n [type]=\"'detail'\"\n [width]=\"gridService.detailColumnWidth\"\n (expandedChange)=\"onToggleDetailClick(row)\"></mona-grid-toggle>\n </span>\n </td>\n }\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'selection'\"\n monaGridLogicalCell\n [cellKind]=\"'command'\"\n [columnId]=\"'$selection'\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"row.uid\"\n [section]=\"'body'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('selection') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('selection') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'selection'\"\n [style.width.px]=\"gridService.selectionColumnWidth\"\n [attr.colspan]=\"1\">\n <mona-grid-selection-checkbox [row]=\"row\" [rowIndex]=\"rowIndex\" />\n </td>\n }\n @for (column of columns(); track $index) {\n @let colIndex = $index + gridService.leadingLogicalColumnCount();\n <td\n monaGridCell\n monaGridLockedCell\n [column]=\"column\"\n [dataCell]=\"true\"\n monaGridLogicalCell\n [cellKind]=\"column.kind\"\n [colIndex]=\"colIndex\"\n [columnId]=\"column.id\"\n [editable]=\"\n gridService.editableOptions().enabled === true &&\n gridService.editableOptions().mode === 'cell' &&\n column.kind === 'data' &&\n column.editable === true\n \"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"row.uid\"\n [section]=\"'body'\"\n [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n [lastInRow]=\"\n colIndex ===\n gridService.leadingLogicalColumnCount() + columns().length - 1\n \"\n [attr.colspan]=\"1\"\n [style.width.px]=\"column.calculatedWidth\"\n [style.min-width.px]=\"column.minWidth\"\n (edit)=\"gridCell.handleLogicalCellEnter()\">\n <mona-grid-cell #gridCell [column]=\"column\" [row]=\"row\"></mona-grid-cell>\n </td>\n }\n @if (gridService.contextMenuItems().length !== 0) {\n <ng-container\n [ngTemplateOutlet]=\"contextMenuTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row.data, element: rowElement, index: $index }\">\n </ng-container>\n }\n <ng-template cdkDragPreview>\n <div [class]=\"rowDragPreviewClass()\">\n <i aria-hidden=\"true\" class=\"ri-draggable\"></i>\n <span>{{ gridService.getRowReorderAriaLabel(row, rowIndex + gridService.paginationState().skip) }}</span>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n <tr [class]=\"rowDragPlaceholderClass()\">\n <td\n [attr.colspan]=\"gridService.leadingStructuralColumnCount() + columns().length\"\n class=\"h-9 px-2\">\n <span class=\"flex items-center text-xs text-muted-foreground\">Move row</span>\n </td>\n </tr>\n </ng-template>\n </tr>\n @if (gridRow.expanded() && !gridService.rowDragInProgress()) {\n <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'reorder'\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n }\n <td\n monaGridCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"gridService.rowReorderStructuralWidth()\"\n [indentCell]=\"true\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'selection'\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n }\n <td monaGridCell [masterDetailContent]=\"true\" [attr.colspan]=\"columns().length\">\n <ng-container\n [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: row.data }\"></ng-container>\n </td>\n </tr>\n }\n }\n } @else {\n @for (viewRow of flattenedGroupedRows(); track $index) {\n @let rowIndex = $index;\n @if (viewRow.type === \"group\") {\n @let isCollapsed = gridService.isGroupCollapsed(viewRow.groupKey);\n @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n\n <tr\n [class]=\"groupRowClass()\"\n role=\"row\"\n [attr.aria-level]=\"viewRow.depth + 1\"\n [attr.aria-expanded]=\"!isCollapsed\">\n @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth; track $index) {\n <td\n monaGridCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n [grouped]=\"true\"\n [indentCell]=\"true\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.groupColumnWidth\"></td>\n }\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [structuralColumn]=\"'reorder'\"\n [groupPrefixWidth]=\"viewRow.depth * gridService.groupColumnWidth\"\n [grouped]=\"true\"\n [indentCell]=\"true\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n }\n @let colspan =\n columns().length +\n gridService.groupColumns().length +\n (gridService.masterDetailTemplate() ? 1 : 0) +\n (gridService.selectionColumnVisible() ? 1 : 0) -\n viewRow.depth +\n 1;\n\n <td\n monaGridCell\n monaGridLogicalCell\n [cellKind]=\"'group'\"\n [rowIndex]=\"rowIndex\"\n [colIndex]=\"0\"\n [section]=\"'body'\"\n [grouped]=\"true\"\n [groupHeader]=\"true\"\n [prevRowType]=\"prevRow?.type\"\n [firstInRow]=\"true\"\n [lastInRow]=\"columns().length === 0\"\n [groupKey]=\"viewRow.groupKey\"\n (toggle)=\"onGroupExpandChange(viewRow.groupKey)\"\n [attr.colspan]=\"colspan\">\n <p class=\"flex h-full items-center text-sm whitespace-nowrap\">\n <mona-grid-toggle\n [expanded]=\"!isCollapsed\"\n [width]=\"gridService.groupColumnWidth\"\n [type]=\"'group'\"\n (expandedChange)=\"onGroupExpandChange(viewRow.groupKey)\"></mona-grid-toggle>\n <span class=\"font-bold\">{{ viewRow.title }}: {{ viewRow.groupValue }}</span>\n </p>\n </td>\n </tr>\n } @else if (viewRow.type === \"groupFooter\") {\n <tr role=\"row\" [class]=\"footerTableRowClass()\">\n @for (_ of gridService.groupColumns(); track $index) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n }\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [structuralColumn]=\"'reorder'\"\n [footerCellWidth]=\"gridService.rowReorderColumnWidth\"></td>\n }\n @if (gridService.masterDetailTemplate()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [structuralColumn]=\"'detail'\"\n [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n }\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [structuralColumn]=\"'selection'\"\n [footerCellWidth]=\"gridService.selectionColumnWidth\"></td>\n }\n @for (column of columns(); track $index) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [column]=\"column\"\n [lockedCellHeader]=\"true\"\n [footerColumn]=\"column\">\n <mona-grid-footer-cell\n [column]=\"column\"\n [columnIndex]=\"$index\"\n [groupKey]=\"viewRow.groupAggregate.groupKey\"></mona-grid-footer-cell>\n </td>\n }\n </tr>\n } @else {\n @let nextRow = flattenedGroupedRows()[rowIndex + 1];\n @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n <tr\n (click)=\"onGridRowClick($event, viewRow.row)\"\n monaGridRow\n [index]=\"rowIndex\"\n [row]=\"viewRow.row\"\n #gridRow=\"monaGridRow\"\n #rowElement>\n @for (_ of gridService.groupColumns(); track $index) {\n <td\n monaGridCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n [grouped]=\"true\"\n [indentCell]=\"true\"\n [style.width.px]=\"gridService.groupColumnWidth\"></td>\n }\n\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n monaGridLogicalCell\n [structuralColumn]=\"'reorder'\"\n [grouped]=\"true\"\n [cellKind]=\"'command'\"\n [columnId]=\"'$rowReorder'\"\n [prevRowType]=\"prevRow?.type\"\n [nextRowType]=\"nextRow?.type\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"viewRow.row.uid\"\n [section]=\"'body'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('reorder') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('reorder') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'reorder'\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\">\n <mona-grid-row-reorder-handle [row]=\"viewRow.row\" [pageIndex]=\"rowIndex\" />\n </td>\n }\n @if (gridService.masterDetailTemplate()) {\n <td\n monaGridCell\n monaGridLogicalCell\n monaGridLockedCell\n [structuralColumn]=\"'detail'\"\n [grouped]=\"true\"\n [masterDetailToggle]=\"true\"\n [prevRowType]=\"prevRow?.type\"\n [nextRowType]=\"nextRow?.type\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"viewRow.row.uid\"\n [section]=\"'body'\"\n [cellKind]=\"'detail'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('detail') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('detail') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'detail'\"\n [style.width.px]=\"gridService.detailColumnWidth\">\n <span class=\"flex h-full w-full items-stretch justify-center\">\n <mona-grid-toggle\n [expanded]=\"gridRow.expanded()\"\n [type]=\"'detail'\"\n [width]=\"gridService.detailColumnWidth\"\n (expandedChange)=\"onToggleDetailClick(viewRow.row)\"></mona-grid-toggle>\n </span>\n </td>\n }\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'selection'\"\n [grouped]=\"true\"\n monaGridLogicalCell\n [cellKind]=\"'command'\"\n [columnId]=\"'$selection'\"\n [prevRowType]=\"prevRow?.type\"\n [nextRowType]=\"nextRow?.type\"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"viewRow.row.uid\"\n [section]=\"'body'\"\n [colIndex]=\"gridService.structuralColIndexMap().get('selection') ?? 0\"\n [firstInRow]=\"gridService.structuralColIndexMap().get('selection') === 0\"\n [lastInRow]=\"columns().length === 0 && gridService.structuralLastKind() === 'selection'\"\n [style.width.px]=\"gridService.selectionColumnWidth\">\n <mona-grid-selection-checkbox [row]=\"viewRow.row\" [rowIndex]=\"rowIndex\" />\n </td>\n }\n @for (column of columns(); track $index) {\n @let colIndex = $index + gridService.leadingLogicalColumnCount();\n <td\n monaGridCell\n monaGridLockedCell\n [column]=\"column\"\n [grouped]=\"true\"\n [dataCell]=\"true\"\n [prevRowType]=\"prevRow?.type\"\n [nextRowType]=\"nextRow?.type\"\n monaGridLogicalCell\n [cellKind]=\"column.kind\"\n [colIndex]=\"colIndex\"\n [columnId]=\"column.id\"\n [editable]=\"\n gridService.editableOptions().enabled === true &&\n gridService.editableOptions().mode === 'cell' &&\n column.kind === 'data' &&\n column.editable === true\n \"\n [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n [lastInRow]=\"\n colIndex ===\n gridService.leadingLogicalColumnCount() + columns().length - 1\n \"\n [rowIndex]=\"rowIndex\"\n [rowUid]=\"viewRow.row.uid\"\n [section]=\"'body'\"\n [style.width.px]=\"column.calculatedWidth\"\n [style.min-width.px]=\"column.minWidth\"\n (edit)=\"gridCell.handleLogicalCellEnter()\">\n <mona-grid-cell #gridCell [column]=\"column\" [row]=\"viewRow.row\"></mona-grid-cell>\n </td>\n }\n @if (gridService.contextMenuItems().length !== 0) {\n <ng-container\n [ngTemplateOutlet]=\"contextMenuTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: viewRow.row.data,\n element: rowElement,\n index: rowIndex\n }\">\n </ng-container>\n }\n </tr>\n @if (gridRow.expanded() && !gridService.rowDragInProgress()) {\n <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth + 1; track $index) {\n <td\n monaGridCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n [grouped]=\"true\"\n [indentCell]=\"true\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.groupColumnWidth\"></td>\n }\n @if (gridService.rowReorderColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'reorder'\"\n [grouped]=\"true\"\n [indentCell]=\"true\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.rowReorderColumnWidth\"></td>\n }\n @let colspan = columns().length + gridService.groupColumns().length - 1;\n <td\n monaGridDetailIndentCell\n monaGridLockedCell\n [lockedStructuralOffset]=\"\n (viewRow.depth + 1) * gridService.groupColumnWidth +\n gridService.rowReorderStructuralWidth()\n \"\n [nextRowType]=\"nextRow?.type\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n @if (gridService.selectionColumnVisible()) {\n <td\n monaGridCell\n monaGridLockedCell\n [structuralColumn]=\"'selection'\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n }\n <td monaGridDetailContentCell [nextRowType]=\"nextRow?.type\" [attr.colspan]=\"colspan\">\n <ng-container\n [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: viewRow.row.data }\"></ng-container>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n</table>\n\n<ng-template let-rowData let-element=\"element\" let-rowIndex=\"index\" #contextMenuTemplate>\n <mona-contextmenu [target]=\"element\" [items]=\"gridService.contextMenuItems()\"></mona-contextmenu>\n <!-- [context]=\"{rowData, element, rowIndex}\"-->\n</ng-template>\n" }]
142
- }], ctorParameters: () => [], propDecorators: { bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { isSignal: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
143
-
144
- export { GridListComponent };
145
- //# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-ZM3CneJ0.mjs.map