@elderbyte/ngx-starter 19.7.0 → 19.9.0

package/lib/common/enums/elder-enum-translation.service.d.ts

@@ -30,6 +30,16 @@ export declare class ElderEnumTranslationService {
      * @param asc if true, data will be sorted in ascending order
      */
     translate(enumClass: any, translationPrefix: string, sort?: boolean, asc?: boolean): Observable<TranslatedEnumValue[]>;
+    /**
+     * Translates the given Enum class. Loads translations of given translationPrefix
+     * and creates for each enum value a TranslatedEnumValue.
+     *
+     * @param values The strings to translate.
+     * @param translationPrefix prefix to load translations
+     * @param sort if true, data will be sorted by translations
+     * @param asc if true, data will be sorted in ascending order
+     */
+    translateStrings(values: readonly string[], translationPrefix: string, sort?: boolean, asc?: boolean): Observable<TranslatedEnumValue[]>;
     /**
      * Translates the given element. Loads the translation
      * and creates a TranslatedEnumValue.
@@ -47,7 +57,16 @@ export declare class ElderEnumTranslationService {
      * @param sort if true, data will be sorted by translations
      * @param asc if true, data will be sorted in ascending order
      */
-    enumDateSource(enumClass: any, translationPrefix: string, sort?: boolean, asc?: boolean): IDataSource<TranslatedEnumValue>;
+    enumDateSource<TEnum extends object>(enumClass: TEnum, translationPrefix: string, sort?: boolean, asc?: boolean): IDataSource<TranslatedEnumValue>;
+    /**
+     * Creates a data source of translations of the given enum class.
+     *
+     * @param values Values
+     * @param translationPrefix prefix to load translations
+     * @param sort if true, data will be sorted by translations
+     * @param asc if true, data will be sorted in ascending order
+     */
+    stringArrayDateSource(values: readonly string[], translationPrefix: string, sort?: boolean, asc?: boolean): IDataSource<TranslatedEnumValue>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderEnumTranslationService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ElderEnumTranslationService>;
 }

package/lib/components/chips/elder-chip-label.directive.d.ts

@@ -1,7 +1,6 @@
 import { ThemePalette } from '@angular/material/core';
+import { ElderNamedColor } from '../colors/named/named-color';
 import * as i0 from "@angular/core";
-export declare const elderChipColorNames: readonly ["white", "grey", "blue", "turquoise", "green", "orange", "yellow", "red", "purple", "pink"];
-export type ElderNamedColor = (typeof elderChipColorNames)[number] | undefined;
 export declare const elderChipColorStates: readonly ["open", "inProgress", "completed", "warn", "error", "other"];
 export type ElderStateColor = (typeof elderChipColorStates)[number] | undefined;
 export declare const elderChipColorLevels: readonly ["low", "medium", "high", "critical"];

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

@@ -4,7 +4,7 @@ import * as i2 from "@ngx-translate/core";
 import * as i3 from "@angular/material/chips";
 import * as i4 from "@angular/cdk/a11y";
 import * as i5 from "./elder-chip-label.directive";
-export { ElderChipLabelDirective, elderChipColorStates, elderChipColorLevels, elderChipColorNames, } from './elder-chip-label.directive';
+export { ElderChipLabelDirective, elderChipColorStates, elderChipColorLevels, } from './elder-chip-label.directive';
 export declare class ElderChipsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipsModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<ElderChipsModule, never, [typeof i1.CommonModule, typeof i2.TranslateModule, typeof i3.MatChipsModule, typeof i4.A11yModule, typeof i5.ElderChipLabelDirective], [typeof i5.ElderChipLabelDirective]>;

package/lib/components/colors/named/named-color-select-value/named-color-select-value.component.d.ts

@@ -0,0 +1,9 @@
+import { ElderNamedColor } from '../named-color';
+import { TranslatedEnumValue } from '../../../../common/enums/elder-enum-translation.service';
+import * as i0 from "@angular/core";
+export declare class NamedColorSelectValueComponent {
+    readonly value: import("@angular/core").InputSignal<TranslatedEnumValue>;
+    readonly namedColor: import("@angular/core").Signal<ElderNamedColor>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NamedColorSelectValueComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NamedColorSelectValueComponent, "elder-named-color-select-value", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/colors/named/named-color-select.directive.d.ts

@@ -0,0 +1,9 @@
+import { ElderSelectComponent } from '../../select/single/elder-select/elder-select.component';
+import { ElderEnumTranslationService } from '../../../common/enums/elder-enum-translation.service';
+import * as i0 from "@angular/core";
+export declare class NamedColorSelectDirective {
+    private select;
+    constructor(select: ElderSelectComponent, enumTranslationService: ElderEnumTranslationService);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NamedColorSelectDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NamedColorSelectDirective, "[elderNamedColorSelect]", never, {}, {}, never, never, true, never>;
+}

package/lib/components/colors/named/named-color.d.ts

@@ -0,0 +1,5 @@
+export declare const elderNamedColors: readonly ["white", "grey", "blue", "turquoise", "green", "orange", "yellow", "red", "purple", "pink"];
+export type ElderNamedColor = (typeof elderNamedColors)[number] | undefined;
+export declare const elderNamedColorRoles: readonly ["primary", "darker", "on"];
+export type ElderNamedColorRole = (typeof elderNamedColorRoles)[number] | undefined;
+export declare function elderNamedColorToken(color: ElderNamedColor, role?: ElderNamedColorRole): string;

package/lib/components/colors/named/named-color.directive.d.ts

@@ -0,0 +1,14 @@
+import { ElderNamedColor, ElderNamedColorRole } from '../named/named-color';
+import { MatIcon } from '@angular/material/icon';
+import * as i0 from "@angular/core";
+export declare class NamedColorDirective {
+    readonly namedColor: import("@angular/core").InputSignal<ElderNamedColor>;
+    readonly backgroundRole: import("@angular/core").ModelSignal<ElderNamedColorRole>;
+    readonly frontRole: import("@angular/core").ModelSignal<ElderNamedColorRole>;
+    readonly hostColor: import("@angular/core").Signal<string>;
+    readonly hostBackgroundColor: import("@angular/core").Signal<string>;
+    constructor(icon: MatIcon);
+    private namedColorCssVariable;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NamedColorDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NamedColorDirective, "[elderNamedColor]", never, { "namedColor": { "alias": "elderNamedColor"; "required": true; "isSignal": true; }; "backgroundRole": { "alias": "backgroundRole"; "required": false; "isSignal": true; }; "frontRole": { "alias": "frontRole"; "required": false; "isSignal": true; }; }, { "backgroundRole": "backgroundRoleChange"; "frontRole": "frontRoleChange"; }, never, never, true, never>;
+}

package/lib/components/colors/named/public_api.d.ts

@@ -0,0 +1,4 @@
+export * from './named-color';
+export * from './named-color-select.directive';
+export * from './named-color.directive';
+export * from './named-color-select-value/named-color-select-value.component';

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

@@ -0,0 +1 @@
+export * from './named/public_api';

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

@@ -1,21 +1,17 @@
 import { AfterViewInit, OnInit, Signal, TemplateRef, TrackByFunction, ViewContainerRef } from '@angular/core';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { IDataContext, IDataContextContinuable } from '../../../../common/data/data-context/data-context';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { SelectionModel } from '../../../../common/selection/selection-model';
 import { ElderDataViewBaseComponent } from '../../base/elder-data-view-base';
 import { MatPaginator } from '@angular/material/paginator';
 import { ElderDataViewOptionsProvider } from '../../base/elder-data-view-options-provider';
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { CompositeSort } from '../../common/composite-sort/composite-sort';
 import { ElderTileComponent } from '../elder-tile/elder-tile.component';
 import { ElderContinuatorComponent } from '../../common/elder-continuator/elder-continuator.component';
+import { GridRow } from './layout/grid-row';
+import { ObservedElementDimension } from '../../../layout/responsive/observer/resize-observer.directive';
 import * as i0 from "@angular/core";
-declare class GridRow<T> {
-    readonly id: string;
-    cells: T[];
-    constructor(id: string, cells: T[]);
-}
 export declare class ElderGridTileDirective {
     templateRef: TemplateRef<any>;
     viewContainer: ViewContainerRef;
@@ -34,7 +30,6 @@ export declare class ElderGridToolbarDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<ElderGridToolbarDirective, "[elderGridToolbar]", never, {}, {}, never, never, true, never>;
 }
 export declare class ElderGridComponent<T = any> extends ElderDataViewBaseComponent<T> implements OnInit, AfterViewInit {
-    private breakpointObserver;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -42,7 +37,6 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
      **************************************************************************/
     private readonly log;
     private _staticColumnCount$;
-    private readonly sizeToColumns;
     /**
      * Load next chunk after current is done
      */
@@ -54,7 +48,10 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
     private _tileTemplate;
     readonly toolbarVisible: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     readonly footerVisible: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
+    protected readonly containerDimensions$: BehaviorSubject<ObservedElementDimension>;
     readonly itemHeight: import("@angular/core").InputSignal<number>;
+    readonly itemWidth: import("@angular/core").InputSignal<number>;
+    private readonly itemWidth$;
     readonly tileOutlined: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     readonly responsiveColumnCount: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     virtualScrollViewPort: CdkVirtualScrollViewport;
@@ -71,13 +68,13 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
     private _toolbarTemplate;
     readonly activeColumnCount$: Observable<number>;
     readonly activeColumnCount: Signal<number>;
-    readonly rowClass: Signal<string>;
+    private readonly rowLayoutBuilder;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(selectionModel: SelectionModel<any>, dataViewOptionsProvider: ElderDataViewOptionsProvider, breakpointObserver: BreakpointObserver);
+    constructor(selectionModel: SelectionModel<any>, dataViewOptionsProvider: ElderDataViewOptionsProvider);
     /***************************************************************************
      *                                                                         *
      * Lifecycle                                                               *
@@ -106,18 +103,16 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
     requestMoreDataZoned(event: unknown): void;
     isTileVisible(tile: any): boolean;
     hasItemFocus(item: T): boolean;
+    protected trackCellId(index: number, item: T): string;
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
     private scrollTop;
-    private buildGridRow;
-    private rowId;
     private responsiveColumn;
-    private initialColumnCount;
+    private calcColumnCount;
     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; "isSignal": true; }; "footerVisible": { "alias": "footerVisible"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "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; "isSignal": true; }; "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 ɵfac: i0.ɵɵFactoryDeclaration<ElderGridComponent<any>, [{ optional: true; }, { optional: true; skipSelf: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderGridComponent<any>, "elder-grid", never, { "toolbarVisible": { "alias": "toolbarVisible"; "required": false; "isSignal": true; }; "footerVisible": { "alias": "footerVisible"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "itemWidth": { "alias": "itemWidth"; "required": false; "isSignal": true; }; "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; "isSignal": true; }; "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-grid/layout/grid-row-layout-builder.d.ts

@@ -0,0 +1,24 @@
+import { GridRow } from './grid-row';
+import { ElderDataViewBaseComponent } from '../../../base/elder-data-view-base';
+export declare class GridRowLayoutBuilder<T> {
+    private readonly dataView;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dataView: ElderDataViewBaseComponent<T>);
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    buildGridRows(items: T[], columnCount: number): GridRow<T>[];
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private rowId;
+    private getId;
+}

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

@@ -0,0 +1,5 @@
+export declare class GridRow<T> {
+    readonly id: string;
+    cells: T[];
+    constructor(id: string, cells: T[]);
+}

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

@@ -6,3 +6,4 @@ export * from './pane/header/pane-subtitle.component';
 export * from './pane/header/pane-actions.component';
 export * from './basic-pane-layout/basic-pane-layout.component';
 export * from './single-pane-wrapper/single-pane-wrapper.component';
+export * from './responsive/public_api';

package/lib/components/layout/responsive/observer/resize-observer.directive.d.ts

@@ -0,0 +1,41 @@
+import { DestroyRef, ElementRef, Signal } from '@angular/core';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface ObservedElementDimension {
+    width: number;
+    height: number;
+}
+export declare class ResizeObserverDirective {
+    private readonly host;
+    private readonly destroyRef;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly resizeObserver;
+    private readonly _currentDimension$;
+    private readonly _currentDimensionChange;
+    private observing;
+    readonly enabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
+    readonly dimensionChange: Observable<ObservedElementDimension>;
+    readonly currentDimension$: Observable<ObservedElementDimension>;
+    readonly currentDimension: Signal<ObservedElementDimension>;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(host: ElementRef, destroyRef: DestroyRef);
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private observe;
+    private unobserve;
+    private onElementResize;
+    private toElementDimension;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ResizeObserverDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ResizeObserverDirective, "[elderResizeObserver]", never, { "enabled": { "alias": "enabled"; "required": false; "isSignal": true; }; }, { "dimensionChange": "dimensionChange"; "currentDimension$": "elderResizeObserver"; }, never, never, true, never>;
+}

package/lib/components/layout/responsive/public_api.d.ts

@@ -0,0 +1 @@
+export * from './observer/resize-observer.directive';

package/lib/components/public_api.d.ts

@@ -41,3 +41,4 @@ export * from './tabs/elder-tab.module';
 export * from './badge/elder-badge.module';
 export * from './page/public_api';
 export * from './layout/public_api';
+export * from './colors/public_api';

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

@@ -1,5 +1,6 @@
 import { ThemePalette } from '@angular/material/core';
-import { ElderLevelColor, ElderNamedColor, ElderStateColor } from '../../../chips/elder-chip-label.directive';
+import { ElderLevelColor, ElderStateColor } from '../../../chips/elder-chip-label.directive';
+import { ElderNamedColor } from '../../../colors/named/named-color';
 export declare class SelectChipSpecUtil {
     static readonly DefaultChipSpec: SelectChipSpec;
 }

package/package.json

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

package/src/assets/i18n/de.json

@@ -1,6 +1,23 @@
 {
   "greeting": "Hallo Welt!",
 
+  "elder": {
+    "colors": {
+      "named": {
+        "white": "Weiß",
+        "grey": "Grau",
+        "blue": "Blau",
+        "turquoise": "Türkis",
+        "green": "Grün",
+        "orange": "Orange",
+        "yellow": "Gelb",
+        "red": "Rot",
+        "purple": "Lila",
+        "pink": "Rosa"
+      }
+    }
+  },
+
   "context": {
     "reset": "Zurücksetzen",
     "noSelection": "Keine Auswahl",

package/src/assets/i18n/en.json

@@ -1,6 +1,23 @@
 {
   "greeting": "Hello World!",
 
+  "elder": {
+    "colors": {
+      "named": {
+        "white": "White",
+        "grey": "Grey",
+        "blue": "Blue",
+        "turquoise": "Turquoise",
+        "green": "Green",
+        "orange": "Orange",
+        "yellow": "Yellow",
+        "red": "Red",
+        "purple": "Purple",
+        "pink": "Pink"
+      }
+    }
+  },
+
   "context": {
     "reset": "Reset",
     "noSelection": "No Selection",

package/src/assets/i18n/fr.json

@@ -1,6 +1,23 @@
 {
   "greeting": "Salut tout le monde!",
 
+  "elder": {
+    "colors": {
+      "named": {
+        "white": "Blanc",
+        "grey": "Gris",
+        "blue": "Bleu",
+        "turquoise": "Turquoise",
+        "green": "Vert",
+        "orange": "Orange",
+        "yellow": "Jaune",
+        "red": "Rouge",
+        "purple": "Violet",
+        "pink": "Rose"
+      }
+    }
+  },
+
   "context": {
     "reset": "Réinitialiser",
     "noSelection": "Aucune Sélection",

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

@@ -12,41 +12,14 @@ $elder-tile-padding: 8px;
   align-items: start;
   justify-items: start;
   overflow: hidden;
+  --elder-grid-column-count: 1;
 
   padding: $elder-tile-padding ($elder-tile-padding * 2);
-
+  grid-template-columns: repeat(var(--elder-grid-column-count), minmax(0, 1fr));
   &:first-child {
     padding-top: ($elder-tile-padding * 2);
   }
   column-gap: ($elder-tile-padding * 2);
-
-  &.cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-
-  &.cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  &.cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  &.cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  &.cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
-  &.cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  &.cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
 }
 
 .elder-grid-tile-hidden {

package/theming/abstracts/_elder-design-tokens.scss

@@ -174,6 +174,7 @@
     // "on" (darker) variants
     @each $key, $value in config.$named-colors-darker {
       --elder-named-color-on-#{$key}: #{$value};
+      --elder-named-color-darker-#{$key}: #{$value};
     }
   }
 
@@ -182,6 +183,7 @@
     // Base colors
     @each $key, $value in config.$named-colors-darker {
       --elder-named-color-#{$key}: #{$value};
+      --elder-named-color-darker-#{$key}: #{$value};
     }
   }
 

package/theming/abstracts/_elder-scss-variables.scss

@@ -37,14 +37,14 @@ $custom-colors: (
 $named-colors: (
   'white': #e1e1e1,
   'grey': #cecbca,
-  'blue': #bddcf3,
+  'blue': #b9d7ee,
   'turquoise': #b0e6ef,
   'green': #b1ddce,
   'orange': #f4dab8,
   'yellow': #f3e7ad,
   'red': #e6b6b6,
-  'purple': #cdc7e5,
-  'pink': #eec2ea,
+  'purple': #d9d3ee,
+  'pink': #e8c2e1,
 );
 
 $named-colors-darker: ();