@dereekb/dbx-web 2.1.0 → 4.0.1

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>;
 }

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

@@ -5,8 +5,8 @@ export declare type DbxContentContainerWidth = 'small' | 'medium' | 'wide' | 'fu
  * Component that limits the max-width of the content.
  */
 export declare class DbxContentContainerDirective {
-    grow: string;
-    padding: string;
+    grow: DbxContentContainerWidth;
+    padding: DbxContentContainerPadding;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentContainerDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentContainerDirective, "dbx-content-container,[dbx-content-container],.dbx-content-container", never, { "grow": "grow"; "padding": "padding"; }, {}, never>;
 }

package/lib/layout/flex/_flex.scss

@@ -7,6 +7,10 @@ $dbx-flex-group-columns-count: 6;
 // MARK: Mixin
 @mixin core() {
 
+  .dbx-flex {
+    display: flex;
+  }
+
   .dbx-flex-group {
     display: flex;
     flex-wrap: wrap;

package/lib/layout/flex/flex.group.directive.d.ts

@@ -18,6 +18,7 @@ export declare class DbxFlexGroupDirective extends AbstractSubscriptionDirective
     get small(): boolean;
     constructor(_dbxScreenMediaService: DbxScreenMediaService, cdRef: ChangeDetectorRef);
     ngOnInit(): void;
+    ngOnDestroy(): void;
     set breakpoint(breakpoint: Maybe<ScreenMediaWidthType>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlexGroupDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFlexGroupDirective, "[dbxFlexGroup]", never, { "content": "content"; "relative": "relative"; "breakpoint": "breakpoint"; }, {}, never>;

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

@@ -7,6 +7,10 @@ export * from './list.view.selection.directive';
 export * from './list.view.value.component';
 export * from './list.view.value.directive';
 export * from './list.view.value.item.directive';
+export * from './list.view.value.modifier';
+export * from './list.view.value.modifier.directive';
+export * from './list.view.value.modifier.ripple.directive';
 export * from './list.view.value.selection.component';
 export * from './list.view.value';
 export * from './list.view';
+export * from './list.wrapper';

package/lib/layout/list/list.component.d.ts

@@ -1,9 +1,9 @@
 import { Observable } from 'rxjs';
 import { EventEmitter, OnDestroy, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { DbxInjectedComponentConfig } from '@dereekb/dbx-core';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { ListLoadingStateContextInstance, ListLoadingState } from '@dereekb/rxjs';
 import { Maybe, Milliseconds } from '@dereekb/util';
-import { DbxListView, ListSelectionState } from './list.view';
+import { DbxListSelectionMode, DbxListView, ListSelectionState } from './list.view';
 import * as i0 from "@angular/core";
 /**
  * Direction the scroll was triggered moving.
@@ -18,7 +18,7 @@ export declare type DbxListLoadMoreHandler = () => Observable<void> | void;
 /**
  * DbxListComponent configuration.
  */
-export interface DbxListConfig<T = any, V extends DbxListView<T> = DbxListView<T>> extends DbxInjectedComponentConfig<V> {
+export interface DbxListConfig<T = any, V extends DbxListView<T> = DbxListView<T>> extends DbxInjectionComponentConfig<V> {
     /**
      * Whether or not to hide the list content when it is an empty list.
      */
@@ -47,6 +47,10 @@ export interface DbxListConfig<T = any, V extends DbxListView<T> = DbxListView<T
      * (Optional) handler function to load more items.
      */
     loadMore?: DbxListLoadMoreHandler;
+    /**
+     * Default selection list value. If not defined, will default to 'view'.
+     */
+    defaultSelectionMode?: Maybe<DbxListSelectionMode>;
 }
 /**
  * Used to display a potentially infinitely scrollable list of content.
@@ -64,23 +68,26 @@ export declare class DbxListComponent<T = any, V extends DbxListView<T> = DbxLis
     contentScrolled: EventEmitter<number>;
     private _content;
     private _disabled;
+    private _selectionMode;
     private _loadMoreTrigger;
     private _scrollTrigger;
     private _config;
     private _loadMoreSub;
     private _onClickSub;
     private _disabledSub;
+    private _selectionModeSub;
     private _onSelectionChangeSub;
     readonly context: ListLoadingStateContextInstance<T, S>;
     readonly isEmpty$: Observable<boolean>;
     readonly disabled$: Observable<boolean>;
+    readonly selectionMode$: Observable<Maybe<DbxListSelectionMode>>;
     readonly hideOnEmpty$: Observable<boolean>;
     readonly invertedList$: Observable<boolean>;
     readonly throttleScroll$: Observable<number>;
     readonly scrollDistance$: Observable<number>;
     readonly scrollLoadMoreTrigger$: Observable<DbxListScrollDirectionTrigger>;
     readonly loadMore$: Observable<void | DbxListScrollDirectionTrigger>;
-    readonly injectedComponentConfig$: Observable<Maybe<DbxInjectedComponentConfig<V>>>;
+    readonly injectedComponentConfig$: Observable<Maybe<DbxInjectionComponentConfig<V>>>;
     readonly hideContent$: Observable<boolean>;
     constructor(cdRef: ChangeDetectorRef);
     ngOnDestroy(): void;
@@ -89,6 +96,8 @@ export declare class DbxListComponent<T = any, V extends DbxListView<T> = DbxLis
     set config(config: Maybe<DbxListConfig<T, V>>);
     get disabled(): boolean;
     set disabled(disabled: Maybe<boolean>);
+    get selectionMode(): Maybe<DbxListSelectionMode>;
+    set selectionMode(selectionMode: Maybe<DbxListSelectionMode>);
     getScrollPositionRelativeToBottom(): number;
     jumpToBottom(): void;
     jumpToPositionRelativeToBottom(pos: number): void;
@@ -99,7 +108,7 @@ export declare class DbxListComponent<T = any, V extends DbxListView<T> = DbxLis
     get __content(): DbxListInternalContentDirective;
     set __content(content: DbxListInternalContentDirective);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxListComponent<any, any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxListComponent<any, any, any>, "dbx-list", never, { "padded": "padded"; "state$": "state$"; "config": "config"; "disabled": "disabled"; }, { "contentScrolled": "contentScrolled"; }, never, ["[top]", "[bottom]", "[empty]"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxListComponent<any, any, any>, "dbx-list", never, { "padded": "padded"; "state$": "state$"; "config": "config"; "disabled": "disabled"; "selectionMode": "selectionMode"; }, { "contentScrolled": "contentScrolled"; }, never, ["[top]", "[bottom]", "[empty]"]>;
 }
 /**
  * Used internally by DbxListComponent

package/lib/layout/list/list.directive.d.ts

@@ -1,28 +1,30 @@
-import { ListLoadingState, ObservableGetter } from '@dereekb/rxjs';
+import { ListLoadingState, ObservableOrValue } from '@dereekb/rxjs';
 import { Observable } from 'rxjs';
 import { EventEmitter, OnInit, OnDestroy } from "@angular/core";
 import { DbxListConfig } from "./list.component";
-import { DbxListView, ListSelectionState } from "./list.view";
+import { DbxListSelectionMode, DbxListView, ListSelectionState } from "./list.view";
 import { Maybe } from '@dereekb/util';
+import { DbxListViewWrapper } from './list.wrapper';
 import * as i0 from "@angular/core";
 export declare const DEFAULT_STATIC_LIST_DIRECTIVE_TEMPLATE = "\n<dbx-list [config]=\"config\">\n  <ng-content top select=\"[top]\"></ng-content>\n  <ng-content bottom select=\"[bottom]\"></ng-content>\n  <ng-content empty select=\"[empty]\"></ng-content>\n</dbx-list>\n";
-export declare const DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE = "\n<dbx-list [state$]=\"state$\" [config]=\"config$ | async\" [disabled]=\"disabled\">\n  <ng-content top select=\"[top]\"></ng-content>\n  <ng-content bottom select=\"[bottom]\"></ng-content>\n  <ng-content empty select=\"[empty]\"></ng-content>\n</dbx-list>\n";
+export declare const DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE = "\n<dbx-list [state$]=\"state$\" [config]=\"config$ | async\" [disabled]=\"disabled\" [selectionMode]=\"selectionMode\">\n  <ng-content top select=\"[top]\"></ng-content>\n  <ng-content bottom select=\"[bottom]\"></ng-content>\n  <ng-content empty select=\"[empty]\"></ng-content>\n</dbx-list>\n";
 export interface DbxListWrapperConfig<T, V extends DbxListView<T> = DbxListView<T>> extends Omit<DbxListConfig<T, V>, 'onClick' | 'loadMore'> {
 }
-export declare abstract class AbstractDbxListWrapperDirective<T, V extends DbxListView<T> = DbxListView<T>, C extends DbxListWrapperConfig<T, V> = DbxListWrapperConfig<T, V>, S extends ListLoadingState<T> = ListLoadingState<T>> implements OnInit, OnDestroy {
-    readonly initConfig: ObservableGetter<C>;
+export declare abstract class AbstractDbxListWrapperDirective<T, V extends DbxListView<T> = DbxListView<T>, C extends DbxListWrapperConfig<T, V> = DbxListWrapperConfig<T, V>, S extends ListLoadingState<T> = ListLoadingState<T>> implements OnInit, OnDestroy, DbxListViewWrapper<T, S> {
+    readonly initConfig: ObservableOrValue<C>;
     private readonly _init;
     readonly config$: Observable<DbxListConfig<T, V>>;
     disabled?: Maybe<boolean>;
+    selectionMode?: Maybe<DbxListSelectionMode>;
     state$?: Maybe<Observable<S>>;
     clickItem: EventEmitter<T>;
     loadMore: EventEmitter<void>;
-    constructor(initConfig: ObservableGetter<C>);
+    constructor(initConfig: ObservableOrValue<C>);
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected _buildListConfig(config: C): DbxListConfig<T, V>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxListWrapperDirective<any, any, any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxListWrapperDirective<any, any, any, any>, never, never, { "disabled": "disabled"; "state$": "state$"; }, { "clickItem": "clickItem"; "loadMore": "loadMore"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxListWrapperDirective<any, any, any, any>, never, never, { "disabled": "disabled"; "selectionMode": "selectionMode"; "state$": "state$"; }, { "clickItem": "clickItem"; "loadMore": "loadMore"; }, never>;
 }
 export interface DbxSelectionListWrapperConfig<T, V extends DbxListView<T> = DbxListView<T>> extends Omit<DbxListWrapperConfig<T, V>, 'onSelectionChange'> {
 }

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

@@ -3,15 +3,17 @@ import * as i1 from "./list.component";
 import * as i2 from "./list.content.empty.component";
 import * as i3 from "./list.view.value.component";
 import * as i4 from "./list.view.value.selection.component";
-import * as i5 from "@angular/common";
-import * as i6 from "../../loading/loading.module";
-import * as i7 from "../../router/layout/anchor/anchor.module";
-import * as i8 from "ngx-infinite-scroll";
-import * as i9 from "@dereekb/dbx-core";
-import * as i10 from "@angular/material/list";
-import * as i11 from "@angular/material/icon";
+import * as i5 from "./list.view.value.modifier.directive";
+import * as i6 from "./list.view.value.modifier.ripple.directive";
+import * as i7 from "@angular/common";
+import * as i8 from "../../loading/loading.module";
+import * as i9 from "../../router/layout/anchor/anchor.module";
+import * as i10 from "ngx-infinite-scroll";
+import * as i11 from "@dereekb/dbx-core";
+import * as i12 from "@angular/material/list";
+import * as i13 from "@angular/material/icon";
 export declare class DbxListLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxListLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxListLayoutModule, [typeof i1.DbxListComponent, typeof i1.DbxListInternalContentDirective, typeof i2.DbxListEmptyContentComponent, typeof i3.DbxValueListViewComponent, typeof i4.DbxSelectionValueListViewComponent, typeof i4.DbxSelectionValueListItemViewComponent], [typeof i5.CommonModule, typeof i6.DbxLoadingModule, typeof i7.DbxAnchorModule, typeof i8.InfiniteScrollModule, typeof i9.DbxInjectedComponentModule, typeof i10.MatListModule, typeof i11.MatIconModule], [typeof i1.DbxListComponent, typeof i2.DbxListEmptyContentComponent, typeof i3.DbxValueListViewComponent, typeof i4.DbxSelectionValueListViewComponent, typeof i4.DbxSelectionValueListItemViewComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxListLayoutModule, [typeof i1.DbxListComponent, typeof i1.DbxListInternalContentDirective, typeof i2.DbxListEmptyContentComponent, typeof i3.DbxValueListViewComponent, typeof i3.DbxValueListItemViewComponent, typeof i4.DbxSelectionValueListViewComponent, typeof i4.DbxSelectionValueListItemViewComponent, typeof i5.DbxValueListItemModifierDirective, typeof i6.DbxListItemDisableRippleModifierDirective], [typeof i7.CommonModule, typeof i8.DbxLoadingModule, typeof i9.DbxRouterAnchorModule, typeof i10.InfiniteScrollModule, typeof i11.DbxInjectionComponentModule, typeof i12.MatListModule, typeof i13.MatIconModule], [typeof i1.DbxListComponent, typeof i2.DbxListEmptyContentComponent, typeof i3.DbxValueListViewComponent, typeof i3.DbxValueListItemViewComponent, typeof i4.DbxSelectionValueListViewComponent, typeof i4.DbxSelectionValueListItemViewComponent, typeof i5.DbxValueListItemModifierDirective, typeof i6.DbxListItemDisableRippleModifierDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxListLayoutModule>;
 }