@dereekb/dbx-web 2.0.0 → 4.0.0

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

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

@@ -1,10 +1,12 @@
 import { Observable } from 'rxjs';
 import { ListLoadingState, ListLoadingStateContext } from "@dereekb/rxjs";
 import { EventEmitter, Provider, Type } from "@angular/core";
+import { Maybe } from '@dereekb/util';
+export declare type DbxListSelectionMode = 'select' | 'view';
 export interface ListSelectionStateItem<T> {
     disabled?: boolean;
     selected?: boolean;
-    value: T;
+    itemValue: T;
 }
 export interface ListSelectionState<T> {
     items: ListSelectionStateItem<T>[];
@@ -17,6 +19,10 @@ export declare abstract class DbxListView<T, S extends ListLoadingState<T> = Lis
      * Current disabled state.
      */
     abstract readonly disabled$: Observable<boolean>;
+    /**
+     * (Optional) current selection mode.
+     */
+    abstract readonly selectionMode$?: Observable<Maybe<DbxListSelectionMode>>;
     /**
      * Values of the list view.
      */
@@ -41,5 +47,9 @@ export declare abstract class DbxListView<T, S extends ListLoadingState<T> = Lis
      * Sets the disabled state of the list view.
      */
     abstract setDisabled(disabled: boolean): void;
+    /**
+     * Sets the selection mode of the list view.
+     */
+    abstract setSelectionMode(selectionMode: Maybe<DbxListSelectionMode>): void;
 }
 export declare function ProvideDbxListView<V extends DbxListView<any>>(sourceType: Type<V>): Provider[];

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

@@ -1,7 +1,7 @@
 import { ListLoadingStateContext } from '@dereekb/rxjs';
 import { Observable } from 'rxjs';
 import { EventEmitter, OnDestroy } from '@angular/core';
-import { DbxListView } from './list.view';
+import { DbxListSelectionMode, DbxListView } from './list.view';
 import { Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 /**
@@ -9,9 +9,11 @@ import * as i0 from "@angular/core";
  */
 export declare abstract class AbstractDbxListViewDirective<T> implements DbxListView<T>, OnDestroy {
     private readonly _disabled;
+    private readonly _selectionMode;
     private readonly _values$;
     readonly values$: Observable<T[]>;
     readonly disabled$: Observable<boolean>;
+    readonly selectionMode$: Observable<Maybe<DbxListSelectionMode>>;
     clickValue: EventEmitter<T>;
     constructor();
     set valueArray(values: Maybe<T[]>);
@@ -21,6 +23,7 @@ export declare abstract class AbstractDbxListViewDirective<T> implements DbxList
     setListContext(state: ListLoadingStateContext<T>): void;
     setValues(valuesObs: Maybe<Observable<T[]>>): void;
     setDisabled(disabled: boolean): void;
+    setSelectionMode(selectionMode: Maybe<DbxListSelectionMode>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxListViewDirective<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxListViewDirective<any>, never, never, { "valueArray": "valueArray"; "values": "values"; }, { "clickValue": "clickValue"; }, never>;
 }

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

@@ -3,13 +3,14 @@ import { MatSelectionListChange } from '@angular/material/list';
 import { ListSelectionState } from './list.view';
 import { AbstractDbxListViewDirective } from './list.view.directive';
 import * as i0 from "@angular/core";
+export declare const DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE = "<dbx-selection-list-view [config]=\"config\"></dbx-selection-list-view>";
 /**
  * Abstract list view that has a pre-built-in selection change event for an Angular Material MatSelectionListChange.
  */
-export declare abstract class AbstractSelectionValueListViewDirective<T> extends AbstractDbxListViewDirective<T> {
+export declare abstract class AbstractDbxSelectionListViewDirective<T> extends AbstractDbxListViewDirective<T> {
     selectionChange: EventEmitter<ListSelectionState<T>>;
     selectionChanged(selection: ListSelectionState<T>): void;
     matSelectionChanged(selection: MatSelectionListChange): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractSelectionValueListViewDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractSelectionValueListViewDirective<any>, never, never, {}, { "selectionChange": "selectionChange"; }, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxSelectionListViewDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSelectionListViewDirective<any>, never, never, {}, { "selectionChange": "selectionChange"; }, never>;
 }

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

@@ -1,15 +1,30 @@
-import { DbxValueListItem, AbstractDbxValueListViewConfig } from './list.view.value';
+import { DbxValueListItem, AbstractDbxValueListViewConfig, DbxValueListItemConfig } from './list.view.value';
 import { AbstractDbxValueListViewDirective } from './list.view.value.directive';
+import { DbxListView } from './list.view';
+import { Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 export interface DbxValueListViewConfig<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = any> extends AbstractDbxValueListViewConfig<T, I, V> {
     emitAllClicks?: boolean;
 }
 /**
- * Abstract list view that has a pre-built-in selection change event for an Angular Material MatSelectionListChange.
+ * Renders a list view using input configuration. Requires a parent DbxListView.
  */
 export declare class DbxValueListViewComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = any, C extends DbxValueListViewConfig<T, I, V> = DbxValueListViewConfig<T, I, V>> extends AbstractDbxValueListViewDirective<T, I, V, C> {
     readonly emitAllClicks$: import("rxjs").Observable<boolean | undefined>;
-    onClickItem(item: DbxValueListItem<T>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxValueListViewComponent<any, any, any, any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxValueListViewComponent<any, any, any, any>, "dbx-list-view", never, {}, {}, never, never>;
 }
+/**
+ * Content view for a DbxValueListView. It can be used directly in cases where the items are already configured, or want to be configured in a non-standard fashion.
+ */
+export declare class DbxValueListItemViewComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> {
+    readonly dbxListView: DbxListView<T>;
+    emitAllClicks?: Maybe<boolean>;
+    items?: Maybe<DbxValueListItemConfig<T, I>[]>;
+    readonly disabled$: import("rxjs").Observable<boolean>;
+    constructor(dbxListView: DbxListView<T>);
+    onClickItem(item: I): void;
+    onClickValue(value: T): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxValueListItemViewComponent<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxValueListItemViewComponent<any, any>, "dbx-list-view-content", never, { "emitAllClicks": "emitAllClicks"; "items": "items"; }, {}, never, never>;
+}

package/lib/layout/list/list.view.value.d.ts

@@ -1,21 +1,37 @@
-import { ClickableAnchor } from '@dereekb/dbx-core';
-import { InjectionToken } from "@angular/core";
-import { DbxInjectedComponentConfig } from "@dereekb/dbx-core";
+import { InjectionToken, Provider, Type } from "@angular/core";
+import { ClickableAnchor, DbxInjectionComponentConfig } from "@dereekb/dbx-core";
 import { Observable } from "rxjs";
+import { Maybe } from '@dereekb/util';
 export declare const DBX_VALUE_LIST_VIEW_ITEM: InjectionToken<any>;
 export interface DbxValueListItem<T> {
-    value: T;
+    itemValue: T;
     icon?: string;
     disabled?: boolean;
+    rippleDisabled?: boolean;
     selected?: boolean;
-    anchor?: ClickableAnchor;
+    anchor?: Maybe<ClickableAnchor>;
 }
-export interface AbstractDbxValueListViewConfig<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = any> extends DbxInjectedComponentConfig<V> {
+/**
+ * Special type used with values that contain all the items of DbxValueListItem internally.
+ */
+export declare type DbxValueAsListItem<T> = T & Omit<DbxValueListItem<DbxValueListItem<T>>, 'itemValue'>;
+export interface AbstractDbxValueListViewConfig<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = any> extends DbxInjectionComponentConfig<V> {
     mapValuesToItemValues?(values: T[]): Observable<I[]>;
 }
-export declare const DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES: <T, I extends DbxValueListItem<T>>(values: T[]) => Observable<I[]>;
-export interface DbxValueListItemConfig<T> extends DbxValueListItem<T> {
-    config: DbxInjectedComponentConfig;
+export declare const DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES: <T, I extends DbxValueListItem<T>>(itemValues: T[]) => Observable<I[]>;
+export declare type DbxValueListItemConfig<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> = I & {
+    config: DbxInjectionComponentConfig;
+};
+export declare function mapValuesToValuesListItemConfigObs<T, I extends DbxValueListItem<T>>(listViewConfig: AbstractDbxValueListViewConfig<T, I>, itemValues: T[]): Observable<DbxValueListItemConfig<T, I>[]>;
+/**
+ * Adds config to the input value list items.
+ *
+ * @param listViewConfig
+ * @param listItems
+ * @returns
+ */
+export declare function addConfigToValueListItems<T, I extends DbxValueListItem<T>>(listViewConfig: AbstractDbxValueListViewConfig<T, I>, listItems: I[]): DbxValueListItemConfig<T, I>[];
+export declare abstract class DbxValueListView<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> {
+    readonly abstract items$: Observable<I[]>;
 }
-export declare function mapValuesToValuesListItemConfigObs<T>(listViewConfig: AbstractDbxValueListViewConfig<T>, values: T[]): Observable<DbxValueListItemConfig<T>[]>;
-export declare function mapItemValuesToValueListItemConfig<T>(listViewConfig: AbstractDbxValueListViewConfig<T>, itemValues: DbxValueListItem<T>[]): DbxValueListItemConfig<T>[];
+export declare function ProvideDbxValueListView<V extends DbxValueListView<any>>(sourceType: Type<V>): Provider[];

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

@@ -1,21 +1,24 @@
+import { Maybe, ModifierFunction } from "@dereekb/util";
 import { OnDestroy } from "@angular/core";
-import { Maybe } from "@dereekb/util";
 import { Observable } from "rxjs";
 import { DbxListView } from "./list.view";
-import { AbstractDbxValueListViewConfig, DbxValueListItem, DbxValueListItemConfig } from "./list.view.value";
+import { AbstractDbxValueListViewConfig, DbxValueListItem, DbxValueListItemConfig, DbxValueListView } from "./list.view.value";
+import { DbxValueListItemModifier } from "./list.view.value.modifier";
 import * as i0 from "@angular/core";
 /**
  * Abstract list directive that takes in items and a AbstractDbxValueItemListViewConfig configuration.
  */
-export declare abstract class AbstractDbxValueListViewDirective<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = any, C extends AbstractDbxValueListViewConfig<T, I, V> = AbstractDbxValueListViewConfig<T, I, V>> implements OnDestroy {
+export declare abstract class AbstractDbxValueListViewDirective<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = any, C extends AbstractDbxValueListViewConfig<T, I, V> = AbstractDbxValueListViewConfig<T, I, V>> implements DbxValueListView<T, I>, OnDestroy {
     readonly dbxListView: DbxListView<T>;
+    readonly dbxValueListViewModifier: DbxValueListItemModifier<T, I>;
     private _config;
     readonly config$: Observable<C>;
-    readonly items$: Observable<DbxValueListItemConfig<T>[]>;
-    constructor(dbxListView: DbxListView<T>);
+    readonly modifyFn$: Observable<Maybe<ModifierFunction<I>>>;
+    readonly items$: Observable<DbxValueListItemConfig<T, I>[]>;
+    constructor(dbxListView: DbxListView<T>, dbxValueListViewModifier: DbxValueListItemModifier<T, I>);
     ngOnDestroy(): void;
     set config(config: Maybe<C>);
     onClickValue(value: T): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxValueListViewDirective<any, any, any, any>, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxValueListViewDirective<any, any, any, any>, [null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxValueListViewDirective<any, any, any, any>, never, never, { "config": "config"; }, {}, never>;
 }

package/lib/layout/list/list.view.value.item.directive.d.ts

@@ -1,9 +1,9 @@
 import { DbxValueListItem } from "./list.view.value";
 import * as i0 from "@angular/core";
-export declare abstract class AbstractDbxSelectionValueListViewItemComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> {
+export declare abstract class AbstractDbxValueListViewItemComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> {
     readonly item: I;
-    get value(): T;
+    get itemValue(): T;
     constructor(item: I);
-    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxSelectionValueListViewItemComponent<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSelectionValueListViewItemComponent<any, any>, never, never, {}, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxValueListViewItemComponent<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxValueListViewItemComponent<any, any>, never, never, {}, {}, never>;
 }

package/lib/layout/list/list.view.value.modifier.d.ts

@@ -0,0 +1,12 @@
+import { Provider, Type } from "@angular/core";
+import { ArrayOrValue, Modifier, ModifierFunction, ModifierMap } from "@dereekb/util";
+import { Observable } from "rxjs";
+import { DbxValueListItem } from "./list.view.value";
+export declare abstract class DbxValueListItemModifier<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> {
+    readonly abstract modifiers$: Observable<ModifierMap<I>>;
+    abstract addModifiers(modifiers: ArrayOrValue<Modifier<I>>): void;
+    abstract removeModifiers(modifiers: ArrayOrValue<Modifier<I>>): void;
+}
+export declare function ProvideDbxValueListViewModifier<V extends DbxValueListItemModifier<any>>(sourceType: Type<V>): Provider[];
+export declare type ListItemModifier<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> = Modifier<I>;
+export declare function listItemModifier<T, I extends DbxValueListItem<T> = DbxValueListItem<T>>(key: string, modify: ModifierFunction<I>): ListItemModifier<T, I>;

package/lib/layout/list/list.view.value.modifier.directive.d.ts

@@ -0,0 +1,37 @@
+import { Observable } from 'rxjs';
+import { OnDestroy, OnInit } from "@angular/core";
+import { DbxValueListItem } from "./list.view.value";
+import { ArrayOrValue, Maybe, Modifier } from '@dereekb/util';
+import { DbxValueListItemModifier } from './list.view.value.modifier';
+import * as i0 from "@angular/core";
+/**
+ * DbxValueListViewModifier implementation
+ */
+export declare class DbxValueListItemModifierDirective<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> implements DbxValueListItemModifier<T, I>, OnDestroy {
+    private _modifiers;
+    private _inputModifiers;
+    readonly modifiers$: Observable<Map<string, Modifier<I>>>;
+    constructor();
+    ngOnDestroy(): void;
+    addModifiers(modifiers: ArrayOrValue<Modifier<I>>): void;
+    removeModifiers(modifiers: ArrayOrValue<Modifier<I>>): void;
+    set inputModifiers(inputModifiers: Maybe<ArrayOrValue<Modifier<I>>>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxValueListItemModifierDirective<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxValueListItemModifierDirective<any, any>, "[dbxListItemModifier]", never, { "inputModifiers": "dbxListItemModifier"; }, {}, never>;
+}
+/**
+ * Abstract directive used for managing modifyers for a DbxValueListView.
+ */
+export declare abstract class AbstractDbxValueListItemModifierDirective<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> implements OnInit, OnDestroy {
+    readonly dbxValueListItemModifier: DbxValueListItemModifier<T, I>;
+    abstract readonly modifiers$: Observable<Maybe<ArrayOrValue<Modifier<I>>>>;
+    private _linkedModifiers;
+    private _modifiersSub;
+    constructor(dbxValueListItemModifier: DbxValueListItemModifier<T, I>);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private _linkModifiers;
+    private _unlinkModifiers;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxValueListItemModifierDirective<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxValueListItemModifierDirective<any, any>, never, never, {}, {}, never>;
+}

package/lib/layout/list/list.view.value.modifier.ripple.directive.d.ts

@@ -0,0 +1,17 @@
+import { OnDestroy } from "@angular/core";
+import { Maybe, ArrayOrValue, Modifier } from "@dereekb/util";
+import { Observable } from "rxjs";
+import { DbxValueListItem } from "./list.view.value";
+import { AbstractDbxValueListItemModifierDirective } from "./list.view.value.modifier.directive";
+import * as i0 from "@angular/core";
+export declare type DisableRippleForValueFunction<T> = (item: DbxValueListItem<T>) => boolean;
+export declare const DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY = "disable_ripple_anchor";
+export declare const DBX_LIST_ITEM_DEFAULT_DISABLE_FUNCTION: DisableRippleForValueFunction<any>;
+export declare class DbxListItemDisableRippleModifierDirective<T> extends AbstractDbxValueListItemModifierDirective<T> implements OnDestroy {
+    private _disableRippleForItem;
+    readonly modifiers$: Observable<Maybe<ArrayOrValue<Modifier<DbxValueListItem<T>>>>>;
+    ngOnDestroy(): void;
+    set disableRippleForItem(disableRippleForItem: Maybe<DisableRippleForValueFunction<T>>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxListItemDisableRippleModifierDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxListItemDisableRippleModifierDirective<any>, "[dbxListItemDisableRippleModifier]", never, { "disableRippleForItem": "dbxListItemDisableRippleModifier"; }, {}, never>;
+}

package/lib/layout/list/list.view.value.selection.component.d.ts

@@ -1,32 +1,31 @@
+import { Observable } from 'rxjs';
 import { MatSelectionListChange } from '@angular/material/list';
-import { DbxListView } from './list.view';
-import { DbxValueListItem, AbstractDbxValueListViewConfig, DbxValueListItemConfig } from './list.view.value';
+import { DbxListSelectionMode, DbxListView } from './list.view';
+import { DbxValueListItem, AbstractDbxValueListViewConfig } from './list.view.value';
 import { AbstractDbxValueListViewDirective } from './list.view.value.directive';
 import { Maybe } from '@dereekb/util';
+import { DbxValueListItemViewComponent } from './list.view.value.component';
 import * as i0 from "@angular/core";
 export interface DbxSelectionValueListViewConfig<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = any> extends AbstractDbxValueListViewConfig<T, I, V> {
     multiple?: boolean;
 }
 /**
- * Abstract list view that has a pre-built-in selection change event for an Angular Material MatSelectionListChange.
+ * Renders a selection list view using input configuration. Requires a parent DbxListView.
  */
 export declare class DbxSelectionValueListViewComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = any> extends AbstractDbxValueListViewDirective<T, I, V, DbxSelectionValueListViewConfig<T, I, V>> {
-    readonly multiple$: import("rxjs").Observable<boolean>;
-    constructor(dbxListView: DbxListView<T>);
+    readonly selectionMode$: Observable<DbxListSelectionMode>;
+    readonly multiple$: Observable<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSelectionValueListViewComponent<any, any, any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxSelectionValueListViewComponent<any, any, any>, "dbx-selection-list-view", never, {}, {}, never, never>;
 }
 /**
  * Content view for a DbxSelectionValueListView. It can be used directly in cases where the items are already configured, or want to be configured in a non-standard fashion.
  */
-export declare class DbxSelectionValueListItemViewComponent<T> {
-    readonly dbxListView: DbxListView<T>;
+export declare class DbxSelectionValueListItemViewComponent<T> extends DbxValueListItemViewComponent<T> {
     multiple?: Maybe<boolean>;
-    items?: Maybe<DbxValueListItemConfig<T>[]>;
-    readonly disabled$: import("rxjs").Observable<boolean>;
+    selectionMode: Maybe<DbxListSelectionMode>;
     constructor(dbxListView: DbxListView<T>);
-    onClickValue(value: T): void;
     matSelectionChanged(selection: MatSelectionListChange): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSelectionValueListItemViewComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSelectionValueListItemViewComponent<any>, "dbx-selection-list-view-content", never, { "multiple": "multiple"; "items": "items"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSelectionValueListItemViewComponent<any>, "dbx-selection-list-view-content", never, { "multiple": "multiple"; "selectionMode": "selectionMode"; }, {}, never, never>;
 }

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

@@ -0,0 +1,11 @@
+import { Observable } from 'rxjs';
+import { ListLoadingState } from "@dereekb/rxjs";
+import { Provider, Type } from "@angular/core";
+import { Maybe } from '@dereekb/util';
+/**
+ * Common interface for views that may wrap a DbxListView, and pass values through to it.
+ */
+export declare abstract class DbxListViewWrapper<T, S extends ListLoadingState<T> = ListLoadingState<T>> {
+    state$?: Maybe<Observable<S>>;
+}
+export declare function ProvideDbxListViewWrapper<V extends DbxListViewWrapper<any>>(sourceType: Type<V>): Provider[];

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

@@ -14,6 +14,6 @@ import * as i10 from "@angular/material/icon";
  */
 export declare class DbxSectionLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSectionLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxSectionLayoutModule, [typeof i1.DbxSectionHeaderComponent, typeof i2.DbxSectionPageComponent, typeof i3.DbxSectionComponent, typeof i4.DbxSubSectionComponent, typeof i5.DbxIntroActionSectionComponent], [typeof i6.CommonModule, typeof i7.DbxAnchorModule, typeof i8.MatButtonModule, typeof i9.MatRippleModule, typeof i10.MatIconModule], [typeof i1.DbxSectionHeaderComponent, typeof i2.DbxSectionPageComponent, typeof i3.DbxSectionComponent, typeof i4.DbxSubSectionComponent, typeof i5.DbxIntroActionSectionComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxSectionLayoutModule, [typeof i1.DbxSectionHeaderComponent, typeof i2.DbxSectionPageComponent, typeof i3.DbxSectionComponent, typeof i4.DbxSubSectionComponent, typeof i5.DbxIntroActionSectionComponent], [typeof i6.CommonModule, typeof i7.DbxRouterAnchorModule, typeof i8.MatButtonModule, typeof i9.MatRippleModule, typeof i10.MatIconModule], [typeof i1.DbxSectionHeaderComponent, typeof i2.DbxSectionPageComponent, typeof i3.DbxSectionComponent, typeof i4.DbxSubSectionComponent, typeof i5.DbxIntroActionSectionComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxSectionLayoutModule>;
 }

package/lib/layout/style/_style.scss

@@ -22,7 +22,9 @@
     padding: 0 !important;
   }
 
-  @each $i, $padding in theming.$padding-map {
+  @each $i,
+  $padding in theming.$padding-map {
+
     .pad-#{$i},
     .padding-#{$i} {
       padding: $padding;
@@ -37,6 +39,15 @@
     display: inline;
   }
 
+  .d-iflex {
+    display: inline-flex;
+  }
+
+  // force
+  .d-fiflex {
+    display: inline-flex !important;
+  }
+
 }
 
 @mixin color($theme-config) {

package/lib/layout/text/_text.scss

@@ -5,6 +5,7 @@
 // MARK: Variables
 $icon-spacing: 6px;
 $hint-opacity: 0.8;
+$note-opacity: 0.7;
 $mat-hint-opacity: 0.54; // Opacity to mirror mat-hint
 
 // MARK: Mixin
@@ -20,6 +21,10 @@ $mat-hint-opacity: 0.54; // Opacity to mirror mat-hint
     text-align: center;
   }
 
+  .prettyjson {
+    white-space: pre-wrap !important;
+  }
+
   .dbx-text-no-overflow {
     white-space: pre-wrap !important;
     overflow: visible !important;
@@ -65,6 +70,10 @@ $mat-hint-opacity: 0.54; // Opacity to mirror mat-hint
     color: $notice-color;
   }
 
+  .dbx-note {
+    opacity: $note-opacity;
+  }
+
 }
 
 @mixin typography($typography-config) {

package/lib/router/layout/anchor/_anchor.scss

@@ -26,6 +26,16 @@
     cursor: pointer;
   }
 
+  .dbx-link-spacer:before {
+    content: "|";
+    margin: 0 8px;
+  }
+
+  .dbx-anchor-content {
+    display: flex;
+    align-items: center;
+  }
+
 }
 
 @mixin color($theme-config) {}