@dereekb/dbx-web 5.0.0 → 5.2.0

package/lib/layout/list/list.view.d.ts

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
-import { ListLoadingState, ListLoadingStateContext } from "@dereekb/rxjs";
-import { EventEmitter, Provider, Type } from "@angular/core";
+import { ListLoadingState, ListLoadingStateContext } from '@dereekb/rxjs';
+import { EventEmitter, Provider, Type } from '@angular/core';
 import { Maybe } from '@dereekb/util';
 export declare type DbxListSelectionMode = 'select' | 'view';
 export interface ListSelectionStateItem<T> {

package/lib/layout/list/list.view.value.d.ts

@@ -1,6 +1,6 @@
-import { InjectionToken, Provider, Type } from "@angular/core";
-import { ClickableAnchor, DbxInjectionComponentConfig } from "@dereekb/dbx-core";
-import { Observable } from "rxjs";
+import { InjectionToken, Provider, Type } from '@angular/core';
+import { ClickableAnchor, DbxInjectionComponentConfig } from '@dereekb/dbx-core';
+import { Observable } from 'rxjs';
 import { Maybe } from '@dereekb/util';
 export declare const DBX_VALUE_LIST_VIEW_ITEM: InjectionToken<unknown>;
 export interface DbxValueListItem<T> {
@@ -32,6 +32,6 @@ export declare function mapValuesToValuesListItemConfigObs<T, I extends DbxValue
  */
 export declare function addConfigToValueListItems<T, I extends DbxValueListItem<T>, V = unknown>(listViewConfig: AbstractDbxValueListViewConfig<T, I, V>, listItems: I[]): DbxValueListItemConfig<T, I, V>[];
 export declare abstract class DbxValueListView<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> {
-    readonly abstract items$: Observable<I[]>;
+    abstract readonly items$: Observable<I[]>;
 }
 export declare function provideDbxValueListView<V extends DbxValueListView<unknown>>(sourceType: Type<V>): Provider[];

package/lib/layout/list/list.view.value.directive.d.ts

@@ -1,9 +1,9 @@
-import { Maybe, ModifierFunction } from "@dereekb/util";
-import { OnDestroy } from "@angular/core";
-import { Observable } from "rxjs";
-import { DbxListView } from "./list.view";
-import { AbstractDbxValueListViewConfig, DbxValueListItem, DbxValueListItemConfig, DbxValueListView } from "./list.view.value";
-import { DbxValueListItemModifier } from "./list.view.value.modifier";
+import { Maybe, ModifierFunction } from '@dereekb/util';
+import { OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DbxListView } from './list.view';
+import { AbstractDbxValueListViewConfig, DbxValueListItem, DbxValueListItemConfig, DbxValueListView } from './list.view.value';
+import { DbxValueListItemModifier } from './list.view.value.modifier';
 import * as i0 from "@angular/core";
 /**
  * Abstract list directive that takes in items and a AbstractDbxValueItemListViewConfig configuration.

package/lib/layout/list/list.view.value.item.directive.d.ts

@@ -1,4 +1,4 @@
-import { DbxValueListItem } from "./list.view.value";
+import { DbxValueListItem } from './list.view.value';
 import * as i0 from "@angular/core";
 export declare abstract class AbstractDbxValueListViewItemComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> {
     readonly item: I;

package/lib/layout/list/list.view.value.modifier.d.ts

@@ -1,9 +1,9 @@
-import { Provider, Type } from "@angular/core";
-import { ArrayOrValue, Modifier, ModifierFunction, ModifierMap } from "@dereekb/util";
-import { Observable } from "rxjs";
-import { DbxValueListItem } from "./list.view.value";
+import { Provider, Type } from '@angular/core';
+import { ArrayOrValue, Modifier, ModifierFunction, ModifierMap } from '@dereekb/util';
+import { Observable } from 'rxjs';
+import { DbxValueListItem } from './list.view.value';
 export declare abstract class DbxValueListItemModifier<T = unknown, I extends DbxValueListItem<T> = DbxValueListItem<T>> {
-    readonly abstract modifiers$: Observable<ModifierMap<I>>;
+    abstract readonly modifiers$: Observable<ModifierMap<I>>;
     abstract addModifiers(modifiers: ArrayOrValue<Modifier<I>>): void;
     abstract removeModifiers(modifiers: ArrayOrValue<Modifier<I>>): void;
 }

package/lib/layout/list/list.view.value.modifier.directive.d.ts

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
-import { OnDestroy, OnInit } from "@angular/core";
-import { DbxValueListItem } from "./list.view.value";
+import { OnDestroy, OnInit } from '@angular/core';
+import { DbxValueListItem } from './list.view.value';
 import { ArrayOrValue, Maybe, Modifier } from '@dereekb/util';
 import { DbxValueListItemModifier } from './list.view.value.modifier';
 import * as i0 from "@angular/core";

package/lib/layout/list/list.view.value.modifier.ripple.directive.d.ts

@@ -1,8 +1,8 @@
-import { OnDestroy } from "@angular/core";
-import { Maybe, ArrayOrValue, Modifier } from "@dereekb/util";
-import { Observable } from "rxjs";
-import { DbxValueListItem } from "./list.view.value";
-import { AbstractDbxValueListItemModifierDirective } from "./list.view.value.modifier.directive";
+import { OnDestroy } from '@angular/core';
+import { Maybe, ArrayOrValue, Modifier } from '@dereekb/util';
+import { Observable } from 'rxjs';
+import { DbxValueListItem } from './list.view.value';
+import { AbstractDbxValueListItemModifierDirective } from './list.view.value.modifier.directive';
 import * as i0 from "@angular/core";
 export declare type DisableRippleForValueFunction<T> = (item: DbxValueListItem<T>) => boolean;
 export declare const DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY = "disable_ripple_anchor";

package/lib/layout/list/list.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
-import { ListLoadingState } from "@dereekb/rxjs";
-import { Provider, Type } from "@angular/core";
+import { ListLoadingState } from '@dereekb/rxjs';
+import { Provider, Type } from '@angular/core';
 import { Maybe } from '@dereekb/util';
 /**
  * Common interface for views that may wrap a DbxListView, and pass values through to it.

package/lib/layout/section/_section.scss

@@ -13,14 +13,12 @@ $header-left-reserved-space-small-screen: 120px;
 
 // MARK: Mixin
 @mixin core() {
-
   // MARK: Header
   .dbx-section-header {
     padding: 0 0 $header-bottom-padding;
     box-sizing: border-box;
 
     .dbx-section-header-content {
-
       h1,
       h2,
       h3,
@@ -43,8 +41,7 @@ $header-left-reserved-space-small-screen: 120px;
 
   // MARK: Page
   .dbx-section-page {
-
-    >.dbx-section-header>.dbx-section-header-content {
+    > .dbx-section-header > .dbx-section-header-content {
       height: $content-navbar-height;
       max-height: $content-navbar-height;
       overflow-x: auto;
@@ -62,43 +59,35 @@ $header-left-reserved-space-small-screen: 120px;
           margin-right: 4px;
         }
 
-        >.title-text {
+        > .title-text {
           @include theming.limit-text();
         }
       }
     }
-
   }
 
   // MARK: Subsection
   .dbx-subsection {
-
-    >.dbx-section-header>.dbx-section-header-content {}
-
+    > .dbx-section-header > .dbx-section-header-content {
+    }
   }
-
 }
 
 @mixin color($theme-config) {
-
   // MARK: Page
   .dbx-section-page {
-
-    >.dbx-section-header>.dbx-section-header-content {
+    > .dbx-section-header > .dbx-section-header-content {
       .dbx-section-header-content-title {
-
         @include theming.if-small-screen($theme-config) {
           max-width: calc(80% - #{$header-left-reserved-space-small-screen});
         }
-        
       }
     }
-
   }
-
 }
 
-@mixin typography($typography-config) {}
+@mixin typography($typography-config) {
+}
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-section') {

package/lib/layout/step/_step.scss

@@ -2,13 +2,15 @@
 
 // MARK: Variables
 
-
 // MARK: Mixin
-@mixin core() {}
+@mixin core() {
+}
 
-@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-layout-step') {

package/lib/layout/style/_style.scss

@@ -4,7 +4,6 @@
 
 // Sections
 @mixin core() {
-
   .dbx-spacer,
   .spacer {
     flex: 1 1 auto;
@@ -22,9 +21,7 @@
     padding: 0 !important;
   }
 
-  @each $i,
-  $padding in theming.$padding-map {
-
+  @each $i, $padding in theming.$padding-map {
     .pad-#{$i},
     .padding-#{$i} {
       padding: $padding;
@@ -47,7 +44,6 @@
   .d-fiflex {
     display: inline-flex !important;
   }
-
 }
 
 @mixin color($theme-config) {
@@ -91,10 +87,10 @@
     background: $warn-color;
     color: $warn-color-contrast;
   }
-
 }
 
-@mixin typography($typography-config) {}
+@mixin typography($typography-config) {
+}
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-style') {

package/lib/layout/text/_text.scss

@@ -10,7 +10,6 @@ $mat-hint-opacity: 0.54; // Opacity to mirror mat-hint
 
 // MARK: Mixin
 @mixin core() {
-
   .dbx-small,
   .dbx-clear-hint {
     font-size: 0.8em;
@@ -34,7 +33,6 @@ $mat-hint-opacity: 0.54; // Opacity to mirror mat-hint
   .dbx-icon-spacer {
     margin-right: $icon-spacing;
   }
-
 }
 
 @mixin color($theme-config) {
@@ -73,11 +71,9 @@ $mat-hint-opacity: 0.54; // Opacity to mirror mat-hint
   .dbx-note {
     opacity: $note-opacity;
   }
-
 }
 
 @mixin typography($typography-config) {
-
   .dbx-label,
   .dbx-sublabel,
   .dbx-chip-sublabel {
@@ -87,7 +83,6 @@ $mat-hint-opacity: 0.54; // Opacity to mirror mat-hint
   .dbx-chip-sublabel {
     margin-left: $icon-spacing;
   }
-
 }
 
 @mixin theme($theme-config) {

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.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

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