@dereekb/dbx-web 11.1.7 → 12.0.0

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

@@ -2,14 +2,11 @@ import * as i0 from "@angular/core";
 import * as i1 from "./bar.directive";
 import * as i2 from "./bar.header.component";
 import * as i3 from "./pagebar.component";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/material/toolbar";
-import * as i6 from "@angular/material/icon";
 /**
- * Module for block components.
+ * Module for dbx-bar components.
  */
 export declare class DbxBarLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxBarLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxBarLayoutModule, [typeof i1.DbxBarDirective, typeof i2.DbxBarHeaderComponent, typeof i3.DbxPagebarComponent], [typeof i4.CommonModule, typeof i5.MatToolbarModule, typeof i6.MatIconModule], [typeof i1.DbxBarDirective, typeof i2.DbxBarHeaderComponent, typeof i3.DbxPagebarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxBarLayoutModule, never, [typeof i1.DbxBarDirective, typeof i2.DbxBarHeaderComponent, typeof i3.DbxPagebarComponent], [typeof i1.DbxBarDirective, typeof i2.DbxBarHeaderComponent, typeof i3.DbxPagebarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxBarLayoutModule>;
 }

package/lib/layout/bar/pagebar.component.d.ts

@@ -1,8 +1,8 @@
 import { type Maybe } from '@dereekb/util';
-import { DbxBarColor } from './bar';
 import * as i0 from "@angular/core";
 export declare class DbxPagebarComponent {
-    color?: Maybe<DbxBarColor>;
+    readonly color: import("@angular/core").InputSignal<Maybe<import("@dereekb/dbx-web").DbxThemeColor>>;
+    readonly cssClassSignal: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPagebarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPagebarComponent, "dbx-pagebar", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, ["[left]", "[right]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPagebarComponent, "dbx-pagebar", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, ["[left]", "[right]"], true, never>;
 }

package/lib/layout/block/_block.scss

@@ -28,9 +28,9 @@ $two-block-top-height-var: --dbx-two-block-top-height;
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-block') {
-    $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/layout/block/block.layout.module.d.ts

@@ -1,13 +1,12 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./two.block.component";
-import * as i2 from "@angular/common";
-import * as i3 from "../../router/layout/anchor/anchor.module";
-import * as i4 from "angular-resize-event";
 /**
  * Module for block components.
+ *
+ * @deprecated import DbxTwoBlockComponent directly instead.
  */
 export declare class DbxBlockLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxBlockLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxBlockLayoutModule, [typeof i1.DbxTwoBlocksComponent], [typeof i2.CommonModule, typeof i3.DbxRouterAnchorModule, typeof i4.AngularResizeEventModule], [typeof i1.DbxTwoBlocksComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxBlockLayoutModule, never, [typeof i1.DbxTwoBlockComponent], [typeof i1.DbxTwoBlockComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxBlockLayoutModule>;
 }

package/lib/layout/block/two.block.component.d.ts

@@ -1,5 +1,4 @@
-import { ElementRef } from '@angular/core';
-import { ResizedEvent } from 'angular-resize-event';
+import { ResizedEvent } from 'angular-resize-event-package';
 import * as i0 from "@angular/core";
 /**
  * Wrapper of a block that is broken into two parts, with the bottom content's height
@@ -8,13 +7,14 @@ import * as i0 from "@angular/core";
  * The block is made up of two divs, a top and a bottom. The top is assigned a static height, and the bottom is given the remainder.
  * The height is calculated from 100%.
  */
-export declare class DbxTwoBlocksComponent {
+export declare class DbxTwoBlockComponent {
     /**
      * Whether or not the top bar should be fixed in place instead of scrolling with the bottom when content is too tall.
      */
-    fixedTop: boolean;
-    twoElement: ElementRef;
-    onResized(event: ResizedEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoBlocksComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoBlocksComponent, "dbx-two-block", never, { "fixedTop": { "alias": "fixedTop"; "required": false; }; }, {}, never, ["[top]", "*"], false, never>;
+    readonly fixedTop: import("@angular/core").InputSignal<boolean>;
+    readonly topHeightSignal: import("@angular/core").WritableSignal<number>;
+    readonly topHeightPixelsSignal: import("@angular/core").Signal<string>;
+    viewResized(event: ResizedEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoBlockComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoBlockComponent, "dbx-two-block", never, { "fixedTop": { "alias": "fixedTop"; "required": false; "isSignal": true; }; }, {}, never, ["[top]", "*"], true, never>;
 }

package/lib/layout/card/_card.scss

@@ -14,9 +14,9 @@
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-card') {
-    $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/layout/card/card.box.component.d.ts

@@ -3,8 +3,8 @@ import * as i0 from "@angular/core";
  * Component that formats a card-box of content.
  */
 export declare class DbxCardBoxComponent {
-    header?: string;
-    icon?: string;
+    readonly header: import("@angular/core").InputSignal<string | undefined>;
+    readonly icon: import("@angular/core").InputSignal<string | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxCardBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxCardBoxComponent, "dbx-card-box", never, { "header": { "alias": "header"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, ["[sectionHeader]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxCardBoxComponent, "dbx-card-box", never, { "header": { "alias": "header"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["[sectionHeader]", "*"], true, never>;
 }

package/lib/layout/card/card.box.container.directive.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+/**
+ * Component that wraps a card box and adds content padding.
+ */
+export declare class DbxCardBoxContainerDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxCardBoxContainerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxCardBoxContainerDirective, "dbx-card-box-container, [dbxCardBoxContainer]", never, {}, {}, never, never, true, never>;
+}

package/lib/layout/card/card.box.layout.module.d.ts

@@ -1,10 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./card.box.component";
-import * as i2 from "./card.box.container.component";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/material/icon";
+import * as i2 from "./card.box.container.directive";
 export declare class DbxCardBoxLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxCardBoxLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxCardBoxLayoutModule, [typeof i1.DbxCardBoxComponent, typeof i2.DbxCardBoxContainerComponent], [typeof i3.CommonModule, typeof i4.MatIconModule], [typeof i1.DbxCardBoxComponent, typeof i2.DbxCardBoxContainerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxCardBoxLayoutModule, never, [typeof i1.DbxCardBoxComponent, typeof i2.DbxCardBoxContainerDirective], [typeof i1.DbxCardBoxComponent, typeof i2.DbxCardBoxContainerDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxCardBoxLayoutModule>;
 }

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

@@ -1,3 +1,3 @@
 export * from './card.box.component';
-export * from './card.box.container.component';
+export * from './card.box.container.directive';
 export * from './card.box.layout.module';

package/lib/layout/column/_column.scss

@@ -147,9 +147,9 @@ $two-columns-right-padding-size: 6px;
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-column') {
-    $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/layout/column/column.layout.module.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./one/one.column.module";
+import * as i1 from "./one/one.column.component";
 import * as i2 from "./two/two.column.module";
 export declare class DbxColumnLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxColumnLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxColumnLayoutModule, never, never, [typeof i1.DbxOneColumnLayoutModule, typeof i2.DbxTwoColumnLayoutModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxColumnLayoutModule, never, [typeof i1.DbxOneColumnComponent, typeof i2.DbxTwoColumnLayoutModule], [typeof i1.DbxOneColumnComponent, typeof i2.DbxTwoColumnLayoutModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxColumnLayoutModule>;
 }

package/lib/layout/column/one/one.column.component.d.ts

@@ -1,12 +1,12 @@
-import { TwoColumnsContextStore } from '../two';
+import { TwoColumnsContextStore } from '../two/two.column.store';
 import * as i0 from "@angular/core";
 /**
  * Pre-configured Two-columns view that only has a left view and shows full left.
  */
 export declare class DbxOneColumnComponent {
     readonly twoColumnsContextStore: TwoColumnsContextStore;
+    readonly inSectionPage: import("@angular/core").InputSignal<boolean>;
     constructor();
-    inSectionPage: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxOneColumnComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxOneColumnComponent, "dbx-one-column", ["columns"], { "inSectionPage": { "alias": "inSectionPage"; "required": false; }; }, {}, never, ["[top]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxOneColumnComponent, "dbx-one-column", ["columns"], { "inSectionPage": { "alias": "inSectionPage"; "required": false; "isSignal": true; }; }, {}, never, ["[top]", "*"], true, never>;
 }

package/lib/layout/column/one/one.column.module.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./one.column.component";
-import * as i2 from "@angular/common";
-import * as i3 from "../two/two.column.module";
+/**
+ * @deprecated import DbxOneColumnComponent directly instead.
+ */
 export declare class DbxOneColumnLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxOneColumnLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxOneColumnLayoutModule, [typeof i1.DbxOneColumnComponent], [typeof i2.CommonModule, typeof i3.DbxTwoColumnLayoutModule], [typeof i1.DbxOneColumnComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxOneColumnLayoutModule, never, [typeof i1.DbxOneColumnComponent], [typeof i1.DbxOneColumnComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxOneColumnLayoutModule>;
 }

package/lib/layout/column/two/index.d.ts

@@ -2,7 +2,7 @@ export * from './two.column.back.directive';
 export * from './two.column.component';
 export * from './two.column.context.directive';
 export * from './two.column.full.left.directive';
-export * from './two.column.head.component';
+export * from './two.column.head.directive';
 export * from './two.column.module';
 export * from './two.column.right.component';
 export * from './two.column.sref.directive';

package/lib/layout/column/two/two.column.back.directive.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { TwoColumnsContextStore } from './two.column.store';
 import * as i0 from "@angular/core";
@@ -7,9 +7,9 @@ import * as i0 from "@angular/core";
  */
 export declare class DbxTwoColumnBackDirective extends AbstractSubscriptionDirective implements OnInit {
     readonly twoColumnsContextStore: TwoColumnsContextStore;
-    back: EventEmitter<any>;
+    readonly dbxTwoColumnBack: import("@angular/core").OutputEmitterRef<void>;
     ngOnInit(): void;
     backClicked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnBackDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnBackDirective, "[dbxTwoColumnBack]", never, {}, { "back": "dbxTwoColumnBack"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnBackDirective, "[dbxTwoColumnBack]", never, {}, { "dbxTwoColumnBack": "dbxTwoColumnBack"; }, never, never, true, never>;
 }

package/lib/layout/column/two/two.column.component.d.ts

@@ -1,15 +1,16 @@
-import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { OnDestroy } from '@angular/core';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
-import { ResizedEvent } from 'angular-resize-event';
+import { ResizedEvent } from 'angular-resize-event-package';
 import { Observable } from 'rxjs';
 import { TwoColumnsContextStore } from './two.column.store';
+import { Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 export interface DbxTwoColumnViewState {
-    showRight: boolean;
-    showFullLeft: boolean;
-    hideLeftColumn: boolean;
-    reverseSizing: boolean;
-    inSectionPage: boolean;
+    readonly showRight: boolean;
+    readonly showFullLeft: boolean;
+    readonly hideLeftColumn: boolean;
+    readonly reverseSizing: boolean;
+    readonly inSectionPage: boolean;
 }
 /**
  * Responsive component meant to split a left and right column.
@@ -18,24 +19,40 @@ export interface DbxTwoColumnViewState {
  *
  * Requires a TwoColumnsContextStore to be provided.
  */
-export declare class DbxTwoColumnComponent extends AbstractSubscriptionDirective implements OnInit, OnDestroy {
+export declare class DbxTwoColumnComponent extends AbstractSubscriptionDirective implements OnDestroy {
     private readonly _elementRef;
     readonly twoColumnsContextStore: TwoColumnsContextStore;
-    readonly cdRef: ChangeDetectorRef;
-    private _view;
-    private readonly _inSectionPage;
+    readonly reverseSizing: import("@angular/core").InputSignal<boolean>;
+    readonly inSectionPage: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Acts as an override to show the right column without having to use dbx-two-column-right or update the context store directly.
+     */
+    readonly hasRightContent: import("@angular/core").InputSignalWithTransform<boolean, Maybe<boolean | "">>;
     readonly reverseSizing$: Observable<boolean>;
     readonly hideLeftColumn$: Observable<boolean>;
+    readonly inSectionPage$: Observable<boolean>;
     readonly showRight$: Observable<boolean>;
     readonly showFullLeft$: Observable<boolean>;
-    readonly hideRight$: Observable<boolean>;
-    constructor();
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    get v(): DbxTwoColumnViewState;
-    set reverseSizing(reverseSizing: boolean);
-    set inSectionPage(inSectionPage: boolean);
-    onResized(event: ResizedEvent): void;
+    readonly hideLeftColumnSignal: import("@angular/core").Signal<boolean | undefined>;
+    readonly reverseSizingSignal: import("@angular/core").Signal<boolean | undefined>;
+    readonly showRightSignal: import("@angular/core").Signal<boolean | undefined>;
+    readonly cssClasses$: Observable<{
+        'right-shown': boolean;
+        'full-left': boolean;
+        'hide-left-column': boolean;
+        'two-column-reverse-sizing': boolean;
+        'dbx-section-page-two': boolean;
+    }>;
+    readonly cssClassSignal: import("@angular/core").Signal<{
+        'right-shown': boolean;
+        'full-left': boolean;
+        'hide-left-column': boolean;
+        'two-column-reverse-sizing': boolean;
+        'dbx-section-page-two': boolean;
+    } | undefined>;
+    protected readonly _reverseSizingEffect: import("@angular/core").EffectRef;
+    protected readonly _hasRightContentEffect: import("@angular/core").EffectRef;
+    viewResized(event: ResizedEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnComponent, "dbx-two-column", ["columns"], { "reverseSizing": { "alias": "reverseSizing"; "required": false; }; "inSectionPage": { "alias": "inSectionPage"; "required": false; }; }, {}, never, ["[left]", "[right]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnComponent, "dbx-two-column", ["columns"], { "reverseSizing": { "alias": "reverseSizing"; "required": false; "isSignal": true; }; "inSectionPage": { "alias": "inSectionPage"; "required": false; "isSignal": true; }; "hasRightContent": { "alias": "hasRightContent"; "required": false; "isSignal": true; }; }, {}, never, ["[left]", "[right]"], true, never>;
 }

package/lib/layout/column/two/two.column.context.directive.d.ts

@@ -1,16 +1,13 @@
-import { OnDestroy, OnInit } from '@angular/core';
 import { type Maybe } from '@dereekb/util';
 import { TwoColumnsContextStore } from './two.column.store';
 import * as i0 from "@angular/core";
 /**
  * Provides a dbxTwoColumnContextStore
  */
-export declare class DbxTwoColumnContextDirective implements OnInit, OnDestroy {
+export declare class DbxTwoColumnContextDirective {
     readonly twoColumnsContextStore: TwoColumnsContextStore;
-    private _showRight;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    set showRight(showRight: Maybe<boolean | ''>);
+    readonly showRight: import("@angular/core").InputSignalWithTransform<Maybe<boolean>, Maybe<boolean | "">>;
+    protected readonly _showRightEffect: import("@angular/core").EffectRef;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnContextDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnContextDirective, "[dbxTwoColumnContext]", never, { "showRight": { "alias": "showRight"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnContextDirective, "[dbxTwoColumnContext]", never, { "showRight": { "alias": "showRight"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/layout/column/two/two.column.full.left.directive.d.ts

@@ -1,16 +1,12 @@
-import { OnInit, OnDestroy } from '@angular/core';
 import { type Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 /**
  * Used with a DbxTwoColumnComponent to set the full left to true.
  */
-export declare class DbxTwoColumnFullLeftDirective implements OnInit, OnDestroy {
+export declare class DbxTwoColumnFullLeftDirective {
     private readonly _twoColumnsContextStore;
-    private _fullLeft;
-    get fullLeft(): boolean;
-    set fullLeft(fullLeft: Maybe<boolean | ''>);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
+    readonly fullLeft: import("@angular/core").InputSignalWithTransform<boolean, Maybe<boolean | "">>;
+    protected readonly _fullLeftEffect: import("@angular/core").EffectRef;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnFullLeftDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnFullLeftDirective, "[dbxTwoColumnFullLeft]", never, { "fullLeft": { "alias": "dbxTwoColumnFullLeft"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnFullLeftDirective, "[dbxTwoColumnFullLeft]", never, { "fullLeft": { "alias": "dbxTwoColumnFullLeft"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/layout/column/two/two.column.head.directive.d.ts

@@ -0,0 +1,11 @@
+import { type Maybe } from '@dereekb/util';
+import * as i0 from "@angular/core";
+/**
+ * Two Columns related component that sits at the top of the content bodies and wraps content.
+ */
+export declare class DbxTwoColumnColumnHeadDirective {
+    readonly block: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly full: import("@angular/core").InputSignal<Maybe<boolean>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnColumnHeadDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnColumnHeadDirective, "dbx-two-column-head,[dbxTwoColumnHead],.dbx-two-column-head", never, { "block": { "alias": "block"; "required": false; "isSignal": true; }; "full": { "alias": "full"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/layout/column/two/two.column.module.d.ts

@@ -1,20 +1,14 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./two.column.component";
 import * as i2 from "./two.column.right.component";
-import * as i3 from "./two.column.head.component";
+import * as i3 from "./two.column.head.directive";
 import * as i4 from "./two.column.sref.directive";
 import * as i5 from "./two.column.back.directive";
 import * as i6 from "./two.column.full.left.directive";
 import * as i7 from "./two.column.context.directive";
 import * as i8 from "./two.column.sref.showright.directive";
-import * as i9 from "@angular/common";
-import * as i10 from "@angular/material/icon";
-import * as i11 from "@angular/material/button";
-import * as i12 from "../../../router/layout/anchor/anchor.module";
-import * as i13 from "../../content/content.layout.module";
-import * as i14 from "angular-resize-event";
 export declare class DbxTwoColumnLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTwoColumnLayoutModule, [typeof i1.DbxTwoColumnComponent, typeof i2.DbxTwoColumnRightComponent, typeof i3.DbxTwoColumnColumnHeadComponent, typeof i4.DbxTwoColumnSrefDirective, typeof i5.DbxTwoColumnBackDirective, typeof i6.DbxTwoColumnFullLeftDirective, typeof i7.DbxTwoColumnContextDirective, typeof i8.DbxTwoColumnSrefShowRightDirective], [typeof i9.CommonModule, typeof i10.MatIconModule, typeof i11.MatButtonModule, typeof i12.DbxRouterAnchorModule, typeof i13.DbxContentLayoutModule, typeof i14.AngularResizeEventModule], [typeof i1.DbxTwoColumnComponent, typeof i2.DbxTwoColumnRightComponent, typeof i3.DbxTwoColumnColumnHeadComponent, typeof i4.DbxTwoColumnSrefDirective, typeof i5.DbxTwoColumnBackDirective, typeof i6.DbxTwoColumnFullLeftDirective, typeof i7.DbxTwoColumnContextDirective, typeof i8.DbxTwoColumnSrefShowRightDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTwoColumnLayoutModule, never, [typeof i1.DbxTwoColumnComponent, typeof i2.DbxTwoColumnRightComponent, typeof i3.DbxTwoColumnColumnHeadDirective, typeof i4.DbxTwoColumnSrefDirective, typeof i5.DbxTwoColumnBackDirective, typeof i6.DbxTwoColumnFullLeftDirective, typeof i7.DbxTwoColumnContextDirective, typeof i8.DbxTwoColumnSrefShowRightDirective], [typeof i1.DbxTwoColumnComponent, typeof i2.DbxTwoColumnRightComponent, typeof i3.DbxTwoColumnColumnHeadDirective, typeof i4.DbxTwoColumnSrefDirective, typeof i5.DbxTwoColumnBackDirective, typeof i6.DbxTwoColumnFullLeftDirective, typeof i7.DbxTwoColumnContextDirective, typeof i8.DbxTwoColumnSrefShowRightDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxTwoColumnLayoutModule>;
 }

package/lib/layout/column/two/two.column.right.component.d.ts

@@ -1,4 +1,3 @@
-import { AfterViewInit, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ClickableAnchor } from '@dereekb/dbx-core';
 import { TwoColumnsContextStore } from './two.column.store';
@@ -9,23 +8,22 @@ import * as i0 from "@angular/core";
  *
  * When rendered it will trigger the context to show left.
  */
-export declare class DbxTwoColumnRightComponent implements AfterViewInit, OnDestroy {
+export declare class DbxTwoColumnRightComponent {
     readonly twoColumnsContextStore: TwoColumnsContextStore;
-    full: boolean;
-    header?: Maybe<string>;
-    block?: boolean;
-    private _showBack;
-    readonly ref$: Observable<Maybe<ClickableAnchor>>;
-    readonly showBack$: Observable<boolean>;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    get showBack(): boolean;
-    set showBack(showBack: boolean);
+    readonly full: import("@angular/core").InputSignal<boolean>;
+    readonly header: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly block: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly showBack: import("@angular/core").InputSignal<boolean>;
+    readonly alternativeBackRef$: Observable<Maybe<ClickableAnchor>>;
+    readonly alternativeBackRefSignal: import("@angular/core").Signal<Maybe<ClickableAnchor>>;
     /**
      * Minimum right-side width allowed in pixels.
      */
-    set minRightWidth(minRightWidth: Maybe<number | ''>);
+    readonly minRightWidth: import("@angular/core").InputSignal<Maybe<number>>;
+    protected readonly _setMinRightWidthEffect: import("@angular/core").EffectRef;
+    readonly showBackSignal: import("@angular/core").Signal<boolean>;
+    constructor();
     backClicked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnRightComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnRightComponent, "dbx-two-column-right", never, { "full": { "alias": "full"; "required": false; }; "header": { "alias": "header"; "required": false; }; "block": { "alias": "block"; "required": false; }; "showBack": { "alias": "showBack"; "required": false; }; "minRightWidth": { "alias": "minRightWidth"; "required": false; }; }, {}, never, ["[nav]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnRightComponent, "dbx-two-column-right", never, { "full": { "alias": "full"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "showBack": { "alias": "showBack"; "required": false; "isSignal": true; }; "minRightWidth": { "alias": "minRightWidth"; "required": false; "isSignal": true; }; }, {}, never, ["[nav]", "*"], true, never>;
 }

package/lib/layout/column/two/two.column.sref.directive.d.ts

@@ -6,7 +6,8 @@ import * as i0 from "@angular/core";
  */
 export declare class DbxTwoColumnSrefDirective {
     private readonly _twoColumnsContextStore;
-    set ref(ref: Maybe<SegueRefOrSegueRefRouterLink | ''>);
+    readonly dbxTwoColumnSref: import("@angular/core").InputSignal<Maybe<SegueRefOrSegueRefRouterLink>>;
+    protected readonly _dbxTwoColumnSrefEffect: import("@angular/core").EffectRef;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnSrefDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnSrefDirective, "[dbxTwoColumnSref]", never, { "ref": { "alias": "dbxTwoColumnSref"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnSrefDirective, "[dbxTwoColumnSref]", never, { "dbxTwoColumnSref": { "alias": "dbxTwoColumnSref"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/layout/column/two/two.column.sref.showright.directive.d.ts

@@ -1,14 +1,13 @@
-import { OnInit, OnDestroy } from '@angular/core';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 /**
  * Used with a DbxTwoColumnComponent to control showing right when the current route is a child of the backRef.
  */
-export declare class DbxTwoColumnSrefShowRightDirective extends AbstractSubscriptionDirective implements OnInit, OnDestroy {
+export declare class DbxTwoColumnSrefShowRightDirective extends AbstractSubscriptionDirective {
     private readonly _twoColumnsContextStore;
     private readonly _dbxRouterService;
     readonly showRight$: import("rxjs").Observable<boolean>;
-    ngOnInit(): void;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnSrefShowRightDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnSrefShowRightDirective, "[dbxTwoColumnSrefShowRight]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnSrefShowRightDirective, "[dbxTwoColumnSrefShowRight]", never, {}, {}, never, never, true, never>;
 }

package/lib/layout/column/two/two.column.store.d.ts

@@ -7,31 +7,35 @@ export interface TwoColumnsState {
     /**
      * Whether or not to reverse the sizing.
      */
-    reverseSizing: boolean;
+    readonly reverseSizing: boolean;
     /**
      * Whether or not the right side should be shown.
      */
-    showRight: boolean;
+    readonly showRight: boolean;
+    /**
+     * Overrides showRight if not null.
+     */
+    readonly showRightOverride?: Maybe<boolean>;
     /**
      * Whether or not there is any registered right content currently.
      */
-    hasRight: boolean;
+    readonly hasRight: boolean;
     /**
      * Whether or not to allow the left to fill up the screen when no right is shown.
      */
-    fullLeft: boolean;
+    readonly fullLeft: boolean;
     /**
      * Optional ref to use with TwoColumns that use an sref for the back button.
      */
-    backRef?: Maybe<SegueRef>;
+    readonly backRef?: Maybe<SegueRef>;
     /**
      * Size of the view's total width in pixels.
      */
-    totalWidth?: Maybe<number>;
+    readonly totalWidth?: Maybe<number>;
     /**
      * Minimum right side size allowed before hiding the left content.
      */
-    minRightWidth: number;
+    readonly minRightWidth: number;
 }
 export declare const DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH = 320;
 export declare class TwoColumnsContextStore extends ComponentStore<TwoColumnsState> implements OnDestroy {
@@ -43,11 +47,11 @@ export declare class TwoColumnsContextStore extends ComponentStore<TwoColumnsSta
      */
     readonly reverseSizing$: import("rxjs").Observable<boolean>;
     /**
-     * Pipes the current state of showRight.
+     * Pipes the current state of hasRight.
      */
     readonly hasRight$: import("rxjs").Observable<boolean>;
     /**
-     * Pipes the current state of showRight.
+     * Pipes the current state of showRight and showRightOverride.
      */
     readonly currentShowRight$: import("rxjs").Observable<boolean>;
     /**
@@ -90,6 +94,10 @@ export declare class TwoColumnsContextStore extends ComponentStore<TwoColumnsSta
      * Changes the state to show right or not.
      */
     readonly setShowRight: (() => void) | ((observableOrValue: Maybe<boolean> | import("rxjs").Observable<Maybe<boolean>>) => import("rxjs").Subscription);
+    /**
+     * Changes the override state to show right or not.
+     */
+    readonly setShowRightOverride: (() => void) | ((observableOrValue: Maybe<boolean> | import("rxjs").Observable<Maybe<boolean>>) => import("rxjs").Subscription);
     /**
      * Sets the full left. If undefined is passed, no change occurs.
      */

package/lib/layout/content/_content.scss

@@ -164,19 +164,19 @@ $scroll-content-bottom-padding: 42px;
 }
 
 @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');
   $warn: map.get($color-config, 'warn');
   $background: map.get($color-config, 'background');
   $foreground: map.get($color-config, 'foreground');
-  $content-color: theming.get-color-from-palette($foreground, 'text');
-  $content-background: theming.get-color-from-palette($background, 'background');
-  $content-border-background: theming.get-color-from-palette($background, 'hover');
+  $content-color: theming.m2-get-color-from-palette($foreground, 'text');
+  $content-background: theming.m2-get-color-from-palette($background, 'background');
+  $content-border-background: theming.m2-get-color-from-palette($background, 'hover');
 
-  $primary-color: theming.get-color-from-palette($primary, 500);
-  $accent-color: theming.get-color-from-palette($accent, 500);
-  $warn-color: theming.get-color-from-palette($warn, 500);
+  $primary-color: theming.m2-get-color-from-palette($primary, 500);
+  $accent-color: theming.m2-get-color-from-palette($accent, 500);
+  $warn-color: theming.m2-get-color-from-palette($warn, 500);
 
   .dbx-content-pit {
     background: $content-border-background;
@@ -221,9 +221,9 @@ $scroll-content-bottom-padding: 42px;
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-content') {
-    $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/layout/content/content.border.directive.d.ts

@@ -4,7 +4,8 @@ import * as i0 from "@angular/core";
  * Section used to wrap content in a border with internal padding.
  */
 export declare class DbxContentBorderDirective {
-    color: DbxThemeColor;
+    readonly color: import("@angular/core").InputSignal<DbxThemeColor>;
+    readonly classConfig: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentBorderDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentBorderDirective, "dbx-content-border,[dbxContentBorder]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentBorderDirective, "dbx-content-border,[dbxContentBorder]", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/layout/content/content.box.directive.d.ts

@@ -3,8 +3,8 @@ import * as i0 from "@angular/core";
  * Component used to wrap content in a box with optionally elevation.
  */
 export declare class DbxContentBoxDirective {
-    elevate: boolean;
-    wide: boolean;
+    readonly elevate: import("@angular/core").InputSignal<boolean>;
+    readonly wide: import("@angular/core").InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentBoxDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentBoxDirective, "dbx-content-box, [dbxContentBox]", never, { "elevate": { "alias": "elevate"; "required": false; }; "wide": { "alias": "wide"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentBoxDirective, "dbx-content-box, [dbxContentBox]", never, { "elevate": { "alias": "elevate"; "required": false; "isSignal": true; }; "wide": { "alias": "wide"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }