feat: added dbxAnchorList

packages/dbx-core/src/lib/router/router/provider/angular/angular.router.service.ts

@@ -54,4 +54,8 @@ export class DbxAngularRouterService implements DbxRouterService, DbxRouterTrans
     return false; // TODO!
   }
 
+  comparePrecision(a: SegueRef, b: SegueRef): number {
+    return 0;   // TODO!
+  }
+
 }

packages/dbx-core/src/lib/router/router/provider/uirouter/uirouter.router.service.ts

@@ -45,4 +45,10 @@ export class DbxUIRouterService implements DbxRouterService, DbxRouterTransition
     return active;
   }
 
+  comparePrecision(a: SegueRef, b: SegueRef): number {
+    const aLength = (a.ref as string).length;
+    const bLength = (b.ref as string).length;
+    return (aLength > bLength) ? 1 : (aLength === bLength) ? 0 : -1;
+  }
+
 }

packages/dbx-core/src/lib/router/router/service/router.service.ts

@@ -19,4 +19,15 @@ export abstract class DbxRouterService {
    */
   abstract isActive(segueRef: SegueRef): boolean;
 
+  /**
+   * Compares the two refs for precision for a certain route. 
+   * 
+   * For example, if the parent route is input with a child route, the child route is 
+   * considered more precise.
+   * 
+   * @param a 
+   * @param b 
+   */
+  abstract comparePrecision(a: SegueRef, b: SegueRef): number;
+
 }

packages/dbx-web/src/lib/router/_router.scss

@@ -1,12 +1,18 @@
 @use './layout/anchor/anchor';
+@use './layout/anchorlist/anchorlist';
+@use './layout/navbar/navbar';
 @use './layout/sidenav/sidenav';
 
 @mixin all-router-typography($typography-config) {
   @include anchor.typography($typography-config);
+  @include anchorlist.typography($typography-config);
+  @include navbar.typography($typography-config);
   @include sidenav.typography($typography-config);
 }
 
 @mixin all-router-theme($theme-config) {
   @include anchor.theme($theme-config);
+  @include anchorlist.theme($theme-config);
+  @include navbar.theme($theme-config);
   @include sidenav.theme($theme-config);
 }

packages/dbx-web/src/lib/router/layout/anchorlist/_anchorlist.scss

@@ -0,0 +1,10 @@
+@use '../../../style/theming';
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-anchorlist') {
+
+
+  }
+}

packages/dbx-web/src/lib/router/layout/anchorlist/anchorlist.component.html

@@ -0,0 +1,12 @@
+<mat-nav-list class="dbx-anchor-list">
+  <ng-container *ngFor="let anchor of anchors; let last = last;">
+    <span dbx-anchor [anchor]="anchor">
+      <a mat-list-item>
+        <mat-icon mat-list-icon *ngIf="anchor.icon">{{ anchor.icon }}</mat-icon>
+        <!-- TODO: Add an icon from a letter if anchor.icon is unavailable. -->
+        <div mat-line>{{ anchor.title }}</div>
+        <mat-divider *ngIf="!last"></mat-divider>
+      </a>
+    </span>
+  </ng-container>
+</mat-nav-list>

packages/dbx-web/src/lib/router/layout/anchorlist/anchorlist.component.ts

@@ -0,0 +1,17 @@
+import { Input, Component } from '@angular/core';
+import { ClickableAnchorLink } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
+
+/**
+ * Component that displays a list of ClickableAnchorLink values within a MatNavList.
+ */
+@Component({
+  selector: 'dbx-anchor-list',
+  templateUrl: './anchorlist.component.html'
+})
+export class DbxAnchorListComponent {
+
+  @Input()
+  anchors?: Maybe<ClickableAnchorLink[]>;
+
+}

packages/dbx-web/src/lib/router/layout/anchorlist/anchorlist.module.ts

@@ -0,0 +1,29 @@
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTabsModule } from '@angular/material/tabs';
+import { DbxAnchorModule } from '../anchor/anchor.module';
+import { MatMenuModule } from '@angular/material/menu';
+import { DbxAnchorListComponent } from './anchorlist.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatTabsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    MatMenuModule,
+    DbxAnchorModule,
+  ],
+  declarations: [
+    DbxAnchorListComponent
+  ],
+  exports: [
+    DbxAnchorListComponent
+  ]
+})
+export class DbxAnchorListModule { }

packages/dbx-web/src/lib/router/layout/anchorlist/index.ts

@@ -0,0 +1,2 @@
+export * from './anchorlist.module';
+export * from './anchorlist.component';

packages/dbx-web/src/lib/router/layout/index.ts

@@ -1,3 +1,5 @@
 export * from './anchor';
+export * from './anchorlist';
+export * from './navbar';
 export * from './sidenav';
 export * from './layout.module';

packages/dbx-web/src/lib/router/layout/layout.module.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { DbxAnchorModule } from './anchor/anchor.module';
+import { DbxAnchorListModule } from './anchorlist/anchorlist.module';
 import { DbxNavbarModule } from './navbar/navbar.module';
 import { DbxSidenavModule } from './sidenav/sidenav.module';
 
 @NgModule({
   exports: [
     DbxAnchorModule,
+    DbxAnchorListModule,
     DbxNavbarModule,
     DbxSidenavModule
   ]

packages/dbx-web/src/lib/router/layout/navbar/_navbar.scss

@@ -0,0 +1,10 @@
+@use '../../../style/theming';
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-navbar') {
+
+
+  }
+}

packages/dbx-web/src/lib/router/layout/navbar/navbar.component.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { ScreenMediaWidthType, screenMediaWidthTypeIsActive } from './../../../screen/screen';
 import { DbxScreenMediaService } from '../../../screen/screen.service';
-import { Maybe } from '@dereekb/util';
+import { applyBestFit, Maybe } from '@dereekb/util';
 import { Input, Component, NgZone, OnDestroy, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { ClickableAnchorLink, AbstractTransitionWatcherDirective, DbxRouterService, DbxRouterTransitionService, AbstractTransitionDirective, tapDetectChanges } from '@dereekb/dbx-core';
 import { BehaviorSubject, combineLatest, map, shareReplay, distinctUntilChanged, startWith, tap } from 'rxjs';
@@ -48,14 +48,16 @@ export class DbxNavbarComponent extends AbstractTransitionDirective implements O
 
   readonly anchors$: Observable<NavAnchorLink[]> = combineLatest([this._anchors, this.initAndUpdateOnTransitionSuccess$]).pipe(
     map(([anchors]) => {
-      return anchors.map((anchor) => {
+      const results = anchors.map((anchor) => {
         let selected = this._dbxRouterService.isActive(anchor);
 
         return {
           selected,
           anchor
         };
       });
+
+      return applyBestFit(results, (x) => x.selected, (a, b) => this._dbxRouterService.comparePrecision(a.anchor, b.anchor), (loser) => ({ ...loser, selected: false }));
     }),
     tapDetectChanges(this.cdr),
     shareReplay(1)

packages/dbx-web/src/lib/router/layout/sidenav/sidenav.component.html

@@ -1,17 +1,7 @@
 <mat-sidenav-container class="dbx-sidenav">
   <mat-sidenav [mode]="(drawer$ | async)!">
     <ng-content select="[top]"></ng-content>
-    <mat-nav-list>
-      <ng-container *ngFor="let anchor of anchors; let last = last;">
-        <span dbx-anchor [anchor]="anchor">
-          <a mat-list-item>
-            <mat-icon mat-list-icon *ngIf="anchor.icon">{{ anchor.icon }}</mat-icon>
-            <div mat-line>{{ anchor.title }}</div>
-            <mat-divider *ngIf="!last"></mat-divider>
-          </a>
-        </span>
-      </ng-container>
-    </mat-nav-list>
+    <dbx-anchor-list [anchors]="anchors"></dbx-anchor-list>
     <ng-content select="[bottom]"></ng-content>
   </mat-sidenav>
   <mat-sidenav-content>

packages/dbx-web/src/lib/router/layout/sidenav/sidenav.module.ts

@@ -9,6 +9,7 @@ import { DbxSidenavComponent } from './sidenav.component';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatListModule } from '@angular/material/list';
 import { DbxAnchorModule } from '../anchor/anchor.module';
+import { DbxAnchorListModule } from '../anchorlist/anchorlist.module';
 
 /**
  * Module for container-type components.
@@ -17,6 +18,7 @@ import { DbxAnchorModule } from '../anchor/anchor.module';
   imports: [
     CommonModule,
     DbxAnchorModule,
+    DbxAnchorListModule,
     MatToolbarModule,
     MatButtonModule,
     MatIconModule,

packages/demo/src/app/modules/doc/modules/layout/container/layout.component.html

@@ -1,4 +1,4 @@
-<dbx-content-container padding="none">
+<dbx-content-container>
   <dbx-section-page header="Layout Docs">
     <dbx-navbar sectionHeader [anchors]="navAnchors" navAlign="right"></dbx-navbar>
     <ui-view></ui-view>

packages/demo/src/app/modules/doc/modules/layout/container/layout.component.ts

@@ -9,6 +9,9 @@ export class DocLayoutLayoutComponent {
   readonly navAnchors: ClickableAnchorLink[] = [{
     title: 'Layout',
     ref: 'doc.layout'
+  }, {
+    title: 'Section',
+    ref: 'doc.layout.section'
   }];
 
 }

packages/demo/src/app/modules/doc/modules/layout/container/section.component.html

@@ -0,0 +1 @@
+<p>docs home</p>

packages/demo/src/app/modules/doc/modules/layout/container/section.component.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './section.component.html'
+})
+export class DocLayoutSectionComponent { }

packages/demo/src/app/modules/doc/modules/layout/doc.layout.router.ts

@@ -1,6 +1,7 @@
 import { Ng2StateDeclaration } from '@uirouter/angular';
 import { DocLayoutHomeComponent } from './container/home.component';
 import { DocLayoutLayoutComponent } from './container/layout.component';
+import { DocLayoutSectionComponent } from './container/section.component';
 
 export const layoutState: Ng2StateDeclaration = {
   url: '/layout',
@@ -15,7 +16,14 @@ export const homeState: Ng2StateDeclaration = {
   component: DocLayoutHomeComponent,
 };
 
+export const docLayoutSectionState: Ng2StateDeclaration = {
+  url: '/section',
+  name: 'doc.layout.section',
+  component: DocLayoutSectionComponent,
+};
+
 export const STATES: Ng2StateDeclaration[] = [
   layoutState,
-  homeState
+  homeState,
+  docLayoutSectionState
 ];

workspace.json

@@ -414,10 +414,12 @@
           "executor": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "demo:build:production"
+              "browserTarget": "demo:build:production",
+              "port": 9010
             },
             "development": {
-              "browserTarget": "demo:build:development"
+              "browserTarget": "demo:build:development",
+              "port": 9010
             }
           },
           "defaultConfiguration": "development"