@dereekb/dbx-web 8.7.0 → 8.7.3

package/lib/layout/column/two/two.column.context.directive.d.ts

@@ -11,7 +11,7 @@ export declare class DbxTwoColumnContextDirective implements OnInit, OnDestroy {
     constructor(twoColumnsContextStore: TwoColumnsContextStore);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    set showRight(showRight: Maybe<boolean>);
+    set showRight(showRight: Maybe<boolean | ''>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnContextDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnContextDirective, "[dbxTwoColumnContext]", never, { "showRight": "showRight"; }, {}, never>;
 }

package/lib/layout/column/two/two.column.sref.directive.d.ts

@@ -1,4 +1,5 @@
 import { SegueRefOrSegueRefRouterLink } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
 import { TwoColumnsContextStore } from './two.column.store';
 import * as i0 from "@angular/core";
 /**
@@ -7,7 +8,7 @@ import * as i0 from "@angular/core";
 export declare class DbxTwoColumnSrefDirective {
     private readonly _twoColumnsContextStore;
     constructor(_twoColumnsContextStore: TwoColumnsContextStore);
-    set ref(ref: SegueRefOrSegueRefRouterLink);
+    set ref(ref: Maybe<SegueRefOrSegueRefRouterLink | ''>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnSrefDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnSrefDirective, "[dbxTwoColumnSref]", never, { "ref": "dbxTwoColumnSref"; }, {}, never>;
 }

package/lib/layout/column/two/two.column.store.d.ts

@@ -12,7 +12,7 @@ export interface TwoColumnsState {
     /**
      * Optional ref to use with TwoColumns that use an sref for the back button.
      */
-    backRef?: SegueRef;
+    backRef?: Maybe<SegueRef>;
 }
 export declare class TwoColumnsContextStore extends ComponentStore<TwoColumnsState> implements OnDestroy {
     private readonly _back;
@@ -36,7 +36,7 @@ export declare class TwoColumnsContextStore extends ComponentStore<TwoColumnsSta
     /**
      * Pipes the current backRef value.
      */
-    readonly backRef$: import("rxjs").Observable<SegueRef<object> | undefined>;
+    readonly backRef$: import("rxjs").Observable<Maybe<SegueRef<object>>>;
     /**
      * Emits back events.
      */
@@ -56,7 +56,7 @@ export declare class TwoColumnsContextStore extends ComponentStore<TwoColumnsSta
     /**
      * Sets the new back ref.
      */
-    readonly setBackRef: (observableOrValue: SegueRef<object> | import("rxjs").Observable<SegueRef<object>>) => import("rxjs").Subscription;
+    readonly setBackRef: (() => void) | ((observableOrValue: Maybe<SegueRef<object>> | import("rxjs").Observable<Maybe<SegueRef<object>>>) => import("rxjs").Subscription);
     /**
      * Emits a back event.
      */

package/lib/layout/section/_section.scss

@@ -35,32 +35,89 @@ $header-left-reserved-space-small-screen: 120px;
     }
   }
 
-  .dbx-section-hint {
+  .dbx-section-hint,
+  .dbx-section-hint-inline {
     margin: 0;
+    font-size: 16px;
   }
 
   // MARK: Page
   .dbx-section-page {
-    > .dbx-section-header > .dbx-section-header-content {
+    > .dbx-section-header {
       height: $content-navbar-height;
       max-height: $content-navbar-height;
-      overflow-x: auto;
-      overflow-y: hidden;
+      overflow: hidden;
       max-width: 100%;
 
-      .dbx-section-header-content-title {
-        max-width: calc(80% - #{$header-left-reserved-space});
+      > .dbx-section-header-content {
+        height: $content-navbar-height;
+        max-height: $content-navbar-height;
+        overflow-x: auto;
+        overflow-y: hidden;
+        max-width: 100%;
+
+        .dbx-section-header-content-title {
+          max-width: calc(80% - #{$header-left-reserved-space});
 
-        display: inline-flex !important;
-        justify-content: center;
-        align-items: center;
+          display: inline-flex !important;
+          justify-content: center;
+          align-items: center;
 
-        .mat-icon {
-          margin-right: 4px;
+          .mat-icon {
+            margin-right: 4px;
+          }
+
+          > .title-text {
+            @include theming.limit-text();
+          }
         }
+      }
+    }
 
-        > .title-text {
-          @include theming.limit-text();
+    .dbx-section-page {
+      &.dbx-content-page {
+        @include theming.nested-content-height(1);
+
+        .dbx-section-page {
+          &.dbx-content-page {
+            @include theming.nested-content-height(2);
+
+            .dbx-section-page {
+              &.dbx-content-page {
+                @include theming.nested-content-height(3);
+
+                .dbx-section-page {
+                  &.dbx-content-page {
+                    @include theming.nested-content-height(4);
+
+                    .dbx-section-page {
+                      &.dbx-content-page {
+                        @include theming.nested-content-height(5);
+
+                        .dbx-section-page {
+                          &.dbx-content-page {
+                            @include theming.nested-content-height(6);
+
+                            .dbx-section-page {
+                              &.dbx-content-page {
+                                @include theming.nested-content-height(7);
+
+                                .dbx-section-page {
+                                  &.dbx-content-page {
+                                    @include theming.nested-content-height(9);
+                                  }
+                                }
+                              }
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
         }
       }
     }
@@ -84,6 +141,12 @@ $header-left-reserved-space-small-screen: 120px;
       }
     }
   }
+
+  .dbx-section-header.dbx-section-header-full-title > .dbx-section-header-content {
+    .dbx-section-header-content-title {
+      max-width: 100%;
+    }
+  }
 }
 
 @mixin typography($typography-config) {

package/lib/layout/section/section.header.component.d.ts

@@ -7,9 +7,11 @@ import * as i0 from "@angular/core";
 export declare class DbxSectionHeaderComponent {
     h?: Maybe<DbxSectionHeaderHType>;
     header?: Maybe<string>;
+    onlyHeader: boolean;
     icon?: Maybe<string>;
     hint?: Maybe<string>;
+    hintInline?: Maybe<boolean>;
     get showTitle(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSectionHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSectionHeaderComponent, "dbx-section-header,.dbx-section-header", never, { "h": "h"; "header": "header"; "icon": "icon"; "hint": "hint"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSectionHeaderComponent, "dbx-section-header,.dbx-section-header", never, { "h": "h"; "header": "header"; "onlyHeader": "onlyHeader"; "icon": "icon"; "hint": "hint"; "hintInline": "hintInline"; }, {}, never, ["*"]>;
 }

package/lib/layout/section/section.page.component.d.ts

@@ -2,8 +2,13 @@ import { DbxSectionHeaderComponent } from './section.header.component';
 import * as i0 from "@angular/core";
 /**
  * Component used to style a page that is made up of app sections.
+ *
+ * Should be used on pages that need a section page heading.
+ *
+ * Can be nested within eachother, retaining the proper fixed height.
  */
 export declare class DbxSectionPageComponent extends DbxSectionHeaderComponent {
+    hintInline: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSectionPageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSectionPageComponent, "dbx-section-page", never, {}, {}, never, ["[sectionHeader]", "*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSectionPageComponent, "dbx-section-page", never, { "hintInline": "hintInline"; }, {}, never, ["[sectionHeader]", "*"]>;
 }

package/lib/style/_mixin.scss

@@ -73,10 +73,33 @@
   Content height that sets the height to $content-height with an optional offset.
 */
 @mixin content-height($additionalOffset: 0) {
+  $temp: variables.$content-height;
+
   @if $additionalOffset !=0 {
-    height: calc(variables.$content-height - #{$additionalOffset});
+    height: calc($temp - #{$additionalOffset});
+  } @else {
+    height: $temp;
+  }
+}
+
+/**
+  Nested content height that sets the height to $content-height minus the total number of $content-navbar-heights above it, with an optional offset.
+*/
+@mixin nested-content-height($headers: 1, $additionalOffset: 0) {
+  @if $headers < 1 {
+    @error "Headers count #{$headers} must be greater than 1.";
+  }
+
+  @if $headers == 1 {
+    @include content-height($additionalOffset); // content-height properly handles this case.
   } @else {
-    height: variables.$content-height;
+    $temp: calc(variables.$content-height - variables.$content-navbar-height * ($headers - 1));
+
+    @if $additionalOffset !=0 {
+      height: calc($temp - #{$additionalOffset});
+    } @else {
+      height: $temp;
+    }
   }
 }
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "8.7.0",
+  "version": "8.7.3",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0",
     "@angular/material": "^13.0.0",
-    "@dereekb/rxjs": "8.7.0",
-    "@dereekb/dbx-core": "8.7.0",
+    "@dereekb/rxjs": "8.7.3",
+    "@dereekb/dbx-core": "8.7.3",
     "@angular/flex-layout": "^13.0.0-beta.38",
     "ng-overlay-container": "^13.0.2",
     "@angular/cdk": "^13.0.0",