@elderbyte/ngx-starter 14.5.0 → 14.5.3

package/lib/components/select/elder-select.module.d.ts

@@ -37,7 +37,7 @@ export { ElderSelectComponent } from './single/elder-select/elder-select.compone
 export { TemplatedSelectionDialogComponent, ISelectionModelDialogOptions } from './popup/templated-selection-dialog/templated-selection-dialog.component';
 export { SelectionModelPopupDirective } from './popup/selection-model-popup.directive';
 export { ElderMultiSelectBase } from './multi/elder-multi-select-base';
-export { ElderMultiSelectChipsComponent } from './multi/elder-multi-select-chips/elder-multi-select-chips.component';
+export { ElderMultiSelectChipsComponent, ChipAvatarSpec } from './multi/elder-multi-select-chips/elder-multi-select-chips.component';
 export { ElderAutoSelectFirstDirective } from './auto/elder-auto-select-first.directive';
 export { ElderClearSelectDirective } from './single/elder-clear-select.directive';
 export declare class ElderSelectModule {

package/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.d.ts

@@ -1,4 +1,4 @@
-import { NgZone, ElementRef, TemplateRef } from '@angular/core';
+import { ElementRef, NgZone, TemplateRef } from '@angular/core';
 import { ElderMultiSelectBase } from '../elder-multi-select-base';
 import { Observable } from 'rxjs';
 import { ThemePalette } from '@angular/material/core';
@@ -12,7 +12,18 @@ declare class ChipModel<T> {
     readonly displayText: string;
     readonly color: ThemePalette;
     readonly removeable: boolean;
-    constructor(value: T, displayText: string, color: ThemePalette, removeable: boolean);
+    readonly avatarSpec: ChipAvatarSpec;
+    constructor(value: T, displayText: string, color: ThemePalette, removeable: boolean, avatarSpec: ChipAvatarSpec);
+}
+export interface ChipAvatarSpec {
+    /**
+     * Hides the avatar for this chip.
+     */
+    hide?: boolean;
+    /**
+     * Enables large styling of the avatar for this chip
+     */
+    large?: boolean;
 }
 export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TValue = any> extends ElderMultiSelectBase<TId, TEntity, TValue> {
     /***************************************************************************
@@ -20,9 +31,12 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
-    private readonly log;
     readonly selectChips$: Observable<ChipModel<TEntity>[]>;
-    private readonly chipColorResolver$;
+    defaultAvatarSpec: ChipAvatarSpec;
+    /**
+     * Allows to customize each chip avatar individually.
+     */
+    avatarSpecFn: (e: TEntity) => ChipAvatarSpec;
     selectable: boolean;
     allowRemove: boolean;
     chipTemplateQuery: TemplateRef<any>;
@@ -31,7 +45,9 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
     private _chipAvatarTemplate;
     customInputTemplateQuery: TemplateRef<any>;
     private _customInputTemplate;
+    private readonly chipColorResolver$;
     private _chipColorEnabled;
+    private readonly log;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -84,6 +100,6 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
     private buildChipFallbackModels;
     private buildChipModels;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectChipsComponent<any, any, any>, [null, null, null, null, null, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderMultiSelectChipsComponent<any, any, any>, "elder-multi-select-chips", never, { "allowRemove": "allowRemove"; "chipTemplate": "chipTemplate"; "chipAvatarTemplate": "chipAvatarTemplate"; "customInputTemplate": "customInputTemplate"; "chipColorEnabled": "chipColorEnabled"; "chipColorResolver": "chipColorResolver"; }, {}, ["chipTemplateQuery", "chipAvatarTemplateQuery", "customInputTemplateQuery"], never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderMultiSelectChipsComponent<any, any, any>, "elder-multi-select-chips", never, { "defaultAvatarSpec": "defaultAvatarSpec"; "avatarSpecFn": "avatarSpecFn"; "allowRemove": "allowRemove"; "chipTemplate": "chipTemplate"; "chipAvatarTemplate": "chipAvatarTemplate"; "customInputTemplate": "customInputTemplate"; "chipColorEnabled": "chipColorEnabled"; "chipColorResolver": "chipColorResolver"; }, {}, ["chipTemplateQuery", "chipAvatarTemplateQuery", "customInputTemplateQuery"], never, false>;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "14.5.0",
+  "version": "14.5.3",
   "peerDependencies": {
     "@angular/common": "^14.0.0",
     "@angular/core": "^14.0.0",

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

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-$elder-tile-padding: 2px;
+$elder-tile-padding: 8px;
 
 @mixin theme($theme) {
   $primary: map-get($theme, primary);
@@ -91,7 +91,15 @@ $elder-tile-padding: 2px;
   display: flex;
   flex-direction: row;
   padding: $elder-tile-padding;
-  margin: 0 ($elder-tile-padding * -1);
+  // margin: 0 (($elder-tile-padding / 2) * -1);
+
+  &:first-child {
+    padding-top: ($elder-tile-padding * 2);
+  }
+  /*
+  &:last-child {
+    padding-top: ($elder-tile-padding * 2);
+  }*/
 }
 
 .elder-grid-tile-hidden {

package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss

@@ -63,3 +63,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.mat-standard-chip .mat-chip-avatar {
+  &.chip-avatar-large {
+    width: 30px;
+    height: 30px;
+    margin-left: 1px;
+  }
+}