@dereekb/dbx-web 2.0.0 → 4.0.0

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

@@ -1,28 +1,25 @@
-import { ModuleWithProviders } from '@angular/core';
 import * as i0 from "@angular/core";
-import * as i1 from "./popover.action.button.directive";
-import * as i2 from "./popover.action.directive";
-import * as i3 from "./popover.component";
-import * as i4 from "./popover.coordinator.component";
-import * as i5 from "./popover.content.component";
-import * as i6 from "./popover.controls.directive";
-import * as i7 from "./popover.header.component";
-import * as i8 from "./popover.scroll.content.component";
-import * as i9 from "@angular/common";
-import * as i10 from "@angular/material/icon";
-import * as i11 from "@angular/material/button";
-import * as i12 from "@angular/material/divider";
-import * as i13 from "../../button/button.module";
-import * as i14 from "../../router/layout/anchor/anchor.module";
-import * as i15 from "../../action/action.module";
-import * as i16 from "../../keypress/keypress.module";
-import * as i17 from "../../layout/style/style.layout.module";
-import * as i18 from "@dereekb/dbx-core";
-import * as i19 from "ng-overlay-container";
-import * as i20 from "angular-resize-event";
+import * as i1 from "./popover.action.directive";
+import * as i2 from "./popover.component";
+import * as i3 from "./popover.coordinator.component";
+import * as i4 from "./popover.content.component";
+import * as i5 from "./popover.controls.directive";
+import * as i6 from "./popover.header.component";
+import * as i7 from "./popover.scroll.content.component";
+import * as i8 from "@angular/common";
+import * as i9 from "@angular/material/icon";
+import * as i10 from "@angular/material/button";
+import * as i11 from "@angular/material/divider";
+import * as i12 from "../../button/button.module";
+import * as i13 from "../../router/layout/anchor/anchor.module";
+import * as i14 from "../../action/action.module";
+import * as i15 from "../../keypress/keypress.module";
+import * as i16 from "../../layout/style/style.layout.module";
+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.DbxPopoverActionButtonDirective, typeof i2.DbxPopoverActionDirective, typeof i3.DbxPopoverComponent, typeof i4.DbxPopoverCoordinatorComponent, typeof i5.DbxPopoverContentComponent, typeof i6.DbxPopoverControlsDirective, typeof i7.DbxPopoverHeaderComponent, typeof i8.DbxPopoverScrollContentComponent], [typeof i9.CommonModule, typeof i10.MatIconModule, typeof i11.MatButtonModule, typeof i12.MatDividerModule, typeof i13.DbxButtonModule, typeof i14.DbxAnchorModule, typeof i15.DbxActionModule, typeof i16.DbxKeypressModule, typeof i17.DbxStyleLayoutModule, typeof i18.DbxInjectedComponentModule, typeof i19.NgOverlayContainerModule, typeof i20.AngularResizeEventModule], [typeof i1.DbxPopoverActionButtonDirective, typeof i2.DbxPopoverActionDirective, typeof i5.DbxPopoverContentComponent, typeof i6.DbxPopoverControlsDirective, typeof i7.DbxPopoverHeaderComponent, typeof i8.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>;
 }

package/lib/layout/block/two.block.component.d.ts

@@ -9,8 +9,12 @@ import * as i0 from "@angular/core";
  * The height is calculated from 100%.
  */
 export declare class DbxTwoBlocksComponent {
+    /**
+     * Whether or not the top bar should be fixed in place instead of scrolling with the bottom when content is too tall.
+     */
+    fixedTop: boolean;
     twoElement: ElementRef;
     onResized(event: ResizedEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoBlocksComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoBlocksComponent, "dbx-two-block", never, {}, {}, never, ["[top]", "*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoBlocksComponent, "dbx-two-block", never, { "fixedTop": "fixedTop"; }, {}, never, ["[top]", "*"]>;
 }

package/lib/layout/column/_column.scss

@@ -1,12 +1,128 @@
 @use '../../style/theming';
 
 // MARK: Variables
-
+$two-column-left-width-var: theming.$two-column-left-width-var;
+$two-column-left-width: theming.$two-column-left-width;
+$two-column-navbar-height: theming.$content-navbar-height;
+$two-columns-right-padding-size: 6px;
 
 // MARK: Mixin
-@mixin core() {}
+@mixin core() {
+
+  .dbx-two-column {
+    height: 100%;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    overflow-x: hidden;
+
+    .dbx-content-container {
+      margin: 0;
+    }
+
+    .left-column {
+      @include theming.elevation(1);
+
+      width: $two-column-left-width;
+      flex: 0 0 auto;
+
+      overflow: auto;
+      // background: red;
+
+      .two-column-reverse-sizing & {
+        width: calc(100% - #{$two-column-left-width});
+        overflow: hidden;
+      }
+
+      .full-left & {
+        width: 100% !important;
+
+        .right-shown & {
+          width: $two-column-left-width;
+        }
+      }
+    }
+
+
+    .right-column {
+      flex: 1 1 auto;
+      max-width: calc(100% - #{$two-column-left-width});
+      overflow: hidden;
+
+      .two-column-reverse-sizing & {
+        max-width: $two-column-left-width;
+      }
+    }
+  }
+
+  .dbx-two-column-head {
+    padding: 0 6px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
+    height: $two-column-navbar-height;
+
+    display: flex;
+    align-items: center;
+    overflow-y: hidden;
+
+    &.block {
+      display: block;
+    }
+
+    &.full {
+      padding: 0;
+    }
+  }
 
-@mixin color($theme-config) {}
+  .dbx-two-column-right {
+    height: 100%;
+
+    .dbx-two-column-right-content {
+      height: calc(100% - #{$two-column-navbar-height});
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    .back-button {
+      margin-right: $two-columns-right-padding-size;
+    }
+
+    .right-spacer {
+      padding-right: 5vw;
+    }
+
+    .side-spacer {
+      padding-left: $two-columns-right-padding-size;
+    }
+
+  }
+
+}
+
+@mixin color($theme-config) {
+
+  .dbx-two-column {
+    @include theming.if-small-screen($theme-config) {
+      .left-column {
+        width: 100% !important;
+      }
+
+      .right-column {
+        max-width: 100% !important;
+        width: 100% !important;
+        padding-left: 0 !important;
+      }
+    }
+  }
+
+  .dbx-two-column.right-shown {
+    @include theming.if-small-screen($theme-config) {
+      .left-column {
+        display: none;
+      }
+    }
+  }
+
+}
 
 @mixin typography($typography-config) {}
 

package/lib/layout/column/two/index.d.ts

@@ -1,5 +1,6 @@
 export * from './two.column.back.directive';
 export * from './two.column.component';
+export * from './two.column.context.directive';
 export * from './two.column.full.left.directive';
 export * from './two.column.head.component';
 export * from './two.column.module';

package/lib/layout/column/two/two.column.back.directive.d.ts

@@ -3,14 +3,14 @@ import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { TwoColumnsContextStore } from './two.column.store';
 import * as i0 from "@angular/core";
 /**
- * Used with an DbxTwoColumnsComponent to help respond to a "back" function.
+ * Used with an DbxTwoColumnComponent to help respond to a "back" function.
  */
-export declare class DbxTwoColumnsBackDirective extends AbstractSubscriptionDirective implements OnInit {
+export declare class DbxTwoColumnBackDirective extends AbstractSubscriptionDirective implements OnInit {
     readonly twoColumnsContextStore: TwoColumnsContextStore;
     back: EventEmitter<any>;
     constructor(twoColumnsContextStore: TwoColumnsContextStore);
     ngOnInit(): void;
     backClicked(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnsBackDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnsBackDirective, "[dbxTwoColumnsBack]", never, {}, { "back": "dbxTwoColumnsBack"; }, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnBackDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnBackDirective, "[dbxTwoColumnBack]", never, {}, { "back": "dbxTwoColumnBack"; }, never>;
 }

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

@@ -1,6 +1,15 @@
+import { ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { OnInit } from '@angular/core';
+import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { Observable } from 'rxjs';
 import { TwoColumnsContextStore } from './two.column.store';
 import * as i0 from "@angular/core";
+export interface DbxTwoColumnViewState {
+    showRight: boolean;
+    showFullLeft: boolean;
+    reverseSizing: boolean;
+    inSectionPage: boolean;
+}
 /**
  * Responsive component meant to split a left and right column.
  *
@@ -8,14 +17,21 @@ import * as i0 from "@angular/core";
  *
  * Requires a TwoColumnsContextStore to be provided.
  */
-export declare class DbxTwoColumnsComponent {
+export declare class DbxTwoColumnComponent extends AbstractSubscriptionDirective implements OnInit, OnDestroy {
     readonly twoColumnsContextStore: TwoColumnsContextStore;
+    readonly cdRef: ChangeDetectorRef;
+    private _view;
+    private _reverseSizing;
+    private _inSectionPage;
     readonly showRight$: Observable<boolean>;
-    readonly hideRight$: Observable<boolean>;
     readonly showFullLeft$: Observable<boolean>;
-    constructor(twoColumnsContextStore: TwoColumnsContextStore);
-    reverseSizing: boolean;
-    inSectionPage: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnsComponent, "dbx-two-columns", ["columns"], { "reverseSizing": "reverseSizing"; "inSectionPage": "inSectionPage"; }, {}, never, ["[left]", "[right]"]>;
+    readonly hideRight$: Observable<boolean>;
+    constructor(twoColumnsContextStore: TwoColumnsContextStore, cdRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get v(): DbxTwoColumnViewState;
+    set reverseSizing(reverseSizing: boolean);
+    set inSectionPage(inSectionPage: boolean);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnComponent, "dbx-two-column", ["columns"], { "reverseSizing": "reverseSizing"; "inSectionPage": "inSectionPage"; }, {}, never, ["[left]", "[right]"]>;
 }

package/lib/layout/column/two/two.column.context.directive.d.ts

@@ -0,0 +1,18 @@
+import { OnDestroy } from '@angular/core';
+import { OnInit } from '@angular/core';
+import { Maybe } from '@dereekb/util';
+import { TwoColumnsContextStore } from './two.column.store';
+import * as i0 from "@angular/core";
+/**
+ * Provides a dbxTwoColumnContextStore
+ */
+export declare class DbxTwoColumnContextDirective implements OnInit, OnDestroy {
+    readonly twoColumnsContextStore: TwoColumnsContextStore;
+    private _showRight;
+    constructor(twoColumnsContextStore: TwoColumnsContextStore);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    set showRight(showRight: Maybe<boolean>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnContextDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnContextDirective, "[dbxTwoColumnContext]", never, { "showRight": "showRight"; }, {}, never>;
+}

package/lib/layout/column/two/two.column.full.left.directive.d.ts

@@ -3,9 +3,9 @@ import { OnDestroy } from '@angular/core';
 import { TwoColumnsContextStore } from './two.column.store';
 import * as i0 from "@angular/core";
 /**
- * Used with a DbxTwoColumnsComponent to set the full left to true.
+ * Used with a DbxTwoColumnComponent to set the full left to true.
  */
-export declare class DbxTwoColumnsFullLeftDirective implements OnInit, OnDestroy {
+export declare class DbxTwoColumnFullLeftDirective implements OnInit, OnDestroy {
     private readonly _twoColumnsContextStore;
     private _fullLeft;
     get fullLeft(): boolean;
@@ -13,6 +13,6 @@ export declare class DbxTwoColumnsFullLeftDirective implements OnInit, OnDestroy
     constructor(_twoColumnsContextStore: TwoColumnsContextStore);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnsFullLeftDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnsFullLeftDirective, "[dbxTwoColumnsFullLeft]", never, { "fullLeft": "dbxTwoColumnsFullLeft"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnFullLeftDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnFullLeftDirective, "[dbxTwoColumnFullLeft]", never, { "fullLeft": "dbxTwoColumnFullLeft"; }, {}, never>;
 }

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

@@ -2,9 +2,9 @@ import * as i0 from "@angular/core";
 /**
  * Two Columns related component that sits at the top of the content bodies and wraps content.
  */
-export declare class DbxTwoColumnsColumnHeadComponent {
+export declare class DbxTwoColumnColumnHeadComponent {
     block?: boolean;
     full?: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnsColumnHeadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnsColumnHeadComponent, "dbx-two-columns-head", never, { "block": "block"; "full": "full"; }, {}, never, ["*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnColumnHeadComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnColumnHeadComponent, "dbx-two-column-head", never, { "block": "block"; "full": "full"; }, {}, never, ["*"]>;
 }

package/lib/layout/column/two/two.column.module.d.ts

@@ -5,13 +5,14 @@ import * as i3 from "./two.column.head.component";
 import * as i4 from "./two.column.sref.directive";
 import * as i5 from "./two.column.back.directive";
 import * as i6 from "./two.column.full.left.directive";
-import * as i7 from "@angular/common";
-import * as i8 from "@angular/material/icon";
-import * as i9 from "@angular/material/button";
-import * as i10 from "../../../router/layout/anchor/anchor.module";
-import * as i11 from "../../content/content.layout.module";
+import * as i7 from "./two.column.context.directive";
+import * as i8 from "@angular/common";
+import * as i9 from "@angular/material/icon";
+import * as i10 from "@angular/material/button";
+import * as i11 from "../../../router/layout/anchor/anchor.module";
+import * as i12 from "../../content/content.layout.module";
 export declare class DbxTwoColumnLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTwoColumnLayoutModule, [typeof i1.DbxTwoColumnsComponent, typeof i2.DbxTwoColumnsRightComponent, typeof i3.DbxTwoColumnsColumnHeadComponent, typeof i4.DbxTwoColumnsSrefDirective, typeof i5.DbxTwoColumnsBackDirective, typeof i6.DbxTwoColumnsFullLeftDirective], [typeof i7.CommonModule, typeof i8.MatIconModule, typeof i9.MatButtonModule, typeof i10.DbxAnchorModule, typeof i11.DbxContentLayoutModule], [typeof i1.DbxTwoColumnsComponent, typeof i2.DbxTwoColumnsRightComponent, typeof i3.DbxTwoColumnsColumnHeadComponent, typeof i4.DbxTwoColumnsSrefDirective, typeof i5.DbxTwoColumnsBackDirective, typeof i6.DbxTwoColumnsFullLeftDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTwoColumnLayoutModule, [typeof i1.DbxTwoColumnComponent, typeof i2.DbxTwoColumnRightComponent, typeof i3.DbxTwoColumnColumnHeadComponent, typeof i4.DbxTwoColumnSrefDirective, typeof i5.DbxTwoColumnBackDirective, typeof i6.DbxTwoColumnFullLeftDirective, typeof i7.DbxTwoColumnContextDirective], [typeof i8.CommonModule, typeof i9.MatIconModule, typeof i10.MatButtonModule, typeof i11.DbxRouterAnchorModule, typeof i12.DbxContentLayoutModule], [typeof i1.DbxTwoColumnComponent, typeof i2.DbxTwoColumnRightComponent, typeof i3.DbxTwoColumnColumnHeadComponent, typeof i4.DbxTwoColumnSrefDirective, typeof i5.DbxTwoColumnBackDirective, typeof i6.DbxTwoColumnFullLeftDirective, typeof i7.DbxTwoColumnContextDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxTwoColumnLayoutModule>;
 }

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

@@ -6,11 +6,13 @@ import { Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 /**
  * Optional responsive component that wraps content on the right side and shows a navigation bar.
+ *
+ * When rendered it will trigger the context to show left.
  */
-export declare class DbxTwoColumnsRightComponent implements AfterViewInit, OnDestroy {
+export declare class DbxTwoColumnRightComponent implements AfterViewInit, OnDestroy {
     private readonly twoColumnsContextStore;
-    private _showBack;
     header?: string;
+    private _showBack;
     readonly ref$: Observable<Maybe<ClickableAnchor>>;
     readonly showBack$: Observable<boolean>;
     constructor(twoColumnsContextStore: TwoColumnsContextStore);
@@ -19,6 +21,6 @@ export declare class DbxTwoColumnsRightComponent implements AfterViewInit, OnDes
     get showBack(): boolean;
     set showBack(showBack: boolean);
     backClicked(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnsRightComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnsRightComponent, "dbx-two-columns-right", never, { "header": "header"; "showBack": "showBack"; }, {}, never, ["[nav]", "*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnRightComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnRightComponent, "dbx-two-column-right", never, { "header": "header"; "showBack": "showBack"; }, {}, never, ["[nav]", "*"]>;
 }

package/lib/layout/column/two/two.column.sref.directive.d.ts

@@ -1,14 +1,13 @@
-import { SegueRef } from '@dereekb/dbx-core';
+import { SegueRefOrSegueRefRouterLink } from '@dereekb/dbx-core';
 import { TwoColumnsContextStore } from './two.column.store';
 import * as i0 from "@angular/core";
 /**
- * Used with a DbxTwoColumnsComponent to set the backRef of the TwoColumnsContextStore.
+ * Used with a DbxTwoColumnComponent to set the backRef of the TwoColumnsContextStore.
  */
-export declare class DbxTwoColumnsSrefDirective {
+export declare class DbxTwoColumnSrefDirective {
     private readonly _twoColumnsContextStore;
     constructor(_twoColumnsContextStore: TwoColumnsContextStore);
-    set refString(ref: string);
-    set ref(ref: SegueRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnsSrefDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnsSrefDirective, "[dbxTwoColumnsSref]", never, { "refString": "dbxTwoColumnsSref"; "ref": "ref"; }, {}, never>;
+    set ref(ref: SegueRefOrSegueRefRouterLink);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnSrefDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnSrefDirective, "[dbxTwoColumnSref]", never, { "ref": "dbxTwoColumnSref"; }, {}, never>;
 }

package/lib/layout/column/two/two.column.store.d.ts

@@ -1,6 +1,7 @@
 import { OnDestroy, Provider } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { SegueRef } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 export interface TwoColumnsState {
     showRight: boolean;
@@ -47,11 +48,11 @@ export declare class TwoColumnsContextStore extends ComponentStore<TwoColumnsSta
     /**
      * Changes the state to show right or not.
      */
-    readonly setShowRight: (observableOrValue: boolean | import("rxjs").Observable<boolean>) => import("rxjs").Subscription;
+    readonly setShowRight: (() => void) | ((observableOrValue: Maybe<boolean> | import("rxjs").Observable<Maybe<boolean>>) => import("rxjs").Subscription);
     /**
-     * Sets the full left.
+     * Sets the full left. If undefined is passed, no change occurs.
      */
-    readonly setFullLeft: (observableOrValue: boolean | import("rxjs").Observable<boolean>) => import("rxjs").Subscription;
+    readonly setFullLeft: (() => void) | ((observableOrValue: Maybe<boolean> | import("rxjs").Observable<Maybe<boolean>>) => import("rxjs").Subscription);
     /**
      * Sets the new back ref.
      */

package/lib/layout/content/_content.scss

@@ -32,6 +32,10 @@ $content-container-padding-small-screen: theming.$padding-2;
     padding: $box-padding;
     margin-bottom: $box-bottom-margin;
     max-width: $box-max-width;
+
+    &.dbx-content-box-wide {
+      max-width: unset;
+    }
   }
 
   .dbx-app-page {
@@ -40,16 +44,22 @@ $content-container-padding-small-screen: theming.$padding-2;
   }
 
   .dbx-content,
-  .dbx-content-page {                   //dbx-content page always has page height
+  .dbx-content-page {
+    //dbx-content page always has page height
     @include theming.page-height();
   }
 
-  .dbx-content .dbx-content,            // if a child of another dbx-content, give it content height instead of page height.
+  .dbx-content .dbx-content,
+  // if a child of another dbx-content, give it content height instead of page height.
   .dbx-content-page .dbx-content,
   .dbx-content-without-content-navbar {
     @include theming.content-height();
   }
 
+  .dbx-content.dbx-content-auto-height {
+    height: 100% !important;
+  }
+
   .dbx-content-scroll-lock {
     height: 100%;
     overflow: hidden;
@@ -124,7 +134,19 @@ $content-container-padding-small-screen: theming.$padding-2;
   .dbx-content-container {
 
     @include theming.if-small-screen($theme-config) {
-      padding: 0 $content-container-padding-small-screen;
+
+      // reduce all paddings down.
+      &,
+      &.container-padding-min,
+      &.container-padding-small {
+        padding: 0 $content-container-padding-small-screen;
+      }
+
+      // no padding does not gain padding.
+      &.container-padding-none {
+        padding: 0;
+      }
+
     }
 
   }

package/lib/layout/content/content.box.directive.d.ts

@@ -4,6 +4,7 @@ import * as i0 from "@angular/core";
  */
 export declare class DbxContentBoxDirective {
     elevated: boolean;
+    wide: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentBoxDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentBoxDirective, "dbx-content-box, [dbx-content-box]", never, { "elevated": "elevated"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentBoxDirective, "dbx-content-box, [dbx-content-box]", never, { "elevated": "elevated"; "wide": "wide"; }, {}, never>;
 }