@elderbyte/ngx-starter 19.2.0 → 19.2.2

package/lib/common/selection/selection-model.d.ts

@@ -1,5 +1,4 @@
 import { Observable } from 'rxjs';
-import { Signal } from '@angular/core';
 export type KeyGetterFn<T> = (item: T) => any;
 /**
  * Provides a model of a selection.
@@ -17,7 +16,6 @@ export declare class SelectionModel<T> {
     private _multiple;
     private readonly _selectionMap;
     private readonly _selection;
-    private readonly _selectionSig;
     private _keyGetterFn;
     private _selectableEvaluatorFn;
     static readonly FallbackKeyGetterFn: (a: any) => any;
@@ -42,7 +40,6 @@ export declare class SelectionModel<T> {
      **************************************************************************/
     get changed(): Observable<T[]>;
     get selection(): Observable<T[]>;
-    get selectionSig(): Signal<T[]>;
     get selectionSnapshot(): T[];
     set selectableEvaluatorFn(fn: (item: T) => boolean);
     set keyGetterFn(fn: KeyGetterFn<T>);

package/lib/components/data-view/grid/elder-grid/elder-grid.component.d.ts

@@ -40,7 +40,7 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
      *                                                                         *
      **************************************************************************/
     private readonly log;
-    private _columnCount;
+    private _staticColumnCount$;
     private readonly sizeToColumns;
     /**
      * Load next chunk after current is done
@@ -55,7 +55,7 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
     footerVisible: boolean;
     itemHeight: number;
     readonly tileOutlined: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
-    responsiveColumnCount: boolean;
+    readonly responsiveColumnCount: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     virtualScrollViewPort: CdkVirtualScrollViewport;
     readonly tiles: Signal<readonly ElderTileComponent<any>[]>;
     availableCompositeSorts: CompositeSort[];
@@ -67,6 +67,9 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
     matPaginator: MatPaginator;
     toolbarTemplateQuery: TemplateRef<any>;
     private _toolbarTemplate;
+    readonly activeColumnCount$: Observable<number>;
+    readonly activeColumnCount: Signal<number>;
+    readonly rowClass: Signal<string>;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -110,9 +113,9 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
     private buildGridRow;
     private rowId;
     private responsiveColumn;
-    private activeColumnCount;
+    private initialColumnCount;
     private getTileForItem;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderGridComponent<any>, [{ optional: true; }, { optional: true; skipSelf: true; }, null]>;
-    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>;
+    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>;
 }
 export {};

package/lib/components/data-view/grid/elder-tile/elder-tile.component.d.ts

@@ -14,6 +14,7 @@ export declare class ElderTileComponent<T = any> {
     readonly value: import("@angular/core").InputSignal<T>;
     readonly selectionEnabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
     readonly selectionModel: import("@angular/core").InputSignal<SelectionModel<T>>;
+    readonly selection: Signal<T[]>;
     readonly interactionMode: import("@angular/core").InputSignal<ElderDataViewInteractionMode>;
     readonly outlined: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
     private readonly logger;

package/lib/components/data-view/master-detail/elder-master-activation.directive.d.ts

@@ -1,31 +1,32 @@
-import { OnDestroy, OnInit } from '@angular/core';
+import { DestroyRef, OnInit } from '@angular/core';
 import { ElderMasterDetailService } from './elder-master-detail.service';
 import { ElderToastService } from '../../toasts/elder-toast.service';
-import { ElderTableActivationDirective } from '../table/activation/elder-table-activation.directive';
+import { DataViewActivationController } from '../common/activation/data-view-activation-controller.service';
+import { ActivationModel } from '../common/activation/model/activation-model';
 import * as i0 from "@angular/core";
-export declare class ElderMasterActivationDirective<T> implements OnInit, OnDestroy {
+export declare class ElderMasterActivationDirective<T> implements OnInit {
+    private destroyRef;
     private toastService;
-    private tableActivation;
+    private activationModel;
+    private activationController;
     private masterDetailService;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
-    private readonly destroy$;
     private readonly log;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(toastService: ElderToastService, tableActivation: ElderTableActivationDirective<T>, masterDetailService: ElderMasterDetailService<T>);
+    constructor(destroyRef: DestroyRef, toastService: ElderToastService, activationModel: ActivationModel<T>, activationController: DataViewActivationController<T>, masterDetailService: ElderMasterDetailService<T>);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
-    ngOnDestroy(): void;
     ngOnInit(): void;
     /***************************************************************************
      *                                                                         *
@@ -33,6 +34,7 @@ export declare class ElderMasterActivationDirective<T> implements OnInit, OnDest
      *                                                                         *
      **************************************************************************/
     private onModeChange;
+    private activationOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderMasterActivationDirective<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ElderMasterActivationDirective<any>, "[elderMasterActivation]", never, {}, {}, never, never, true, never>;
 }

package/lib/components/data-view/master-detail/elder-master-detail.module.d.ts

@@ -16,7 +16,7 @@ import * as i14 from "../../forms/directives/elder-forms-directives.module";
 import * as i15 from "../../navigation/toolbar/elder-toolbar.module";
 import * as i16 from "@angular/material/toolbar";
 import * as i17 from "@angular/material/slide-toggle";
-import * as i18 from "./elder-master-detail.component";
+import * as i18 from "./master-detail/elder-master-detail.component";
 import * as i19 from "./elder-detail.directive";
 import * as i20 from "./elder-master.directive";
 import * as i21 from "./elder-master-activation.directive";
@@ -28,7 +28,7 @@ export * from './elder-master-detail-mode';
 export * from './elder-master-detail.service';
 export * from './master-detail-activation-event';
 export * from './elder-detail-dialog/elder-detail-dialog.component';
-export * from './elder-master-detail.component';
+export * from './master-detail/elder-master-detail.component';
 export declare class ElderMasterDetailModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderMasterDetailModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<ElderMasterDetailModule, never, [typeof i1.CommonModule, typeof i2.MatIconModule, typeof i3.MatTableModule, typeof i4.ElderTableModule, typeof i5.ElderMeasuresModule, typeof i6.MatSortModule, typeof i7.FormsModule, typeof i8.MatInputModule, typeof i9.ElderCardModule, typeof i10.MatButtonModule, typeof i11.MatBadgeModule, typeof i12.MatTooltipModule, typeof i13.ElderSelectModule, typeof i14.ElderFormsDirectivesModule, typeof i15.ElderToolbarModule, typeof i16.MatToolbarModule, typeof i17.MatSlideToggleModule, typeof i18.ElderMasterDetailComponent, typeof i19.ElderDetailDirective, typeof i20.ElderMasterDirective, typeof i21.ElderMasterActivationDirective, typeof i22.ElderDetailDialogComponent], [typeof i18.ElderMasterDetailComponent, typeof i19.ElderDetailDirective, typeof i20.ElderMasterDirective, typeof i21.ElderMasterActivationDirective, typeof i22.ElderDetailDialogComponent]>;

package/lib/components/data-view/master-detail/{elder-master-detail.component.d.ts → master-detail/elder-master-detail.component.d.ts}

@@ -1,11 +1,10 @@
-import { OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
-import { ElderMasterDetailService } from './elder-master-detail.service';
-import { BehaviorSubject } from 'rxjs';
+import { Signal, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ElderMasterDetailService } from '../elder-master-detail.service';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { ElderDetailDialogComponent } from './elder-detail-dialog/elder-detail-dialog.component';
-import { ElderMasterDetailMode } from './elder-master-detail-mode';
+import { ElderDetailDialogComponent } from '../elder-detail-dialog/elder-detail-dialog.component';
+import { ElderMasterDetailMode } from '../elder-master-detail-mode';
 import * as i0 from "@angular/core";
-export declare class ElderMasterDetailComponent<T> implements OnDestroy {
+export declare class ElderMasterDetailComponent<T> {
     private masterDetailService;
     dialog: MatDialog;
     private viewContainerRef;
@@ -15,24 +14,17 @@ export declare class ElderMasterDetailComponent<T> implements OnDestroy {
      *                                                                         *
      **************************************************************************/
     private readonly log;
-    private readonly destroy$;
     master: TemplateRef<any>;
     detail: TemplateRef<any>;
-    readonly mode$: BehaviorSubject<ElderMasterDetailMode>;
     dialogRef: MatDialogRef<ElderDetailDialogComponent>;
-    currentActive$: BehaviorSubject<T>;
+    readonly currentActive: Signal<T>;
+    readonly modeSig: Signal<ElderMasterDetailMode>;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
     constructor(masterDetailService: ElderMasterDetailService<T>, dialog: MatDialog, viewContainerRef: ViewContainerRef);
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngOnDestroy(): void;
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -46,6 +38,7 @@ export declare class ElderMasterDetailComponent<T> implements OnDestroy {
      *                                                                         *
      **************************************************************************/
     private openDetailDialog;
+    private onCurrentItemChange;
     private closeDialog;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderMasterDetailComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ElderMasterDetailComponent<any>, "elder-master-detail", never, { "mode": { "alias": "mode"; "required": false; }; }, {}, ["master", "detail"], never, true, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "19.2.0",
+  "version": "19.2.2",
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "@angular/common": "^18.0.0 || ^19.0.0",

package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss

@@ -1,21 +1,51 @@
 $elder-tile-padding: 8px;
 
 .elder-grid-tile {
-  flex: 0 1 100%;
-  flex-grow: 1;
-  margin: 0 $elder-tile-padding;
+  // margin: 0 $elder-tile-padding;
   width: 100%;
   height: 100%;
   cursor: pointer;
 }
 
 .elder-grid-tile-row {
-  display: flex;
-  flex-direction: row;
-  padding: $elder-tile-padding;
+  display: grid;
+  align-items: start;
+  justify-items: start;
+
+  padding: $elder-tile-padding ($elder-tile-padding * 2);
+
   &:first-child {
     padding-top: ($elder-tile-padding * 2);
   }
+  column-gap: ($elder-tile-padding * 2);
+
+  &.cols-1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  &.cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  &.cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  &.cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  &.cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  &.cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  &.cols-7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
 }
 
 .elder-grid-tile-hidden {