@dereekb/dbx-web 0.0.1 → 1.0.0

package/lib/layout/index.d.ts

@@ -1,12 +1,15 @@
+export * from './bar';
 export * from './block';
 export * from './card';
 export * from './column';
 export * from './compact';
 export * from './content';
-export * from './dialog';
 export * from './flag';
+export * from './flex';
 export * from './item';
 export * from './list';
 export * from './section';
 export * from './step';
+export * from './style';
+export * from './text';
 export * from './layout.module';

package/lib/layout/item/_item.scss

@@ -0,0 +1,26 @@
+@use '../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-item') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/lib/layout/item/item.icon.component.d.ts

@@ -2,9 +2,9 @@ import * as i0 from "@angular/core";
 /**
  * Section piece that puts an icon on the left, and arbitrary content on the right with a header.
  */
-export declare class DbNgxIconItemComponent {
+export declare class DbxIconItemComponent {
     icon?: string;
     header?: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxIconItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxIconItemComponent, "dbx-icon-item", never, { "icon": "icon"; "header": "header"; }, {}, never, ["*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxIconItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxIconItemComponent, "dbx-icon-item", never, { "icon": "icon"; "header": "header"; }, {}, never, ["*"]>;
 }

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

@@ -2,8 +2,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "./item.icon.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/material/icon";
-export declare class DbNgxItemLayoutModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxItemLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxItemLayoutModule, [typeof i1.DbNgxIconItemComponent], [typeof i2.CommonModule, typeof i3.MatIconModule], [typeof i1.DbNgxIconItemComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxItemLayoutModule>;
+export declare class DbxItemLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxItemLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxItemLayoutModule, [typeof i1.DbxIconItemComponent], [typeof i2.CommonModule, typeof i3.MatIconModule], [typeof i1.DbxIconItemComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxItemLayoutModule>;
 }

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

@@ -1,17 +1,20 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./block/block.layout.module";
-import * as i2 from "./card/card.box.layout.module";
-import * as i3 from "./column/column.layout.module";
-import * as i4 from "./compact/compact.layout.module";
-import * as i5 from "./content/content.layout.module";
-import * as i6 from "./dialog/dialog.layout.module";
+import * as i1 from "./bar/bar.layout.module";
+import * as i2 from "./block/block.layout.module";
+import * as i3 from "./card/card.box.layout.module";
+import * as i4 from "./column/column.layout.module";
+import * as i5 from "./compact/compact.layout.module";
+import * as i6 from "./content/content.layout.module";
 import * as i7 from "./flag/flag.layout.module";
-import * as i8 from "./item/item.layout.module";
-import * as i9 from "./list/list.layout.module";
-import * as i10 from "./section/section.layout.module";
-import * as i11 from "./step/step.layout.module";
-export declare class DbNgxLayoutModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxLayoutModule, never, never, [typeof i1.DbNgxBlockLayoutModule, typeof i2.DbNgxCardBoxLayoutModule, typeof i3.DbNgxColumnLayoutModule, typeof i4.DbNgxCompactLayoutModule, typeof i5.DbNgxContentLayoutModule, typeof i6.DbNgxDialogLayoutModule, typeof i7.DbNgxFlagLayoutModule, typeof i8.DbNgxItemLayoutModule, typeof i9.DbNgxListLayoutModule, typeof i10.DbNgxSectionLayoutModule, typeof i11.DbNgxStepLayoutModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxLayoutModule>;
+import * as i8 from "./flex/flex.layout.module";
+import * as i9 from "./item/item.layout.module";
+import * as i10 from "./list/list.layout.module";
+import * as i11 from "./section/section.layout.module";
+import * as i12 from "./step/step.layout.module";
+import * as i13 from "./style/style.layout.module";
+import * as i14 from "./text/text.module";
+export declare class DbxLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxLayoutModule, never, never, [typeof i1.DbxBarLayoutModule, typeof i2.DbxBlockLayoutModule, typeof i3.DbxCardBoxLayoutModule, typeof i4.DbxColumnLayoutModule, typeof i5.DbxCompactLayoutModule, typeof i6.DbxContentLayoutModule, typeof i7.DbxFlagLayoutModule, typeof i8.DbxFlexLayoutModule, typeof i9.DbxItemLayoutModule, typeof i10.DbxListLayoutModule, typeof i11.DbxSectionLayoutModule, typeof i12.DbxStepLayoutModule, typeof i13.DbxStyleLayoutModule, typeof i14.DbxTextModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxLayoutModule>;
 }

package/lib/layout/list/_list.scss

@@ -0,0 +1,72 @@
+@use '../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-list {
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .dbx-list-content {
+    max-height: 100%;
+    overflow: auto;
+    box-sizing: border-box;
+
+    &.dbx-list-padded {
+      padding-bottom: 8px;
+    }
+
+    .mat-list-base {
+      padding-top: 0;
+    }
+
+    &.dbx-list-content-hidden {
+      display: none;
+    }
+
+  }
+
+  .dbx-list-content-box {
+    padding: 4px;
+  }
+
+  .dbx-list-view {
+
+    .mat-list-base .dbx-list-view-item.mat-list-item {
+      height: unset;
+
+      &.mat-list-item-with-avatar {
+        min-height: 56px;
+
+        .mat-list-item-content {
+          min-height: 56px;
+        }
+      }
+
+    }
+  }
+
+}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-list') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

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

@@ -1,2 +1,12 @@
-export * from './list.empty.component';
+export * from './list.content.empty.component';
+export * from './list.component';
+export * from './list.directive';
 export * from './list.layout.module';
+export * from './list.view.directive';
+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.selection.component';
+export * from './list.view.value';
+export * from './list.view';

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

@@ -0,0 +1,115 @@
+import { Observable } from 'rxjs';
+import { EventEmitter, OnDestroy, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { DbxInjectedComponentConfig } from '@dereekb/dbx-core';
+import { ListLoadingStateContextInstance, ListLoadingState } from '@dereekb/rxjs';
+import { Maybe, Milliseconds } from '@dereekb/util';
+import { DbxListView, ListSelectionState } from './list.view';
+import * as i0 from "@angular/core";
+/**
+ * Direction the scroll was triggered moving.
+ */
+export declare type DbxListScrollDirectionTrigger = 'up' | 'down';
+/**
+ * Used to trigger the loading of additional items.
+ *
+ * If an observable is returned it is used to throttle the loading of more items until it returns.
+ */
+export declare type DbxListLoadMoreHandler = () => Observable<void> | void;
+/**
+ * DbxListComponent configuration.
+ */
+export interface DbxListConfig<T = any, V extends DbxListView<T> = DbxListView<T>> extends DbxInjectedComponentConfig<V> {
+    /**
+     * Whether or not to hide the list content when it is an empty list.
+     */
+    hideOnEmpty?: boolean;
+    /**
+     * Whether or not this list should scroll upward from the bottom, like a message list.
+     */
+    invertedList?: boolean;
+    /**
+     * Distance to scroll.
+     */
+    scrollDistance?: number;
+    /**
+     * Number of ms to throttle scrolling events.
+     */
+    throttle?: Milliseconds;
+    /**
+     * (Optional) onClick handler
+     */
+    onClick?: (value: T) => void;
+    /**
+     * (Optional) onSelection handler
+     */
+    onSelectionChange?: (selection: ListSelectionState<T>) => void;
+    /**
+     * (Optional) handler function to load more items.
+     */
+    loadMore?: DbxListLoadMoreHandler;
+}
+/**
+ * Used to display a potentially infinitely scrollable list of content.
+ *
+ * This component is generally wrapped by another component that provides this one configuration.
+ */
+export declare class DbxListComponent<T = any, V extends DbxListView<T> = DbxListView<T>, S extends ListLoadingState<T> = ListLoadingState<T>> implements OnDestroy {
+    readonly cdRef: ChangeDetectorRef;
+    readonly DEFAULT_SCROLL_DISTANCE = 1.5;
+    readonly DEFAULT_THROTTLE_SCROLL = 50;
+    /**
+     * Whether or not to add bottom padding to the list content.
+     */
+    padded: boolean;
+    contentScrolled: EventEmitter<number>;
+    private _content;
+    private _disabled;
+    private _loadMoreTrigger;
+    private _scrollTrigger;
+    private _config;
+    private _loadMoreSub;
+    private _onClickSub;
+    private _disabledSub;
+    private _onSelectionChangeSub;
+    readonly context: ListLoadingStateContextInstance<T, S>;
+    readonly isEmpty$: Observable<boolean>;
+    readonly disabled$: Observable<boolean>;
+    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 hideContent$: Observable<boolean>;
+    constructor(cdRef: ChangeDetectorRef);
+    ngOnDestroy(): void;
+    get state$(): Observable<S>;
+    set state$(state$: Maybe<Observable<S>>);
+    set config(config: Maybe<DbxListConfig<T, V>>);
+    get disabled(): boolean;
+    set disabled(disabled: Maybe<boolean>);
+    getScrollPositionRelativeToBottom(): number;
+    jumpToBottom(): void;
+    jumpToPositionRelativeToBottom(pos: number): void;
+    onScrollDown(): void;
+    onScrollUp(): void;
+    loadMore(): void;
+    get nativeElement(): any;
+    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]"]>;
+}
+/**
+ * Used internally by DbxListComponent
+ */
+export declare class DbxListInternalContentDirective {
+    private readonly parent;
+    readonly elementRef: ElementRef;
+    hide: Maybe<Boolean>;
+    constructor(parent: DbxListComponent, elementRef: ElementRef);
+    onScrollEvent($event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxListInternalContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxListInternalContentDirective, "[dbx-list-internal-content]", never, { "hide": "hide"; }, {}, never>;
+}

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

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+/**
+ * Component that is centered for use within an empty list.
+ */
+export declare class DbxListEmptyContentComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxListEmptyContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxListEmptyContentComponent, "dbx-list-empty-content", never, {}, {}, never, ["*"]>;
+}

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

@@ -0,0 +1,35 @@
+import { ListLoadingState, ObservableGetter } 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 { Maybe } from '@dereekb/util';
+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 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>;
+    private readonly _init;
+    readonly config$: Observable<DbxListConfig<T, V>>;
+    disabled?: Maybe<boolean>;
+    state$?: Maybe<Observable<S>>;
+    clickItem: EventEmitter<T>;
+    loadMore: EventEmitter<void>;
+    constructor(initConfig: ObservableGetter<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>;
+}
+export interface DbxSelectionListWrapperConfig<T, V extends DbxListView<T> = DbxListView<T>> extends Omit<DbxListWrapperConfig<T, V>, 'onSelectionChange'> {
+}
+export declare abstract class AbstractDbxSelectionListWrapperDirective<T, V extends DbxListView<T> = DbxListView<T>, C extends DbxSelectionListWrapperConfig<T, V> = DbxSelectionListWrapperConfig<T, V>, S extends ListLoadingState<T> = ListLoadingState<T>> extends AbstractDbxListWrapperDirective<T, V, C, S> {
+    selectionChange: EventEmitter<ListSelectionState<T>>;
+    ngOnDestroy(): void;
+    protected _buildListConfig(config: C): DbxListConfig<T, V>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxSelectionListWrapperDirective<any, any, any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSelectionListWrapperDirective<any, any, any, any>, never, never, {}, { "selectionChange": "selectionChange"; }, never>;
+}

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

@@ -1,8 +1,17 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./list.empty.component";
-import * as i2 from "@angular/common";
-export declare class DbNgxListLayoutModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxListLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxListLayoutModule, [typeof i1.DbNgxListEmptyContentComponent], [typeof i2.CommonModule], [typeof i1.DbNgxListEmptyContentComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxListLayoutModule>;
+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";
+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 ɵinj: i0.ɵɵInjectorDeclaration<DbxListLayoutModule>;
 }

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

@@ -0,0 +1,45 @@
+import { Observable } from 'rxjs';
+import { ListLoadingState, ListLoadingStateContext } from "@dereekb/rxjs";
+import { EventEmitter, Provider, Type } from "@angular/core";
+export interface ListSelectionStateItem<T> {
+    disabled?: boolean;
+    selected?: boolean;
+    value: T;
+}
+export interface ListSelectionState<T> {
+    items: ListSelectionStateItem<T>[];
+}
+/**
+ * Interface for a view that renders the items of a DbxList.
+ */
+export declare abstract class DbxListView<T, S extends ListLoadingState<T> = ListLoadingState<T>> {
+    /**
+     * Current disabled state.
+     */
+    abstract readonly disabled$: Observable<boolean>;
+    /**
+     * Values of the list view.
+     */
+    abstract readonly values$: Observable<T[]>;
+    /**
+     * (Optional) clicked event emitter.
+     *
+     * If available, the DbxList will subscribe to it automatically.
+     */
+    abstract clickValue?: EventEmitter<T>;
+    /**
+     * (Optional) selection changed event emitter.
+     *
+     * If available, the DbxList will subscribe to it automatically.
+     */
+    abstract selectionChange?: EventEmitter<ListSelectionState<T>>;
+    /**
+     * Sets the models input loading state context for the view to render from.
+     */
+    abstract setListContext(state: ListLoadingStateContext<T, S>): void;
+    /**
+     * Sets the disabled state of the list view.
+     */
+    abstract setDisabled(disabled: boolean): void;
+}
+export declare function ProvideDbxListView<V extends DbxListView<any>>(sourceType: Type<V>): Provider[];

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

@@ -0,0 +1,26 @@
+import { ListLoadingStateContext } from '@dereekb/rxjs';
+import { Observable } from 'rxjs';
+import { EventEmitter, OnDestroy } from '@angular/core';
+import { DbxListView } from './list.view';
+import { Maybe } from '@dereekb/util';
+import * as i0 from "@angular/core";
+/**
+ * Abstract DbxListView implementation.
+ */
+export declare abstract class AbstractDbxListViewDirective<T> implements DbxListView<T>, OnDestroy {
+    private readonly _disabled;
+    private readonly _values$;
+    readonly values$: Observable<T[]>;
+    readonly disabled$: Observable<boolean>;
+    clickValue: EventEmitter<T>;
+    constructor();
+    set valueArray(values: Maybe<T[]>);
+    set values(values: Maybe<Observable<T[]>>);
+    ngOnDestroy(): void;
+    onClickValue(value: T): void;
+    setListContext(state: ListLoadingStateContext<T>): void;
+    setValues(valuesObs: Maybe<Observable<T[]>>): void;
+    setDisabled(disabled: boolean): 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

@@ -0,0 +1,15 @@
+import { EventEmitter } from '@angular/core';
+import { MatSelectionListChange } from '@angular/material/list';
+import { ListSelectionState } from './list.view';
+import { AbstractDbxListViewDirective } from './list.view.directive';
+import * as i0 from "@angular/core";
+/**
+ * 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> {
+    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>;
+}

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

@@ -0,0 +1,15 @@
+import { DbxValueListItem, AbstractDbxValueListViewConfig } from './list.view.value';
+import { AbstractDbxValueListViewDirective } from './list.view.value.directive';
+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.
+ */
+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>;
+}

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

@@ -0,0 +1,21 @@
+import { ClickableAnchor } from '@dereekb/dbx-core';
+import { InjectionToken } from "@angular/core";
+import { DbxInjectedComponentConfig } from "@dereekb/dbx-core";
+import { Observable } from "rxjs";
+export declare const DBX_VALUE_LIST_VIEW_ITEM: InjectionToken<any>;
+export interface DbxValueListItem<T> {
+    value: T;
+    icon?: string;
+    disabled?: boolean;
+    selected?: boolean;
+    anchor?: ClickableAnchor;
+}
+export interface AbstractDbxValueListViewConfig<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = any> extends DbxInjectedComponentConfig<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 function mapValuesToValuesListItemConfigObs<T>(listViewConfig: AbstractDbxValueListViewConfig<T>, values: T[]): Observable<DbxValueListItemConfig<T>[]>;
+export declare function mapItemValuesToValueListItemConfig<T>(listViewConfig: AbstractDbxValueListViewConfig<T>, itemValues: DbxValueListItem<T>[]): DbxValueListItemConfig<T>[];

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

@@ -0,0 +1,21 @@
+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 * 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 {
+    readonly dbxListView: DbxListView<T>;
+    private _config;
+    readonly config$: Observable<C>;
+    readonly items$: Observable<DbxValueListItemConfig<T>[]>;
+    constructor(dbxListView: DbxListView<T>);
+    ngOnDestroy(): void;
+    set config(config: Maybe<C>);
+    onClickValue(value: T): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxValueListViewDirective<any, any, any, any>, never>;
+    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

@@ -0,0 +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>> {
+    readonly item: I;
+    get value(): T;
+    constructor(item: I);
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxSelectionValueListViewItemComponent<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSelectionValueListViewItemComponent<any, any>, never, never, {}, {}, never>;
+}

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

@@ -0,0 +1,32 @@
+import { MatSelectionListChange } from '@angular/material/list';
+import { DbxListView } from './list.view';
+import { DbxValueListItem, AbstractDbxValueListViewConfig, DbxValueListItemConfig } from './list.view.value';
+import { AbstractDbxValueListViewDirective } from './list.view.value.directive';
+import { Maybe } from '@dereekb/util';
+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.
+ */
+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>);
+    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>;
+    multiple?: Maybe<boolean>;
+    items?: Maybe<DbxValueListItemConfig<T>[]>;
+    readonly disabled$: import("rxjs").Observable<boolean>;
+    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>;
+}