@dereekb/dbx-web 4.1.0 → 5.1.0

package/lib/router/layout/anchor/_anchor.scss

@@ -2,10 +2,8 @@
 
 // MARK: Variables
 
-
 // MARK: Mixin
 @mixin core() {
-
   .dbx-anchor a {
     color: inherit;
     text-decoration: none;
@@ -16,7 +14,7 @@
 
       .dbx-anchor-a {
         display: block;
-        width: 100%
+        width: 100%;
       }
     }
   }
@@ -27,7 +25,7 @@
   }
 
   .dbx-link-spacer:before {
-    content: "|";
+    content: '|';
     margin: 0 8px;
   }
 
@@ -35,13 +33,15 @@
     display: flex;
     align-items: center;
   }
-
 }
 
-@mixin color($theme-config) {}
+@mixin color($theme-config) {
+}
 
-@mixin typography($typography-config) {}
+@mixin typography($typography-config) {
+}
 
 @mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-anchor') {}
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-anchor') {
+  }
 }

package/lib/router/layout/anchor/anchor.component.d.ts

@@ -9,10 +9,10 @@ import * as i0 from "@angular/core";
 export declare class DbxAnchorComponent extends AbstractDbxAnchorDirective implements OnDestroy {
     private readonly dbNgxRouterWebProviderConfig;
     private _templateRef;
-    readonly templateRef$: import("rxjs").Observable<Maybe<TemplateRef<any>>>;
+    readonly templateRef$: import("rxjs").Observable<Maybe<TemplateRef<unknown>>>;
     block?: boolean;
-    get templateRef(): Maybe<TemplateRef<any>>;
-    set templateRef(templateRef: Maybe<TemplateRef<any>>);
+    get templateRef(): Maybe<TemplateRef<unknown>>;
+    set templateRef(templateRef: Maybe<TemplateRef<unknown>>);
     readonly url$: import("rxjs").Observable<string | undefined>;
     readonly target$: import("rxjs").Observable<string | undefined>;
     constructor(dbNgxRouterWebProviderConfig: DbxRouterWebProviderConfig);

package/lib/router/layout/anchor/anchor.segue.directive.d.ts

@@ -1,6 +1,6 @@
-import { DbxInjectionTemplateConfig } from "@dereekb/dbx-core";
-import { Observable } from "rxjs";
-import { DbxAnchorComponent } from "./anchor.component";
+import { DbxInjectionTemplateConfig } from '@dereekb/dbx-core';
+import { Observable } from 'rxjs';
+import { DbxAnchorComponent } from './anchor.component';
 import * as i0 from "@angular/core";
 /**
  * Abstract implementation
@@ -8,9 +8,9 @@ import * as i0 from "@angular/core";
 export declare abstract class AbstractDbxSegueAnchorDirective {
     readonly parent: DbxAnchorComponent;
     readonly target$: Observable<string | undefined>;
-    readonly ref$: Observable<any>;
+    readonly ref$: Observable<import("@dereekb/dbx-core").SegueRefRouterLink | undefined>;
     readonly refParams$: Observable<import("@dereekb/dbx-core").SegueRefRawSegueParams | undefined>;
-    readonly refOptions$: Observable<any>;
+    readonly refOptions$: Observable<object | undefined>;
     constructor(parent: DbxAnchorComponent);
     readonly template$: Observable<DbxInjectionTemplateConfig>;
     get anchor(): import("../../../../../../../dist/packages/util/src").Maybe<import("@dereekb/dbx-core").ClickableAnchor>;

package/lib/router/layout/anchorlist/_anchorlist.scss

@@ -8,7 +8,8 @@ $active-root-item-left-padding: 2px;
 $active-child-item-left-padding: 5px;
 
 // MARK: Mixin
-@mixin core() {}
+@mixin core() {
+}
 
 @mixin color($theme-config) {
   $color-config: theming.get-color-config($theme-config);
@@ -17,7 +18,6 @@ $active-child-item-left-padding: 5px;
   $background-disabled-color: theming.get-color-from-palette($background, 'contrast');
 
   .dbx-anchor-list.mat-nav-list {
-
     // MARK: Muting
     // items that are not active are muted
     .mat-list-item {
@@ -40,7 +40,7 @@ $active-child-item-left-padding: 5px;
     .dbx-anchor-active-eq {
       .mat-list-item {
         opacity: 1;
-        background: color.scale($color:$background-hover-color, $alpha: 25%);
+        background: color.scale($color: $background-hover-color, $alpha: 25%);
       }
     }
 
@@ -54,15 +54,11 @@ $active-child-item-left-padding: 5px;
     .dbx-anchor-list-child {
       background: color.scale($background-hover-color, $alpha: 10%);
     }
-
   }
-
 }
 
 @mixin typography($typography-config) {
-
   .dbx-anchor-list.mat-nav-list {
-
     .mat-list-item .mat-list-icon {
       font-size: 28px;
       width: 28px;
@@ -81,9 +77,7 @@ $active-child-item-left-padding: 5px;
         padding: $active-child-item-left-padding;
       }
     }
-
   }
-
 }
 
 @mixin theme($theme-config) {

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

@@ -1,9 +1,9 @@
-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 { 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";

package/lib/router/layout/navbar/_navbar.scss

@@ -4,13 +4,15 @@
 
 // MARK: Variables
 
-
 // MARK: Mixin
-@mixin core() {}
+@mixin core() {
+}
 
-@mixin color($theme-config) {}
-  
-@mixin typography($typography-config) {}
+@mixin color($theme-config) {
+}
+
+@mixin typography($typography-config) {
+}
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-navbar') {

package/lib/router/layout/sidenav/_sidenav.scss

@@ -13,7 +13,6 @@ $dbx-sidenav-nav-bottom-padding: 24px;
 
 // MARK: Mixin
 @mixin core() {
-
   .dbx-sidenav {
     height: 100%;
 
@@ -53,7 +52,7 @@ $dbx-sidenav-nav-bottom-padding: 24px;
     }
 
     .mat-sidenav .mat-drawer-inner-container {
-      overflow-y: scroll !important
+      overflow-y: scroll !important;
     }
 
     .dbx-sidenav-nav {
@@ -65,7 +64,6 @@ $dbx-sidenav-nav-bottom-padding: 24px;
     .mat-nav-list.dbx-anchor-list {
       padding-top: 0;
     }
-
   }
 
   .dbx-sidenav-page {
@@ -77,7 +75,6 @@ $dbx-sidenav-nav-bottom-padding: 24px;
       overflow: auto;
     }
   }
-
 }
 
 @mixin color($theme-config) {
@@ -110,7 +107,6 @@ $dbx-sidenav-nav-bottom-padding: 24px;
         }
 
         .dbx-anchor-active-eq {
-
           .mat-list-item {
             border-left: $active-border-left-width solid $active-icon-color;
 
@@ -171,7 +167,8 @@ $dbx-sidenav-nav-bottom-padding: 24px;
     */
 }
 
-@mixin typography($typography-config) {}
+@mixin typography($typography-config) {
+}
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-sidenav') {

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

@@ -1,4 +1,4 @@
-import { DbxInjectionComponentConfig } 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.

package/lib/router/provider/uirouter/anchor.component.d.ts

@@ -1,9 +1,13 @@
+import { Observable } from 'rxjs';
 import { AbstractDbxSegueAnchorDirective } from '../../layout/anchor/anchor.segue.directive';
+import { TransitionOptions } from '@uirouter/core';
 import * as i0 from "@angular/core";
 /**
  * SegueAnchor implementation for UIRouter.
  */
 export declare class DbxUIRouterSegueAnchorComponent extends AbstractDbxSegueAnchorDirective {
+    readonly uiRef$: Observable<string | null>;
+    readonly uiOptions$: Observable<TransitionOptions | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxUIRouterSegueAnchorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxUIRouterSegueAnchorComponent, "ng-component", never, {}, {}, never, never>;
 }

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

@@ -1,8 +1,8 @@
 import { Destroyable } from '@dereekb/util';
-import { MediaMatcher } from "@angular/cdk/layout";
+import { MediaMatcher } from '@angular/cdk/layout';
 import { ObservableOrValue } from '@dereekb/rxjs';
-import { Observable } from "rxjs";
-import { ScreenMediaWidthType, ScreenMediaHeightType } from "./screen";
+import { Observable } from 'rxjs';
+import { ScreenMediaWidthType, ScreenMediaHeightType } from './screen';
 import * as i0 from "@angular/core";
 /**
  * ScreenMediaService configuration.

package/lib/style/_config.scss

@@ -1,17 +1,18 @@
-@use "sass:map";
+@use 'sass:map';
 @use './variables';
 
 // convenience
 @function quick-define-dbx-config-via-banners($top-banner: 0px, $bottom-banner: 0px) {
-  @return ('layout': (
-    'top-banner-height': $top-banner,
-    'bottom-banner-height': $bottom-banner,
-  ));
+  @return (
+    'layout': (
+      'top-banner-height': $top-banner,
+      'bottom-banner-height': $bottom-banner
+    )
+  );
 }
 
 // theme
 @function define-dbx-theme-config($theme-config, $input-dbx-theme-config: null) {
-
   @if ($input-dbx-theme-config == null) {
     $input-dbx-theme-config: ();
   }
@@ -27,9 +28,12 @@
     'layout': $dbx-layout
   );
 
-  @return map.merge($theme-config, (
-    'dbx': $dbx-theme-config
-  ));
+  @return map.merge(
+    $theme-config,
+    (
+      'dbx': $dbx-theme-config
+    )
+  );
 }
 
 @function get-dbx-theme-config($theme-config) {
@@ -39,11 +43,15 @@
 // screen
 @function define-dbx-screen-config($input-dbx-theme-screen-config: null) {
   $dbx-screen-config: (
-    'mobile': 360px,        // 0-360px
-    'small': 520px,         //361-520px
-    'medium': 768px,        //521-768px
-    'large': 1280px,        //769-1280px
-    'tiny-vertical': 280px  //0-280px
+    'mobile': 360px,
+    // 0-360px
+    'small': 520px,
+    //361-520px
+    'medium': 768px,
+    //521-768px
+    'large': 1280px,
+    //769-1280px
+    'tiny-vertical': 280px //0-280px
   );
 
   @if ($input-dbx-theme-screen-config != null) {
@@ -64,18 +72,28 @@
     'top-banner-height': 0px,
     'bottom-banner-height': 0px,
     // navbars
-    'page-navbar-height': 42px,     // initial main navbar height
-    'content-navbar-height': 54px,  // initial content navbar height
+    'page-navbar-height': 42px,
+    // initial main navbar height
+    'content-navbar-height': 54px,
+    // initial content navbar height
     // content
-    'box-max-width': 600px,         // initial max width of box content, such as popups.
-    'content-max-width': 1200px,    // initial max width of restricted-width content
+    'box-max-width': 600px,
+    // initial max width of box content, such as popups.
+    'content-max-width': 1200px,
+    // initial max width of restricted-width content
     // padding
-    'padding-0': 0px,                 // initial padding-0
-    'padding-1': 2px,                 // initial padding-1
-    '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-0': 0px,
+    // initial padding-0
+    'padding-1': 2px,
+    // initial padding-1
+    'padding-2': 6px,
+    // initial padding-2
+    'padding-3': 12px,
+    // initial padding-3
+    'padding-4': 18px,
+    // initial padding-4
+    'padding-5': 24px,
+    // initial padding-5
     // layout
     'two-column-left-width': 320px
   );
@@ -120,7 +138,7 @@
 }
 
 @function get-dbx-layout-padding($theme-config, $padding-level) {
-  @return get-dbx-layout-config-var($theme-config, 'padding-'+ $padding-level);
+  @return get-dbx-layout-config-var($theme-config, 'padding-' + $padding-level);
 }
 
 @function get-dbx-two-column-left-width($theme-config) {

package/lib/style/_core.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 @use './all-core';
 @use './all-typography';
 @use './root-variables';

package/lib/style/_function.scss

@@ -1,4 +1,3 @@
-
 @function vh($from100: 100) {
   @return calc(var(--vh100) * ($from100 / 100));
 }

package/lib/style/_mixin.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 @use './config';
 @use './variables';
 
@@ -53,8 +53,7 @@
 @mixin app-height($additionalOffset: 0) {
   @if $additionalOffset !=0 {
     height: calc(variables.$app-height - #{$additionalOffset});
-  }
-  @else {
+  } @else {
     height: variables.$app-height;
   }
 }
@@ -65,8 +64,7 @@
 @mixin page-height($additionalOffset: 0) {
   @if $additionalOffset !=0 {
     height: calc(variables.$page-height - #{$additionalOffset});
-  }
-  @else {
+  } @else {
     height: variables.$page-height;
   }
 }
@@ -77,8 +75,7 @@
 @mixin content-height($additionalOffset: 0) {
   @if $additionalOffset !=0 {
     height: calc(variables.$content-height - #{$additionalOffset});
-  }
-  @else {
+  } @else {
     height: variables.$content-height;
   }
 }

package/lib/style/_root-variables.scss

@@ -6,7 +6,6 @@
   $initial-bottom-banner-height: theming.get-dbx-layout-bottom-banner-height($theme-config);
 
   #{$root-selector} {
-
     // variables
     #{theming.$top-banner-height-var}: $initial-top-banner-height;
     #{theming.$bottom-banner-height-var}: $initial-bottom-banner-height;
@@ -33,5 +32,4 @@
       overflow: hidden;
     }
   }
-
 }

package/lib/style/_theming.scss

@@ -1,16 +1,6 @@
-@forward '@angular/material'show define-light-theme,
-define-dark-theme,
-define-palette,
-get-contrast-color-from-palette,
-get-color-from-palette,
-get-color-config,
-get-typography-config,
-get-density-config,
-elevation;
+@forward '@angular/material' show define-light-theme, define-dark-theme, define-palette, get-contrast-color-from-palette, get-color-from-palette, get-color-config, get-typography-config, get-density-config, elevation;
 
-@forward 'node_modules/@angular/material/core/theming/theming'
-show private-check-duplicate-theme-styles,
-$theme-ignore-duplication-warnings;
+@forward 'node_modules/@angular/material/core/theming/theming' show private-check-duplicate-theme-styles, $theme-ignore-duplication-warnings;
 
 @forward 'node_modules/@angular/material/core/typography/typography-utils';
 

package/lib/style/_variables.scss

@@ -1,7 +1,7 @@
-@use "sass:map";
+@use 'sass:map';
 
 // variable names
-$vh100-var: --vh100;                                        // variable to use for 100vh.
+$vh100-var: --vh100; // variable to use for 100vh.
 
 $top-banner-height-var: --dbx-top-banner-height;
 $bottom-banner-height-var: --dbx-bottom-banner-height;
@@ -44,6 +44,13 @@ $padding-3: var($padding-3-var);
 $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);
+$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,18 +1,19 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "4.1.0",
+  "version": "5.1.0",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0",
     "@angular/material": "^13.0.0",
-    "@dereekb/rxjs": "4.1.0",
-    "@dereekb/dbx-core": "4.1.0",
+    "@dereekb/rxjs": "5.1.0",
+    "@dereekb/dbx-core": "5.1.0",
     "@angular/flex-layout": "^13.0.0-beta.38",
-    "ng-overlay-container": "^13.0.0",
+    "ng-overlay-container": "^13.0.2",
     "@angular/cdk": "^13.0.0",
     "angular-resize-event": "^3.1.1",
     "ngx-infinite-scroll": "^13.0.2",
-    "linkify-string": "4.0.0-beta.5"
+    "linkify-string": "4.0.0-beta.5",
+    "@uirouter/angular": "^9.1.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"