@dereekb/dbx-web 1.2.0 → 2.0.0

package/lib/action/_action.scss

@@ -1,40 +1,13 @@
-@use '../style/theming';
+@use './snackbar/snackbar';
 
-// 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);
-    }
-  }
+@mixin all-action-core() {
+  @include snackbar.core();
 }
 
-// TODO:
-.dbx-action-snackbar {
-  display: flex;
-  align-items: center;
-
-  &.dbx-action-snackbar-success {
-    // background: $success-color;
-  }
+@mixin all-action-typography($typography-config) {
+  @include snackbar.typography($typography-config);
+}
 
-  &.dbx-action-snackbar-error {
-    // background: red;
-  }
+@mixin all-action-theme($theme-config) {
+  @include snackbar.theme($theme-config);
 }

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

@@ -2,8 +2,17 @@ import { OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { AbstractPromptConfirmDirective } from '../interaction/prompt/prompt.confirm.directive';
 import { DbxPromptConfirmConfig } from '../interaction/prompt/prompt.confirm.component';
-import { ActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
+/**
+ * DbxActionConfirmDirective configuration.
+ */
+export interface DbxActionConfirmConfig<T> extends DbxPromptConfirmConfig {
+    /**
+     * Optionally set the readyValue passed to the instance.
+     */
+    readyValue?: T;
+}
 /**
  * Directive that when triggered shows a dialog to accept or reject.
  *
@@ -11,10 +20,10 @@ import * as i0 from "@angular/core";
  * For button usage, use an appPromptConfirmButton directive.
  */
 export declare class DbxActionConfirmDirective<T, O> extends AbstractPromptConfirmDirective implements OnInit, OnDestroy {
-    readonly source: ActionContextStoreSourceInstance<T, O>;
-    config?: DbxPromptConfirmConfig;
+    readonly source: DbxActionContextStoreSourceInstance<T, O>;
+    config?: DbxActionConfirmConfig<T>;
     private _sourceSubscription;
-    constructor(source: ActionContextStoreSourceInstance<T, O>, dialog: MatDialog);
+    constructor(source: DbxActionContextStoreSourceInstance<T, O>, dialog: MatDialog);
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected _handleDialogResult(result: boolean): boolean;

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

@@ -1,16 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./key.trigger.directive";
-import * as i2 from "./action.snackbar.component";
-import * as i3 from "./action.confirm.directive";
-import * as i4 from "@angular/common";
-import * as i5 from "@dereekb/dbx-core";
-import * as i6 from "../button/button.module";
-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";
+import * as i2 from "./action.confirm.directive";
+import * as i3 from "@angular/common";
+import * as i4 from "@dereekb/dbx-core";
+import * as i5 from "../button/button.module";
+import * as i6 from "@angular/material/snack-bar";
+import * as i7 from "@angular/material/dialog";
+import * as i8 from "@angular/material/button";
+import * as i9 from "../interaction/prompt/prompt.module";
 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 ɵmod: i0.ɵɵNgModuleDeclaration<DbxActionModule, [typeof i1.DbxActionKeyTriggerDirective, typeof i2.DbxActionConfirmDirective], [typeof i3.CommonModule, typeof i4.DbxCoreActionModule, typeof i5.DbxButtonModule, typeof i6.MatSnackBarModule, typeof i7.MatDialogModule, typeof i8.MatButtonModule, typeof i9.DbxPromptModule], [typeof i4.DbxCoreActionModule, typeof i1.DbxActionKeyTriggerDirective, typeof i2.DbxActionConfirmDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxActionModule>;
 }

package/lib/action/index.d.ts

@@ -1,5 +1,5 @@
+export * from './snackbar';
 export * from './transition';
 export * from './action.confirm.directive';
 export * from './action.module';
-export * from './action.snackbar.component';
 export * from './key.trigger.directive';

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

@@ -1,5 +1,5 @@
 import { Maybe } from '@dereekb/util';
-import { ActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 /**
  * Directive that triggers the action on a specific key up event.
@@ -7,9 +7,9 @@ import * as i0 from "@angular/core";
  * Events/Keys to respond to should be lowercase.
  */
 export declare class DbxActionKeyTriggerDirective<T = any, O = any> {
-    readonly source: ActionContextStoreSourceInstance<T, O>;
+    readonly source: DbxActionContextStoreSourceInstance<T, O>;
     inputKey: Maybe<string>;
-    constructor(source: ActionContextStoreSourceInstance<T, O>);
+    constructor(source: DbxActionContextStoreSourceInstance<T, O>);
     get key(): string;
     onKeyupHandler(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionKeyTriggerDirective<any, any>, [{ host: true; }]>;

package/lib/action/snackbar/_snackbar.scss

@@ -0,0 +1,33 @@
+@use '../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-action-snackbar {
+    display: flex;
+    align-items: center;
+  }
+
+}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-action-snackbar') {
+    $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/action/snackbar/action.snackbar.component.d.ts

@@ -0,0 +1,36 @@
+import { OnInit } from '@angular/core';
+import { LoadingStateType } from '@dereekb/rxjs';
+import { Observable } from 'rxjs';
+import { OnDestroy, AfterViewInit } from '@angular/core';
+import { MatSnackBarRef } from '@angular/material/snack-bar';
+import { Maybe } from '@dereekb/util';
+import { DbxActionSnackbarDisplayConfig, DbxActionSnackbarActionConfig } from './action.snackbar';
+import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+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 data: DbxActionSnackbarDisplayConfig;
+    private _durationTimeout;
+    private _actionRef;
+    readonly value$: Observable<number>;
+    readonly sourceInstance$: Observable<import("@dereekb/dbx-core").DbxActionContextStoreSourceInstance<any, any>>;
+    readonly complete$: Observable<boolean>;
+    readonly loadingStateType$: Observable<LoadingStateType>;
+    readonly snackbarStatusClass$: Observable<string>;
+    readonly button: Maybe<string>;
+    get action(): DbxActionSnackbarActionConfig | undefined;
+    get hasAction(): boolean;
+    get message(): Maybe<string>;
+    get actionConfig(): Maybe<DbxActionSnackbarActionConfig>;
+    constructor(snackbar: MatSnackBarRef<DbxActionSnackbarComponent>, data: DbxActionSnackbarDisplayConfig);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngAfterViewInit(): void;
+    dismissAfterActionCompletes: () => void;
+    dismiss: () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionSnackbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxActionSnackbarComponent, "ng-component", never, {}, {}, never, never>;
+}

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

@@ -0,0 +1,52 @@
+import { MatSnackBarConfig } from "@angular/material/snack-bar";
+import { DbxActionContextSourceReference } from "@dereekb/dbx-core";
+import { LoadingState, LoadingStateType } from "@dereekb/rxjs";
+import { Maybe } from "@dereekb/util";
+export declare type DbxActionSnackbarType = string;
+export declare type DbxActionSnackbarKnownType = 'none' | 'create' | 'save' | 'delete' | 'merge' | 'send' | 'cancel' | 'restore' | 'refresh' | 'read' | 'unread';
+/**
+ * ActionSnackbar event. Depending on the type, a value or error is also available.
+ */
+export interface DbxActionSnackbarEvent<O = any> extends Omit<LoadingState<O>, 'loading'> {
+    type: LoadingStateType;
+}
+/**
+ * Configuration for the actual snackbar popup.
+ */
+export interface DbxActionSnackbarDisplayConfig {
+    /**
+     * Text to be shown on the close button. If action is defined, this is ignored and the action text is used.
+     */
+    button?: string;
+    /**
+     * Message to show in the snackbar.
+     */
+    message?: Maybe<string>;
+    /**
+     * Additional action that can occur.
+     */
+    action?: DbxActionSnackbarActionConfig;
+    /**
+     * MatSnackBar configuration
+     */
+    snackbar?: MatSnackBarConfig;
+}
+/**
+ * Used for configuring an action on the snackbar component.
+ */
+export interface DbxActionSnackbarActionConfig {
+    /**
+     * Action label to display on the button.
+     */
+    button: string;
+    /**
+     * Action reference to use.
+     *
+     * The referred to action is used for triggering and lifecycle.
+     */
+    reference: DbxActionContextSourceReference;
+    /**
+     * Duration to show the action.
+     */
+    duration?: number;
+}

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

@@ -0,0 +1,2 @@
+import { DbxActionSnackbarEventMakeConfig } from './action.snackbar.service';
+export declare const DBX_ACTION_SNACKBAR_DEFAULTS: DbxActionSnackbarEventMakeConfig;

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

@@ -0,0 +1,25 @@
+import { OnInit } from '@angular/core';
+import { AbstractSubscriptionDirective, DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
+import { DbxActionSnackbarDisplayConfig, DbxActionSnackbarEvent, DbxActionSnackbarType } from './action.snackbar';
+import { DbxActionSnackbarService } from './action.snackbar.service';
+import { DbxActionSnackbarDisplayConfigGeneratorFunction, DbxActionSnackbarGeneratorUndoInput } from './action.snackbar.generator';
+import * as i0 from "@angular/core";
+/**
+ * Action directive that displays a snackbar when the action context hits a certain state.
+ */
+export declare class DbxActionSnackbarDirective<T = any, O = any> extends AbstractSubscriptionDirective implements OnInit {
+    readonly source: DbxActionContextStoreSourceInstance<T, O>;
+    readonly dbxActionSnackbarService: DbxActionSnackbarService;
+    private _snackbarFunction?;
+    get snackbarFunction(): Maybe<DbxActionSnackbarDisplayConfigGeneratorFunction<O>>;
+    set snackbarFunction(snackbarFunction: Maybe<'' | DbxActionSnackbarDisplayConfigGeneratorFunction<O>>);
+    dbxActionSnackbarDefault?: Maybe<DbxActionSnackbarType>;
+    dbxActionSnackbarUndo?: DbxActionSnackbarGeneratorUndoInput;
+    constructor(source: DbxActionContextStoreSourceInstance<T, O>, dbxActionSnackbarService: DbxActionSnackbarService);
+    ngOnInit(): void;
+    protected buildConfigurationForEvent(event: DbxActionSnackbarEvent): Maybe<DbxActionSnackbarDisplayConfig>;
+    protected showSnackbarForConfiguration(config: DbxActionSnackbarDisplayConfig, event: DbxActionSnackbarEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionSnackbarDirective<any, any>, [{ host: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionSnackbarDirective<any, any>, "[dbxActionSnackbar]", never, { "snackbarFunction": "dbxActionSnackbar"; "dbxActionSnackbarDefault": "dbxActionSnackbarDefault"; "dbxActionSnackbarUndo": "dbxActionSnackbarUndo"; }, {}, never>;
+}

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

@@ -0,0 +1,32 @@
+import { DbxActionContextSourceReference } from "@dereekb/dbx-core";
+import { Milliseconds, Maybe, ObjectOrGetter, Getter } from "@dereekb/util";
+import { DbxActionSnackbarDisplayConfig, DbxActionSnackbarEvent } from "./action.snackbar";
+export interface DbxActionSnackbarGeneratorInput<O = any> {
+    event: DbxActionSnackbarEvent<O>;
+    undo?: Maybe<DbxActionSnackbarGeneratorUndoInput>;
+}
+export declare type DbxActionSnackbarGeneratorUndoInput = DbxActionSnackbarGeneratorUndoInputConfig | Getter<DbxActionContextSourceReference>;
+export interface DbxActionSnackbarGeneratorUndoInputConfig {
+    duration?: Milliseconds;
+    getUndoAction: Getter<DbxActionContextSourceReference>;
+}
+export declare type DbxActionSnackbarDisplayConfigGeneratorFunction<O = any> = (input: DbxActionSnackbarGeneratorInput<O>) => Maybe<DbxActionSnackbarDisplayConfig>;
+export interface DbxMakeActionSnackbarGeneratorConfiguration {
+    idle?: ObjectOrGetter<DbxMakeActionSnackbarGeneratorEventConfiguration>;
+    loading?: ObjectOrGetter<DbxMakeActionSnackbarGeneratorEventConfiguration>;
+    success?: ObjectOrGetter<DbxMakeActionSnackbarGeneratorEventConfiguration>;
+    error?: ObjectOrGetter<DbxMakeActionSnackbarGeneratorEventConfiguration>;
+}
+export interface DbxMakeActionSnackbarGeneratorEventConfiguration extends Omit<DbxActionSnackbarDisplayConfig, 'action'> {
+    /**
+     * Sets the undo action text. If undefined, will default to 'undo'
+     */
+    undoButtonText?: string;
+}
+/**
+ * Creates a DbxActionSnackbarDisplayConfigGeneratorFunction from the input config.
+ *
+ * @param config
+ * @returns
+ */
+export declare function makeDbxActionSnackbarDisplayConfigGeneratorFunction<O = any>(config: DbxMakeActionSnackbarGeneratorConfiguration): DbxActionSnackbarDisplayConfigGeneratorFunction<O>;

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

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./action.snackbar.component";
+import * as i2 from "./action.snackbar.directive";
+import * as i3 from "@angular/common";
+import * as i4 from "../../layout/style/style.layout.module";
+import * as i5 from "@dereekb/dbx-core";
+import * as i6 from "../../interaction/prompt/prompt.module";
+import * as i7 from "../../button/button.module";
+import * as i8 from "../../error/error.module";
+export declare class DbxActionSnackbarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionSnackbarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxActionSnackbarModule, [typeof i1.DbxActionSnackbarComponent, typeof i2.DbxActionSnackbarDirective], [typeof i3.CommonModule, typeof i4.DbxStyleLayoutModule, typeof i5.DbxCoreActionModule, typeof i6.DbxPromptModule, typeof i7.DbxButtonModule, typeof i8.DbxReadableErrorModule], [typeof i1.DbxActionSnackbarComponent, typeof i2.DbxActionSnackbarDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxActionSnackbarModule>;
+}

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

@@ -0,0 +1,39 @@
+import { DbxActionSnackbarComponent } from './action.snackbar.component';
+import { InjectionToken, Type } from "@angular/core";
+import { MatSnackBar, MatSnackBarConfig, MatSnackBarRef } from "@angular/material/snack-bar";
+import { Milliseconds, Maybe } from "@dereekb/util";
+import { DbxActionSnackbarDisplayConfig, DbxActionSnackbarType } from "./action.snackbar";
+import { DbxActionSnackbarGeneratorInput, DbxMakeActionSnackbarGeneratorConfiguration } from "./action.snackbar.generator";
+import * as i0 from "@angular/core";
+export declare const DBX_ACTION_SNACKBAR_SERVICE_CONFIG: InjectionToken<unknown>;
+export declare const DEFAULT_SNACKBAR_DIRECTIVE_DURATION: number;
+export interface DbxActionSnackbarEventMakeConfig {
+    [key: string]: DbxMakeActionSnackbarGeneratorConfiguration;
+}
+export interface DbxActionSnackbarServiceConfig<C = any> {
+    readonly componentClass: Type<C>;
+    readonly snackbar?: Pick<MatSnackBarConfig, 'horizontalPosition' | 'verticalPosition'>;
+    readonly defaultDuration?: Milliseconds;
+    readonly defaultUndoDuration?: Milliseconds;
+    readonly eventTypeConfigs: DbxActionSnackbarEventMakeConfig;
+}
+/**
+ * Used for managing/configuring the snackbar default values and pushing snackbar events.
+ */
+export declare class DbxActionSnackbarService<C = DbxActionSnackbarComponent> {
+    readonly matSnackBar: MatSnackBar;
+    readonly config: DbxActionSnackbarServiceConfig<C>;
+    get componentClass(): Type<C>;
+    get eventTypeConfigs(): DbxActionSnackbarEventMakeConfig;
+    constructor(matSnackBar: MatSnackBar, inputConfig: Partial<DbxActionSnackbarServiceConfig<C>>);
+    /**
+     * Opens a new snackbar given the input configuration.
+     *
+     * @param config
+     * @returns
+     */
+    openSnackbar(config: DbxActionSnackbarDisplayConfig): MatSnackBarRef<C>;
+    generateDisplayConfig(type: Maybe<DbxActionSnackbarType>, input: DbxActionSnackbarGeneratorInput): Maybe<DbxActionSnackbarDisplayConfig>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionSnackbarService<any>, [null, { optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DbxActionSnackbarService<any>>;
+}

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

@@ -0,0 +1,7 @@
+export * from './action.snackbar.component';
+export * from './action.snackbar.default';
+export * from './action.snackbar.directive';
+export * from './action.snackbar.generator';
+export * from './action.snackbar.module';
+export * from './action.snackbar.service';
+export * from './action.snackbar';

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

@@ -2,7 +2,7 @@ import { OnInit, OnDestroy, ViewContainerRef } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { HookResult, Transition, TransitionService } from '@uirouter/core';
 import { Observable } from 'rxjs';
-import { ActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 /**
  * How to handle transitions.
@@ -21,14 +21,14 @@ export declare type DbxActionTransitionSafetyType = 'none' | 'dialog' | 'auto';
  * NOTE: This dialog only works for uirouter.
  */
 export declare class DbxActionTransitionSafetyDirective<T, O> implements OnInit, OnDestroy {
-    readonly source: ActionContextStoreSourceInstance<T, O>;
+    readonly source: DbxActionContextStoreSourceInstance<T, O>;
     protected readonly transitionService: TransitionService;
     protected readonly viewContainerRef: ViewContainerRef;
     protected readonly dialog: MatDialog;
     inputSafetyType?: DbxActionTransitionSafetyType;
     private _dialogRef?;
     private stopWatchingTransition?;
-    constructor(source: ActionContextStoreSourceInstance<T, O>, transitionService: TransitionService, viewContainerRef: ViewContainerRef, dialog: MatDialog);
+    constructor(source: DbxActionContextStoreSourceInstance<T, O>, transitionService: TransitionService, viewContainerRef: ViewContainerRef, dialog: MatDialog);
     get safetyType(): DbxActionTransitionSafetyType;
     private get _destroyed();
     ngOnInit(): void;

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

@@ -3,8 +3,9 @@ import * as i1 from "./button.component";
 import * as i2 from "./button.spacer.component";
 import * as i3 from "@angular/common";
 import * as i4 from "mat-progress-buttons";
+import * as i5 from "@dereekb/dbx-core";
 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 ɵmod: i0.ɵɵNgModuleDeclaration<DbxButtonModule, [typeof i1.DbxButtonComponent, typeof i2.DbxButtonSpacerDirective], [typeof i3.CommonModule, typeof i4.MatProgressButtonsModule], [typeof i5.DbxCoreButtonModule, typeof i4.MatProgressButtonsModule, typeof i1.DbxButtonComponent, typeof i2.DbxButtonSpacerDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxButtonModule>;
 }

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

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
 /**
- * Button spacer component.
+ * Button spacer directive.
  */
-export declare class DbxButtonSpacerComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxButtonSpacerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxButtonSpacerComponent, "dbx-button-spacer", never, {}, {}, never, never>;
+export declare class DbxButtonSpacerDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxButtonSpacerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxButtonSpacerDirective, "dbx-button-spacer,dbxButtonSpacer", never, {}, {}, never>;
 }

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

@@ -1,5 +1,5 @@
 import { OnInit } from '@angular/core';
-import { ActionContextStoreSourceInstance, AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+import { DbxActionContextStoreSourceInstance, AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { DbxReadableErrorComponent } from './error.component';
 import * as i0 from "@angular/core";
 /**
@@ -7,8 +7,8 @@ import * as i0 from "@angular/core";
  */
 export declare class DbxActionErrorDirective extends AbstractSubscriptionDirective implements OnInit {
     readonly error: DbxReadableErrorComponent;
-    readonly source: ActionContextStoreSourceInstance;
-    constructor(error: DbxReadableErrorComponent, source: ActionContextStoreSourceInstance);
+    readonly source: DbxActionContextStoreSourceInstance;
+    constructor(error: DbxReadableErrorComponent, source: DbxActionContextStoreSourceInstance);
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionErrorDirective, [{ host: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionErrorDirective, "[dbxActionError]", never, {}, {}, never>;

package/lib/interaction/popover/popover.action.button.directive.d.ts

@@ -1,5 +1,5 @@
-import { NgZone } from '@angular/core';
-import { DbxButtonDirective, DbxActionButtonDirective, ActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { ChangeDetectorRef } from '@angular/core';
+import { DbxButtonDirective, DbxActionButtonDirective, DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
 import { DbxPopoverActionDirective } from './popover.action.directive';
 import * as i0 from "@angular/core";
 /**
@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
  */
 export declare class DbxPopoverActionButtonDirective extends DbxActionButtonDirective {
     readonly appPopoverActionDirective: DbxPopoverActionDirective;
-    constructor(button: DbxButtonDirective, source: ActionContextStoreSourceInstance, ngZone: NgZone, appPopoverActionDirective: DbxPopoverActionDirective);
+    constructor(button: DbxButtonDirective, source: DbxActionContextStoreSourceInstance, cdRef: ChangeDetectorRef, appPopoverActionDirective: DbxPopoverActionDirective);
     protected _buttonClicked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPopoverActionButtonDirective, [{ host: true; }, null, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DbxPopoverActionButtonDirective, "[dbxPopoverActionButton]", never, {}, {}, never>;

package/lib/interaction/popover/popover.action.directive.d.ts

@@ -2,7 +2,7 @@ import { Observable } from 'rxjs';
 import { OnInit, OnDestroy, ElementRef } from '@angular/core';
 import { NgPopoverCloseEvent, NgPopoverRef } from 'ng-overlay-container';
 import { AbstractPopoverRefWithEventsDirective } from './abstract.popover.ref.directive';
-import { ActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 export interface DbxPopoverActionFnParam {
     origin: ElementRef;
@@ -17,13 +17,13 @@ export declare type DbxPopoverActionModifiedFn<T = any> = (value: T) => Observab
  */
 export declare class DbxPopoverActionDirective<T = object> extends AbstractPopoverRefWithEventsDirective<any, T> implements OnInit, OnDestroy {
     readonly elementRef: ElementRef;
-    readonly source: ActionContextStoreSourceInstance<T, any>;
+    readonly source: DbxActionContextStoreSourceInstance<T, any>;
     fn?: DbxPopoverActionFn<T>;
     appPopoverActionModified?: DbxPopoverActionModifiedFn<T>;
     private _popoverValue;
     private _triggeredSub;
     private _isModifiedSub;
-    constructor(elementRef: ElementRef, source: ActionContextStoreSourceInstance<T, any>);
+    constructor(elementRef: ElementRef, source: DbxActionContextStoreSourceInstance<T, any>);
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected _makePopoverRef(): NgPopoverRef<any, T>;

package/lib/layout/content/_content.scss

@@ -34,6 +34,11 @@ $content-container-padding-small-screen: theming.$padding-2;
     max-width: $box-max-width;
   }
 
+  .dbx-app-page {
+    @include theming.app-height();
+    overflow: hidden;
+  }
+
   .dbx-content,
   .dbx-content-page {                   //dbx-content page always has page height
     @include theming.page-height();
@@ -101,8 +106,16 @@ $content-container-padding-small-screen: theming.$padding-2;
 @mixin color($theme-config) {
   $color-config: theming.get-color-config($theme-config);
   $background: map.get($color-config, 'background');
+  $foreground: map.get($color-config, 'foreground');
+  $content-color: theming.get-color-from-palette($foreground, 'text');
+  $content-background: theming.get-color-from-palette($background, 'background');
   $content-border-background: theming.get-color-from-palette($background, 'hover');
 
+  .dbx-background {
+    color: $content-color;
+    background: $content-background;
+  }
+
   .dbx-content-border {
     // border-radius: 6px;
     border: 3px dashed $content-border-background;

package/lib/layout/section/section.header.component.d.ts

@@ -9,6 +9,7 @@ export declare class DbxSectionHeaderComponent {
     header?: Maybe<string>;
     icon?: Maybe<string>;
     hint?: Maybe<string>;
+    get showTitle(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSectionHeaderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxSectionHeaderComponent, ".dbx-section-header", never, { "h": "h"; "header": "header"; "icon": "icon"; "hint": "hint"; }, {}, never, ["*"]>;
 }

package/lib/layout/text/icon.spacer.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+/**
+ * Icon spacer directive.
+ */
+export declare class DbxIconSpacerDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxIconSpacerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxIconSpacerDirective, "dbx-icon-spacer,dbxIconSpacer", never, {}, {}, never>;
+}

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

@@ -1,4 +1,5 @@
 export * from './hint.component';
+export * from './icon.spacer.component';
 export * from './label.component';
 export * from './linkify.component';
 export * from './note.component';

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

@@ -8,12 +8,13 @@ import * as i6 from "./label.component";
 import * as i7 from "./linkify.component";
 import * as i8 from "./ok.component";
 import * as i9 from "./text.chips.component";
-import * as i10 from "@angular/common";
-import * as i11 from "@angular/material/chips";
-import * as i12 from "@angular/material/tooltip";
-import * as i13 from "@angular/material/icon";
+import * as i10 from "./icon.spacer.component";
+import * as i11 from "@angular/common";
+import * as i12 from "@angular/material/chips";
+import * as i13 from "@angular/material/tooltip";
+import * as i14 from "@angular/material/icon";
 export declare class DbxTextModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTextModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTextModule, [typeof i1.DbxNoteComponent, typeof i2.DbxNoticeComponent, typeof i3.DbxSuccessComponent, typeof i4.DbxWarnComponent, typeof i5.DbxHintComponent, typeof i6.DbxLabelComponent, typeof i7.DbxLinkifyComponent, typeof i8.DbxOkComponent, typeof i9.DbxTextChipsComponent], [typeof i10.CommonModule, typeof i11.MatChipsModule, typeof i12.MatTooltipModule, typeof i13.MatIconModule], [typeof i1.DbxNoteComponent, typeof i2.DbxNoticeComponent, typeof i3.DbxSuccessComponent, typeof i4.DbxWarnComponent, typeof i5.DbxHintComponent, typeof i6.DbxLabelComponent, typeof i7.DbxLinkifyComponent, typeof i8.DbxOkComponent, typeof i9.DbxTextChipsComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTextModule, [typeof i1.DbxNoteComponent, typeof i2.DbxNoticeComponent, typeof i3.DbxSuccessComponent, typeof i4.DbxWarnComponent, typeof i5.DbxHintComponent, typeof i6.DbxLabelComponent, typeof i7.DbxLinkifyComponent, typeof i8.DbxOkComponent, typeof i9.DbxTextChipsComponent, typeof i10.DbxIconSpacerDirective], [typeof i11.CommonModule, typeof i12.MatChipsModule, typeof i13.MatTooltipModule, typeof i14.MatIconModule], [typeof i1.DbxNoteComponent, typeof i2.DbxNoticeComponent, typeof i3.DbxSuccessComponent, typeof i4.DbxWarnComponent, typeof i5.DbxHintComponent, typeof i6.DbxLabelComponent, typeof i7.DbxLinkifyComponent, typeof i8.DbxOkComponent, typeof i9.DbxTextChipsComponent, typeof i10.DbxIconSpacerDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxTextModule>;
 }

package/lib/loading/index.d.ts

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

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

@@ -0,0 +1,19 @@
+import { DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { OnInit, OnDestroy } from '@angular/core';
+import { LoadingStateContextInstance } from '@dereekb/rxjs';
+import { DbxLoadingComponent } from './loading.component';
+import * as i0 from "@angular/core";
+/**
+ * Context used for linking a loadingComponent to an ActionContext by providing a LoadingContext.
+ */
+export declare class DbxActionLoadingContextDirective implements OnInit, OnDestroy {
+    readonly loadingComponent: DbxLoadingComponent;
+    readonly source: DbxActionContextStoreSourceInstance;
+    private _context;
+    constructor(loadingComponent: DbxLoadingComponent, source: DbxActionContextStoreSourceInstance);
+    get context(): LoadingStateContextInstance<any, import("@dereekb/rxjs").LoadingState<any>>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionLoadingContextDirective, [{ host: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionLoadingContextDirective, "[dbxActionLoadingContext]", never, {}, {}, never>;
+}

package/lib/loading/loading.module.d.ts

@@ -2,12 +2,13 @@ import * as i0 from "@angular/core";
 import * as i1 from "./loading.component";
 import * as i2 from "./basic-loading.component";
 import * as i3 from "./loading-progress.component";
-import * as i4 from "@angular/common";
-import * as i5 from "../error/error.module";
-import * as i6 from "@angular/material/progress-spinner";
-import * as i7 from "@angular/material/progress-bar";
+import * as i4 from "./loading.action.directive";
+import * as i5 from "@angular/common";
+import * as i6 from "../error/error.module";
+import * as i7 from "@angular/material/progress-spinner";
+import * as i8 from "@angular/material/progress-bar";
 export declare class DbxLoadingModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxLoadingModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxLoadingModule, [typeof i1.DbxLoadingComponent, typeof i2.DbxBasicLoadingComponent, typeof i3.DbxLoadingProgressComponent], [typeof i4.CommonModule, typeof i5.DbxReadableErrorModule, typeof i6.MatProgressSpinnerModule, typeof i7.MatProgressBarModule], [typeof i1.DbxLoadingComponent, typeof i2.DbxBasicLoadingComponent, typeof i3.DbxLoadingProgressComponent, typeof i6.MatProgressSpinnerModule, typeof i7.MatProgressBarModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxLoadingModule, [typeof i1.DbxLoadingComponent, typeof i2.DbxBasicLoadingComponent, typeof i3.DbxLoadingProgressComponent, typeof i4.DbxActionLoadingContextDirective], [typeof i5.CommonModule, typeof i6.DbxReadableErrorModule, typeof i7.MatProgressSpinnerModule, typeof i8.MatProgressBarModule], [typeof i1.DbxLoadingComponent, typeof i2.DbxBasicLoadingComponent, typeof i3.DbxLoadingProgressComponent, typeof i7.MatProgressSpinnerModule, typeof i8.MatProgressBarModule, typeof i4.DbxActionLoadingContextDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxLoadingModule>;
 }