@elderbyte/ngx-starter 19.11.1 → 19.13.0

package/lib/components/data-view/table/table-navigation/table-navigation.component.d.ts

@@ -0,0 +1,47 @@
+import { AfterViewInit, OnDestroy, Signal } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { ElderContinuatorComponent, ElderTableComponent } from '../../public_api';
+import { PageRequest } from '../../../../common/data/public_api';
+import * as i0 from "@angular/core";
+export declare class TableNavigationComponent implements AfterViewInit, OnDestroy {
+    protected readonly elderTable: ElderTableComponent;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    protected readonly matPaginator: Signal<MatPaginator>;
+    private readonly matPaginator$;
+    protected readonly elderContinuator: Signal<ElderContinuatorComponent>;
+    private readonly elderContinuator$;
+    private readonly destroy$;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(elderTable: ElderTableComponent);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get isContinuable(): boolean;
+    get isActivePaged(): boolean;
+    get total(): Signal<string>;
+    get viewData(): Signal<any[]>;
+    get canLoadMore(): Signal<boolean>;
+    get pageSizeOptions(): Signal<number[]>;
+    get currentChunkSize(): Signal<number>;
+    get currentPage(): Signal<PageRequest>;
+    loadMore(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableNavigationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableNavigationComponent, "elder-table-navigation", never, {}, {}, never, never, true, never>;
+}

package/lib/components/public_api.d.ts

@@ -38,7 +38,7 @@ export * from './iframes/elder-iframe.module';
 export * from './errors/elder-error.module';
 export * from './auditing/elder-audit.module';
 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';
+export * from './badge/elder-badge.directive';

package/lib/components/select/filter/elder-chip-filter-style-resolver.d.ts

@@ -14,6 +14,6 @@ export default class ElderChipFilterStyleResolver {
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    resolveChipSpec(filterEntity: IncludeExcludeState): SelectChipSpec;
-    resolveAvatarIcon(filterEntity: IncludeExcludeState): string;
+    resolveChipSpec(filterEntity: IncludeExcludeState<any>): SelectChipSpec;
+    resolveAvatarIcon(filterEntity: IncludeExcludeState<any>): string;
 }

package/lib/components/select/filter/elder-chips-include-exclude.directive.d.ts

@@ -6,9 +6,9 @@ import * as i0 from "@angular/core";
  * Adds the ability to toggle select chips of a ElderMultiSelectChipsComponent by
  * binding it to a IncludeExcludeSelectionModel.
  */
-export declare class ElderChipsIncludeExcludeDirective<T = any> {
-    readonly elderMultiSelectChips: ElderMultiSelectChipsComponent;
-    readonly selectionModel: IncludeExcludeSelectionModel;
+export declare class ElderChipsIncludeExcludeDirective<T = any, TId = string> {
+    readonly elderMultiSelectChips: ElderMultiSelectChipsComponent<TId, T>;
+    readonly selectionModel: IncludeExcludeSelectionModel<TId>;
     readonly vcr: ViewContainerRef;
     private readonly destroyRef;
     /***************************************************************************
@@ -23,7 +23,7 @@ export declare class ElderChipsIncludeExcludeDirective<T = any> {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(elderMultiSelectChips: ElderMultiSelectChipsComponent, selectionModel: IncludeExcludeSelectionModel, vcr: ViewContainerRef, destroyRef: DestroyRef);
+    constructor(elderMultiSelectChips: ElderMultiSelectChipsComponent<TId, T>, selectionModel: IncludeExcludeSelectionModel<TId>, vcr: ViewContainerRef, destroyRef: DestroyRef);
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -38,6 +38,7 @@ export declare class ElderChipsIncludeExcludeDirective<T = any> {
     private setupFilterChips;
     private createFilterChipTemplate;
     private setupElderMultiSelectChipsListeners;
+    private applyOptionChipsChangeEvent;
     private resolveChipSpec;
     private resolveAvatarIcon;
     private handleChipClick;
@@ -45,6 +46,6 @@ export declare class ElderChipsIncludeExcludeDirective<T = any> {
     private ensureChipsNoChanges;
     private findFilterEntityByEntity;
     private findFilterEntityById;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipsIncludeExcludeDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderChipsIncludeExcludeDirective<any>, "[elderChipsIncludeExclude]", ["elderChipsIncludeExclude"], { "cycleStrategy": { "alias": "cycleStrategy"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipsIncludeExcludeDirective<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderChipsIncludeExcludeDirective<any, any>, "[elderChipsIncludeExclude]", ["elderChipsIncludeExclude"], { "cycleStrategy": { "alias": "cycleStrategy"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/components/select/filter/include-exclude-selection-model.d.ts

@@ -1,8 +1,8 @@
 import { Observable } from 'rxjs';
-export declare class IncludeExcludeState {
-    readonly id: string;
+export declare class IncludeExcludeState<TId = string> {
+    readonly id: TId;
     mode: IncludeExcludeValue;
-    constructor(id: string, mode: IncludeExcludeValue);
+    constructor(id: TId, mode: IncludeExcludeValue);
 }
 export declare enum IncludeExcludeValue {
     NEUTRAL = "NEUTRAL",
@@ -10,7 +10,7 @@ export declare enum IncludeExcludeValue {
     EXCLUDE = "EXCLUDE"
 }
 export type IncludeExcludeCycleStrategy = 'TOGGLE' | 'FULL_CYCLE';
-export declare class IncludeExcludeSelectionModel {
+export declare class IncludeExcludeSelectionModel<TId = string> {
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -19,7 +19,7 @@ export declare class IncludeExcludeSelectionModel {
     private readonly log;
     private _strategy;
     private _defaultInitialValue;
-    private readonly stateById$;
+    private readonly _stateById$;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -31,8 +31,8 @@ export declare class IncludeExcludeSelectionModel {
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    get selection(): IncludeExcludeState[];
-    get selection$(): Observable<IncludeExcludeState[]>;
+    get selection(): IncludeExcludeState<TId>[];
+    get selection$(): Observable<IncludeExcludeState<TId>[]>;
     get strategy(): IncludeExcludeCycleStrategy;
     set strategy(strategy: IncludeExcludeCycleStrategy);
     get defaultInitialValue(): IncludeExcludeValue;
@@ -42,16 +42,18 @@ export declare class IncludeExcludeSelectionModel {
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    findIncluded(): string[];
-    findExcluded(): string[];
-    cycleExisting(id: string): IncludeExcludeState | null;
-    initTo(ids: string[], initialValueOverride?: IncludeExcludeValue): void;
+    findIncluded(): TId[];
+    findExcluded(): TId[];
+    cycleExisting(id: TId): IncludeExcludeState<TId> | null;
+    initTo(ids: TId[], initialValueOverride?: IncludeExcludeValue): void;
+    resetAllTo(initialValueOverride?: IncludeExcludeValue): void;
+    resetTo(ids: TId[], resetValue: IncludeExcludeValue | undefined): void;
     clear(): void;
-    replaceSelection(newStates: IncludeExcludeState[]): void;
-    updateState(id: string, mode: IncludeExcludeValue): IncludeExcludeState;
-    updateStates(newStates: IncludeExcludeState[]): void;
-    isInMode(id: string, mode: IncludeExcludeValue): boolean;
-    findStateById(searchedId: string): IncludeExcludeState | null;
+    replaceSelection(newStates: IncludeExcludeState<TId>[]): void;
+    updateState(id: TId, mode: IncludeExcludeValue): IncludeExcludeState<TId>;
+    updateStates(newStates: IncludeExcludeState<TId>[]): void;
+    isInMode(id: TId, mode: IncludeExcludeValue): boolean;
+    findStateById(searchedId: TId): IncludeExcludeState<TId> | null;
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
@@ -61,4 +63,5 @@ export declare class IncludeExcludeSelectionModel {
     private nextValueToggle;
     private nextValueFullCycle;
     private toStateMap;
+    private replaceStateMap;
 }

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

@@ -3,6 +3,7 @@ import { IDataContext } from '../../../common/data/data-context/data-context';
 import { Observable } from 'rxjs';
 import { IElderMultiEntityValueAccessor } from '../../../common/forms/elder-multi-entity-value-accessor';
 import { Sort } from '../../../common/data/sort';
+import { EntitiesChangeEvent } from '../../../common/forms/entities-change-event';
 import * as i0 from "@angular/core";
 /**
  * Base component implementation of elder-multi-select.
@@ -22,6 +23,7 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
     private readonly logger;
     private readonly _entityIds$;
     private readonly _entities$;
+    private readonly dialogService;
     /**
      * Defines how the entities should be sorted locally.
      * This affects how entities are displayed when more than
@@ -33,26 +35,29 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
      * the user will be prompted to confirm.
      */
     confirmRemoval: boolean;
-    readonly entityIdsChange: Observable<TId[]>;
-    readonly entitiesChange: Observable<TEntity[]>;
+    readonly entitiesChangeEvent: Observable<EntitiesChangeEvent<TId, TEntity>>;
     /**
-     * Similar to entity-id change, but emits only when the user
-     * has updated the value.
+     * @deprecated Switch to entitiesChangeEvent
      */
-    readonly entityIdsUpdated: Observable<TId[]>;
+    readonly entitiesChange: Observable<TEntity[]>;
     /**
-     * Similar to entity change, but emits only when the user
-     * has updated the value.
+     * @deprecated Switch to entitiesChangeEvent (filter by userInitiated)
      */
     readonly entitiesUpdated: Observable<TEntity[]>;
-    private readonly dialogService;
+    /**
+     * @deprecated Switch to entitiesChangeEvent
+     */
+    readonly entityIdsChange: Observable<TId[]>;
+    /**
+     * @deprecated Switch to entitiesChangeEvent (filter by userInitiated)
+     */
+    readonly entityIdsUpdated: Observable<TId[]>;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
     protected constructor(controlType: string);
-    private awaitEntitiesWithId;
     /***************************************************************************
      *                                                                         *
      * Host Bindings                                                           *
@@ -107,6 +112,10 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
      * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
+    private buildEntitiesChangeEvent;
+    private awaitEntitiesWithIdToMap;
+    private toEntityByIdMap;
+    private containsAllIds;
     private isAlreadyPresent;
     private entityIdsFromValues;
     private entityIdFromValue;
@@ -123,5 +132,5 @@ export declare abstract class ElderMultiSelectBase<TId, TEntity, TValue> extends
     private writeEntitiesSorted;
     private sortEntities;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectBase<any, any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderMultiSelectBase<any, any, any>, never, never, { "entitiesSorts": { "alias": "entitiesSorts"; "required": false; }; "confirmRemoval": { "alias": "confirmRemoval"; "required": false; }; "entities": { "alias": "entities"; "required": false; }; "entityIds": { "alias": "entityIds"; "required": false; }; }, { "entityIdsChange": "entityIdsChange"; "entitiesChange": "entitiesChange"; "entityIdsUpdated": "entityIdsUpdated"; "entitiesUpdated": "entitiesUpdated"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderMultiSelectBase<any, any, any>, never, never, { "entitiesSorts": { "alias": "entitiesSorts"; "required": false; }; "confirmRemoval": { "alias": "confirmRemoval"; "required": false; }; "entities": { "alias": "entities"; "required": false; }; "entityIds": { "alias": "entityIds"; "required": false; }; }, { "entitiesChangeEvent": "entitiesChangeEvent"; "entitiesChange": "entitiesChange"; "entitiesUpdated": "entitiesUpdated"; "entityIdsChange": "entityIdsChange"; "entityIdsUpdated": "entityIdsUpdated"; }, never, never, true, never>;
 }

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

@@ -0,0 +1,42 @@
+import { DestroyRef, OnInit } from '@angular/core';
+import { ElderMultiSelectChipsComponent } from './elder-multi-select-chips.component';
+import { IncludeExcludeSelectionModel } from '../../filter/include-exclude-selection-model';
+import * as i0 from "@angular/core";
+export declare class ElderMultiSelectChipsOptionsDirective<TId, TEntity> implements OnInit {
+    private multiSelect;
+    private inclExclModel;
+    destroyRef: DestroyRef;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly log;
+    readonly maxOptions: import("@angular/core").InputSignal<number>;
+    private readonly inControlOfOptions;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(multiSelect: ElderMultiSelectChipsComponent<TId, TEntity>, inclExclModel: IncludeExcludeSelectionModel<TEntity> | undefined, destroyRef: DestroyRef);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private get dataContext$();
+    private autoReloadOnDataChangeEvents;
+    private subscribeToEntities;
+    private applyAllOptions;
+    private isOptionInUse;
+    private startDataContextIfNeeded;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectChipsOptionsDirective<any, any>, [null, { optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderMultiSelectChipsOptionsDirective<any, any>, "elder-multi-select-chips[elderShowOptions]", never, { "maxOptions": { "alias": "maxOptions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

@@ -33,7 +33,8 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
      */
     chipSpecFn: (e: TEntity) => SelectChipSpec;
     selectable: boolean;
-    allowRemove: boolean;
+    readonly allowRemoveInput: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
+    readonly allowRemove: import("@angular/core").WritableSignal<boolean>;
     allowSorting: boolean;
     stacked: boolean;
     maxDisplayCount: number;
@@ -89,6 +90,6 @@ export declare class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TV
     private reduceDisplayedChips;
     private buildIndicatorChip;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderMultiSelectChipsComponent<any, any, any>, 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; }; "maxDisplayCount": { "alias": "maxDisplayCount"; "required": false; }; "chipTemplate": { "alias": "chipTemplate"; "required": false; }; "chipAvatarTemplate": { "alias": "chipAvatarTemplate"; "required": false; }; "customInputTemplate": { "alias": "customInputTemplate"; "required": false; }; }, {}, ["_customChipInput", "chipTemplateQuery", "chipAvatarTemplateQuery", "customInputTemplateQuery"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderMultiSelectChipsComponent<any, any, any>, "elder-multi-select-chips", never, { "defaultChipSpec": { "alias": "defaultChipSpec"; "required": false; }; "chipSpecFn": { "alias": "chipSpecFn"; "required": false; }; "allowRemoveInput": { "alias": "allowRemove"; "required": false; "isSignal": true; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "maxDisplayCount": { "alias": "maxDisplayCount"; "required": false; }; "chipTemplate": { "alias": "chipTemplate"; "required": false; }; "chipAvatarTemplate": { "alias": "chipAvatarTemplate"; "required": false; }; "customInputTemplate": { "alias": "customInputTemplate"; "required": false; }; }, {}, ["_customChipInput", "chipTemplateQuery", "chipAvatarTemplateQuery", "customInputTemplateQuery"], never, true, never>;
 }
 export {};

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

@@ -1,4 +1,5 @@
 export * from './elder-multi-select-base';
 export * from './elder-multi-select-form-field';
 export * from './elder-multi-select-chips/select-chip-spec';
+export * from './elder-multi-select-chips/elder-multi-select-chips-options.directive';
 export * from './elder-multi-select-chip-options/select-option-chip-spec';

package/lib/components/time/elder-local-date-input/elder-local-date-input.component.d.ts

@@ -5,8 +5,10 @@ import { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepi
 import { IsoDateStr } from '../../../common/time/date-util';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { ElderFormFieldControlBase } from '../../../common/forms/elder-form-field-control-base.directive';
+import { SmartLocalDateParserService } from '../smart-local-date-parser.service';
 import * as i0 from "@angular/core";
 export declare class ElderLocalDateInputComponent extends ElderFormFieldControlBase<LocalDate> {
+    private readonly localDateParser;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -36,7 +38,7 @@ export declare class ElderLocalDateInputComponent extends ElderFormFieldControlB
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor();
+    constructor(localDateParser: SmartLocalDateParserService);
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *

package/lib/components/time/elder-toggle-text-input.directive.d.ts

@@ -0,0 +1,34 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ElderToggleTextInputDirective {
+    private inputRef;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private originalInputType;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(inputRef: ElementRef<HTMLInputElement>);
+    /***************************************************************************
+     *                                                                         *
+     * Host Listener                                                           *
+     *                                                                         *
+     **************************************************************************/
+    onDoubleClick(event: MouseEvent): void;
+    onFocusOut(event: FocusEvent): void;
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private setInputType;
+    private rememberOriginalInputType;
+    private restoreOriginalInputType;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderToggleTextInputDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderToggleTextInputDirective, "input[elderToggleTextInput]", never, {}, {}, never, never, true, never>;
+}

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

@@ -5,3 +5,4 @@ export * from './duration/iso-duration-str';
 export * from './period/period-bucket';
 export * from './period/period-format';
 export * from './elder-time.module';
+export * from './elder-toggle-text-input.directive';

package/lib/components/time/smart-local-date-parser.service.d.ts

@@ -0,0 +1,9 @@
+import { LocalDate } from '@js-joda/core';
+import * as i0 from "@angular/core";
+export declare class SmartLocalDateParserService {
+    private readonly formatters;
+    constructor();
+    tryParse(dateString: string): LocalDate | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SmartLocalDateParserService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SmartLocalDateParserService>;
+}

package/package.json

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

package/src/assets/i18n/de.json

@@ -92,7 +92,7 @@
 
   "paginator": {
     "itemCountSeparator": "von",
-    "itemsPerPage": "Elemente pro Seite",
+    "itemsPerPage": "",
     "firstPage": "Erste Seite",
     "lastPage": "Letzte Seite",
     "nextPage": "Nächste Seite",

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

@@ -2,11 +2,11 @@
 @use '@angular/material' as mat;
 @use './elder-scss-variables' as config;
 @use './elder-m3-color-tokens' as elder-m3-color-tokens;
+@use '../components/mat-badge-theme' as mat-badge-theme;
 
 @mixin elder-design-tokens() {
-  @include elder-badge-sizing();
-
   @include elder-m3-color-tokens.m3-color-tokens();
+  @include mat-badge-theme.badge-sizing-design-tokens();
 
   &.elder-light-theme,
   &.elder-dark-theme {
@@ -231,27 +231,3 @@
     --mat-toolbar-standard-height: var(--mat-toolbar-mobile-height);
   }
 }
-
-@mixin elder-badge-sizing() {
-  & {
-    // Use legacy MAT 2 badge sizing
-    --mat-badge-container-size: unset;
-    --mat-badge-small-size-container-size: unset;
-    --mat-badge-large-size-container-size: unset;
-    --mat-badge-legacy-container-size: 22px;
-    --mat-badge-legacy-small-size-container-size: 16px;
-    --mat-badge-legacy-large-size-container-size: 28px;
-    --mat-badge-container-offset: -11px 0;
-    --mat-badge-small-size-container-offset: -8px 0;
-    --mat-badge-large-size-container-offset: -14px 0;
-    --mat-badge-container-overlap-offset: -11px;
-    --mat-badge-small-size-container-overlap-offset: -8px;
-    --mat-badge-large-size-container-overlap-offset: -14px;
-    --mat-badge-container-padding: 0;
-    --mat-badge-small-size-container-padding: 0;
-    --mat-badge-large-size-container-padding: 0;
-    --mat-badge-line-height: var(--mat-badge-legacy-container-size);
-    --mat-badge-small-size-line-height: var(--mat-badge-legacy-small-size-container-size);
-    --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-container-size);
-  }
-}

package/theming/abstracts/_elder-starter-theme.scss

@@ -17,7 +17,7 @@
 @use '../components/elder-toolbar-theme' as elder-toolbar;
 @use '../components/elder-table-theme' as elder-table;
 @use '../components/elder-scrollbar-theme' as elder-scrollbar;
-
+@use '../components/mat-badge-theme' as mat-badge;
 // Create a theme.
 @mixin starter-theme($theme) {
   $theme: elder-set-defaults-fn.validate-and-set-defaults($theme);
@@ -48,4 +48,5 @@
   @include elder-toolbar.theme($theme);
   @include elder-table.theme($theme);
   @include elder-scrollbar.theme();
+  @include mat-badge.theme();
 }

package/theming/base/_elder-fixes-base.scss

@@ -43,19 +43,9 @@
   }
 
   /******************************
-    Material Badge Index
+    ETC
     *******************************/
 
-  .mat-badge-content {
-    z-index: 1;
-  }
-  // fix elder badge borders
-  elder-badge {
-    .mat-mdc-standard-chip .mat-mdc-chip-action::before {
-      border: none;
-    }
-  }
-
   .mat-mdc-tab-group {
     background-color: var(--md-sys-color-surface-container);
   }
@@ -70,24 +60,10 @@
     fill: currentColor !important;
   }
 
-  /******************************
-  ETC
-  *******************************/
-
   .mat-mdc-tab-group {
     background-color: transparent !important;
   }
 
-  // badge positioning
-  .mat-badge-above .mat-badge-content {
-    bottom: 82%;
-  }
-
-  // bring back the badge warn color that was removed in m3
-  .mat-badge-warn {
-    --mat-badge-background-color: var(--md-sys-color-error);
-  }
-
   // disable button color grayed out
   .mat-mdc-icon-button[disabled],
   .mat-mdc-icon-button.mat-mdc-button-disabled {

package/theming/components/_elder-table-theme.scss

@@ -43,7 +43,7 @@
       color: gray;
     }
 
-    .elder-table-footer {
+    .elder-table-navigation-bar {
       height: var(--elder-data-element-footer-height);
     }
 

package/theming/components/_mat-badge-theme.scss

@@ -0,0 +1,53 @@
+@mixin theme() {
+  .mat-badge-content {
+    z-index: 1;
+  }
+
+  // badge positioning
+  .mat-badge-above .mat-badge-content {
+    bottom: 82%;
+  }
+
+  // bring back the badge warn color that was removed in m3
+  .mat-badge-warn {
+    --mat-badge-background-color: var(--md-sys-color-error);
+  }
+
+  // dynamic badge size for long text with elder-badge directive
+  .elder-badge {
+    .mat-badge-content {
+      width: unset;
+      min-width: 22px;
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+    &.mat-badge-large .mat-badge-content {
+      min-width: 28px;
+    }
+  }
+}
+
+@mixin badge-sizing-design-tokens() {
+  & {
+    // mat badge design tokens for theme root
+    // Use legacy MAT 2 badge sizing
+    --mat-badge-container-size: unset;
+    --mat-badge-small-size-container-size: unset;
+    --mat-badge-large-size-container-size: unset;
+    --mat-badge-legacy-container-size: 22px;
+    --mat-badge-legacy-small-size-container-size: 16px;
+    --mat-badge-legacy-large-size-container-size: 28px;
+    --mat-badge-container-offset: -11px 0;
+    --mat-badge-small-size-container-offset: -8px 0;
+    --mat-badge-large-size-container-offset: -14px 0;
+    --mat-badge-container-overlap-offset: -11px;
+    --mat-badge-small-size-container-overlap-offset: -8px;
+    --mat-badge-large-size-container-overlap-offset: -14px;
+    --mat-badge-container-padding: 0;
+    --mat-badge-small-size-container-padding: 0;
+    --mat-badge-large-size-container-padding: 0;
+    --mat-badge-line-height: var(--mat-badge-legacy-container-size);
+    --mat-badge-small-size-line-height: var(--mat-badge-legacy-small-size-container-size);
+    --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-container-size);
+  }
+}