@dereekb/dbx-web 0.0.1 → 1.2.0

package/lib/layout/text/_text.scss

@@ -0,0 +1,97 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../style/theming';
+
+// MARK: Variables
+$icon-spacing: 6px;
+$hint-opacity: 0.8;
+$mat-hint-opacity: 0.54; // Opacity to mirror mat-hint
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-small,
+  .dbx-clear-hint {
+    font-size: 0.8em;
+  }
+
+  .text-center,
+  .dbx-text-center {
+    text-align: center;
+  }
+
+  .dbx-text-no-overflow {
+    white-space: pre-wrap !important;
+    overflow: visible !important;
+    text-overflow: unset !important;
+  }
+
+  .dbx-icon-spacer {
+    margin-right: $icon-spacing;
+  }
+
+}
+
+@mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $accent: map.get($color-config, 'accent');
+  $warn: map.get($color-config, 'warn');
+
+  $ok-color: color.scale(blue, $lightness: 30%);
+  $success-color: green;
+  $notice-color: #f28600;
+
+  .dbx-hint,
+  .dbx-clear-hint {
+    opacity: $hint-opacity;
+  }
+
+  .dbx-success {
+    color: $success-color;
+  }
+
+  .dbx-ok {
+    color: $ok-color;
+  }
+
+  .dbx-label,
+  .dbx-sublabel,
+  .dbx-chip-sublabel {
+    opacity: $mat-hint-opacity;
+  }
+
+  .dbx-notice {
+    font-weight: bold;
+    color: $notice-color;
+  }
+
+}
+
+@mixin typography($typography-config) {
+
+  .dbx-label,
+  .dbx-sublabel,
+  .dbx-chip-sublabel {
+    font-size: theming.font-size($typography-config, 'caption');
+  }
+
+  .dbx-chip-sublabel {
+    margin-left: $icon-spacing;
+  }
+
+}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-text') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/lib/layout/text/hint.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DbxHintComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxHintComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxHintComponent, "dbx-hint", never, {}, {}, never, ["*"]>;
+}

package/lib/{text → layout/text}/index.d.ts

@@ -1,7 +1,5 @@
 export * from './hint.component';
-export * from './label.bar.component';
 export * from './label.component';
-export * from './link.component';
 export * from './linkify.component';
 export * from './note.component';
 export * from './notice.component';

package/lib/layout/text/label.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DbxLabelComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxLabelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLabelComponent, "dbx-label", never, {}, {}, never, ["*"]>;
+}

package/lib/{text → layout/text}/linkify.component.d.ts

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
 /**
  * Used to "linkify" the input text.
  */
-export declare class DbNgxLinkifyComponent implements OnDestroy {
+export declare class DbxLinkifyComponent implements OnDestroy {
     private readonly sanitizer;
     private _text;
     readonly linkifiedText$: import("rxjs").Observable<string>;
@@ -13,6 +13,6 @@ export declare class DbNgxLinkifyComponent implements OnDestroy {
     ngOnDestroy(): void;
     get text(): string;
     set text(text: string);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxLinkifyComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxLinkifyComponent, "dbx-linkify", never, { "text": "text"; }, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxLinkifyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLinkifyComponent, "dbx-linkify", never, { "text": "text"; }, {}, never, never>;
 }

package/lib/layout/text/note.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DbxNoteComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxNoteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxNoteComponent, "dbx-note", never, {}, {}, never, ["*"]>;
+}

package/lib/layout/text/notice.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DbxNoticeComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxNoticeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxNoticeComponent, "dbx-notice", never, {}, {}, never, ["*"]>;
+}

package/lib/layout/text/ok.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DbxOkComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxOkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxOkComponent, "dbx-ok", never, {}, {}, never, ["*"]>;
+}

package/lib/layout/text/success.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DbxSuccessComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxSuccessComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSuccessComponent, "dbx-success", never, {}, {}, never, ["*"]>;
+}

package/lib/layout/text/text.chips.component.d.ts

@@ -0,0 +1,13 @@
+import { Maybe } from '@dereekb/util';
+import * as i0 from "@angular/core";
+export interface TextChip<T = any> {
+    text: string;
+    tooltip?: string;
+    color?: 'primary' | 'accent';
+    data?: T;
+}
+export declare class DbxTextChipsComponent<T = any> {
+    chips?: Maybe<TextChip<T>[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTextChipsComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTextChipsComponent<any>, "dbx-text-chips", never, { "chips": "chips"; }, {}, never, never>;
+}

package/lib/layout/text/text.module.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./note.component";
+import * as i2 from "./notice.component";
+import * as i3 from "./success.component";
+import * as i4 from "./warn.component";
+import * as i5 from "./hint.component";
+import * as i6 from "./label.component";
+import * as i7 from "./linkify.component";
+import * as i8 from "./ok.component";
+import * as i9 from "./text.chips.component";
+import * as i10 from "@angular/common";
+import * as i11 from "@angular/material/chips";
+import * as i12 from "@angular/material/tooltip";
+import * as i13 from "@angular/material/icon";
+export declare class DbxTextModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTextModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTextModule, [typeof i1.DbxNoteComponent, typeof i2.DbxNoticeComponent, typeof i3.DbxSuccessComponent, typeof i4.DbxWarnComponent, typeof i5.DbxHintComponent, typeof i6.DbxLabelComponent, typeof i7.DbxLinkifyComponent, typeof i8.DbxOkComponent, typeof i9.DbxTextChipsComponent], [typeof i10.CommonModule, typeof i11.MatChipsModule, typeof i12.MatTooltipModule, typeof i13.MatIconModule], [typeof i1.DbxNoteComponent, typeof i2.DbxNoticeComponent, typeof i3.DbxSuccessComponent, typeof i4.DbxWarnComponent, typeof i5.DbxHintComponent, typeof i6.DbxLabelComponent, typeof i7.DbxLinkifyComponent, typeof i8.DbxOkComponent, typeof i9.DbxTextChipsComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxTextModule>;
+}

package/lib/layout/text/warn.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DbxWarnComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxWarnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxWarnComponent, "dbx-warn", never, {}, {}, never, ["*"]>;
+}

package/lib/loading/basic-loading.component.d.ts

@@ -6,7 +6,7 @@ import { ErrorInput, Maybe } from '@dereekb/util';
 import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
 import * as i0 from "@angular/core";
 /**
- * DbNgxBasicLoadingComponent loading state.
+ * DbxBasicLoadingComponent loading state.
  */
 export declare enum LoadingComponentState {
     NONE = -1,
@@ -17,7 +17,7 @@ export declare enum LoadingComponentState {
 /**
  * Basic loading component.
  */
-export declare class DbNgxBasicLoadingComponent implements OnDestroy {
+export declare class DbxBasicLoadingComponent implements OnDestroy {
     private _loading;
     private _show;
     private _error;
@@ -41,6 +41,6 @@ export declare class DbNgxBasicLoadingComponent implements OnDestroy {
     set error(error: Maybe<ErrorInput>);
     set customErrorContent(customErrorContent: Maybe<ElementRef>);
     set customLoadingContent(customLoadingContent: Maybe<ElementRef>);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxBasicLoadingComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxBasicLoadingComponent, "dbx-basic-loading", never, { "diameter": "diameter"; "mode": "mode"; "color": "color"; "text": "text"; "linear": "linear"; "show": "show"; "loading": "loading"; "error": "error"; }, {}, never, ["*", "[loading]", "[error]", "[errorAction]"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxBasicLoadingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxBasicLoadingComponent, "dbx-basic-loading", never, { "diameter": "diameter"; "mode": "mode"; "color": "color"; "text": "text"; "linear": "linear"; "show": "show"; "loading": "loading"; "error": "error"; }, {}, never, ["*", "[loading]", "[error]", "[errorAction]"]>;
 }

package/lib/loading/loading-progress.component.d.ts

@@ -7,7 +7,7 @@ export declare const DEFAULT_LOADING_PROGRESS_DIAMETER = 96;
 /**
  * Basic loading progress component.
  */
-export declare class DbNgxLoadingProgressComponent {
+export declare class DbxLoadingProgressComponent {
     private _diameter;
     text?: Maybe<string>;
     linear?: Maybe<boolean>;
@@ -19,6 +19,6 @@ export declare class DbNgxLoadingProgressComponent {
     set diameter(diameter: Maybe<number>);
     get bmode(): ProgressBarMode;
     get smode(): ProgressSpinnerMode;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxLoadingProgressComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxLoadingProgressComponent, "dbx-loading-progress", never, { "text": "text"; "linear": "linear"; "mode": "mode"; "color": "color"; "value": "value"; "bufferValue": "bufferValue"; "diameter": "diameter"; }, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxLoadingProgressComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLoadingProgressComponent, "dbx-loading-progress", never, { "text": "text"; "linear": "linear"; "mode": "mode"; "color": "color"; "value": "value"; "bufferValue": "bufferValue"; "diameter": "diameter"; }, {}, never, never>;
 }

package/lib/loading/loading.component.d.ts

@@ -5,18 +5,18 @@ import { ProgressBarMode } from '@angular/material/progress-bar';
 import { LoadingContext } from '@dereekb/rxjs';
 import { ErrorInput, Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
-export interface DbNgxLoadingComponentState {
+export interface DbxLoadingComponentState {
     loading: boolean;
     error: Maybe<ErrorInput>;
 }
 /**
  * Loading View component that provides content sections for loading, error, and an error action.
  */
-export declare class DbNgxLoadingComponent implements OnDestroy {
+export declare class DbxLoadingComponent implements OnDestroy {
     private _context;
     private _inputLoading;
     private _inputError;
-    readonly state$: Observable<DbNgxLoadingComponentState>;
+    readonly state$: Observable<DbxLoadingComponentState>;
     readonly loading$: Observable<boolean>;
     readonly error$: Observable<Maybe<ErrorInput>>;
     show?: Maybe<boolean>;
@@ -32,6 +32,6 @@ export declare class DbNgxLoadingComponent implements OnDestroy {
     set loading(loading: Maybe<boolean>);
     get error(): Maybe<ErrorInput>;
     set error(error: Maybe<ErrorInput>);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxLoadingComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxLoadingComponent, "dbx-loading", never, { "show": "show"; "text": "text"; "mode": "mode"; "color": "color"; "diameter": "diameter"; "linear": "linear"; "context": "context"; "loading": "loading"; "error": "error"; }, {}, never, ["[loading]", "*", "[error]", "[errorAction]"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxLoadingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLoadingComponent, "dbx-loading", never, { "show": "show"; "text": "text"; "mode": "mode"; "color": "color"; "diameter": "diameter"; "linear": "linear"; "context": "context"; "loading": "loading"; "error": "error"; }, {}, never, ["[loading]", "*", "[error]", "[errorAction]"]>;
 }

package/lib/loading/loading.module.d.ts

@@ -2,12 +2,12 @@ import * as i0 from "@angular/core";
 import * as i1 from "./loading.component";
 import * as i2 from "./basic-loading.component";
 import * as i3 from "./loading-progress.component";
-import * as i4 from "@angular/platform-browser";
+import * as i4 from "@angular/common";
 import * as i5 from "../error/error.module";
 import * as i6 from "@angular/material/progress-spinner";
 import * as i7 from "@angular/material/progress-bar";
-export declare class DbNgxLoadingModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxLoadingModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxLoadingModule, [typeof i1.DbNgxLoadingComponent, typeof i2.DbNgxBasicLoadingComponent, typeof i3.DbNgxLoadingProgressComponent], [typeof i4.BrowserModule, typeof i5.DbNgxReadableErrorModule, typeof i6.MatProgressSpinnerModule, typeof i7.MatProgressBarModule], [typeof i1.DbNgxLoadingComponent, typeof i2.DbNgxBasicLoadingComponent, typeof i3.DbNgxLoadingProgressComponent, typeof i6.MatProgressSpinnerModule, typeof i7.MatProgressBarModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxLoadingModule>;
+export declare class DbxLoadingModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxLoadingModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxLoadingModule, [typeof i1.DbxLoadingComponent, typeof i2.DbxBasicLoadingComponent, typeof i3.DbxLoadingProgressComponent], [typeof i4.CommonModule, typeof i5.DbxReadableErrorModule, typeof i6.MatProgressSpinnerModule, typeof i7.MatProgressBarModule], [typeof i1.DbxLoadingComponent, typeof i2.DbxBasicLoadingComponent, typeof i3.DbxLoadingProgressComponent, typeof i6.MatProgressSpinnerModule, typeof i7.MatProgressBarModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxLoadingModule>;
 }

package/lib/router/_router.scss

@@ -0,0 +1,25 @@
+@use './layout/anchor/anchor';
+@use './layout/anchorlist/anchorlist';
+@use './layout/navbar/navbar';
+@use './layout/sidenav/sidenav';
+
+@mixin all-router-core() {
+  @include anchor.core();
+  @include anchorlist.core();
+  @include navbar.core();
+  @include sidenav.core();
+}
+
+@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);
+}

package/lib/router/index.d.ts

@@ -1,2 +1,2 @@
-export * from './anchor';
+export * from './layout';
 export * from './provider';

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

@@ -0,0 +1,37 @@
+@use '../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-anchor a {
+    color: inherit;
+    text-decoration: none;
+
+    &.dbx-anchor-block {
+      display: block;
+      width: 100%;
+
+      .dbx-anchor-a {
+        display: block;
+        width: 100%
+      }
+    }
+  }
+
+  .dbx-link {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-anchor') {}
+}

package/lib/router/{anchor → layout/anchor}/anchor.component.d.ts

@@ -1,12 +1,12 @@
 import { TemplateRef } from '@angular/core';
-import { AbstractDbNgxAnchorDirective, DbNgxInjectedComponentConfig } from '@dereekb/dbx-core';
+import { AbstractDbxAnchorDirective, DbxInjectedComponentConfig } from '@dereekb/dbx-core';
 import { Maybe } from '@dereekb/util';
-import { DbNgxRouterWebProviderConfig } from '../provider/router.provider.config';
+import { DbxRouterWebProviderConfig } from '../../provider/router.provider.config';
 import * as i0 from "@angular/core";
 /**
  * Component that renders an anchor element depending on the input.
  */
-export declare class DbNgxAnchorComponent extends AbstractDbNgxAnchorDirective {
+export declare class DbxAnchorComponent extends AbstractDbxAnchorDirective {
     private readonly dbNgxRouterWebProviderConfig;
     private _templateRef;
     readonly templateRef$: import("rxjs").Observable<Maybe<TemplateRef<any>>>;
@@ -15,10 +15,9 @@ export declare class DbNgxAnchorComponent extends AbstractDbNgxAnchorDirective {
     set templateRef(templateRef: Maybe<TemplateRef<any>>);
     readonly url$: import("rxjs").Observable<string | undefined>;
     readonly target$: import("rxjs").Observable<string | undefined>;
-    constructor(dbNgxRouterWebProviderConfig: DbNgxRouterWebProviderConfig);
-    get srefAnchorConfig(): DbNgxInjectedComponentConfig;
-    get anchorBlockClass(): string;
+    constructor(dbNgxRouterWebProviderConfig: DbxRouterWebProviderConfig);
+    get srefAnchorConfig(): DbxInjectedComponentConfig;
     clickAnchor(event?: Maybe<MouseEvent>): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxAnchorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxAnchorComponent, "dbx-anchor, [dbx-anchor]", never, { "block": "block"; }, {}, never, ["*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorComponent, "dbx-anchor, [dbx-anchor]", never, { "block": "block"; }, {}, never, ["*"]>;
 }

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

@@ -0,0 +1,11 @@
+import { ClickableIconAnchorLink } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
+import * as i0 from "@angular/core";
+/**
+ * Component that displays an anchor and a mat-button.
+ */
+export declare class DbxAnchorIconComponent {
+    anchor: Maybe<ClickableIconAnchorLink>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorIconComponent, "dbx-anchor-icon", never, { "anchor": "anchor"; }, {}, never, never>;
+}

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

@@ -0,0 +1,13 @@
+import { ClickableAnchor } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
+import * as i0 from "@angular/core";
+/**
+ * Pre-styled text that can link to either a website or a ref using a dbx-anchor.
+ */
+export declare class DbxAnchorLinkComponent {
+    anchor?: ClickableAnchor;
+    set ref(ref: Maybe<string>);
+    set href(href: Maybe<string>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorLinkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorLinkComponent, "dbx-link", never, { "anchor": "anchor"; "ref": "ref"; "href": "href"; }, {}, never, ["*"]>;
+}

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

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./anchor.component";
+import * as i2 from "./anchor.icon.component";
+import * as i3 from "./anchor.link.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/material/icon";
+import * as i6 from "@angular/material/button";
+import * as i7 from "@dereekb/dbx-core";
+export declare class DbxAnchorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxAnchorModule, [typeof i1.DbxAnchorComponent, typeof i2.DbxAnchorIconComponent, typeof i3.DbxAnchorLinkComponent], [typeof i4.CommonModule, typeof i5.MatIconModule, typeof i6.MatButtonModule, typeof i7.DbxInjectedComponentModule], [typeof i1.DbxAnchorComponent, typeof i2.DbxAnchorIconComponent, typeof i3.DbxAnchorLinkComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxAnchorModule>;
+}

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

@@ -0,0 +1,19 @@
+import { DbxInjectedTemplateConfig } from "@dereekb/dbx-core";
+import { Observable } from "rxjs";
+import { DbxAnchorComponent } from "./anchor.component";
+import * as i0 from "@angular/core";
+/**
+ * Abstract implementation
+ */
+export declare abstract class AbstractDbxSegueAnchorDirective {
+    readonly parent: DbxAnchorComponent;
+    readonly target$: Observable<string | undefined>;
+    readonly ref$: Observable<any>;
+    readonly refParams$: Observable<import("@dereekb/dbx-core").SegueRefRawSegueParams | undefined>;
+    readonly refOptions$: Observable<any>;
+    constructor(parent: DbxAnchorComponent);
+    readonly template$: Observable<DbxInjectedTemplateConfig>;
+    get anchor(): import("../../../../../../../dist/packages/util/src").Maybe<import("@dereekb/dbx-core").ClickableAnchor>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxSegueAnchorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSegueAnchorDirective, never, never, {}, {}, never>;
+}

package/lib/router/{anchor → layout/anchor}/index.d.ts

@@ -2,3 +2,4 @@ export * from './anchor.component';
 export * from './anchor.icon.component';
 export * from './anchor.module';
 export * from './anchor.segue.directive';
+export * from './anchor.link.component';

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

@@ -0,0 +1,95 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../../style/theming';
+
+// MARK: Variables
+$active-root-item-left-padding: 2px;
+$active-child-item-left-padding: 5px;
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $background: map.get($color-config, 'background');
+  $background-hover-color: theming.get-color-from-palette($background, 'hover');
+
+  .dbx-anchor-list.mat-nav-list {
+
+    // MARK: Muting
+    // items that are not active are muted
+    .mat-list-item {
+      opacity: 0.74;
+    }
+
+    // active route as a parent
+    .dbx-anchor-active {
+      .mat-list-item {
+        opacity: 0.9;
+      }
+    }
+
+    // active route
+    .dbx-anchor-active-eq {
+      .mat-list-item {
+        opacity: 1;
+        background: color.scale($color:$background-hover-color, $alpha: 25%);
+      }
+    }
+
+    // MARK: Anchor Tree
+    /*
+    .dbx-anchor-list-root {
+      // nothing
+    }
+    */
+
+    .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;
+      height: 28px;
+      padding: $active-root-item-left-padding;
+    }
+
+    // MARK: Anchor Tree
+    .dbx-anchor-list-child {
+      font-size: 0.875em;
+
+      .mat-list-icon {
+        font-size: 22px;
+        width: 22px;
+        height: 22px;
+        padding: $active-child-item-left-padding;
+      }
+    }
+
+  }
+
+}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-anchorlist') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { OnDestroy } from '@angular/core';
+import { ClickableAnchorLinkTree } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
+import * as i0 from "@angular/core";
+/**
+ * Component that displays a list of ClickableAnchorLink values within a MatNavList.
+ */
+export declare class DbxAnchorListComponent implements OnDestroy {
+    private _anchors;
+    readonly expandedAnchors$: import("rxjs").Observable<import("@dereekb/dbx-core").ExpandedClickableAnchorLinkTree[]>;
+    set anchors(anchors: Maybe<ClickableAnchorLinkTree[]>);
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorListComponent, "dbx-anchor-list", never, { "anchors": "anchors"; }, {}, never, never>;
+}

package/lib/router/layout/anchorlist/anchorlist.module.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./anchorlist.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/tabs";
+import * as i4 from "@angular/material/button";
+import * as i5 from "@angular/material/icon";
+import * as i6 from "@angular/material/list";
+import * as i7 from "@angular/material/menu";
+import * as i8 from "../anchor/anchor.module";
+export declare class DbxAnchorListModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorListModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxAnchorListModule, [typeof i1.DbxAnchorListComponent], [typeof i2.CommonModule, typeof i3.MatTabsModule, typeof i4.MatButtonModule, typeof i5.MatIconModule, typeof i6.MatListModule, typeof i7.MatMenuModule, typeof i8.DbxAnchorModule], [typeof i1.DbxAnchorListComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxAnchorListModule>;
+}

package/lib/router/layout/anchorlist/index.d.ts

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

package/lib/router/layout/index.d.ts

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

package/lib/router/layout/layout.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./anchor/anchor.module";
+import * as i2 from "./anchorlist/anchorlist.module";
+import * as i3 from "./navbar/navbar.module";
+import * as i4 from "./sidenav/sidenav.module";
+export declare class DbxRouterLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxRouterLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterLayoutModule, never, never, [typeof i1.DbxAnchorModule, typeof i2.DbxAnchorListModule, typeof i3.DbxNavbarModule, typeof i4.DbxSidenavModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxRouterLayoutModule>;
+}