@dereekb/dbx-web 2.1.0 → 4.0.1

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,36 +1,18 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "2.1.0",
+  "version": "4.0.1",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0",
     "@angular/material": "^13.0.0",
-    "@dereekb/rxjs": "2.1.0",
-    "rxjs": "^7.0.0",
-    "@dereekb/util": "2.1.0",
-    "extra-set": "^2.2.11",
-    "make-error": "^1.3.0",
-    "ms": "^3.0.0-canary.1",
-    "@dereekb/dbx-core": "2.1.0",
-    "@ngrx/component-store": "^13.0.2",
-    "@angular/platform-browser": "^13.0.0",
-    "date-fns": "^2.28.0",
-    "@dereekb/date": "2.1.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",
-    "@ngrx/store": "^13.0.2",
+    "@dereekb/rxjs": "4.0.1",
+    "@dereekb/dbx-core": "4.0.1",
     "@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"
+    "ngx-infinite-scroll": "^13.0.2",
+    "linkify-string": "4.0.0-beta.5"
   },
   "dependencies": {
     "tslib": "^2.3.0"

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;
-  }
-
-}