@nanahoshi/mona-ui 0.5.0 → 0.6.1
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/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-cell.component-D-JCCvYJ.mjs → nanahoshi-mona-ui-grid-grid-footer-cell.component-5-9r0o20.mjs} +2 -2
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-7zwgl7u1.mjs → nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Ib52xf0V.mjs} +2 -2
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-list.component-n3eQNIza.mjs → nanahoshi-mona-ui-grid-grid-list.component-D6GBsZr8.mjs} +5 -5
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-BhS7c7rW.mjs → nanahoshi-mona-ui-grid-grid-toggle.component-g25a3EYL.mjs} +2 -2
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-virtual-list.component-B4VB3xFw.mjs → nanahoshi-mona-ui-grid-grid-virtual-list.component-0vCJC8II.mjs} +5 -5
- package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-A6Cq2a4Q.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-qsRN5qZF.mjs} +21 -26
- package/fesm2022/nanahoshi-mona-ui-grid.mjs +1 -1
- package/fesm2022/nanahoshi-mona-ui-popup.mjs +49 -28
- package/fesm2022/nanahoshi-mona-ui-sheet.mjs +246 -0
- package/package.json +5 -1
- package/sheet/package.json +4 -0
- package/types/nanahoshi-mona-ui-grid.d.ts +3 -3
- package/types/nanahoshi-mona-ui-popup.d.ts +16 -1
- package/types/nanahoshi-mona-ui-sheet.d.ts +62 -0
|
@@ -2,7 +2,7 @@ import { NgTemplateOutlet } from '@angular/common';
|
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { inject, computed, input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
import { ImmutableDictionary } from '@mirei/ts-collections';
|
|
5
|
-
import { c as GridService } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-
|
|
5
|
+
import { c as GridService } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-qsRN5qZF.mjs';
|
|
6
6
|
|
|
7
7
|
class GridFooterCellComponent {
|
|
8
8
|
constructor() {
|
|
@@ -102,4 +102,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
102
102
|
}], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], columnIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnIndex", required: true }] }], groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }] } });
|
|
103
103
|
|
|
104
104
|
export { GridFooterCellComponent };
|
|
105
|
-
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-cell.component-
|
|
105
|
+
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-cell.component-5-9r0o20.mjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { computed, input, Directive } from '@angular/core';
|
|
3
|
-
import { v as gridFooterTableCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-
|
|
3
|
+
import { v as gridFooterTableCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-qsRN5qZF.mjs';
|
|
4
4
|
|
|
5
5
|
class GridFooterTableCellDirective {
|
|
6
6
|
constructor() {
|
|
@@ -35,4 +35,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
35
35
|
}], propDecorators: { footerCellMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerCellMinWidth", required: false }] }], footerCellWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerCellWidth", required: false }] }], footerColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerColumn", required: false }] }] } });
|
|
36
36
|
|
|
37
37
|
export { GridFooterTableCellDirective };
|
|
38
|
-
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-
|
|
38
|
+
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Ib52xf0V.mjs.map
|
|
@@ -6,10 +6,10 @@ import { ImmutableList, ImmutableSet, span } from '@mirei/ts-collections';
|
|
|
6
6
|
import { SlicePipe } from '@nanahoshi/mona-ui/common';
|
|
7
7
|
import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
|
|
8
8
|
import { fromEvent } from 'rxjs';
|
|
9
|
-
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 } from './nanahoshi-mona-ui-grid-grid-toggle.component-
|
|
10
|
-
import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-
|
|
11
|
-
import { G as GridNavigationService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, b as gridFooterTableRowThemeVariants, c as GridService, d as gridGroupRowThemeVariants, e as gridListTableThemeVariants, f as GridLogicalCellDirective, h as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-
|
|
12
|
-
import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-
|
|
9
|
+
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 } from './nanahoshi-mona-ui-grid-grid-toggle.component-g25a3EYL.mjs';
|
|
10
|
+
import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Ib52xf0V.mjs';
|
|
11
|
+
import { G as GridNavigationService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, b as gridFooterTableRowThemeVariants, c as GridService, d as gridGroupRowThemeVariants, e as gridListTableThemeVariants, f as GridLogicalCellDirective, h as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-qsRN5qZF.mjs';
|
|
12
|
+
import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-5-9r0o20.mjs';
|
|
13
13
|
|
|
14
14
|
class GridListComponent {
|
|
15
15
|
#destroyRef;
|
|
@@ -118,4 +118,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
118
118
|
}], 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 }] }] } });
|
|
119
119
|
|
|
120
120
|
export { GridListComponent };
|
|
121
|
-
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-
|
|
121
|
+
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-D6GBsZr8.mjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { computed, input, Directive, inject, Component, signal, ElementRef, viewChild, output, effect, untracked, afterNextRender, ChangeDetectionStrategy, LOCALE_ID, model } from '@angular/core';
|
|
3
|
-
import { k as gridListTableCellThemeVariants, l as gridDetailContentCellThemeVariants, m as gridDetailIndentCellThemeVariants, n as gridDetailRowThemeVariants, c as GridService, o as gridListTableRowThemeVariants, p as gridCellEditorBaseThemeVariants, q as gridCellEditorInputThemeVariants, h as GridLockedCellDirective, f as GridLogicalCellDirective, r as gridCellBaseThemeVariants, s as gridCellContainerThemeVariants, t as gridCellDirtyIndicatorThemeVariants, u as gridCellTextThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-
|
|
3
|
+
import { k as gridListTableCellThemeVariants, l as gridDetailContentCellThemeVariants, m as gridDetailIndentCellThemeVariants, n as gridDetailRowThemeVariants, c as GridService, o as gridListTableRowThemeVariants, p as gridCellEditorBaseThemeVariants, q as gridCellEditorInputThemeVariants, h as GridLockedCellDirective, f as GridLogicalCellDirective, r as gridCellBaseThemeVariants, s as gridCellContainerThemeVariants, t as gridCellDirtyIndicatorThemeVariants, u as gridCellTextThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-qsRN5qZF.mjs';
|
|
4
4
|
import { ImmutableList } from '@mirei/ts-collections';
|
|
5
5
|
import * as i1 from '@angular/cdk/a11y';
|
|
6
6
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
@@ -741,4 +741,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
741
741
|
}], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: true }] }, { type: i0.Output, args: ["expandedChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }] } });
|
|
742
742
|
|
|
743
743
|
export { GridAddRowComponent as G, GridCellComponent as a, GridRowDirective as b, GridCellDirective as c, GridDetailRowDirective as d, GridDetailIndentCellDirective as e, GridDetailContentCellDirective as f, GridToggleComponent as g };
|
|
744
|
-
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-toggle.component-
|
|
744
|
+
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-toggle.component-g25a3EYL.mjs.map
|
|
@@ -8,10 +8,10 @@ import { SlicePipe } from '@nanahoshi/mona-ui/common';
|
|
|
8
8
|
import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
|
|
9
9
|
import { rxTimeout } from '@nanahoshi/mona-ui/internal';
|
|
10
10
|
import { fromEvent } from 'rxjs';
|
|
11
|
-
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 } from './nanahoshi-mona-ui-grid-grid-toggle.component-
|
|
12
|
-
import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-
|
|
13
|
-
import { G as GridNavigationService, c as GridService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, i as gridFooterThemeVariants, j as gridFooterTableThemeVariants, b as gridFooterTableRowThemeVariants, d as gridGroupRowThemeVariants, e as gridListTableThemeVariants, f as GridLogicalCellDirective, h as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-
|
|
14
|
-
import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-
|
|
11
|
+
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 } from './nanahoshi-mona-ui-grid-grid-toggle.component-g25a3EYL.mjs';
|
|
12
|
+
import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Ib52xf0V.mjs';
|
|
13
|
+
import { G as GridNavigationService, c as GridService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, i as gridFooterThemeVariants, j as gridFooterTableThemeVariants, b as gridFooterTableRowThemeVariants, d as gridGroupRowThemeVariants, e as gridListTableThemeVariants, f as GridLogicalCellDirective, h as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-qsRN5qZF.mjs';
|
|
14
|
+
import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-5-9r0o20.mjs';
|
|
15
15
|
|
|
16
16
|
class GridVirtualListComponent {
|
|
17
17
|
#destroyRef;
|
|
@@ -228,4 +228,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
228
228
|
}], ctorParameters: () => [], propDecorators: { addRowScrollElementRef: [{ type: i0.ViewChild, args: ["addRowScrollElement", { isSignal: true }] }], bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { isSignal: true }] }], footerScrollElementRef: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
|
|
229
229
|
|
|
230
230
|
export { GridVirtualListComponent };
|
|
231
|
-
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-virtual-list.component-
|
|
231
|
+
//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-virtual-list.component-0vCJC8II.mjs.map
|
|
@@ -2161,16 +2161,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
2161
2161
|
}]
|
|
2162
2162
|
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaGridSelectable", required: false }] }], selectBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectBy", required: false }] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }], selectedKeysChange: [{ type: i0.Output, args: ["selectedKeysChange"] }] } });
|
|
2163
2163
|
|
|
2164
|
-
const GRID_COLUMN_DEFINITION = new InjectionToken("GRID_COLUMN_DEFINITION");
|
|
2165
|
-
|
|
2166
2164
|
class GridSortableDirective {
|
|
2167
2165
|
#destroyRef;
|
|
2168
2166
|
#gridService;
|
|
2169
2167
|
constructor() {
|
|
2170
2168
|
this.#destroyRef = inject(DestroyRef);
|
|
2171
2169
|
this.#gridService = inject(GridService);
|
|
2172
|
-
this.columnDefinitions = contentChildren(GRID_COLUMN_DEFINITION, /* @ts-ignore */
|
|
2173
|
-
...(ngDevMode ? [{ debugName: "columnDefinitions" }] : /* istanbul ignore next */ []));
|
|
2174
2170
|
/**
|
|
2175
2171
|
* @description Emitted when a column header is activated to change its sort direction. Call `preventDefault()` on the event to cancel the sort.
|
|
2176
2172
|
*/
|
|
@@ -2197,15 +2193,6 @@ class GridSortableDirective {
|
|
|
2197
2193
|
}
|
|
2198
2194
|
});
|
|
2199
2195
|
});
|
|
2200
|
-
effect(() => {
|
|
2201
|
-
const columns = this.columnDefinitions().map(c => c.getColumn());
|
|
2202
|
-
untracked(() => {
|
|
2203
|
-
this.#gridService.setColumnDefinitions(columns);
|
|
2204
|
-
if (this.sort().length !== 0) {
|
|
2205
|
-
this.#gridService.loadSorts(this.sort());
|
|
2206
|
-
}
|
|
2207
|
-
});
|
|
2208
|
-
});
|
|
2209
2196
|
effect(() => {
|
|
2210
2197
|
const sort = this.sort();
|
|
2211
2198
|
untracked(() => this.#gridService.loadSorts(sort));
|
|
@@ -2270,14 +2257,14 @@ class GridSortableDirective {
|
|
|
2270
2257
|
});
|
|
2271
2258
|
}
|
|
2272
2259
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridSortableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2273
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.
|
|
2260
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridSortableDirective, isStandalone: true, selector: "mona-grid[monaGridSortable]", inputs: { options: { classPropertyName: "options", publicName: "monaGridSortable", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnSort: "columnSort", sort: "sortChange" }, ngImport: i0 }); }
|
|
2274
2261
|
}
|
|
2275
2262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridSortableDirective, decorators: [{
|
|
2276
2263
|
type: Directive,
|
|
2277
2264
|
args: [{
|
|
2278
2265
|
selector: "mona-grid[monaGridSortable]"
|
|
2279
2266
|
}]
|
|
2280
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
2267
|
+
}], ctorParameters: () => [], propDecorators: { columnSort: [{ type: i0.Output, args: ["columnSort"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaGridSortable", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }] } });
|
|
2281
2268
|
|
|
2282
2269
|
class GridStatePersistenceDirective {
|
|
2283
2270
|
#gridService;
|
|
@@ -2507,6 +2494,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
2507
2494
|
}]
|
|
2508
2495
|
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaGridVirtualScroll", required: false }] }], scrollEnd: [{ type: i0.Output, args: ["scrollEnd"] }], scrollEndThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEndThreshold", required: false }] }] } });
|
|
2509
2496
|
|
|
2497
|
+
const GRID_COLUMN_DEFINITION = new InjectionToken("GRID_COLUMN_DEFINITION");
|
|
2498
|
+
|
|
2510
2499
|
class GridCommandColumnComponent {
|
|
2511
2500
|
constructor() {
|
|
2512
2501
|
this.#column = computed(() => {
|
|
@@ -4450,6 +4439,8 @@ class GridComponent {
|
|
|
4450
4439
|
this.#toolbarActiveIndex = signal(0, /* @ts-ignore */
|
|
4451
4440
|
...(ngDevMode ? [{ debugName: "#toolbarActiveIndex" }] : /* istanbul ignore next */ []));
|
|
4452
4441
|
this.#resizeObserver = null;
|
|
4442
|
+
this.columnDefinitions = contentChildren(GRID_COLUMN_DEFINITION, /* @ts-ignore */
|
|
4443
|
+
...(ngDevMode ? [{ debugName: "columnDefinitions" }] : /* istanbul ignore next */ []));
|
|
4453
4444
|
this.footerScrollElement = viewChild("footerScrollElement", /* @ts-ignore */
|
|
4454
4445
|
...(ngDevMode ? [{ debugName: "footerScrollElement" }] : /* istanbul ignore next */ []));
|
|
4455
4446
|
this.baseClass = computed(() => {
|
|
@@ -4622,6 +4613,10 @@ class GridComponent {
|
|
|
4622
4613
|
* @default ""
|
|
4623
4614
|
*/
|
|
4624
4615
|
this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
|
|
4616
|
+
effect(() => {
|
|
4617
|
+
const columns = this.columnDefinitions().map(definition => definition.getColumn());
|
|
4618
|
+
untracked(() => this.gridService.setColumnDefinitions(columns));
|
|
4619
|
+
});
|
|
4625
4620
|
this.setPageSizeEffect();
|
|
4626
4621
|
this.setGridDetailEffect();
|
|
4627
4622
|
this.setDataEffect();
|
|
@@ -5034,17 +5029,17 @@ class GridComponent {
|
|
|
5034
5029
|
}
|
|
5035
5030
|
}
|
|
5036
5031
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5037
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridComponent, isStandalone: true, selector: "mona-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, resizeMethod: { classPropertyName: "resizeMethod", publicName: "resizeMethod", isSignal: true, isRequired: false, transformFunction: null }, responsivePager: { classPropertyName: "responsivePager", publicName: "responsivePager", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "grid" }, properties: { "class": "baseClass()", "attr.data-uid": "uid" } }, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], queries: [{ propertyName: "gridDetailTemplate", first: true, predicate: GridDetailTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: GridNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: GridToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "footerScrollElement", first: true, predicate: ["footerScrollElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderElement", first: true, predicate: ["gridHeaderElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderTableElement", first: true, predicate: ["headerTable"], descendants: true, isSignal: true }, { propertyName: "groupColumnList", first: true, predicate: ["groupColumnList"], descendants: true, isSignal: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbarTemplate()) {\n <div\n class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n #toolbarElement\n (keydown)=\"onToolbarKeydown($event)\">\n <ng-container\n [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n <button monaButton size=\"small\" #columnsButton>Columns</button>\n <mona-popup\n [anchor]=\"columnsButton\"\n [animation]=\"{ leave: [] }\"\n [width]=\"'max-content'\"\n [anchorConnectionPoint]=\"'bottomleft'\"\n [popupConnectionPoint]=\"'topleft'\"\n #popup>\n <mona-grid-column-chooser\n (apply)=\"popup.closePopup()\"\n (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n </mona-popup>\n </div>\n}\n\n@if (groupable()) {\n <div\n [class]=\"groupPanelClass()\"\n cdkDropList\n #groupColumnList=\"cdkDropList\"\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n @if (gridService.groupColumns().length !== 0) {\n @for (groupColumn of gridService.groupColumns(); track $index) {\n <mona-chip\n [removable]=\"true\"\n size=\"small\"\n [rounded]=\"rounded()\"\n (click)=\"onGroupingColumnSort(groupColumn)\"\n (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n @if (groupColumn.groupSortDirection === \"asc\") {\n <i class=\"ri-arrow-down-line\"></i>\n } @else if (groupColumn.groupSortDirection === \"desc\") {\n <i class=\"ri-arrow-up-line\"></i>\n }\n <span>{{ groupColumn.title }}</span>\n <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n <i class=\"ri-more-2-fill\"></i>\n </span>\n <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n <mona-popup-menu-item\n [disabled]=\"$first\"\n (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n <ng-template monaPopupMenuTextTemplate>\n <i class=\"ri-arrow-left-fill\"></i> Move as previous\n </ng-template>\n </mona-popup-menu-item>\n <mona-popup-menu-item\n [disabled]=\"$last\"\n (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n <ng-template monaPopupMenuTextTemplate>\n <i class=\"ri-arrow-right-fill\"></i> Move as next\n </ng-template>\n </mona-popup-menu-item>\n </mona-popup-menu>\n </mona-chip>\n }\n } @else if (groupPanelPlaceholderVisible()) {\n <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\n }\n </div>\n}\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\n <div>\n <table #headerTable [class]=\"headerTableClass()\" [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.masterDetailTemplate()) {\n <col [style.width.px]=\"gridService.groupColumnWidth\" />\n }\n @for (col of gridService.visibleColumns(); track $index) {\n <col [style.width.px]=\"col.calculatedWidth\" />\n }\n </colgroup>\n <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n <tr\n cdkDropList\n [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n (cdkDropListDropped)=\"onColumnDrop()\"\n [class]=\"headerTableRowClass()\">\n @for (_ of gridService.groupColumns(); track $index) {\n <th\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n scope=\"col\"\n class=\"border-r border-border\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.groupColumnWidth\"></th>\n }\n @if (gridService.masterDetailTemplate()) {\n <th\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n scope=\"col\"\n class=\"border-r border-border\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.detailColumnWidth\"></th>\n }\n @for (column of gridService.visibleColumns(); track $index) {\n @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n <th\n scope=\"col\"\n role=\"columnheader\"\n cdkDrag\n monaGridLockedCell\n [column]=\"column\"\n [lockedCellHeader]=\"true\"\n monaGridLogicalCell\n [cellKind]=\"'header'\"\n [columnId]=\"column.id\"\n [rowIndex]=\"-1\"\n [colIndex]=\"colIndex\"\n [section]=\"'header'\"\n [firstInRow]=\"colIndex === 0\"\n [lastInRow]=\"\n colIndex ===\n gridService.visibleColumns().length - (gridService.masterDetailTemplate() ? 0 : 1)\n \"\n (toggle)=\"onColumnSort(column)\"\n [cdkDragData]=\"column\"\n [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n [class]=\"headerTableCellClass()\"\n (mouseenter)=\"onColumnMouseEnter(column)\"\n (cdkDragEntered)=\"onColumnDragEnter($event)\"\n (cdkDragStarted)=\"onColumnDragStart($event)\"\n [style.min-width.px]=\"column.minWidth\"\n [style.width.px]=\"column.calculatedWidth\"\n [attr.colspan]=\"1\"\n [attr.aria-sort]=\"\n gridService.sortableOptions().enabled\n ? (column.columnSortDirection | columnAriaSort)\n : null\n \">\n <div [class]=\"headerTableColumnWrapClass()\">\n @if (column.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"column.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n } @else if (column.titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n } @else {\n <span\n [class]=\"headerTableColumnTitleClass()\"\n (click)=\"onColumnSort(column)\"\n [title]=\"column.title\"\n >{{ column.title }}</span\n >\n }\n\n <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\n <span>{{ column.sortIndex }}</span>\n }\n @if (column.columnSortDirection === \"asc\") {\n <i class=\"ri-arrow-down-line\"></i>\n } @else if (column.columnSortDirection === \"desc\") {\n <i class=\"ri-arrow-up-line\"></i>\n }\n @if (filterMenuEnabled()) {\n @if (column.kind === \"data\") {\n <mona-grid-filter-menu\n [column]=\"column\"\n [type]=\"column.dataType\"\n (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n }\n }\n </div>\n </div>\n @if (\n dropColumn() === column &&\n dragColumn() &&\n gridService.reorderableOptions().enabled &&\n !groupingInProgress()\n ) {\n <span [class]=\"columnDropHintClass()\"> </span>\n }\n @if (gridService.resizableOptions().enabled && !columnDragging()) {\n <div\n monaGridColumnResizeHandler\n [column]=\"column\"\n [class]=\"columnResizerClass()\"\n (resizeStart)=\"onColumnResizeStart()\"\n (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n }\n <ng-template cdkDragPreview>\n <div [class]=\"columnDragPreviewClass()\">\n <span>{{ column.title }}</span>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n @if (groupingInProgress()) {\n <mona-chip\n style=\"z-index: 10; pointer-events: none\"\n [removable]=\"true\"\n [rounded]=\"rounded()\"\n >{{ column.title }}</mona-chip\n >\n }\n </ng-template>\n </th>\n @if (columnDragging() && dragColumn() === column) {\n <th\n monaGridLockedCell\n [column]=\"column\"\n [lockedCellHeader]=\"true\"\n [class]=\"headerTableCellClass()\"\n [style.min-width.px]=\"column.minWidth\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"column.calculatedWidth\">\n <div [class]=\"headerTableColumnWrapClass()\">\n @if (column.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"column.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n } @else if (column.titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n } @else {\n <span\n [class]=\"headerTableColumnTitleClass()\"\n (click)=\"onColumnSort(column)\"\n [title]=\"column.title\"\n >{{ column.title }}</span\n >\n }\n </div>\n </th>\n }\n }\n </tr>\n @if (filterRowEnabled()) {\n <tr role=\"row\" [class]=\"headerTableRowClass()\">\n @for (_ of gridService.groupColumns(); track $index) {\n <th\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n scope=\"col\"\n class=\"border-r border-border\"\n [style.width.px]=\"gridService.groupColumnWidth\"></th>\n }\n @if (gridService.masterDetailTemplate()) {\n <th\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"\n gridService.groupColumns().length * gridService.groupColumnWidth\n \"\n scope=\"col\"\n class=\"border-r border-border\"\n [style.width.px]=\"gridService.detailColumnWidth\"></th>\n }\n @for (column of gridService.visibleColumns(); track $index) {\n <th\n monaGridLockedCell\n [column]=\"column\"\n [lockedCellHeader]=\"true\"\n scope=\"col\"\n class=\"border-r border-border overflow-hidden\"\n [style.width.px]=\"column.calculatedWidth\"\n [attr.aria-label]=\"'Filter by ' + column.title\">\n @if (column.kind === \"data\" && column.field) {\n <mona-grid-filter-row-cell\n [column]=\"column\"\n (apply)=\"onColumnFilter(column, $event)\" />\n }\n </th>\n }\n </tr>\n }\n </thead>\n </table>\n </div>\n</div>\n\n@defer (when gridWidthSet()) {\n @if (gridService.virtualScrollOptions().enabled) {\n @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n <mona-grid-virtual-list\n [columns]=\"gridService.visibleColumns()\"\n [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n }\n } @else {\n @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n <mona-grid-list\n [columns]=\"gridService.visibleColumns()\"\n [data]=\"gridService.viewPageRows()\"></mona-grid-list>\n @if (footerVisible()) {\n <div\n [class]=\"footerClass()\"\n [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n #footerScrollElement\n data-grid-footer-scroll>\n <div>\n <table [class]=\"footerTableClass()\" [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.masterDetailTemplate()) {\n <col [style.width.px]=\"gridService.groupColumnWidth\" />\n }\n @for (col of gridService.visibleColumns(); track $index) {\n <col [style.width.px]=\"col.calculatedWidth\" />\n }\n </colgroup>\n <tfoot role=\"rowgroup\">\n <tr [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.masterDetailTemplate()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"\n gridService.groupColumns().length * gridService.groupColumnWidth\n \"\n [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n }\n @for (column of gridService.visibleColumns(); 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\"></mona-grid-footer-cell>\n </td>\n }\n </tr>\n </tfoot>\n </table>\n </div>\n </div>\n }\n <mona-pager\n class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\n [skip]=\"gridService.paginationState().skip\"\n [pageSize]=\"gridService.paginationState().take\"\n [total]=\"gridService.viewRowCount()\"\n [size]=\"'small'\"\n [rounded]=\"rounded()\"\n [pageInput]=\"true\"\n [pageSizeValues]=\"pageSizeValues()\"\n [responsive]=\"responsivePager()\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n (pageChange)=\"onPageChange($event)\"></mona-pager>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n }\n }\n} @placeholder {\n <mona-placeholder text=\"Loading...\"></mona-placeholder>\n}\n\n<ng-template #emptyGridTemplate>\n <div [class]=\"noDataClass()\">\n @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n } @else {\n <mona-placeholder text=\"No data\"></mona-placeholder>\n }\n </div>\n</ng-template>\n", dependencies: [{ 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: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridFilterMenuComponent, selector: "mona-grid-filter-menu", inputs: ["column", "type"], outputs: ["apply"] }, { kind: "component", type: GridFilterRowCellComponent, selector: "mona-grid-filter-row-cell", inputs: ["column"], outputs: ["apply"] }, { kind: "directive", type: GridColumnResizeHandlerDirective, selector: "[monaGridColumnResizeHandler]", inputs: ["column"], outputs: ["resizeEnd", "resizeStart"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuItemComponent, selector: "mona-popup-menu-item", inputs: ["disabled", "label"], outputs: ["menuClick"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "lockedCellHeader", "lockedStructuralOffset"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupComponent, selector: "mona-popup", inputs: ["anchor", "anchorConnectionPoint", "animation", "backdropClass", "closeOnBackdropClick", "closeOnEscape", "closeOnMouseLeave", "closeOnOutsideClick", "data", "hasBackdrop", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "offset", "popupClass", "popupConnectionPoint", "popupWrapperClass", "positionStrategy", "positions", "preventClose", "providers", "trigger", "width", "withPush", "closeOnScroll", "restoreFocus", "withScrollTracking"], outputs: ["close", "open"] }, { kind: "component", type: GridColumnChooserComponent, selector: "mona-grid-column-chooser", outputs: ["apply", "cancel"] }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
|
|
5038
|
-
import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-
|
|
5039
|
-
import('./nanahoshi-mona-ui-grid-grid-list.component-
|
|
5040
|
-
import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-
|
|
5041
|
-
import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-
|
|
5032
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridComponent, isStandalone: true, selector: "mona-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, resizeMethod: { classPropertyName: "resizeMethod", publicName: "resizeMethod", isSignal: true, isRequired: false, transformFunction: null }, responsivePager: { classPropertyName: "responsivePager", publicName: "responsivePager", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "grid" }, properties: { "class": "baseClass()", "attr.data-uid": "uid" } }, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], queries: [{ propertyName: "columnDefinitions", predicate: GRID_COLUMN_DEFINITION, isSignal: true }, { propertyName: "gridDetailTemplate", first: true, predicate: GridDetailTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: GridNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: GridToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "footerScrollElement", first: true, predicate: ["footerScrollElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderElement", first: true, predicate: ["gridHeaderElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderTableElement", first: true, predicate: ["headerTable"], descendants: true, isSignal: true }, { propertyName: "groupColumnList", first: true, predicate: ["groupColumnList"], descendants: true, isSignal: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbarTemplate()) {\n <div\n class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n #toolbarElement\n (keydown)=\"onToolbarKeydown($event)\">\n <ng-container\n [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n <button monaButton size=\"small\" #columnsButton>Columns</button>\n <mona-popup\n [anchor]=\"columnsButton\"\n [animation]=\"{ leave: [] }\"\n [width]=\"'max-content'\"\n [anchorConnectionPoint]=\"'bottomleft'\"\n [popupConnectionPoint]=\"'topleft'\"\n #popup>\n <mona-grid-column-chooser\n (apply)=\"popup.closePopup()\"\n (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n </mona-popup>\n </div>\n}\n\n@if (groupable()) {\n <div\n [class]=\"groupPanelClass()\"\n cdkDropList\n #groupColumnList=\"cdkDropList\"\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n @if (gridService.groupColumns().length !== 0) {\n @for (groupColumn of gridService.groupColumns(); track $index) {\n <mona-chip\n [removable]=\"true\"\n size=\"small\"\n [rounded]=\"rounded()\"\n (click)=\"onGroupingColumnSort(groupColumn)\"\n (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n @if (groupColumn.groupSortDirection === \"asc\") {\n <i class=\"ri-arrow-down-line\"></i>\n } @else if (groupColumn.groupSortDirection === \"desc\") {\n <i class=\"ri-arrow-up-line\"></i>\n }\n <span>{{ groupColumn.title }}</span>\n <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n <i class=\"ri-more-2-fill\"></i>\n </span>\n <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n <mona-popup-menu-item\n [disabled]=\"$first\"\n (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n <ng-template monaPopupMenuTextTemplate>\n <i class=\"ri-arrow-left-fill\"></i> Move as previous\n </ng-template>\n </mona-popup-menu-item>\n <mona-popup-menu-item\n [disabled]=\"$last\"\n (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n <ng-template monaPopupMenuTextTemplate>\n <i class=\"ri-arrow-right-fill\"></i> Move as next\n </ng-template>\n </mona-popup-menu-item>\n </mona-popup-menu>\n </mona-chip>\n }\n } @else if (groupPanelPlaceholderVisible()) {\n <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\n }\n </div>\n}\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\n <div>\n <table #headerTable [class]=\"headerTableClass()\" [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.masterDetailTemplate()) {\n <col [style.width.px]=\"gridService.groupColumnWidth\" />\n }\n @for (col of gridService.visibleColumns(); track $index) {\n <col [style.width.px]=\"col.calculatedWidth\" />\n }\n </colgroup>\n <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n <tr\n cdkDropList\n [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n (cdkDropListDropped)=\"onColumnDrop()\"\n [class]=\"headerTableRowClass()\">\n @for (_ of gridService.groupColumns(); track $index) {\n <th\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n scope=\"col\"\n class=\"border-r border-border\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.groupColumnWidth\"></th>\n }\n @if (gridService.masterDetailTemplate()) {\n <th\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n scope=\"col\"\n class=\"border-r border-border\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.detailColumnWidth\"></th>\n }\n @for (column of gridService.visibleColumns(); track $index) {\n @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n <th\n scope=\"col\"\n role=\"columnheader\"\n cdkDrag\n monaGridLockedCell\n [column]=\"column\"\n [lockedCellHeader]=\"true\"\n monaGridLogicalCell\n [cellKind]=\"'header'\"\n [columnId]=\"column.id\"\n [rowIndex]=\"-1\"\n [colIndex]=\"colIndex\"\n [section]=\"'header'\"\n [firstInRow]=\"colIndex === 0\"\n [lastInRow]=\"\n colIndex ===\n gridService.visibleColumns().length - (gridService.masterDetailTemplate() ? 0 : 1)\n \"\n (toggle)=\"onColumnSort(column)\"\n [cdkDragData]=\"column\"\n [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n [class]=\"headerTableCellClass()\"\n (mouseenter)=\"onColumnMouseEnter(column)\"\n (cdkDragEntered)=\"onColumnDragEnter($event)\"\n (cdkDragStarted)=\"onColumnDragStart($event)\"\n [style.min-width.px]=\"column.minWidth\"\n [style.width.px]=\"column.calculatedWidth\"\n [attr.colspan]=\"1\"\n [attr.aria-sort]=\"\n gridService.sortableOptions().enabled\n ? (column.columnSortDirection | columnAriaSort)\n : null\n \">\n <div [class]=\"headerTableColumnWrapClass()\">\n @if (column.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"column.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n } @else if (column.titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n } @else {\n <span\n [class]=\"headerTableColumnTitleClass()\"\n (click)=\"onColumnSort(column)\"\n [title]=\"column.title\"\n >{{ column.title }}</span\n >\n }\n\n <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\n <span>{{ column.sortIndex }}</span>\n }\n @if (column.columnSortDirection === \"asc\") {\n <i class=\"ri-arrow-down-line\"></i>\n } @else if (column.columnSortDirection === \"desc\") {\n <i class=\"ri-arrow-up-line\"></i>\n }\n @if (filterMenuEnabled()) {\n @if (column.kind === \"data\") {\n <mona-grid-filter-menu\n [column]=\"column\"\n [type]=\"column.dataType\"\n (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n }\n }\n </div>\n </div>\n @if (\n dropColumn() === column &&\n dragColumn() &&\n gridService.reorderableOptions().enabled &&\n !groupingInProgress()\n ) {\n <span [class]=\"columnDropHintClass()\"> </span>\n }\n @if (gridService.resizableOptions().enabled && !columnDragging()) {\n <div\n monaGridColumnResizeHandler\n [column]=\"column\"\n [class]=\"columnResizerClass()\"\n (resizeStart)=\"onColumnResizeStart()\"\n (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n }\n <ng-template cdkDragPreview>\n <div [class]=\"columnDragPreviewClass()\">\n <span>{{ column.title }}</span>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n @if (groupingInProgress()) {\n <mona-chip\n style=\"z-index: 10; pointer-events: none\"\n [removable]=\"true\"\n [rounded]=\"rounded()\"\n >{{ column.title }}</mona-chip\n >\n }\n </ng-template>\n </th>\n @if (columnDragging() && dragColumn() === column) {\n <th\n monaGridLockedCell\n [column]=\"column\"\n [lockedCellHeader]=\"true\"\n [class]=\"headerTableCellClass()\"\n [style.min-width.px]=\"column.minWidth\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"column.calculatedWidth\">\n <div [class]=\"headerTableColumnWrapClass()\">\n @if (column.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"column.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n } @else if (column.titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n } @else {\n <span\n [class]=\"headerTableColumnTitleClass()\"\n (click)=\"onColumnSort(column)\"\n [title]=\"column.title\"\n >{{ column.title }}</span\n >\n }\n </div>\n </th>\n }\n }\n </tr>\n @if (filterRowEnabled()) {\n <tr role=\"row\" [class]=\"headerTableRowClass()\">\n @for (_ of gridService.groupColumns(); track $index) {\n <th\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n scope=\"col\"\n class=\"border-r border-border\"\n [style.width.px]=\"gridService.groupColumnWidth\"></th>\n }\n @if (gridService.masterDetailTemplate()) {\n <th\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"\n gridService.groupColumns().length * gridService.groupColumnWidth\n \"\n scope=\"col\"\n class=\"border-r border-border\"\n [style.width.px]=\"gridService.detailColumnWidth\"></th>\n }\n @for (column of gridService.visibleColumns(); track $index) {\n <th\n monaGridLockedCell\n [column]=\"column\"\n [lockedCellHeader]=\"true\"\n scope=\"col\"\n class=\"border-r border-border overflow-hidden\"\n [style.width.px]=\"column.calculatedWidth\"\n [attr.aria-label]=\"'Filter by ' + column.title\">\n @if (column.kind === \"data\" && column.field) {\n <mona-grid-filter-row-cell\n [column]=\"column\"\n (apply)=\"onColumnFilter(column, $event)\" />\n }\n </th>\n }\n </tr>\n }\n </thead>\n </table>\n </div>\n</div>\n\n@defer (when gridWidthSet()) {\n @if (gridService.virtualScrollOptions().enabled) {\n @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n <mona-grid-virtual-list\n [columns]=\"gridService.visibleColumns()\"\n [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n }\n } @else {\n @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n <mona-grid-list\n [columns]=\"gridService.visibleColumns()\"\n [data]=\"gridService.viewPageRows()\"></mona-grid-list>\n @if (footerVisible()) {\n <div\n [class]=\"footerClass()\"\n [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n #footerScrollElement\n data-grid-footer-scroll>\n <div>\n <table [class]=\"footerTableClass()\" [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.masterDetailTemplate()) {\n <col [style.width.px]=\"gridService.groupColumnWidth\" />\n }\n @for (col of gridService.visibleColumns(); track $index) {\n <col [style.width.px]=\"col.calculatedWidth\" />\n }\n </colgroup>\n <tfoot role=\"rowgroup\">\n <tr [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.masterDetailTemplate()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"\n gridService.groupColumns().length * gridService.groupColumnWidth\n \"\n [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n }\n @for (column of gridService.visibleColumns(); 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\"></mona-grid-footer-cell>\n </td>\n }\n </tr>\n </tfoot>\n </table>\n </div>\n </div>\n }\n <mona-pager\n class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\n [skip]=\"gridService.paginationState().skip\"\n [pageSize]=\"gridService.paginationState().take\"\n [total]=\"gridService.viewRowCount()\"\n [size]=\"'small'\"\n [rounded]=\"rounded()\"\n [pageInput]=\"true\"\n [pageSizeValues]=\"pageSizeValues()\"\n [responsive]=\"responsivePager()\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n (pageChange)=\"onPageChange($event)\"></mona-pager>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n }\n }\n} @placeholder {\n <mona-placeholder text=\"Loading...\"></mona-placeholder>\n}\n\n<ng-template #emptyGridTemplate>\n <div [class]=\"noDataClass()\">\n @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n } @else {\n <mona-placeholder text=\"No data\"></mona-placeholder>\n }\n </div>\n</ng-template>\n", dependencies: [{ 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: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridFilterMenuComponent, selector: "mona-grid-filter-menu", inputs: ["column", "type"], outputs: ["apply"] }, { kind: "component", type: GridFilterRowCellComponent, selector: "mona-grid-filter-row-cell", inputs: ["column"], outputs: ["apply"] }, { kind: "directive", type: GridColumnResizeHandlerDirective, selector: "[monaGridColumnResizeHandler]", inputs: ["column"], outputs: ["resizeEnd", "resizeStart"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuItemComponent, selector: "mona-popup-menu-item", inputs: ["disabled", "label"], outputs: ["menuClick"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "lockedCellHeader", "lockedStructuralOffset"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupComponent, selector: "mona-popup", inputs: ["anchor", "anchorConnectionPoint", "animation", "backdropClass", "closeOnBackdropClick", "closeOnEscape", "closeOnMouseLeave", "closeOnOutsideClick", "data", "hasBackdrop", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "offset", "popupClass", "popupConnectionPoint", "popupWrapperClass", "positionStrategy", "positions", "preventClose", "providers", "trigger", "width", "withPush", "closeOnScroll", "restoreFocus", "withScrollTracking"], outputs: ["close", "open"] }, { kind: "component", type: GridColumnChooserComponent, selector: "mona-grid-column-chooser", outputs: ["apply", "cancel"] }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
|
|
5033
|
+
import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-5-9r0o20.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
|
|
5034
|
+
import('./nanahoshi-mona-ui-grid-grid-list.component-D6GBsZr8.mjs').then(m => m.GridListComponent), PagerComponent, /* @ts-ignore */
|
|
5035
|
+
import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-0vCJC8II.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
|
|
5036
|
+
import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Ib52xf0V.mjs').then(m => m.GridFooterTableCellDirective), GridLockedCellDirective]] }); }
|
|
5042
5037
|
}
|
|
5043
5038
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ngImport: i0, type: GridComponent, resolveDeferredDeps: () => [/* @ts-ignore */
|
|
5044
|
-
import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-
|
|
5045
|
-
import('./nanahoshi-mona-ui-grid-grid-list.component-
|
|
5046
|
-
import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-
|
|
5047
|
-
import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-
|
|
5039
|
+
import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-5-9r0o20.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
|
|
5040
|
+
import('./nanahoshi-mona-ui-grid-grid-list.component-D6GBsZr8.mjs').then(m => m.GridListComponent), /* @ts-ignore */
|
|
5041
|
+
import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-0vCJC8II.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
|
|
5042
|
+
import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Ib52xf0V.mjs').then(m => m.GridFooterTableCellDirective)], resolveMetadata: (GridFooterCellComponent, GridListComponent, GridVirtualListComponent, GridFooterTableCellDirective) => ({ decorators: [{
|
|
5048
5043
|
type: Component,
|
|
5049
5044
|
args: [{ selector: "mona-grid", changeDetection: ChangeDetectionStrategy.OnPush, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], imports: [
|
|
5050
5045
|
CdkDropList,
|
|
@@ -5076,7 +5071,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
|
|
|
5076
5071
|
"[attr.data-uid]": "uid",
|
|
5077
5072
|
role: "grid"
|
|
5078
5073
|
}, template: "@if (toolbarTemplate()) {\n <div\n class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n #toolbarElement\n (keydown)=\"onToolbarKeydown($event)\">\n <ng-container\n [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n <button monaButton size=\"small\" #columnsButton>Columns</button>\n <mona-popup\n [anchor]=\"columnsButton\"\n [animation]=\"{ leave: [] }\"\n [width]=\"'max-content'\"\n [anchorConnectionPoint]=\"'bottomleft'\"\n [popupConnectionPoint]=\"'topleft'\"\n #popup>\n <mona-grid-column-chooser\n (apply)=\"popup.closePopup()\"\n (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n </mona-popup>\n </div>\n}\n\n@if (groupable()) {\n <div\n [class]=\"groupPanelClass()\"\n cdkDropList\n #groupColumnList=\"cdkDropList\"\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n @if (gridService.groupColumns().length !== 0) {\n @for (groupColumn of gridService.groupColumns(); track $index) {\n <mona-chip\n [removable]=\"true\"\n size=\"small\"\n [rounded]=\"rounded()\"\n (click)=\"onGroupingColumnSort(groupColumn)\"\n (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n @if (groupColumn.groupSortDirection === \"asc\") {\n <i class=\"ri-arrow-down-line\"></i>\n } @else if (groupColumn.groupSortDirection === \"desc\") {\n <i class=\"ri-arrow-up-line\"></i>\n }\n <span>{{ groupColumn.title }}</span>\n <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n <i class=\"ri-more-2-fill\"></i>\n </span>\n <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n <mona-popup-menu-item\n [disabled]=\"$first\"\n (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n <ng-template monaPopupMenuTextTemplate>\n <i class=\"ri-arrow-left-fill\"></i> Move as previous\n </ng-template>\n </mona-popup-menu-item>\n <mona-popup-menu-item\n [disabled]=\"$last\"\n (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n <ng-template monaPopupMenuTextTemplate>\n <i class=\"ri-arrow-right-fill\"></i> Move as next\n </ng-template>\n </mona-popup-menu-item>\n </mona-popup-menu>\n </mona-chip>\n }\n } @else if (groupPanelPlaceholderVisible()) {\n <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\n }\n </div>\n}\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\n <div>\n <table #headerTable [class]=\"headerTableClass()\" [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.masterDetailTemplate()) {\n <col [style.width.px]=\"gridService.groupColumnWidth\" />\n }\n @for (col of gridService.visibleColumns(); track $index) {\n <col [style.width.px]=\"col.calculatedWidth\" />\n }\n </colgroup>\n <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n <tr\n cdkDropList\n [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n (cdkDropListDropped)=\"onColumnDrop()\"\n [class]=\"headerTableRowClass()\">\n @for (_ of gridService.groupColumns(); track $index) {\n <th\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n scope=\"col\"\n class=\"border-r border-border\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.groupColumnWidth\"></th>\n }\n @if (gridService.masterDetailTemplate()) {\n <th\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n scope=\"col\"\n class=\"border-r border-border\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"gridService.detailColumnWidth\"></th>\n }\n @for (column of gridService.visibleColumns(); track $index) {\n @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n <th\n scope=\"col\"\n role=\"columnheader\"\n cdkDrag\n monaGridLockedCell\n [column]=\"column\"\n [lockedCellHeader]=\"true\"\n monaGridLogicalCell\n [cellKind]=\"'header'\"\n [columnId]=\"column.id\"\n [rowIndex]=\"-1\"\n [colIndex]=\"colIndex\"\n [section]=\"'header'\"\n [firstInRow]=\"colIndex === 0\"\n [lastInRow]=\"\n colIndex ===\n gridService.visibleColumns().length - (gridService.masterDetailTemplate() ? 0 : 1)\n \"\n (toggle)=\"onColumnSort(column)\"\n [cdkDragData]=\"column\"\n [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n [class]=\"headerTableCellClass()\"\n (mouseenter)=\"onColumnMouseEnter(column)\"\n (cdkDragEntered)=\"onColumnDragEnter($event)\"\n (cdkDragStarted)=\"onColumnDragStart($event)\"\n [style.min-width.px]=\"column.minWidth\"\n [style.width.px]=\"column.calculatedWidth\"\n [attr.colspan]=\"1\"\n [attr.aria-sort]=\"\n gridService.sortableOptions().enabled\n ? (column.columnSortDirection | columnAriaSort)\n : null\n \">\n <div [class]=\"headerTableColumnWrapClass()\">\n @if (column.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"column.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n } @else if (column.titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n } @else {\n <span\n [class]=\"headerTableColumnTitleClass()\"\n (click)=\"onColumnSort(column)\"\n [title]=\"column.title\"\n >{{ column.title }}</span\n >\n }\n\n <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\n <span>{{ column.sortIndex }}</span>\n }\n @if (column.columnSortDirection === \"asc\") {\n <i class=\"ri-arrow-down-line\"></i>\n } @else if (column.columnSortDirection === \"desc\") {\n <i class=\"ri-arrow-up-line\"></i>\n }\n @if (filterMenuEnabled()) {\n @if (column.kind === \"data\") {\n <mona-grid-filter-menu\n [column]=\"column\"\n [type]=\"column.dataType\"\n (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n }\n }\n </div>\n </div>\n @if (\n dropColumn() === column &&\n dragColumn() &&\n gridService.reorderableOptions().enabled &&\n !groupingInProgress()\n ) {\n <span [class]=\"columnDropHintClass()\"> </span>\n }\n @if (gridService.resizableOptions().enabled && !columnDragging()) {\n <div\n monaGridColumnResizeHandler\n [column]=\"column\"\n [class]=\"columnResizerClass()\"\n (resizeStart)=\"onColumnResizeStart()\"\n (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n }\n <ng-template cdkDragPreview>\n <div [class]=\"columnDragPreviewClass()\">\n <span>{{ column.title }}</span>\n </div>\n </ng-template>\n <ng-template cdkDragPlaceholder>\n @if (groupingInProgress()) {\n <mona-chip\n style=\"z-index: 10; pointer-events: none\"\n [removable]=\"true\"\n [rounded]=\"rounded()\"\n >{{ column.title }}</mona-chip\n >\n }\n </ng-template>\n </th>\n @if (columnDragging() && dragColumn() === column) {\n <th\n monaGridLockedCell\n [column]=\"column\"\n [lockedCellHeader]=\"true\"\n [class]=\"headerTableCellClass()\"\n [style.min-width.px]=\"column.minWidth\"\n [attr.colspan]=\"1\"\n [style.width.px]=\"column.calculatedWidth\">\n <div [class]=\"headerTableColumnWrapClass()\">\n @if (column.headerTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"column.headerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n } @else if (column.titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n } @else {\n <span\n [class]=\"headerTableColumnTitleClass()\"\n (click)=\"onColumnSort(column)\"\n [title]=\"column.title\"\n >{{ column.title }}</span\n >\n }\n </div>\n </th>\n }\n }\n </tr>\n @if (filterRowEnabled()) {\n <tr role=\"row\" [class]=\"headerTableRowClass()\">\n @for (_ of gridService.groupColumns(); track $index) {\n <th\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n scope=\"col\"\n class=\"border-r border-border\"\n [style.width.px]=\"gridService.groupColumnWidth\"></th>\n }\n @if (gridService.masterDetailTemplate()) {\n <th\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"\n gridService.groupColumns().length * gridService.groupColumnWidth\n \"\n scope=\"col\"\n class=\"border-r border-border\"\n [style.width.px]=\"gridService.detailColumnWidth\"></th>\n }\n @for (column of gridService.visibleColumns(); track $index) {\n <th\n monaGridLockedCell\n [column]=\"column\"\n [lockedCellHeader]=\"true\"\n scope=\"col\"\n class=\"border-r border-border overflow-hidden\"\n [style.width.px]=\"column.calculatedWidth\"\n [attr.aria-label]=\"'Filter by ' + column.title\">\n @if (column.kind === \"data\" && column.field) {\n <mona-grid-filter-row-cell\n [column]=\"column\"\n (apply)=\"onColumnFilter(column, $event)\" />\n }\n </th>\n }\n </tr>\n }\n </thead>\n </table>\n </div>\n</div>\n\n@defer (when gridWidthSet()) {\n @if (gridService.virtualScrollOptions().enabled) {\n @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n <mona-grid-virtual-list\n [columns]=\"gridService.visibleColumns()\"\n [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n }\n } @else {\n @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n <mona-grid-list\n [columns]=\"gridService.visibleColumns()\"\n [data]=\"gridService.viewPageRows()\"></mona-grid-list>\n @if (footerVisible()) {\n <div\n [class]=\"footerClass()\"\n [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n #footerScrollElement\n data-grid-footer-scroll>\n <div>\n <table [class]=\"footerTableClass()\" [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.masterDetailTemplate()) {\n <col [style.width.px]=\"gridService.groupColumnWidth\" />\n }\n @for (col of gridService.visibleColumns(); track $index) {\n <col [style.width.px]=\"col.calculatedWidth\" />\n }\n </colgroup>\n <tfoot role=\"rowgroup\">\n <tr [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.masterDetailTemplate()) {\n <td\n monaGridFooterTableCell\n monaGridLockedCell\n [lockedCellHeader]=\"true\"\n [lockedStructuralOffset]=\"\n gridService.groupColumns().length * gridService.groupColumnWidth\n \"\n [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n }\n @for (column of gridService.visibleColumns(); 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\"></mona-grid-footer-cell>\n </td>\n }\n </tr>\n </tfoot>\n </table>\n </div>\n </div>\n }\n <mona-pager\n class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\n [skip]=\"gridService.paginationState().skip\"\n [pageSize]=\"gridService.paginationState().take\"\n [total]=\"gridService.viewRowCount()\"\n [size]=\"'small'\"\n [rounded]=\"rounded()\"\n [pageInput]=\"true\"\n [pageSizeValues]=\"pageSizeValues()\"\n [responsive]=\"responsivePager()\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n (pageChange)=\"onPageChange($event)\"></mona-pager>\n } @else {\n <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n }\n }\n} @placeholder {\n <mona-placeholder text=\"Loading...\"></mona-placeholder>\n}\n\n<ng-template #emptyGridTemplate>\n <div [class]=\"noDataClass()\">\n @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n } @else {\n <mona-placeholder text=\"No data\"></mona-placeholder>\n }\n </div>\n</ng-template>\n" }]
|
|
5079
|
-
}], ctorParameters: () => [], propDecorators: { footerScrollElement: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], gridDetailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridDetailTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], gridHeaderElement: [{ type: i0.ViewChild, args: ["gridHeaderElement", { isSignal: true }] }], gridHeaderTableElement: [{ type: i0.ViewChild, args: ["headerTable", { isSignal: true }] }], groupColumnList: [{ type: i0.ViewChild, args: ["groupColumnList", { isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], toolbarElement: [{ type: i0.ViewChild, args: ["toolbarElement", { isSignal: true }] }], toolbarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridToolbarTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeValues", required: false }] }], resizeMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMethod", required: false }] }], responsivePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsivePager", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } }) });
|
|
5074
|
+
}], ctorParameters: () => [], propDecorators: { columnDefinitions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GRID_COLUMN_DEFINITION), { isSignal: true }] }], footerScrollElement: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], gridDetailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridDetailTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], gridHeaderElement: [{ type: i0.ViewChild, args: ["gridHeaderElement", { isSignal: true }] }], gridHeaderTableElement: [{ type: i0.ViewChild, args: ["headerTable", { isSignal: true }] }], groupColumnList: [{ type: i0.ViewChild, args: ["groupColumnList", { isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], toolbarElement: [{ type: i0.ViewChild, args: ["toolbarElement", { isSignal: true }] }], toolbarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridToolbarTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeValues", required: false }] }], resizeMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMethod", required: false }] }], responsivePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsivePager", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } }) });
|
|
5080
5075
|
|
|
5081
5076
|
/*
|
|
5082
5077
|
* Public API Surface of @nanahoshi/mona-ui/grid
|
|
@@ -5087,4 +5082,4 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
|
|
|
5087
5082
|
*/
|
|
5088
5083
|
|
|
5089
5084
|
export { GridSortableDirective as $, GridCellTemplateDirective as A, GridColumnComponent as B, CellEditEvent as C, GridColumnTitleTemplateDirective as D, GridCommandColumnComponent as E, GridComponent as F, GridNavigationService as G, GridContextMenuDirective as H, GridDetailTemplateDirective as I, GridEditCommandDirective as J, GridEditEvent as K, GridEditTemplateDirective as L, GridEditableDirective as M, GridExportDirective as N, GridFilterableDirective as O, GridFooterTemplateDirective as P, GridGroupFooterTemplateDirective as Q, GridGroupableDirective as R, GridHeaderTemplateDirective as S, GridNoDataTemplateDirective as T, GridRemoveCommandDirective as U, GridRemoveEvent as V, GridReorderableDirective as W, GridResizableDirective as X, GridSaveCommandDirective as Y, GridSaveEvent as Z, GridSelectableDirective as _, GridRowFlattenerService as a, GridStatePersistenceDirective as a0, GridToolbarTemplateDirective as a1, GridVirtualScrollDirective as a2, RowEditEvent as a3, gridFooterTableRowThemeVariants as b, GridService as c, gridGroupRowThemeVariants as d, gridListTableThemeVariants as e, GridLogicalCellDirective as f, gridListBaseThemeVariants as g, GridLockedCellDirective as h, gridFooterThemeVariants as i, gridFooterTableThemeVariants as j, gridListTableCellThemeVariants as k, gridDetailContentCellThemeVariants as l, gridDetailIndentCellThemeVariants as m, gridDetailRowThemeVariants as n, gridListTableRowThemeVariants as o, gridCellEditorBaseThemeVariants as p, gridCellEditorInputThemeVariants as q, gridCellBaseThemeVariants as r, gridCellContainerThemeVariants as s, gridCellDirtyIndicatorThemeVariants as t, gridCellTextThemeVariants as u, gridFooterTableCellThemeVariants as v, GridAddCommandDirective as w, GridAddEvent as x, GridCancelCommandDirective as y, GridCancelEvent as z };
|
|
5090
|
-
//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-
|
|
5085
|
+
//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-qsRN5qZF.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { C as CellEditEvent, w as GridAddCommandDirective, x as GridAddEvent, y as GridCancelCommandDirective, z as GridCancelEvent, A as GridCellTemplateDirective, B as GridColumnComponent, D as GridColumnTitleTemplateDirective, E as GridCommandColumnComponent, F as GridComponent, H as GridContextMenuDirective, I as GridDetailTemplateDirective, J as GridEditCommandDirective, K as GridEditEvent, L as GridEditTemplateDirective, M as GridEditableDirective, N as GridExportDirective, O as GridFilterableDirective, P as GridFooterTemplateDirective, Q as GridGroupFooterTemplateDirective, R as GridGroupableDirective, S as GridHeaderTemplateDirective, T as GridNoDataTemplateDirective, U as GridRemoveCommandDirective, V as GridRemoveEvent, W as GridReorderableDirective, X as GridResizableDirective, Y as GridSaveCommandDirective, Z as GridSaveEvent, _ as GridSelectableDirective, $ as GridSortableDirective, a0 as GridStatePersistenceDirective, a1 as GridToolbarTemplateDirective, a2 as GridVirtualScrollDirective, a3 as RowEditEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-
|
|
1
|
+
export { C as CellEditEvent, w as GridAddCommandDirective, x as GridAddEvent, y as GridCancelCommandDirective, z as GridCancelEvent, A as GridCellTemplateDirective, B as GridColumnComponent, D as GridColumnTitleTemplateDirective, E as GridCommandColumnComponent, F as GridComponent, H as GridContextMenuDirective, I as GridDetailTemplateDirective, J as GridEditCommandDirective, K as GridEditEvent, L as GridEditTemplateDirective, M as GridEditableDirective, N as GridExportDirective, O as GridFilterableDirective, P as GridFooterTemplateDirective, Q as GridGroupFooterTemplateDirective, R as GridGroupableDirective, S as GridHeaderTemplateDirective, T as GridNoDataTemplateDirective, U as GridRemoveCommandDirective, V as GridRemoveEvent, W as GridReorderableDirective, X as GridResizableDirective, Y as GridSaveCommandDirective, Z as GridSaveEvent, _ as GridSelectableDirective, $ as GridSortableDirective, a0 as GridStatePersistenceDirective, a1 as GridToolbarTemplateDirective, a2 as GridVirtualScrollDirective, a3 as RowEditEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-qsRN5qZF.mjs';
|
|
2
2
|
//# sourceMappingURL=nanahoshi-mona-ui-grid.mjs.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, DestroyRef, DOCUMENT, viewChild, ViewContainerRef, computed, signal,
|
|
2
|
+
import { InjectionToken, inject, DestroyRef, DOCUMENT, viewChild, ViewContainerRef, computed, signal, TemplateRef, Component, Injector, ElementRef, Injectable, input, output, effect } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { rxTimeout } from '@nanahoshi/mona-ui/internal';
|
|
5
5
|
import { take, asapScheduler, Subject, ReplaySubject, asyncScheduler, fromEvent, takeUntil, Subscription, filter, tap, exhaustMap, merge } from 'rxjs';
|
|
@@ -46,6 +46,22 @@ const fadePopupAnimation = {
|
|
|
46
46
|
enter: "mona-popup-fade-enter",
|
|
47
47
|
leave: "mona-popup-fade-leave"
|
|
48
48
|
};
|
|
49
|
+
const slideFromRightPopupAnimation = {
|
|
50
|
+
enter: "mona-popup-slide-from-right-enter",
|
|
51
|
+
leave: "mona-popup-slide-to-right-leave"
|
|
52
|
+
};
|
|
53
|
+
const slideFromLeftPopupAnimation = {
|
|
54
|
+
enter: "mona-popup-slide-from-left-enter",
|
|
55
|
+
leave: "mona-popup-slide-to-left-leave"
|
|
56
|
+
};
|
|
57
|
+
const slideFromTopPopupAnimation = {
|
|
58
|
+
enter: "mona-popup-slide-from-top-enter",
|
|
59
|
+
leave: "mona-popup-slide-to-top-leave"
|
|
60
|
+
};
|
|
61
|
+
const slideFromBottomPopupAnimation = {
|
|
62
|
+
enter: "mona-popup-slide-from-bottom-enter",
|
|
63
|
+
leave: "mona-popup-slide-to-bottom-leave"
|
|
64
|
+
};
|
|
49
65
|
|
|
50
66
|
const PopupDataInjectionToken = new InjectionToken("PopupInjectionToken");
|
|
51
67
|
const PopupSettingsInjectionToken = new InjectionToken("PopupSettingsInjectionToken");
|
|
@@ -87,31 +103,19 @@ class PopupWrapperComponent {
|
|
|
87
103
|
...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
|
|
88
104
|
this.visible = signal(true, /* @ts-ignore */
|
|
89
105
|
...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
90
|
-
this.wrapperClass = signal(
|
|
106
|
+
this.wrapperClass = signal(this.#popupSettings.popupWrapperClass instanceof Array
|
|
107
|
+
? this.#popupSettings.popupWrapperClass.join(" ")
|
|
108
|
+
: (this.#popupSettings.popupWrapperClass ?? ""), /* @ts-ignore */
|
|
91
109
|
...(ngDevMode ? [{ debugName: "wrapperClass" }] : /* istanbul ignore next */ []));
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
this.wrapperClass.set(this.#popupSettings.popupWrapperClass);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
this.#popupReference.closeStart$
|
|
103
|
-
.pipe(take(1), takeUntilDestroyed(this.#destroyRef))
|
|
104
|
-
.subscribe(event => {
|
|
105
|
-
this.#closeEvent = event;
|
|
106
|
-
const animationElement = this.animationElement().nativeElement;
|
|
107
|
-
this.visible.set(false);
|
|
108
|
-
if (!this.leaveAnimationClasses()) {
|
|
109
|
-
this.#completeClose();
|
|
110
|
-
return;
|
|
111
|
-
}
|
|
112
|
-
this.#document.defaultView?.setTimeout(() => this.#startFallbackTimer(animationElement));
|
|
113
|
-
});
|
|
110
|
+
this.#popupReference.closeStart$.pipe(take(1), takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
|
|
111
|
+
this.#closeEvent = event;
|
|
112
|
+
const animationElement = this.animationElement().nativeElement;
|
|
113
|
+
this.visible.set(false);
|
|
114
|
+
if (!this.leaveAnimationClasses()) {
|
|
115
|
+
this.#completeClose();
|
|
116
|
+
return;
|
|
114
117
|
}
|
|
118
|
+
this.#document.defaultView?.setTimeout(() => this.#startFallbackTimer(animationElement));
|
|
115
119
|
});
|
|
116
120
|
this.#destroyRef.onDestroy(() => this.#clearFallbackTimer());
|
|
117
121
|
}
|
|
@@ -123,6 +127,11 @@ class PopupWrapperComponent {
|
|
|
123
127
|
}
|
|
124
128
|
return this.componentOutlet().createComponent(content, { injector });
|
|
125
129
|
}
|
|
130
|
+
/**
|
|
131
|
+
* Only completion events are observed. A cancellation is also raised when the enter animation is
|
|
132
|
+
* replaced by the leave animation, so treating it as completion would dispose the overlay before
|
|
133
|
+
* the leave animation had a chance to play. {@link #startFallbackTimer} covers genuine cancellations.
|
|
134
|
+
*/
|
|
126
135
|
onNativeLeaveComplete(event) {
|
|
127
136
|
if (event.target !== event.currentTarget) {
|
|
128
137
|
return;
|
|
@@ -203,13 +212,13 @@ class PopupWrapperComponent {
|
|
|
203
212
|
this.#fallbackTimer = win.setTimeout(() => this.#completeClose(), duration + 50);
|
|
204
213
|
}
|
|
205
214
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
206
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupWrapperComponent, isStandalone: true, selector: "mona-popup-wrapper", host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "animationElement", first: true, predicate: ["animationElement"], descendants: true, isSignal: true }, { propertyName: "componentOutlet", first: true, predicate: ["componentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n <div\n #animationElement\n class=\"w-full h-full origin-center\"\n [animate.enter]=\"enterAnimationClasses()\"\n [animate.leave]=\"leaveAnimationClasses()\"\n (
|
|
215
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupWrapperComponent, isStandalone: true, selector: "mona-popup-wrapper", host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "animationElement", first: true, predicate: ["animationElement"], descendants: true, isSignal: true }, { propertyName: "componentOutlet", first: true, predicate: ["componentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n <div\n #animationElement\n class=\"w-full h-full origin-center\"\n [animate.enter]=\"enterAnimationClasses()\"\n [animate.leave]=\"leaveAnimationClasses()\"\n (animationend)=\"onNativeLeaveComplete($event)\"\n (transitionend)=\"onNativeLeaveComplete($event)\">\n @if (templateRef()) {\n <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\n }\n <ng-container #componentOutlet></ng-container>\n </div>\n}\n", styles: [":host{display:block}:host(.mona-popup-constrain-height){min-height:0;max-height:inherit;overflow:clip}:host(.mona-popup-constrain-height)>div{display:flex;min-height:0;max-height:inherit;overflow:clip}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}.mona-popup-slide-from-right-enter,.mona-popup-slide-from-left-enter,.mona-popup-slide-from-top-enter,.mona-popup-slide-from-bottom-enter,.mona-popup-slide-to-right-leave,.mona-popup-slide-to-left-leave,.mona-popup-slide-to-top-leave,.mona-popup-slide-to-bottom-leave{animation-fill-mode:both;backface-visibility:hidden;will-change:transform}.mona-popup-slide-from-right-enter,.mona-popup-slide-from-left-enter,.mona-popup-slide-from-top-enter,.mona-popup-slide-from-bottom-enter{animation-duration:.32s;animation-timing-function:cubic-bezier(.25,.46,.45,.94)}.mona-popup-slide-to-right-leave,.mona-popup-slide-to-left-leave,.mona-popup-slide-to-top-leave,.mona-popup-slide-to-bottom-leave{animation-duration:.24s;animation-timing-function:cubic-bezier(.4,0,1,1)}.mona-popup-slide-from-right-enter{animation-name:mona-popup-slide-from-right}.mona-popup-slide-to-right-leave{animation-name:mona-popup-slide-to-right}.mona-popup-slide-from-left-enter{animation-name:mona-popup-slide-from-left}.mona-popup-slide-to-left-leave{animation-name:mona-popup-slide-to-left}.mona-popup-slide-from-top-enter{animation-name:mona-popup-slide-from-top}.mona-popup-slide-to-top-leave{animation-name:mona-popup-slide-to-top}.mona-popup-slide-from-bottom-enter{animation-name:mona-popup-slide-from-bottom}.mona-popup-slide-to-bottom-leave{animation-name:mona-popup-slide-to-bottom}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@keyframes mona-popup-slide-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes mona-popup-slide-to-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes mona-popup-slide-from-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes mona-popup-slide-to-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes mona-popup-slide-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes mona-popup-slide-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes mona-popup-slide-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mona-popup-slide-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave,.mona-popup-slide-from-right-enter,.mona-popup-slide-to-right-leave,.mona-popup-slide-from-left-enter,.mona-popup-slide-to-left-leave,.mona-popup-slide-from-top-enter,.mona-popup-slide-to-top-leave,.mona-popup-slide-from-bottom-enter,.mona-popup-slide-to-bottom-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
207
216
|
}
|
|
208
217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupWrapperComponent, decorators: [{
|
|
209
218
|
type: Component,
|
|
210
219
|
args: [{ selector: "mona-popup-wrapper", imports: [NgTemplateOutlet], host: {
|
|
211
220
|
"[class]": "hostClasses()"
|
|
212
|
-
}, template: "@if (visible()) {\n <div\n #animationElement\n class=\"w-full h-full origin-center\"\n [animate.enter]=\"enterAnimationClasses()\"\n [animate.leave]=\"leaveAnimationClasses()\"\n (
|
|
221
|
+
}, template: "@if (visible()) {\n <div\n #animationElement\n class=\"w-full h-full origin-center\"\n [animate.enter]=\"enterAnimationClasses()\"\n [animate.leave]=\"leaveAnimationClasses()\"\n (animationend)=\"onNativeLeaveComplete($event)\"\n (transitionend)=\"onNativeLeaveComplete($event)\">\n @if (templateRef()) {\n <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\n }\n <ng-container #componentOutlet></ng-container>\n </div>\n}\n", styles: [":host{display:block}:host(.mona-popup-constrain-height){min-height:0;max-height:inherit;overflow:clip}:host(.mona-popup-constrain-height)>div{display:flex;min-height:0;max-height:inherit;overflow:clip}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}.mona-popup-slide-from-right-enter,.mona-popup-slide-from-left-enter,.mona-popup-slide-from-top-enter,.mona-popup-slide-from-bottom-enter,.mona-popup-slide-to-right-leave,.mona-popup-slide-to-left-leave,.mona-popup-slide-to-top-leave,.mona-popup-slide-to-bottom-leave{animation-fill-mode:both;backface-visibility:hidden;will-change:transform}.mona-popup-slide-from-right-enter,.mona-popup-slide-from-left-enter,.mona-popup-slide-from-top-enter,.mona-popup-slide-from-bottom-enter{animation-duration:.32s;animation-timing-function:cubic-bezier(.25,.46,.45,.94)}.mona-popup-slide-to-right-leave,.mona-popup-slide-to-left-leave,.mona-popup-slide-to-top-leave,.mona-popup-slide-to-bottom-leave{animation-duration:.24s;animation-timing-function:cubic-bezier(.4,0,1,1)}.mona-popup-slide-from-right-enter{animation-name:mona-popup-slide-from-right}.mona-popup-slide-to-right-leave{animation-name:mona-popup-slide-to-right}.mona-popup-slide-from-left-enter{animation-name:mona-popup-slide-from-left}.mona-popup-slide-to-left-leave{animation-name:mona-popup-slide-to-left}.mona-popup-slide-from-top-enter{animation-name:mona-popup-slide-from-top}.mona-popup-slide-to-top-leave{animation-name:mona-popup-slide-to-top}.mona-popup-slide-from-bottom-enter{animation-name:mona-popup-slide-from-bottom}.mona-popup-slide-to-bottom-leave{animation-name:mona-popup-slide-to-bottom}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@keyframes mona-popup-slide-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes mona-popup-slide-to-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes mona-popup-slide-from-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes mona-popup-slide-to-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes mona-popup-slide-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes mona-popup-slide-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes mona-popup-slide-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mona-popup-slide-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave,.mona-popup-slide-from-right-enter,.mona-popup-slide-to-right-leave,.mona-popup-slide-from-left-enter,.mona-popup-slide-to-left-leave,.mona-popup-slide-from-top-enter,.mona-popup-slide-to-top-leave,.mona-popup-slide-from-bottom-enter,.mona-popup-slide-to-bottom-leave{animation-duration:1ms}}\n"] }]
|
|
213
222
|
}], ctorParameters: () => [], propDecorators: { animationElement: [{ type: i0.ViewChild, args: ["animationElement", { isSignal: true }] }], componentOutlet: [{ type: i0.ViewChild, args: ["componentOutlet", { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
|
|
214
223
|
|
|
215
224
|
class PopupRef {
|
|
@@ -631,7 +640,8 @@ class PopupService {
|
|
|
631
640
|
width: settings.width,
|
|
632
641
|
panelClass,
|
|
633
642
|
backdropClass: settings.backdropClass ?? "transparent",
|
|
634
|
-
direction
|
|
643
|
+
direction,
|
|
644
|
+
scrollStrategy: settings.blockScroll ? this.#overlay.scrollStrategies.block() : undefined
|
|
635
645
|
}));
|
|
636
646
|
}
|
|
637
647
|
createPositionStrategy(settings) {
|
|
@@ -671,6 +681,7 @@ class PopupService {
|
|
|
671
681
|
this.attachContent(settings, popupReference, overlayRef, injector);
|
|
672
682
|
const subscription = this.setupCloseSubscriptions(settings, popupReference, overlayRef);
|
|
673
683
|
this.setupCleanupSubscription(popupReference, subscription, settings, originallyFocusedElement);
|
|
684
|
+
this.setupBackdropFadeOut(settings, popupReference, overlayRef);
|
|
674
685
|
if (settings.closeOnScroll) {
|
|
675
686
|
this.setupScrollClosing(settings, popupReference, overlayRef);
|
|
676
687
|
}
|
|
@@ -794,6 +805,16 @@ class PopupService {
|
|
|
794
805
|
backdropSubject.complete();
|
|
795
806
|
});
|
|
796
807
|
}
|
|
808
|
+
/**
|
|
809
|
+
* Starts the backdrop fade-out as soon as the close begins, so it runs alongside the popup's leave
|
|
810
|
+
* animation. Without it the backdrop stays fully opaque until `dispose()` removes it in one frame.
|
|
811
|
+
*/
|
|
812
|
+
setupBackdropFadeOut(settings, popupReference, overlayRef) {
|
|
813
|
+
if (!settings.hasBackdrop) {
|
|
814
|
+
return;
|
|
815
|
+
}
|
|
816
|
+
popupReference.closeStart.pipe(take(1)).subscribe(() => overlayRef.detachBackdrop());
|
|
817
|
+
}
|
|
797
818
|
setupCleanupSubscription(popupReference, subscription, settings, originallyFocusedElement) {
|
|
798
819
|
popupReference.closed.pipe(take(1)).subscribe(() => {
|
|
799
820
|
subscription?.unsubscribe();
|
|
@@ -1317,5 +1338,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
1317
1338
|
* Generated bundle index. Do not edit.
|
|
1318
1339
|
*/
|
|
1319
1340
|
|
|
1320
|
-
export { PopupCloseEvent, PopupCloseSource, PopupComponent, PopupDataInjectionToken, PopupRef, PopupService, defaultPopupAnimation, dropdownPopupAnimation, fadePopupAnimation };
|
|
1341
|
+
export { PopupCloseEvent, PopupCloseSource, PopupComponent, PopupDataInjectionToken, PopupRef, PopupService, defaultPopupAnimation, dropdownPopupAnimation, fadePopupAnimation, slideFromBottomPopupAnimation, slideFromLeftPopupAnimation, slideFromRightPopupAnimation, slideFromTopPopupAnimation };
|
|
1321
1342
|
//# sourceMappingURL=nanahoshi-mona-ui-popup.mjs.map
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import { CdkTrapFocus } from '@angular/cdk/a11y';
|
|
2
|
+
import { GlobalPositionStrategy } from '@angular/cdk/overlay';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { inject, DestroyRef, DOCUMENT, Injector, viewChild, computed, input, output, afterNextRender, effect, Component } from '@angular/core';
|
|
5
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
|
+
import { LucideX } from '@lucide/angular';
|
|
7
|
+
import { ButtonDirective } from '@nanahoshi/mona-ui/button';
|
|
8
|
+
import { classInputToClass } from '@nanahoshi/mona-ui/common';
|
|
9
|
+
import { themeOverlaySurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
|
|
10
|
+
import { PopupService, PopupCloseEvent, PopupCloseSource, slideFromLeftPopupAnimation, slideFromBottomPopupAnimation, slideFromRightPopupAnimation, slideFromTopPopupAnimation } from '@nanahoshi/mona-ui/popup';
|
|
11
|
+
import { take } from 'rxjs';
|
|
12
|
+
import { twMerge } from 'tailwind-merge';
|
|
13
|
+
import { cva } from 'class-variance-authority';
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* `overflow-clip` rather than `overflow-hidden` is deliberate. `hidden` would make the sheet a scroll
|
|
17
|
+
* container, letting the browser scroll it to reveal content that takes focus while the enter animation
|
|
18
|
+
* still has the sheet translated off-screen, which cancels the animation. `clip` cannot scroll.
|
|
19
|
+
*/
|
|
20
|
+
const sheetBaseVariants = cva(`
|
|
21
|
+
relative flex h-full w-full min-w-0 min-h-0 max-h-[inherit] flex-col overflow-clip
|
|
22
|
+
pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)]
|
|
23
|
+
pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)]
|
|
24
|
+
${themeOverlaySurfaceClasses} text-foreground
|
|
25
|
+
shadow-(--shadow-overlay) outline-none
|
|
26
|
+
`, {
|
|
27
|
+
variants: {
|
|
28
|
+
side: {
|
|
29
|
+
top: "border-b border-border",
|
|
30
|
+
right: "border-l border-border",
|
|
31
|
+
bottom: "border-t border-border",
|
|
32
|
+
left: "border-r border-border"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
defaultVariants: {
|
|
36
|
+
side: "right"
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
const sheetHeaderVariants = cva(`flex shrink-0 items-start gap-3 p-4`);
|
|
40
|
+
const sheetTitleVariants = cva(`text-lg font-semibold leading-none tracking-tight`);
|
|
41
|
+
const sheetDescriptionVariants = cva(`mt-1.5 text-sm text-muted-foreground`);
|
|
42
|
+
const sheetContentVariants = cva(`
|
|
43
|
+
min-w-0 min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-4
|
|
44
|
+
[scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
|
|
45
|
+
`);
|
|
46
|
+
/** 2.75rem keeps the close button at the WCAG 2.5.5 minimum target size. */
|
|
47
|
+
const sheetCloseButtonVariants = cva(`min-h-11 min-w-11 shrink-0`);
|
|
48
|
+
|
|
49
|
+
class SheetComponent {
|
|
50
|
+
#destroyRef;
|
|
51
|
+
#document;
|
|
52
|
+
#injector;
|
|
53
|
+
#popupService;
|
|
54
|
+
#destroyed;
|
|
55
|
+
#horizontal;
|
|
56
|
+
#popupRef;
|
|
57
|
+
constructor() {
|
|
58
|
+
this.#destroyRef = inject(DestroyRef);
|
|
59
|
+
this.#document = inject(DOCUMENT);
|
|
60
|
+
this.#injector = inject(Injector);
|
|
61
|
+
this.#popupService = inject(PopupService);
|
|
62
|
+
this.#destroyed = false;
|
|
63
|
+
this.#horizontal = false;
|
|
64
|
+
this.sheetTemplate = viewChild.required("sheetTemplate", /* @ts-ignore */
|
|
65
|
+
...(ngDevMode ? [{ debugName: "sheetTemplate" }] : /* istanbul ignore next */ []));
|
|
66
|
+
this.baseClass = computed(() => {
|
|
67
|
+
const variantClass = sheetBaseVariants({ side: this.side() });
|
|
68
|
+
const userClass = classInputToClass(this.userClass());
|
|
69
|
+
return twMerge(variantClass, userClass);
|
|
70
|
+
}, /* @ts-ignore */
|
|
71
|
+
...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
|
|
72
|
+
this.closeButtonClass = computed(() => sheetCloseButtonVariants(), /* @ts-ignore */
|
|
73
|
+
...(ngDevMode ? [{ debugName: "closeButtonClass" }] : /* istanbul ignore next */ []));
|
|
74
|
+
this.contentClass = computed(() => sheetContentVariants(), /* @ts-ignore */
|
|
75
|
+
...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
|
|
76
|
+
this.descriptionClass = computed(() => sheetDescriptionVariants(), /* @ts-ignore */
|
|
77
|
+
...(ngDevMode ? [{ debugName: "descriptionClass" }] : /* istanbul ignore next */ []));
|
|
78
|
+
this.descriptionId = createElementControlId();
|
|
79
|
+
this.headerClass = computed(() => sheetHeaderVariants(), /* @ts-ignore */
|
|
80
|
+
...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
|
|
81
|
+
this.titleClass = computed(() => sheetTitleVariants(), /* @ts-ignore */
|
|
82
|
+
...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
|
|
83
|
+
this.titleId = createElementControlId();
|
|
84
|
+
/** @description Accessible name used when no visible title is provided. */
|
|
85
|
+
this.ariaLabel = input(/* @ts-ignore */
|
|
86
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
87
|
+
/** @description Whether the close button is displayed. @default true */
|
|
88
|
+
this.closable = input(true, /* @ts-ignore */
|
|
89
|
+
...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
|
|
90
|
+
/** @description Emitted before the sheet closes. Call preventDefault() to keep it open. */
|
|
91
|
+
this.close = output();
|
|
92
|
+
/** @description Whether clicking the backdrop requests that the sheet close. @default true */
|
|
93
|
+
this.closeOnBackdropClick = input(true, /* @ts-ignore */
|
|
94
|
+
...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
|
|
95
|
+
/** @description Whether pressing Escape requests that the sheet close. @default true */
|
|
96
|
+
this.closeOnEscape = input(true, /* @ts-ignore */
|
|
97
|
+
...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
|
|
98
|
+
/** @description Emitted after the leave animation completes and the popup is disposed. */
|
|
99
|
+
this.closed = output();
|
|
100
|
+
/** @description Supporting text displayed below the title. */
|
|
101
|
+
this.description = input(/* @ts-ignore */
|
|
102
|
+
...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
|
|
103
|
+
/** @description Explicit sheet height. Numbers are interpreted as pixels. */
|
|
104
|
+
this.height = input(/* @ts-ignore */
|
|
105
|
+
...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
|
|
106
|
+
/** @description Edge of the viewport from which the sheet opens. @default "right" */
|
|
107
|
+
this.side = input("right", /* @ts-ignore */
|
|
108
|
+
...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
|
|
109
|
+
/** @description Title displayed in the sheet header and used as its accessible name. */
|
|
110
|
+
this.title = input(/* @ts-ignore */
|
|
111
|
+
...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
112
|
+
this.userClass = input(undefined, { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
|
|
113
|
+
transform: value => classInputToClass(value) });
|
|
114
|
+
/** @description Explicit sheet width. Numbers are interpreted as pixels. */
|
|
115
|
+
this.width = input(/* @ts-ignore */
|
|
116
|
+
...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
|
|
117
|
+
afterNextRender({
|
|
118
|
+
read: () => this.#open()
|
|
119
|
+
});
|
|
120
|
+
this.#destroyRef.onDestroy(() => {
|
|
121
|
+
this.#destroyed = true;
|
|
122
|
+
this.#popupRef?.close();
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
closeSheet() {
|
|
126
|
+
this.#popupRef?.close(new PopupCloseEvent({ via: PopupCloseSource.CloseButton }));
|
|
127
|
+
}
|
|
128
|
+
/** Escape and backdrop clicks reach the popup unconditionally, so their inputs are honoured here. */
|
|
129
|
+
#isSuppressedCloseSource(via) {
|
|
130
|
+
return ((via === PopupCloseSource.Escape && !this.closeOnEscape()) ||
|
|
131
|
+
(via === PopupCloseSource.BackdropClick && !this.closeOnBackdropClick()));
|
|
132
|
+
}
|
|
133
|
+
#open() {
|
|
134
|
+
const activeElement = this.#document.activeElement;
|
|
135
|
+
const anchor = activeElement instanceof HTMLElement ? activeElement : this.#document.body;
|
|
136
|
+
const side = this.side();
|
|
137
|
+
this.#horizontal = side === "left" || side === "right";
|
|
138
|
+
this.#popupRef = this.#popupService.create({
|
|
139
|
+
anchor,
|
|
140
|
+
animation: this.#resolveAnimation(side),
|
|
141
|
+
backdropClass: [
|
|
142
|
+
"fixed",
|
|
143
|
+
"inset-0",
|
|
144
|
+
"bg-background/50",
|
|
145
|
+
"backdrop-blur-xs",
|
|
146
|
+
// Keeps the backdrop fade in step with the sheet's slide-out instead of the CDK default of 400ms.
|
|
147
|
+
"[transition-duration:240ms]!"
|
|
148
|
+
],
|
|
149
|
+
blockScroll: true,
|
|
150
|
+
/*
|
|
151
|
+
* Both close paths are wired up even when the matching input is currently `false`. PopupService
|
|
152
|
+
* decides once, at creation, whether to listen at all, so opting out there would freeze these
|
|
153
|
+
* inputs at their initial values. Vetoing in `beforeClose` instead keeps them live.
|
|
154
|
+
*/
|
|
155
|
+
closeOnBackdropClick: true,
|
|
156
|
+
closeOnEscape: true,
|
|
157
|
+
closeOnOutsideClick: false,
|
|
158
|
+
content: this.sheetTemplate(),
|
|
159
|
+
hasBackdrop: true,
|
|
160
|
+
height: this.#resolveHeight(),
|
|
161
|
+
maxHeight: this.#horizontal ? "100dvh" : "90dvh",
|
|
162
|
+
maxWidth: "100dvw",
|
|
163
|
+
popupClass: "overflow-clip",
|
|
164
|
+
popupWrapperClass: "mona-popup-constrain-height",
|
|
165
|
+
positionStrategy: "global",
|
|
166
|
+
restoreFocus: true,
|
|
167
|
+
width: this.#resolveWidth()
|
|
168
|
+
});
|
|
169
|
+
this.#positionOverlay(this.#popupRef, side);
|
|
170
|
+
this.#trackSize(this.#popupRef);
|
|
171
|
+
this.#popupRef.beforeClose.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
|
|
172
|
+
if (this.#isSuppressedCloseSource(event.via)) {
|
|
173
|
+
event.preventDefault();
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
if (!this.#destroyed) {
|
|
177
|
+
this.close.emit(event);
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
this.#popupRef.closed.pipe(take(1), takeUntilDestroyed(this.#destroyRef)).subscribe(() => this.closed.emit());
|
|
181
|
+
}
|
|
182
|
+
#positionOverlay(ref, side) {
|
|
183
|
+
const strategy = ref.overlayRef.getConfig().positionStrategy;
|
|
184
|
+
if (!(strategy instanceof GlobalPositionStrategy)) {
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
switch (side) {
|
|
188
|
+
case "top":
|
|
189
|
+
strategy.top("0").left("0");
|
|
190
|
+
break;
|
|
191
|
+
case "right":
|
|
192
|
+
strategy.top("0").right("0");
|
|
193
|
+
break;
|
|
194
|
+
case "bottom":
|
|
195
|
+
strategy.bottom("0").left("0");
|
|
196
|
+
break;
|
|
197
|
+
case "left":
|
|
198
|
+
strategy.top("0").left("0");
|
|
199
|
+
break;
|
|
200
|
+
}
|
|
201
|
+
ref.overlayRef.updatePosition();
|
|
202
|
+
}
|
|
203
|
+
#resolveAnimation(side) {
|
|
204
|
+
switch (side) {
|
|
205
|
+
case "top":
|
|
206
|
+
return slideFromTopPopupAnimation;
|
|
207
|
+
case "right":
|
|
208
|
+
return slideFromRightPopupAnimation;
|
|
209
|
+
case "bottom":
|
|
210
|
+
return slideFromBottomPopupAnimation;
|
|
211
|
+
case "left":
|
|
212
|
+
return slideFromLeftPopupAnimation;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
#resolveHeight() {
|
|
216
|
+
return this.height() ?? (this.#horizontal ? "100dvh" : "auto");
|
|
217
|
+
}
|
|
218
|
+
#resolveWidth() {
|
|
219
|
+
return this.width() ?? (this.#horizontal ? "min(100dvw, 24rem)" : "100dvw");
|
|
220
|
+
}
|
|
221
|
+
/** Keeps the overlay in sync with later `width`/`height` changes; `side` stays fixed at open time. */
|
|
222
|
+
#trackSize(ref) {
|
|
223
|
+
effect(() => ref.overlayRef.updateSize({ height: this.#resolveHeight(), width: this.#resolveWidth() }), {
|
|
224
|
+
injector: this.#injector
|
|
225
|
+
});
|
|
226
|
+
}
|
|
227
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
228
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SheetComponent, isStandalone: true, selector: "mona-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed" }, host: { classAttribute: "hidden" }, viewQueries: [{ propertyName: "sheetTemplate", first: true, predicate: ["sheetTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #sheetTemplate>\n <section\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n [class]=\"baseClass()\"\n role=\"dialog\"\n aria-modal=\"true\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descriptionId : null\"\n [attr.aria-label]=\"!title() ? ariaLabel() : null\">\n @if (title() || description() || closable()) {\n <header [class]=\"headerClass()\">\n <div class=\"min-w-0 flex-1\">\n @if (title()) {\n <h2 [id]=\"titleId\" [class]=\"titleClass()\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ description() }}</p>\n }\n </div>\n @if (closable()) {\n <button\n monaButton\n type=\"button\"\n look=\"ghost\"\n [iconOnly]=\"true\"\n aria-label=\"Close sheet\"\n size=\"small\"\n [class]=\"closeButtonClass()\"\n (click)=\"closeSheet()\">\n <svg lucideX [size]=\"16\"></svg>\n </button>\n }\n </header>\n }\n <div [class]=\"contentClass()\">\n <ng-content></ng-content>\n </div>\n </section>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
|
|
229
|
+
}
|
|
230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SheetComponent, decorators: [{
|
|
231
|
+
type: Component,
|
|
232
|
+
args: [{ selector: "mona-sheet", imports: [ButtonDirective, CdkTrapFocus, LucideX], host: {
|
|
233
|
+
class: "hidden"
|
|
234
|
+
}, template: "<ng-template #sheetTemplate>\n <section\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n [class]=\"baseClass()\"\n role=\"dialog\"\n aria-modal=\"true\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descriptionId : null\"\n [attr.aria-label]=\"!title() ? ariaLabel() : null\">\n @if (title() || description() || closable()) {\n <header [class]=\"headerClass()\">\n <div class=\"min-w-0 flex-1\">\n @if (title()) {\n <h2 [id]=\"titleId\" [class]=\"titleClass()\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ description() }}</p>\n }\n </div>\n @if (closable()) {\n <button\n monaButton\n type=\"button\"\n look=\"ghost\"\n [iconOnly]=\"true\"\n aria-label=\"Close sheet\"\n size=\"small\"\n [class]=\"closeButtonClass()\"\n (click)=\"closeSheet()\">\n <svg lucideX [size]=\"16\"></svg>\n </button>\n }\n </header>\n }\n <div [class]=\"contentClass()\">\n <ng-content></ng-content>\n </div>\n </section>\n</ng-template>\n" }]
|
|
235
|
+
}], ctorParameters: () => [], propDecorators: { sheetTemplate: [{ type: i0.ViewChild, args: ["sheetTemplate", { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
236
|
+
|
|
237
|
+
/*
|
|
238
|
+
* Public API Surface of @nanahoshi/mona-ui/sheet
|
|
239
|
+
*/
|
|
240
|
+
|
|
241
|
+
/**
|
|
242
|
+
* Generated bundle index. Do not edit.
|
|
243
|
+
*/
|
|
244
|
+
|
|
245
|
+
export { SheetComponent };
|
|
246
|
+
//# sourceMappingURL=nanahoshi-mona-ui-sheet.mjs.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nanahoshi/mona-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "A very light Angular UI framework",
|
|
5
5
|
"author": "Nanahoshi",
|
|
6
6
|
"repository": {
|
|
@@ -265,6 +265,10 @@
|
|
|
265
265
|
"types": "./types/nanahoshi-mona-ui-scroll-view.d.ts",
|
|
266
266
|
"default": "./fesm2022/nanahoshi-mona-ui-scroll-view.mjs"
|
|
267
267
|
},
|
|
268
|
+
"./sheet": {
|
|
269
|
+
"types": "./types/nanahoshi-mona-ui-sheet.d.ts",
|
|
270
|
+
"default": "./fesm2022/nanahoshi-mona-ui-sheet.mjs"
|
|
271
|
+
},
|
|
268
272
|
"./sidebar": {
|
|
269
273
|
"types": "./types/nanahoshi-mona-ui-sidebar.d.ts",
|
|
270
274
|
"default": "./fesm2022/nanahoshi-mona-ui-sidebar.mjs"
|
|
@@ -489,7 +489,6 @@ declare class ColumnSortEvent extends PreventableEvent {
|
|
|
489
489
|
|
|
490
490
|
declare class GridSortableDirective {
|
|
491
491
|
#private;
|
|
492
|
-
private readonly columnDefinitions;
|
|
493
492
|
/**
|
|
494
493
|
* @description Emitted when a column header is activated to change its sort direction. Call `preventDefault()` on the event to cancel the sort.
|
|
495
494
|
*/
|
|
@@ -507,7 +506,7 @@ declare class GridSortableDirective {
|
|
|
507
506
|
constructor();
|
|
508
507
|
private applyColumnSort;
|
|
509
508
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridSortableDirective, never>;
|
|
510
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridSortableDirective, "mona-grid[monaGridSortable]", never, { "options": { "alias": "monaGridSortable"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "columnSort": "columnSort"; "sort": "sortChange"; },
|
|
509
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridSortableDirective, "mona-grid[monaGridSortable]", never, { "options": { "alias": "monaGridSortable"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "columnSort": "columnSort"; "sort": "sortChange"; }, never, never, true, never>;
|
|
511
510
|
}
|
|
512
511
|
|
|
513
512
|
type GridStateVersion = 1;
|
|
@@ -981,6 +980,7 @@ type GridVariantInput = GridBaseVariantInput & GridHeaderTableCellVariantInput &
|
|
|
981
980
|
|
|
982
981
|
declare class GridComponent<T> implements GridVariantInput {
|
|
983
982
|
#private;
|
|
983
|
+
private readonly columnDefinitions;
|
|
984
984
|
private readonly footerScrollElement;
|
|
985
985
|
protected readonly baseClass: _angular_core.Signal<string>;
|
|
986
986
|
protected readonly columnActionsClass: _angular_core.Signal<string>;
|
|
@@ -1106,7 +1106,7 @@ declare class GridComponent<T> implements GridVariantInput {
|
|
|
1106
1106
|
private setResizeObserver;
|
|
1107
1107
|
private syncToolbarFocusTargets;
|
|
1108
1108
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridComponent<any>, never>;
|
|
1109
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridComponent<any>, "mona-grid", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeValues": { "alias": "pageSizeValues"; "required": false; "isSignal": true; }; "resizeMethod": { "alias": "resizeMethod"; "required": false; "isSignal": true; }; "responsivePager": { "alias": "responsivePager"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["gridDetailTemplate", "noDataTemplate", "toolbarTemplate"], never, true, never>;
|
|
1109
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridComponent<any>, "mona-grid", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeValues": { "alias": "pageSizeValues"; "required": false; "isSignal": true; }; "resizeMethod": { "alias": "resizeMethod"; "required": false; "isSignal": true; }; "responsivePager": { "alias": "responsivePager"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["columnDefinitions", "gridDetailTemplate", "noDataTemplate", "toolbarTemplate"], never, true, never>;
|
|
1110
1110
|
}
|
|
1111
1111
|
|
|
1112
1112
|
export { CellEditEvent, ColumnReorderEvent, ColumnSortEvent, GridAddCommandDirective, GridAddEvent, GridCancelCommandDirective, GridCancelEvent, GridCellTemplateDirective, GridColumnComponent, GridColumnTitleTemplateDirective, GridCommandColumnComponent, GridComponent, GridContextMenuDirective, GridDetailTemplateDirective, GridEditCommandDirective, GridEditEvent, GridEditTemplateDirective, GridEditableDirective, GridExportDirective, GridFilterableDirective, GridFooterTemplateDirective, GridGroupFooterTemplateDirective, GridGroupableDirective, GridHeaderTemplateDirective, GridNoDataTemplateDirective, GridRemoveCommandDirective, GridRemoveEvent, GridReorderableDirective, GridResizableDirective, GridSaveCommandDirective, GridSaveEvent, GridSelectableDirective, GridSortableDirective, GridStatePersistenceDirective, GridToolbarTemplateDirective, GridVirtualScrollDirective, RowEditEvent };
|
|
@@ -134,6 +134,12 @@ interface PopupSettings<T = unknown, C = void> {
|
|
|
134
134
|
* @type {string | string[]}
|
|
135
135
|
*/
|
|
136
136
|
backdropClass?: string | string[];
|
|
137
|
+
/**
|
|
138
|
+
* Whether scrolling behind the popup should be blocked while it is open.
|
|
139
|
+
* Default: false.
|
|
140
|
+
* @type {boolean}
|
|
141
|
+
*/
|
|
142
|
+
blockScroll?: boolean;
|
|
137
143
|
/**
|
|
138
144
|
* The content to display in the popup.
|
|
139
145
|
* @type {TemplateRef | ComponentType}
|
|
@@ -461,6 +467,11 @@ declare class PopupService {
|
|
|
461
467
|
private resolveAnchor;
|
|
462
468
|
private restoreFocusToAnchor;
|
|
463
469
|
private setupBackdropCloseSubscription;
|
|
470
|
+
/**
|
|
471
|
+
* Starts the backdrop fade-out as soon as the close begins, so it runs alongside the popup's leave
|
|
472
|
+
* animation. Without it the backdrop stays fully opaque until `dispose()` removes it in one frame.
|
|
473
|
+
*/
|
|
474
|
+
private setupBackdropFadeOut;
|
|
464
475
|
private setupCleanupSubscription;
|
|
465
476
|
private setupCloseSubscriptions;
|
|
466
477
|
private setupEscapeKeyListener;
|
|
@@ -478,8 +489,12 @@ declare class PopupService {
|
|
|
478
489
|
declare const defaultPopupAnimation: Required<PopupAnimationSettings>;
|
|
479
490
|
declare const dropdownPopupAnimation: Required<PopupAnimationSettings>;
|
|
480
491
|
declare const fadePopupAnimation: Required<PopupAnimationSettings>;
|
|
492
|
+
declare const slideFromRightPopupAnimation: Required<PopupAnimationSettings>;
|
|
493
|
+
declare const slideFromLeftPopupAnimation: Required<PopupAnimationSettings>;
|
|
494
|
+
declare const slideFromTopPopupAnimation: Required<PopupAnimationSettings>;
|
|
495
|
+
declare const slideFromBottomPopupAnimation: Required<PopupAnimationSettings>;
|
|
481
496
|
|
|
482
497
|
declare const PopupDataInjectionToken: InjectionToken<unknown>;
|
|
483
498
|
|
|
484
|
-
export { PopupCloseEvent, PopupCloseSource, PopupComponent, PopupDataInjectionToken, PopupRef, PopupService, defaultPopupAnimation, dropdownPopupAnimation, fadePopupAnimation };
|
|
499
|
+
export { PopupCloseEvent, PopupCloseSource, PopupComponent, PopupDataInjectionToken, PopupRef, PopupService, defaultPopupAnimation, dropdownPopupAnimation, fadePopupAnimation, slideFromBottomPopupAnimation, slideFromLeftPopupAnimation, slideFromRightPopupAnimation, slideFromTopPopupAnimation };
|
|
485
500
|
export type { ConnectionPoint, PopupAnchor, PopupAnimationSettings, PopupOffset, PopupSettings };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { ClassInputType } from '@nanahoshi/mona-ui/common';
|
|
3
|
+
import { PopupCloseEvent } from '@nanahoshi/mona-ui/popup';
|
|
4
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
5
|
+
import { VariantInputs } from '@nanahoshi/mona-ui/internal';
|
|
6
|
+
import { VariantProps } from 'class-variance-authority';
|
|
7
|
+
|
|
8
|
+
type SheetSide = "top" | "right" | "bottom" | "left";
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* `overflow-clip` rather than `overflow-hidden` is deliberate. `hidden` would make the sheet a scroll
|
|
12
|
+
* container, letting the browser scroll it to reveal content that takes focus while the enter animation
|
|
13
|
+
* still has the sheet translated off-screen, which cancels the animation. `clip` cannot scroll.
|
|
14
|
+
*/
|
|
15
|
+
declare const sheetBaseVariants: (props?: ({
|
|
16
|
+
side?: "top" | "right" | "bottom" | "left" | null | undefined;
|
|
17
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
18
|
+
type SheetVariantProps = VariantProps<typeof sheetBaseVariants>;
|
|
19
|
+
type SheetVariantInput = VariantInputs<SheetVariantProps>;
|
|
20
|
+
|
|
21
|
+
declare class SheetComponent implements SheetVariantInput {
|
|
22
|
+
#private;
|
|
23
|
+
private readonly sheetTemplate;
|
|
24
|
+
protected readonly baseClass: _angular_core.Signal<string>;
|
|
25
|
+
protected readonly closeButtonClass: _angular_core.Signal<string>;
|
|
26
|
+
protected readonly contentClass: _angular_core.Signal<string>;
|
|
27
|
+
protected readonly descriptionClass: _angular_core.Signal<string>;
|
|
28
|
+
protected readonly descriptionId: string;
|
|
29
|
+
protected readonly headerClass: _angular_core.Signal<string>;
|
|
30
|
+
protected readonly titleClass: _angular_core.Signal<string>;
|
|
31
|
+
protected readonly titleId: string;
|
|
32
|
+
/** @description Accessible name used when no visible title is provided. */
|
|
33
|
+
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
34
|
+
/** @description Whether the close button is displayed. @default true */
|
|
35
|
+
readonly closable: _angular_core.InputSignal<boolean>;
|
|
36
|
+
/** @description Emitted before the sheet closes. Call preventDefault() to keep it open. */
|
|
37
|
+
readonly close: _angular_core.OutputEmitterRef<PopupCloseEvent<unknown>>;
|
|
38
|
+
/** @description Whether clicking the backdrop requests that the sheet close. @default true */
|
|
39
|
+
readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
|
|
40
|
+
/** @description Whether pressing Escape requests that the sheet close. @default true */
|
|
41
|
+
readonly closeOnEscape: _angular_core.InputSignal<boolean>;
|
|
42
|
+
/** @description Emitted after the leave animation completes and the popup is disposed. */
|
|
43
|
+
readonly closed: _angular_core.OutputEmitterRef<void>;
|
|
44
|
+
/** @description Supporting text displayed below the title. */
|
|
45
|
+
readonly description: _angular_core.InputSignal<string | undefined>;
|
|
46
|
+
/** @description Explicit sheet height. Numbers are interpreted as pixels. */
|
|
47
|
+
readonly height: _angular_core.InputSignal<string | number | undefined>;
|
|
48
|
+
/** @description Edge of the viewport from which the sheet opens. @default "right" */
|
|
49
|
+
readonly side: _angular_core.InputSignal<SheetSide>;
|
|
50
|
+
/** @description Title displayed in the sheet header and used as its accessible name. */
|
|
51
|
+
readonly title: _angular_core.InputSignal<string | undefined>;
|
|
52
|
+
readonly userClass: _angular_core.InputSignalWithTransform<string | undefined, ClassInputType>;
|
|
53
|
+
/** @description Explicit sheet width. Numbers are interpreted as pixels. */
|
|
54
|
+
readonly width: _angular_core.InputSignal<string | number | undefined>;
|
|
55
|
+
constructor();
|
|
56
|
+
protected closeSheet(): void;
|
|
57
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SheetComponent, never>;
|
|
58
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetComponent, "mona-sheet", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; }, never, ["*"], true, never>;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export { SheetComponent };
|
|
62
|
+
export type { SheetSide };
|