@elderbyte/ngx-starter 14.4.0-beta.6 → 14.4.0-beta.9

package/lib/common/utils/sort-util.d.ts

@@ -1,4 +1,10 @@
 import { Sort } from '../data/sort';
 export declare class SortUtil {
     static sortData<T>(data: T[], sorts: Sort[]): T[];
+    /**
+     * Checks if the two arrays have all content references in the exact same order.
+     * @param data
+     * @param other
+     */
+    static equalsExactRefs<T>(data: T[], other: T[]): boolean;
 }

package/lib/components/select/multi/elder-multi-select-base.d.ts

@@ -5,6 +5,8 @@ import { Observable } from 'rxjs';
 import { NgControl } from '@angular/forms';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { IElderMultiEntityValueAccessor } from '../../../common/forms/elder-multi-entity-value-accessor';
+import { Sort } from '../../../common/data/sort';
+import { ElderDialogService } from '../../dialogs/elder-dialog.service';
 import * as i0 from "@angular/core";
 /**
  * Base component implementation of elder-multi-select.
@@ -16,6 +18,7 @@ import * as i0 from "@angular/core";
  *
  */
 export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends ElderSelectBase<TId, TEntity, TValue[]> implements IElderMultiEntityValueAccessor<TEntity, TId, TValue> {
+    private readonly dialogService;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -24,6 +27,17 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
     private readonly logger;
     private readonly _entityIds$;
     private readonly _entities$;
+    /**
+     * Defines how the entities should be sorted locally.
+     * This affects how entities are displayed when more than
+     * one is selected, such as in a chip list.
+     */
+    entitiesSorts: Sort[];
+    /**
+     * If enabled, before removing selected entities
+     * the user will be prompted to confirm.
+     */
+    confirmRemoval: boolean;
     readonly entityIdsChange: Observable<TId[]>;
     readonly entitiesChange: Observable<TEntity[]>;
     /**
@@ -41,7 +55,7 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    protected constructor(zone: NgZone, hostRef: ElementRef, controlType: string, focusMonitor: FocusMonitor, ngControl?: NgControl);
+    protected constructor(zone: NgZone, hostRef: ElementRef, controlType: string, focusMonitor: FocusMonitor, dialogService: ElderDialogService, ngControl?: NgControl);
     private awaitEntitiesWithId;
     /***************************************************************************
      *                                                                         *
@@ -64,6 +78,9 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
     updateValueByEntities(entities: TEntity[]): void;
     appendEntities(newEntities: TEntity[]): void;
     appendEntity(newEntity: any): void;
+    requestRemoveEntity(toRemove: TEntity, skipConfirm?: boolean): void;
+    requestRemoveEntities(toRemove: TEntity[], skipConfirm?: boolean): void;
+    removeEntities(toRemove: TEntity[]): void;
     removeEntity(toRemove: TEntity): void;
     openSelectionPopup(event: Event): void;
     entityToValue(entity: TEntity): TValue;
@@ -93,6 +110,8 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
     private selectEntitiesByIds;
     private loadEntityByIds;
     private findInDataContext;
+    private writeEntitiesSorted;
+    private sortEntities;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectBase<any, any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderMultiSelectBase<any, any, any>, never, never, { "entities": "entities"; "entityIds": "entityIds"; }, { "entityIdsChange": "entityIdsChange"; "entitiesChange": "entitiesChange"; "entityIdsUpdated": "entityIdsUpdated"; "entitiesUpdated": "entitiesUpdated"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderMultiSelectBase<any, any, any>, never, never, { "entitiesSorts": "entitiesSorts"; "confirmRemoval": "confirmRemoval"; "entities": "entities"; "entityIds": "entityIds"; }, { "entityIdsChange": "entityIdsChange"; "entitiesChange": "entitiesChange"; "entityIdsUpdated": "entityIdsUpdated"; "entitiesUpdated": "entitiesUpdated"; }, never, never, false>;
 }

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

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 import { ThemePalette } from '@angular/material/core';
 import { NgControl } from '@angular/forms';
 import { FocusMonitor } from '@angular/cdk/a11y';
+import { ElderDialogService } from '../../../dialogs/elder-dialog.service';
 import * as i0 from "@angular/core";
 declare class ChipModel<T> {
     readonly value: T;
@@ -13,7 +14,6 @@ declare class ChipModel<T> {
     constructor(value: T, displayText: string, color: ThemePalette, removeable: boolean);
 }
 export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TValue = any> extends ElderMultiSelectBase<TId, TEntity, TValue> {
-    ngControl: NgControl;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -36,7 +36,7 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(hostRef: ElementRef, zone: NgZone, focusMonitor: FocusMonitor, ngControl: NgControl);
+    constructor(hostRef: ElementRef, zone: NgZone, focusMonitor: FocusMonitor, dialogService: ElderDialogService, ngControl: NgControl);
     /***************************************************************************
      *                                                                         *
      * Host Bindings                                                           *
@@ -70,6 +70,8 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
      *                                                                         *
      **************************************************************************/
     resolveChipValue(e1: TEntity): any;
+    onChipKeyDown(event: KeyboardEvent, toRemove: TEntity): void;
+    onClickRemoveChip(event: MouseEvent, toRemove: TEntity): void;
     focus(options?: FocusOptions): void;
     blur(): void;
     /***************************************************************************
@@ -80,7 +82,7 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
     private buildChipModelsOrFallback;
     private buildChipFallbackModels;
     private buildChipModels;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectChipsComponent<any, any, any>, [null, null, null, { optional: true; self: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectChipsComponent<any, any, any>, [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>;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "14.4.0-beta.6",
+  "version": "14.4.0-beta.9",
   "peerDependencies": {
     "@angular/common": "^14.0.1",
     "@angular/core": "^14.0.1",

package/src/lib/components/cards/elder-card/elder-card.component.scss

@@ -9,15 +9,11 @@
   $foreground: map-get($theme, foreground);
 
   .elder-card-title {
-
     color: mat.get-color-from-palette($accent, default, 1);
-
   }
 
   .elder-card-subtitle {
-
     color: mat.get-color-from-palette($primary, default, 1);
-
   }
 
   .elder-card {
@@ -26,9 +22,8 @@
   }
 
   .elder-card-flat {
-    border: 1px solid #e7e7e7;
+    border: 1px solid mat.get-color-from-palette($foreground, divider);
   }
-
 }
 
 

package/src/lib/components/select/_elder-select-base.scss

@@ -35,5 +35,97 @@
     line-height: $line-height-em !important;
     font-size: $font-size !important;
   }
+}
+
+
+@mixin _palette-styles($palette) {
+  background: mat.get-color-from-palette($palette);
+  color: mat.get-color-from-palette($palette, default-contrast);
+}
+
+@mixin _form-field-overrides {
+  .mat-form-field-underline,
+  .mat-form-field-ripple,
+  .mat-focused .mat-form-field-ripple {
+    background-color: currentColor;
+  }
+
+  .mat-form-field-label,
+  .mat-focused .mat-form-field-label,
+  .elder-select-value,
+  .elder-select-icon,
+  .mat-form-field.mat-focused .elder-select-icon {
+    color: inherit!important;
+  }
+
+  .mat-input-element {
+    caret-color: currentColor;
+  }
+}
+
+@mixin color($color-config) {
+  $foreground: map.get($color-config, foreground);
+  $background: map.get($color-config, background);
+  $primary: map.get($color-config, primary);
+  $accent: map.get($color-config, accent);
+  $warn: map.get($color-config, warn);
+
+  .elder-select-value {
+    color: mat.get-color-from-palette($foreground, text);
+  }
+
+  .elder-select-disabled .elder-select-value {
+    color: mat.get-color-from-palette($foreground, disabled-text);
+  }
+
+  .elder-select-icon {
+    color: mat.get-color-from-palette($foreground, secondary-text);
+  }
 
+  .mat-toolbar {
+    background: mat.get-color-from-palette($background, app-bar);
+    color: mat.get-color-from-palette($foreground, text);
+
+    &.mat-primary {
+      @include _palette-styles($primary);
+    }
+
+    &.mat-accent {
+      @include _palette-styles($accent);
+    }
+
+    &.mat-warn {
+      @include _palette-styles($warn);
+    }
+
+    @include _form-field-overrides;
+  }
+
+  .mat-form-field {
+    &.mat-focused {
+      &.mat-primary .elder-select-icon {
+        color: mat.get-color-from-palette($primary, text);
+      }
+
+      &.mat-accent .elder-select-icon {
+        color: mat.get-color-from-palette($accent, text);
+      }
+
+      &.mat-warn .elder-select-icon {
+        color: mat.get-color-from-palette($warn, text);
+      }
+    }
+
+    &.mat-form-field-invalid .elder-select-base {
+      .elder-select-icon {
+        color: mat.get-color-from-palette($warn, text);
+      }
+    }
+
+    &.mat-form-field-disabled .elder-select-base {
+      .elder-select-icon {
+        color: mat.get-color-from-palette($foreground, disabled-text);
+      }
+    }
+  }
 }

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

@@ -30,57 +30,6 @@
     }
 
   }
-
-
-}
-
-@mixin color($color-config) {
-  $foreground: map.get($color-config, foreground);
-  $background: map.get($color-config, background);
-  $primary: map.get($color-config, primary);
-  $accent: map.get($color-config, accent);
-  $warn: map.get($color-config, warn);
-
-  .elder-select-value {
-    color: mat.get-color-from-palette($foreground, text);
-  }
-
-  .elder-select-disabled .elder-select-value {
-    color: mat.get-color-from-palette($foreground, disabled-text);
-  }
-
-  .elder-select-icon {
-    color: mat.get-color-from-palette($foreground, secondary-text);
-  }
-
-
-  .mat-form-field {
-    &.mat-focused {
-      &.mat-primary .elder-select-icon {
-        color: mat.get-color-from-palette($primary, text);
-      }
-
-      &.mat-accent .elder-select-icon {
-        color: mat.get-color-from-palette($accent, text);
-      }
-
-      &.mat-warn .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
-    }
-
-    &.mat-form-field-invalid .elder-multi-select {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
-    }
-
-    &.mat-form-field-disabled .elder-multi-select {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($foreground, disabled-text);
-      }
-    }
-  }
 }
 
 @mixin theme($config-or-theme) {
@@ -93,7 +42,7 @@
   }
 
   @if $color != null {
-    @include color($color);
+    @include elder-select-base.color($color);
   }
 
   @if $typography != null {

package/src/lib/components/select/single/elder-select/elder-select.component.scss

@@ -29,54 +29,6 @@
   }
 }
 
-@mixin color($color-config) {
-  $foreground: map.get($color-config, foreground);
-  $background: map.get($color-config, background);
-  $primary: map.get($color-config, primary);
-  $accent: map.get($color-config, accent);
-  $warn: map.get($color-config, warn);
-
-  .elder-select-value {
-    color: mat.get-color-from-palette($foreground, text);
-  }
-
-  .elder-select-disabled .elder-select-value {
-    color: mat.get-color-from-palette($foreground, disabled-text);
-  }
-
-  .elder-select-icon {
-    color: mat.get-color-from-palette($foreground, secondary-text);
-  }
-
-  .mat-form-field {
-    &.mat-focused {
-      &.mat-primary .elder-select-icon {
-        color: mat.get-color-from-palette($primary, text);
-      }
-
-      &.mat-accent .elder-select-icon {
-        color: mat.get-color-from-palette($accent, text);
-      }
-
-      &.mat-warn .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
-    }
-
-    &.mat-form-field-invalid .elder-select {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
-    }
-
-    &.mat-form-field-disabled .elder-select {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($foreground, disabled-text);
-      }
-    }
-  }
-}
-
 @mixin theme($config-or-theme) {
   $color: mat.get-color-config($config-or-theme);
   $typography: mat.get-typography-config($config-or-theme);
@@ -87,7 +39,7 @@
   }
 
   @if $color != null {
-    @include color($color);
+    @include elder-select-base.color($color);
   }
 
   @if $typography != null {