@dereekb/dbx-web 10.1.3 → 10.1.4

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/error/error.component.d.ts

@@ -1,20 +1,39 @@
-import { ElementRef } from '@angular/core';
+import { ChangeDetectorRef } 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 * 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;
+    private _state;
+    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;
+    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>;
 }
+export {};

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

@@ -2,18 +2,19 @@ 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.view.component";
+import * as i5 from "./error.popover.component";
+import * as i6 from "./error.details.component";
+import * as i7 from "./error.widget.component";
+import * as i8 from "./default.error.widget.component";
+import * as i9 from "@angular/common";
+import * as i10 from "../layout/text/text.module";
+import * as i11 from "@dereekb/dbx-core";
+import * as i12 from "../interaction/popover/popover.content.module";
+import * as i13 from "@angular/material/button";
+import * as i14 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.DbxErrorViewComponent, typeof i5.DbxErrorPopoverComponent, typeof i6.DbxErrorDetailsComponent, typeof i7.DbxErrorWidgetViewComponent, typeof i8.DbxErrorDefaultErrorWidgetComponent], [typeof i9.CommonModule, typeof i10.DbxTextModule, typeof i11.DbxInjectionComponentModule, typeof i12.DbxPopoverInteractionContentModule, typeof i13.MatButtonModule, typeof i14.MatIconModule], [typeof i1.DbxReadableErrorComponent, typeof i2.DbxLoadingErrorDirective, typeof i3.DbxActionErrorDirective, typeof i4.DbxErrorViewComponent, typeof i5.DbxErrorPopoverComponent, typeof i6.DbxErrorDetailsComponent, typeof i7.DbxErrorWidgetViewComponent, typeof i8.DbxErrorDefaultErrorWidgetComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxReadableErrorModule>;
 }

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

@@ -9,16 +9,37 @@ 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.
  */
 export declare class DbxErrorWidgetService {
     private _entries;
     constructor();
-    registerDefaultEntry(entry: Omit<DbxErrorWidgetEntry, 'code'>): boolean;
+    registerDefaultEntry(entry: Omit<DbxErrorWidgetEntry, 'errorComponentClass' | 'code'>): boolean;
     register(entry: DbxErrorWidgetEntry, override?: boolean): boolean;
     getErrorWidgetIdentifiers(): StringErrorCode[];
     getDefaultErrorWidgetEntry(): Maybe<DbxErrorWidgetEntry>;

package/lib/error/index.d.ts

@@ -2,6 +2,7 @@ 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';

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/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/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.4",
   "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.4",
   "peerDependencies": {
     "@angular/common": "^16.2.12",
     "@angular/core": "^16.2.12",

package/table/package.json

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