release(workspace): v9.21.0 release

feat: added dbx-content-pit

feat: dbx-table (#23)

* checkpoint: outlined @dbx-web/table

* checkpoint: dbx-table

* checkpoint: dbx-table

* checkpoint: dbx-table

* checkpoint: dbx-table

* checkpoint: dbx-table
refactor: updated accumulatorFlattenPageListLoadingState()

- fixed issue where accumulatorFlattenPageListLoadingState() would return an empty loading state instead of all the current values

fix: fixed enableMultiTabIndexedDbPersistence usage

- fixed issue where trying to use both enableMultiTabIndexedDbPersistence and enableMultiTabIndexedDbPersistence at the same time
- enableMultiTabIndexedDbPersistence is now the default, with enableIndexedDbPersistence being used if enableMultiTabIndexedDbPersistence is false

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+# [9.21.0](https://github.com/dereekb/dbx-components/compare/v9.20.20-dev...v9.21.0) (2023-01-31)
+
+
+### Bug Fixes
+
+* fixed enableMultiTabIndexedDbPersistence usage ([2c41552](https://github.com/dereekb/dbx-components/commit/2c41552c6849cd7cae2405cd456d92bca265a5d3))
+
+
+### Features
+
+* added dbx-content-pit ([cbce68a](https://github.com/dereekb/dbx-components/commit/cbce68ad73dc896acc34232e3375698133e99241))
+* dbx-table ([#23](https://github.com/dereekb/dbx-components/issues/23)) ([4661508](https://github.com/dereekb/dbx-components/commit/466150895b5bdc6e9e5289ef38ef5dd3e0ae67f9))
+
+
+
 ## [9.20.20](https://github.com/dereekb/dbx-components/compare/v9.20.19-dev...v9.20.20) (2023-01-23)
 
 

apps/demo-api/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+# [9.21.0](https://github.com/dereekb/dbx-components/compare/v9.20.20-dev...v9.21.0) (2023-01-31)
+
+
+
 ## [9.20.20](https://github.com/dereekb/dbx-components/compare/v9.20.19-dev...v9.20.20) (2023-01-23)
 
 

apps/demo-e2e/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+# [9.21.0](https://github.com/dereekb/dbx-components/compare/v9.20.20-dev...v9.21.0) (2023-01-31)
+
+
+
 ## [9.20.20](https://github.com/dereekb/dbx-components/compare/v9.20.19-dev...v9.20.20) (2023-01-23)
 
 

apps/demo/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+# [9.21.0](https://github.com/dereekb/dbx-components/compare/v9.20.20-dev...v9.21.0) (2023-01-31)
+
+
+### Features
+
+* added dbx-content-pit ([cbce68a](https://github.com/dereekb/dbx-components/commit/cbce68ad73dc896acc34232e3375698133e99241))
+* dbx-table ([#23](https://github.com/dereekb/dbx-components/issues/23)) ([4661508](https://github.com/dereekb/dbx-components/commit/466150895b5bdc6e9e5289ef38ef5dd3e0ae67f9))
+
+
+
 ## [9.20.20](https://github.com/dereekb/dbx-components/compare/v9.20.19-dev...v9.20.20) (2023-01-23)
 
 

apps/demo/src/app/modules/doc/modules/extension/component/table.item.action.example.component.ts

@@ -0,0 +1,17 @@
+import { filterMaybe } from '@dereekb/rxjs';
+import { ChangeDetectionStrategy, Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { AbstractDbxInjectionDirective } from '@dereekb/dbx-core';
+import { map, distinctUntilChanged, BehaviorSubject, switchMap } from 'rxjs';
+import { Maybe } from '@dereekb/util';
+
+@Component({
+  template: `
+    <div class="doc-example-table-action-cell">
+      <button mat-icon-button><mat-icon>thumb_up</mat-icon></button>
+      <dbx-button-spacer></dbx-button-spacer>
+      <button mat-icon-button><mat-icon>thumb_down</mat-icon></button>
+    </div>
+  `,
+  styleUrls: ['./table.item.action.example.scss']
+})
+export class DocExtensionTableItemActionExampleComponent {}

apps/demo/src/app/modules/doc/modules/extension/component/table.item.action.example.scss

@@ -0,0 +1,7 @@
+.doc-example-table-action-cell {
+  min-width: 110px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+}

apps/demo/src/app/modules/doc/modules/extension/component/table.item.cell.example.component.ts

@@ -0,0 +1,28 @@
+import { filterMaybe } from '@dereekb/rxjs';
+import { ChangeDetectionStrategy, Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { AbstractDbxInjectionDirective } from '@dereekb/dbx-core';
+import { map, distinctUntilChanged, BehaviorSubject, switchMap } from 'rxjs';
+import { Maybe } from '@dereekb/util';
+import { DbxTableColumn } from '@dereekb/dbx-web/table';
+import { ExampleTableData } from './table.item';
+
+@Component({
+  template: `
+    <div style="text-align: center">
+      <div class="dbx-small">{{ name }}</div>
+      <div class="dbx-small dbx-hint">{{ columnName }}</div>
+    </div>
+  `
+})
+export class DocExtensionTableItemCellExampleComponent {
+  item!: ExampleTableData;
+  column!: DbxTableColumn<Date>;
+
+  get name() {
+    return this.item.name;
+  }
+
+  get columnName() {
+    return this.column.columnName;
+  }
+}

apps/demo/src/app/modules/doc/modules/extension/component/table.item.header.example.component.ts

@@ -0,0 +1,19 @@
+import { filterMaybe } from '@dereekb/rxjs';
+import { ChangeDetectionStrategy, Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { AbstractDbxInjectionDirective } from '@dereekb/dbx-core';
+import { map, distinctUntilChanged, BehaviorSubject, switchMap } from 'rxjs';
+import { Maybe } from '@dereekb/util';
+import { ExampleTableData } from './table.item';
+
+@Component({
+  template: `
+    <div>{{ name }}</div>
+  `
+})
+export class DocExtensionTableItemHeaderExampleComponent {
+  item!: ExampleTableData;
+
+  get name() {
+    return this.item.name;
+  }
+}

apps/demo/src/app/modules/doc/modules/extension/component/table.item.ts

@@ -0,0 +1,5 @@
+import { ModelKeyRef } from '@dereekb/util';
+
+export interface ExampleTableData extends ModelKeyRef {
+  name: string;
+}

apps/demo/src/app/modules/doc/modules/extension/container/table.component.html

@@ -0,0 +1,16 @@
+<dbx-content-container>
+  <doc-feature-layout header="Table Extension" hint="">
+    <!-- Examples -->
+    <doc-feature-example header="dbx-table-view" hint="The base-level component that renders the state of a dbxTableStore.">
+      <dbx-table-view dbxTable [dbxTableInput]="exampleInput" [dbxTableViewDelegate]="exampleViewDelegate" [dbxTableDataDelegate]="exampleDataDelegate"></dbx-table-view>
+      <h3>Context Loading</h3>
+      <p class="dbx-hint">While the context is loading the table shows a spinning loader.</p>
+      <dbx-table-view dbxTable [dbxTableInput]="exampleInput" [dbxTableViewDelegate]="exampleViewDelegate" [dbxTableDataDelegate]="exampleLoadingContextDelegate"></dbx-table-view>
+      <h3>Data Loading</h3>
+      <p class="dbx-hint">This example shows how loading the data is handled. The delegate also provides a loadMore() functionality, allowing more items to load as the table is scrolled.</p>
+      <button *ngIf="isLoading$ | async" mat-raised-button (click)="loadMoreItems()">Finish Loading Items</button>
+      <p></p>
+      <dbx-table-view dbxTable [dbxTableInput]="exampleInput" [dbxTableViewDelegate]="exampleViewDelegate" [dbxTableDataDelegate]="exampleLoadingDataDelegate"></dbx-table-view>
+    </doc-feature-example>
+  </doc-feature-layout>
+</dbx-content-container>

apps/demo/src/app/modules/doc/modules/extension/container/table.component.ts

@@ -0,0 +1,117 @@
+import { DocExtensionTableItemCellExampleComponent } from './../component/table.item.cell.example.component';
+import { startOfDay } from 'date-fns/esm';
+import { Component, OnDestroy } from '@angular/core';
+import { DateRangeDayDistanceInput, expandDaysForDateRange, dateRange, formatToISO8601DayString, DateRangeType } from '@dereekb/date';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
+import { DbxWidgetDataPair } from '@dereekb/dbx-web';
+import { DbxTableColumn, DbxTableContextData, DbxTableContextDataDelegate, dbxTableDateHeaderInjectionFactory, dbxTableDateRangeDayDistanceInputCellInput, DbxTableViewDelegate } from '@dereekb/dbx-web/table';
+import { beginLoading, beginLoadingPage, ListLoadingState, PageListLoadingState, successPageResult, successResult } from '@dereekb/rxjs';
+import { Maybe, ModelKeyRef, range } from '@dereekb/util';
+import { delay, map, Observable, of, startWith, BehaviorSubject, skip, shareReplay, distinctUntilChanged, switchMap } from 'rxjs';
+import { DocExtensionTableItemActionExampleComponent } from '../component/table.item.action.example.component';
+import { DocExtensionTableItemHeaderExampleComponent } from '../component/table.item.header.example.component';
+import { ExampleTableData } from '../component/table.item';
+
+@Component({
+  templateUrl: './table.component.html'
+})
+export class DocExtensionTableComponent implements OnDestroy {
+  readonly exampleInput: DateRangeDayDistanceInput = {
+    date: startOfDay(new Date()),
+    distance: 6
+  };
+
+  readonly exampleTableData: ExampleTableData[] = range(0, 15).map((x) => ({ name: `Example ${x}`, key: String(x) }));
+  readonly exampleTableDataItems = new BehaviorSubject<ExampleTableData[]>(this.exampleTableData);
+
+  readonly isLoading$ = this.exampleTableDataItems.pipe(
+    skip(1),
+    map((x) => false),
+    startWith(true),
+    distinctUntilChanged(),
+    shareReplay(1)
+  );
+
+  readonly exampleViewDelegate: DbxTableViewDelegate<DateRangeDayDistanceInput, Date, ExampleTableData> = {
+    inputHeader: dbxTableDateRangeDayDistanceInputCellInput(),
+    columnHeader: dbxTableDateHeaderInjectionFactory(),
+    itemHeader: function (item: ExampleTableData) {
+      return {
+        componentClass: DocExtensionTableItemHeaderExampleComponent,
+        init: (x) => {
+          x.item = item;
+        }
+      };
+    },
+    itemCell: function (column: DbxTableColumn<Date>, item: ExampleTableData) {
+      return {
+        componentClass: DocExtensionTableItemCellExampleComponent,
+        init: (x) => {
+          x.item = item;
+          x.column = column;
+        }
+      };
+    },
+    itemAction: function (item: ExampleTableData) {
+      return {
+        componentClass: DocExtensionTableItemActionExampleComponent
+      };
+    }
+  };
+
+  readonly exampleDataDelegate: DbxTableContextDataDelegate<DateRangeDayDistanceInput, Date, ExampleTableData> = {
+    loadData: (input) => {
+      const allDays = expandDaysForDateRange(dateRange({ ...input }));
+      const columns: DbxTableColumn<Date>[] = allDays.map((x) => ({ columnName: formatToISO8601DayString(x), meta: x }));
+      const items: ExampleTableData[] = [...this.exampleTableData];
+      const items$: Observable<PageListLoadingState<ExampleTableData>> = of(successPageResult(0, items));
+
+      const result: DbxTableContextData<DateRangeDayDistanceInput, Date, ExampleTableData> = {
+        input,
+        columns,
+        items$
+      };
+
+      return of(successResult(result)); // .pipe(delay(1000), startWith(beginLoadingPage<typeof result>(0)));
+    }
+  };
+
+  readonly exampleLoadingContextDelegate: DbxTableContextDataDelegate<DateRangeDayDistanceInput, Date, ExampleTableData> = {
+    loadData: (input) => {
+      return of(beginLoadingPage<DbxTableContextData<DateRangeDayDistanceInput, Date, ExampleTableData>>(0));
+    }
+  };
+
+  readonly exampleLoadingDataDelegate: DbxTableContextDataDelegate<DateRangeDayDistanceInput, Date, ExampleTableData> = {
+    loadData: (input) => {
+      const allDays = expandDaysForDateRange(dateRange({ ...input }));
+      const columns: DbxTableColumn<Date>[] = allDays.map((x) => ({ columnName: formatToISO8601DayString(x), meta: x }));
+      const items$: Observable<PageListLoadingState<ExampleTableData>> = this.exampleTableDataItems
+        .pipe(
+          skip(1),
+          switchMap((x) => of(successPageResult(0, x)).pipe(delay(1000), startWith(beginLoadingPage<ExampleTableData[]>(0))))
+        )
+        .pipe(startWith(beginLoadingPage<ExampleTableData[]>(0)));
+
+      const result: DbxTableContextData<DateRangeDayDistanceInput, Date, ExampleTableData> = {
+        input,
+        columns,
+        items$,
+        loadMore: () => this.loadMoreItems()
+      };
+
+      return of(successResult(result));
+    }
+  };
+
+  loadMoreItems() {
+    const currentItems = this.exampleTableDataItems.value;
+    const itemsCount = currentItems.length;
+    const newItems = range(itemsCount + 1, itemsCount + 15).map((x) => ({ name: `Example ${x}`, key: String(x) }));
+    this.exampleTableDataItems.next([...currentItems, ...newItems]);
+  }
+
+  ngOnDestroy(): void {
+    this.exampleTableDataItems.complete();
+  }
+}

apps/demo/src/app/modules/doc/modules/extension/doc.extension.module.ts

@@ -13,13 +13,18 @@ import { DocFormComponentsModule } from '../form/doc.form.module';
 import { DocExtensionMapboxComponent } from './container/mapbox.component';
 import { DbxFormMapboxModule } from '@dereekb/dbx-form/mapbox';
 import { DbxMapboxModule } from '@dereekb/dbx-web/mapbox';
+import { DbxTableDateModule, DbxTableModule } from '@dereekb/dbx-web/table';
 import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
 import { DocExtensionMapboxContentExampleComponent } from './component/mapbox.content.example.component';
 import { DocExtensionMapboxMarkersExampleComponent } from './component/mapbox.markers.example.component';
 import { DbxCalendarRootModule } from '@dereekb/dbx-web/calendar';
 import { DocExtensionCalendarScheduleSelectionComponent } from './component/selection.calendar.component';
 import { DbxFormCalendarModule, DbxFormDateScheduleRangeFieldModule } from '@dereekb/dbx-form/calendar';
 import { DocExtensionCalendarScheduleSelectionWithFilterComponent } from './component/selection.filter.calendar.component';
+import { DocExtensionTableComponent } from './container/table.component';
+import { DocExtensionTableItemActionExampleComponent } from './component/table.item.action.example.component';
+import { DocExtensionTableItemCellExampleComponent } from './component/table.item.cell.example.component';
+import { DocExtensionTableItemHeaderExampleComponent } from './component/table.item.header.example.component';
 
 @NgModule({
   imports: [
@@ -32,6 +37,8 @@ import { DocExtensionCalendarScheduleSelectionWithFilterComponent } from './comp
     DbxMapboxModule,
     NgxMapboxGLModule,
     DbxFormMapboxModule,
+    DbxTableModule,
+    DbxTableDateModule,
     UIRouterModule.forChild({
       states: STATES
     })
@@ -44,10 +51,14 @@ import { DocExtensionCalendarScheduleSelectionWithFilterComponent } from './comp
     DocExtensionMapboxMarkersExampleComponent,
     DocExtensionCalendarScheduleSelectionComponent,
     DocExtensionCalendarScheduleSelectionWithFilterComponent,
+    DocExtensionTableItemHeaderExampleComponent,
+    DocExtensionTableItemCellExampleComponent,
+    DocExtensionTableItemActionExampleComponent,
     // container
     DocExtensionLayoutComponent,
     DocExtensionHomeComponent,
     DocExtensionCalendarComponent,
+    DocExtensionTableComponent,
     DocExtensionWidgetComponent,
     DocExtensionMapboxComponent
   ]

apps/demo/src/app/modules/doc/modules/extension/doc.extension.router.ts

@@ -4,6 +4,7 @@ import { DocExtensionCalendarComponent } from './container/calendar.component';
 import { DocExtensionHomeComponent } from './container/home.component';
 import { DocExtensionWidgetComponent } from './container/widget.component';
 import { DocExtensionMapboxComponent } from './container/mapbox.component';
+import { DocExtensionTableComponent } from './container/table.component';
 
 export const layoutState: Ng2StateDeclaration = {
   url: '/extension',
@@ -36,11 +37,18 @@ export const docExtensionMapboxState: Ng2StateDeclaration = {
   component: DocExtensionMapboxComponent
 };
 
+export const docExtensionTableState: Ng2StateDeclaration = {
+  url: '/table',
+  name: 'doc.extension.table',
+  component: DocExtensionTableComponent
+};
+
 export const STATES: Ng2StateDeclaration[] = [
   //
   layoutState,
   homeState,
   docExtensionCalendarState,
   docExtensionWidgetState,
-  docExtensionMapboxState
+  docExtensionMapboxState,
+  docExtensionTableState
 ];

apps/demo/src/app/modules/doc/modules/extension/doc.extension.ts

@@ -16,6 +16,12 @@ export const DOC_EXTENSION_ROUTES = [
     title: 'Mapbox',
     detail: 'mapbox extension',
     ref: 'doc.extension.mapbox'
+  },
+  {
+    icon: 'table_view',
+    title: 'Table',
+    detail: 'table extension',
+    ref: 'doc.extension.table'
   }
 ];
 

apps/demo/src/app/modules/doc/modules/layout/container/content.component.html

@@ -60,6 +60,30 @@ <h4>Growth can be customized.</h4>
         <p>This content is in a box that is not elevated.</p>
       </dbx-content-box>
     </doc-feature-example>
+    <doc-feature-example header=".dbx-content-pit" hint="Content with a background, margin and internal label with space for content.">
+      <dbx-content-pit>
+        <p>This content is in pit.</p>
+      </dbx-content-pit>
+      <h4>Examples</h4>
+      <p>Example of a dbx-content-pit with dbx-label-block and content.</p>
+      <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+        <dbx-content-pit style="border-radius: 20px; width: 140px; height: 140px">
+          <dbx-label-block header="Example Label">
+            <div class="dbx-primary" style="text-align: center; font-size: 4.4em; font-weight: bold">100</div>
+          </dbx-label-block>
+        </dbx-content-pit>
+        <dbx-content-pit style="border-radius: 20px; width: 140px; height: 140px">
+          <dbx-label-block header="Example Label">
+            <div class="dbx-accent" style="text-align: center; font-size: 4.4em; font-weight: bold">100</div>
+          </dbx-label-block>
+        </dbx-content-pit>
+        <dbx-content-pit style="border-radius: 20px; width: 140px; height: 140px">
+          <dbx-label-block header="Example Label">
+            <div class="dbx-warn" style="text-align: center; font-size: 4.4em; font-weight: bold">100</div>
+          </dbx-label-block>
+        </dbx-content-pit>
+      </div>
+    </doc-feature-example>
     <doc-feature-example header=".dbx-content" hint="This view/class sets the height to be the height of the page, minus the top and (if known) content navigation bars.">
       <dbx-content>
         <div style="background: grey; height: 100%"></div>