@bootkit/ng0 0.0.0-alpha.51 → 0.0.0-alpha.52
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/components/pagination/index.d.ts +16 -10
- package/components/select/index.d.ts +2 -3
- package/components/table/index.d.ts +36 -33
- package/fesm2022/bootkit-ng0-components-pagination.mjs +17 -15
- package/fesm2022/bootkit-ng0-components-pagination.mjs.map +1 -1
- package/fesm2022/bootkit-ng0-components-select.mjs +7 -6
- package/fesm2022/bootkit-ng0-components-select.mjs.map +1 -1
- package/fesm2022/bootkit-ng0-components-table.mjs +37 -57
- package/fesm2022/bootkit-ng0-components-table.mjs.map +1 -1
- package/fesm2022/bootkit-ng0-http.mjs +4 -4
- package/fesm2022/bootkit-ng0-http.mjs.map +1 -1
- package/fesm2022/bootkit-ng0-icons.mjs +22 -0
- package/fesm2022/bootkit-ng0-icons.mjs.map +1 -0
- package/fesm2022/bootkit-ng0-localization-locales.mjs +7 -1
- package/fesm2022/bootkit-ng0-localization-locales.mjs.map +1 -1
- package/fesm2022/bootkit-ng0-localization.mjs +36 -11
- package/fesm2022/bootkit-ng0-localization.mjs.map +1 -1
- package/icons/index.d.ts +11 -0
- package/localization/index.d.ts +5 -1
- package/package.json +5 -1
|
@@ -1,34 +1,41 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { EventEmitter } from '@angular/core';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* Pagination component for displaying page numbers and navigation controls.
|
|
6
|
+
* It calculates the total number of pages based on the total records and page size,
|
|
7
|
+
* and determines which page numbers to display based on the selected page and maximum visible pages.
|
|
8
|
+
*/
|
|
4
9
|
declare class PaginationComponent {
|
|
5
10
|
/**
|
|
6
11
|
* Total number of records.
|
|
7
12
|
*/
|
|
8
|
-
readonly totalRecords: _angular_core.
|
|
13
|
+
readonly totalRecords: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
9
14
|
/**
|
|
10
15
|
* Page size. Number of items in each page.
|
|
16
|
+
* @default 10
|
|
11
17
|
*/
|
|
12
|
-
readonly pageSize: _angular_core.
|
|
18
|
+
readonly pageSize: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
13
19
|
/**
|
|
14
20
|
* Zero-based index of the selected page.
|
|
21
|
+
* @default 0
|
|
15
22
|
*/
|
|
16
|
-
readonly selectedPage: _angular_core.
|
|
23
|
+
readonly selectedPage: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
17
24
|
/**
|
|
18
25
|
* Maximum number of visible pages.
|
|
19
|
-
*
|
|
26
|
+
* @default 10
|
|
20
27
|
*/
|
|
21
|
-
readonly maxVisiblePages: _angular_core.
|
|
28
|
+
readonly maxVisiblePages: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
22
29
|
/**
|
|
23
30
|
* Show first and last buttons.
|
|
24
|
-
*
|
|
31
|
+
* @default true
|
|
25
32
|
*/
|
|
26
|
-
readonly showNextPreviousButtons: _angular_core.
|
|
33
|
+
readonly showNextPreviousButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
27
34
|
/**
|
|
28
35
|
* Show first and last buttons.
|
|
29
|
-
*
|
|
36
|
+
* @default true
|
|
30
37
|
*/
|
|
31
|
-
readonly showFirstLastButtons: _angular_core.
|
|
38
|
+
readonly showFirstLastButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
32
39
|
/**
|
|
33
40
|
* Total number of pages.
|
|
34
41
|
* This is a computed property based on totalRecords and pageSize.
|
|
@@ -42,7 +49,6 @@ declare class PaginationComponent {
|
|
|
42
49
|
readonly itemClick: EventEmitter<number>;
|
|
43
50
|
protected _totalPagesCount: number;
|
|
44
51
|
protected _visiblePages: _angular_core.Signal<number[]>;
|
|
45
|
-
_onPageChange(pageIndex: number): void;
|
|
46
52
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PaginationComponent, never>;
|
|
47
53
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PaginationComponent, "ng0-pagination", ["ng0Pagination"], { "totalRecords": { "alias": "totalRecords"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "selectedPage": { "alias": "selectedPage"; "required": false; "isSignal": true; }; "maxVisiblePages": { "alias": "maxVisiblePages"; "required": false; "isSignal": true; }; "showNextPreviousButtons": { "alias": "showNextPreviousButtons"; "required": false; "isSignal": true; }; "showFirstLastButtons": { "alias": "showFirstLastButtons"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["first", "previous", "next", "last"], true, never>;
|
|
48
54
|
}
|
|
@@ -4,7 +4,7 @@ import * as _angular_core from '@angular/core';
|
|
|
4
4
|
import { ElementRef, TemplateRef, EventEmitter } from '@angular/core';
|
|
5
5
|
import { DataSource, DataSourceLike } from '@bootkit/ng0/data';
|
|
6
6
|
import { ControlValueAccessor } from '@angular/forms';
|
|
7
|
-
import {
|
|
7
|
+
import { ScrollStrategy, ConnectedPosition } from '@angular/cdk/overlay';
|
|
8
8
|
import { ListItemSelectEvent } from '@bootkit/ng0/components/list';
|
|
9
9
|
|
|
10
10
|
/**
|
|
@@ -20,10 +20,9 @@ declare class SelectComponent implements ControlValueAccessor {
|
|
|
20
20
|
protected readonly _sourceItems: _angular_core.WritableSignal<any[] | undefined>;
|
|
21
21
|
protected readonly _selectedItems: Set<any>;
|
|
22
22
|
protected readonly _isDisabled: _angular_core.WritableSignal<boolean>;
|
|
23
|
-
protected _positionStrategy: FlexibleConnectedPositionStrategy;
|
|
24
23
|
protected _scrollStrategy: ScrollStrategy;
|
|
24
|
+
protected _positions: ConnectedPosition[];
|
|
25
25
|
private readonly _overlay;
|
|
26
|
-
private readonly _localizationService;
|
|
27
26
|
protected readonly _elementRef: ElementRef<any>;
|
|
28
27
|
protected readonly _filterValue: _angular_core.WritableSignal<string>;
|
|
29
28
|
private readonly _renderer;
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
+
import * as _bootkit_ng0_localization from '@bootkit/ng0/localization';
|
|
2
|
+
import { LocalizationService, TableComponentPagingFormatter } from '@bootkit/ng0/localization';
|
|
1
3
|
import * as _angular_core from '@angular/core';
|
|
2
4
|
import { OnInit, TemplateRef, AfterContentInit, OnDestroy, QueryList } from '@angular/core';
|
|
3
5
|
import { formatString } from '@bootkit/ng0/common';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
+
import { DataResult, DataSource, DataSourceLike } from '@bootkit/ng0/data';
|
|
7
|
+
import { ItemSelectEvent } from '@bootkit/ng0/components/select';
|
|
6
8
|
|
|
7
9
|
/**
|
|
8
|
-
* Type of the table
|
|
10
|
+
* Type of the table column.
|
|
9
11
|
* This can be a primitive type like 'number', 'currency', 'date', 'time',
|
|
10
12
|
* or an object with specific formatting options.
|
|
11
13
|
*/
|
|
12
|
-
type
|
|
14
|
+
type TableColumnType = 'text' | 'number' | 'currency' | 'date' | 'time' | {
|
|
13
15
|
/** Enum formatting options */
|
|
14
16
|
enum?: {
|
|
15
17
|
/** The name of the enum to use for translation */
|
|
@@ -25,74 +27,77 @@ type TableCellType = 'text' | 'number' | 'currency' | 'date' | 'time' | {
|
|
|
25
27
|
};
|
|
26
28
|
|
|
27
29
|
declare class TableColumnDirective implements OnInit {
|
|
30
|
+
private readonly _injector;
|
|
28
31
|
/**
|
|
29
32
|
* The field in the data source to bind to. If not set, the column will not display any data.
|
|
33
|
+
* @deprecated Use formatBy input.
|
|
34
|
+
*/
|
|
35
|
+
readonly field: _angular_core.InputSignal<string | undefined>;
|
|
36
|
+
/**
|
|
37
|
+
* A fromatter to convert each item to a string for display.
|
|
38
|
+
* This can be a function, a string (field name), or an array of formatters.
|
|
39
|
+
* If not set, the default formatter will be used, which simply calls toString() on the value.
|
|
30
40
|
*/
|
|
31
|
-
|
|
41
|
+
readonly formatBy: _angular_core.InputSignalWithTransform<_bootkit_ng0_localization.ObjectFormatter, _bootkit_ng0_localization.ObjectFormatterLike>;
|
|
32
42
|
/**
|
|
33
43
|
* The title of the column. This will be displayed in the header row.
|
|
34
44
|
*/
|
|
35
|
-
title: _angular_core.InputSignal<string | undefined>;
|
|
45
|
+
readonly title: _angular_core.InputSignal<string | undefined>;
|
|
36
46
|
/**
|
|
37
47
|
* Text to display in the cell if the value is null or undefined.
|
|
38
48
|
*/
|
|
39
|
-
emptyCellText: _angular_core.InputSignal<string | undefined>;
|
|
49
|
+
readonly emptyCellText: _angular_core.InputSignal<string | undefined>;
|
|
40
50
|
/**
|
|
41
51
|
* Type of the table cell.
|
|
42
52
|
*/
|
|
43
|
-
type: _angular_core.InputSignal<
|
|
53
|
+
readonly type: _angular_core.InputSignal<TableColumnType>;
|
|
44
54
|
/**
|
|
45
55
|
* CSS class(es) to apply to the table cell.
|
|
46
56
|
*/
|
|
47
|
-
cellClass: _angular_core.InputSignal<string | {
|
|
57
|
+
readonly cellClass: _angular_core.InputSignal<string | {
|
|
48
58
|
[klass: string]: any;
|
|
49
59
|
} | string[] | null | undefined>;
|
|
50
60
|
/**
|
|
51
61
|
* @deprecated Use `cellClass` instead.
|
|
52
62
|
*/
|
|
53
|
-
bold: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
63
|
+
readonly bold: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
54
64
|
/**
|
|
55
65
|
* @deprecated Use `cellClass` instead.
|
|
56
66
|
*/
|
|
57
|
-
shrink: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
67
|
+
readonly shrink: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
58
68
|
/**
|
|
59
69
|
* If true, the column will support filtering.
|
|
60
70
|
*/
|
|
61
|
-
filterable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
71
|
+
readonly filterable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
62
72
|
/**
|
|
63
73
|
* The current filter value of the column.
|
|
64
74
|
*/
|
|
65
|
-
filterValue: _angular_core.ModelSignal<any>;
|
|
66
|
-
/**
|
|
67
|
-
* The field to use for filtering. If not set, the `field` property will be used.
|
|
68
|
-
* @deprecated Use `fieldName` instead.
|
|
69
|
-
*/
|
|
70
|
-
filterField: _angular_core.InputSignal<string | undefined>;
|
|
75
|
+
readonly filterValue: _angular_core.ModelSignal<any>;
|
|
71
76
|
/**
|
|
72
77
|
* The current filter operator of the column.
|
|
73
78
|
*/
|
|
74
|
-
filterOperator: _angular_core.ModelSignal<string | undefined>;
|
|
79
|
+
readonly filterOperator: _angular_core.ModelSignal<string | undefined>;
|
|
75
80
|
/**
|
|
76
81
|
* The list of filter operators to show in the filter dropdown. If not set, a default list will be used based on the column type.
|
|
77
82
|
*/
|
|
78
|
-
filterOperators: _angular_core.InputSignal<string[] | undefined>;
|
|
83
|
+
readonly filterOperators: _angular_core.InputSignal<string[] | undefined>;
|
|
79
84
|
/**
|
|
80
85
|
* If true, the filter operators dropdown will be shown.
|
|
81
86
|
*/
|
|
82
|
-
showFilterOperators: _angular_core.WritableSignal<boolean>;
|
|
87
|
+
readonly showFilterOperators: _angular_core.WritableSignal<boolean>;
|
|
83
88
|
/**
|
|
84
89
|
* The name of the field in the data source. If not set, the `field` property will be used.
|
|
85
90
|
*/
|
|
86
|
-
fieldName: _angular_core.InputSignal<string | undefined>;
|
|
91
|
+
readonly fieldName: _angular_core.InputSignal<string | undefined>;
|
|
87
92
|
/**
|
|
88
93
|
* If true, the column will support sorting.
|
|
89
94
|
*/
|
|
90
|
-
sortable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
95
|
+
readonly sortable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
91
96
|
/**
|
|
92
97
|
* The current sort direction of the column.
|
|
93
98
|
*/
|
|
94
|
-
sortDirection: _angular_core.ModelSignal<"none" | "asc" | "desc">;
|
|
95
|
-
template?: TemplateRef<any>;
|
|
99
|
+
readonly sortDirection: _angular_core.ModelSignal<"none" | "asc" | "desc">;
|
|
100
|
+
readonly template?: TemplateRef<any>;
|
|
96
101
|
constructor();
|
|
97
102
|
ngOnInit(): void;
|
|
98
103
|
/**
|
|
@@ -105,7 +110,7 @@ declare class TableColumnDirective implements OnInit {
|
|
|
105
110
|
*/
|
|
106
111
|
toggleSortDirection(): void;
|
|
107
112
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableColumnDirective, never>;
|
|
108
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TableColumnDirective, "ng0-table-col", never, { "field": { "alias": "field"; "required": false; "isSignal": true; }; "
|
|
113
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TableColumnDirective, "ng0-table-col", never, { "field": { "alias": "field"; "required": false; "isSignal": true; }; "formatBy": { "alias": "formatBy"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "emptyCellText": { "alias": "emptyCellText"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "cellClass": { "alias": "cellClass"; "required": false; "isSignal": true; }; "bold": { "alias": "bold"; "required": false; "isSignal": true; }; "shrink": { "alias": "shrink"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterValue": { "alias": "filterValue"; "required": false; "isSignal": true; }; "filterOperator": { "alias": "filterOperator"; "required": false; "isSignal": true; }; "filterOperators": { "alias": "filterOperators"; "required": false; "isSignal": true; }; "fieldName": { "alias": "fieldName"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; }, { "filterValue": "filterValueChange"; "filterOperator": "filterOperatorChange"; "sortDirection": "sortDirectionChange"; }, ["template"], never, true, never>;
|
|
109
114
|
}
|
|
110
115
|
|
|
111
116
|
declare class TableDetailRowDirective {
|
|
@@ -128,21 +133,18 @@ declare class TableComponent implements AfterContentInit, OnDestroy {
|
|
|
128
133
|
protected _columns: QueryList<TableColumnDirective>;
|
|
129
134
|
protected _detailRow?: TableDetailRowDirective;
|
|
130
135
|
protected readonly _dataResult: _angular_core.WritableSignal<DataResult<any> | undefined>;
|
|
131
|
-
protected
|
|
132
|
-
protected _loadingRequest?: DataRequest;
|
|
136
|
+
protected readonly _error: _angular_core.WritableSignal<undefined>;
|
|
133
137
|
protected _rowStates: Map<any, {
|
|
134
138
|
expanded: boolean;
|
|
135
139
|
}>;
|
|
136
140
|
protected _formatString: typeof formatString;
|
|
137
|
-
protected _dataSource: DataSource;
|
|
138
141
|
protected _pagingFormatter: TableComponentPagingFormatter;
|
|
139
|
-
protected _lastError?: any;
|
|
140
142
|
/**
|
|
141
143
|
* The data source for the table.
|
|
142
144
|
* This can be an array of data, a function that returns an observable of data,
|
|
143
145
|
* or an instance of DataSource.
|
|
144
146
|
*/
|
|
145
|
-
readonly source: _angular_core.
|
|
147
|
+
readonly source: _angular_core.InputSignalWithTransform<DataSource<any>, DataSourceLike<any>>;
|
|
146
148
|
/**
|
|
147
149
|
* If true, the table will automatically load data when initialized.
|
|
148
150
|
* This is useful for tables that need to display data immediately without user interaction.
|
|
@@ -235,13 +237,13 @@ declare class TableComponent implements AfterContentInit, OnDestroy {
|
|
|
235
237
|
/**
|
|
236
238
|
* The indicator to show while the table is loading data for the first time.
|
|
237
239
|
*/
|
|
238
|
-
readonly loadingIndicator: _angular_core.
|
|
240
|
+
readonly loadingIndicator: _angular_core.InputSignal<"none" | "simple" | "spinner">;
|
|
239
241
|
/** If true, the table will show a loading cover while data is being loaded.
|
|
240
242
|
* This can be used to prevent user interaction with the table while loading.
|
|
241
243
|
* This cover is not displayed when the table is loading for the first time.
|
|
242
244
|
* Instead, the table will show a loading based on loadingIndicator settings.
|
|
243
245
|
*/
|
|
244
|
-
readonly loadingCover: _angular_core.
|
|
246
|
+
readonly loadingCover: _angular_core.InputSignal<"none" | "simple" | "spinner">;
|
|
245
247
|
ngAfterContentInit(): void;
|
|
246
248
|
/**
|
|
247
249
|
* Loads data from the data source based on the current state of the table (pagination, sorting, filtering).
|
|
@@ -260,6 +262,7 @@ declare class TableComponent implements AfterContentInit, OnDestroy {
|
|
|
260
262
|
protected isRowExpanded(row: any): boolean;
|
|
261
263
|
protected _onToggleFilterOperator(col: TableColumnDirective): void;
|
|
262
264
|
protected _onSelectFilterOperator(col: TableColumnDirective, filterOperator: string): void;
|
|
265
|
+
_onPageSizeOptionsItemSelect(e: ItemSelectEvent): void;
|
|
263
266
|
ngOnDestroy(): void;
|
|
264
267
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent, never>;
|
|
265
268
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "ng0-table", ["ng0Table"], { "source": { "alias": "source"; "required": true; "isSignal": true; }; "autoLoad": { "alias": "autoLoad"; "required": false; "isSignal": true; }; "showRowNumbers": { "alias": "showRowNumbers"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "pageable": { "alias": "pageable"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "maxVisiblePages": { "alias": "maxVisiblePages"; "required": false; "isSignal": true; }; "showPagingControls": { "alias": "showPagingControls"; "required": false; "isSignal": true; }; "showFirstLastButtons": { "alias": "showFirstLastButtons"; "required": false; "isSignal": true; }; "showNextPreviousButtons": { "alias": "showNextPreviousButtons"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showPagingInfo": { "alias": "showPagingInfo"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "tableClass": { "alias": "tableClass"; "required": false; "isSignal": true; }; "headerClass": { "alias": "headerClass"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "loadingIndicator": { "alias": "loadingIndicator"; "required": false; "isSignal": true; }; "loadingCover": { "alias": "loadingCover"; "required": false; "isSignal": true; }; }, { "pageIndex": "pageIndexChange"; "pageSize": "pageSizeChange"; }, ["_detailRow", "_columns"], ["paging-first", "paging-last", "paging-next", "paging-previous", "paging-info"], true, never>;
|
|
@@ -1,36 +1,43 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { input, EventEmitter, computed, Output, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
3
|
+
import { input, numberAttribute, booleanAttribute, EventEmitter, computed, Output, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
4
4
|
import { TranslatePipe } from '@bootkit/ng0/localization';
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* Pagination component for displaying page numbers and navigation controls.
|
|
8
|
+
* It calculates the total number of pages based on the total records and page size,
|
|
9
|
+
* and determines which page numbers to display based on the selected page and maximum visible pages.
|
|
10
|
+
*/
|
|
6
11
|
class PaginationComponent {
|
|
7
12
|
/**
|
|
8
13
|
* Total number of records.
|
|
9
14
|
*/
|
|
10
|
-
totalRecords = input.required(...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
|
|
15
|
+
totalRecords = input.required(...(ngDevMode ? [{ debugName: "totalRecords", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
11
16
|
/**
|
|
12
17
|
* Page size. Number of items in each page.
|
|
18
|
+
* @default 10
|
|
13
19
|
*/
|
|
14
|
-
pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
20
|
+
pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
15
21
|
/**
|
|
16
22
|
* Zero-based index of the selected page.
|
|
23
|
+
* @default 0
|
|
17
24
|
*/
|
|
18
|
-
selectedPage = input(0, ...(ngDevMode ? [{ debugName: "selectedPage" }] : []));
|
|
25
|
+
selectedPage = input(0, ...(ngDevMode ? [{ debugName: "selectedPage", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
19
26
|
/**
|
|
20
27
|
* Maximum number of visible pages.
|
|
21
|
-
*
|
|
28
|
+
* @default 10
|
|
22
29
|
*/
|
|
23
|
-
maxVisiblePages = input(10, ...(ngDevMode ? [{ debugName: "maxVisiblePages" }] : []));
|
|
30
|
+
maxVisiblePages = input(10, ...(ngDevMode ? [{ debugName: "maxVisiblePages", transform: numberAttribute }] : [{ transform: numberAttribute }]));
|
|
24
31
|
/**
|
|
25
32
|
* Show first and last buttons.
|
|
26
|
-
*
|
|
33
|
+
* @default true
|
|
27
34
|
*/
|
|
28
|
-
showNextPreviousButtons = input(true, ...(ngDevMode ? [{ debugName: "showNextPreviousButtons" }] : []));
|
|
35
|
+
showNextPreviousButtons = input(true, ...(ngDevMode ? [{ debugName: "showNextPreviousButtons", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
29
36
|
/**
|
|
30
37
|
* Show first and last buttons.
|
|
31
|
-
*
|
|
38
|
+
* @default true
|
|
32
39
|
*/
|
|
33
|
-
showFirstLastButtons = input(true, ...(ngDevMode ? [{ debugName: "showFirstLastButtons" }] : []));
|
|
40
|
+
showFirstLastButtons = input(true, ...(ngDevMode ? [{ debugName: "showFirstLastButtons", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
34
41
|
/**
|
|
35
42
|
* Total number of pages.
|
|
36
43
|
* This is a computed property based on totalRecords and pageSize.
|
|
@@ -77,11 +84,6 @@ class PaginationComponent {
|
|
|
77
84
|
}
|
|
78
85
|
return indices;
|
|
79
86
|
}, ...(ngDevMode ? [{ debugName: "_visiblePages" }] : []));
|
|
80
|
-
_onPageChange(pageIndex) {
|
|
81
|
-
debugger;
|
|
82
|
-
console.log('click');
|
|
83
|
-
this.itemClick.emit(pageIndex);
|
|
84
|
-
}
|
|
85
87
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
86
88
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.11", type: PaginationComponent, isStandalone: true, selector: "ng0-pagination", inputs: { totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, selectedPage: { classPropertyName: "selectedPage", publicName: "selectedPage", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showNextPreviousButtons: { classPropertyName: "showNextPreviousButtons", publicName: "showNextPreviousButtons", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, exportAs: ["ng0Pagination"], ngImport: i0, template: "@let _selectedPage = selectedPage();\n\n<nav>\n <ul class=\"pagination\">\n @if(showFirstLastButtons() || showFirstLastButtons() == undefined) {\n <li class=\"page-item\" [class.disabled]=\"_selectedPage == undefined || _selectedPage <= 1\">\n <button class=\"page-link\" (click)=\"itemClick.emit(1)\">\n <ng-content select=\"first\">\n {{'first' | ng0Translate}}\n </ng-content>\n </button>\n </li>\n }\n\n @if(showNextPreviousButtons() || showNextPreviousButtons() == undefined) {\n <li class=\"page-item\" [class.disabled]=\"_selectedPage == undefined || _selectedPage <= 1\">\n <button class=\"page-link\" (click)=\"itemClick.emit(_selectedPage! - 1)\">\n <ng-content select=\"previous\">\n {{'previous' | ng0Translate}}\n </ng-content>\n </button>\n </li>\n }\n\n @for (page of _visiblePages(); track page) {\n <li class=\"page-item\" [class.active]=\"_selectedPage === page\">\n <button class=\"page-link\" (click)=\"itemClick.emit(page)\">\n {{page + 1}}\n </button>\n </li>\n }\n\n @if(showNextPreviousButtons() || showNextPreviousButtons() == undefined) {\n <li class=\"page-item\" [class.disabled]=\"_selectedPage == undefined || _selectedPage >= _totalPagesCount - 1\">\n <button class=\"page-link\" (click)=\"itemClick.emit(_selectedPage! + 1)\">\n <ng-content select=\"next\">\n {{'next' | ng0Translate}}\n </ng-content>\n </button>\n </li>\n }\n\n @if(showFirstLastButtons() || showFirstLastButtons() == undefined) {\n <li class=\"page-item\" [class.disabled]=\"_selectedPage == undefined || _selectedPage >= _totalPagesCount - 1\">\n <button class=\"page-link\" (click)=\"itemClick.emit(_totalPagesCount)\">\n <ng-content select=\"last\">\n {{'last' | ng0Translate}}\n </ng-content>\n </button>\n </li>\n }\n </ul>\n</nav>\n\n<style>\n .pagination {\n margin: 0;\n }\n</style>", styles: [".pagination{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: TranslatePipe, name: "ng0Translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
87
89
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bootkit-ng0-components-pagination.mjs","sources":["../../../projects/ng0/components/pagination/pagination.component.ts","../../../projects/ng0/components/pagination/pagination.component.html","../../../projects/ng0/components/pagination/pagination.module.ts","../../../projects/ng0/components/pagination/bootkit-ng0-components-pagination.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ChangeDetectionStrategy, input, computed, Output, EventEmitter } from '@angular/core';\nimport { TranslatePipe } from '@bootkit/ng0/localization';\n\n@Component({\n selector: 'ng0-pagination',\n exportAs: 'ng0Pagination',\n templateUrl: './pagination.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [\n CommonModule,\n TranslatePipe\n ]\n})\nexport class PaginationComponent {\n /**\n * Total number of records.\n */\n public readonly totalRecords = input.required<number>();\n\n /**\n * Page size. Number of items in each page.\n */\n public readonly pageSize = input<number>(10);\n\n /** \n * Zero-based index of the selected page.\n */\n public readonly selectedPage = input<number>(0);\n\n /**\n * Maximum number of visible pages.\n * Default is 10.\n */\n public readonly maxVisiblePages = input<number>(10);\n\n /**\n * Show first and last buttons.\n * Default is true.\n */\n public readonly showNextPreviousButtons = input<boolean | undefined>(true);\n\n /**\n * Show first and last buttons.\n * Default is true.\n */\n public readonly showFirstLastButtons = input<boolean | undefined>(true);\n\n /**\n * Total number of pages.\n * This is a computed property based on totalRecords and pageSize.\n * It is not an input property.\n */\n public get totalPagesCount() { return this._totalPagesCount; }\n\n /** \n * Emits the selected page index when a page is clicked.\n * The index starts from 1.\n */\n @Output() public readonly itemClick = new EventEmitter<number>();\n\n protected _totalPagesCount!: number;\n\n protected _visiblePages = computed(() => {\n let selectedPage = this.selectedPage();\n let totalRecords = this.totalRecords();\n let pageSize = this.pageSize();\n\n if (!Number.isInteger(totalRecords) || totalRecords < 0) {\n throw new Error('Total items must be a posotive integer.');\n }\n\n if (!Number.isInteger(pageSize) || pageSize <= 0) {\n throw new Error('Page size must be a posotive integer.');\n }\n\n this._totalPagesCount = Math.ceil(totalRecords / pageSize);\n\n if (selectedPage < 0 || selectedPage > this._totalPagesCount) {\n throw new Error(`Selected page index must be between 0 and ${this._totalPagesCount - 1}.`);\n }\n\n let indices = [];\n let firstVisiblePage = selectedPage;\n let lastVisiblePage = firstVisiblePage;\n let maxVisiblePages = this.maxVisiblePages();\n indices.push(firstVisiblePage);\n\n for (let i = 0; i < maxVisiblePages; i++) {\n if (lastVisiblePage < this._totalPagesCount - 1) {\n lastVisiblePage++;\n indices.push(lastVisiblePage);\n }\n\n if (indices.length >= maxVisiblePages) {\n break;\n }\n\n if (firstVisiblePage > 0) {\n firstVisiblePage--;\n indices.unshift(firstVisiblePage);\n }\n }\n\n return indices;\n });\n\n public _onPageChange(pageIndex: number) {\n debugger\n console.log('click')\n this.itemClick.emit(pageIndex);\n }\n\n}\n","@let _selectedPage = selectedPage();\n\n<nav>\n <ul class=\"pagination\">\n @if(showFirstLastButtons() || showFirstLastButtons() == undefined) {\n <li class=\"page-item\" [class.disabled]=\"_selectedPage == undefined || _selectedPage <= 1\">\n <button class=\"page-link\" (click)=\"itemClick.emit(1)\">\n <ng-content select=\"first\">\n {{'first' | ng0Translate}}\n </ng-content>\n </button>\n </li>\n }\n\n @if(showNextPreviousButtons() || showNextPreviousButtons() == undefined) {\n <li class=\"page-item\" [class.disabled]=\"_selectedPage == undefined || _selectedPage <= 1\">\n <button class=\"page-link\" (click)=\"itemClick.emit(_selectedPage! - 1)\">\n <ng-content select=\"previous\">\n {{'previous' | ng0Translate}}\n </ng-content>\n </button>\n </li>\n }\n\n @for (page of _visiblePages(); track page) {\n <li class=\"page-item\" [class.active]=\"_selectedPage === page\">\n <button class=\"page-link\" (click)=\"itemClick.emit(page)\">\n {{page + 1}}\n </button>\n </li>\n }\n\n @if(showNextPreviousButtons() || showNextPreviousButtons() == undefined) {\n <li class=\"page-item\" [class.disabled]=\"_selectedPage == undefined || _selectedPage >= _totalPagesCount - 1\">\n <button class=\"page-link\" (click)=\"itemClick.emit(_selectedPage! + 1)\">\n <ng-content select=\"next\">\n {{'next' | ng0Translate}}\n </ng-content>\n </button>\n </li>\n }\n\n @if(showFirstLastButtons() || showFirstLastButtons() == undefined) {\n <li class=\"page-item\" [class.disabled]=\"_selectedPage == undefined || _selectedPage >= _totalPagesCount - 1\">\n <button class=\"page-link\" (click)=\"itemClick.emit(_totalPagesCount)\">\n <ng-content select=\"last\">\n {{'last' | ng0Translate}}\n </ng-content>\n </button>\n </li>\n }\n </ul>\n</nav>\n\n<style>\n .pagination {\n margin: 0;\n }\n</style>","import { NgModule } from '@angular/core';\nimport { PaginationComponent } from './pagination.component';\n\n@NgModule({\n imports: [\n PaginationComponent\n ],\n exports: [\n PaginationComponent\n ]\n})\nexport class PaginationModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"bootkit-ng0-components-pagination.mjs","sources":["../../../projects/ng0/components/pagination/pagination.component.ts","../../../projects/ng0/components/pagination/pagination.component.html","../../../projects/ng0/components/pagination/pagination.module.ts","../../../projects/ng0/components/pagination/bootkit-ng0-components-pagination.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ChangeDetectionStrategy, input, computed, Output, EventEmitter, booleanAttribute, numberAttribute } from '@angular/core';\nimport { TranslatePipe } from '@bootkit/ng0/localization';\n\n/**\n * Pagination component for displaying page numbers and navigation controls.\n * It calculates the total number of pages based on the total records and page size,\n * and determines which page numbers to display based on the selected page and maximum visible pages.\n */\n@Component({\n selector: 'ng0-pagination',\n exportAs: 'ng0Pagination',\n templateUrl: './pagination.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [\n CommonModule,\n TranslatePipe\n ]\n})\nexport class PaginationComponent {\n /**\n * Total number of records.\n */\n public readonly totalRecords = input.required({ transform: numberAttribute });\n\n /**\n * Page size. Number of items in each page.\n * @default 10\n */\n public readonly pageSize = input(10, { transform: numberAttribute });\n\n /** \n * Zero-based index of the selected page.\n * @default 0\n */\n public readonly selectedPage = input(0, { transform: numberAttribute });\n\n /**\n * Maximum number of visible pages.\n * @default 10\n */\n public readonly maxVisiblePages = input(10, { transform: numberAttribute });\n\n /**\n * Show first and last buttons.\n * @default true\n */\n public readonly showNextPreviousButtons = input(true, { transform: booleanAttribute });\n\n /**\n * Show first and last buttons.\n * @default true\n */\n public readonly showFirstLastButtons = input(true, { transform: booleanAttribute });\n\n /**\n * Total number of pages.\n * This is a computed property based on totalRecords and pageSize.\n * It is not an input property.\n */\n public get totalPagesCount() { return this._totalPagesCount; }\n\n /** \n * Emits the selected page index when a page is clicked.\n * The index starts from 1.\n */\n @Output() public readonly itemClick = new EventEmitter<number>();\n\n protected _totalPagesCount!: number;\n\n protected _visiblePages = computed(() => {\n let selectedPage = this.selectedPage();\n let totalRecords = this.totalRecords();\n let pageSize = this.pageSize();\n\n if (!Number.isInteger(totalRecords) || totalRecords < 0) {\n throw new Error('Total items must be a posotive integer.');\n }\n\n if (!Number.isInteger(pageSize) || pageSize <= 0) {\n throw new Error('Page size must be a posotive integer.');\n }\n\n this._totalPagesCount = Math.ceil(totalRecords / pageSize);\n\n if (selectedPage < 0 || selectedPage > this._totalPagesCount) {\n throw new Error(`Selected page index must be between 0 and ${this._totalPagesCount - 1}.`);\n }\n\n let indices = [];\n let firstVisiblePage = selectedPage;\n let lastVisiblePage = firstVisiblePage;\n let maxVisiblePages = this.maxVisiblePages();\n indices.push(firstVisiblePage);\n\n for (let i = 0; i < maxVisiblePages; i++) {\n if (lastVisiblePage < this._totalPagesCount - 1) {\n lastVisiblePage++;\n indices.push(lastVisiblePage);\n }\n\n if (indices.length >= maxVisiblePages) {\n break;\n }\n\n if (firstVisiblePage > 0) {\n firstVisiblePage--;\n indices.unshift(firstVisiblePage);\n }\n }\n\n return indices;\n });\n}\n","@let _selectedPage = selectedPage();\n\n<nav>\n <ul class=\"pagination\">\n @if(showFirstLastButtons() || showFirstLastButtons() == undefined) {\n <li class=\"page-item\" [class.disabled]=\"_selectedPage == undefined || _selectedPage <= 1\">\n <button class=\"page-link\" (click)=\"itemClick.emit(1)\">\n <ng-content select=\"first\">\n {{'first' | ng0Translate}}\n </ng-content>\n </button>\n </li>\n }\n\n @if(showNextPreviousButtons() || showNextPreviousButtons() == undefined) {\n <li class=\"page-item\" [class.disabled]=\"_selectedPage == undefined || _selectedPage <= 1\">\n <button class=\"page-link\" (click)=\"itemClick.emit(_selectedPage! - 1)\">\n <ng-content select=\"previous\">\n {{'previous' | ng0Translate}}\n </ng-content>\n </button>\n </li>\n }\n\n @for (page of _visiblePages(); track page) {\n <li class=\"page-item\" [class.active]=\"_selectedPage === page\">\n <button class=\"page-link\" (click)=\"itemClick.emit(page)\">\n {{page + 1}}\n </button>\n </li>\n }\n\n @if(showNextPreviousButtons() || showNextPreviousButtons() == undefined) {\n <li class=\"page-item\" [class.disabled]=\"_selectedPage == undefined || _selectedPage >= _totalPagesCount - 1\">\n <button class=\"page-link\" (click)=\"itemClick.emit(_selectedPage! + 1)\">\n <ng-content select=\"next\">\n {{'next' | ng0Translate}}\n </ng-content>\n </button>\n </li>\n }\n\n @if(showFirstLastButtons() || showFirstLastButtons() == undefined) {\n <li class=\"page-item\" [class.disabled]=\"_selectedPage == undefined || _selectedPage >= _totalPagesCount - 1\">\n <button class=\"page-link\" (click)=\"itemClick.emit(_totalPagesCount)\">\n <ng-content select=\"last\">\n {{'last' | ng0Translate}}\n </ng-content>\n </button>\n </li>\n }\n </ul>\n</nav>\n\n<style>\n .pagination {\n margin: 0;\n }\n</style>","import { NgModule } from '@angular/core';\nimport { PaginationComponent } from './pagination.component';\n\n@NgModule({\n imports: [\n PaginationComponent\n ],\n exports: [\n PaginationComponent\n ]\n})\nexport class PaginationModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -4,8 +4,8 @@ import { CommonModule } from '@angular/common';
|
|
|
4
4
|
import { dataSourceAttribute, DataRequest } from '@bootkit/ng0/data';
|
|
5
5
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
6
|
import * as i2 from '@angular/cdk/overlay';
|
|
7
|
-
import { Overlay, ViewportRuler, OverlayModule } from '@angular/cdk/overlay';
|
|
8
|
-
import {
|
|
7
|
+
import { Overlay, ViewportRuler, STANDARD_DROPDOWN_BELOW_POSITIONS, OverlayModule } from '@angular/cdk/overlay';
|
|
8
|
+
import { defaultFormatter, objectFormatterAttribute } from '@bootkit/ng0/localization';
|
|
9
9
|
import * as i1 from '@bootkit/ng0/components/list';
|
|
10
10
|
import { ListModule, ListComponent } from '@bootkit/ng0/components/list';
|
|
11
11
|
import { defaultEqualityComparer, equalityComparerAttribute, defaultValueWriter, valueWriterAttribute, defaultFilter, filterPredicateAttribute, CssClassAttribute, IdGeneratorAttribute } from '@bootkit/ng0/common';
|
|
@@ -24,10 +24,9 @@ class SelectComponent {
|
|
|
24
24
|
_sourceItems = signal(undefined, ...(ngDevMode ? [{ debugName: "_sourceItems" }] : []));
|
|
25
25
|
_selectedItems = new Set();
|
|
26
26
|
_isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
|
|
27
|
-
_positionStrategy;
|
|
28
27
|
_scrollStrategy;
|
|
28
|
+
_positions;
|
|
29
29
|
_overlay = inject(Overlay);
|
|
30
|
-
_localizationService = inject(LocalizationService);
|
|
31
30
|
_elementRef = inject((ElementRef));
|
|
32
31
|
_filterValue = signal('', ...(ngDevMode ? [{ debugName: "_filterValue" }] : []));
|
|
33
32
|
_renderer = inject(Renderer2);
|
|
@@ -118,6 +117,8 @@ class SelectComponent {
|
|
|
118
117
|
constructor() {
|
|
119
118
|
['form-select'].forEach(c => this._renderer.addClass(this._elementRef.nativeElement, c));
|
|
120
119
|
this._scrollStrategy = this._overlay.scrollStrategies.block();
|
|
120
|
+
this._positions = STANDARD_DROPDOWN_BELOW_POSITIONS;
|
|
121
|
+
// this._positions = getConnectedPositions('bottom', 'start', true);
|
|
121
122
|
effect(() => {
|
|
122
123
|
let source = this.source();
|
|
123
124
|
source.load(new DataRequest()).subscribe(res => {
|
|
@@ -386,7 +387,7 @@ class SelectComponent {
|
|
|
386
387
|
provide: NG_VALUE_ACCESSOR,
|
|
387
388
|
useExisting: forwardRef(() => SelectComponent),
|
|
388
389
|
multi: true
|
|
389
|
-
}], queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "_filterElementRef", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "_listComponent", first: true, predicate: ListComponent, descendants: true }], exportAs: ["ng0Select"], ngImport: i0, template: "@if(multiple()) {\n\
|
|
390
|
+
}], queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "_filterElementRef", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "_listComponent", first: true, predicate: ListComponent, descendants: true }], exportAs: ["ng0Select"], ngImport: i0, template: "@if (multiple()) {\n\t@for (item of _selectedItems.values(); track $index; let last=$last) {\n\t\t{{formatBy()(item)}}\n\t\t@if (!last) {\n\t\t\t,\n\t\t}\n\t}\n} @else {\n\t@if (_selectedItems.size > 0) {\n\t\t{{formatBy()(_selectedItems.values().next().value)}}\n\t}\n}\n\n@if (source().isLoading()) {\n\t<div class=\"spinner-grow text-secondary spinner-grow-sm ng0-select-spinner\" role=\"status\">\n\t\t<span class=\"visually-hidden\">Loading...</span>\n\t</div>\n\n\t \n\t<!-- This space is required to prevent layout shift after loading indicator hides. -->\n}\n\n<ng-template\n\tcdkConnectedOverlay\n\t[cdkConnectedOverlayOrigin]=\"_elementRef.nativeElement\"\n\t[cdkConnectedOverlayOpen]=\"open()\"\n\t[cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\n\t[cdkConnectedOverlayPositions]=\"_positions\"\n\t[cdkConnectedOverlayPush]=\"false\"\n\t[cdkConnectedOverlayFlexibleDimensions]=\"true\"\n\t[cdkConnectedOverlayPanelClass]=\"['ng0-select-dropdown']\"\n\t[cdkConnectedOverlayWidth]=\"_elementRef.nativeElement.clientWidth\"\n\t(overlayOutsideClick)=\"this.open.set(false)\"\n\t(attach)=\"_onOverlayAttach();\"\n\t(detach)=\"_onOverlayDetach()\">\n\t@if (filterable()) {\n\t\t<div class=\"ng0-select-filter-container\">\n\t\t\t<input\n\t\t\t\t#filterInput\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"ng0-select-filter-input\"\n\t\t\t\t[attr.placeholder]=\"filterPlaceholder()\"\n\t\t\t\t(input)=\"_filterValue.set($event.target.value)\"\n\t\t\t\t(keydown)=\"_onFilterKeydown($event)\" />\n\t\t</div>\n\t}\n\n\t<ng0-select-list\n\t\t#list\n\t\t[source]=\"_sourceItems()\"\n\t\t[multiple]=\"multiple()\"\n\t\t[formatBy]=\"formatBy()\"\n\t\t[compareBy]=\"compareBy()\"\n\t\t[itemClass]=\"itemClass()\"\n\t\t[showSelectionIndicator]=\"showSelectionIndicator()\"\n\t\t[itemTemplate]=\"itemTemplate\"\n\t\t[filterBy]=\"_filterPredicate()\"\n\t\tfocusMode=\"none\"\n\t\t(mousedown)=\"$event.preventDefault(); $event.stopImmediatePropagation()\"\n\t\t(itemSelect)=\"_onListSelectionChange($event)\">\n\t</ng0-select-list>\n</ng-template>\n", styles: [":root{--ng0-select-dropdown-duration: .1s;--ng0-select-dropdown-timing-function: ease-out}@keyframes dropdownEnter{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes dropdownLeave{0%{opacity:1}to{opacity:0}}ng0-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;display:flex!important;align-items:center}ng0-select[disabled],ng0-select.disabled{opacity:.5;pointer-events:none}ng0-select:empty:before{content:\" \";white-space:pre}ng0-select:focus,ng0-select:focus-visible,ng0-select.ng0-select-open.ng0-select-filterable{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}.ng0-select-dropdown{display:flex;width:100%;flex-direction:column;background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow-y:auto;margin:var(--bs-focus-ring-width, 0) 0;transform-origin:top;animation:dropdownEnter var(--ng0-select-dropdown-duration) var(--ng0-select-dropdown-timing-function) forwards}.ng0-select-filter-container{padding:.5rem;background-color:inherit}.ng0-select-filter-container .ng0-select-filter-input{width:100%;border:1px solid var(--bs-border-color);border-radius:.2rem;padding:.25rem}.ng0-select-filter-container .ng0-select-filter-input:focus,.ng0-select-filter-container .ng0-select-filter-input:focus-visible{outline:0}ng0-select-list{flex-grow:1;overflow-y:auto}ng0-select-list ng0-list-item{padding:.5rem;display:flex;-webkit-user-select:none;user-select:none}ng0-select-list ng0-list-item.selected{background-color:var(--bs-primary);color:var(--bs-light)}ng0-select-list ng0-list-item.active:not(.selected){background-color:color-mix(in srgb,var(--bs-primary),white 85%)}ng0-select-list ng0-list-item:hover:not(.selected):not(.disabled):not(.active){background-color:color-mix(in srgb,var(--bs-primary),white 95%)}ng0-select-list ng0-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}ng0-select-list ng0-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}ng0-select-list ng0-list-item .ng0-selection-indicator{margin-inline-end:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i1.ListComponent, selector: "ng0-list, ng0-select-list", inputs: ["source", "multiple", "showSelectionIndicator", "compareBy", "formatBy", "writeBy", "filterBy", "trackBy", "itemClass", "focusMode", "idGenerator", "itemTemplate"], outputs: ["itemSelect"], exportAs: ["ng0List"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
390
391
|
}
|
|
391
392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImport: i0, type: SelectComponent, decorators: [{
|
|
392
393
|
type: Component,
|
|
@@ -401,7 +402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImpo
|
|
|
401
402
|
'[attr.disabled]': '_isDisabled() ? "" : undefined',
|
|
402
403
|
'[attr.aria-disabled]': '_isDisabled() ? "" : undefined',
|
|
403
404
|
'[attr.tabindex]': '_isDisabled() ? undefined : 0',
|
|
404
|
-
}, template: "@if(multiple()) {\n\
|
|
405
|
+
}, template: "@if (multiple()) {\n\t@for (item of _selectedItems.values(); track $index; let last=$last) {\n\t\t{{formatBy()(item)}}\n\t\t@if (!last) {\n\t\t\t,\n\t\t}\n\t}\n} @else {\n\t@if (_selectedItems.size > 0) {\n\t\t{{formatBy()(_selectedItems.values().next().value)}}\n\t}\n}\n\n@if (source().isLoading()) {\n\t<div class=\"spinner-grow text-secondary spinner-grow-sm ng0-select-spinner\" role=\"status\">\n\t\t<span class=\"visually-hidden\">Loading...</span>\n\t</div>\n\n\t \n\t<!-- This space is required to prevent layout shift after loading indicator hides. -->\n}\n\n<ng-template\n\tcdkConnectedOverlay\n\t[cdkConnectedOverlayOrigin]=\"_elementRef.nativeElement\"\n\t[cdkConnectedOverlayOpen]=\"open()\"\n\t[cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\n\t[cdkConnectedOverlayPositions]=\"_positions\"\n\t[cdkConnectedOverlayPush]=\"false\"\n\t[cdkConnectedOverlayFlexibleDimensions]=\"true\"\n\t[cdkConnectedOverlayPanelClass]=\"['ng0-select-dropdown']\"\n\t[cdkConnectedOverlayWidth]=\"_elementRef.nativeElement.clientWidth\"\n\t(overlayOutsideClick)=\"this.open.set(false)\"\n\t(attach)=\"_onOverlayAttach();\"\n\t(detach)=\"_onOverlayDetach()\">\n\t@if (filterable()) {\n\t\t<div class=\"ng0-select-filter-container\">\n\t\t\t<input\n\t\t\t\t#filterInput\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"ng0-select-filter-input\"\n\t\t\t\t[attr.placeholder]=\"filterPlaceholder()\"\n\t\t\t\t(input)=\"_filterValue.set($event.target.value)\"\n\t\t\t\t(keydown)=\"_onFilterKeydown($event)\" />\n\t\t</div>\n\t}\n\n\t<ng0-select-list\n\t\t#list\n\t\t[source]=\"_sourceItems()\"\n\t\t[multiple]=\"multiple()\"\n\t\t[formatBy]=\"formatBy()\"\n\t\t[compareBy]=\"compareBy()\"\n\t\t[itemClass]=\"itemClass()\"\n\t\t[showSelectionIndicator]=\"showSelectionIndicator()\"\n\t\t[itemTemplate]=\"itemTemplate\"\n\t\t[filterBy]=\"_filterPredicate()\"\n\t\tfocusMode=\"none\"\n\t\t(mousedown)=\"$event.preventDefault(); $event.stopImmediatePropagation()\"\n\t\t(itemSelect)=\"_onListSelectionChange($event)\">\n\t</ng0-select-list>\n</ng-template>\n", styles: [":root{--ng0-select-dropdown-duration: .1s;--ng0-select-dropdown-timing-function: ease-out}@keyframes dropdownEnter{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes dropdownLeave{0%{opacity:1}to{opacity:0}}ng0-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;display:flex!important;align-items:center}ng0-select[disabled],ng0-select.disabled{opacity:.5;pointer-events:none}ng0-select:empty:before{content:\" \";white-space:pre}ng0-select:focus,ng0-select:focus-visible,ng0-select.ng0-select-open.ng0-select-filterable{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}.ng0-select-dropdown{display:flex;width:100%;flex-direction:column;background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow-y:auto;margin:var(--bs-focus-ring-width, 0) 0;transform-origin:top;animation:dropdownEnter var(--ng0-select-dropdown-duration) var(--ng0-select-dropdown-timing-function) forwards}.ng0-select-filter-container{padding:.5rem;background-color:inherit}.ng0-select-filter-container .ng0-select-filter-input{width:100%;border:1px solid var(--bs-border-color);border-radius:.2rem;padding:.25rem}.ng0-select-filter-container .ng0-select-filter-input:focus,.ng0-select-filter-container .ng0-select-filter-input:focus-visible{outline:0}ng0-select-list{flex-grow:1;overflow-y:auto}ng0-select-list ng0-list-item{padding:.5rem;display:flex;-webkit-user-select:none;user-select:none}ng0-select-list ng0-list-item.selected{background-color:var(--bs-primary);color:var(--bs-light)}ng0-select-list ng0-list-item.active:not(.selected){background-color:color-mix(in srgb,var(--bs-primary),white 85%)}ng0-select-list ng0-list-item:hover:not(.selected):not(.disabled):not(.active){background-color:color-mix(in srgb,var(--bs-primary),white 95%)}ng0-select-list ng0-list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}ng0-select-list ng0-list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}ng0-select-list ng0-list-item .ng0-selection-indicator{margin-inline-end:.5rem}\n"] }]
|
|
405
406
|
}], ctorParameters: () => [], propDecorators: { _filterElementRef: [{
|
|
406
407
|
type: ViewChild,
|
|
407
408
|
args: ['filterInput']
|