@dereekb/dbx-web 0.0.1 → 1.0.0

package/index.d.ts

@@ -1,2 +1 @@
 export * from './lib';
-export * from './lib/dbx-web.module';

package/lib/action/_action.scss

@@ -0,0 +1,40 @@
+@use '../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-action') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}
+
+// TODO:
+.dbx-action-snackbar {
+  display: flex;
+  align-items: center;
+
+  &.dbx-action-snackbar-success {
+    // background: $success-color;
+  }
+
+  &.dbx-action-snackbar-error {
+    // background: red;
+  }
+}

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

@@ -1,7 +1,7 @@
 import { OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { AbstractPromptConfirmDirective } from '../interaction/prompt/prompt.confirm.directive';
-import { DbNgxPromptConfirmConfig } from '../interaction/prompt/prompt.confirm.component';
+import { DbxPromptConfirmConfig } from '../interaction/prompt/prompt.confirm.component';
 import { ActionContextStoreSourceInstance } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 /**
@@ -10,14 +10,14 @@ import * as i0 from "@angular/core";
  * This only works to pass a ready value or reject through, not to work with a button.
  * For button usage, use an appPromptConfirmButton directive.
  */
-export declare class DbNgxActionConfirmDirective<T, O> extends AbstractPromptConfirmDirective implements OnInit, OnDestroy {
+export declare class DbxActionConfirmDirective<T, O> extends AbstractPromptConfirmDirective implements OnInit, OnDestroy {
     readonly source: ActionContextStoreSourceInstance<T, O>;
-    config?: DbNgxPromptConfirmConfig;
+    config?: DbxPromptConfirmConfig;
     private _sourceSubscription;
     constructor(source: ActionContextStoreSourceInstance<T, O>, dialog: MatDialog);
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected _handleDialogResult(result: boolean): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxActionConfirmDirective<any, any>, [{ host: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbNgxActionConfirmDirective<any, any>, "[dbxActionConfirm]", never, { "config": "dbxActionConfirm"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionConfirmDirective<any, any>, [{ host: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionConfirmDirective<any, any>, "[dbxActionConfirm]", never, { "config": "dbxActionConfirm"; }, {}, never>;
 }

package/lib/action/action.module.d.ts

@@ -9,8 +9,8 @@ import * as i7 from "@angular/material/snack-bar";
 import * as i8 from "@angular/material/dialog";
 import * as i9 from "@angular/material/button";
 import * as i10 from "../interaction/prompt/prompt.module";
-export declare class DbNgxActionModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxActionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxActionModule, [typeof i1.DbNgxActionKeyTriggerDirective, typeof i2.DbNgxActionSnackbarComponent, typeof i3.DbNgxActionConfirmDirective], [typeof i4.CommonModule, typeof i5.DbNgxCoreActionModule, typeof i6.DbNgxButtonModule, typeof i7.MatSnackBarModule, typeof i8.MatDialogModule, typeof i9.MatButtonModule, typeof i10.DbNgxPromptModule], [typeof i5.DbNgxCoreActionModule, typeof i1.DbNgxActionKeyTriggerDirective, typeof i2.DbNgxActionSnackbarComponent, typeof i3.DbNgxActionConfirmDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxActionModule>;
+export declare class DbxActionModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxActionModule, [typeof i1.DbxActionKeyTriggerDirective, typeof i2.DbxActionSnackbarComponent, typeof i3.DbxActionConfirmDirective], [typeof i4.CommonModule, typeof i5.DbxCoreActionModule, typeof i6.DbxButtonModule, typeof i7.MatSnackBarModule, typeof i8.MatDialogModule, typeof i9.MatButtonModule, typeof i10.DbxPromptModule], [typeof i5.DbxCoreActionModule, typeof i1.DbxActionKeyTriggerDirective, typeof i2.DbxActionSnackbarComponent, typeof i3.DbxActionConfirmDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxActionModule>;
 }

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

@@ -1,15 +1,15 @@
 import { Observable } from 'rxjs';
 import { MatSnackBarRef } from '@angular/material/snack-bar';
 import { Maybe } from '@dereekb/util';
-import { ActionContextStoreSourceInstance, DbNgxActionSnackbarComponentConfig } from '@dereekb/dbx-core';
+import { ActionContextStoreSourceInstance, DbxActionSnackbarComponentConfig } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 /**
  * Component for a snackbar that contains an action.
  */
-export declare class DbNgxActionSnackbarComponent {
-    readonly snackbar: MatSnackBarRef<DbNgxActionSnackbarComponent>;
-    readonly data: DbNgxActionSnackbarComponentConfig;
-    constructor(snackbar: MatSnackBarRef<DbNgxActionSnackbarComponent>, data: DbNgxActionSnackbarComponentConfig);
+export declare class DbxActionSnackbarComponent {
+    readonly snackbar: MatSnackBarRef<DbxActionSnackbarComponent>;
+    readonly data: DbxActionSnackbarComponentConfig;
+    constructor(snackbar: MatSnackBarRef<DbxActionSnackbarComponent>, data: DbxActionSnackbarComponentConfig);
     readonly complete$: Observable<boolean>;
     readonly snackbarStatusClass$: Observable<string>;
     get message(): Maybe<string>;
@@ -17,6 +17,6 @@ export declare class DbNgxActionSnackbarComponent {
     get actionSourceInstance(): ActionContextStoreSourceInstance;
     dismissEarly: () => void;
     dismiss: () => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxActionSnackbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxActionSnackbarComponent, "ng-component", never, {}, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionSnackbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxActionSnackbarComponent, "ng-component", never, {}, {}, never, never>;
 }

package/lib/action/key.trigger.directive.d.ts

@@ -6,12 +6,12 @@ import * as i0 from "@angular/core";
  *
  * Events/Keys to respond to should be lowercase.
  */
-export declare class DbNgxActionKeyTriggerDirective<T = any, O = any> {
+export declare class DbxActionKeyTriggerDirective<T = any, O = any> {
     readonly source: ActionContextStoreSourceInstance<T, O>;
     inputKey: Maybe<string>;
     constructor(source: ActionContextStoreSourceInstance<T, O>);
     get key(): string;
     onKeyupHandler(event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxActionKeyTriggerDirective<any, any>, [{ host: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbNgxActionKeyTriggerDirective<any, any>, "[dbxActionKeyTrigger]", never, { "inputKey": "dbxActionKeyTrigger"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionKeyTriggerDirective<any, any>, [{ host: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionKeyTriggerDirective<any, any>, "[dbxActionKeyTrigger]", never, { "inputKey": "dbxActionKeyTrigger"; }, {}, never>;
 }

package/lib/action/transition/action.transition.module.d.ts

@@ -7,12 +7,12 @@ import * as i5 from "../../interaction/prompt/prompt.module";
 import * as i6 from "../../button/button.module";
 import * as i7 from "../../error/error.module";
 /**
- * Provides the DbNgxActionUIRouterTransitionSafetyDirective.
+ * Provides the DbxActionUIRouterTransitionSafetyDirective.
  *
  * NOTE: Only works with UIRouter
  */
-export declare class DbNgxActionUIRouterTransitionModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxActionUIRouterTransitionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxActionUIRouterTransitionModule, [typeof i1.DbNgxActionTransitionSafetyDirective, typeof i2.DbNgxActionUIRouterTransitionSafetyDialogComponent], [typeof i3.CommonModule, typeof i4.DbNgxCoreActionModule, typeof i5.DbNgxPromptModule, typeof i6.DbNgxButtonModule, typeof i7.DbNgxReadableErrorModule], [typeof i1.DbNgxActionTransitionSafetyDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxActionUIRouterTransitionModule>;
+export declare class DbxActionUIRouterTransitionModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionUIRouterTransitionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxActionUIRouterTransitionModule, [typeof i1.DbxActionTransitionSafetyDirective, typeof i2.DbxActionUIRouterTransitionSafetyDialogComponent], [typeof i3.CommonModule, typeof i4.DbxCoreActionModule, typeof i5.DbxPromptModule, typeof i6.DbxButtonModule, typeof i7.DbxReadableErrorModule], [typeof i1.DbxActionTransitionSafetyDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxActionUIRouterTransitionModule>;
 }

package/lib/action/transition/transition.safety.dialog.component.d.ts

@@ -1,19 +1,19 @@
 import { OnInit } from '@angular/core';
-import { DbNgxPromptConfirmConfig, AbstractDialogDirective } from '../../interaction';
+import { DbxPromptConfirmConfig, AbstractDialogDirective } from '../../interaction';
 import * as i0 from "@angular/core";
-export declare enum DbNgxActionTransitionSafetyDialogResult {
+export declare enum DbxActionTransitionSafetyDialogResult {
     SUCCESS = 0,
     STAY = 1,
     DISCARD = 2,
     NONE = 3
 }
 /**
- * Dialog that is shown/triggered as part of the DbNgxActionTransitionSafety
+ * Dialog that is shown/triggered as part of the DbxActionTransitionSafety
  */
-export declare class DbNgxActionUIRouterTransitionSafetyDialogComponent extends AbstractDialogDirective implements OnInit {
-    config: DbNgxPromptConfirmConfig;
+export declare class DbxActionUIRouterTransitionSafetyDialogComponent extends AbstractDialogDirective implements OnInit {
+    config: DbxPromptConfirmConfig;
     confirm(): void;
     cancel(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxActionUIRouterTransitionSafetyDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxActionUIRouterTransitionSafetyDialogComponent, "ng-component", never, {}, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionUIRouterTransitionSafetyDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxActionUIRouterTransitionSafetyDialogComponent, "ng-component", never, {}, {}, never, never>;
 }

package/lib/action/transition/transition.safety.directive.d.ts

@@ -4,24 +4,15 @@ import { HookResult, Transition, TransitionService } from '@uirouter/core';
 import { Observable } from 'rxjs';
 import { ActionContextStoreSourceInstance } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
-export declare enum DbNgxActionTransitionSafetyType {
-    /**
-     * Nothing occurs.
-     */
-    NONE = "none",
-    /**
-     * Always show a dialog and act based on the result.
-     */
-    DIALOG = "dialog",
-    /**
-     * Try to auto-trigger if in a triggerable state.
-     *
-     * If it is modified but in a non-triggerable state show a dialog.
-     *
-     * Should be used in conjuction with the auto-saver.
-     */
-    AUTO_TRIGGER = "auto"
-}
+/**
+ * How to handle transitions.
+ *
+ * Values:
+ * - none: Nothing occurs.
+ * - dialog: Always show a dialog and act based on the result.
+ * - auto: Try to auto-trigger if in a triggerable state. If it is modified but in a non-triggerable state, show a dialog. Should be used in conjuction with the auto-saver.
+ */
+export declare type DbxActionTransitionSafetyType = 'none' | 'dialog' | 'auto';
 /**
  * Context used for preventing a transition from occuring if the action is not complete or is in a modified state.
  *
@@ -29,16 +20,16 @@ export declare enum DbNgxActionTransitionSafetyType {
  *
  * NOTE: This dialog only works for uirouter.
  */
-export declare class DbNgxActionTransitionSafetyDirective<T, O> implements OnInit, OnDestroy {
+export declare class DbxActionTransitionSafetyDirective<T, O> implements OnInit, OnDestroy {
     readonly source: ActionContextStoreSourceInstance<T, O>;
     protected readonly transitionService: TransitionService;
     protected readonly viewContainerRef: ViewContainerRef;
     protected readonly dialog: MatDialog;
-    inputSafetyType?: DbNgxActionTransitionSafetyType;
+    inputSafetyType?: DbxActionTransitionSafetyType;
     private _dialogRef?;
     private stopWatchingTransition?;
     constructor(source: ActionContextStoreSourceInstance<T, O>, transitionService: TransitionService, viewContainerRef: ViewContainerRef, dialog: MatDialog);
-    get safetyType(): DbNgxActionTransitionSafetyType;
+    get safetyType(): DbxActionTransitionSafetyType;
     private get _destroyed();
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -47,6 +38,6 @@ export declare class DbNgxActionTransitionSafetyDirective<T, O> implements OnIni
     private _autoTrigger;
     private _showDialog;
     private _closeDialog;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxActionTransitionSafetyDirective<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbNgxActionTransitionSafetyDirective<any, any>, "[dbxActionTransitionSafety]", never, { "inputSafetyType": "dbxActionTransitionSafety"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionTransitionSafetyDirective<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionTransitionSafetyDirective<any, any>, "[dbxActionTransitionSafety]", never, { "inputSafetyType": "dbxActionTransitionSafety"; }, {}, never>;
 }

package/lib/button/_button.scss

@@ -0,0 +1,32 @@
+@use '../style/theming';
+
+// MARK: Variables
+$button-spacer-width: 6px;
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-button-spacer {
+    padding-right: $button-spacer-width;
+  }
+
+}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-button') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

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

@@ -1,8 +1,8 @@
 import { ThemePalette } from '@angular/material/core';
-import { AbstractDbNgxButtonDirective } from '@dereekb/dbx-core';
+import { AbstractDbxButtonDirective } from '@dereekb/dbx-core';
 import { MatProgressButtonOptions } from 'mat-progress-buttons';
 import * as i0 from "@angular/core";
-export declare enum DbNgxButtonDisplayType {
+export declare enum DbxButtonDisplayType {
     RAISED = 0,
     STROKED = 1,
     FLAT = 2
@@ -10,8 +10,8 @@ export declare enum DbNgxButtonDisplayType {
 /**
  * Complex button that supports loading states.
  */
-export declare class DbNgxButtonComponent extends AbstractDbNgxButtonDirective {
-    type?: DbNgxButtonDisplayType;
+export declare class DbxButtonComponent extends AbstractDbxButtonDirective {
+    type?: DbxButtonDisplayType;
     get raised(): boolean;
     set raised(raised: boolean);
     get stroked(): boolean;
@@ -20,6 +20,6 @@ export declare class DbNgxButtonComponent extends AbstractDbNgxButtonDirective {
     set flat(flat: boolean);
     color: ThemePalette;
     get btnOptions(): MatProgressButtonOptions;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxButtonComponent, "dbx-button", never, { "type": "type"; "raised": "raised"; "stroked": "stroked"; "flat": "flat"; "color": "color"; }, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxButtonComponent, "dbx-button", never, { "type": "type"; "raised": "raised"; "stroked": "stroked"; "flat": "flat"; "color": "color"; }, {}, never, never>;
 }

package/lib/button/button.module.d.ts

@@ -1,12 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./button.component";
 import * as i2 from "./button.spacer.component";
-import * as i3 from "@angular/platform-browser";
-import * as i4 from "@angular/material/icon";
-import * as i5 from "@angular/material/button";
-import * as i6 from "mat-progress-buttons";
-export declare class DbNgxButtonModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxButtonModule, [typeof i1.DbNgxButtonComponent, typeof i2.DbNgxButtonSpacerComponent], [typeof i3.BrowserModule, typeof i4.MatIconModule, typeof i5.MatButtonModule, typeof i6.MatProgressButtonsModule], [typeof i1.DbNgxButtonComponent, typeof i2.DbNgxButtonSpacerComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxButtonModule>;
+import * as i3 from "@angular/common";
+import * as i4 from "mat-progress-buttons";
+export declare class DbxButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxButtonModule, [typeof i1.DbxButtonComponent, typeof i2.DbxButtonSpacerComponent], [typeof i3.CommonModule, typeof i4.MatProgressButtonsModule], [typeof i4.MatProgressButtonsModule, typeof i1.DbxButtonComponent, typeof i2.DbxButtonSpacerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxButtonModule>;
 }

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

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 /**
  * Button spacer component.
  */
-export declare class DbNgxButtonSpacerComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxButtonSpacerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxButtonSpacerComponent, "dbx-button-spacer", never, {}, {}, never, never>;
+export declare class DbxButtonSpacerComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxButtonSpacerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxButtonSpacerComponent, "dbx-button-spacer", never, {}, {}, never, never>;
 }

package/lib/dbx-web.module.d.ts

@@ -2,15 +2,20 @@ import * as i0 from "@angular/core";
 import * as i1 from "./button/button.module";
 import * as i2 from "./action/action.module";
 import * as i3 from "./loading/loading.module";
-import * as i4 from "@angular/platform-browser";
-import * as i5 from "mat-progress-buttons";
-export declare class DbNgxWebModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxWebModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxWebModule, never, never, [typeof i1.DbNgxButtonModule, typeof i2.DbNgxActionModule, typeof i3.DbNgxLoadingModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxWebModule>;
+import * as i4 from "mat-progress-buttons";
+export declare class DbxWebModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxWebModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxWebModule, never, never, [typeof i1.DbxButtonModule, typeof i2.DbxActionModule, typeof i3.DbxLoadingModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxWebModule>;
 }
-export declare class DbNgxSharedWebModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxSharedWebModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxSharedWebModule, never, [typeof i4.BrowserModule, typeof DbNgxWebModule, typeof i5.MatProgressButtonsModule], [typeof DbNgxWebModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxSharedWebModule>;
+/**
+ * Should only be imported once in the root app.
+ *
+ * Pre-configures the following modules:
+ * - MatProgressButtonsModule
+ */
+export declare class DbxWebRootModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxWebRootModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxWebRootModule, never, [typeof i4.MatProgressButtonsModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxWebRootModule>;
 }

package/lib/error/_error.scss

@@ -0,0 +1,26 @@
+@use '../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-error') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

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

@@ -1,15 +1,15 @@
 import { OnInit } from '@angular/core';
 import { ActionContextStoreSourceInstance, AbstractSubscriptionDirective } from '@dereekb/dbx-core';
-import { DbNgxReadableErrorComponent } from './error.component';
+import { DbxReadableErrorComponent } from './error.component';
 import * as i0 from "@angular/core";
 /**
  * Context used for linking an ReadableErrorComponent to an ActionContext.
  */
-export declare class DbNgxActionErrorDirective extends AbstractSubscriptionDirective implements OnInit {
-    readonly error: DbNgxReadableErrorComponent;
+export declare class DbxActionErrorDirective extends AbstractSubscriptionDirective implements OnInit {
+    readonly error: DbxReadableErrorComponent;
     readonly source: ActionContextStoreSourceInstance;
-    constructor(error: DbNgxReadableErrorComponent, source: ActionContextStoreSourceInstance);
+    constructor(error: DbxReadableErrorComponent, source: ActionContextStoreSourceInstance);
     ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxActionErrorDirective, [{ host: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbNgxActionErrorDirective, "[dbxActionError]", never, {}, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionErrorDirective, [{ host: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionErrorDirective, "[dbxActionError]", never, {}, {}, never>;
 }

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

@@ -4,11 +4,11 @@ import * as i0 from "@angular/core";
 /**
  * Basic error component.
  */
-export declare class DbNgxReadableErrorComponent {
+export declare class DbxReadableErrorComponent {
     private _error?;
     get error(): Maybe<ReadableError>;
     set error(error: Maybe<ErrorInput | ReadableError>);
     get message(): Maybe<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxReadableErrorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxReadableErrorComponent, "dbx-error", never, { "error": "error"; }, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxReadableErrorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxReadableErrorComponent, "dbx-error", never, { "error": "error"; }, {}, never, never>;
 }

package/lib/error/error.loading.directive.d.ts

@@ -1,19 +1,19 @@
 import { LoadingContext } from '@dereekb/rxjs';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
-import { DbNgxReadableErrorComponent } from './error.component';
+import { DbxReadableErrorComponent } from './error.component';
 import * as i0 from "@angular/core";
 /**
  * Context used for linking an ReadableErrorComponent to a LoadingContext.
  *
  * The error from the context is given to the app error when available.
  */
-export declare class DbNgxLoadingErrorDirective extends AbstractSubscriptionDirective {
-    readonly error: DbNgxReadableErrorComponent;
-    constructor(error: DbNgxReadableErrorComponent);
+export declare class DbxLoadingErrorDirective extends AbstractSubscriptionDirective {
+    readonly error: DbxReadableErrorComponent;
+    constructor(error: DbxReadableErrorComponent);
     /**
      * Sets a LoadingContext that is watched for the loading state.
      */
     set context(context: LoadingContext);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxLoadingErrorDirective, [{ host: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbNgxLoadingErrorDirective, "[dbxLoadingError]", never, { "context": "dbxLoadingError"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxLoadingErrorDirective, [{ host: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxLoadingErrorDirective, "[dbxLoadingError]", never, { "context": "dbxLoadingError"; }, {}, never>;
 }

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

@@ -3,8 +3,8 @@ import * as i1 from "./error.component";
 import * as i2 from "./error.loading.directive";
 import * as i3 from "./error.action.directive";
 import * as i4 from "@angular/common";
-export declare class DbNgxReadableErrorModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxReadableErrorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxReadableErrorModule, [typeof i1.DbNgxReadableErrorComponent, typeof i2.DbNgxLoadingErrorDirective, typeof i3.DbNgxActionErrorDirective], [typeof i4.CommonModule], [typeof i1.DbNgxReadableErrorComponent, typeof i2.DbNgxLoadingErrorDirective, typeof i3.DbNgxActionErrorDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxReadableErrorModule>;
+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.CommonModule], [typeof i1.DbxReadableErrorComponent, typeof i2.DbxLoadingErrorDirective, typeof i3.DbxActionErrorDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxReadableErrorModule>;
 }

package/lib/index.d.ts

@@ -6,4 +6,5 @@ export * from './keypress';
 export * from './loading';
 export * from './layout';
 export * from './router';
-export * from './text';
+export * from './screen';
+export * from './dbx-web.module';

package/lib/interaction/_interaction.scss

@@ -0,0 +1,33 @@
+@use './dialog/dialog';
+@use './filter/filter';
+@use './popover/popover';
+@use './popup/popup';
+@use './prompt/prompt';
+@use './style/style';
+
+@mixin all-interaction-core() {
+  @include dialog.core();
+  @include filter.core();
+  @include popover.core();
+  @include popup.core();
+  @include prompt.core();
+  @include style.core();
+}
+
+@mixin all-interaction-typography($typography-config) {
+  @include dialog.typography($typography-config);
+  @include filter.typography($typography-config);
+  @include popover.typography($typography-config);
+  @include popup.typography($typography-config);
+  @include prompt.typography($typography-config);
+  @include style.typography($typography-config);
+}
+
+@mixin all-interaction-theme($theme-config) {
+  @include dialog.theme($theme-config);
+  @include filter.theme($theme-config);
+  @include popover.theme($theme-config);
+  @include popup.theme($theme-config);
+  @include prompt.theme($theme-config);
+  @include style.theme($theme-config);
+}

package/lib/interaction/dialog/_dialog.scss

@@ -0,0 +1,26 @@
+@use '../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-interaction-dialog') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/lib/interaction/dialog/abstract.dialog.directive.d.ts

@@ -1,14 +1,16 @@
 import { NgZone } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
-import { AbstractTransitionWatcherDirective, DbNgxRouterTransitionService } from '@dereekb/dbx-core';
+import { AbstractTransitionWatcherDirective, DbxRouterTransitionService } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 /**
  * Abstract dialog component that closes when a transition is successful.
  */
-export declare abstract class AbstractDialogDirective<T = any, R = any> extends AbstractTransitionWatcherDirective {
+export declare abstract class AbstractDialogDirective<R = any, D = any, T = any> extends AbstractTransitionWatcherDirective {
+    readonly data: D;
     readonly dialogRef: MatDialogRef<T, R>;
-    constructor(dialogRef: MatDialogRef<T, R>, dbNgxRouterTransitionService: DbNgxRouterTransitionService, ngZone: NgZone);
+    constructor(data: D, dialogRef: MatDialogRef<T, R>, dbNgxRouterTransitionService: DbxRouterTransitionService, ngZone: NgZone);
     protected updateForSuccessfulTransition(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDialogDirective<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDialogDirective<any, any>, never, never, {}, {}, never>;
+    close(value?: R): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDialogDirective<any, any, any>, [{ optional: true; }, null, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDialogDirective<any, any, any>, never, never, {}, {}, never>;
 }

package/lib/interaction/dialog/dialog.content.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare type DbxDialogContentContainerWidth = 'normal' | 'wide';
+/**
+ * Component used to style a dialog.
+ */
+export declare class DbxDialogContentDirective {
+    width: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxDialogContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxDialogContentDirective, "dbx-dialog-content,.dbx-dialog-content", never, { "width": "width"; }, {}, never>;
+}

package/lib/interaction/dialog/dialog.module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./dialog.content.component";
+import * as i2 from "@angular/common";
+import * as i3 from "../../layout/style/style.layout.module";
+/**
+ * Module for block components.
+ */
+export declare class DbxDialogInteractionModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxDialogInteractionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxDialogInteractionModule, [typeof i1.DbxDialogContentDirective], [typeof i2.CommonModule, typeof i3.DbxStyleLayoutModule], [typeof i1.DbxDialogContentDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxDialogInteractionModule>;
+}

package/lib/interaction/dialog/index.d.ts

@@ -1 +1,3 @@
 export * from './abstract.dialog.directive';
+export * from './dialog.content.component';
+export * from './dialog.module';