@dereekb/dbx-web 11.1.7 → 12.0.0

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

@@ -5,9 +5,10 @@ export type DbxContentContainerWidth = 'small' | 'medium' | 'large' | 'wide' | '
  * Component that limits the max-width of the content.
  */
 export declare class DbxContentContainerDirective {
-    grow: DbxContentContainerWidth;
-    padding: DbxContentContainerPadding;
-    topPadding: DbxContentContainerPadding;
+    readonly grow: import("@angular/core").InputSignal<DbxContentContainerWidth>;
+    readonly padding: import("@angular/core").InputSignal<DbxContentContainerPadding>;
+    readonly topPadding: import("@angular/core").InputSignal<DbxContentContainerPadding>;
+    readonly classConfig: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentContainerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentContainerDirective, "dbx-content-container,[dbxContentContainer],.dbx-content-container", never, { "grow": { "alias": "grow"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "topPadding": { "alias": "topPadding"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentContainerDirective, "dbx-content-container,[dbxContentContainer],.dbx-content-container", never, { "grow": { "alias": "grow"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "topPadding": { "alias": "topPadding"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

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

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

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
  * Section used to elevate content in a pre-configured manner.
  */
 export declare class DbxContentElevateDirective {
-    elevate: boolean;
+    readonly elevate: import("@angular/core").InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentElevateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentElevateDirective, "dbx-content-elevate,[dbxContentElevate]", never, { "elevate": { "alias": "elevate"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentElevateDirective, "dbx-content-elevate,[dbxContentElevate]", never, { "elevate": { "alias": "elevate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -6,12 +6,11 @@ import * as i4 from "./content.elevate.directive";
 import * as i5 from "./content.box.directive";
 import * as i6 from "./content.page.directive";
 import * as i7 from "./content.pit.directive";
-import * as i8 from "@angular/common";
 /**
  * Module for container-type components.
  */
 export declare class DbxContentLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxContentLayoutModule, [typeof i1.DbxContentDirective, typeof i2.DbxContentContainerDirective, typeof i3.DbxContentBorderDirective, typeof i4.DbxContentElevateDirective, typeof i5.DbxContentBoxDirective, typeof i6.DbxContentPageDirective, typeof i7.DbxContentPitDirective], [typeof i8.CommonModule], [typeof i1.DbxContentDirective, typeof i2.DbxContentContainerDirective, typeof i3.DbxContentBorderDirective, typeof i4.DbxContentElevateDirective, typeof i5.DbxContentBoxDirective, typeof i6.DbxContentPageDirective, typeof i7.DbxContentPitDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxContentLayoutModule, never, [typeof i1.DbxContentDirective, typeof i2.DbxContentContainerDirective, typeof i3.DbxContentBorderDirective, typeof i4.DbxContentElevateDirective, typeof i5.DbxContentBoxDirective, typeof i6.DbxContentPageDirective, typeof i7.DbxContentPitDirective], [typeof i1.DbxContentDirective, typeof i2.DbxContentContainerDirective, typeof i3.DbxContentBorderDirective, typeof i4.DbxContentElevateDirective, typeof i5.DbxContentBoxDirective, typeof i6.DbxContentPageDirective, typeof i7.DbxContentPitDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxContentLayoutModule>;
 }

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

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

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

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
  * Component used to wrap content in a pit with a label.
  */
 export declare class DbxContentPitDirective {
-    scrollable?: Maybe<boolean>;
+    readonly scrollable: import("@angular/core").InputSignal<Maybe<boolean>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentPitDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentPitDirective, "dbx-content-pit, [dbxContentPit]", never, { "scrollable": { "alias": "scrollable"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentPitDirective, "dbx-content-pit, [dbxContentPit]", never, { "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/layout/flag/_flag.scss

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

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
  * Toolbar-like component that wraps content. Generally sits at the top of a page.
  */
 export declare class DbxFlagComponent {
-    color: ThemePalette;
+    readonly color: import("@angular/core").InputSignal<ThemePalette>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlagComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFlagComponent, "dbx-flag", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFlagComponent, "dbx-flag", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -1,13 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./flag.component";
 import * as i2 from "./flag.prompt.component";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/material/toolbar";
-/**
- * Module for block components.
- */
 export declare class DbxFlagLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlagLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFlagLayoutModule, [typeof i1.DbxFlagComponent, typeof i2.DbxFlagPromptComponent], [typeof i3.CommonModule, typeof i4.MatToolbarModule], [typeof i1.DbxFlagComponent, typeof i2.DbxFlagPromptComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFlagLayoutModule, never, [typeof i1.DbxFlagComponent, typeof i2.DbxFlagPromptComponent], [typeof i1.DbxFlagComponent, typeof i2.DbxFlagPromptComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFlagLayoutModule>;
 }

package/lib/layout/flag/flag.prompt.component.d.ts

@@ -1,11 +1,12 @@
 import { ThemePalette } from '@angular/material/core';
+import { Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 /**
  * Pre-configured dbx-flag prompt to do something.
  */
 export declare class DbxFlagPromptComponent {
-    color: ThemePalette;
-    text?: string;
+    readonly color: import("@angular/core").InputSignal<ThemePalette>;
+    readonly text: import("@angular/core").InputSignal<Maybe<string>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlagPromptComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFlagPromptComponent, "dbx-flag-prompt", never, { "color": { "alias": "color"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFlagPromptComponent, "dbx-flag-prompt", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/lib/layout/flex/_flex.scss

@@ -66,9 +66,9 @@ $dbx-flex-group-columns-count: 6;
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-flex') {
-    $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/flex/flex.group.directive.d.ts

@@ -1,25 +1,18 @@
 import { ScreenMediaWidthType } from '../../screen/screen';
-import { ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { type Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 /**
  * Used to declare a dbxFlexGroup.
  */
-export declare class DbxFlexGroupDirective extends AbstractSubscriptionDirective implements OnInit, OnDestroy {
+export declare class DbxFlexGroupDirective extends AbstractSubscriptionDirective {
     private readonly _dbxScreenMediaService;
-    readonly cdRef: ChangeDetectorRef;
-    breakToColumn: boolean;
-    content: boolean;
-    relative: boolean;
-    private _small;
-    private readonly _breakpoint;
+    readonly content: import("@angular/core").InputSignal<boolean>;
+    readonly breakToColumn: import("@angular/core").InputSignal<boolean>;
+    readonly relative: import("@angular/core").InputSignal<boolean>;
+    readonly breakpoint: import("@angular/core").InputSignalWithTransform<ScreenMediaWidthType, Maybe<ScreenMediaWidthType>>;
     readonly isSmallScreen$: import("rxjs").Observable<boolean>;
-    get small(): boolean;
-    constructor();
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    set breakpoint(breakpoint: Maybe<ScreenMediaWidthType>);
+    readonly smallSignal: import("@angular/core").Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlexGroupDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFlexGroupDirective, "[dbxFlexGroup]", never, { "breakToColumn": { "alias": "breakToColumn"; "required": false; }; "content": { "alias": "content"; "required": false; }; "relative": { "alias": "relative"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFlexGroupDirective, "[dbxFlexGroup]", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "breakToColumn": { "alias": "breakToColumn"; "required": false; "isSignal": true; }; "relative": { "alias": "relative"; "required": false; "isSignal": true; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1,9 +1,11 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./flex.group.directive";
 import * as i2 from "./flex.size.directive";
-import * as i3 from "@angular/common";
+/**
+ * @deprecated Import DbxFlexGroupDirective and DbxFlexSizeDirective instead.
+ */
 export declare class DbxFlexLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlexLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFlexLayoutModule, [typeof i1.DbxFlexGroupDirective, typeof i2.DbxFlexSizeDirective], [typeof i3.CommonModule], [typeof i1.DbxFlexGroupDirective, typeof i2.DbxFlexSizeDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFlexLayoutModule, never, [typeof i1.DbxFlexGroupDirective, typeof i2.DbxFlexSizeDirective], [typeof i1.DbxFlexGroupDirective, typeof i2.DbxFlexSizeDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFlexLayoutModule>;
 }

package/lib/layout/flex/flex.size.directive.d.ts

@@ -4,7 +4,8 @@ import * as i0 from "@angular/core";
  * Applies the proper dbx-flex size class based on the input.
  */
 export declare class DbxFlexSizeDirective {
-    size: DbxFlexSize;
+    readonly dbxFlexSize: import("@angular/core").InputSignal<DbxFlexSize>;
+    readonly cssClassSignal: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlexSizeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFlexSizeDirective, "[dbxFlexSize]", never, { "size": { "alias": "dbxFlexSize"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFlexSizeDirective, "[dbxFlexSize]", never, { "dbxFlexSize": { "alias": "dbxFlexSize"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/layout/item/_item.scss

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

@@ -1,2 +1 @@
 export * from './item.icon.component';
-export * from './item.layout.module';

package/lib/layout/item/item.icon.component.d.ts

@@ -4,8 +4,8 @@ import * as i0 from "@angular/core";
  * Section piece that puts an icon on the left, and arbitrary content on the right with a header.
  */
 export declare class DbxIconItemComponent {
-    icon?: Maybe<string>;
-    header?: Maybe<string>;
+    readonly icon: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly header: import("@angular/core").InputSignal<Maybe<string>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxIconItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxIconItemComponent, "dbx-icon-item", never, { "icon": { "alias": "icon"; "required": false; }; "header": { "alias": "header"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxIconItemComponent, "dbx-icon-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -7,14 +7,12 @@ import * as i5 from "./compact/compact.layout.module";
 import * as i6 from "./content/content.layout.module";
 import * as i7 from "./flag/flag.layout.module";
 import * as i8 from "./flex/flex.layout.module";
-import * as i9 from "./item/item.layout.module";
-import * as i10 from "./list/list.layout.module";
-import * as i11 from "./section/section.layout.module";
-import * as i12 from "./step/step.layout.module";
-import * as i13 from "./style/style.layout.module";
-import * as i14 from "./text/text.module";
+import * as i9 from "./list/list.layout.module";
+import * as i10 from "./section/section.layout.module";
+import * as i11 from "./style/style.layout.module";
+import * as i12 from "./text/text.module";
 export declare class DbxLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxLayoutModule, never, never, [typeof i1.DbxBarLayoutModule, typeof i2.DbxBlockLayoutModule, typeof i3.DbxCardBoxLayoutModule, typeof i4.DbxColumnLayoutModule, typeof i5.DbxCompactLayoutModule, typeof i6.DbxContentLayoutModule, typeof i7.DbxFlagLayoutModule, typeof i8.DbxFlexLayoutModule, typeof i9.DbxItemLayoutModule, typeof i10.DbxListLayoutModule, typeof i11.DbxSectionLayoutModule, typeof i12.DbxStepLayoutModule, typeof i13.DbxStyleLayoutModule, typeof i14.DbxTextModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxLayoutModule, never, never, [typeof i1.DbxBarLayoutModule, typeof i2.DbxBlockLayoutModule, typeof i3.DbxCardBoxLayoutModule, typeof i4.DbxColumnLayoutModule, typeof i5.DbxCompactLayoutModule, typeof i6.DbxContentLayoutModule, typeof i7.DbxFlagLayoutModule, typeof i8.DbxFlexLayoutModule, typeof i9.DbxListLayoutModule, typeof i10.DbxSectionLayoutModule, typeof i11.DbxStyleLayoutModule, typeof i12.DbxTextModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxLayoutModule>;
 }

package/lib/layout/list/_list.scss

@@ -40,9 +40,16 @@ $list-item-padded-min-height: 42px;
   }
 
   .dbx-list-view {
+    // --mat-list-list-item-leading-icon-start-space: 16px;
+    --mat-list-list-item-leading-icon-end-space: 8px;
+
     .mat-mdc-list-base .dbx-list-view-item.mat-mdc-list-item {
       height: 100%; // inherit height from embedded items
 
+      .mdc-list-item__content {
+        user-select: none;
+      }
+
       .mdc-list-item__content > .mat-mdc-list-item-unscoped-content.mdc-list-item__primary-text {
         white-space: normal;
 
@@ -59,6 +66,12 @@ $list-item-padded-min-height: 42px;
           min-height: 56px;
         }
       }
+
+      // Fixes:
+      &.mdc-list-item--disabled .mdc-list-item__start.mat-icon {
+        color: var(--mdc-list-list-item-disabled-leading-icon-color, var(--mat-app-on-surface));
+        opacity: var(--mdc-list-list-item-disabled-leading-icon-opacity);
+      }
     }
 
     .mat-selection-list.mat-mdc-list-base .dbx-list-view-item.mat-mdc-list-item .mat-mdc-list-item-content .mat-mdc-list-text {
@@ -145,11 +158,11 @@ $list-item-padded-min-height: 42px;
 }
 
 @mixin color($theme-config) {
-  $color-config: theming.get-color-config($theme-config);
+  $color-config: theming.m2-get-color-config($theme-config);
   $background: map.get($color-config, 'background');
   $foreground: map.get($color-config, 'foreground');
-  $cdk-background-color: theming.get-color-from-palette($background, 'background');
-  $cdk-text-color: theming.get-color-from-palette($foreground, 'text');
+  $cdk-background-color: theming.m2-get-color-from-palette($background, 'background');
+  $cdk-text-color: theming.m2-get-color-from-palette($foreground, 'text');
 
   .dbx-list-view-group-header {
     color: var(--mdc-list-list-item-label-text-color);
@@ -171,9 +184,9 @@ $list-item-padded-min-height: 42px;
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-list') {
-    $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/list/grid/index.d.ts

@@ -0,0 +1,2 @@
+export * from './list.grid.view.component';
+export * from './list.grid.view.directive';

package/lib/layout/list/{list.grid.view.component.d.ts → grid/list.grid.view.component.d.ts}

@@ -1,58 +1,50 @@
-import { OnDestroy } from '@angular/core';
-import { Observable } from 'rxjs';
-import { DbxValueListItem } from './list.view.value';
-import { AbstractDbxValueListViewDirective } from './list.view.value.directive';
+import { Signal } from '@angular/core';
+import { DbxValueListItem } from '../list.view.value';
+import { AbstractDbxValueListViewDirective } from '../list.view.value.directive';
 import { Maybe } from '@dereekb/util';
-import { DbxValueListViewContentComponent, DbxValueListViewConfig } from './list.view.value.component';
+import { DbxValueListViewContentComponent, DbxValueListViewConfig } from '../list.view.value.component';
 import * as i0 from "@angular/core";
 export interface DbxValueListGridViewConfig<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = unknown> extends DbxValueListViewConfig<T, I, V> {
     grid?: Maybe<Partial<DbxValueListGridItemViewGridSizeConfig>>;
 }
-/**
- * Renders a grid view using input configuration. Requires a parent DbxListView.
- */
-export declare class DbxValueListGridViewComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = unknown, C extends DbxValueListGridViewConfig<T, I, V> = DbxValueListGridViewConfig<T, I, V>> extends AbstractDbxValueListViewDirective<T, I, V, C> {
-    readonly grid$: Observable<Maybe<Partial<DbxValueListGridItemViewGridSizeConfig>>>;
-    readonly emitAllClicks$: Observable<boolean | undefined>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxValueListGridViewComponent<any, any, any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxValueListGridViewComponent<any, any, any, any>, "dbx-list-grid-view", never, {}, {}, never, never, false, never>;
-}
 export interface DbxValueListGridItemViewGridSizeConfig {
     /**
      * Gap size in %, px, vw, vh
      */
-    gap: string;
+    readonly gap: string;
     /**
      * Columns configuration.
      *
      * Example: repeat(auto-fill, minmax(200px, 1fr))
      */
-    columns: string;
+    readonly columns: string;
 }
 export declare const DEFAULT_LIST_GRID_SIZE_CONFIG: DbxValueListGridItemViewGridSizeConfig;
 /**
  * Optional parent directive used to control grid size.
  */
-export declare class DbxValueListGridSizeDirective implements OnDestroy {
-    private _gridSize;
-    readonly gridSize$: Observable<Maybe<Partial<DbxValueListGridItemViewGridSizeConfig>>>;
-    get gridSize(): Maybe<Partial<DbxValueListGridItemViewGridSizeConfig>>;
-    set gridSize(gridSize: Maybe<Partial<DbxValueListGridItemViewGridSizeConfig>>);
-    ngOnDestroy(): void;
+export declare class DbxValueListGridSizeDirective {
+    readonly gridSize: import("@angular/core").InputSignal<Maybe<Partial<DbxValueListGridItemViewGridSizeConfig>>>;
+    readonly gridSize$: import("rxjs").Observable<Maybe<Partial<DbxValueListGridItemViewGridSizeConfig>>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxValueListGridSizeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxValueListGridSizeDirective, "[dbxListGridSize]", never, { "gridSize": { "alias": "dbxListGridSize"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxValueListGridSizeDirective, "[dbxListGridSize]", never, { "gridSize": { "alias": "dbxListGridSize"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Content view for a DbxValueListGridView. It can be used directly in cases where the items are already configured, or want to be configured in a non-standard fashion.
  */
-export declare class DbxValueListGridViewContentComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> extends DbxValueListViewContentComponent<T, I> implements OnDestroy {
+export declare class DbxValueListGridViewContentComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>> extends DbxValueListViewContentComponent<T, I> {
     private readonly _gridSizeOverride;
-    private readonly _defaultGrid;
-    readonly grid$: Observable<DbxValueListGridItemViewGridSizeConfig>;
-    readonly gap$: Observable<string>;
-    readonly columns$: Observable<string>;
-    set grid(grid: Maybe<Partial<DbxValueListGridItemViewGridSizeConfig>>);
-    ngOnDestroy(): void;
+    readonly inputGridConfig: import("@angular/core").InputSignal<Maybe<Partial<DbxValueListGridItemViewGridSizeConfig>>>;
+    readonly gridConfigFromGridSizeSignal: Signal<Maybe<Partial<DbxValueListGridItemViewGridSizeConfig>>>;
+    readonly gridConfigSignal: Signal<DbxValueListGridItemViewGridSizeConfig>;
+    readonly trackByFunctionSignal: Signal<import("@angular/core").TrackByFunction<any> | ((index: number, item: import("../list.view.value").DbxValueListItemConfig<T, I>) => any)>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxValueListGridViewContentComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxValueListGridViewContentComponent<any, any>, "dbx-list-grid-view-content", never, { "grid": { "alias": "grid"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxValueListGridViewContentComponent<any, any>, "dbx-list-grid-view-content", never, { "inputGridConfig": { "alias": "grid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Renders a grid view using input configuration. Requires a parent DbxListView.
+ */
+export declare class DbxValueListGridViewComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = unknown, C extends DbxValueListGridViewConfig<T, I, V> = DbxValueListGridViewConfig<T, I, V>> extends AbstractDbxValueListViewDirective<T, I, V, C> {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxValueListGridViewComponent<any, any, any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxValueListGridViewComponent<any, any, any, any>, "dbx-list-grid-view", never, {}, {}, never, never, true, never>;
 }

package/lib/layout/list/grid/list.grid.view.directive.d.ts

@@ -0,0 +1,24 @@
+import { AbstractDbxListViewDirective } from '../list.view.directive';
+import { DbxValueListGridViewComponent, DbxValueListGridViewConfig } from './list.grid.view.component';
+import { DbxValueAsListItem } from '../list.view.value';
+import * as i0 from "@angular/core";
+import * as i1 from "./list.grid.view.component";
+export declare const DEFAULT_DBX_LIST_GRID_VIEW_DIRECTIVE_TEMPLATE = "<dbx-list-grid-view [config]=\"config\"></dbx-list-grid-view>";
+export declare const dbxListGridViewDirectiveImportsAndExports: (typeof DbxValueListGridViewComponent)[];
+export declare class DbxListGridViewDirectiveImportsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxListGridViewDirectiveImportsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxListGridViewDirectiveImportsModule, never, [typeof i1.DbxValueListGridViewComponent], [typeof i1.DbxValueListGridViewComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxListGridViewDirectiveImportsModule>;
+}
+/**
+ * Abstract DbxListGridView implementation.
+ */
+export declare abstract class AbstractDbxListGridViewDirective<T> extends AbstractDbxListViewDirective<T> {
+    abstract readonly config: DbxValueListGridViewConfig<DbxValueAsListItem<T>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxListGridViewDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxListGridViewDirective<any>, never, never, {}, {}, never, never, false, never>;
+}
+/**
+ * @deprecated Use DEFAULT_DBX_LIST_GRID_VIEW_DIRECTIVE_TEMPLATE instead.
+ */
+export declare const DEFAULT_DBX_VALUE_LIST_GRID_DIRECTIVE_TEMPLATE = "<dbx-list-grid-view [config]=\"config\"></dbx-list-grid-view>";

package/lib/layout/list/group/index.d.ts

@@ -0,0 +1,3 @@
+export * from './list.view.value.group';
+export * from './list.view.value.group.title';
+export * from './list.view.value.group.title.directive';

package/lib/layout/list/{list.view.value.group.d.ts → group/list.view.value.group.d.ts}

@@ -1,5 +1,5 @@
 import { CssClassesArray, Maybe, UniqueModel } from '@dereekb/util';
-import { DbxValueListItem, DbxValueListItemConfig } from './list.view.value';
+import { DbxValueListItem, DbxValueListItemConfig } from '../list.view.value';
 import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { Provider, Type } from '@angular/core';
 import { ObservableOrValue } from '@dereekb/rxjs';
@@ -30,7 +30,7 @@ export interface DbxValueListItemGroup<G, T, I extends DbxValueListItem<T>, H =
  * Function that generates an array of DbxValueListItemGroup values from a list of items.
  */
 export type DbxValueListViewGroupValuesFunction<G, T, I extends DbxValueListItem<T>, H = unknown, F = unknown> = (items: DbxValueListItemConfig<T, I>[]) => ObservableOrValue<DbxValueListItemGroup<G, T, I, H, F>[]>;
-export declare const defaultDbxValueListViewGroupValuesFunction: <T, I extends DbxValueListItem<T, unknown>>(items: DbxValueListItemConfig<T, I>[]) => DbxValueListItemGroup<unknown, T, I, unknown, unknown>[];
+export declare const defaultDbxValueListViewGroupValuesFunction: <T, I extends DbxValueListItem<T>>(items: DbxValueListItemConfig<T, I>[]) => DbxValueListItemGroup<unknown, T, I, unknown, unknown>[];
 /**
  * Interface for a view that renders the items of a DbxList.
  */

package/lib/layout/list/{list.view.value.group.title.d.ts → group/list.view.value.group.title.d.ts}

@@ -1,6 +1,6 @@
 import { Type } from '@angular/core';
 import { PrimativeKey, SortCompareFunction, CssClassesArray } from '@dereekb/util';
-import { DbxValueListItem, DbxValueListItemConfig } from './list.view.value';
+import { DbxValueListItem, DbxValueListItemConfig } from '../list.view.value';
 export interface DbxListTitleGroupData<O extends PrimativeKey> {
     /**
      * Data Value. Should generally be defined, but can be null if the group is a default group.

package/lib/layout/list/group/list.view.value.group.title.directive.d.ts

@@ -0,0 +1,15 @@
+import { DbxValueListItem } from '../list.view.value';
+import { DbxValueListViewGroupDelegate, DbxValueListViewGroupValuesFunction } from './list.view.value.group';
+import { Maybe, PrimativeKey } from '@dereekb/util';
+import { DbxListTitleGroupData, DbxListTitleGroupTitleDelegate } from './list.view.value.group.title';
+import * as i0 from "@angular/core";
+/**
+ * Delegate used to for grouping DbxValueListItemConfig<T, I> values.
+ */
+export declare class DbxListTitleGroupDirective<T, O extends PrimativeKey = PrimativeKey, D extends DbxListTitleGroupData<O> = DbxListTitleGroupData<O>, I extends DbxValueListItem<T> = DbxValueListItem<T>> implements DbxValueListViewGroupDelegate<D, T, I> {
+    readonly delegate: import("@angular/core").InputSignal<Maybe<DbxListTitleGroupTitleDelegate<T, O, D, I>>>;
+    private readonly _delegate$;
+    readonly groupValues: DbxValueListViewGroupValuesFunction<D, T, I, unknown, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxListTitleGroupDirective<any, any, any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxListTitleGroupDirective<any, any, any, any>, "[dbxListTitleGroup]", never, { "delegate": { "alias": "dbxListTitleGroup"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/layout/list/group/list.view.value.group.title.header.component.d.ts

@@ -0,0 +1,21 @@
+import { InjectionToken } from '@angular/core';
+import { PrimativeKey } from '@dereekb/util';
+import { DbxListTitleGroupData } from './list.view.value.group.title';
+import * as i0 from "@angular/core";
+export declare const DBX_LIST_TITLE_GROUP_DATA: InjectionToken<unknown>;
+/**
+ * Abstract DbxListTitleGroupHeaderComponent that already has the data injected.
+ */
+export declare abstract class AbstractDbxListTitleGroupHeaderComponent<O extends PrimativeKey, D extends DbxListTitleGroupData<O>> {
+    readonly data: D;
+}
+/**
+ * The default group header component.
+ */
+export declare class DbxListTitleGroupHeaderComponent<O extends PrimativeKey, D extends DbxListTitleGroupData<O>> extends AbstractDbxListTitleGroupHeaderComponent<O, D> {
+    readonly icon: string | undefined;
+    readonly title: string;
+    readonly hint: string | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxListTitleGroupHeaderComponent<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxListTitleGroupHeaderComponent<any, any>, "dbx-list-title-group-header", never, {}, {}, never, never, true, never>;
+}

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

@@ -1,23 +1,19 @@
+export * from './grid';
+export * from './meta';
+export * from './group';
+export * from './modifier';
 export * from './list.content.empty.component';
 export * from './list.component';
 export * from './list.directive';
+export * from './list.module';
 export * from './list.layout.module';
 export * from './list.track';
-export * from './list.grid.view.directive';
-export * from './list.grid.view.component';
 export * from './list.view.directive';
-export * from './list.view.meta.icon.component';
-export * from './list.view.value.group';
-export * from './list.view.value.group.title';
-export * from './list.view.value.group.title.directive';
 export * from './list.view.selection.directive';
 export * from './list.view.value.component';
 export * from './list.view.value.directive';
 export * from './list.view.value.item.directive';
 export * from './list.view.value.modifier';
-export * from './list.view.value.modifier.directive';
-export * from './list.view.value.modifier.ripple.directive';
-export * from './list.view.value.modifier.selection.directive';
 export * from './list.view.value.selection.component';
 export * from './list.view.value';
 export * from './list.view';