@dereekb/dbx-web 2.1.0 → 4.0.1

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

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

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

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DbxActionProgressComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionProgressComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxActionProgressComponent, "dbx-action-progress", never, {}, {}, never, never>;
+}

package/lib/action/index.d.ts

@@ -3,3 +3,4 @@ export * from './transition';
 export * from './action.confirm.directive';
 export * from './action.module';
 export * from './key.trigger.directive';
+export * from './action.progress.component';

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

@@ -1,5 +1,5 @@
 import { DbxActionContextSourceReference } from "@dereekb/dbx-core";
-import { Milliseconds, Maybe, ObjectOrGetter, Getter } from "@dereekb/util";
+import { Milliseconds, Maybe, GetterOrValue, Getter } from "@dereekb/util";
 import { DbxActionSnackbarDisplayConfig, DbxActionSnackbarEvent } from "./action.snackbar";
 export interface DbxActionSnackbarGeneratorInput<O = any> {
     event: DbxActionSnackbarEvent<O>;
@@ -12,10 +12,10 @@ export interface DbxActionSnackbarGeneratorUndoInputConfig {
 }
 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>;
+    idle?: GetterOrValue<DbxMakeActionSnackbarGeneratorEventConfiguration>;
+    loading?: GetterOrValue<DbxMakeActionSnackbarGeneratorEventConfiguration>;
+    success?: GetterOrValue<DbxMakeActionSnackbarGeneratorEventConfiguration>;
+    error?: GetterOrValue<DbxMakeActionSnackbarGeneratorEventConfiguration>;
 }
 export interface DbxMakeActionSnackbarGeneratorEventConfiguration extends Omit<DbxActionSnackbarDisplayConfig, 'action'> {
     /**

package/lib/button/_button.scss

@@ -6,10 +6,31 @@ $button-spacer-width: 6px;
 // MARK: Mixin
 @mixin core() {
 
+  .dbx-wide-button {
+    .dbx-button {
+      min-width: 120px;
+      max-width: 100%;
+    }
+  }
+
+  .dbx-grow-button {
+    width: 100%;
+
+    .dbx-button {
+      width: 100%;
+    }
+  }
+
   .dbx-button-spacer {
     padding-right: $button-spacer-width;
   }
 
+  .dbx-spinner-custom.mat-progress-spinner.mat-accent circle,
+  .dbx-spinner-custom.mat-spinner.mat-accent circle {
+    // mat-spinners marked with dbx-spinner-custom should allow the stroke to be inherited.
+    stroke: unset !important;
+  }
+
 }
 
 @mixin color($theme-config) {}

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

@@ -1,6 +1,7 @@
 import { ThemePalette } from '@angular/material/core';
 import { AbstractDbxButtonDirective } from '@dereekb/dbx-core';
-import { MatProgressButtonOptions } from 'mat-progress-buttons';
+import { Maybe } from '@dereekb/util';
+import { DbxProgressButtonOptions } from './progress/button.progress.config';
 import * as i0 from "@angular/core";
 export declare enum DbxButtonDisplayType {
     RAISED = 0,
@@ -19,7 +20,10 @@ export declare class DbxButtonComponent extends AbstractDbxButtonDirective {
     get flat(): boolean;
     set flat(flat: boolean);
     color: ThemePalette;
-    get btnOptions(): MatProgressButtonOptions;
+    customButtonColor: Maybe<string>;
+    customTextColor: Maybe<string>;
+    customSpinnerColor: Maybe<string>;
+    get btnOptions(): DbxProgressButtonOptions;
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxButtonComponent, "dbx-button", never, { "type": "type"; "raised": "raised"; "stroked": "stroked"; "flat": "flat"; "color": "color"; "customButtonColor": "customButtonColor"; "customTextColor": "customTextColor"; "customSpinnerColor": "customSpinnerColor"; }, {}, never, ["*"]>;
 }

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

@@ -2,10 +2,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/common";
-import * as i4 from "mat-progress-buttons";
+import * as i4 from "./progress/button.progress.module";
 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.DbxButtonSpacerDirective], [typeof i3.CommonModule, typeof i4.MatProgressButtonsModule], [typeof i5.DbxCoreButtonModule, typeof i4.MatProgressButtonsModule, typeof i1.DbxButtonComponent, typeof i2.DbxButtonSpacerDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxButtonModule, [typeof i1.DbxButtonComponent, typeof i2.DbxButtonSpacerDirective], [typeof i3.CommonModule, typeof i4.DbxProgressButtonsModule], [typeof i5.DbxCoreButtonModule, typeof i4.DbxProgressButtonsModule, typeof i1.DbxButtonComponent, typeof i2.DbxButtonSpacerDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxButtonModule>;
 }

package/lib/button/index.d.ts

@@ -1,3 +1,4 @@
+export * from './progress';
 export * from './button.component';
 export * from './button.spacer.component';
 export * from './button.module';

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

@@ -0,0 +1,6 @@
+import { AbstractProgressButtonDirective } from './base.progress.button.directive';
+import * as i0 from "@angular/core";
+export declare class DbxBarButtonComponent extends AbstractProgressButtonDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxBarButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxBarButtonComponent, "dbx-bar-button", never, {}, {}, never, ["*"]>;
+}

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

@@ -0,0 +1,23 @@
+:host {
+  button {
+    &.working {
+      cursor: not-allowed;
+    }
+    &.fullWidth {
+      width: 100%;
+    }
+    .bar {
+      position:absolute;
+      top: 0;
+      left: 0;
+    }
+    mat-icon {
+      padding-right: 5px;
+      &.is-mat-icon {
+        font-size: 18px;
+        position: relative;
+        top: 3px;
+      }
+    }
+  }
+}

package/lib/button/progress/base.progress.button.directive.d.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
+import { Observable } from 'rxjs';
+import { EventEmitter } from '@angular/core';
+import { DbxProgressButtonGlobalConfig, DbxProgressButtonOptions } from './button.progress.config';
+import * as i0 from "@angular/core";
+export declare abstract class AbstractProgressButtonDirective extends AbstractSubscriptionDirective implements OnInit, OnDestroy {
+    private globalConfig;
+    readonly cdRef: ChangeDetectorRef;
+    private _computedOptions;
+    private _working;
+    private _disabled;
+    private _buttonId;
+    private _options;
+    readonly globalOptions$: Observable<Maybe<DbxProgressButtonOptions>>;
+    readonly options$: Observable<DbxProgressButtonOptions>;
+    readonly btnClick: EventEmitter<MouseEvent>;
+    constructor(globalConfig: DbxProgressButtonGlobalConfig, cdRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    handleClick(event: MouseEvent): void;
+    get options(): DbxProgressButtonOptions;
+    get customSpinnerStyle(): {
+        stroke: string;
+    } | undefined;
+    set options(options: DbxProgressButtonOptions);
+    set buttonId(buttonId: string);
+    /**
+     * @deprecated
+     */
+    set active(active: boolean);
+    set working(working: boolean);
+    set disabled(disabled: boolean);
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractProgressButtonDirective, [{ optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractProgressButtonDirective, never, never, { "options": "options"; "buttonId": "buttonId"; "active": "active"; "working": "working"; "disabled": "disabled"; }, { "btnClick": "btnClick"; }, never>;
+}

package/lib/button/progress/button.progress.config.d.ts

@@ -0,0 +1,51 @@
+import { InjectionToken } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
+import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import { Maybe } from '@dereekb/util';
+export interface DbxProgressButtonOptions {
+    /**
+     * @deprecated alias for working
+     */
+    active?: boolean;
+    working?: boolean;
+    text?: string;
+    spinnerText?: string;
+    buttonColor?: ThemePalette;
+    spinnerColor?: ThemePalette;
+    barColor?: ThemePalette;
+    raised?: boolean;
+    stroked?: boolean;
+    flat?: boolean;
+    fab?: boolean;
+    spinnerSize?: number;
+    spinnerRatio?: number;
+    mode?: ProgressSpinnerMode;
+    value?: number;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    icon?: DbxProgressButtonIcon;
+    type?: string;
+    customStyle?: {
+        [key: string]: any;
+    };
+    customClass?: string;
+    /**
+     * Custom spinner color. Overrides the normal spinner color if provided.
+     */
+    customSpinnerColor?: Maybe<string>;
+    buttonIcon?: DbxProgressButtonIcon;
+    id?: string;
+}
+export interface DbxProgressButtonIcon {
+    color?: ThemePalette;
+    fontIcon?: string;
+    fontSet?: string;
+    inline?: boolean;
+    svgIcon?: string;
+    customClass?: string;
+}
+export interface DbxProgressButtonTargetedConfig extends DbxProgressButtonOptions {
+    id?: string;
+}
+export declare type DbxProgressButtonGlobalConfig = DbxProgressButtonTargetedConfig[];
+export declare const DBX_MAT_PROGRESS_BUTTON_GLOBAL_CONFIG: InjectionToken<DbxProgressButtonGlobalConfig>;

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

@@ -0,0 +1,17 @@
+import { ModuleWithProviders } from '@angular/core';
+import { DbxProgressButtonGlobalConfig } from './button.progress.config';
+import * as i0 from "@angular/core";
+import * as i1 from "./spinner.button.component";
+import * as i2 from "./bar.button.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/material/button";
+import * as i5 from "@angular/material/progress-bar";
+import * as i6 from "@angular/material/progress-spinner";
+import * as i7 from "@angular/material/core";
+import * as i8 from "@angular/material/icon";
+export declare class DbxProgressButtonsModule {
+    static forRoot(config?: DbxProgressButtonGlobalConfig): ModuleWithProviders<DbxProgressButtonsModule>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxProgressButtonsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxProgressButtonsModule, [typeof i1.DbxSpinnerButtonComponent, typeof i2.DbxBarButtonComponent], [typeof i3.CommonModule, typeof i4.MatButtonModule, typeof i5.MatProgressBarModule, typeof i6.MatProgressSpinnerModule, typeof i7.MatRippleModule, typeof i8.MatIconModule], [typeof i1.DbxSpinnerButtonComponent, typeof i2.DbxBarButtonComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxProgressButtonsModule>;
+}

package/lib/button/progress/index.d.ts

@@ -0,0 +1,4 @@
+export * from './bar.button.component';
+export * from './spinner.button.component';
+export * from './button.progress.module';
+export * from './button.progress.config';

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

@@ -0,0 +1,9 @@
+import { ElementRef } from '@angular/core';
+import { AbstractProgressButtonDirective } from './base.progress.button.directive';
+import * as i0 from "@angular/core";
+export declare class DbxSpinnerButtonComponent extends AbstractProgressButtonDirective {
+    readonly buttonRef: ElementRef<HTMLElement>;
+    calcSpinnerSize(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxSpinnerButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSpinnerButtonComponent, "dbx-spinner-button", never, {}, {}, never, ["*"]>;
+}

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

@@ -0,0 +1,44 @@
+:host {
+  button {
+    outline: none;
+    &.working {
+      cursor: not-allowed;
+    }
+    & ::ng-deep .mat-button-wrapper {
+      display:flex;
+      align-items: center;
+      justify-content: center;
+    }
+    &.fullWidth {
+      width: 100%;
+    }
+    .spinner {
+      position: absolute;
+      // top: 25%;
+      opacity:0;
+      transition: opacity .3s ease-in-out;
+      &.working {
+        opacity: 1;
+      }
+    }
+    .button-text {
+      opacity: 1;
+      transition: opacity .3s ease-in-out;
+      &.working {
+        opacity: 0;
+      }
+    }
+    mat-icon.mat-button-icon {
+      padding-right: 5px;
+      transition: opacity .3s ease-in-out;
+      &.is-mat-icon {
+        font-size: 18px;
+        position: relative;
+        top: 3px;
+      }
+      &.working {
+        opacity: 0;
+      }
+    }
+  }
+}

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

@@ -2,7 +2,6 @@ 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 "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]>;
@@ -12,10 +11,9 @@ export declare class DbxWebModule {
  * 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 ɵmod: i0.ɵɵNgModuleDeclaration<DbxWebRootModule, never, never, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxWebRootModule>;
 }

package/lib/interaction/dialog/_dialog.scss

@@ -1,10 +1,26 @@
 @use '../../style/theming';
 
 // MARK: Variables
-
+$dialog-width: 400px;
+$max-dialog-width: 90vw;
 
 // MARK: Mixin
-@mixin core() {}
+@mixin core() {
+
+  .dbx-dialog-content {
+
+    &.normal-dialog-content {
+      width: $dialog-width;
+      min-width: $dialog-width;
+    }
+
+    &.wide-dialog-content {
+      width: $max-dialog-width;
+    }
+    
+  }
+
+}
 
 @mixin color($theme-config) {}
 

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

@@ -8,7 +8,7 @@ import * as i0 from "@angular/core";
 export declare abstract class AbstractDialogDirective<R = any, D = any, T = any> extends AbstractTransitionWatcherDirective {
     readonly data: D;
     readonly dialogRef: MatDialogRef<T, R>;
-    constructor(data: D, dialogRef: MatDialogRef<T, R>, dbNgxRouterTransitionService: DbxRouterTransitionService, ngZone: NgZone);
+    constructor(data: D, dialogRef: MatDialogRef<T, R>, dbxRouterTransitionService: DbxRouterTransitionService, ngZone: NgZone);
     protected updateForSuccessfulTransition(): void;
     returnValue(value?: R): void;
     close(value?: R): void;

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

@@ -10,6 +10,6 @@ import * as i8 from "@angular/material/icon";
 import * as i9 from "@angular/material/button";
 export declare class DbxFilterInteractionModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFilterInteractionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFilterInteractionModule, [typeof i1.DbxFilterPopoverComponent, typeof i2.DbxFilterPopoverButtonComponent, typeof i3.DbxFilterWrapperComponent], [typeof i4.CommonModule, typeof i5.DbxPopoverInteractionModule, typeof i6.DbxCoreFilterModule, typeof i6.DbxInjectedComponentModule, typeof i7.FlexLayoutModule, typeof i8.MatIconModule, typeof i9.MatButtonModule], [typeof i6.DbxCoreFilterModule, typeof i2.DbxFilterPopoverButtonComponent, typeof i3.DbxFilterWrapperComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFilterInteractionModule, [typeof i1.DbxFilterPopoverComponent, typeof i2.DbxFilterPopoverButtonComponent, typeof i3.DbxFilterWrapperComponent], [typeof i4.CommonModule, typeof i5.DbxPopoverInteractionModule, typeof i6.DbxCoreFilterModule, typeof i6.DbxInjectionComponentModule, typeof i7.FlexLayoutModule, typeof i8.MatIconModule, typeof i9.MatButtonModule], [typeof i6.DbxCoreFilterModule, typeof i2.DbxFilterPopoverButtonComponent, typeof i3.DbxFilterWrapperComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFilterInteractionModule>;
 }

package/lib/interaction/filter/filter.popover.component.d.ts

@@ -1,4 +1,4 @@
-import { DbxInjectedComponentConfig } from '@dereekb/dbx-core';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { ElementRef, Type, OnInit } from '@angular/core';
 import { NgPopoverRef } from 'ng-overlay-container';
 import { Observable } from 'rxjs';
@@ -40,7 +40,7 @@ export declare class DbxFilterPopoverComponent<F> extends AbstractPopoverDirecti
     readonly showSwitchButtons: boolean;
     private _showPreset;
     readonly showPreset$: Observable<boolean>;
-    readonly config$: Observable<DbxInjectedComponentConfig>;
+    readonly config$: Observable<DbxInjectionComponentConfig>;
     static openPopover<F>(popupService: DbxPopoverService, { origin, initialFilterObs: inputSource, connector, customFilterComponentClass, presetFilterComponentClass }: DbxFilterPopoverComponentParams<F>, popoverKey?: DbxPopoverKey): NgPopoverRef;
     constructor(popover: DbxPopoverComponent);
     get config(): DbxFilterComponentParams<F>;

package/lib/interaction/popover/popover.component.d.ts

@@ -1,6 +1,6 @@
 import { NgZone, Type, OnInit, OnDestroy, ElementRef } from '@angular/core';
 import { NgOverlayContainerConfiguration, NgPopoverRef } from 'ng-overlay-container';
-import { AbstractTransitionWatcherDirective, DbxRouterTransitionService, DbxInjectedComponentConfig } from '@dereekb/dbx-core';
+import { AbstractTransitionWatcherDirective, DbxRouterTransitionService, DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { LockSet } from '@dereekb/rxjs';
 import { CompactContextStore } from '../../layout';
 import { Maybe } from '@dereekb/util';
@@ -50,14 +50,14 @@ export declare class DbxPopoverComponent<O = any, I = any, T = any> extends Abst
     private popoverRef;
     private compactContextState;
     readonly lockSet: LockSet;
-    readonly contentConfig: DbxInjectedComponentConfig;
+    readonly contentConfig: DbxInjectionComponentConfig;
     private _startedClosing;
     private readonly _closing;
     private _triggerCloseKeys;
     readonly isClosing$: import("rxjs").Observable<boolean>;
     readonly closing$: import("rxjs").Observable<boolean>;
     getClosingValueFn?: (value?: I) => Promise<O>;
-    constructor(popoverRef: NgPopoverRef<FullDbxPopoverComponentConfig<O, I, T>, O>, compactContextState: CompactContextStore, dbNgxRouterTransitionService: DbxRouterTransitionService, ngZone: NgZone);
+    constructor(popoverRef: NgPopoverRef<FullDbxPopoverComponentConfig<O, I, T>, O>, compactContextState: CompactContextStore, dbxRouterTransitionService: DbxRouterTransitionService, ngZone: NgZone);
     get config(): FullDbxPopoverComponentConfig<O, I, T>;
     get key(): DbxPopoverKey;
     get data(): Maybe<I>;

package/lib/interaction/popover/popover.coordinator.service.d.ts

@@ -1,11 +1,13 @@
 import { DbxPopoverKey, DbxPopoverController } from './popover';
+import { OnDestroy } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Used for coordinating popovers and closing/replacing existing ones when a new popover of the same name appears.
  */
-export declare class DbxPopoverCoordinatorService {
+export declare class DbxPopoverCoordinatorService implements OnDestroy {
     private _popovers;
     readonly popovers$: import("rxjs").Observable<Map<string, DbxPopoverController<any, any>>>;
+    ngOnDestroy(): void;
     get popovers(): Map<DbxPopoverKey, DbxPopoverController>;
     addPopover(popover: DbxPopoverController): void;
     removePopover(key: DbxPopoverKey, popover?: DbxPopoverController): void;

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

@@ -1,4 +1,3 @@
-import { ModuleWithProviders } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "./popover.action.directive";
 import * as i2 from "./popover.component";
@@ -20,8 +19,7 @@ import * as i17 from "@dereekb/dbx-core";
 import * as i18 from "ng-overlay-container";
 import * as i19 from "angular-resize-event";
 export declare class DbxPopoverInteractionModule {
-    static forRoot(): ModuleWithProviders<DbxPopoverInteractionModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPopoverInteractionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxPopoverInteractionModule, [typeof i1.DbxActionPopoverDirective, typeof i2.DbxPopoverComponent, typeof i3.DbxPopoverCoordinatorComponent, typeof i4.DbxPopoverContentComponent, typeof i5.DbxPopoverControlsDirective, typeof i6.DbxPopoverHeaderComponent, typeof i7.DbxPopoverScrollContentComponent], [typeof i8.CommonModule, typeof i9.MatIconModule, typeof i10.MatButtonModule, typeof i11.MatDividerModule, typeof i12.DbxButtonModule, typeof i13.DbxAnchorModule, typeof i14.DbxActionModule, typeof i15.DbxKeypressModule, typeof i16.DbxStyleLayoutModule, typeof i17.DbxInjectedComponentModule, typeof i18.NgOverlayContainerModule, typeof i19.AngularResizeEventModule], [typeof i1.DbxActionPopoverDirective, typeof i4.DbxPopoverContentComponent, typeof i5.DbxPopoverControlsDirective, typeof i6.DbxPopoverHeaderComponent, typeof i7.DbxPopoverScrollContentComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxPopoverInteractionModule, [typeof i1.DbxActionPopoverDirective, typeof i2.DbxPopoverComponent, typeof i3.DbxPopoverCoordinatorComponent, typeof i4.DbxPopoverContentComponent, typeof i5.DbxPopoverControlsDirective, typeof i6.DbxPopoverHeaderComponent, typeof i7.DbxPopoverScrollContentComponent], [typeof i8.CommonModule, typeof i9.MatIconModule, typeof i10.MatButtonModule, typeof i11.MatDividerModule, typeof i12.DbxButtonModule, typeof i13.DbxRouterAnchorModule, typeof i14.DbxActionModule, typeof i15.DbxKeypressModule, typeof i16.DbxStyleLayoutModule, typeof i17.DbxInjectionComponentModule, typeof i18.NgOverlayContainerModule, typeof i19.AngularResizeEventModule], [typeof i1.DbxActionPopoverDirective, typeof i4.DbxPopoverContentComponent, typeof i5.DbxPopoverControlsDirective, typeof i6.DbxPopoverHeaderComponent, typeof i7.DbxPopoverScrollContentComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxPopoverInteractionModule>;
 }

package/lib/interaction/popup/popup.component.d.ts

@@ -3,7 +3,7 @@ import { NgPopoverRef } from 'ng-overlay-container';
 import { Maybe } from '@dereekb/util';
 import { CompactContextStore } from '../../layout';
 import { PopupPosition, PopupPositionOffset } from './popup.position.strategy';
-import { AbstractTransitionWatcherDirective, DbxInjectedComponentConfig, DbxRouterTransitionService } from '@dereekb/dbx-core';
+import { AbstractTransitionWatcherDirective, DbxInjectionComponentConfig, DbxRouterTransitionService } from '@dereekb/dbx-core';
 import { DbxPopupController, DbxPopupKey, DbxPopupWindowState } from './popup';
 import * as i0 from "@angular/core";
 export declare const APP_POPUP_NORMAL_WIDTH = "700px";
@@ -34,14 +34,14 @@ export declare class DbxPopupComponent<O = any, I = any, T = any> extends Abstra
     private popoverRef;
     private compactContextState;
     private _position;
-    readonly contentConfig: DbxInjectedComponentConfig;
+    readonly contentConfig: DbxInjectionComponentConfig;
     private readonly closing;
     readonly isClosing$: import("rxjs").Observable<boolean>;
     readonly closing$: import("rxjs").Observable<boolean>;
     private readonly _windowState;
     readonly windowState$: import("rxjs").Observable<DbxPopupWindowState>;
     getClosingValueFn?: (value?: I) => Promise<O>;
-    constructor(popoverRef: NgPopoverRef<DbxPopupComponentConfig<O, I, T>, O>, compactContextState: CompactContextStore, dbNgxRouterTransitionService: DbxRouterTransitionService, ngZone: NgZone);
+    constructor(popoverRef: NgPopoverRef<DbxPopupComponentConfig<O, I, T>, O>, compactContextState: CompactContextStore, dbxRouterTransitionService: DbxRouterTransitionService, ngZone: NgZone);
     get config(): DbxPopupComponentConfig<O, I, T>;
     get key(): DbxPopupKey;
     get data(): Maybe<I>;

package/lib/interaction/popup/popup.coordinator.service.d.ts

@@ -1,12 +1,14 @@
 import { DbxPopupKey, DbxPopupController } from './popup';
+import { OnDestroy } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Used for coordinating popups and closing/replacing existing ones when a new popup of the same name appears.
  */
-export declare class DbxPopupCoordinatorService {
+export declare class DbxPopupCoordinatorService implements OnDestroy {
     private _popups;
     readonly popups$: import("rxjs").Observable<Map<string, DbxPopupController<any, any>>>;
     constructor();
+    ngOnDestroy(): void;
     get popups(): Map<DbxPopupKey, DbxPopupController>;
     addPopup(popup: DbxPopupController): void;
     removePopup(key: DbxPopupKey, popup?: DbxPopupController): void;

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

@@ -1,4 +1,3 @@
-import { ModuleWithProviders } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "./popup.component";
 import * as i2 from "./popup.coordinator.component";
@@ -15,8 +14,7 @@ import * as i12 from "../../layout/style/style.layout.module";
 import * as i13 from "@dereekb/dbx-core";
 import * as i14 from "ng-overlay-container";
 export declare class DbxPopupInteractionModule {
-    static forRoot(): ModuleWithProviders<DbxPopupInteractionModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPopupInteractionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxPopupInteractionModule, [typeof i1.DbxPopupComponent, typeof i2.DbxPopupCoordinatorComponent, typeof i3.DbxPopupContentComponent, typeof i4.DbxPopupControlsComponent, typeof i5.DbxPopupControlButtonsComponent], [typeof i6.CommonModule, typeof i7.MatIconModule, typeof i8.MatButtonModule, typeof i9.DbxButtonModule, typeof i10.DbxAnchorModule, typeof i11.DbxActionModule, typeof i12.DbxStyleLayoutModule, typeof i13.DbxInjectedComponentModule, typeof i14.NgOverlayContainerModule], [typeof i3.DbxPopupContentComponent, typeof i4.DbxPopupControlsComponent, typeof i5.DbxPopupControlButtonsComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxPopupInteractionModule, [typeof i1.DbxPopupComponent, typeof i2.DbxPopupCoordinatorComponent, typeof i3.DbxPopupContentComponent, typeof i4.DbxPopupControlsComponent, typeof i5.DbxPopupControlButtonsComponent], [typeof i6.CommonModule, typeof i7.MatIconModule, typeof i8.MatButtonModule, typeof i9.DbxButtonModule, typeof i10.DbxRouterAnchorModule, typeof i11.DbxActionModule, typeof i12.DbxStyleLayoutModule, typeof i13.DbxInjectionComponentModule, typeof i14.NgOverlayContainerModule], [typeof i3.DbxPopupContentComponent, typeof i4.DbxPopupControlsComponent, typeof i5.DbxPopupControlButtonsComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxPopupInteractionModule>;
 }

package/lib/interaction/prompt/prompt.confirm.dialog.component.d.ts

@@ -1,5 +1,5 @@
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { DbxInjectedComponentConfig } from '@dereekb/dbx-core';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { OnInit } from '@angular/core';
 import { AbstractDialogDirective } from '../dialog/abstract.dialog.directive';
 import { DbxPromptConfirmConfig, DbxPromptConfirmTypes } from './prompt.confirm.component';
@@ -10,11 +10,11 @@ export declare const DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG: {
     type: DbxPromptConfirmTypes;
 };
 export interface DbxPromptConfirmDialogConfig extends DbxPromptConfirmConfig {
-    component?: DbxInjectedComponentConfig;
+    component?: DbxInjectionComponentConfig;
 }
 export declare class DbxPromptConfirmDialogComponent extends AbstractDialogDirective<boolean, DbxPromptConfirmDialogConfig> implements OnInit {
     get config(): DbxPromptConfirmDialogConfig;
-    get injectedConfig(): Maybe<DbxInjectedComponentConfig>;
+    get injectionConfig(): Maybe<DbxInjectionComponentConfig>;
     static openDialog(matDialog: MatDialog, config?: DbxPromptConfirmDialogConfig): MatDialogRef<DbxPromptConfirmDialogComponent, boolean>;
     confirm(): void;
     cancel(): void;

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

@@ -17,6 +17,6 @@ import * as i15 from "../../layout/section/section.layout.module";
 import * as i16 from "../../layout/content/content.layout.module";
 export declare class DbxPromptModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPromptModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxPromptModule, [typeof i1.DbxPromptComponent, typeof i2.DbxPromptBoxComponent, typeof i3.DbxPromptPageComponent, typeof i4.DbxPromptConfirmComponent, typeof i5.DbxPromptConfirmButtonDirective, typeof i6.DbxPromptConfirmDialogComponent, typeof i7.DbxPromptConfirmDirective], [typeof i8.CommonModule, typeof i9.MatDialogModule, typeof i10.MatButtonModule, typeof i11.DbxTextModule, typeof i12.DbxButtonModule, typeof i13.DbxInjectedComponentModule, typeof i14.DbxDialogInteractionModule, typeof i15.DbxSectionLayoutModule, typeof i16.DbxContentLayoutModule], [typeof i1.DbxPromptComponent, typeof i2.DbxPromptBoxComponent, typeof i3.DbxPromptPageComponent, typeof i4.DbxPromptConfirmComponent, typeof i5.DbxPromptConfirmButtonDirective, typeof i7.DbxPromptConfirmDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxPromptModule, [typeof i1.DbxPromptComponent, typeof i2.DbxPromptBoxComponent, typeof i3.DbxPromptPageComponent, typeof i4.DbxPromptConfirmComponent, typeof i5.DbxPromptConfirmButtonDirective, typeof i6.DbxPromptConfirmDialogComponent, typeof i7.DbxPromptConfirmDirective], [typeof i8.CommonModule, typeof i9.MatDialogModule, typeof i10.MatButtonModule, typeof i11.DbxTextModule, typeof i12.DbxButtonModule, typeof i13.DbxInjectionComponentModule, typeof i14.DbxDialogInteractionModule, typeof i15.DbxSectionLayoutModule, typeof i16.DbxContentLayoutModule], [typeof i1.DbxPromptComponent, typeof i2.DbxPromptBoxComponent, typeof i3.DbxPromptPageComponent, typeof i4.DbxPromptConfirmComponent, typeof i5.DbxPromptConfirmButtonDirective, typeof i7.DbxPromptConfirmDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxPromptModule>;
 }

package/lib/layout/block/_block.scss

@@ -1,22 +1,25 @@
 @use '../../style/theming';
 
 // MARK: Variables
-
+$two-block-top-height-init-height: 50px;
+$two-block-top-height-var: --dbx-two-block-top-height;
 
 // MARK: Mixin
 @mixin core() {
 
-  // todo
+  .dbx-two-block.dbx-two-block-fixed-top {
+    height: 100%;
+  }
 
-  .two-blocks {
+  .dbx-two-block-content {
     height: 100%;
-    --two-blocks-top-height: 50;
-  
-    .bottom-block {
-      height: calc(100% - var(--two-blocks-top-height));
+    #{$two-block-top-height-var}: $two-block-top-height-init-height;
+
+    .dbx-two-block-bottom {
+      height: calc(100% - var($two-block-top-height-var));
     }
   }
-      
+
 }
 
 @mixin color($theme-config) {}

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

@@ -8,6 +8,6 @@ import * as i4 from "angular-resize-event";
  */
 export declare class DbxBlockLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxBlockLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxBlockLayoutModule, [typeof i1.DbxTwoBlocksComponent], [typeof i2.CommonModule, typeof i3.DbxAnchorModule, typeof i4.AngularResizeEventModule], [typeof i1.DbxTwoBlocksComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxBlockLayoutModule, [typeof i1.DbxTwoBlocksComponent], [typeof i2.CommonModule, typeof i3.DbxRouterAnchorModule, typeof i4.AngularResizeEventModule], [typeof i1.DbxTwoBlocksComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxBlockLayoutModule>;
 }