feat: added dbxList

packages/dbx-form/src/lib/formly/fields/checklist/checklist.item.field.component.ts

@@ -1,4 +1,4 @@
-import { filterMaybe } from '@dereekb/rxjs';
+import { filterMaybe, switchMapMaybeObs } from '@dereekb/rxjs';
 import { shareReplay, distinctUntilChanged, switchMap, map } from 'rxjs/operators';
 import { BehaviorSubject } from 'rxjs';
 import {
@@ -33,8 +33,7 @@ export class DbxChecklistItemFieldComponent<T = any> extends FieldType<Checklist
   private _displayContent = new BehaviorSubject<Maybe<ChecklistItemFieldDisplayContentObs<T>>>(undefined);
 
   readonly displayContent$ = this._displayContent.pipe(
-    filterMaybe(),
-    switchMap(x => x),
+    switchMapMaybeObs(),
     distinctUntilChanged(),
     shareReplay(1)
   );

packages/dbx-form/src/lib/formly/fields/date/datetime.field.component.ts

@@ -10,7 +10,7 @@ import { BehaviorSubject, Observable, of, combineLatest, Subject, merge, interva
 import { Maybe, ReadableTimeString } from '@dereekb/util';
 import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { addMinutes, isSameDay, isSameMinute, startOfDay } from 'date-fns';
-import { filterMaybe, SubscriptionObject } from '@dereekb/rxjs';
+import { filterMaybe, SubscriptionObject, switchMapMaybeObs } from '@dereekb/rxjs';
 
 export enum DateTimeFieldTimeMode {
   /**
@@ -172,7 +172,7 @@ export class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyFieldConf
     distinctUntilChanged()
   );
 
-  readonly config$ = this._config.pipe(filterMaybe(), switchMap(x => x), shareReplay(1));
+  readonly config$ = this._config.pipe(switchMapMaybeObs(), shareReplay(1));
 
   readonly rawDateTime$: Observable<Date> = combineLatest([
     this.dateValue$.pipe(filterMaybe()),

packages/dbx-form/src/lib/formly/fields/generic/pickable.field.component.ts

@@ -1,5 +1,5 @@
 import { DbxInjectedComponentConfig } from "@dereekb/dbx-core";
-import { beginLoading, LoadingStateContext, LoadingState, successResult, mapLoadingStateResults, filterMaybe } from "@dereekb/rxjs";
+import { beginLoading, LoadingStateContextInstance, LoadingState, successResult, mapLoadingStateResults, filterMaybe } from "@dereekb/rxjs";
 import { convertMaybeToArray, findUnique, groupValues, makeValuesGroupMap, Maybe } from "@dereekb/util";
 import { Component, Directive, ElementRef, OnDestroy, OnInit, Type, ViewChild } from "@angular/core";
 import { FormControl, AbstractControl } from "@angular/forms";
@@ -222,7 +222,7 @@ export class AbstractDbxPickableItemFieldDirective<T> extends FieldType<Pickable
   /**
    * Context used for managing the loading of items, or when the current results change.
    */
-  readonly context = new LoadingStateContext({ obs: this.itemsLoadingState$, showLoadingOnNoModel: false });
+  readonly context = new LoadingStateContextInstance({ obs: this.itemsLoadingState$, showLoadingOnNoModel: false });
 
   readonly filterItemsLoadingState$: Observable<LoadingState> = this.items$.pipe(
     map(x => successResult(x)),
@@ -233,7 +233,7 @@ export class AbstractDbxPickableItemFieldDirective<T> extends FieldType<Pickable
   /**
    * Context used for searching/filtering.
    */
-  readonly filterResultsContext = new LoadingStateContext({ obs: this.loadResultsDisplayValuesState$, showLoadingOnNoModel: true });
+  readonly filterResultsContext = new LoadingStateContextInstance({ obs: this.loadResultsDisplayValuesState$, showLoadingOnNoModel: true });
 
   get multiSelect(): boolean {
     return this.field.multiSelect ?? true;

packages/dbx-form/src/lib/formly/fields/generic/searchable.field.component.ts

@@ -1,4 +1,4 @@
-import { filterMaybe, SubscriptionObject, beginLoading, LoadingState, LoadingStateContext } from '@dereekb/rxjs';
+import { filterMaybe, SubscriptionObject, beginLoading, LoadingState, LoadingStateContextInstance } from '@dereekb/rxjs';
 import { Directive, ElementRef, OnDestroy, OnInit, Type, ViewChild } from '@angular/core';
 import { AbstractControl, FormControl, ValidatorFn } from '@angular/forms';
 import { FieldType, FormlyFieldConfig } from '@ngx-formly/core';
@@ -117,7 +117,7 @@ export abstract class AbstractDbxSearchableValueFieldDirective<T, C extends Sear
 
   readonly singleValueSyncSubscription = new SubscriptionObject();
 
-  readonly searchContext = new LoadingStateContext({ obs: this.searchResultsState$, showLoadingOnNoModel: true });
+  readonly searchContext = new LoadingStateContextInstance({ obs: this.searchResultsState$, showLoadingOnNoModel: true });
 
   readonly searchResults$: Observable<SearchableValueFieldDisplayValue<T>[]> = this.searchResultsState$.pipe(
     map(x => x?.model ?? [])

packages/dbx-web/src/lib/layout/bar/banner.component.html

@@ -0,0 +1 @@
+<div></div>

packages/dbx-web/src/lib/layout/bar/banner.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+// TODO: Banner either should be removed or repurposed.
+@Component({
+  selector: 'dbx-banner',
+  templateUrl: './banner.component.html'
+})
+export class DbxBannerComponent { }

packages/dbx-web/src/lib/layout/list/_list.scss

@@ -4,7 +4,33 @@
 
 
 // MARK: Mixin
-@mixin core() {}
+@mixin core() {
+
+  .dbx-list {
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .dbx-list-view {
+    max-height: 100%;
+    overflow: auto;
+    box-sizing: border-box;
+
+    &.dbx-list-padded {
+      padding-bottom: 8px;
+    }
+
+    .mat-list-base {
+      padding-top: 0;
+    }
+
+  }
+
+  .dbx-list-content-box {
+    padding: 4px;
+  }
+
+}
 
 @mixin color($theme-config) {}
 

packages/dbx-web/src/lib/layout/list/index.ts

@@ -1,4 +1,7 @@
-export * from './list.empty.component';
+export * from './list.content.empty.component';
 export * from './list.component';
-export * from './list.selection';
+export * from './list.directive';
 export * from './list.layout.module';
+export * from './list.view.component';
+export * from './list.view.selection.component';
+export * from './list.view';

packages/dbx-web/src/lib/layout/list/list.component.html

@@ -1,10 +1,10 @@
-<dbx-loading [context]="context" [linear]="true">
-  <dbx-list-view infinite-scroll [infiniteScrollDistance]="scrollDistance" [hidden]="hideContent$ | async"
-    [infiniteScrollUpDistance]="scrollDistance" [infiniteScrollThrottle]="throttle" [scrollWindow]="false"
-    (scrolled)="onScrollDown()" (scrolledUp)="onScrollUp()">
-    <ng-content select="[top]"></ng-content>
-    <dbx-injected-content [config]="injectedComponentConfig$ | async"></dbx-injected-content>
-    <ng-content select="[bottom]"></ng-content>
-  </dbx-list-view>
-  <ng-content *ngIf="isEmpty$ | async" select="[empty]"></ng-content>
-</dbx-loading>
+<dbx-loading [context]="context" [linear]="true"></dbx-loading>
+<dbx-list-view infinite-scroll [infiniteScrollDistance]="(scrollDistance$ | async) ?? DEFAULT_SCROLL_DISTANCE"
+  [infiniteScrollUpDistance]="(scrollDistance$ | async) ?? DEFAULT_SCROLL_DISTANCE" [hidden]="hideContent$ | async"
+  [infiniteScrollThrottle]="(throttleScroll$ | async) ?? DEFAULT_THROTTLE_SCROLL" [scrollWindow]="false"
+  (scrolled)="onScrollDown()" (scrolledUp)="onScrollUp()">
+  <ng-content select="[top]"></ng-content>
+  <dbx-injected-content [config]="injectedComponentConfig$ | async"></dbx-injected-content>
+  <ng-content select="[bottom]"></ng-content>
+</dbx-list-view>
+<ng-content *ngIf="isEmpty$ | async" select="[empty]"></ng-content>