@elderbyte/ngx-starter 17.0.0 → 17.1.0

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

@@ -2,7 +2,8 @@ export declare class ParseUtil {
     /**
      * Tries to parse a given value to a boolean.
      * @param bool a value representing a boolean state.
-     * @return undefined, if the value is null or undefined, false, if the value is false, else true.
+     * @return undefined, if the value is null/undefined/empty
+     * @return false, if the value is false, else true.
      */
-    static parseBoolean(bool: any): boolean;
+    static parseBoolOrUndefined(bool: any): boolean | undefined;
 }

package/lib/components/badge/elder-badge/elder-badge.component.d.ts

@@ -1,14 +1,82 @@
-import { BehaviorSubject } from "rxjs";
+import { TemplateRef, ViewContainerRef } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { ThemePalette } from "@angular/material/core";
+import { ElderChipAppearance, ElderLevelColor, ElderStateColor } from '../../chips/elder-chip-label.directive';
 import * as i0 from "@angular/core";
+export declare class ElderBadgeChipDirective {
+    templateRef: TemplateRef<any>;
+    viewContainer: ViewContainerRef;
+    constructor(templateRef: TemplateRef<any>, viewContainer: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderBadgeChipDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderBadgeChipDirective, "[elderBadgeChip]", never, {}, {}, never, never, false, never>;
+}
+export declare class ElderBadgeChipAvatarDirective {
+    templateRef: TemplateRef<any>;
+    viewContainer: ViewContainerRef;
+    constructor(templateRef: TemplateRef<any>, viewContainer: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderBadgeChipAvatarDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderBadgeChipAvatarDirective, "[elderBadgeChipAvatar]", never, {}, {}, never, never, false, never>;
+}
+export interface BadgeColorSpec {
+    readonly theme?: ThemePalette;
+    readonly state?: ElderStateColor;
+    readonly level?: ElderLevelColor;
+}
+export interface BadgeAvatarSpec {
+    readonly icon?: string;
+}
+declare class ElderBadgeModel {
+    readonly value: any;
+    readonly colorSpec: BadgeColorSpec;
+    readonly avatarSpec: BadgeAvatarSpec;
+    static standard(): ElderBadgeModel;
+    constructor(value: any, colorSpec: BadgeColorSpec, avatarSpec: BadgeAvatarSpec);
+    get showAvatar(): boolean;
+}
+interface TemplateWrapper {
+    chip: TemplateRef<any>;
+    avatar: TemplateRef<any>;
+}
 export declare class ElderBadgeComponent {
-    readonly content$: BehaviorSubject<string>;
-    set content(count: string);
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    readonly badgeModel$: BehaviorSubject<ElderBadgeModel>;
     elementClass: string[];
-    setCssClass(val: string): void;
-    getColor(): ThemePalette;
-    private isContentANumberAndBiggerThanZero;
+    readonly templates$: Observable<TemplateWrapper>;
+    private readonly chipTemplate$;
+    private readonly chipAvatarTemplate$;
+    appearance: ElderChipAppearance;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
     constructor();
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set value(value: any);
+    set colorSpec(spec: BadgeColorSpec);
+    set badgeColor(color: ThemePalette);
+    set avatarSpec(spec: BadgeAvatarSpec);
+    setCssClass(val: string): void;
+    /***************************************************************************
+     *                                                                         *
+     * Templates                                                               *
+     *                                                                         *
+     **************************************************************************/
+    set chipTemplateQuery(template: TemplateRef<any>);
+    set chipTemplate(template: TemplateRef<any>);
+    get chipTemplate(): TemplateRef<any>;
+    set chipAvatarTemplateQuery(template: TemplateRef<any>);
+    set chipAvatarTemplate(template: TemplateRef<any>);
+    get chipAvatarTemplate(): TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderBadgeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderBadgeComponent, "elder-badge", never, { "content": { "alias": "content"; "required": false; }; "setCssClass": { "alias": "cssClass"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderBadgeComponent, "elder-badge", never, { "appearance": { "alias": "appearance"; "required": false; }; "value": { "alias": "value"; "required": false; }; "colorSpec": { "alias": "colorSpec"; "required": false; }; "badgeColor": { "alias": "badgeColor"; "required": false; }; "avatarSpec": { "alias": "avatarSpec"; "required": false; }; "setCssClass": { "alias": "cssClass"; "required": false; }; "chipTemplate": { "alias": "chipTemplate"; "required": false; }; "chipAvatarTemplate": { "alias": "chipAvatarTemplate"; "required": false; }; }, {}, ["chipTemplateQuery", "chipAvatarTemplateQuery"], ["*"], false, never>;
 }
+export {};

package/lib/components/badge/elder-badge.directive.d.ts

@@ -1,19 +1,50 @@
-import { ElementRef, ViewContainerRef, OnInit } from "@angular/core";
-import { DomSanitizer, SafeStyle } from "@angular/platform-browser";
-import { Subject } from "rxjs";
-import { MatBadge } from "@angular/material/badge";
+import { ViewContainerRef, OnInit, DestroyRef } from '@angular/core';
+import { BadgeAvatarSpec, BadgeColorSpec } from './elder-badge/elder-badge.component';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import { MatBadge } from '@angular/material/badge';
+import { ThemePalette } from '@angular/material/core';
 import * as i0 from "@angular/core";
 export declare class ElderBadgeDirective implements OnInit {
-    private element;
     private sanitizer;
     private viewContainerRef;
     private matBadge;
-    private readonly elderBadge$;
-    readonly unsubscribe$: Subject<void>;
-    constructor(element: ElementRef, sanitizer: DomSanitizer, viewContainerRef: ViewContainerRef, matBadge: MatBadge);
+    private destroyRef;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly value$;
+    private readonly colorSpec$;
+    private readonly avatarSpec$;
     style: SafeStyle;
-    set elderBadge(elderBadge: string);
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(sanitizer: DomSanitizer, viewContainerRef: ViewContainerRef, matBadge: MatBadge, destroyRef: DestroyRef);
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
     ngOnInit(): void;
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set badgeColor(theme: ThemePalette);
+    set badgeIcon(icon: string);
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set elderBadge(value: any);
+    set colorSpec(spec: BadgeColorSpec);
+    set avatarSpec(spec: BadgeAvatarSpec);
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderBadgeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderBadgeDirective, "[elderBadge]", never, { "elderBadge": { "alias": "elderBadge"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderBadgeDirective, "[elderBadge]", never, { "badgeColor": { "alias": "badgeColor"; "required": false; }; "badgeIcon": { "alias": "badgeIcon"; "required": false; }; "elderBadge": { "alias": "elderBadge"; "required": false; }; "colorSpec": { "alias": "colorSpec"; "required": false; }; "avatarSpec": { "alias": "avatarSpec"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -4,10 +4,12 @@ import * as i2 from "./elder-badge/elder-badge.component";
 import * as i3 from "@angular/material/chips";
 import * as i4 from "../chips/elder-chips.module";
 import * as i5 from "@angular/common";
+import * as i6 from "../../pipes/elder-pipes.module";
+import * as i7 from "@angular/material/icon";
 export * from './elder-badge/elder-badge.component';
 export * from './elder-badge.directive';
 export declare class ElderBadgeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderBadgeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderBadgeModule, [typeof i1.ElderBadgeDirective, typeof i2.ElderBadgeComponent], [typeof i3.MatChipsModule, typeof i4.ElderChipsModule, typeof i5.AsyncPipe, typeof i5.NgIf], [typeof i1.ElderBadgeDirective, typeof i2.ElderBadgeComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderBadgeModule, [typeof i1.ElderBadgeDirective, typeof i2.ElderBadgeComponent, typeof i2.ElderBadgeChipDirective, typeof i2.ElderBadgeChipAvatarDirective], [typeof i3.MatChipsModule, typeof i4.ElderChipsModule, typeof i5.AsyncPipe, typeof i5.NgIf, typeof i5.NgTemplateOutlet, typeof i6.ElderPipesModule, typeof i7.MatIconModule], [typeof i1.ElderBadgeDirective, typeof i2.ElderBadgeComponent, typeof i2.ElderBadgeChipDirective, typeof i2.ElderBadgeChipAvatarDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderBadgeModule>;
 }

package/lib/components/forms/directives/elder-triple-state-checkbox.directive.d.ts

@@ -10,6 +10,7 @@ export declare enum ElderCheckboxState {
 export declare class ElderTripleStateCheckboxDirective implements OnInit {
     private checkbox;
     private ngModel;
+    private readonly log;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -34,11 +35,12 @@ export declare class ElderTripleStateCheckboxDirective implements OnInit {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
+    private controlValueToState;
     private toggleNextState;
     private setCheckboxUnchecked;
     private setCheckboxChecked;
     private setCheckboxIndeterminate;
-    private getModelValOrFallback;
+    private readControlValue;
     private updateModelIfPresent;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderTripleStateCheckboxDirective, [null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ElderTripleStateCheckboxDirective, "mat-checkbox[elderTripleStateCheckbox]", never, {}, {}, never, never, false, never>;

package/lib/components/forms/search/domain/input/search-input-state.d.ts

@@ -67,6 +67,7 @@ export declare class SearchInputState {
      * an array, it must not be empty.
      */
     get hasValue(): boolean;
+    get hasFallbackValue(): boolean;
     /***************************************************************************
      *                                                                         *
      * Public Api                                                              *

package/lib/components/forms/search/elder-search-input.directive.d.ts

@@ -1,11 +1,11 @@
-import { AfterViewInit, OnDestroy, OnInit } from "@angular/core";
-import { ElderSearchContextDirective } from "./elder-search-context.directive";
-import { Observable } from "rxjs/internal/Observable";
-import { NgModel } from "@angular/forms";
-import { SearchInput } from "./domain/input/search-input";
-import { SearchInputState } from "./domain/input/search-input-state";
-import { LocalPagedDataSource } from "../../../common/data/datasource/local/local-paged-data-source";
-import { BooleanInput } from "@angular/cdk/coercion";
+import { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
+import { ElderSearchContextDirective } from './elder-search-context.directive';
+import { Observable } from 'rxjs/internal/Observable';
+import { NgModel } from '@angular/forms';
+import { SearchInput } from './domain/input/search-input';
+import { SearchInputState } from './domain/input/search-input-state';
+import { LocalPagedDataSource } from '../../../common/data/datasource/local/local-paged-data-source';
+import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from "@angular/core";
 /**
  * Search name adapter for input controls.

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "17.0.0",
+  "version": "17.1.0",
   "peerDependencies": {
     "@angular/core": "^17.0.0 || ^18.0.0",
     "@angular/common": "^17.0.0 || ^18.0.0",
-    "@angular/material": "^16.0.0 || ^18.0.0",
+    "@angular/material": "^17.0.0 || ^18.0.0",
     "@ngx-translate/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
     "rxjs": "^6.5.3 || ^7.5.0",
     "@elderbyte/ts-logger": "^0.1.0",

package/src/lib/components/badge/elder-badge/elder-badge.component.scss

@@ -3,15 +3,33 @@
   width: unset !important;
   max-width: unset !important;
   box-sizing: border-box;
-  font-weight: 600;
+
+  &.mat-mdc-standard-chip {
+    // height: 26px; // var(--mdc-chip-container-height); TODO token for badge height?
+    height: var(--mat-badge-text-size, 12px) + 4; // TODO token for badge height?
+    .mdc-evolution-chip__text-label {
+      font-size: var(--mat-badge-text-size, 12px);
+      font-weight: var(--mat-badge-text-weight, 600);
+    }
+  }
 
   .mdc-evolution-chip,
   .mdc-evolution-chip__cell,
   .mdc-evolution-chip__action {
     justify-content: center;
   }
+
+  &.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
 }
 
+
+
+
+
 // Small styling
 .mat-badge-small .elder-badge.mat-badge-content {
   border-radius: 16px;
@@ -78,6 +96,8 @@
 .elder-badge.mat-badge-content {
   transform: unset !important;
 }
+
+
 //
 //.elder-badge.elder-chip-label.color-primary.md3 {
 //  background-color: rgb(203 208 216) !important;