@dereekb/dbx-web 12.4.5 → 12.5.1

package/lib/layout/avatar/_avatar.scss

@@ -0,0 +1,102 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../style/theming';
+
+// MARK: Variables
+$icon-to-avatar-size-ratio: 0.65;
+
+// MARK: Mixin
+@mixin core() {
+  .dbx-avatar-view {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    width: var(#{theming.$dbx-avatar-size-var}, 64px);
+    height: var(#{theming.$dbx-avatar-size-var}, 64px);
+
+    .mat-icon {
+      font-size: calc(var(#{theming.$dbx-avatar-size-var}, 64px) * #{$icon-to-avatar-size-ratio});
+      width: calc(var(#{theming.$dbx-avatar-size-var}, 64px) * #{$icon-to-avatar-size-ratio});
+      height: calc(var(#{theming.$dbx-avatar-size-var}, 64px) * #{$icon-to-avatar-size-ratio});
+    }
+  }
+
+  .dbx-avatar-small .dbx-avatar-view {
+    width: var(#{theming.$dbx-avatar-small-size-var}, 32px);
+    height: var(#{theming.$dbx-avatar-small-size-var}, 32px);
+
+    .mat-icon {
+      font-size: calc(var(#{theming.$dbx-avatar-small-size-var}, 32px) * #{$icon-to-avatar-size-ratio});
+      width: calc(var(#{theming.$dbx-avatar-small-size-var}, 32px) * #{$icon-to-avatar-size-ratio});
+      height: calc(var(#{theming.$dbx-avatar-small-size-var}, 32px) * #{$icon-to-avatar-size-ratio});
+    }
+  }
+
+  .dbx-avatar-large .dbx-avatar-view {
+    width: var(#{theming.$dbx-avatar-large-size-var}, 128px);
+    height: var(#{theming.$dbx-avatar-large-size-var}, 128px);
+
+    .mat-icon {
+      font-size: calc(var(#{theming.$dbx-avatar-large-size-var}, 128px) * #{$icon-to-avatar-size-ratio});
+      width: calc(var(#{theming.$dbx-avatar-large-size-var}, 128px) * #{$icon-to-avatar-size-ratio});
+      height: calc(var(#{theming.$dbx-avatar-large-size-var}, 128px) * #{$icon-to-avatar-size-ratio});
+    }
+  }
+
+  .dbx-avatar-view-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .dbx-avatar-view-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .dbx-avatar-view-circle {
+    border-radius: 50%;
+  }
+
+  .dbx-avatar-view-square {
+    border-radius: 12px;
+  }
+}
+
+@mixin color($theme-config) {
+  $color-config: theming.m2-get-color-config($theme-config);
+  $background: map.get($color-config, 'background');
+  $primary: map.get($color-config, 'primary');
+  $accent: map.get($color-config, 'accent');
+
+  $background-color: theming.m2-get-color-from-palette($background, 'hover');
+
+  .dbx-avatar-view {
+    background-color: $background-color;
+  }
+}
+
+@mixin typography($theme-config-or-typography-config) {
+}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-avatar') {
+    $color: theming.m2-get-color-config($theme-config);
+    $density: theming.m2-get-density-config($theme-config);
+    $typography: theming.m2-get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($theme-config);
+    }
+  }
+}

package/lib/layout/avatar/avatar.component.d.ts

@@ -0,0 +1,32 @@
+import { Injector } from '@angular/core';
+import { DbxAvatarContext, DbxAvatarSize, DbxAvatarStyle } from './avatar';
+import { DbxAvatarViewService } from './avatar.service';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
+import * as i0 from "@angular/core";
+/**
+ * Component that displays an avatar based on the input context.
+ */
+export declare class DbxAvatarComponent {
+    readonly injector: Injector;
+    readonly avatarService: DbxAvatarViewService;
+    readonly context: import("@angular/core").InputSignal<DbxAvatarContext | undefined>;
+    readonly avatarSelector: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly avatarUid: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly avatarUrl: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly avatarKey: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly avatarIcon: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly avatarStyle: import("@angular/core").InputSignal<Maybe<DbxAvatarStyle>>;
+    readonly avatarSize: import("@angular/core").InputSignal<Maybe<DbxAvatarSize>>;
+    readonly contextSignal: import("@angular/core").Signal<{
+        selector: Maybe<string>;
+        uid: Maybe<string>;
+        url: Maybe<string>;
+        key: Maybe<string>;
+        icon: Maybe<string>;
+        style: DbxAvatarStyle | undefined;
+    }>;
+    readonly configSignal: import("@angular/core").Signal<DbxInjectionComponentConfig<unknown>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAvatarComponent, "dbx-avatar", never, { "context": { "alias": "context"; "required": false; "isSignal": true; }; "avatarSelector": { "alias": "avatarSelector"; "required": false; "isSignal": true; }; "avatarUid": { "alias": "avatarUid"; "required": false; "isSignal": true; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "avatarKey": { "alias": "avatarKey"; "required": false; "isSignal": true; }; "avatarIcon": { "alias": "avatarIcon"; "required": false; "isSignal": true; }; "avatarStyle": { "alias": "avatarStyle"; "required": false; "isSignal": true; }; "avatarSize": { "alias": "avatarSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/layout/avatar/avatar.d.ts

@@ -0,0 +1,54 @@
+import { InjectionToken } from '@angular/core';
+import { AuthUserIdentifier } from '@dereekb/dbx-core';
+import { Maybe, WebsiteUrlWithPrefix } from '@dereekb/util';
+/**
+ * Arbitrary string selector used to differentiate avatars.
+ */
+export type DbxAvatarSelector = string;
+/**
+ * Arbitrary key that is used to configure an avatar path.
+ */
+export type DbxAvatarKey = string;
+/**
+ * The avatar style.
+ */
+export type DbxAvatarStyle = 'circle' | 'square';
+/**
+ * The avatar size.
+ */
+export type DbxAvatarSize = 'small' | 'normal' | 'large';
+/**
+ * Provides contextual information for displaying an avatar.
+ */
+export interface DbxAvatarContext {
+    /**
+     * An arbitrary discriminator used to differentiate avatars.
+     */
+    readonly selector?: Maybe<DbxAvatarSelector>;
+    /**
+     * User identifier.
+     *
+     * May be used in some cases to display a user-specific avatar.
+     */
+    readonly uid?: Maybe<AuthUserIdentifier>;
+    /**
+     * A full website URL to an avatar image.
+     */
+    readonly url?: Maybe<WebsiteUrlWithPrefix>;
+    /**
+     * Arbitrary key that is used to configure an avatar.
+     */
+    readonly key?: Maybe<DbxAvatarKey>;
+    /**
+     * The avatar style.
+     */
+    readonly style?: DbxAvatarStyle;
+    /**
+     * Icon name to use for the fallback avatar when no image is provided.
+     */
+    readonly icon?: Maybe<string>;
+}
+/**
+ * Injection token for the avatar context data.
+ */
+export declare const DBX_AVATAR_CONTEXT_DATA_TOKEN: InjectionToken<DbxAvatarContext>;

package/lib/layout/avatar/avatar.service.d.ts

@@ -0,0 +1,66 @@
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
+import { DbxAvatarContext } from './avatar';
+import { Maybe, WebsitePath, WebsiteUrlWithPrefix } from '@dereekb/util';
+import * as i0 from "@angular/core";
+/**
+ * The injection configuration for a DbxAvatar component.
+ *
+ * Not allowed to override the injector.
+ *
+ * The final injector that will be passed will provide DBX_AVATAR_CONTEXT_DATA_TOKEN.
+ */
+export type DbxAvatarInjectionComponentConfig = Omit<DbxInjectionComponentConfig, 'injector'>;
+/**
+ * Function that returns a DbxInjectionComponentConfig for the given context.
+ *
+ * Can return null/undefined if the default avatar component should be used.
+ *
+ * @param context The current context input.
+ */
+export type DbxAvatarComponentForContextFunction = (context: DbxAvatarContext) => Maybe<DbxAvatarInjectionComponentConfig>;
+/**
+ * Configuration for a DbxAvatarViewService.
+ */
+export declare abstract class DbxAvatarViewServiceConfig {
+    /**
+     * The default avatar URL to use in DbxAvatarViewComponent if no other url is available
+     */
+    readonly defaultAvatarUrl?: Maybe<WebsitePath | WebsiteUrlWithPrefix>;
+    /**
+     * The default fallback icon to use when no avatar image is provided.
+     */
+    readonly defaultAvatarIcon?: Maybe<string>;
+    /**
+     * The default fallback icon to use when an avatar image is provided but fails to load.
+     */
+    readonly defaultAvatarErrorIcon?: Maybe<string>;
+    /**
+     * Overrides the default avatar component.
+     */
+    readonly defaultAvatarComponentConfig?: Maybe<DbxAvatarInjectionComponentConfig>;
+    /**
+     * Custom function that returns a DbxInjectionComponentConfig for the given context.
+     */
+    readonly avatarComponentForContext?: DbxAvatarComponentForContextFunction;
+}
+/**
+ * Service for registering avatars.
+ */
+export declare class DbxAvatarViewService {
+    private readonly _serviceConfig;
+    private _defaultAvatarUrl;
+    private _defaultAvatarIcon;
+    private _defaultAvatarErrorIcon;
+    private _defaultAvatarComponentConfig;
+    private _avatarComponentForContext?;
+    avatarComponentForContext(context: DbxAvatarContext): DbxAvatarInjectionComponentConfig;
+    get defaultAvatarUrl(): Maybe<string>;
+    get defaultAvatarIcon(): Maybe<string>;
+    get defaultAvatarErrorIcon(): Maybe<string>;
+    setDefaultAvatarUrl(url: Maybe<WebsitePath | WebsiteUrlWithPrefix>): void;
+    setDefaultAvatarIcon(icon: Maybe<string>): void;
+    setDefaultAvatarErrorIcon(icon: Maybe<string>): void;
+    setDefaultAvatarComponentConfig(config: DbxAvatarInjectionComponentConfig): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAvatarViewService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DbxAvatarViewService>;
+}

package/lib/layout/avatar/avatar.view.component.d.ts

@@ -0,0 +1,24 @@
+import { Maybe } from '@dereekb/util';
+import { DbxAvatarViewService } from './avatar.service';
+import { DbxAvatarContext, DbxAvatarStyle } from './avatar';
+import * as i0 from "@angular/core";
+/**
+ * Component that displays an avatar image. It has a configurable default avatar.
+ */
+export declare class DbxAvatarViewComponent {
+    readonly defaultContext: Maybe<DbxAvatarContext>;
+    readonly avatarService: DbxAvatarViewService;
+    readonly defaultAvatarUrl: Maybe<string>;
+    readonly avatarUrl: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly avatarErrorUrlSignal: import("@angular/core").WritableSignal<Maybe<string | boolean>>;
+    readonly avatarStyle: import("@angular/core").InputSignal<Maybe<DbxAvatarStyle>>;
+    readonly avatarIcon: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly avatarUrlSignal: import("@angular/core").Signal<Maybe<string>>;
+    readonly hasAvatarSignal: import("@angular/core").Signal<boolean>;
+    readonly missingAvatarSignal: import("@angular/core").Signal<boolean>;
+    readonly avatarStyleClassSignal: import("@angular/core").Signal<"circle" | "square">;
+    readonly avatarIconSignal: import("@angular/core").Signal<string>;
+    onAvatarImageError(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAvatarViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAvatarViewComponent, "dbx-avatar-view", never, { "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "avatarStyle": { "alias": "avatarStyle"; "required": false; "isSignal": true; }; "avatarIcon": { "alias": "avatarIcon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/layout/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './avatar';
+export * from './avatar.component';
+export * from './avatar.service';

package/lib/layout/content/content.pit.directive.d.ts

@@ -1,10 +1,14 @@
-import { type Maybe } from '@dereekb/util';
+import { Pixels, PixelsString, type Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
+export type DbxContentPitScrollableInput = boolean | DbxContentPitScrollableHeight;
+export type DbxContentPitScrollableHeight = Pixels | PixelsString | DbxContentPitScrollableHeightSetting;
+export type DbxContentPitScrollableHeightSetting = 'small' | 'medium' | 'large';
 /**
  * Component used to wrap content in a pit with a label.
  */
 export declare class DbxContentPitDirective {
-    readonly scrollable: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly scrollable: import("@angular/core").InputSignal<Maybe<DbxContentPitScrollableInput>>;
+    readonly scrollableHeightSignal: import("@angular/core").Signal<string | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentPitDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentPitDirective, "dbx-content-pit, [dbxContentPit]", never, { "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/layout/index.d.ts

@@ -1,3 +1,4 @@
+export * from './avatar';
 export * from './bar';
 export * from './block';
 export * from './card';

package/lib/loading/basic-loading.component.d.ts

@@ -1,5 +1,7 @@
-import { ElementRef } from '@angular/core';
+import { ElementRef, Signal } from '@angular/core';
+import { ProgressBarMode } from '@angular/material/progress-bar';
 import { ErrorInput, type Maybe } from '@dereekb/util';
+import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
 import * as i0 from "@angular/core";
 /**
  * DbxBasicLoadingComponent loading state.
@@ -9,19 +11,22 @@ export type LoadingComponentState = 'none' | 'loading' | 'content' | 'error';
  * Basic loading component.
  */
 export declare class DbxBasicLoadingComponent {
-    readonly customError: import("@angular/core").Signal<Maybe<ElementRef<any>>>;
-    readonly customLoading: import("@angular/core").Signal<Maybe<ElementRef<any>>>;
+    readonly customError: Signal<Maybe<ElementRef<any>>>;
+    readonly customLoading: Signal<Maybe<ElementRef<any>>>;
     readonly diameter: import("@angular/core").InputSignal<Maybe<number>>;
-    readonly mode: import("@angular/core").InputSignal<"determinate" | "indeterminate" | "buffer" | "query">;
+    readonly mode: import("@angular/core").InputSignal<Maybe<"determinate" | "indeterminate" | "buffer" | "query">>;
     readonly color: import("@angular/core").InputSignal<"primary" | "accent" | "warn" | "notice" | "ok" | "success" | "grey" | "background" | "disabled" | undefined>;
     readonly text: import("@angular/core").InputSignal<Maybe<string>>;
     readonly linear: import("@angular/core").InputSignal<Maybe<boolean>>;
     readonly show: import("@angular/core").InputSignal<Maybe<boolean>>;
-    readonly loading: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly loading: import("@angular/core").InputSignal<Maybe<import("@dereekb/dbx-core").DbxActionWorkOrWorkProgress>>;
     readonly error: import("@angular/core").InputSignal<Maybe<ErrorInput>>;
-    readonly stateSignal: import("@angular/core").Signal<LoadingComponentState>;
-    readonly hasNoCustomErrorSignal: import("@angular/core").Signal<boolean>;
-    readonly hasNoCustomLoadingSignal: import("@angular/core").Signal<boolean>;
+    readonly loadingProgressSignal: Signal<Maybe<number>>;
+    readonly modeSignal: Signal<ProgressBarMode | ProgressSpinnerMode>;
+    readonly isLoadingSignal: Signal<boolean>;
+    readonly stateSignal: Signal<LoadingComponentState>;
+    readonly hasNoCustomErrorSignal: Signal<boolean>;
+    readonly hasNoCustomLoadingSignal: Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxBasicLoadingComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxBasicLoadingComponent, "dbx-basic-loading", never, { "diameter": { "alias": "diameter"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "show": { "alias": "show"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[loading]", "[error]", "[errorAction]"], true, never>;
 }

package/lib/loading/index.d.ts

@@ -3,3 +3,4 @@ export * from './loading-progress.component';
 export * from './loading.action.directive';
 export * from './loading.component';
 export * from './loading.module';
+export * from './loading';

package/lib/loading/loading.component.d.ts

@@ -3,12 +3,13 @@ import { Signal } from '@angular/core';
 import { ProgressBarMode } from '@angular/material/progress-bar';
 import { LoadingContext, LoadingContextEvent, MaybeObservableOrValue } from '@dereekb/rxjs';
 import { ErrorInput, type Maybe } from '@dereekb/util';
+import { DbxLoadingIsLoadingOrProgress } from './loading';
 import * as i0 from "@angular/core";
 /**
  * State of a DbxLoadingComponent.
  */
 export interface DbxLoadingComponentState {
-    readonly loading: boolean;
+    readonly loading: DbxLoadingIsLoadingOrProgress;
     readonly error: Maybe<ErrorInput>;
 }
 /**
@@ -22,11 +23,11 @@ export declare class DbxLoadingComponent {
     readonly padding: import("@angular/core").InputSignal<Maybe<boolean>>;
     readonly show: import("@angular/core").InputSignal<Maybe<boolean>>;
     readonly text: import("@angular/core").InputSignal<Maybe<string>>;
-    readonly mode: import("@angular/core").InputSignal<ProgressBarMode>;
+    readonly mode: import("@angular/core").InputSignal<Maybe<ProgressBarMode>>;
     readonly color: import("@angular/core").InputSignal<"primary" | "accent" | "warn" | "notice" | "ok" | "success" | "grey" | "background" | "disabled" | undefined>;
     readonly diameter: import("@angular/core").InputSignal<Maybe<number>>;
     readonly linear: import("@angular/core").InputSignal<Maybe<boolean>>;
-    readonly loading: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly loading: import("@angular/core").InputSignal<Maybe<import("@dereekb/dbx-core").DbxActionWorkOrWorkProgress>>;
     readonly error: import("@angular/core").InputSignal<Maybe<ErrorInput>>;
     readonly context: import("@angular/core").InputSignal<MaybeObservableOrValue<LoadingContext<LoadingContextEvent>>>;
     readonly contextSignal: Signal<MaybeObservableOrValue<LoadingContext>>;

package/lib/loading/loading.d.ts

@@ -0,0 +1,10 @@
+import { DbxActionWorkOrWorkProgress, DbxActionWorkProgress } from '@dereekb/dbx-core';
+export type DbxLoadingProgress = DbxActionWorkProgress;
+/**
+ * Loading progress for a loading component.
+ *
+ * Can be a boolean or a number.
+ *
+ * True is treated as an indeterminate loading state.
+ */
+export type DbxLoadingIsLoadingOrProgress = DbxActionWorkOrWorkProgress;

package/lib/style/_config.scss

@@ -108,7 +108,11 @@ $default-notice-color: #f28600;
     // colors - NOTE: other colors come from Angular Material
     'success-color': $default-success-color,
     'ok-color': $default-ok-color,
-    'notice-color': $default-notice-color
+    'notice-color': $default-notice-color,
+    // avatar
+    'dbx-avatar-size': 64px,
+    'dbx-avatar-large-size': 128px,
+    'dbx-avatar-small-size': 32px
   );
 
   @if ($input-dbx-theme-layout-config != null) {
@@ -170,6 +174,18 @@ $default-notice-color: #f28600;
   @return get-dbx-layout-config-var($theme-config, 'notice-color');
 }
 
+@function get-dbx-avatar-size($theme-config) {
+  @return get-dbx-layout-config-var($theme-config, 'dbx-avatar-size');
+}
+
+@function get-dbx-avatar-large-size($theme-config) {
+  @return get-dbx-layout-config-var($theme-config, 'dbx-avatar-large-size');
+}
+
+@function get-dbx-avatar-small-size($theme-config) {
+  @return get-dbx-layout-config-var($theme-config, 'dbx-avatar-small-size');
+}
+
 // extension
 @function define-dbx-extension-config($input-dbx-theme-extension-config: null) {
   $dbx-extension-config: (

package/lib/style/_root-variables.scss

@@ -32,6 +32,10 @@
     #{theming.$dbx-page-height-additional-offset-var}: 0px;
     #{theming.$dbx-content-height-additional-offset-var}: 0px;
 
+    #{theming.$dbx-avatar-size-var}: theming.get-dbx-avatar-size($theme-config);
+    #{theming.$dbx-avatar-large-size-var}: theming.get-dbx-avatar-large-size($theme-config);
+    #{theming.$dbx-avatar-small-size-var}: theming.get-dbx-avatar-small-size($theme-config);
+
     // root height
     &.dbx-style-root {
       display: block;

package/lib/style/_variables.scss

@@ -55,6 +55,10 @@ $dbx-content-height-base-var: --dbx-content-height-base;
 $dbx-content-height-var: --dbx-content-height;
 $dbx-nested-content-height-var: --dbx-nested-content-height;
 
+$dbx-avatar-size-var: --dbx-avatar-size;
+$dbx-avatar-large-size-var: --dbx-avatar-large-size;
+$dbx-avatar-small-size-var: --dbx-avatar-small-size;
+
 // vars
 $vh100: var($vh100-var);
 
@@ -124,6 +128,10 @@ $dbx-grey-color-contrast: var($dbx-grey-color-contrast-var);
 $dbx-disabled-color-contrast: var($dbx-disabled-color-contrast-var);
 $dbx-bg-color-contrast: var($dbx-bg-color-contrast-var);
 
+$dbx-avatar-size: var($dbx-avatar-size-var);
+$dbx-avatar-large-size: var($dbx-avatar-large-size-var);
+$dbx-avatar-small-size: var($dbx-avatar-small-size-var);
+
 $dbx-theme-colors-main: (
   'primary': (
     'color': $dbx-primary-color,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "12.4.5",
+  "version": "12.5.1",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",