@dereekb/dbx-web 8.6.1 → 8.7.2

package/fesm2020/dereekb-dbx-web.mjs

@@ -1992,8 +1992,8 @@ class DbxSidenavPageComponent {
 }
 DbxSidenavPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSidenavPageComponent, deps: [{ token: DbxSidenavComponent }], target: i0.ɵɵFactoryTarget.Component });
 DbxSidenavPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxSidenavPageComponent, selector: "dbx-sidenav-page", inputs: { color: "color", mobileOnly: "mobileOnly" }, ngImport: i0, template: `
-    <div>
-      <dbx-sidenav-pagebar [color]="color" [ngClass]="(hidePagebar$ | async) ? 'dbx-pagebar-hide' : ''">
+    <div [ngClass]="(hidePagebar$ | async) ? 'dbx-pagebar-hide' : ''">
+      <dbx-sidenav-pagebar [color]="color">
         <ng-content left select="[navLeft]"></ng-content>
         <ng-content select="[navRight]"></ng-content>
       </dbx-sidenav-pagebar>
@@ -2007,8 +2007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             args: [{
                     selector: 'dbx-sidenav-page',
                     template: `
-    <div>
-      <dbx-sidenav-pagebar [color]="color" [ngClass]="(hidePagebar$ | async) ? 'dbx-pagebar-hide' : ''">
+    <div [ngClass]="(hidePagebar$ | async) ? 'dbx-pagebar-hide' : ''">
+      <dbx-sidenav-pagebar [color]="color">
         <ng-content left select="[navLeft]"></ng-content>
         <ng-content select="[navRight]"></ng-content>
       </dbx-sidenav-pagebar>
@@ -2630,7 +2630,7 @@ class DbxTwoColumnContextDirective {
         this._showRight.complete();
     }
     set showRight(showRight) {
-        this._showRight.next(showRight);
+        this._showRight.next(Boolean(showRight));
     }
 }
 DbxTwoColumnContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnContextDirective, deps: [{ token: TwoColumnsContextStore }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2716,7 +2716,7 @@ class DbxTwoColumnSrefDirective {
         this._twoColumnsContextStore = _twoColumnsContextStore;
     }
     set ref(ref) {
-        const segueRef = asSegueRef(ref);
+        const segueRef = ref ? asSegueRef(ref) : undefined;
         this._twoColumnsContextStore.setBackRef(segueRef);
     }
 }
@@ -4559,12 +4559,15 @@ function provideDbxListViewWrapper(sourceType) {
  * Component used to style a section's header.
  */
 class DbxSectionHeaderComponent {
+    constructor() {
+        this.onlyHeader = false;
+    }
     get showTitle() {
         return Boolean(this.header || this.icon);
     }
 }
 DbxSectionHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxSectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxSectionHeaderComponent, selector: "dbx-section-header,.dbx-section-header", inputs: { h: "h", header: "header", icon: "icon", hint: "hint" }, ngImport: i0, template: `
+DbxSectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxSectionHeaderComponent, selector: "dbx-section-header,.dbx-section-header", inputs: { h: "h", header: "header", onlyHeader: "onlyHeader", icon: "icon", hint: "hint", hintInline: "hintInline" }, host: { properties: { "class.dbx-section-header-full-title": "onlyHeader" } }, ngImport: i0, template: `
     <div class="dbx-section-header-content">
       <ng-container [ngSwitch]="showTitle && (h ?? 1)">
         <h1 *ngSwitchCase="1" class="dbx-section-header-content-title">
@@ -4586,10 +4589,13 @@ DbxSectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
       <span class="spacer"></span>
       <ng-content></ng-content>
     </div>
-    <p *ngIf="hint" class="dbx-section-hint dbx-hint">{{ hint }}</p>
+    <p *ngIf="hint && !hintInline" class="dbx-section-hint dbx-hint">{{ hint }}</p>
     <ng-template #headerContentTitleTemplate>
       <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
-      <span class="title-text">{{ header }}</span>
+      <span class="title-text">
+        {{ header }}
+        <span *ngIf="hint && hintInline" class="dbx-section-hint-inline dbx-hint">{{ hint }}</span>
+      </span>
     </ng-template>
   `, isInline: true, components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSectionHeaderComponent, decorators: [{
@@ -4618,21 +4624,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
       <span class="spacer"></span>
       <ng-content></ng-content>
     </div>
-    <p *ngIf="hint" class="dbx-section-hint dbx-hint">{{ hint }}</p>
+    <p *ngIf="hint && !hintInline" class="dbx-section-hint dbx-hint">{{ hint }}</p>
     <ng-template #headerContentTitleTemplate>
       <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
-      <span class="title-text">{{ header }}</span>
+      <span class="title-text">
+        {{ header }}
+        <span *ngIf="hint && hintInline" class="dbx-section-hint-inline dbx-hint">{{ hint }}</span>
+      </span>
     </ng-template>
-  `
+  `,
+                    host: {
+                        '[class.dbx-section-header-full-title]': 'onlyHeader'
+                    }
                 }]
         }], propDecorators: { h: [{
                 type: Input
             }], header: [{
                 type: Input
+            }], onlyHeader: [{
+                type: Input
             }], icon: [{
                 type: Input
             }], hint: [{
                 type: Input
+            }], hintInline: [{
+                type: Input
             }] } });
 
 /**
@@ -4652,7 +4668,7 @@ DbxSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
     <div class="dbx-section-content">
       <ng-content></ng-content>
     </div>
-  `, isInline: true, components: [{ type: DbxSectionHeaderComponent, selector: "dbx-section-header,.dbx-section-header", inputs: ["h", "header", "icon", "hint"] }] });
+  `, isInline: true, components: [{ type: DbxSectionHeaderComponent, selector: "dbx-section-header,.dbx-section-header", inputs: ["h", "header", "onlyHeader", "icon", "hint", "hintInline"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -4750,7 +4766,7 @@ DbxSubSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <ng-content></ng-content>
       </div>
     </div>
-  `, isInline: true, components: [{ type: DbxSectionHeaderComponent, selector: "dbx-section-header,.dbx-section-header", inputs: ["h", "header", "icon", "hint"] }] });
+  `, isInline: true, components: [{ type: DbxSectionHeaderComponent, selector: "dbx-section-header,.dbx-section-header", inputs: ["h", "header", "onlyHeader", "icon", "hint", "hintInline"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSubSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -4770,32 +4786,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 /**
  * 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.
  */
 class DbxSectionPageComponent extends DbxSectionHeaderComponent {
+    constructor() {
+        super(...arguments);
+        this.hintInline = true;
+    }
 }
 DbxSectionPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSectionPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxSectionPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxSectionPageComponent, selector: "dbx-section-page", usesInheritance: true, ngImport: i0, template: `
+DbxSectionPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxSectionPageComponent, selector: "dbx-section-page", inputs: { hintInline: "hintInline" }, usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-content-page dbx-section-page">
-      <div class="dbx-section-header" [h]="h ?? 2" [header]="header" [icon]="icon" [hint]="hint">
+      <div class="dbx-section-header" [h]="h ?? 2" [header]="header" [onlyHeader]="onlyHeader" [icon]="icon" [hint]="hint" [hintInline]="true">
         <ng-content select="[sectionHeader]"></ng-content>
       </div>
       <ng-content></ng-content>
     </div>
-  `, isInline: true, components: [{ type: DbxSectionHeaderComponent, selector: "dbx-section-header,.dbx-section-header", inputs: ["h", "header", "icon", "hint"] }] });
+  `, isInline: true, components: [{ type: DbxSectionHeaderComponent, selector: "dbx-section-header,.dbx-section-header", inputs: ["h", "header", "onlyHeader", "icon", "hint", "hintInline"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSectionPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-section-page',
                     template: `
     <div class="dbx-content-page dbx-section-page">
-      <div class="dbx-section-header" [h]="h ?? 2" [header]="header" [icon]="icon" [hint]="hint">
+      <div class="dbx-section-header" [h]="h ?? 2" [header]="header" [onlyHeader]="onlyHeader" [icon]="icon" [hint]="hint" [hintInline]="true">
         <ng-content select="[sectionHeader]"></ng-content>
       </div>
       <ng-content></ng-content>
     </div>
   `
                 }]
-        }] });
+        }], propDecorators: { hintInline: [{
+                type: Input
+            }] } });
 
 /**
  * Module for container-type components.