@elderbyte/ngx-starter 16.0.3 → 16.1.0

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

@@ -40,7 +40,7 @@ export { TemplatedSelectionDialogComponent, ISelectionModelDialogOptions } from
 export { SelectionModelPopupDirective } from './popup/selection-model-popup.directive';
 export { ElderSelectionPopupTriggerAdapterDirective } from './popup/selection-model-popup-trigger-adapter.directive';
 export { ElderMultiSelectBase } from './multi/elder-multi-select-base';
-export { ElderMultiSelectChipsComponent, ChipAvatarSpec } from './multi/elder-multi-select-chips/elder-multi-select-chips.component';
+export { ElderMultiSelectChipsComponent } 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,31 +1,22 @@
 import { ElementRef, NgZone, TemplateRef } from '@angular/core';
 import { ElderMultiSelectBase } from '../elder-multi-select-base';
 import { Observable } from 'rxjs';
-import { ThemePalette } from '@angular/material/core';
 import { NgControl } from '@angular/forms';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ElderDialogService } from '../../../dialogs/elder-dialog.service';
 import { TranslateService } from '@ngx-translate/core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { ChipAvatarSpec, ChipColorSpec, SelectChipSpec, TrailingSpec } from './select-chip-spec';
 import * as i0 from "@angular/core";
 declare class ChipModel<T> {
     readonly value: T;
     readonly displayText: string;
-    readonly color: ThemePalette;
-    readonly removeable: boolean;
+    readonly colorSpec: ChipColorSpec;
+    readonly removable: 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;
+    readonly trailingSpec: TrailingSpec;
+    constructor(value: T, displayText: string, colorSpec: ChipColorSpec, removable: boolean, avatarSpec: ChipAvatarSpec, trailingSpec: TrailingSpec);
 }
 interface TemplateWrapper {
     chip: TemplateRef<any>;
@@ -39,11 +30,12 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
      *                                                                         *
      **************************************************************************/
     readonly selectChips$: Observable<ChipModel<TEntity>[]>;
-    defaultAvatarSpec: ChipAvatarSpec;
+    defaultChipSpec: SelectChipSpec;
     /**
-     * Allows to customize each chip avatar individually.
+     * Allows to customize each chip individually (Color, Removable, Avatar).
+     *
      */
-    avatarSpecFn: (e: TEntity) => ChipAvatarSpec;
+    chipSpecFn: (e: TEntity) => SelectChipSpec;
     selectable: boolean;
     allowRemove: boolean;
     allowSorting: boolean;
@@ -54,8 +46,6 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
     private readonly chipTemplate$;
     private readonly chipAvatarTemplate$;
     private readonly customInputTemplate$;
-    private readonly chipColorResolver$;
-    private _chipColorEnabled;
     private readonly log;
     /***************************************************************************
      *                                                                         *
@@ -87,12 +77,6 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
     set customInputTemplateQuery(template: TemplateRef<any>);
     set customInputTemplate(template: TemplateRef<any>);
     get customInputTemplate(): TemplateRef<any>;
-    set chipColorEnabled(enabled: boolean);
-    get chipColorEnabled(): boolean;
-    /**
-     * A function which returns the color of a given label object.
-     */
-    set chipColorResolver(fn: (o1: any) => ThemePalette);
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
@@ -112,7 +96,8 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
     private buildChipModelsOrFallback;
     private buildChipFallbackModels;
     private buildChipModels;
+    private buildChipBySpec;
     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, { "defaultAvatarSpec": { "alias": "defaultAvatarSpec"; "required": false; }; "avatarSpecFn": { "alias": "avatarSpecFn"; "required": false; }; "allowRemove": { "alias": "allowRemove"; "required": false; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "chipTemplate": { "alias": "chipTemplate"; "required": false; }; "chipAvatarTemplate": { "alias": "chipAvatarTemplate"; "required": false; }; "customInputTemplate": { "alias": "customInputTemplate"; "required": false; }; "chipColorEnabled": { "alias": "chipColorEnabled"; "required": false; }; "chipColorResolver": { "alias": "chipColorResolver"; "required": false; }; }, {}, ["_customChipInput", "chipTemplateQuery", "chipAvatarTemplateQuery", "customInputTemplateQuery"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderMultiSelectChipsComponent<any, any, any>, "elder-multi-select-chips", never, { "defaultChipSpec": { "alias": "defaultChipSpec"; "required": false; }; "chipSpecFn": { "alias": "chipSpecFn"; "required": false; }; "allowRemove": { "alias": "allowRemove"; "required": false; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "chipTemplate": { "alias": "chipTemplate"; "required": false; }; "chipAvatarTemplate": { "alias": "chipAvatarTemplate"; "required": false; }; "customInputTemplate": { "alias": "customInputTemplate"; "required": false; }; }, {}, ["_customChipInput", "chipTemplateQuery", "chipAvatarTemplateQuery", "customInputTemplateQuery"], never, false, never>;
 }
 export {};

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

@@ -0,0 +1,27 @@
+import { ThemePalette } from '@angular/material/core';
+import { ElderLevelColor, ElderStateColor } from '../../../chips/elder-chip-label.directive';
+export interface SelectChipSpec {
+    colorSpec?: ChipColorSpec;
+    removable?: boolean;
+    avatarSpec?: ChipAvatarSpec;
+    trailingSpec?: TrailingSpec;
+}
+export interface ChipColorSpec {
+    themeColor?: ThemePalette;
+    stateColor?: ElderStateColor;
+    levelColor?: ElderLevelColor;
+}
+export interface ChipAvatarSpec {
+    /**
+     * Hides the avatar for this chip.
+     */
+    hide?: boolean;
+    /**
+     * Enables large styling of the avatar for this chip
+     */
+    large?: boolean;
+}
+export interface TrailingSpec {
+    icon?: string;
+    iconFontSet?: string;
+}

package/lib/components/select/multi/public_api.d.ts

@@ -0,0 +1,3 @@
+export * from './elder-multi-select-base';
+export * from './elder-multi-select-form-field';
+export * from './elder-multi-select-chips/select-chip-spec';

package/lib/components/select/public_api.d.ts

@@ -1,5 +1,4 @@
 export * from './elder-select.module';
 export * from './elder-select-base';
 export * from './single/elder-select-form-field';
-export * from './multi/elder-multi-select-base';
-export * from './multi/elder-multi-select-form-field';
+export * from './multi/public_api';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "16.0.3",
+  "version": "16.1.0",
   "peerDependencies": {
     "@angular/core": "^16.0.0 || ^17.0.0",
     "@angular/common": "^16.0.0 || ^17.0.0",

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

@@ -73,6 +73,11 @@
   white-space: nowrap;
 }
 
+.elder-trailing-icon {
+  color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
+  opacity: 0.54;
+}
+
 .cdk-drag-preview {
   box-sizing: border-box;
   // border-radius: 4px;