@dereekb/dbx-web 10.1.3 → 10.1.5

package/lib/action/snackbar/action.snackbar.component.d.ts

@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
  * Component for a snackbar that contains an action.
  */
 export declare class DbxActionSnackbarComponent extends AbstractSubscriptionDirective implements OnInit, AfterViewInit, OnDestroy {
-    readonly snackbar: MatSnackBarRef<DbxActionSnackbarComponent>;
+    readonly snackbarRef: MatSnackBarRef<DbxActionSnackbarComponent>;
     readonly data: DbxActionSnackbarDisplayConfig;
     private _durationTimeout;
     private _actionRef;
@@ -24,7 +24,7 @@ export declare class DbxActionSnackbarComponent extends AbstractSubscriptionDire
     get hasAction(): boolean;
     get message(): Maybe<string>;
     get actionConfig(): Maybe<DbxActionSnackbarActionConfig>;
-    constructor(snackbar: MatSnackBarRef<DbxActionSnackbarComponent>, data: DbxActionSnackbarDisplayConfig);
+    constructor(snackbarRef: MatSnackBarRef<DbxActionSnackbarComponent>, data: DbxActionSnackbarDisplayConfig);
     ngOnInit(): void;
     ngOnDestroy(): void;
     ngAfterViewInit(): void;

package/lib/button/_button.scss

@@ -13,7 +13,6 @@ $big-button-height: 46px; // 33% bigger
   .dbx-button-big {
     .mdc-button.mat-mdc-button {
       height: $big-button-height;
-      line-height: $big-button-height;
     }
   }
 
@@ -37,6 +36,16 @@ $big-button-height: 46px; // 33% bigger
     align-items: center;
   }
 
+  .dbx-button-text-option-button {
+    .dbx-button {
+      margin-bottom: 6px;
+    }
+
+    .dbx-base-button .mdc-button__label {
+      padding: 8px 0;
+    }
+  }
+
   .dbx-grow-button {
     width: 100%;
 

package/lib/button/progress/spinner.button.component.scss

@@ -2,7 +2,6 @@
   button {
     min-height: 36px;
     height: unset; // allow height to expand
-
     outline: none;
 
     &.working {
@@ -19,6 +18,7 @@
       // icon button fixes
       min-width: unset;
       --mdc-icon-button-icon-size: unset;
+      border-radius: 50%; // sometimes the css order seems to be different, causing the button to lose its radius
     }
 
     &.fullWidth {

package/lib/error/_error.scss

@@ -2,6 +2,7 @@
 
 // MARK: Variables
 $error-padding: 8px;
+$error-message-button-margin: 12px;
 
 // MARK: Mixin
 @mixin core() {
@@ -12,7 +13,7 @@ $error-padding: 8px;
     align-items: center;
 
     .dbx-error-message {
-      margin-left: 12px;
+      margin-left: $error-message-button-margin;
     }
   }
 
@@ -20,9 +21,34 @@ $error-padding: 8px;
     overflow: hidden;
     box-sizing: border-box;
   }
+
+  .dbx-error-snackbar {
+    .mdc-snackbar__label {
+      padding-left: 8px;
+      padding-right: 0;
+    }
+
+    .dbx-error-snackbar-content-button {
+      margin-left: $error-message-button-margin;
+    }
+
+    .dbx-error-snackbar-content {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
 }
 
 @mixin color($theme-config) {
+  .mat-mdc-snack-bar-container.dbx-error-snackbar {
+    --mdc-snackbar-container-color: var(--dbx-warn-color);
+    --mdc-snackbar-supporting-text-color: var(--dbx-warn-color-contrast);
+
+    .dbx-error-snackbar-content .dbx-warn {
+      color: var(--mdc-snackbar-supporting-text-color);
+    }
+  }
 }
 
 @mixin typography($theme-config-or-typography-config) {

package/lib/error/error.component.d.ts

@@ -1,20 +1,44 @@
-import { ElementRef } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { Maybe, ErrorInput, ReadableError } from '@dereekb/util';
 import { DbxPopoverService } from '../interaction/popover/popover.service';
+import { AbstractSubscriptionDirective, DbxInjectionComponentConfig } from '@dereekb/dbx-core';
+import { DbxErrorViewButtonEvent } from './error.view.component';
+import { DbxErrorWidgetService } from './error.widget.service';
+import { NgPopoverRef } from 'ng-overlay-container';
 import * as i0 from "@angular/core";
+type DbxReadableErrorComponentViewType = 'none' | 'default' | 'custom';
+interface DbxReadableErrorComponentState {
+    readonly viewType: DbxReadableErrorComponentViewType;
+    readonly isDefaultError?: Maybe<boolean>;
+    readonly message?: Maybe<string>;
+    readonly rawError?: Maybe<ErrorInput>;
+    readonly error?: Maybe<ReadableError>;
+    readonly customView?: Maybe<DbxInjectionComponentConfig>;
+}
 /**
- * Basic error component.
+ * Root error component that displays content related to an error.
  */
-export declare class DbxReadableErrorComponent {
+export declare class DbxReadableErrorComponent extends AbstractSubscriptionDirective {
     readonly popoverService: DbxPopoverService;
-    buttonPopoverOrigin: ElementRef;
-    private _error?;
-    constructor(popoverService: DbxPopoverService);
-    get error(): Maybe<ReadableError>;
+    readonly dbxErrorWidgetService: DbxErrorWidgetService;
+    readonly cdRef: ChangeDetectorRef;
+    readonly popoverOpen: EventEmitter<NgPopoverRef<any, any>>;
+    private _state;
+    private _iconOnly;
+    private _inputError;
+    readonly state$: import("rxjs").Observable<DbxReadableErrorComponentState>;
+    constructor(popoverService: DbxPopoverService, dbxErrorWidgetService: DbxErrorWidgetService, cdRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    protected get viewType(): DbxReadableErrorComponentViewType;
+    protected get isDefaultError(): Maybe<boolean>;
+    protected get message(): Maybe<string>;
+    protected get customView(): Maybe<DbxInjectionComponentConfig>;
+    get error(): Maybe<ErrorInput>;
     set error(error: Maybe<ErrorInput>);
-    get isDefaultError(): boolean;
-    get message(): Maybe<string>;
-    openErrorPopover(): void;
+    get iconOnly(): Maybe<boolean>;
+    set iconOnly(iconOnly: Maybe<boolean>);
+    protected openErrorPopover(event: DbxErrorViewButtonEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxReadableErrorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxReadableErrorComponent, "dbx-error", never, { "error": { "alias": "error"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxReadableErrorComponent, "dbx-error", never, { "error": { "alias": "error"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; }, { "popoverOpen": "popoverOpen"; }, never, never, false, never>;
 }
+export {};

package/lib/error/error.module.d.ts

@@ -2,18 +2,21 @@ import * as i0 from "@angular/core";
 import * as i1 from "./error.component";
 import * as i2 from "./error.loading.directive";
 import * as i3 from "./error.action.directive";
-import * as i4 from "./error.popover.component";
-import * as i5 from "./error.details.component";
-import * as i6 from "./error.widget.component";
-import * as i7 from "./default.error.widget.component";
-import * as i8 from "@angular/common";
-import * as i9 from "../layout/text/text.module";
-import * as i10 from "@dereekb/dbx-core";
-import * as i11 from "../interaction/popover/popover.content.module";
-import * as i12 from "@angular/material/button";
-import * as i13 from "@angular/material/icon";
+import * as i4 from "./error.snackbar.action.directive";
+import * as i5 from "./error.view.component";
+import * as i6 from "./error.snackbar.component";
+import * as i7 from "./error.popover.component";
+import * as i8 from "./error.details.component";
+import * as i9 from "./error.widget.component";
+import * as i10 from "./default.error.widget.component";
+import * as i11 from "@angular/common";
+import * as i12 from "../layout/text/text.module";
+import * as i13 from "@dereekb/dbx-core";
+import * as i14 from "../interaction/popover/popover.content.module";
+import * as i15 from "@angular/material/button";
+import * as i16 from "@angular/material/icon";
 export declare class DbxReadableErrorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxReadableErrorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxReadableErrorModule, [typeof i1.DbxReadableErrorComponent, typeof i2.DbxLoadingErrorDirective, typeof i3.DbxActionErrorDirective, typeof i4.DbxErrorPopoverComponent, typeof i5.DbxErrorDetailsComponent, typeof i6.DbxErrorWidgetViewComponent, typeof i7.DbxErrorDefaultErrorWidgetComponent], [typeof i8.CommonModule, typeof i9.DbxTextModule, typeof i10.DbxInjectionComponentModule, typeof i11.DbxPopoverInteractionContentModule, typeof i12.MatButtonModule, typeof i13.MatIconModule], [typeof i1.DbxReadableErrorComponent, typeof i2.DbxLoadingErrorDirective, typeof i3.DbxActionErrorDirective, typeof i4.DbxErrorPopoverComponent, typeof i5.DbxErrorDetailsComponent, typeof i6.DbxErrorWidgetViewComponent, typeof i7.DbxErrorDefaultErrorWidgetComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxReadableErrorModule, [typeof i1.DbxReadableErrorComponent, typeof i2.DbxLoadingErrorDirective, typeof i3.DbxActionErrorDirective, typeof i4.DbxActionSnackbarErrorDirective, typeof i5.DbxErrorViewComponent, typeof i6.DbxErrorSnackbarComponent, typeof i7.DbxErrorPopoverComponent, typeof i8.DbxErrorDetailsComponent, typeof i9.DbxErrorWidgetViewComponent, typeof i10.DbxErrorDefaultErrorWidgetComponent], [typeof i11.CommonModule, typeof i12.DbxTextModule, typeof i13.DbxInjectionComponentModule, typeof i14.DbxPopoverInteractionContentModule, typeof i15.MatButtonModule, typeof i16.MatIconModule], [typeof i1.DbxReadableErrorComponent, typeof i2.DbxLoadingErrorDirective, typeof i3.DbxActionErrorDirective, typeof i4.DbxActionSnackbarErrorDirective, typeof i5.DbxErrorViewComponent, typeof i6.DbxErrorSnackbarComponent, typeof i7.DbxErrorPopoverComponent, typeof i8.DbxErrorDetailsComponent, typeof i9.DbxErrorWidgetViewComponent, typeof i10.DbxErrorDefaultErrorWidgetComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxReadableErrorModule>;
 }

package/lib/error/error.snackbar.action.directive.d.ts

@@ -0,0 +1,18 @@
+import { OnInit } from '@angular/core';
+import { DbxActionContextStoreSourceInstance, AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+import { DbxErrorSnackbarService } from './error.snackbar.service';
+import { Maybe, Milliseconds } from '@dereekb/util';
+import { DbxErrorSnackbarConfig } from './error.snackbar.component';
+import * as i0 from "@angular/core";
+/**
+ * Context used for displaying an error from an ActionContext a snackbar when an ReadableErrorComponent
+ */
+export declare class DbxActionSnackbarErrorDirective extends AbstractSubscriptionDirective implements OnInit {
+    readonly dbxErrorSnackbarService: DbxErrorSnackbarService;
+    readonly source: DbxActionContextStoreSourceInstance;
+    config?: Maybe<DbxErrorSnackbarConfig> | Milliseconds | '';
+    constructor(dbxErrorSnackbarService: DbxErrorSnackbarService, source: DbxActionContextStoreSourceInstance);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionSnackbarErrorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionSnackbarErrorDirective, "[dbxActionSnackbarError]", never, { "config": { "alias": "dbxActionSnackbarError"; "required": false; }; }, {}, never, never, false, never>;
+}

package/lib/error/error.snackbar.component.d.ts

@@ -0,0 +1,40 @@
+import { OnDestroy } from '@angular/core';
+import { MatSnackBar, MatSnackBarConfig, MatSnackBarRef } from '@angular/material/snack-bar';
+import { ErrorInput } from '@dereekb/util';
+import { NgPopoverRef } from 'ng-overlay-container';
+import * as i0 from "@angular/core";
+export type DbxErrorSnackbarConfig = Omit<MatSnackBarConfig<any>, 'data' | 'viewContainerRef'>;
+export interface DbxErrorSnackbarData<T extends ErrorInput = ErrorInput> {
+    /**
+     * The error being passed to the error view.
+     */
+    readonly error: T;
+    /**
+     * Duration to show the error before closing while not interacting with the error view.
+     *
+     * While the error's info view is open the snackbar will not automatically be dismissed.
+     */
+    readonly duration?: number;
+}
+/**
+ * A snackbar orientation for an error.
+ */
+export declare class DbxErrorSnackbarComponent implements OnDestroy {
+    readonly snackBarRef: MatSnackBarRef<DbxErrorSnackbarComponent>;
+    readonly data: DbxErrorSnackbarData;
+    private _allowAutoDismiss;
+    private _popoverOpen;
+    private _autoDismissTimer;
+    private _popoverSub;
+    private _popoverSyncSub;
+    private _autoDismissSub;
+    get error(): ErrorInput;
+    constructor(snackBarRef: MatSnackBarRef<DbxErrorSnackbarComponent>, data: DbxErrorSnackbarData);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static showErrorSnackbar(matSnackbar: MatSnackBar, error: ErrorInput, config?: DbxErrorSnackbarConfig): void;
+    errorPopoverOpen(popover: NgPopoverRef): void;
+    dismiss(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxErrorSnackbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxErrorSnackbarComponent, "ng-component", never, {}, {}, never, never, false, never>;
+}

package/lib/error/error.snackbar.service.d.ts

@@ -0,0 +1,17 @@
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ErrorInput, Maybe } from '@dereekb/util';
+import { DbxErrorSnackbarConfig } from './error.snackbar.component';
+import * as i0 from "@angular/core";
+/**
+ * Service used to show errors in the snackbar.
+ */
+export declare class DbxErrorSnackbarService {
+    readonly matSnackbar: MatSnackBar;
+    private _defaultConfig;
+    constructor(matSnackbar: MatSnackBar);
+    get defaultConfig(): DbxErrorSnackbarConfig;
+    setDefaultConfig(defaultConfig: DbxErrorSnackbarConfig): void;
+    showSnackbarError(error: ErrorInput, inputConfig?: Maybe<DbxErrorSnackbarConfig>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxErrorSnackbarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DbxErrorSnackbarService>;
+}

package/lib/error/error.view.component.d.ts

@@ -0,0 +1,24 @@
+import { ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { Maybe } from '@dereekb/util';
+import * as i0 from "@angular/core";
+export interface DbxErrorViewButtonEvent {
+    readonly origin: ElementRef;
+}
+/**
+ * The basic error view.
+ */
+export declare class DbxErrorViewComponent implements OnDestroy {
+    icon: string;
+    message?: Maybe<string>;
+    /**
+     * Whether or not the error button is disabled.
+     */
+    buttonDisabled?: Maybe<boolean>;
+    readonly buttonClick: EventEmitter<DbxErrorViewButtonEvent>;
+    buttonOrigin: ElementRef;
+    constructor();
+    ngOnDestroy(): void;
+    clickError(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxErrorViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxErrorViewComponent, "dbx-error-view", never, { "icon": { "alias": "icon"; "required": false; }; "message": { "alias": "message"; "required": false; }; "buttonDisabled": { "alias": "buttonDisabled"; "required": false; }; }, { "buttonClick": "buttonClick"; }, never, never, false, never>;
+}

package/lib/error/error.widget.service.d.ts

@@ -2,6 +2,7 @@ import { Type } from '@angular/core';
 import { Maybe, StringErrorCode } from '@dereekb/util';
 import * as i0 from "@angular/core";
 export declare const DEFAULT_ERROR_WIDGET_CODE = "DEFAULT_ERROR_WIDGET";
+export declare const UNKNOWN_ERROR_WIDGET_CODE = "UNKNOWN_ERROR_WIDGET";
 export interface DbxErrorWidgetEntry {
     /**
      * Error code to respond to.
@@ -9,19 +10,49 @@ export interface DbxErrorWidgetEntry {
     readonly code: StringErrorCode;
     /**
      * Error widget component class to use.
+     *
+     * @deprecated use `widgetComponentClass` instead.
      */
-    readonly componentClass: Type<unknown>;
+    readonly componentClass?: Maybe<Type<unknown>>;
+    /**
+     * In-line error widget component class to use.
+     *
+     * This changes how it appears in dbx-error.
+     *
+     * If not provided, dbx-error will display the default output.
+     */
+    readonly errorComponentClass?: Maybe<Type<unknown>>;
+    /**
+     * Custom popup error widget component class to use.
+     *
+     * This changes how it appears in the dbx-error-widget-view.
+     *
+     * If not provided, the widget will display the default entry.
+     */
+    readonly widgetComponentClass?: Maybe<Type<unknown>>;
 }
+export type DbxErrorWidgetEntryWithPopupComponentClass = Omit<DbxErrorWidgetEntry, 'popupComponentClass'> & {
+    popupComponentClass: Type<unknown>;
+};
 /**
  * Service used to register error widgets.
+ *
+ * It has two default widgets:
+ *
+ * - default: used in cases where an error has been registered by its error code
+ * - unknown: used in cases where an error has an error code that has not been registered
+ *
+ * By default the DbxErrorDefaultErrorWidgetComponent is registered to both the default and unknown error entries.
  */
 export declare class DbxErrorWidgetService {
     private _entries;
     constructor();
-    registerDefaultEntry(entry: Omit<DbxErrorWidgetEntry, 'code'>): boolean;
+    registerDefaultEntry(entry: Omit<DbxErrorWidgetEntry, 'errorComponentClass' | 'code'>): boolean;
+    registerUnknownEntry(entry: Omit<DbxErrorWidgetEntry, 'errorComponentClass' | 'code'>): boolean;
     register(entry: DbxErrorWidgetEntry, override?: boolean): boolean;
     getErrorWidgetIdentifiers(): StringErrorCode[];
     getDefaultErrorWidgetEntry(): Maybe<DbxErrorWidgetEntry>;
+    getUnknownErrorWidgetEntry(): Maybe<DbxErrorWidgetEntry>;
     getErrorWidgetEntry(code: StringErrorCode): Maybe<DbxErrorWidgetEntry>;
     getErrorWidgetEntries(codes: Iterable<StringErrorCode>): DbxErrorWidgetEntry[];
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxErrorWidgetService, never>;

package/lib/error/index.d.ts

@@ -2,10 +2,14 @@ export * from './default.error.widget.component';
 export * from './error.action.directive';
 export * from './error.api';
 export * from './error.component';
+export * from './error.view.component';
 export * from './error.details.component';
 export * from './error.loading.directive';
 export * from './error.module';
 export * from './error.popover.component';
+export * from './error.snackbar.action.directive';
+export * from './error.snackbar.component';
+export * from './error.snackbar.service';
 export * from './error.widget.component';
 export * from './error.widget.directive';
 export * from './error.widget.service';

package/lib/extension/download/text/download.text.component.d.ts

@@ -1,12 +1,12 @@
 import { ElementRef } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { AbstractSubscriptionDirective, HandleActionFunction } from '@dereekb/dbx-core';
-import { LoadingState } from '@dereekb/rxjs';
+import { WorkUsingObservable, LoadingState } from '@dereekb/rxjs';
 import { Maybe } from '@dereekb/util';
 import { Observable } from 'rxjs';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { DownloadTextContent } from './download.text';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 /**
  * DbxStructureDirective used specifically on the body of the app.
@@ -34,7 +34,7 @@ export declare class DbxDownloadTextViewComponent extends AbstractSubscriptionDi
     set contentState(contentState: Maybe<LoadingState<DownloadTextContent>>);
     set downloadButton(downloadButton: ElementRef);
     ngOnDestroy(): void;
-    readonly handleCopyToClipboard: HandleActionFunction;
+    readonly handleCopyToClipboard: WorkUsingObservable;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxDownloadTextViewComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxDownloadTextViewComponent, "dbx-download-text-view", never, { "loadingText": { "alias": "loadingText"; "required": false; }; "linear": { "alias": "linear"; "required": false; }; "showTitle": { "alias": "showTitle"; "required": false; }; "showPreview": { "alias": "showPreview"; "required": false; }; "content": { "alias": "content"; "required": false; }; "contentState": { "alias": "contentState"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/interaction/dialog/_dialog.scss

@@ -16,6 +16,10 @@ $dbx-dialog-content-close-right-offset: $dbx-dialog-content-close-edge-padding;
     padding: $mat-dialog-container-padding;
   }
 
+  .dbx-dialog-content.normal-dialog-content {
+    min-width: unset;
+  }
+
   .mdc-dialog__container .dbx-dialog-content {
     &.wide-dialog-content {
       width: $max-dialog-width;

package/lib/layout/column/_column.scss

@@ -98,7 +98,7 @@ $two-columns-right-padding-size: 6px;
 
     > .dbx-two-column-head {
       .back-button {
-        margin: 0 $two-columns-right-padding-size;
+        margin-right: $two-columns-right-padding-size;
       }
 
       .right-spacer {

package/lib/layout/column/two/two.column.right.component.d.ts

@@ -11,6 +11,7 @@ import * as i0 from "@angular/core";
  */
 export declare class DbxTwoColumnRightComponent implements AfterViewInit, OnDestroy {
     private readonly twoColumnsContextStore;
+    full: boolean;
     header?: Maybe<string>;
     block?: boolean;
     private _showBack;
@@ -27,5 +28,5 @@ export declare class DbxTwoColumnRightComponent implements AfterViewInit, OnDest
     set minRightWidth(minRightWidth: Maybe<number | ''>);
     backClicked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnRightComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnRightComponent, "dbx-two-column-right", never, { "header": { "alias": "header"; "required": false; }; "block": { "alias": "block"; "required": false; }; "showBack": { "alias": "showBack"; "required": false; }; "minRightWidth": { "alias": "minRightWidth"; "required": false; }; }, {}, never, ["[nav]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnRightComponent, "dbx-two-column-right", never, { "full": { "alias": "full"; "required": false; }; "header": { "alias": "header"; "required": false; }; "block": { "alias": "block"; "required": false; }; "showBack": { "alias": "showBack"; "required": false; }; "minRightWidth": { "alias": "minRightWidth"; "required": false; }; }, {}, never, ["[nav]", "*"], false, never>;
 }

package/lib/layout/content/_content.scss

@@ -178,11 +178,6 @@ $scroll-content-bottom-padding: 42px;
   $accent-color: theming.get-color-from-palette($accent, 500);
   $warn-color: theming.get-color-from-palette($warn, 500);
 
-  .dbx-background {
-    color: $content-color;
-    background: $content-background;
-  }
-
   .dbx-content-pit {
     background: $content-border-background;
   }

package/lib/layout/list/_list.scss

@@ -72,9 +72,8 @@ $list-item-padded-min-height: 42px;
       position: sticky;
       top: 0;
 
-      .dbx-list-two-line-item {
-        padding: 2px 0;
-        margin-right: 2px;
+      .dbx-list-two-line-item .dbx-list-two-line-item-with-icon {
+        padding: 2px 0; // override the padding when there is an icon
       }
     }
   }

package/lib/layout/list/list.view.value.group.title.d.ts

@@ -42,6 +42,10 @@ export interface DbxListTitleGroupTitleDelegate<T, O extends PrimativeKey, D ext
      * DbxListTitleGroupHeaderComponent is injected by default.
      */
     readonly headerComponentClass?: Type<unknown>;
+    /**
+     * Custom footer component class to inject, if applicable.
+     */
+    readonly footerComponentClass?: Type<unknown>;
     /**
      * (Optional) CSS classes to apply to the group.
      */

package/lib/layout/section/_section.scss

@@ -56,6 +56,8 @@ $header-left-reserved-space-small-screen: 120px;
   }
 
   .dbx-section-header-padded {
+    padding: 0 !important;
+
     .dbx-section-header {
       padding: 0 4px;
     }

package/lib/layout/style/_style.scss

@@ -165,11 +165,8 @@
     color: theming.$dbx-disabled-color;
   }
 
+  .dbx-background,  // COMPAT: Remove dbx-background later
   .dbx-bg {
-    color: theming.$dbx-disabled-color;
-  }
-
-  .dbx-background {
     background: theming.$dbx-bg-color-contrast;
     color: theming.$dbx-bg-color;
   }

package/lib/layout/text/_text.scss

@@ -29,11 +29,25 @@ $dbx-detail-block-content-offset: 30px;
     text-align: center;
   }
 
+  .dbx-u {
+    text-decoration: underline;
+  }
+
+  .text-left {
+    text-align: left;
+  }
+
   .dbx-json,
   .prettyjson {
     white-space: pre-wrap !important;
   }
 
+  .dbx-iframe {
+    height: 100%;
+    width: 100%;
+    border: none;
+  }
+
   .dbx-label-block {
     display: block;
     padding: 3px 0;
@@ -45,7 +59,7 @@ $dbx-detail-block-content-offset: 30px;
 
     .mat-icon {
       padding-right: 6px;
-      flex-shrink: 0; // do not shrink
+      flex-shrink: 0; // do not allow shrinking
     }
 
     .dbx-anchor-a {
@@ -130,6 +144,12 @@ $dbx-detail-block-content-offset: 30px;
     min-height: 20px;
   }
 
+  .dbx-chip-small-text .dbx-chip,
+  .dbx-chip-small-text.dbx-chip,
+  .dbx-chip-small-text.dbx-chip.dbx-chip-small {
+    font-size: 10px;
+  }
+
   .dbx-chip.dbx-chip-block {
     border-radius: 0;
   }

package/mapbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web/mapbox",
-  "version": "10.1.3",
+  "version": "10.1.5",
   "module": "fesm2022/dereekb-dbx-web-mapbox.mjs",
   "typings": "index.d.ts",
   "exports": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "10.1.3",
+  "version": "10.1.5",
   "peerDependencies": {
     "@angular/common": "^16.2.12",
     "@angular/core": "^16.2.12",
@@ -10,7 +10,6 @@
     "@dereekb/dbx-core": "*",
     "@dereekb/util": "*",
     "rxjs": "^7.5.0",
-    "ms": "^3.0.0-canary.1",
     "@uirouter/core": "^6.0.8",
     "@ngrx/store": "^16.0.0",
     "@ngrx/effects": "^16.0.0",

package/table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web/table",
-  "version": "10.1.3",
+  "version": "10.1.5",
   "module": "fesm2022/dereekb-dbx-web-table.mjs",
   "typings": "index.d.ts",
   "exports": {