@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.
- package/README.md +71 -13
- package/fesm2022/nanahoshi-mona-ui-auto-complete.mjs +11 -3
- package/fesm2022/nanahoshi-mona-ui-breadcrumb.mjs +17 -9
- package/fesm2022/nanahoshi-mona-ui-button-group.mjs +16 -7
- package/fesm2022/nanahoshi-mona-ui-calendar.mjs +122 -48
- package/fesm2022/nanahoshi-mona-ui-card.mjs +22 -14
- package/fesm2022/nanahoshi-mona-ui-chart.mjs +78 -18
- package/fesm2022/nanahoshi-mona-ui-check-box.mjs +1 -1
- package/fesm2022/nanahoshi-mona-ui-chip.mjs +199 -77
- package/fesm2022/nanahoshi-mona-ui-circular-progress-bar.mjs +1 -2
- package/fesm2022/nanahoshi-mona-ui-color-gradient.mjs +23 -5
- package/fesm2022/nanahoshi-mona-ui-color-palette.mjs +49 -28
- package/fesm2022/nanahoshi-mona-ui-color-picker.mjs +42 -26
- package/fesm2022/nanahoshi-mona-ui-combo-box.mjs +11 -3
- package/fesm2022/nanahoshi-mona-ui-date-picker.mjs +28 -16
- package/fesm2022/nanahoshi-mona-ui-datetime-picker.mjs +74 -51
- package/fesm2022/nanahoshi-mona-ui-dialog.mjs +57 -25
- package/fesm2022/nanahoshi-mona-ui-dropdown-list.mjs +13 -5
- package/fesm2022/nanahoshi-mona-ui-dropdowns.mjs +17 -6
- package/fesm2022/nanahoshi-mona-ui-editor.mjs +178 -59
- package/fesm2022/nanahoshi-mona-ui-filter.mjs +137 -54
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-cell.component-WEDbZ5vy.mjs → nanahoshi-mona-ui-grid-grid-footer-cell.component-Bg7rckst.mjs} +2 -2
- 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
- package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-D9AwQFDV.mjs +145 -0
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-hc-LeIb0.mjs → nanahoshi-mona-ui-grid-grid-toggle.component-Byb9iTes.mjs} +21 -17
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-virtual-list.component-DYajpOb9.mjs → nanahoshi-mona-ui-grid-grid-virtual-list.component-CBmdtrXm.mjs} +5 -5
- package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-Pm8Fbp6M.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DPmJmCap.mjs} +90 -42
- package/fesm2022/nanahoshi-mona-ui-grid.mjs +1 -1
- package/fesm2022/nanahoshi-mona-ui-i18n.mjs +1168 -0
- package/fesm2022/nanahoshi-mona-ui-internal-list.mjs +12 -4
- package/fesm2022/nanahoshi-mona-ui-internal-tree.mjs +48 -21
- package/fesm2022/nanahoshi-mona-ui-list-box.mjs +33 -18
- package/fesm2022/nanahoshi-mona-ui-list-view.mjs +10 -10
- package/fesm2022/nanahoshi-mona-ui-list.mjs +2 -0
- package/fesm2022/nanahoshi-mona-ui-menubar.mjs +29 -16
- package/fesm2022/nanahoshi-mona-ui-multi-select.mjs +12 -3
- package/fesm2022/nanahoshi-mona-ui-notification.mjs +23 -18
- package/fesm2022/nanahoshi-mona-ui-numeric-text-box.mjs +211 -106
- package/fesm2022/nanahoshi-mona-ui-otp-input.mjs +14 -6
- package/fesm2022/nanahoshi-mona-ui-pager.mjs +46 -19
- package/fesm2022/nanahoshi-mona-ui-popup-menu.mjs +57 -46
- package/fesm2022/nanahoshi-mona-ui-popup.mjs +35 -15
- package/fesm2022/nanahoshi-mona-ui-progress-bar.mjs +38 -17
- package/fesm2022/nanahoshi-mona-ui-rating.mjs +25 -7
- package/fesm2022/nanahoshi-mona-ui-scroll-view.mjs +431 -101
- package/fesm2022/nanahoshi-mona-ui-segmented.mjs +1 -1
- package/fesm2022/nanahoshi-mona-ui-sheet.mjs +26 -8
- package/fesm2022/nanahoshi-mona-ui-sidebar.mjs +222 -28
- package/fesm2022/nanahoshi-mona-ui-slider.mjs +91 -36
- package/fesm2022/nanahoshi-mona-ui-spinner.mjs +34 -15
- package/fesm2022/nanahoshi-mona-ui-split-button.mjs +39 -23
- package/fesm2022/nanahoshi-mona-ui-splitter.mjs +50 -25
- package/fesm2022/nanahoshi-mona-ui-stepper.mjs +32 -14
- package/fesm2022/nanahoshi-mona-ui-switch.mjs +9 -9
- package/fesm2022/nanahoshi-mona-ui-tabs.mjs +74 -56
- package/fesm2022/nanahoshi-mona-ui-text-box.mjs +16 -8
- package/fesm2022/nanahoshi-mona-ui-time-picker.mjs +33 -19
- package/fesm2022/nanahoshi-mona-ui-time-selector.mjs +66 -27
- package/fesm2022/nanahoshi-mona-ui-tree-view.mjs +23 -15
- package/fesm2022/nanahoshi-mona-ui-window.mjs +71 -40
- package/i18n/package.json +4 -0
- package/package.json +5 -1
- package/types/nanahoshi-mona-ui-auto-complete.d.ts +6 -1
- package/types/nanahoshi-mona-ui-breadcrumb.d.ts +9 -3
- package/types/nanahoshi-mona-ui-button-group.d.ts +9 -3
- package/types/nanahoshi-mona-ui-calendar.d.ts +13 -3
- package/types/nanahoshi-mona-ui-card.d.ts +8 -2
- package/types/nanahoshi-mona-ui-chart.d.ts +10 -1
- package/types/nanahoshi-mona-ui-chip.d.ts +14 -5
- package/types/nanahoshi-mona-ui-color-gradient.d.ts +6 -1
- package/types/nanahoshi-mona-ui-color-palette.d.ts +21 -10
- package/types/nanahoshi-mona-ui-color-picker.d.ts +30 -20
- package/types/nanahoshi-mona-ui-combo-box.d.ts +6 -1
- package/types/nanahoshi-mona-ui-date-picker.d.ts +7 -2
- package/types/nanahoshi-mona-ui-datetime-picker.d.ts +33 -8
- package/types/nanahoshi-mona-ui-dialog.d.ts +16 -7
- package/types/nanahoshi-mona-ui-dropdown-list.d.ts +6 -1
- package/types/nanahoshi-mona-ui-dropdowns.d.ts +4 -1
- package/types/nanahoshi-mona-ui-editor.d.ts +6 -1
- package/types/nanahoshi-mona-ui-filter.d.ts +16 -10
- package/types/nanahoshi-mona-ui-grid.d.ts +38 -1
- package/types/nanahoshi-mona-ui-i18n.d.ts +633 -0
- package/types/nanahoshi-mona-ui-internal-list.d.ts +7 -2
- package/types/nanahoshi-mona-ui-internal-tree.d.ts +7 -3
- package/types/nanahoshi-mona-ui-list-box.d.ts +9 -4
- package/types/nanahoshi-mona-ui-list-view.d.ts +6 -6
- package/types/nanahoshi-mona-ui-list.d.ts +1 -1
- package/types/nanahoshi-mona-ui-menubar.d.ts +59 -58
- package/types/nanahoshi-mona-ui-multi-select.d.ts +6 -1
- package/types/nanahoshi-mona-ui-notification.d.ts +11 -5
- package/types/nanahoshi-mona-ui-numeric-text-box.d.ts +24 -15
- package/types/nanahoshi-mona-ui-otp-input.d.ts +9 -3
- package/types/nanahoshi-mona-ui-pager.d.ts +19 -6
- package/types/nanahoshi-mona-ui-popup.d.ts +2 -1
- package/types/nanahoshi-mona-ui-progress-bar.d.ts +9 -7
- package/types/nanahoshi-mona-ui-rating.d.ts +19 -12
- package/types/nanahoshi-mona-ui-scroll-view.d.ts +34 -28
- package/types/nanahoshi-mona-ui-sheet.d.ts +8 -2
- package/types/nanahoshi-mona-ui-sidebar.d.ts +3 -0
- package/types/nanahoshi-mona-ui-slider.d.ts +44 -26
- package/types/nanahoshi-mona-ui-spinner.d.ts +13 -4
- package/types/nanahoshi-mona-ui-split-button.d.ts +62 -56
- package/types/nanahoshi-mona-ui-splitter.d.ts +9 -6
- package/types/nanahoshi-mona-ui-stepper.d.ts +9 -3
- package/types/nanahoshi-mona-ui-switch.d.ts +1 -1
- package/types/nanahoshi-mona-ui-tabs.d.ts +96 -35
- package/types/nanahoshi-mona-ui-text-box.d.ts +11 -5
- package/types/nanahoshi-mona-ui-time-picker.d.ts +7 -2
- package/types/nanahoshi-mona-ui-time-selector.d.ts +16 -5
- package/types/nanahoshi-mona-ui-tree-view.d.ts +15 -10
- package/types/nanahoshi-mona-ui-window.d.ts +26 -20
- 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(
|
|
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": "
|
|
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
|
-
|
|
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
|
-
|
|
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
|