@dereekb/dbx-web 2.0.0 → 4.0.0

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.content.component.d.ts

@@ -1,11 +1,22 @@
+import { Observable } from 'rxjs';
+import { OnDestroy } from '@angular/core';
 import { ClickableAnchorLink } from '@dereekb/dbx-core';
 import { Maybe } from '@dereekb/util';
+import { DbxAnchorComponent } from './anchor.component';
 import * as i0 from "@angular/core";
 /**
  * Component that displays an anchor and a span with the title.
  */
-export declare class DbxAnchorContentComponent {
-    anchor: Maybe<Partial<ClickableAnchorLink>>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorContentComponent, never>;
+export declare class DbxAnchorContentComponent implements OnDestroy {
+    readonly parent?: DbxAnchorComponent | undefined;
+    private readonly _parentAnchor;
+    private _inputAnchor;
+    readonly anchor$: Observable<Maybe<Partial<ClickableAnchorLink>>>;
+    readonly icon$: Observable<string | undefined>;
+    readonly title$: Observable<string | undefined>;
+    set anchor(anchor: Maybe<Partial<ClickableAnchorLink>>);
+    constructor(parent?: DbxAnchorComponent | undefined);
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorContentComponent, [{ optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorContentComponent, "dbx-anchor-content", never, { "anchor": "anchor"; }, {}, never, 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>;

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

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

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

@@ -16,8 +16,8 @@ import * as i14 from "@angular/material/sidenav";
 import * as i15 from "@angular/material/list";
 import * as i16 from "@angular/material/divider";
 import * as i17 from "@uirouter/angular";
-export declare class DbxSidenavModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxSidenavModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxSidenavModule, [typeof i1.DbxSidenavComponent, typeof i2.DbxSidenavButtonComponent, typeof i3.DbxSidenavPagebarComponent, typeof i4.DbxSidenavPageComponent], [typeof i5.CommonModule, typeof i6.DbxBarLayoutModule, typeof i7.DbxAnchorModule, typeof i8.DbxAnchorListModule, typeof i9.DbxButtonModule, typeof i10.DbxContentLayoutModule, typeof i11.MatToolbarModule, typeof i12.MatButtonModule, typeof i13.MatIconModule, typeof i14.MatSidenavModule, typeof i15.MatListModule, typeof i16.MatDividerModule, typeof i17.UIRouterModule], [typeof i1.DbxSidenavComponent, typeof i2.DbxSidenavButtonComponent, typeof i3.DbxSidenavPagebarComponent, typeof i4.DbxSidenavPageComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbxSidenavModule>;
+export declare class DbxRouterSidenavModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxRouterSidenavModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterSidenavModule, [typeof i1.DbxSidenavComponent, typeof i2.DbxSidenavButtonComponent, typeof i3.DbxSidenavPagebarComponent, typeof i4.DbxSidenavPageComponent], [typeof i5.CommonModule, typeof i6.DbxBarLayoutModule, typeof i7.DbxRouterAnchorModule, typeof i8.DbxRouterAnchorListModule, typeof i9.DbxButtonModule, typeof i10.DbxContentLayoutModule, typeof i11.MatToolbarModule, typeof i12.MatButtonModule, typeof i13.MatIconModule, typeof i14.MatSidenavModule, typeof i15.MatListModule, typeof i16.MatDividerModule, typeof i17.UIRouterModule], [typeof i1.DbxSidenavComponent, typeof i2.DbxSidenavButtonComponent, typeof i3.DbxSidenavPagebarComponent, typeof i4.DbxSidenavPageComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxRouterSidenavModule>;
 }

package/lib/router/layout/sidenav/sidenav.page.component.d.ts

@@ -1,3 +1,4 @@
+import { OnDestroy } from '@angular/core';
 import { DbxSidenavComponent } from './sidenav.component';
 import { Maybe } from '@dereekb/util';
 import { DbxBarColor } from '../../../layout/bar/bar';
@@ -7,12 +8,13 @@ import * as i0 from "@angular/core";
  *
  * Can optionally be configured to only show the pagebar while in mobile mode.
  */
-export declare class DbxSidenavPageComponent {
+export declare class DbxSidenavPageComponent implements OnDestroy {
     readonly parent: DbxSidenavComponent;
     color?: Maybe<DbxBarColor>;
     private _mobileOnly;
-    constructor(parent: DbxSidenavComponent);
     readonly hidePagebar$: import("rxjs").Observable<boolean>;
+    constructor(parent: DbxSidenavComponent);
+    ngOnDestroy(): void;
     get mobileOnly(): boolean;
     set mobileOnly(mobileOnly: boolean);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSidenavPageComponent, never>;

package/lib/router/provider/ngrouter/angular.router.module.d.ts

@@ -7,6 +7,6 @@ import * as i4 from "@dereekb/dbx-core";
 export declare class DbxWebAngularRouterModule {
     static forRoot(): ModuleWithProviders<DbxWebAngularRouterModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxWebAngularRouterModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxWebAngularRouterModule, [typeof i1.DbxAngularRouterSegueAnchorComponent], [typeof i2.CommonModule, typeof i3.UIRouterModule, typeof i4.DbxInjectedComponentModule], [typeof i1.DbxAngularRouterSegueAnchorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxWebAngularRouterModule, [typeof i1.DbxAngularRouterSegueAnchorComponent], [typeof i2.CommonModule, typeof i3.UIRouterModule, typeof i4.DbxInjectionComponentModule], [typeof i1.DbxAngularRouterSegueAnchorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxWebAngularRouterModule>;
 }

package/lib/router/provider/router.provider.config.d.ts

@@ -1,7 +1,7 @@
-import { DbxInjectedComponentConfig } from "@dereekb/dbx-core";
+import { DbxInjectionComponentConfig } from "@dereekb/dbx-core";
 export declare abstract class DbxRouterWebProviderConfig {
     /**
      * Component used by the Anchor component to render a SegueRef link.
      */
-    abstract anchorSegueRefComponent: DbxInjectedComponentConfig;
+    abstract anchorSegueRefComponent: DbxInjectionComponentConfig;
 }

package/lib/router/provider/uirouter/uirouter.router.module.d.ts

@@ -7,6 +7,6 @@ import * as i4 from "@dereekb/dbx-core";
 export declare class DbxWebUIRouterModule {
     static forRoot(): ModuleWithProviders<DbxWebUIRouterModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxWebUIRouterModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxWebUIRouterModule, [typeof i1.DbxUIRouterSegueAnchorComponent], [typeof i2.CommonModule, typeof i3.UIRouterModule, typeof i4.DbxInjectedComponentModule], [typeof i1.DbxUIRouterSegueAnchorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxWebUIRouterModule, [typeof i1.DbxUIRouterSegueAnchorComponent], [typeof i2.CommonModule, typeof i3.UIRouterModule, typeof i4.DbxInjectionComponentModule], [typeof i1.DbxUIRouterSegueAnchorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxWebUIRouterModule>;
 }

package/lib/screen/screen.service.d.ts

@@ -1,6 +1,6 @@
 import { Destroyable } from '@dereekb/util';
 import { MediaMatcher } from "@angular/cdk/layout";
-import { ObservableGetter } from '@dereekb/rxjs';
+import { ObservableOrValue } from '@dereekb/rxjs';
 import { Observable } from "rxjs";
 import { ScreenMediaWidthType, ScreenMediaHeightType } from "./screen";
 import * as i0 from "@angular/core";
@@ -52,7 +52,7 @@ export declare class DbxScreenMediaService implements Destroyable {
      * @param inputBreakpoint
      * @returns
      */
-    isBreakpointActive(inputBreakpoint: ObservableGetter<ScreenMediaWidthType>): Observable<boolean>;
+    isBreakpointActive(inputBreakpoint: ObservableOrValue<ScreenMediaWidthType>): Observable<boolean>;
     private _readWidthType;
     private _readHeightType;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxScreenMediaService, never>;

package/lib/style/_config.scss

@@ -75,7 +75,9 @@
     'padding-2': 6px,                 // initial padding-2
     'padding-3': 12px,                // initial padding-3
     'padding-4': 18px,                // initial padding-4
-    'padding-5': 24px                 // initial padding-5
+    'padding-5': 24px,                // initial padding-5
+    // layout
+    'two-column-left-width': 320px
   );
 
   @if ($input-dbx-theme-layout-config != null) {
@@ -120,3 +122,7 @@
 @function get-dbx-layout-padding($theme-config, $padding-level) {
   @return get-dbx-layout-config-var($theme-config, 'padding-'+ $padding-level);
 }
+
+@function get-dbx-two-column-left-width($theme-config) {
+  @return get-dbx-layout-config-var($theme-config, 'two-column-left-width');
+}

package/lib/style/_root-variables.scss

@@ -24,6 +24,8 @@
     #{theming.$padding-4-var}: theming.get-dbx-layout-padding($theme-config, 4);
     #{theming.$padding-5-var}: theming.get-dbx-layout-padding($theme-config, 5);
 
+    #{theming.$two-column-left-width-var}: theming.get-dbx-two-column-left-width($theme-config);
+
     // root height
     &.dbx-style-root {
       display: block;

package/lib/style/_variables.scss

@@ -19,6 +19,8 @@ $padding-3-var: --dbx-padding-3;
 $padding-4-var: --dbx-padding-4;
 $padding-5-var: --dbx-padding-5;
 
+$two-column-left-width-var: --dbx-two-column-left-width;
+
 // vars
 $vh100: var($vh100-var);
 
@@ -43,3 +45,5 @@ $padding-4: var($padding-4-var);
 $padding-5: var($padding-5-var);
 
 $padding-map: (0: $padding-0, 1: $padding-1, 2: $padding-2, 3: $padding-3, 4: $padding-4, 5: $padding-5);
+
+$two-column-left-width: var($two-column-left-width-var);

package/package.json

@@ -1,61 +1,41 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "2.0.0",
+  "version": "4.0.0",
+  "peerDependencies": {
+    "@angular/common": "^13.0.0",
+    "@angular/core": "^13.0.0",
+    "@angular/material": "^13.0.0",
+    "@dereekb/rxjs": "4.0.0",
+    "@dereekb/dbx-core": "4.0.0",
+    "@angular/flex-layout": "^13.0.0-beta.38",
+    "ng-overlay-container": "^13.0.0",
+    "@angular/cdk": "^13.0.0",
+    "angular-resize-event": "^3.1.1",
+    "ngx-infinite-scroll": "^13.0.2",
+    "linkify-string": "4.0.0-beta.5"
+  },
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "module": "fesm2015/dereekb-dbx-web.mjs",
-  "es2020": "fesm2020/dereekb-dbx-web.mjs",
-  "esm2020": "esm2020/dereekb-dbx-web.mjs",
-  "fesm2020": "fesm2020/dereekb-dbx-web.mjs",
-  "fesm2015": "fesm2015/dereekb-dbx-web.mjs",
-  "typings": "dereekb-dbx-web.d.ts",
   "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
     ".": {
+      "sass": "./_index.scss",
       "types": "./dereekb-dbx-web.d.ts",
       "esm2020": "./esm2020/dereekb-dbx-web.mjs",
       "es2020": "./fesm2020/dereekb-dbx-web.mjs",
       "es2015": "./fesm2015/dereekb-dbx-web.mjs",
       "node": "./fesm2015/dereekb-dbx-web.mjs",
       "default": "./fesm2020/dereekb-dbx-web.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
     }
   },
-  "sideEffects": false,
-  "peerDependencies": {
-    "@angular/core": "^13.0.0",
-    "@angular/material": "^13.0.0",
-    "@dereekb/rxjs": "2.0.0",
-    "rxjs": "^7.5.2",
-    "@dereekb/util": "2.0.0",
-    "extra-set": "^2.2.11",
-    "make-error": "^1.3.0",
-    "ms": "^3.0.0-canary.1",
-    "@dereekb/dbx-core": "2.0.0",
-    "@angular/common": "^13.0.0",
-    "@ngrx/component-store": "^13.0.2",
-    "@ngrx/data": "^13.0.2",
-    "@ngrx/effects": "^13.0.2",
-    "@ngrx/entity": "^13.0.2",
-    "@ngrx/store": "^13.0.2",
-    "@angular/platform-browser": "^13.0.0",
-    "date-fns": "^2.28.0",
-    "@dereekb/date": "2.0.0",
-    "class-transformer": "^0.5.1",
-    "class-validator": "^0.13.2",
-    "date-fns-tz": "^1.2.2",
-    "rrule": "git+https://git@github.com/dereekb/rrule.git#17adf5708d6567b4d01a3a8afd106261421ea492",
-    "@angular/router": "^13.0.0",
-    "@uirouter/core": "^6.0.8",
-    "@uirouter/angular": "^9.1.0",
-    "mat-progress-buttons": "git+https://git@github.com/dereekb/mat-progress-buttons.git#60b0374a45644e8756f20b8d761738151ca3df64",
-    "@angular/flex-layout": "^13.0.0-beta.38",
-    "ng-overlay-container": "^13.0.0",
-    "@angular/cdk": "^13.0.0",
-    "angular-resize-event": "^3.1.1",
-    "ngx-infinite-scroll": "^10.0.1",
-    "linkify-string": "4.0.0-beta.3"
-  }
+  "module": "fesm2015/dereekb-dbx-web.mjs",
+  "es2020": "fesm2020/dereekb-dbx-web.mjs",
+  "esm2020": "esm2020/dereekb-dbx-web.mjs",
+  "fesm2020": "fesm2020/dereekb-dbx-web.mjs",
+  "fesm2015": "fesm2015/dereekb-dbx-web.mjs",
+  "typings": "dereekb-dbx-web.d.ts",
+  "sideEffects": false
 }

package/esm2020/lib/interaction/popover/popover.action.button.directive.mjs

@@ -1,29 +0,0 @@
-import { Directive, Host, ChangeDetectorRef } from '@angular/core';
-import { DbxButtonDirective, DbxActionButtonDirective, DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
-import { DbxPopoverActionDirective } from './popover.action.directive';
-import * as i0 from "@angular/core";
-import * as i1 from "@dereekb/dbx-core";
-import * as i2 from "./popover.action.directive";
-/**
- * Action directive that is used to link an DbxButton to an DbxPopoverActionDirective.
- */
-export class DbxPopoverActionButtonDirective extends DbxActionButtonDirective {
-    constructor(button, source, cdRef, appPopoverActionDirective) {
-        super(button, source, cdRef);
-        this.appPopoverActionDirective = appPopoverActionDirective;
-    }
-    _buttonClicked() {
-        this.appPopoverActionDirective.showPopover();
-    }
-}
-DbxPopoverActionButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverActionButtonDirective, deps: [{ token: i1.DbxButtonDirective, host: true }, { token: i1.DbxActionContextStoreSourceInstance }, { token: i0.ChangeDetectorRef }, { token: i2.DbxPopoverActionDirective }], target: i0.ɵɵFactoryTarget.Directive });
-DbxPopoverActionButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxPopoverActionButtonDirective, selector: "[dbxPopoverActionButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverActionButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dbxPopoverActionButton]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1.DbxButtonDirective, decorators: [{
-                    type: Host
-                }] }, { type: i1.DbxActionContextStoreSourceInstance }, { type: i0.ChangeDetectorRef }, { type: i2.DbxPopoverActionDirective }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci5hY3Rpb24uYnV0dG9uLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2RieC13ZWIvc3JjL2xpYi9pbnRlcmFjdGlvbi9wb3BvdmVyL3BvcG92ZXIuYWN0aW9uLmJ1dHRvbi5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQVUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0UsT0FBTyxFQUFFLGtCQUFrQixFQUFFLHdCQUF3QixFQUFFLG1DQUFtQyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDdEgsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sNEJBQTRCLENBQUM7Ozs7QUFFdkU7O0dBRUc7QUFJSCxNQUFNLE9BQU8sK0JBQWdDLFNBQVEsd0JBQXdCO0lBRTNFLFlBQ1UsTUFBMEIsRUFDbEMsTUFBMkMsRUFDM0MsS0FBd0IsRUFDZix5QkFBb0Q7UUFDN0QsS0FBSyxDQUFDLE1BQU0sRUFBRSxNQUFNLEVBQUUsS0FBSyxDQUFDLENBQUM7UUFEcEIsOEJBQXlCLEdBQXpCLHlCQUF5QixDQUEyQjtJQUUvRCxDQUFDO0lBRWtCLGNBQWM7UUFDL0IsSUFBSSxDQUFDLHlCQUF5QixDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQy9DLENBQUM7OzRIQVpVLCtCQUErQjtnSEFBL0IsK0JBQStCOzJGQUEvQiwrQkFBK0I7a0JBSDNDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLDBCQUEwQjtpQkFDckM7OzBCQUlJLElBQUkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEhvc3QsIE5nWm9uZSwgQ2hhbmdlRGV0ZWN0b3JSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERieEJ1dHRvbkRpcmVjdGl2ZSwgRGJ4QWN0aW9uQnV0dG9uRGlyZWN0aXZlLCBEYnhBY3Rpb25Db250ZXh0U3RvcmVTb3VyY2VJbnN0YW5jZSB9IGZyb20gJ0BkZXJlZWtiL2RieC1jb3JlJztcbmltcG9ydCB7IERieFBvcG92ZXJBY3Rpb25EaXJlY3RpdmUgfSBmcm9tICcuL3BvcG92ZXIuYWN0aW9uLmRpcmVjdGl2ZSc7XG5cbi8qKlxuICogQWN0aW9uIGRpcmVjdGl2ZSB0aGF0IGlzIHVzZWQgdG8gbGluayBhbiBEYnhCdXR0b24gdG8gYW4gRGJ4UG9wb3ZlckFjdGlvbkRpcmVjdGl2ZS5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2RieFBvcG92ZXJBY3Rpb25CdXR0b25dJ1xufSlcbmV4cG9ydCBjbGFzcyBEYnhQb3BvdmVyQWN0aW9uQnV0dG9uRGlyZWN0aXZlIGV4dGVuZHMgRGJ4QWN0aW9uQnV0dG9uRGlyZWN0aXZlIHtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBASG9zdCgpIGJ1dHRvbjogRGJ4QnV0dG9uRGlyZWN0aXZlLFxuICAgIHNvdXJjZTogRGJ4QWN0aW9uQ29udGV4dFN0b3JlU291cmNlSW5zdGFuY2UsXG4gICAgY2RSZWY6IENoYW5nZURldGVjdG9yUmVmLFxuICAgIHJlYWRvbmx5IGFwcFBvcG92ZXJBY3Rpb25EaXJlY3RpdmU6IERieFBvcG92ZXJBY3Rpb25EaXJlY3RpdmUpIHtcbiAgICBzdXBlcihidXR0b24sIHNvdXJjZSwgY2RSZWYpO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIF9idXR0b25DbGlja2VkKCk6IHZvaWQge1xuICAgIHRoaXMuYXBwUG9wb3ZlckFjdGlvbkRpcmVjdGl2ZS5zaG93UG9wb3ZlcigpO1xuICB9XG5cbn1cbiJdfQ==

package/lib/interaction/popover/popover.action.button.directive.d.ts

@@ -1,14 +0,0 @@
-import { ChangeDetectorRef } from '@angular/core';
-import { DbxButtonDirective, DbxActionButtonDirective, DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
-import { DbxPopoverActionDirective } from './popover.action.directive';
-import * as i0 from "@angular/core";
-/**
- * Action directive that is used to link an DbxButton to an DbxPopoverActionDirective.
- */
-export declare class DbxPopoverActionButtonDirective extends DbxActionButtonDirective {
-    readonly appPopoverActionDirective: DbxPopoverActionDirective;
-    constructor(button: DbxButtonDirective, source: DbxActionContextStoreSourceInstance, cdRef: ChangeDetectorRef, appPopoverActionDirective: DbxPopoverActionDirective);
-    protected _buttonClicked(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxPopoverActionButtonDirective, [{ host: true; }, null, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxPopoverActionButtonDirective, "[dbxPopoverActionButton]", never, {}, {}, never>;
-}

package/lib/layout/column/two.scss

@@ -1,114 +0,0 @@
-@import 'shared';
-
-.two-column {
-  height: 100%;
-  max-width: 100%;
-  display: flex;
-  flex-direction: row;
-  overflow-x: hidden;
-}
-
-.left-column,
-.right-column {
-  @include fillContentHeight(1, 0);
-
-  .dbx-section-page-two & {
-    @include fillContentWithAppPageHeaderHeight();
-  }
-}
-
-.left-column {
-  @include mat-elevation(1);
-
-  width: $two-left-column-width;
-  flex: 0 0 auto;
-
-  overflow: auto;
-  // background: red;
-
-  .two-column-reverse-sizing & {
-    width: calc(100% - #{$two-left-column-width});
-    overflow: hidden;
-  }
-
-  .full-left & {
-    width: 100% !important;
-
-    .right-shown & {
-      width: $two-left-column-width;
-    }
-  }
-
-  @include if-small-screen {
-    width: 100% !important;
-
-    .right-shown & {
-      display: none !important;
-    }
-  }
-}
-
-.right-column {
-  flex: 1 1 auto;
-  max-width: calc(100% - #{$two-left-column-width});
-  overflow: hidden;
-  // background: green;
-
-  .two-column-reverse-sizing & {
-    max-width: $two-left-column-width;
-  }
-
-  @include if-small-screen {
-    max-width: 100% !important;
-    width: 100% !important;
-    padding-left: 0 !important;
-  }
-}
-
-.dbx-two-columns-head {
-  padding: 0 6px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
-  height: $second-navbar-height;
-
-  display: flex;
-  align-items: center;
-  overflow-y: hidden;
-
-  &.block {
-    display: block;
-  }
-
-  &.full {
-    padding: 0;
-  }
-}
-
-.two-columns-right {
-  height: 100%;
-
-  .two-columns-right-content {
-    height: calc(100% - #{$second-navbar-height});
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  .two-columns-right-content-bottom {
-    min-height: 12px;
-    height: 3vh;
-  }
-
-  $two-columns-right-padding-size: 6px;
-
-  .back-button {
-    margin-right: $two-columns-right-padding-size;
-  }
-
-  .right-spacer {
-    padding-right: 5vw;
-  }
-
-  .side-spacer {
-    padding-left: $two-columns-right-padding-size;
-  }
-
-}