@elderbyte/ngx-starter 19.2.1 → 19.2.2

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.
@@ -40,7 +40,7 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
40
40
  * *
41
41
  **************************************************************************/
42
42
  private readonly log;
43
- private _columnCount;
43
+ private _staticColumnCount$;
44
44
  private readonly sizeToColumns;
45
45
  /**
46
46
  * Load next chunk after current is done
@@ -55,7 +55,7 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
55
55
  footerVisible: boolean;
56
56
  itemHeight: number;
57
57
  readonly tileOutlined: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
58
- responsiveColumnCount: boolean;
58
+ readonly responsiveColumnCount: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
59
59
  virtualScrollViewPort: CdkVirtualScrollViewport;
60
60
  readonly tiles: Signal<readonly ElderTileComponent<any>[]>;
61
61
  availableCompositeSorts: CompositeSort[];
@@ -67,6 +67,9 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
67
67
  matPaginator: MatPaginator;
68
68
  toolbarTemplateQuery: TemplateRef<any>;
69
69
  private _toolbarTemplate;
70
+ readonly activeColumnCount$: Observable<number>;
71
+ readonly activeColumnCount: Signal<number>;
72
+ readonly rowClass: Signal<string>;
70
73
  /***************************************************************************
71
74
  * *
72
75
  * Constructor *
@@ -110,9 +113,9 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
110
113
  private buildGridRow;
111
114
  private rowId;
112
115
  private responsiveColumn;
113
- private activeColumnCount;
116
+ private initialColumnCount;
114
117
  private getTileForItem;
115
118
  static ɵfac: i0.ɵɵFactoryDeclaration<ElderGridComponent<any>, [{ optional: true; }, { optional: true; skipSelf: true; }, null]>;
116
- static ɵcmp: i0.ɵɵComponentDeclaration<ElderGridComponent<any>, "elder-grid", never, { "toolbarVisible": { "alias": "toolbarVisible"; "required": false; }; "footerVisible": { "alias": "footerVisible"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "tileOutlined": { "alias": "tileOutlined"; "required": false; "isSignal": true; }; "responsiveColumnCount": { "alias": "responsiveColumnCount"; "required": false; }; "availableSorts": { "alias": "availableSorts"; "required": false; }; "sortTranslationPrefix": { "alias": "sortTranslationPrefix"; "required": false; }; "hiddenField": { "alias": "hiddenField"; "required": false; }; "selectionVisible": { "alias": "selectionVisible"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "tileTemplate": { "alias": "tileTemplate"; "required": false; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "data": { "alias": "data"; "required": false; }; "columnCount": { "alias": "columnCount"; "required": false; }; }, {}, ["tileTemplateQuery", "toolbarTemplateQuery"], never, true, never>;
119
+ static ɵcmp: i0.ɵɵComponentDeclaration<ElderGridComponent<any>, "elder-grid", never, { "toolbarVisible": { "alias": "toolbarVisible"; "required": false; }; "footerVisible": { "alias": "footerVisible"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "tileOutlined": { "alias": "tileOutlined"; "required": false; "isSignal": true; }; "responsiveColumnCount": { "alias": "responsiveColumnCount"; "required": false; "isSignal": true; }; "availableSorts": { "alias": "availableSorts"; "required": false; }; "sortTranslationPrefix": { "alias": "sortTranslationPrefix"; "required": false; }; "hiddenField": { "alias": "hiddenField"; "required": false; }; "selectionVisible": { "alias": "selectionVisible"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "tileTemplate": { "alias": "tileTemplate"; "required": false; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "data": { "alias": "data"; "required": false; }; "columnCount": { "alias": "columnCount"; "required": false; }; }, {}, ["tileTemplateQuery", "toolbarTemplateQuery"], never, true, never>;
117
120
  }
118
121
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elderbyte/ngx-starter",
3
- "version": "19.2.1",
3
+ "version": "19.2.2",
4
4
  "peerDependencies": {
5
5
  "@angular/core": "^18.0.0 || ^19.0.0",
6
6
  "@angular/common": "^18.0.0 || ^19.0.0",
@@ -1,21 +1,51 @@
1
1
  $elder-tile-padding: 8px;
2
2
 
3
3
  .elder-grid-tile {
4
- flex: 0 1 100%;
5
- flex-grow: 1;
6
- margin: 0 $elder-tile-padding;
4
+ // margin: 0 $elder-tile-padding;
7
5
  width: 100%;
8
6
  height: 100%;
9
7
  cursor: pointer;
10
8
  }
11
9
 
12
10
  .elder-grid-tile-row {
13
- display: flex;
14
- flex-direction: row;
15
- padding: $elder-tile-padding;
11
+ display: grid;
12
+ align-items: start;
13
+ justify-items: start;
14
+
15
+ padding: $elder-tile-padding ($elder-tile-padding * 2);
16
+
16
17
  &:first-child {
17
18
  padding-top: ($elder-tile-padding * 2);
18
19
  }
20
+ column-gap: ($elder-tile-padding * 2);
21
+
22
+ &.cols-1 {
23
+ grid-template-columns: repeat(1, 1fr);
24
+ }
25
+
26
+ &.cols-2 {
27
+ grid-template-columns: repeat(2, 1fr);
28
+ }
29
+
30
+ &.cols-3 {
31
+ grid-template-columns: repeat(3, 1fr);
32
+ }
33
+
34
+ &.cols-4 {
35
+ grid-template-columns: repeat(4, 1fr);
36
+ }
37
+
38
+ &.cols-5 {
39
+ grid-template-columns: repeat(5, 1fr);
40
+ }
41
+
42
+ &.cols-6 {
43
+ grid-template-columns: repeat(6, 1fr);
44
+ }
45
+
46
+ &.cols-7 {
47
+ grid-template-columns: repeat(7, 1fr);
48
+ }
19
49
  }
20
50
 
21
51
  .elder-grid-tile-hidden {