@dereekb/dbx-web 11.1.7 → 12.0.0

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

@@ -47,9 +47,9 @@
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-anchor') {
-    $color: theming.get-color-config($theme-config);
-    $density: theming.get-density-config($theme-config);
-    $typography: theming.get-typography-config($theme-config);
+    $color: theming.m2-get-color-config($theme-config);
+    $density: theming.m2-get-density-config($theme-config);
+    $typography: theming.m2-get-typography-config($theme-config);
 
     @if $color !=null {
       @include color($theme-config);

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

@@ -1,25 +1,20 @@
-import { TemplateRef, OnDestroy } from '@angular/core';
+import { TemplateRef } from '@angular/core';
 import { AbstractDbxAnchorDirective, DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { type Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 /**
  * Component that renders an anchor element depending on the input.
  */
-export declare class DbxAnchorComponent extends AbstractDbxAnchorDirective implements OnDestroy {
-    private readonly dbNgxRouterWebProviderConfig;
-    private _templateRef;
+export declare class DbxAnchorComponent extends AbstractDbxAnchorDirective {
+    private readonly _dbNgxRouterWebProviderConfig;
+    readonly block: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly templateRef: import("@angular/core").Signal<Maybe<TemplateRef<unknown>>>;
     readonly templateRef$: import("rxjs").Observable<Maybe<TemplateRef<unknown>>>;
-    block?: boolean;
-    get templateRef(): Maybe<TemplateRef<unknown>>;
-    set templateRef(templateRef: Maybe<TemplateRef<unknown>>);
-    readonly url$: import("rxjs").Observable<string | undefined>;
-    readonly target$: import("rxjs").Observable<string | undefined>;
-    readonly selectedClass$: import("rxjs").Observable<"" | "dbx-anchor-selected">;
-    ngOnDestroy(): void;
+    readonly selectedClassSignal: import("@angular/core").Signal<"" | "dbx-anchor-selected">;
     get srefAnchorConfig(): DbxInjectionComponentConfig;
     clickAnchor(event?: Maybe<MouseEvent>): void;
     onMouseEnter(event?: Maybe<MouseEvent>): void;
     onMouseLeave(event?: Maybe<MouseEvent>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorComponent, "dbx-anchor, [dbx-anchor]", never, { "block": { "alias": "block"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorComponent, "dbx-anchor, [dbx-anchor]", never, { "block": { "alias": "block"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -12,10 +12,11 @@ export declare class DbxAnchorContentComponent implements OnDestroy {
     private readonly _inputAnchor;
     private readonly _parentAnchor;
     readonly anchor$: Observable<Maybe<Partial<ClickableAnchorLink>>>;
-    readonly icon$: Observable<Maybe<string>>;
-    readonly title$: Observable<string | undefined>;
+    readonly anchorSignal: import("@angular/core").Signal<Maybe<Partial<ClickableAnchorLink>>>;
+    readonly iconSignal: import("@angular/core").Signal<Maybe<string>>;
+    readonly titleSignal: import("@angular/core").Signal<string | undefined>;
     set anchor(anchor: Maybe<Partial<ClickableAnchorLink>>);
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorContentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorContentComponent, "dbx-anchor-content", never, { "anchor": { "alias": "anchor"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorContentComponent, "dbx-anchor-content", never, { "anchor": { "alias": "anchor"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -7,5 +7,5 @@ import * as i0 from "@angular/core";
 export declare class DbxAnchorIconComponent {
     anchor: Maybe<ClickableIconAnchorLink>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorIconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorIconComponent, "dbx-anchor-icon", never, { "anchor": { "alias": "anchor"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorIconComponent, "dbx-anchor-icon", never, { "anchor": { "alias": "anchor"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -4,10 +4,10 @@ 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 {
+export declare class DbxLinkComponent {
     anchor?: Maybe<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": { "alias": "anchor"; "required": false; }; "ref": { "alias": "ref"; "required": false; }; "href": { "alias": "href"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxLinkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLinkComponent, "dbx-link", never, { "anchor": { "alias": "anchor"; "required": false; }; "ref": { "alias": "ref"; "required": false; }; "href": { "alias": "href"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -1,14 +1,23 @@
+import { DbxAnchorComponent } from './anchor.component';
+import { DbxAnchorIconComponent } from './anchor.icon.component';
+import { DbxLinkComponent } from './anchor.link.component';
+import { DbxAnchorContentComponent } from './anchor.content.component';
 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 "./anchor.content.component";
-import * as i5 from "@angular/common";
-import * as i6 from "@angular/material/icon";
-import * as i7 from "@angular/material/button";
-import * as i8 from "@dereekb/dbx-core";
+/**
+ * All standalone components related to anchors and links.
+ */
+export declare const DBX_ROUTER_ANCHOR_COMPONENTS: (typeof DbxAnchorComponent | typeof DbxAnchorIconComponent | typeof DbxLinkComponent | typeof DbxAnchorContentComponent)[];
+/**
+ * Module that provides anchor and link components.
+ *
+ * All components are now standalone. This module is provided for backward compatibility.
+ */
 export declare class DbxRouterAnchorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxRouterAnchorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterAnchorModule, [typeof i1.DbxAnchorComponent, typeof i2.DbxAnchorIconComponent, typeof i3.DbxAnchorLinkComponent, typeof i4.DbxAnchorContentComponent], [typeof i5.CommonModule, typeof i6.MatIconModule, typeof i7.MatButtonModule, typeof i8.DbxInjectionComponentModule], [typeof i1.DbxAnchorComponent, typeof i2.DbxAnchorIconComponent, typeof i3.DbxAnchorLinkComponent, typeof i4.DbxAnchorContentComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterAnchorModule, never, [typeof i1.DbxAnchorComponent, typeof i2.DbxAnchorIconComponent, typeof i3.DbxLinkComponent, typeof i4.DbxAnchorContentComponent], [typeof i1.DbxAnchorComponent, typeof i2.DbxAnchorIconComponent, typeof i3.DbxLinkComponent, typeof i4.DbxAnchorContentComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxRouterAnchorModule>;
 }

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

@@ -7,12 +7,11 @@ import * as i0 from "@angular/core";
  */
 export declare abstract class AbstractDbxSegueAnchorDirective {
     readonly parent: DbxAnchorComponent;
-    readonly target$: Observable<string | undefined>;
-    readonly ref$: Observable<import("@dereekb/dbx-core").SegueRefRouterLink | undefined>;
-    readonly refParams$: Observable<import("@dereekb/dbx-core").SegueRefRawSegueParams | undefined>;
-    readonly refOptions$: Observable<object | undefined>;
-    readonly template$: Observable<DbxInjectionTemplateConfig>;
-    get anchor(): import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").ClickableAnchor>;
+    readonly anchor$: Observable<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").ClickableAnchor>>;
+    readonly templateConfig$: Observable<DbxInjectionTemplateConfig>;
+    readonly anchorSignal: import("@angular/core").Signal<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").ClickableAnchor>>;
+    readonly templateConfigSignal: import("@angular/core").Signal<DbxInjectionTemplateConfig<unknown> | undefined>;
+    readonly targetSignal: import("@angular/core").Signal<string | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxSegueAnchorDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSegueAnchorDirective, never, never, {}, {}, never, never, false, never>;
 }

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

@@ -50,13 +50,13 @@ $default-anchor-list-item-child-list-item-text-size: 14px;
 }
 
 @mixin color($theme-config) {
-  $color-config: theming.get-color-config($theme-config);
+  $color-config: theming.m2-get-color-config($theme-config);
   $foreground: map.get($color-config, 'foreground');
   $primary: map.get($color-config, 'primary');
 
   $background: map.get($color-config, 'background');
-  $background-hover-color: theming.get-color-from-palette($background, 'hover');
-  $background-disabled-color: theming.get-color-from-palette($background, 'contrast');
+  $background-hover-color: theming.m2-get-color-from-palette($background, 'hover');
+  $background-disabled-color: theming.m2-get-color-from-palette($background, 'contrast');
 
   .dbx-anchor-list.mat-mdc-nav-list {
     --mat-divider-color: #{color.scale($color: $background-hover-color, $alpha: 15%)};
@@ -110,9 +110,9 @@ $default-anchor-list-item-child-list-item-text-size: 14px;
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-anchorlist') {
-    $color: theming.get-color-config($theme-config);
-    $density: theming.get-density-config($theme-config);
-    $typography: theming.get-typography-config($theme-config);
+    $color: theming.m2-get-color-config($theme-config);
+    $density: theming.m2-get-density-config($theme-config);
+    $typography: theming.m2-get-typography-config($theme-config);
 
     @if $color !=null {
       @include color($theme-config);

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

@@ -1,19 +1,16 @@
-import { OnDestroy } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Signal } from '@angular/core';
 import { ClickableAnchorLinkTree, ExpandedClickableAnchorLinkTree } from '@dereekb/dbx-core';
 import { type Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 export interface DbxAnchorListExpandedAnchor extends ExpandedClickableAnchorLinkTree {
-    classes: string;
+    readonly classes: string;
 }
 /**
  * Component that displays a list of ClickableAnchorLink values within a MatNavList.
  */
-export declare class DbxAnchorListComponent implements OnDestroy {
-    private _anchors;
-    readonly expandedAnchors$: Observable<DbxAnchorListExpandedAnchor[]>;
-    set anchors(anchors: Maybe<ClickableAnchorLinkTree[]>);
-    ngOnDestroy(): void;
+export declare class DbxAnchorListComponent {
+    readonly anchors: import("@angular/core").InputSignalWithTransform<ClickableAnchorLinkTree[], Maybe<ClickableAnchorLinkTree[]>>;
+    readonly expandedAnchors: Signal<DbxAnchorListExpandedAnchor[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorListComponent, "dbx-anchor-list", never, { "anchors": { "alias": "anchors"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorListComponent, "dbx-anchor-list", never, { "anchors": { "alias": "anchors"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

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

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

@@ -1,7 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./router.list.directive";
+/**
+ * @deprecated import DbxValueListItemModifierDirective directly instead.
+ */
 export declare class DbxRouterListModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxRouterListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterListModule, [typeof i1.DbxListItemAnchorModifierDirective], never, [typeof i1.DbxListItemAnchorModifierDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterListModule, never, [typeof i1.DbxListItemAnchorModifierDirective], [typeof i1.DbxListItemAnchorModifierDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxRouterListModule>;
 }

package/lib/router/layout/list/router.list.directive.d.ts

@@ -1,17 +1,15 @@
-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 { AbstractDbxValueListItemModifierDirective } from '../../../layout/list/modifier/list.view.value.modifier.directive';
 import * as i0 from "@angular/core";
 export type AnchorForValueFunction<T> = (value: T, item: DbxValueListItem<T>) => Maybe<ClickableAnchor>;
 export declare const DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY = "router_anchor";
-export declare class DbxListItemAnchorModifierDirective<T> extends AbstractDbxValueListItemModifierDirective<T> implements OnDestroy {
-    private _anchorForItem;
-    readonly modifiers$: Observable<Maybe<ArrayOrValue<Modifier<DbxValueListItem<T>>>>>;
-    ngOnDestroy(): void;
-    set anchorForItem(anchorForItem: Maybe<AnchorForValueFunction<T>>);
+export declare class DbxListItemAnchorModifierDirective<T> extends AbstractDbxValueListItemModifierDirective<T> {
+    readonly anchorForItem: import("@angular/core").InputSignal<Maybe<AnchorForValueFunction<T>>>;
+    readonly anchorForItemModifiers$: Observable<Maybe<ArrayOrValue<Modifier<DbxValueListItem<T>>>>>;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxListItemAnchorModifierDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxListItemAnchorModifierDirective<any>, "[dbxListItemAnchorModifier]", never, { "anchorForItem": { "alias": "dbxListItemAnchorModifier"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxListItemAnchorModifierDirective<any>, "[dbxListItemAnchorModifier]", never, { "anchorForItem": { "alias": "dbxListItemAnchorModifier"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/router/layout/navbar/_navbar.scss

@@ -16,9 +16,9 @@
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-navbar') {
-    $color: theming.get-color-config($theme-config);
-    $density: theming.get-density-config($theme-config);
-    $typography: theming.get-typography-config($theme-config);
+    $color: theming.m2-get-color-config($theme-config);
+    $density: theming.m2-get-density-config($theme-config);
+    $typography: theming.m2-get-typography-config($theme-config);
 
     @if $color != null {
       @include color($theme-config);

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

@@ -1,13 +1,12 @@
 import { Observable } from 'rxjs';
-import { ScreenMediaWidthType } from './../../../screen/screen';
+import { ScreenMediaWidthType } from '../../../screen/screen';
 import { type Maybe } from '@dereekb/util';
-import { OnDestroy, ChangeDetectorRef, TrackByFunction } from '@angular/core';
-import { ClickableAnchorLinkSegueRef, AbstractTransitionDirective, DbxButtonDisplayContent } from '@dereekb/dbx-core';
+import { ClickableAnchorLinkSegueRef, AbstractTransitionDirective, DbxButtonDisplay } from '@dereekb/dbx-core';
 import { HorizontalConnectionPos } from '@angular/cdk/overlay';
 import * as i0 from "@angular/core";
 interface NavAnchorLink {
-    selected: boolean;
-    anchor: ClickableAnchorLinkSegueRef;
+    readonly selected: boolean;
+    readonly anchor: ClickableAnchorLinkSegueRef;
 }
 export type NavBarContentAlign = 'center' | 'left' | 'right';
 export type NavbarMode = 'bar' | 'button' | 'icon';
@@ -15,41 +14,35 @@ export type NavbarButtonMode = 'menu' | 'rotate';
 /**
  * Component that displays a navbar.
  */
-export declare class DbxNavbarComponent extends AbstractTransitionDirective implements OnDestroy {
+export declare class DbxNavbarComponent extends AbstractTransitionDirective {
     private readonly _dbxScreenMediaService;
     private readonly _dbxRouterService;
-    readonly cdRef: ChangeDetectorRef;
     /**
      * Whether or not to show the dropwdown caret for a menu
      */
-    showMenuCaret: boolean;
-    navAlign: HorizontalConnectionPos;
-    private _icon;
-    private _defaultIcon;
-    private _defaultText;
-    private _inputMode;
-    private _buttonMode;
-    private _breakpoint;
-    private _anchors;
+    readonly showMenuCaret: import("@angular/core").InputSignal<boolean>;
+    readonly navAlign: import("@angular/core").InputSignal<HorizontalConnectionPos>;
+    readonly icon: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly defaultIcon: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly defaultText: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly mode: import("@angular/core").InputSignal<Maybe<NavbarMode>>;
+    readonly buttonMode: import("@angular/core").InputSignal<NavbarButtonMode>;
+    readonly breakpoint: import("@angular/core").InputSignal<ScreenMediaWidthType>;
+    readonly anchors: import("@angular/core").InputSignal<Maybe<ClickableAnchorLinkSegueRef[]>>;
     readonly isBreakpointActive$: Observable<boolean>;
-    readonly mode$: Observable<"button" | "icon" | "bar">;
+    readonly mode$: Observable<"icon" | "button" | "bar">;
     readonly anchors$: Observable<NavAnchorLink[]>;
-    readonly buttonMode$: Observable<NavbarButtonMode>;
     readonly selectedAnchor$: Observable<Maybe<NavAnchorLink>>;
     readonly nextRotateAnchor$: Observable<Maybe<NavAnchorLink>>;
     readonly hasNoAnchors$: Observable<boolean>;
     readonly buttonNavAnchor$: Observable<Maybe<NavAnchorLink>>;
-    readonly buttonDisplay$: Observable<DbxButtonDisplayContent>;
-    readonly trackByFunction: TrackByFunction<NavAnchorLink>;
-    ngOnDestroy(): void;
-    set icon(icon: Maybe<string>);
-    set defaultIcon(defaultIcon: Maybe<string>);
-    set defaultText(defaultText: Maybe<string>);
-    set anchors(anchors: Maybe<ClickableAnchorLinkSegueRef[]>);
-    set buttonMode(mode: Maybe<NavbarButtonMode>);
-    set mode(mode: Maybe<NavbarMode>);
-    set breakpoint(breakpoint: ScreenMediaWidthType);
+    readonly buttonDisplay$: Observable<DbxButtonDisplay>;
+    readonly modeSignal: import("@angular/core").Signal<"icon" | "button" | "bar" | undefined>;
+    readonly anchorsSignal: import("@angular/core").Signal<NavAnchorLink[] | undefined>;
+    readonly buttonDisplaySignal: import("@angular/core").Signal<DbxButtonDisplay | undefined>;
+    readonly hasNoAnchorsSignal: import("@angular/core").Signal<boolean | undefined>;
+    readonly nextRotateAnchorSignal: import("@angular/core").Signal<Maybe<NavAnchorLink>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxNavbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxNavbarComponent, "dbx-navbar", never, { "showMenuCaret": { "alias": "showMenuCaret"; "required": false; }; "navAlign": { "alias": "navAlign"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "defaultIcon": { "alias": "defaultIcon"; "required": false; }; "defaultText": { "alias": "defaultText"; "required": false; }; "anchors": { "alias": "anchors"; "required": false; }; "buttonMode": { "alias": "buttonMode"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxNavbarComponent, "dbx-navbar", never, { "showMenuCaret": { "alias": "showMenuCaret"; "required": false; "isSignal": true; }; "navAlign": { "alias": "navAlign"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "defaultIcon": { "alias": "defaultIcon"; "required": false; "isSignal": true; }; "defaultText": { "alias": "defaultText"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "buttonMode": { "alias": "buttonMode"; "required": false; "isSignal": true; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; "anchors": { "alias": "anchors"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export {};

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

@@ -1,15 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./navbar.component";
-import * as i2 from "@angular/common";
-import * as i3 from "../../../button/icon/icon.button.module";
-import * as i4 from "@angular/material/tabs";
-import * as i5 from "@angular/material/button";
-import * as i6 from "@angular/material/icon";
-import * as i7 from "@angular/material/menu";
-import * as i8 from "@uirouter/angular";
-import * as i9 from "../anchor/anchor.module";
+/**
+ * @deprecated import DbxNavbarComponent directly
+ */
 export declare class DbxRouterNavbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxRouterNavbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterNavbarModule, [typeof i1.DbxNavbarComponent], [typeof i2.CommonModule, typeof i3.DbxIconButtonModule, typeof i4.MatTabsModule, typeof i5.MatButtonModule, typeof i6.MatIconModule, typeof i7.MatMenuModule, typeof i8.UIRouterModule, typeof i9.DbxRouterAnchorModule], [typeof i1.DbxNavbarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterNavbarModule, never, [typeof i1.DbxNavbarComponent], [typeof i1.DbxNavbarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxRouterNavbarModule>;
 }

package/lib/router/layout/sidenav/_sidenav.scss

@@ -121,19 +121,19 @@ $active-background-transparent-color: 0.93;
 }
 
 @mixin color($theme-config) {
-  $color-config: theming.get-color-config($theme-config);
+  $color-config: theming.m2-get-color-config($theme-config);
   $primary: map.get($color-config, 'primary');
   $accent: map.get($color-config, 'accent');
 
   $background: map.get($color-config, 'background');
-  $text-color: theming.get-color-from-palette($primary, '800-contrast');
+  $text-color: theming.m2-get-color-from-palette($primary, '800-contrast');
   $text-faded-color: transparentize(
     $color: $text-color,
     $amount: $faded-text-transparent-color
   );
-  $sidenav-background-color: theming.get-color-from-palette($primary, 800);
-  $inactive-text-color: theming.get-color-from-palette($primary, '800-contrast');
-  $active-icon-color: theming.get-color-from-palette($accent, 400);
+  $sidenav-background-color: theming.m2-get-color-from-palette($primary, 800);
+  $inactive-text-color: theming.m2-get-color-from-palette($primary, '800-contrast');
+  $active-icon-color: theming.m2-get-color-from-palette($accent, 400);
 
   .dbx-sidenav {
     mat-sidenav {
@@ -247,9 +247,9 @@ $active-background-transparent-color: 0.93;
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-sidenav') {
-    $color: theming.get-color-config($theme-config);
-    $density: theming.get-density-config($theme-config);
-    $typography: theming.get-typography-config($theme-config);
+    $color: theming.m2-get-color-config($theme-config);
+    $density: theming.m2-get-density-config($theme-config);
+    $typography: theming.m2-get-typography-config($theme-config);
 
     @if $color !=null {
       @include color($theme-config);

package/lib/router/layout/sidenav/sidenav.button.component.d.ts

@@ -10,10 +10,9 @@ export declare class DbxSidenavButtonComponent {
     readonly parent: DbxSidenavComponent;
     readonly mode$: import("rxjs").Observable<SideNavDisplayMode>;
     readonly showMenuButton$: import("rxjs").Observable<boolean>;
-    private _sidenavMenuIcon;
+    readonly showMenuButtonSignal: import("@angular/core").Signal<boolean>;
+    readonly sidenavMenuIcon: import("@angular/core").InputSignalWithTransform<string, Maybe<string>>;
     toggleNav(): void;
-    get sidenavMenuIcon(): Maybe<string>;
-    set sidenavMenuIcon(sidenavMenuIcon: Maybe<string>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSidenavButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSidenavButtonComponent, "dbx-sidenav-button", never, { "sidenavMenuIcon": { "alias": "sidenavMenuIcon"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSidenavButtonComponent, "dbx-sidenav-button", never, { "sidenavMenuIcon": { "alias": "sidenavMenuIcon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1,35 +1,36 @@
-import { OnDestroy, OnInit } from '@angular/core';
 import { MatDrawerMode, MatSidenav } from '@angular/material/sidenav';
 import { AbstractTransitionWatcherDirective, ClickableAnchorLinkTree } from '@dereekb/dbx-core';
 import { type Maybe } from '@dereekb/util';
-import { Observable } from 'rxjs';
 import { SideNavDisplayMode } from './sidenav';
+import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 export interface DbxSidenavSidebarState {
-    mode: SideNavDisplayMode;
-    drawer: MatDrawerMode;
-    open?: boolean;
+    readonly mode: SideNavDisplayMode;
+    readonly drawer: MatDrawerMode;
+    readonly open?: boolean;
 }
 /**
  * Navigation component that sits at the side of an app.
  */
-export declare class DbxSidenavComponent extends AbstractTransitionWatcherDirective implements OnInit, OnDestroy {
-    private _screenMediaService;
-    anchors?: Maybe<ClickableAnchorLinkTree[]>;
-    readonly sidenav: MatSidenav;
+export declare class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
+    private readonly _screenMediaService;
+    readonly sidenav: import("@angular/core").Signal<MatSidenav>;
+    readonly anchors: import("@angular/core").InputSignal<Maybe<ClickableAnchorLinkTree[]>>;
     readonly mode$: Observable<SideNavDisplayMode>;
-    readonly disableBackdrop$: Observable<boolean>;
-    readonly sizeClass$: Observable<string>;
-    readonly state$: Observable<DbxSidenavSidebarState>;
-    readonly drawer$: Observable<MatDrawerMode>;
-    private _watcherSub;
-    private _stateSub;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
+    readonly modeSignal: import("@angular/core").Signal<SideNavDisplayMode | undefined>;
+    readonly disableBackdropSignal: import("@angular/core").Signal<boolean>;
+    readonly sizeCssClassSignal: import("@angular/core").Signal<string>;
+    readonly stateSignal: import("@angular/core").Signal<{
+        mode: SideNavDisplayMode | undefined;
+        drawer: "over" | "side";
+        open: boolean;
+    }>;
+    readonly drawerSignal: import("@angular/core").Signal<"over" | "side">;
+    protected readonly _stateSignalToggleEffect: import("@angular/core").EffectRef;
     protected updateForSuccessfulTransition(): void;
     closeNav(): void;
     toggleNav(open?: boolean): void;
     private _toggleNav;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSidenavComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSidenavComponent, "dbx-sidenav", ["sidenav"], { "anchors": { "alias": "anchors"; "required": false; }; }, {}, never, ["[top]", "[bottom]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSidenavComponent, "dbx-sidenav", ["sidenav"], { "anchors": { "alias": "anchors"; "required": false; "isSignal": true; }; }, {}, never, ["[top]", "[bottom]", "*"], true, never>;
 }

package/lib/router/layout/sidenav/sidenav.ifdisplaymode.directive.d.ts

@@ -1,4 +1,4 @@
-import { OnDestroy } from '@angular/core';
+import { Signal } from '@angular/core';
 import { AbstractIfDirective } from '@dereekb/dbx-core';
 import { ArrayOrValue, Maybe } from '@dereekb/util';
 import { DbxSidenavComponent } from './sidenav.component';
@@ -7,13 +7,13 @@ import * as i0 from "@angular/core";
 /**
  * Structural directive that displays the content if the Sidenav has a specific sidenav size.
  */
-export declare class DbxIfSidenavDisplayModeDirective extends AbstractIfDirective implements OnDestroy {
-    private _sidenavModes;
+export declare class DbxIfSidenavDisplayModeDirective extends AbstractIfDirective {
     readonly dbxSidenavComponent: DbxSidenavComponent;
+    readonly modes: import("@angular/core").InputSignal<Maybe<ArrayOrValue<string>>>;
+    readonly modesSetSignal: Signal<Set<SideNavDisplayMode>>;
+    readonly modes$: import("rxjs").Observable<Set<SideNavDisplayMode>>;
     readonly show$: import("rxjs").Observable<boolean>;
-    get modes(): Maybe<ArrayOrValue<SideNavDisplayMode | string>>;
-    set modes(modes: Maybe<ArrayOrValue<SideNavDisplayMode | string>>);
-    ngOnDestroy(): void;
+    readonly showSignal: Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxIfSidenavDisplayModeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxIfSidenavDisplayModeDirective, "[dbxIfSidenavDisplayMode]", never, { "modes": { "alias": "dbxIfSidenavDisplayMode"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxIfSidenavDisplayModeDirective, "[dbxIfSidenavDisplayMode]", never, { "modes": { "alias": "dbxIfSidenavDisplayMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -4,21 +4,8 @@ import * as i2 from "./sidenav.component";
 import * as i3 from "./sidenav.button.component";
 import * as i4 from "./sidenav.pagebar.component";
 import * as i5 from "./sidenav.page.component";
-import * as i6 from "@angular/common";
-import * as i7 from "../../../layout/bar/bar.layout.module";
-import * as i8 from "../anchor/anchor.module";
-import * as i9 from "../anchorlist/anchorlist.module";
-import * as i10 from "../../../button/button.module";
-import * as i11 from "../../../layout/content/content.layout.module";
-import * as i12 from "@angular/material/toolbar";
-import * as i13 from "@angular/material/button";
-import * as i14 from "@angular/material/icon";
-import * as i15 from "@angular/material/sidenav";
-import * as i16 from "@angular/material/list";
-import * as i17 from "@angular/material/divider";
-import * as i18 from "@uirouter/angular";
 export declare class DbxRouterSidenavModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxRouterSidenavModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterSidenavModule, [typeof i1.DbxIfSidenavDisplayModeDirective, typeof i2.DbxSidenavComponent, typeof i3.DbxSidenavButtonComponent, typeof i4.DbxSidenavPagebarComponent, typeof i5.DbxSidenavPageComponent], [typeof i6.CommonModule, typeof i7.DbxBarLayoutModule, typeof i8.DbxRouterAnchorModule, typeof i9.DbxRouterAnchorListModule, typeof i10.DbxButtonModule, typeof i11.DbxContentLayoutModule, typeof i12.MatToolbarModule, typeof i13.MatButtonModule, typeof i14.MatIconModule, typeof i15.MatSidenavModule, typeof i16.MatListModule, typeof i17.MatDividerModule, typeof i18.UIRouterModule], [typeof i1.DbxIfSidenavDisplayModeDirective, typeof i2.DbxSidenavComponent, typeof i3.DbxSidenavButtonComponent, typeof i4.DbxSidenavPagebarComponent, typeof i5.DbxSidenavPageComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxRouterSidenavModule, never, [typeof i1.DbxIfSidenavDisplayModeDirective, typeof i2.DbxSidenavComponent, typeof i3.DbxSidenavButtonComponent, typeof i4.DbxSidenavPagebarComponent, typeof i5.DbxSidenavPageComponent], [typeof i1.DbxIfSidenavDisplayModeDirective, typeof i2.DbxSidenavComponent, typeof i3.DbxSidenavButtonComponent, typeof i4.DbxSidenavPagebarComponent, typeof i5.DbxSidenavPageComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxRouterSidenavModule>;
 }

package/lib/router/layout/sidenav/sidenav.page.component.d.ts

@@ -1,22 +1,19 @@
-import { OnDestroy } from '@angular/core';
 import { DbxSidenavComponent } from './sidenav.component';
 import { type Maybe } from '@dereekb/util';
-import { DbxBarColor } from '../../../layout/bar/bar';
 import * as i0 from "@angular/core";
 /**
  * Pre-configured page used with DbxSidenavComponent.
  *
  * Can optionally be configured to only show the pagebar while in mobile mode.
  */
-export declare class DbxSidenavPageComponent implements OnDestroy {
+export declare class DbxSidenavPageComponent {
     readonly parent: DbxSidenavComponent;
-    sidenavMenuIcon: Maybe<string>;
-    color?: Maybe<DbxBarColor>;
-    private _mobileOnly;
+    readonly color: import("@angular/core").InputSignal<Maybe<import("@dereekb/dbx-web").DbxThemeColor>>;
+    readonly sidenavMenuIcon: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly mobileOnly: import("@angular/core").InputSignal<boolean>;
+    readonly mobileOnly$: import("rxjs").Observable<boolean>;
     readonly hidePagebar$: import("rxjs").Observable<boolean>;
-    ngOnDestroy(): void;
-    get mobileOnly(): boolean;
-    set mobileOnly(mobileOnly: boolean);
+    readonly hidePagebarSignal: import("@angular/core").Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSidenavPageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSidenavPageComponent, "dbx-sidenav-page", never, { "sidenavMenuIcon": { "alias": "sidenavMenuIcon"; "required": false; }; "color": { "alias": "color"; "required": false; }; "mobileOnly": { "alias": "mobileOnly"; "required": false; }; }, {}, never, ["[navLeft]", "[navRight]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSidenavPageComponent, "dbx-sidenav-page", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "sidenavMenuIcon": { "alias": "sidenavMenuIcon"; "required": false; "isSignal": true; }; "mobileOnly": { "alias": "mobileOnly"; "required": false; "isSignal": true; }; }, {}, never, ["[navLeft]", "[navRight]", "*"], true, never>;
 }

package/lib/router/layout/sidenav/sidenav.pagebar.component.d.ts

@@ -5,7 +5,7 @@ import * as i0 from "@angular/core";
  * Pre-configured pagebar used with DbxSidenavComponent.
  */
 export declare class DbxSidenavPagebarComponent extends DbxPagebarComponent {
-    sidenavMenuIcon: Maybe<string>;
+    readonly sidenavMenuIcon: import("@angular/core").InputSignal<Maybe<string>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSidenavPagebarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSidenavPagebarComponent, "dbx-sidenav-pagebar", never, { "sidenavMenuIcon": { "alias": "sidenavMenuIcon"; "required": false; }; }, {}, never, ["*", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSidenavPagebarComponent, "dbx-sidenav-pagebar", never, { "sidenavMenuIcon": { "alias": "sidenavMenuIcon"; "required": false; "isSignal": true; }; }, {}, never, ["*", "*"], true, never>;
 }

package/lib/router/provider/ngrouter/anchor.component.d.ts

@@ -5,5 +5,5 @@ import * as i0 from "@angular/core";
  */
 export declare class DbxAngularRouterSegueAnchorComponent extends AbstractDbxSegueAnchorDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxAngularRouterSegueAnchorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAngularRouterSegueAnchorComponent, "ng-component", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAngularRouterSegueAnchorComponent, "ng-component", never, {}, {}, never, never, true, never>;
 }

package/lib/router/provider/ngrouter/angular.router.providers.d.ts

@@ -0,0 +1,7 @@
+import { EnvironmentProviders } from '@angular/core';
+/**
+ * Provides a DbxRouterWebProviderConfig that configures the app to use Angular Router for anchors.
+ *
+ * @returns EnvironmentProviders
+ */
+export declare function provideDbxRouterWebAngularRouterProviderConfig(): EnvironmentProviders;

package/lib/router/provider/ngrouter/index.d.ts

@@ -1,2 +1,2 @@
 export * from './anchor.component';
-export * from './angular.router.module';
+export * from './angular.router.providers';