@dereekb/dbx-web 2.1.0 → 4.0.1

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,11 @@
     cursor: pointer;
   }
 
+  .dbx-link-spacer:before {
+    content: "|";
+    margin: 0 8px;
+  }
+
   .dbx-anchor-content {
     display: flex;
     align-items: center;

package/lib/router/layout/anchor/anchor.component.d.ts

@@ -1,12 +1,12 @@
-import { TemplateRef } from '@angular/core';
-import { AbstractDbxAnchorDirective, DbxInjectedComponentConfig } from '@dereekb/dbx-core';
+import { TemplateRef, OnDestroy } from '@angular/core';
+import { AbstractDbxAnchorDirective, DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { Maybe } from '@dereekb/util';
 import { DbxRouterWebProviderConfig } from '../../provider/router.provider.config';
 import * as i0 from "@angular/core";
 /**
  * Component that renders an anchor element depending on the input.
  */
-export declare class DbxAnchorComponent extends AbstractDbxAnchorDirective {
+export declare class DbxAnchorComponent extends AbstractDbxAnchorDirective implements OnDestroy {
     private readonly dbNgxRouterWebProviderConfig;
     private _templateRef;
     readonly templateRef$: import("rxjs").Observable<Maybe<TemplateRef<any>>>;
@@ -16,7 +16,8 @@ export declare class DbxAnchorComponent extends AbstractDbxAnchorDirective {
     readonly url$: import("rxjs").Observable<string | undefined>;
     readonly target$: import("rxjs").Observable<string | undefined>;
     constructor(dbNgxRouterWebProviderConfig: DbxRouterWebProviderConfig);
-    get srefAnchorConfig(): DbxInjectedComponentConfig;
+    ngOnDestroy(): void;
+    get srefAnchorConfig(): DbxInjectionComponentConfig;
     clickAnchor(event?: Maybe<MouseEvent>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorComponent, "dbx-anchor, [dbx-anchor]", never, { "block": "block"; }, {}, never, ["*"]>;

package/lib/router/layout/anchor/anchor.module.d.ts

@@ -7,8 +7,8 @@ import * as i5 from "@angular/common";
 import * as i6 from "@angular/material/icon";
 import * as i7 from "@angular/material/button";
 import * as i8 from "@dereekb/dbx-core";
-export declare class DbxAnchorModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxAnchorModule, [typeof i1.DbxAnchorComponent, typeof i2.DbxAnchorIconComponent, typeof i3.DbxAnchorLinkComponent, typeof i4.DbxAnchorContentComponent], [typeof i5.CommonModule, typeof i6.MatIconModule, typeof i7.MatButtonModule, typeof i8.DbxInjectedComponentModule], [typeof i1.DbxAnchorComponent, typeof i2.DbxAnchorIconComponent, typeof i3.DbxAnchorLinkComponent, typeof i4.DbxAnchorContentComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbxAnchorModule>;
+export declare class DbxRouterAnchorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxRouterAnchorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterAnchorModule, [typeof i1.DbxAnchorComponent, typeof i2.DbxAnchorIconComponent, typeof i3.DbxAnchorLinkComponent, typeof i4.DbxAnchorContentComponent], [typeof i5.CommonModule, typeof i6.MatIconModule, typeof i7.MatButtonModule, typeof i8.DbxInjectionComponentModule], [typeof i1.DbxAnchorComponent, typeof i2.DbxAnchorIconComponent, typeof i3.DbxAnchorLinkComponent, typeof i4.DbxAnchorContentComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxRouterAnchorModule>;
 }

package/lib/router/layout/anchor/anchor.segue.directive.d.ts

@@ -1,4 +1,4 @@
-import { DbxInjectedTemplateConfig } from "@dereekb/dbx-core";
+import { DbxInjectionTemplateConfig } from "@dereekb/dbx-core";
 import { Observable } from "rxjs";
 import { DbxAnchorComponent } from "./anchor.component";
 import * as i0 from "@angular/core";
@@ -12,7 +12,7 @@ export declare abstract class AbstractDbxSegueAnchorDirective {
     readonly refParams$: Observable<import("@dereekb/dbx-core").SegueRefRawSegueParams | undefined>;
     readonly refOptions$: Observable<any>;
     constructor(parent: DbxAnchorComponent);
-    readonly template$: Observable<DbxInjectedTemplateConfig>;
+    readonly template$: Observable<DbxInjectionTemplateConfig>;
     get anchor(): import("../../../../../../../dist/packages/util/src").Maybe<import("@dereekb/dbx-core").ClickableAnchor>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxSegueAnchorDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSegueAnchorDirective, never, never, {}, {}, never>;

package/lib/router/layout/anchorlist/_anchorlist.scss

@@ -3,6 +3,7 @@
 @use '../../../style/theming';
 
 // MARK: Variables
+$anchor-list-item-disabled-item-opacity: 25%;
 $active-root-item-left-padding: 2px;
 $active-child-item-left-padding: 5px;
 
@@ -13,6 +14,7 @@ $active-child-item-left-padding: 5px;
   $color-config: theming.get-color-config($theme-config);
   $background: map.get($color-config, 'background');
   $background-hover-color: theming.get-color-from-palette($background, 'hover');
+  $background-disabled-color: theming.get-color-from-palette($background, 'contrast');
 
   .dbx-anchor-list.mat-nav-list {
 
@@ -20,6 +22,11 @@ $active-child-item-left-padding: 5px;
     // items that are not active are muted
     .mat-list-item {
       opacity: 0.74;
+
+      &.mat-list-item-disabled {
+        opacity: $anchor-list-item-disabled-item-opacity;
+        background: transparent;
+      }
     }
 
     // active route as a parent

package/lib/router/layout/anchorlist/anchorlist.module.d.ts

@@ -7,8 +7,8 @@ import * as i5 from "@angular/material/icon";
 import * as i6 from "@angular/material/list";
 import * as i7 from "@angular/material/menu";
 import * as i8 from "../anchor/anchor.module";
-export declare class DbxAnchorListModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxAnchorListModule, [typeof i1.DbxAnchorListComponent], [typeof i2.CommonModule, typeof i3.MatTabsModule, typeof i4.MatButtonModule, typeof i5.MatIconModule, typeof i6.MatListModule, typeof i7.MatMenuModule, typeof i8.DbxAnchorModule], [typeof i1.DbxAnchorListComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbxAnchorListModule>;
+export declare class DbxRouterAnchorListModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxRouterAnchorListModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterAnchorListModule, [typeof i1.DbxAnchorListComponent], [typeof i2.CommonModule, typeof i3.MatTabsModule, typeof i4.MatButtonModule, typeof i5.MatIconModule, typeof i6.MatListModule, typeof i7.MatMenuModule, typeof i8.DbxRouterAnchorModule], [typeof i1.DbxAnchorListComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxRouterAnchorListModule>;
 }

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

@@ -1,5 +1,6 @@
 export * from './anchor';
 export * from './anchorlist';
+export * from './list';
 export * from './navbar';
 export * from './sidenav';
 export * from './layout.module';

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

@@ -1,10 +1,11 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./anchor/anchor.module";
 import * as i2 from "./anchorlist/anchorlist.module";
-import * as i3 from "./navbar/navbar.module";
-import * as i4 from "./sidenav/sidenav.module";
+import * as i3 from "./list/list.module";
+import * as i4 from "./navbar/navbar.module";
+import * as i5 from "./sidenav/sidenav.module";
 export declare class DbxRouterLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxRouterLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterLayoutModule, never, never, [typeof i1.DbxAnchorModule, typeof i2.DbxAnchorListModule, typeof i3.DbxNavbarModule, typeof i4.DbxSidenavModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterLayoutModule, never, never, [typeof i1.DbxRouterAnchorModule, typeof i2.DbxRouterAnchorListModule, typeof i3.DbxRouterListModule, typeof i4.DbxRouterNavbarModule, typeof i5.DbxRouterSidenavModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxRouterLayoutModule>;
 }

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

@@ -0,0 +1,2 @@
+export * from './list.module';
+export * from './router.list.directive';

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

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./router.list.directive";
+export declare class DbxRouterListModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxRouterListModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterListModule, [typeof i1.DbxListItemAnchorModifierDirective], never, [typeof i1.DbxListItemAnchorModifierDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxRouterListModule>;
+}

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

@@ -0,0 +1,17 @@
+import { OnDestroy } from "@angular/core";
+import { ClickableAnchor } from "@dereekb/dbx-core";
+import { ArrayOrValue, Maybe, Modifier } from "@dereekb/util";
+import { Observable } from "rxjs";
+import { DbxValueListItem } from "../../../layout/list/list.view.value";
+import { AbstractDbxValueListItemModifierDirective } from "../../../layout/list/list.view.value.modifier.directive";
+import * as i0 from "@angular/core";
+export declare type AnchorForValueFunction<T> = (value: T, item: DbxValueListItem<T>) => Maybe<ClickableAnchor>;
+export declare const DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY = "router_anchor";
+export declare class DbxListItemAnchorModifierDirective<T> extends AbstractDbxValueListItemModifierDirective<T> implements OnDestroy {
+    private _anchorForItem;
+    readonly modifiers$: Observable<Maybe<ArrayOrValue<Modifier<DbxValueListItem<T>>>>>;
+    ngOnDestroy(): void;
+    set anchorForItem(anchorForItem: Maybe<AnchorForValueFunction<T>>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxListItemAnchorModifierDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxListItemAnchorModifierDirective<any>, "[dbxListItemAnchorModifier]", never, { "anchorForItem": "dbxListItemAnchorModifier"; }, {}, never>;
+}

package/lib/router/layout/navbar/navbar.component.d.ts

@@ -3,12 +3,12 @@ import { ScreenMediaWidthType } from './../../../screen/screen';
 import { DbxScreenMediaService } from '../../../screen/screen.service';
 import { Maybe } from '@dereekb/util';
 import { OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { ClickableAnchorLink, DbxRouterService, DbxRouterTransitionService, AbstractTransitionDirective } from '@dereekb/dbx-core';
+import { ClickableAnchorLinkSegueRef, DbxRouterService, DbxRouterTransitionService, AbstractTransitionDirective } from '@dereekb/dbx-core';
 import { HorizontalConnectionPos } from '@angular/cdk/overlay';
 import * as i0 from "@angular/core";
 interface NavAnchorLink {
     selected: boolean;
-    anchor: ClickableAnchorLink;
+    anchor: ClickableAnchorLinkSegueRef;
 }
 export declare type NavBarContentAlign = 'center' | 'left' | 'right';
 export declare type NavbarMode = 'bar' | 'button';
@@ -24,11 +24,11 @@ export declare class DbxNavbarComponent extends AbstractTransitionDirective impl
     private _breakpoint;
     private _anchors;
     readonly isBreakpointActive$: Observable<boolean>;
-    readonly mode$: Observable<NavbarMode>;
+    readonly mode$: Observable<"button" | "bar">;
     readonly anchors$: Observable<NavAnchorLink[]>;
     constructor(dbxRouterTransitionService: DbxRouterTransitionService, cdRef: ChangeDetectorRef, _dbxScreenMediaService: DbxScreenMediaService, _dbxRouterService: DbxRouterService);
     ngOnDestroy(): void;
-    set anchors(anchors: Maybe<ClickableAnchorLink[]>);
+    set anchors(anchors: Maybe<ClickableAnchorLinkSegueRef[]>);
     set mode(mode: Maybe<NavbarMode>);
     set breakpoint(breakpoint: ScreenMediaWidthType);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxNavbarComponent, never>;