@dereekb/dbx-web 12.3.2 → 12.3.3

package/lib/action/action.confirm.directive.d.ts

@@ -25,6 +25,7 @@ export declare class DbxActionConfirmDirective<T = unknown, O = unknown> extends
     private readonly _sourceSubscription;
     ngOnInit(): void;
     ngOnDestroy(): void;
+    protected getDefaultDialogConfig(): Maybe<DbxPromptConfirmConfig>;
     protected _handleDialogResult(result: boolean): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionConfirmDirective<any, any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionConfirmDirective<any, any>, "[dbxActionConfirm]", never, { "dbxActionConfirm": { "alias": "dbxActionConfirm"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

package/lib/button/_button.scss

@@ -23,6 +23,18 @@ $big-button-height: 46px; // 33% bigger
     }
   }
 
+  .dbx-button-wrap-group {
+    > dbx-button {
+      display: inline-block;
+      padding: 0 6px 6px 0;
+    }
+
+    > button,
+    > dbx-icon-button {
+      margin: 0 6px 6px 0;
+    }
+  }
+
   dbx-button.dbx-w100,
   dbx-button.dbx-button-wide {
     // when using dbx-w100 with dbx-button, make the button full width

package/lib/button/button.component.d.ts

@@ -1,8 +1,22 @@
+import { ThemePalette } from '@angular/material/core';
 import { AbstractDbxButtonDirective } from '@dereekb/dbx-core';
 import { type Maybe } from '@dereekb/util';
 import { DbxProgressButtonConfig } from './progress/button.progress.config';
+import { type DbxThemeColor } from '../layout/style/style';
 import * as i0 from "@angular/core";
 export type DbxButtonType = 'basic' | 'raised' | 'stroked' | 'flat' | 'icon';
+/**
+ * Style details for the button
+ */
+export interface DbxButtonStyle {
+    readonly type?: DbxButtonType;
+    readonly color?: ThemePalette | DbxThemeColor;
+    readonly spinnerColor?: ThemePalette | DbxThemeColor;
+    readonly customButtonColor?: string;
+    readonly customTextColor?: string;
+    readonly customSpinnerColor?: string;
+    readonly fab?: boolean;
+}
 /**
  * @deprecated use DbxButtonType instead.
  */
@@ -17,6 +31,7 @@ export declare enum DbxButtonDisplayType {
  */
 export declare class DbxButtonComponent extends AbstractDbxButtonDirective {
     readonly type: import("@angular/core").InputSignal<Maybe<DbxButtonType>>;
+    readonly style: import("@angular/core").InputSignal<Maybe<DbxButtonStyle>>;
     readonly color: import("@angular/core").InputSignal<"primary" | "accent" | "warn" | "notice" | "ok" | "success" | "grey" | "background" | "disabled" | undefined>;
     readonly spinnerColor: import("@angular/core").InputSignal<"primary" | "accent" | "warn" | "notice" | "ok" | "success" | "grey" | "background" | "disabled" | undefined>;
     readonly customButtonColor: import("@angular/core").InputSignal<Maybe<string>>;
@@ -28,8 +43,8 @@ export declare class DbxButtonComponent extends AbstractDbxButtonDirective {
     readonly flat: import("@angular/core").InputSignalWithTransform<boolean, Maybe<boolean | "">>;
     readonly iconOnly: import("@angular/core").InputSignalWithTransform<boolean, Maybe<boolean | "">>;
     readonly fab: import("@angular/core").InputSignalWithTransform<boolean, Maybe<boolean | "">>;
-    readonly typeSignal: import("@angular/core").Signal<"flat" | "icon" | "basic" | "raised" | "stroked">;
+    readonly typeSignal: import("@angular/core").Signal<DbxButtonType>;
     readonly configSignal: import("@angular/core").Signal<DbxProgressButtonConfig>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxButtonComponent, "dbx-button", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "spinnerColor": { "alias": "spinnerColor"; "required": false; "isSignal": true; }; "customButtonColor": { "alias": "customButtonColor"; "required": false; "isSignal": true; }; "customTextColor": { "alias": "customTextColor"; "required": false; "isSignal": true; }; "customSpinnerColor": { "alias": "customSpinnerColor"; "required": false; "isSignal": true; }; "basic": { "alias": "basic"; "required": false; "isSignal": true; }; "raised": { "alias": "raised"; "required": false; "isSignal": true; }; "stroked": { "alias": "stroked"; "required": false; "isSignal": true; }; "flat": { "alias": "flat"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "fab": { "alias": "fab"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxButtonComponent, "dbx-button", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "spinnerColor": { "alias": "spinnerColor"; "required": false; "isSignal": true; }; "customButtonColor": { "alias": "customButtonColor"; "required": false; "isSignal": true; }; "customTextColor": { "alias": "customTextColor"; "required": false; "isSignal": true; }; "customSpinnerColor": { "alias": "customSpinnerColor"; "required": false; "isSignal": true; }; "basic": { "alias": "basic"; "required": false; "isSignal": true; }; "raised": { "alias": "raised"; "required": false; "isSignal": true; }; "stroked": { "alias": "stroked"; "required": false; "isSignal": true; }; "flat": { "alias": "flat"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "fab": { "alias": "fab"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/lib/interaction/dialog/_dialog.scss

@@ -16,6 +16,35 @@ $dbx-dialog-content-close-right-offset: $dbx-dialog-content-close-edge-padding;
     padding: $mat-dialog-container-padding;
   }
 
+  .dbx-dialog-content-with-header {
+    height: 100%;
+    $dbx-dialog-content-header-height: 22px;
+    $dbx-dialog-content-header-padding: 18px;
+
+    .dbx-dialog-content-close.dbx-dialog-content-close-padding {
+      padding-bottom: 12px;
+    }
+
+    .dbx-dialog-content-header {
+      height: $dbx-dialog-content-header-height;
+      margin: 0;
+    }
+
+    &.dbx-p0 .dbx-dialog-content-header {
+      padding: $dbx-dialog-content-header-padding 0;
+    }
+
+    // h3 gets padded away from edge
+    &.dbx-p0 h3.dbx-dialog-content-header {
+      padding-left: $dbx-dialog-content-header-padding/2;
+    }
+
+    // add case specifically for dbx-two-column
+    .dbx-two-column {
+      height: calc(100% - ($dbx-dialog-content-header-height + ($dbx-dialog-content-header-padding * 2)));
+    }
+  }
+
   .dbx-dialog-content.normal-dialog-content {
     min-width: unset;
   }

package/lib/interaction/prompt/prompt.confirm.directive.d.ts

@@ -11,11 +11,9 @@ export declare abstract class AbstractPromptConfirmDirective implements DbxPromp
     protected readonly matDialog: MatDialog;
     private _currentDialogRef?;
     private _currentDialogPromise?;
-    /**
-     * Config used when showDialog() is called.
-     */
-    config?: Maybe<DbxPromptConfirmConfig>;
+    protected abstract getDefaultDialogConfig(): Maybe<DbxPromptConfirmConfig>;
     showDialog(): Observable<boolean>;
+    protected showDialogWithConfig(config: Maybe<DbxPromptConfirmConfig>): Observable<boolean>;
     protected _handleDialogResult(result: boolean): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractPromptConfirmDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractPromptConfirmDirective, never, never, {}, {}, never, never, false, never>;
@@ -25,7 +23,7 @@ export declare abstract class AbstractPromptConfirmDirective implements DbxPromp
  */
 export declare class DbxPromptConfirmDirective extends AbstractPromptConfirmDirective {
     readonly dbxPromptConfirm: import("@angular/core").InputSignal<Maybe<DbxPromptConfirmConfig>>;
-    protected readonly _dbxPromptConfirmConfigEffect: import("@angular/core").EffectRef;
+    protected getDefaultDialogConfig(): Maybe<DbxPromptConfirmConfig>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPromptConfirmDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DbxPromptConfirmDirective, "[dbxPromptConfirm]", never, { "dbxPromptConfirm": { "alias": "dbxPromptConfirm"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/layout/text/_text.scss

@@ -78,6 +78,12 @@ $dbx-detail-block-content-offset: 30px;
     padding-top: 3px;
   }
 
+  .dbx-detail-block-header.dbx-detail-block-header-align {
+    .dbx-detail-block-header-label {
+      white-space: pre;
+    }
+  }
+
   .dbx-detail-block {
     display: block;
 
@@ -213,12 +219,28 @@ $dbx-detail-block-content-offset: 30px;
 
   .dbx-outlined-text {
     color: $text-color;
-    text-shadow: -1px -1px 0 $outlined-text-color, 1px -1px 0 $outlined-text-color, -1px 1px 0 $outlined-text-color, 1px 1px 0 $outlined-text-color;
+    text-shadow:
+      -1px -1px 0 $outlined-text-color,
+      1px -1px 0 $outlined-text-color,
+      -1px 1px 0 $outlined-text-color,
+      1px 1px 0 $outlined-text-color;
   }
 
   .dbx-nowrap {
     white-space: nowrap;
   }
+
+  .dbx-number-with-limit {
+    padding: 2px 6px;
+
+    .dbx-number-with-limit-divider {
+      margin: 0 3px;
+    }
+  }
+
+  .dbx-number-with-limit-rounded {
+    border-radius: 12px;
+  }
 }
 
 @mixin typography($theme-config-or-typography-config) {

package/lib/layout/text/detail.block.component.d.ts

@@ -6,6 +6,7 @@ import * as i0 from "@angular/core";
 export declare class DbxDetailBlockComponent {
     readonly icon: import("@angular/core").InputSignal<Maybe<string>>;
     readonly header: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly alignHeader: import("@angular/core").InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxDetailBlockComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDetailBlockComponent, "dbx-detail-block", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; }, {}, never, ["[header]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDetailBlockComponent, "dbx-detail-block", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "alignHeader": { "alias": "alignHeader"; "required": false; "isSignal": true; }; }, {}, never, ["[header]", "*"], true, never>;
 }

package/lib/layout/text/detail.block.header.component.d.ts

@@ -3,6 +3,7 @@ import * as i0 from "@angular/core";
 export declare class DbxDetailBlockHeaderComponent {
     readonly icon: import("@angular/core").InputSignal<Maybe<string>>;
     readonly header: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly alignHeader: import("@angular/core").InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxDetailBlockHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDetailBlockHeaderComponent, "dbx-detail-block-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDetailBlockHeaderComponent, "dbx-detail-block-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "alignHeader": { "alias": "alignHeader"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -6,4 +6,5 @@ export * from './label.block.component';
 export * from './linkify.component';
 export * from './text.chip.directive';
 export * from './text.chips.component';
+export * from './number.limit.component';
 export * from './text.module';

package/lib/layout/text/number.limit.component.d.ts

@@ -0,0 +1,40 @@
+import { Maybe } from '@dereekb/util';
+import { DbxThemeColor } from '../style/style';
+import * as i0 from "@angular/core";
+/**
+ * Configuration for the DbxNumberWithLimitComponent.
+ */
+export interface NumberWithLimit<T extends number> {
+    /**
+     * Number to display, if applicable.
+     */
+    readonly value: T;
+    /**
+     * Limit to display, if applicable.
+     */
+    readonly limit?: Maybe<T>;
+    /**
+     * Function to format the input number(s) to a string before being displayed, if applicable.
+     */
+    readonly formatNumber?: Maybe<(number: T) => string>;
+    /**
+     * Prefix to add before the value
+     */
+    readonly prefix?: Maybe<string>;
+    /**
+     * Suffix to add after the value
+     */
+    readonly suffix?: Maybe<string>;
+}
+export declare class DbxNumberWithLimitComponent<T extends number> {
+    readonly number: import("@angular/core").InputSignal<NumberWithLimit<T> | undefined>;
+    readonly rounded: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly valueSignal: import("@angular/core").Signal<string | T | undefined>;
+    readonly limitSignal: import("@angular/core").Signal<string | T | undefined>;
+    readonly hasLimitSignal: import("@angular/core").Signal<boolean>;
+    readonly prefixSignal: import("@angular/core").Signal<Maybe<string>>;
+    readonly suffixSignal: import("@angular/core").Signal<Maybe<string>>;
+    readonly colorSignal: import("@angular/core").Signal<Maybe<DbxThemeColor>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxNumberWithLimitComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxNumberWithLimitComponent<any>, "dbx-number-with-limit", never, { "number": { "alias": "number"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/layout/text/text.module.d.ts

@@ -1,14 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./address.component";
-import * as i2 from "./text.chip.directive";
-import * as i3 from "./detail.block.component";
-import * as i4 from "./detail.block.header.component";
-import * as i5 from "./label.block.component";
-import * as i6 from "./linkify.component";
-import * as i7 from "./text.chips.component";
-import * as i8 from "./icon.spacer.component";
+import * as i2 from "./number.limit.component";
+import * as i3 from "./text.chip.directive";
+import * as i4 from "./detail.block.component";
+import * as i5 from "./detail.block.header.component";
+import * as i6 from "./label.block.component";
+import * as i7 from "./linkify.component";
+import * as i8 from "./text.chips.component";
+import * as i9 from "./icon.spacer.component";
 export declare class DbxTextModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTextModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTextModule, never, [typeof i1.DbxUnitedStatesAddressComponent, typeof i2.DbxChipDirective, typeof i3.DbxDetailBlockComponent, typeof i4.DbxDetailBlockHeaderComponent, typeof i5.DbxLabelBlockComponent, typeof i6.DbxLinkifyComponent, typeof i7.DbxTextChipsComponent, typeof i8.DbxIconSpacerDirective], [typeof i1.DbxUnitedStatesAddressComponent, typeof i2.DbxChipDirective, typeof i3.DbxDetailBlockComponent, typeof i4.DbxDetailBlockHeaderComponent, typeof i5.DbxLabelBlockComponent, typeof i6.DbxLinkifyComponent, typeof i7.DbxTextChipsComponent, typeof i8.DbxIconSpacerDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTextModule, never, [typeof i1.DbxUnitedStatesAddressComponent, typeof i2.DbxNumberWithLimitComponent, typeof i3.DbxChipDirective, typeof i4.DbxDetailBlockComponent, typeof i5.DbxDetailBlockHeaderComponent, typeof i6.DbxLabelBlockComponent, typeof i7.DbxLinkifyComponent, typeof i8.DbxTextChipsComponent, typeof i9.DbxIconSpacerDirective], [typeof i1.DbxUnitedStatesAddressComponent, typeof i2.DbxNumberWithLimitComponent, typeof i3.DbxChipDirective, typeof i4.DbxDetailBlockComponent, typeof i5.DbxDetailBlockHeaderComponent, typeof i6.DbxLabelBlockComponent, typeof i7.DbxLinkifyComponent, typeof i8.DbxTextChipsComponent, typeof i9.DbxIconSpacerDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxTextModule>;
 }

package/package.json

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