@dereekb/dbx-web 9.25.16 → 10.0.0

package/lib/layout/step/_step.scss

@@ -9,12 +9,13 @@
 @mixin color($theme-config) {
 }
 
-@mixin typography($typography-config) {
+@mixin typography($theme-config-or-typography-config) {
 }
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-step') {
     $color: theming.get-color-config($theme-config);
+    $density: theming.get-density-config($theme-config);
     $typography: theming.get-typography-config($theme-config);
 
     @if $color !=null {
@@ -22,7 +23,7 @@
     }
 
     @if $typography !=null {
-      @include typography($typography);
+      @include typography($theme-config);
     }
   }
 }

package/lib/layout/step/step.component.d.ts

@@ -5,5 +5,5 @@ export declare class DbxStepComponent {
     text?: string;
     hint?: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxStepComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxStepComponent, "dbx-step", never, { "done": "done"; "step": "step"; "text": "text"; "hint": "hint"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxStepComponent, "dbx-step", never, { "done": { "alias": "done"; "required": false; }; "step": { "alias": "step"; "required": false; }; "text": { "alias": "text"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/lib/layout/style/_style.scss

@@ -202,12 +202,13 @@ $dbx-success-color-var: --dbx-success-color;
   }
 }
 
-@mixin typography($typography-config) {
+@mixin typography($theme-config-or-typography-config) {
 }
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-style') {
     $color: theming.get-color-config($theme-config);
+    $density: theming.get-density-config($theme-config);
     $typography: theming.get-typography-config($theme-config);
 
     @if $color !=null {
@@ -215,7 +216,7 @@ $dbx-success-color-var: --dbx-success-color;
     }
 
     @if $typography !=null {
-      @include typography($typography);
+      @include typography($theme-config);
     }
   }
 }

package/lib/layout/style/spacer.directive.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class DbxSpacerDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSpacerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxSpacerDirective, "dbx-spacer, [dbxSpacer]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxSpacerDirective, "dbx-spacer, [dbxSpacer]", never, {}, {}, never, never, false, never>;
 }

package/lib/layout/style/style.body.directive.d.ts

@@ -12,5 +12,5 @@ export declare class DbxStyleBodyDirective extends AbstractSubscriptionDirective
     private _currentStyle;
     constructor(renderer: Renderer2, styleService: DbxStyleService, cdRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxStyleBodyDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxStyleBodyDirective, "[dbxStyleBody]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxStyleBodyDirective, "[dbxStyleBody]", never, {}, {}, never, never, false, never>;
 }

package/lib/layout/style/style.color.directive.d.ts

@@ -8,5 +8,5 @@ export declare class DbxColorDirective {
     cssClass: string;
     set dbxColor(dbxColor: Maybe<DbxThemeColor | ''>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxColorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxColorDirective, "[dbxColor]", never, { "dbxColor": "dbxColor"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxColorDirective, "[dbxColor]", never, { "dbxColor": { "alias": "dbxColor"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/layout/style/style.d.ts

@@ -1,4 +1,4 @@
 import { CssClass, Maybe } from '@dereekb/util';
-export declare type DbxThemeColor = 'primary' | 'accent' | 'warn' | 'ok' | 'success' | 'background' | 'grey' | 'disabled' | 'notice';
+export type DbxThemeColor = 'primary' | 'accent' | 'warn' | 'ok' | 'success' | 'background' | 'grey' | 'disabled' | 'notice';
 export declare const DBX_THEME_COLORS: DbxThemeColor[];
 export declare function dbxColorBackground(color: Maybe<DbxThemeColor | ''>): CssClass;

package/lib/layout/style/style.directive.d.ts

@@ -11,5 +11,5 @@ export declare class DbxStyleDirective extends AbstractSubscriptionDirective {
     cssClass: string;
     constructor(styleService: DbxStyleService, cdRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxStyleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxStyleDirective, "dbx-style, [dbxStyle], .dbx-style", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxStyleDirective, "dbx-style, [dbxStyle], .dbx-style", never, {}, {}, never, never, false, never>;
 }

package/lib/layout/style/style.set.directive.d.ts

@@ -27,5 +27,5 @@ export declare class DbxSetStyleDirective extends AbstractSubscriptionDirective
     get suffixes(): Maybe<string>;
     set suffixes(suffixes: Maybe<string>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSetStyleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxSetStyleDirective, "[dbxSetStyle]", never, { "style": "dbxSetStyle"; "suffixes": "suffixes"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxSetStyleDirective, "[dbxSetStyle]", never, { "style": { "alias": "dbxSetStyle"; "required": false; }; "suffixes": { "alias": "suffixes"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/layout/text/_text.scss

@@ -146,6 +146,11 @@ $dbx-detail-block-content-offset: 30px;
   .dbx-modelkey {
     line-break: anywhere;
   }
+
+  .dbx-text-chips-listbox button.mat-mdc-chip-action {
+    pointer-events: none; // disable the chip click and selection events.
+    user-select: none;
+  }
 }
 
 @mixin color($theme-config) {
@@ -196,7 +201,9 @@ $dbx-detail-block-content-offset: 30px;
   }
 }
 
-@mixin typography($typography-config) {
+@mixin typography($theme-config-or-typography-config) {
+  $typography-config: theming.get-typography-config($theme-config-or-typography-config);
+
   .dbx-label,
   .dbx-sublabel,
   .dbx-chip-sublabel {
@@ -211,6 +218,7 @@ $dbx-detail-block-content-offset: 30px;
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-text') {
     $color: theming.get-color-config($theme-config);
+    $density: theming.get-density-config($theme-config);
     $typography: theming.get-typography-config($theme-config);
 
     @if $color !=null {
@@ -218,7 +226,7 @@ $dbx-detail-block-content-offset: 30px;
     }
 
     @if $typography !=null {
-      @include typography($typography);
+      @include typography($theme-config);
     }
   }
 }

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

@@ -3,5 +3,5 @@ import * as i0 from "@angular/core";
 export declare class DbxUnitedStatesAddressComponent {
     address: Maybe<Partial<UnitedStatesAddressWithContact>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxUnitedStatesAddressComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxUnitedStatesAddressComponent, "dbx-us-address", never, { "address": "address"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxUnitedStatesAddressComponent, "dbx-us-address", never, { "address": { "alias": "address"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/layout/text/detail.block.component.d.ts

@@ -7,5 +7,5 @@ export declare class DbxDetailBlockComponent {
     icon?: Maybe<string>;
     header?: Maybe<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxDetailBlockComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDetailBlockComponent, "dbx-detail-block", never, { "icon": "icon"; "header": "header"; }, {}, never, ["[header]", "*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDetailBlockComponent, "dbx-detail-block", never, { "icon": { "alias": "icon"; "required": false; }; "header": { "alias": "header"; "required": false; }; }, {}, never, ["[header]", "*"], false, never>;
 }

package/lib/layout/text/detail.block.header.component.d.ts

@@ -4,5 +4,5 @@ export declare class DbxDetailBlockHeaderComponent {
     icon?: Maybe<string>;
     header?: Maybe<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxDetailBlockHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDetailBlockHeaderComponent, "dbx-detail-block-header", never, { "icon": "icon"; "header": "header"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDetailBlockHeaderComponent, "dbx-detail-block-header", never, { "icon": { "alias": "icon"; "required": false; }; "header": { "alias": "header"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/lib/layout/text/form.description.component.d.ts

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

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

@@ -1,5 +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, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxHintComponent, "dbx-hint", never, {}, {}, never, ["*"], false, never>;
 }

package/lib/layout/text/icon.spacer.component.d.ts

@@ -4,5 +4,5 @@ import * as i0 from "@angular/core";
  */
 export declare class DbxIconSpacerDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxIconSpacerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxIconSpacerDirective, "dbx-icon-spacer,[dbxIconSpacer]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxIconSpacerDirective, "dbx-icon-spacer,[dbxIconSpacer]", never, {}, {}, never, never, false, never>;
 }

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

@@ -6,5 +6,5 @@ import * as i0 from "@angular/core";
 export declare class DbxLabelBlockComponent {
     header?: Maybe<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxLabelBlockComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLabelBlockComponent, "dbx-label-block", never, { "header": "header"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLabelBlockComponent, "dbx-label-block", never, { "header": { "alias": "header"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

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

@@ -1,5 +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, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLabelComponent, "dbx-label", never, {}, {}, never, ["*"], false, never>;
 }

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

@@ -15,5 +15,5 @@ export declare class DbxLinkifyComponent implements OnDestroy {
     get text(): Maybe<string>;
     set text(text: Maybe<string>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxLinkifyComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLinkifyComponent, "dbx-linkify", never, { "text": "text"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLinkifyComponent, "dbx-linkify", never, { "text": { "alias": "text"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -1,5 +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, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxNoteComponent, "dbx-note", never, {}, {}, never, ["*"], false, never>;
 }

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

@@ -1,5 +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, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxNoticeComponent, "dbx-notice", never, {}, {}, never, ["*"], false, never>;
 }

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

@@ -1,5 +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, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxOkComponent, "dbx-ok", never, {}, {}, never, ["*"], false, never>;
 }

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

@@ -1,5 +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, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSuccessComponent, "dbx-success", never, {}, {}, never, ["*"], false, never>;
 }

package/lib/layout/text/text.chip.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DbxChipDirective {
     block?: Maybe<boolean>;
     get style(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxChipDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxChipDirective, "dbx-chip", never, { "small": "small"; "block": "block"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxChipDirective, "dbx-chip", never, { "small": { "alias": "small"; "required": false; }; "block": { "alias": "block"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -3,12 +3,14 @@ import * as i0 from "@angular/core";
 export interface TextChip<T = unknown> {
     text: string;
     tooltip?: string;
-    color?: 'primary' | 'accent';
+    selected?: boolean;
+    color?: 'primary' | 'accent' | 'warn' | undefined;
     data?: T;
 }
 export declare class DbxTextChipsComponent<T = unknown> {
+    defaultSelection?: boolean;
     chips?: Maybe<TextChip<T>[]>;
     trackChipByText(index: number, chip: TextChip<T>): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTextChipsComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTextChipsComponent<any>, "dbx-text-chips", never, { "chips": "chips"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTextChipsComponent<any>, "dbx-text-chips", never, { "defaultSelection": { "alias": "defaultSelection"; "required": false; }; "chips": { "alias": "chips"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -1,5 +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, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxWarnComponent, "dbx-warn", never, {}, {}, never, ["*"], false, never>;
 }

package/lib/loading/_loading.scss

@@ -15,12 +15,13 @@ $linear-line-height: 4px;
 @mixin color($theme-config) {
 }
 
-@mixin typography($typography-config) {
+@mixin typography($theme-config-or-typography-config) {
 }
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-loading') {
     $color: theming.get-color-config($theme-config);
+    $density: theming.get-density-config($theme-config);
     $typography: theming.get-typography-config($theme-config);
 
     @if $color !=null {
@@ -28,7 +29,7 @@ $linear-line-height: 4px;
     }
 
     @if $typography !=null {
-      @include typography($typography);
+      @include typography($theme-config);
     }
   }
 }

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

@@ -41,5 +41,5 @@ export declare class DbxBasicLoadingComponent implements OnDestroy {
     set customErrorContent(customErrorContent: Maybe<ElementRef>);
     set customLoadingContent(customLoadingContent: Maybe<ElementRef>);
     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]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxBasicLoadingComponent, "dbx-basic-loading", never, { "diameter": { "alias": "diameter"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "color": { "alias": "color"; "required": false; }; "text": { "alias": "text"; "required": false; }; "linear": { "alias": "linear"; "required": false; }; "show": { "alias": "show"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, never, ["*", "[loading]", "[error]", "[errorAction]"], false, never>;
 }

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

@@ -20,5 +20,5 @@ export declare class DbxLoadingProgressComponent {
     get bmode(): ProgressBarMode;
     get smode(): ProgressSpinnerMode;
     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, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLoadingProgressComponent, "dbx-loading-progress", never, { "text": { "alias": "text"; "required": false; }; "linear": { "alias": "linear"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "color": { "alias": "color"; "required": false; }; "value": { "alias": "value"; "required": false; }; "bufferValue": { "alias": "bufferValue"; "required": false; }; "diameter": { "alias": "diameter"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/loading/loading.action.directive.d.ts

@@ -15,5 +15,5 @@ export declare class DbxActionLoadingContextDirective implements OnInit, OnDestr
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionLoadingContextDirective, [{ host: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionLoadingContextDirective, "[dbxActionLoadingContext]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionLoadingContextDirective, "[dbxActionLoadingContext]", never, {}, {}, never, never, false, never>;
 }

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

@@ -39,5 +39,5 @@ export declare class DbxLoadingComponent implements OnDestroy {
     get error(): Maybe<ErrorInput>;
     set error(error: Maybe<ErrorInput>);
     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"; "padding": "padding"; "context": "context"; "loading": "loading"; "error": "error"; }, {}, never, ["[loading]", "*", "[error]", "[errorAction]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLoadingComponent, "dbx-loading", never, { "show": { "alias": "show"; "required": false; }; "text": { "alias": "text"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "color": { "alias": "color"; "required": false; }; "diameter": { "alias": "diameter"; "required": false; }; "linear": { "alias": "linear"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "context": { "alias": "context"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, never, ["[loading]", "*", "[error]", "[errorAction]"], false, never>;
 }

package/lib/router/_router.scss

@@ -10,11 +10,11 @@
   @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-typography($theme-config) {
+  @include anchor.typography($theme-config);
+  @include anchorlist.typography($theme-config);
+  @include navbar.typography($theme-config);
+  @include sidenav.typography($theme-config);
 }
 
 @mixin all-router-theme($theme-config) {

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

@@ -42,12 +42,13 @@
 @mixin color($theme-config) {
 }
 
-@mixin typography($typography-config) {
+@mixin typography($theme-config-or-typography-config) {
 }
 
 @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);
 
     @if $color !=null {
@@ -55,7 +56,7 @@
     }
 
     @if $typography !=null {
-      @include typography($typography);
+      @include typography($theme-config);
     }
   }
 }

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

@@ -23,5 +23,5 @@ export declare class DbxAnchorComponent extends AbstractDbxAnchorDirective imple
     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": "block"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorComponent, "dbx-anchor, [dbx-anchor]", never, { "block": { "alias": "block"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

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

@@ -18,5 +18,5 @@ export declare class DbxAnchorContentComponent implements OnDestroy {
     constructor(parent?: DbxAnchorComponent | undefined);
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxAnchorContentComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorContentComponent, "dbx-anchor-content", never, { "anchor": "anchor"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorContentComponent, "dbx-anchor-content", never, { "anchor": { "alias": "anchor"; "required": false; }; }, {}, never, never, false, 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": "anchor"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorIconComponent, "dbx-anchor-icon", never, { "anchor": { "alias": "anchor"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -9,5 +9,5 @@ export declare class DbxAnchorLinkComponent {
     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, ["*"], false>;
+    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>;
 }

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

@@ -13,7 +13,7 @@ export declare abstract class AbstractDbxSegueAnchorDirective {
     readonly refOptions$: Observable<object | undefined>;
     constructor(parent: DbxAnchorComponent);
     readonly template$: Observable<DbxInjectionTemplateConfig>;
-    get anchor(): import("../../../../../../../dist/packages/util/src").Maybe<import("@dereekb/dbx-core").ClickableAnchor>;
+    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, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSegueAnchorDirective, never, never, {}, {}, never, never, false, never>;
 }

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

@@ -3,12 +3,32 @@
 @use '../../../style/theming';
 
 // MARK: Variables
-$anchor-list-item-disabled-item-opacity: 25%;
+$anchor-list-item-disabled-item-opacity: 45%;
+$anchor-list-item-muted-opacity: 74%;
+$anchor-list-item-parent-active-opacity: 90%;
+$anchor-list-item-active-opacity: 100%;
+
 $active-root-item-left-padding: 2px;
 $active-child-item-left-padding: 5px;
 
 // MARK: Mixin
 @mixin core() {
+  .dbx-anchor-list.mat-mdc-nav-list {
+    padding-top: 0; // no padding
+
+    .mat-mdc-list-item {
+      .mat-icon.mat-mdc-list-item-icon.mdc-list-item__start {
+        // fix the icon alignment for items that are larger than the expected size
+        align-self: center;
+        margin-top: 0;
+      }
+
+      .mdc-list-item__content .mat-mdc-list-item-unscoped-content.mdc-list-item__secondary-text::before {
+        // ensure the custom content follows the text content shortly after
+        content: unset;
+      }
+    }
+  }
 }
 
 @mixin color($theme-config) {
@@ -20,59 +40,53 @@ $active-child-item-left-padding: 5px;
   $background-hover-color: theming.get-color-from-palette($background, 'hover');
   $background-disabled-color: theming.get-color-from-palette($background, 'contrast');
 
-  .dbx-anchor-list.mat-nav-list {
-    padding-top: 0;
+  .dbx-anchor-list.mat-mdc-nav-list {
+    --mat-divider-color: #{color.scale($color: $background-hover-color, $alpha: 15%)};
 
     // MARK: Muting
     // items that are not active are muted
-    .mat-list-item {
-      opacity: 0.74;
+    .mat-mdc-list-item {
+      opacity: #{$anchor-list-item-muted-opacity};
 
-      &.mat-list-item-disabled {
-        opacity: $anchor-list-item-disabled-item-opacity;
-        background: transparent;
+      &.mdc-list-item--disabled {
+        opacity: #{$anchor-list-item-disabled-item-opacity};
+        // background: transparent;
       }
     }
 
     // active route as a parent
     .dbx-anchor-active {
-      .mat-list-item {
-        opacity: 0.9;
+      .mat-mdc-list-item {
+        opacity: #{$anchor-list-item-parent-active-opacity};
       }
     }
 
     // selected
     .dbx-anchor-selected {
-      .mat-list-item {
-        opacity: 1;
+      .mat-mdc-list-item {
+        opacity: #{$anchor-list-item-active-opacity};
         background: color.scale($color: $background-hover-color, $alpha: 10%);
       }
     }
 
     // active route
     .dbx-anchor-active-eq {
-      .mat-list-item {
-        opacity: 1;
+      .mat-mdc-list-item {
+        opacity: #{$anchor-list-item-active-opacity};
         background: color.scale($color: $background-hover-color, $alpha: 25%);
       }
     }
 
     // MARK: Anchor Tree
-    /*
-    .dbx-anchor-list-root {
-      // nothing
-    }
-    */
-
-    .dbx-anchor-list-child .mat-list-item {
+    .dbx-anchor-list-child .mat-mdc-list-item {
       background: color.scale($background-hover-color, $alpha: 10%);
     }
   }
 }
 
-@mixin typography($typography-config) {
-  .dbx-anchor-list.mat-nav-list {
-    .mat-list-item .mat-list-icon {
+@mixin typography($theme-config-or-typography-config) {
+  .dbx-anchor-list.mat-mdc-nav-list {
+    .mat-mdc-list-item .mat-mdc-list-item-icon {
       font-size: 28px;
       width: 28px;
       height: 28px;
@@ -80,10 +94,10 @@ $active-child-item-left-padding: 5px;
     }
 
     // MARK: Anchor Tree
-    .dbx-anchor-list-child .mat-list-item {
+    .dbx-anchor-list-child .mat-mdc-list-item {
       font-size: 0.875em;
 
-      .mat-list-icon {
+      .mat-mdc-list-item-icon {
         font-size: 22px;
         width: 22px;
         height: 22px;
@@ -96,6 +110,7 @@ $active-child-item-left-padding: 5px;
 @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);
 
     @if $color !=null {
@@ -103,7 +118,7 @@ $active-child-item-left-padding: 5px;
     }
 
     @if $typography !=null {
-      @include typography($typography);
+      @include typography($theme-config);
     }
   }
 }

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

@@ -15,5 +15,5 @@ export declare class DbxAnchorListComponent implements OnDestroy {
     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, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAnchorListComponent, "dbx-anchor-list", never, { "anchors": { "alias": "anchors"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -5,7 +5,7 @@ import { Observable } from 'rxjs';
 import { DbxValueListItem } from '../../../layout/list/list.view.value';
 import { AbstractDbxValueListItemModifierDirective } from '../../../layout/list/list.view.value.modifier.directive';
 import * as i0 from "@angular/core";
-export declare type AnchorForValueFunction<T> = (value: T, item: DbxValueListItem<T>) => Maybe<ClickableAnchor>;
+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;
@@ -13,5 +13,5 @@ export declare class DbxListItemAnchorModifierDirective<T> extends AbstractDbxVa
     ngOnDestroy(): void;
     set anchorForItem(anchorForItem: Maybe<AnchorForValueFunction<T>>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxListItemAnchorModifierDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxListItemAnchorModifierDirective<any>, "[dbxListItemAnchorModifier]", never, { "anchorForItem": "dbxListItemAnchorModifier"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxListItemAnchorModifierDirective<any>, "[dbxListItemAnchorModifier]", never, { "anchorForItem": { "alias": "dbxListItemAnchorModifier"; "required": false; }; }, {}, never, never, false, never>;
 }