@dereekb/dbx-web 11.1.7 → 12.0.0

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

@@ -1,4 +1,51 @@
-import { CssClass, type Maybe } from '@dereekb/util';
+import { CharacterPrefixSuffixCleanString, CssClass, DashPrefixString, type Maybe } from '@dereekb/util';
+/**
+ * An kebab-case style name that uniquely identifies a styling for an app.
+ *
+ * Examples: 'doc-app'
+ */
+export type DbxStyleName = string;
+/**
+ * A suffix that can be added to a style class to differentiate a separate mode.
+ *
+ * Dark mode is an example, with the suffix 'dark' or '-dark'. The suffix does not have to
+ */
+export type DbxStyleClassSuffix = DbxStyleClassCleanSuffix | DbxStyleClassDashSuffix;
+/**
+ * A DbxStyleClassSuffix that does not start with a dash.
+ *
+ * Dark mode is an example, with the suffix 'dark'.
+ */
+export type DbxStyleClassCleanSuffix = CharacterPrefixSuffixCleanString;
+/**
+ * A DbxStyleClassSuffix that starts with a dash.
+ *
+ * Dark mode is an example, with the suffix '-dark'.
+ */
+export type DbxStyleClassDashSuffix = DashPrefixString;
+export declare const dbxStyleClassCleanSuffix: {
+    <T extends string>(input: T | `-${T}` | `${T}`): T;
+    (input: string): string;
+};
+/**
+ * A style class that is a combination of a style name and a suffix.
+ *
+ * Examples:
+ * - 'doc-app': the default style of an app
+ * - 'doc-app-dark': the dark mode style of an app
+ */
+export type DbxStyleClass = string | `${DbxStyleName}${DbxStyleClassSuffix}`;
+export declare const DBX_DARK_STYLE_CLASS_SUFFIX: DbxStyleClassSuffix;
+export interface DbxStyleConfig {
+    /**
+     * Root style class name.
+     */
+    readonly style: DbxStyleClass;
+    /**
+     * Set of all allowed DbxStyleClassSuffixes for the DbxStyleClass in the config, if applicable.
+     */
+    readonly suffixes?: Set<DbxStyleClassSuffix>;
+}
 export type DbxThemeColorMain = 'primary' | 'accent' | 'warn';
 export type DbxThemeColorExtra = 'notice' | 'ok' | 'success' | 'grey';
 export type DbxThemeColorExtraSecondary = 'background' | 'disabled';

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

@@ -1,14 +1,14 @@
+import { OnInit } from '@angular/core';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 /**
  * Used to retrieve the current app styling from the DbxStyleService.
  */
-export declare class DbxStyleDirective extends AbstractSubscriptionDirective {
+export declare class DbxStyleDirective extends AbstractSubscriptionDirective implements OnInit {
     private readonly _styleService;
-    private readonly _cdRef;
-    cssClass: string;
-    constructor();
+    readonly styleClassNameSignal: import("@angular/core").WritableSignal<Maybe<string>>;
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxStyleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxStyleDirective, "dbx-style, [dbxStyle], .dbx-style", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxStyleDirective, "dbx-style, [dbxStyle], .dbx-style", never, {}, {}, never, never, true, never>;
 }

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

@@ -4,9 +4,8 @@ import * as i2 from "./spacer.directive";
 import * as i3 from "./style.directive";
 import * as i4 from "./style.set.directive";
 import * as i5 from "./style.body.directive";
-import * as i6 from "@angular/common";
 export declare class DbxStyleLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxStyleLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxStyleLayoutModule, [typeof i1.DbxColorDirective, typeof i2.DbxSpacerDirective, typeof i3.DbxStyleDirective, typeof i4.DbxSetStyleDirective, typeof i5.DbxStyleBodyDirective], [typeof i6.CommonModule], [typeof i1.DbxColorDirective, typeof i2.DbxSpacerDirective, typeof i3.DbxStyleDirective, typeof i4.DbxSetStyleDirective, typeof i5.DbxStyleBodyDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxStyleLayoutModule, never, [typeof i1.DbxColorDirective, typeof i2.DbxSpacerDirective, typeof i3.DbxStyleDirective, typeof i4.DbxSetStyleDirective, typeof i5.DbxStyleBodyDirective], [typeof i1.DbxColorDirective, typeof i2.DbxSpacerDirective, typeof i3.DbxStyleDirective, typeof i4.DbxSetStyleDirective, typeof i5.DbxStyleBodyDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxStyleLayoutModule>;
 }

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

@@ -0,0 +1,19 @@
+import { EnvironmentProviders } from '@angular/core';
+import { DbxStyleConfig } from './style';
+/**
+ * Configuration for provideDbxStyleService().
+ */
+export interface ProvideDbxStyleServiceConfig {
+    /**
+     * Default style configuration, if applicable.
+     *
+     * If null, the DbxStyleService will not have a default style
+     */
+    readonly dbxStyleConfig: DbxStyleConfig | null;
+}
+/**
+ * Provides EnvironmentalProviders for a DbxStyleService and the default config.
+ *
+ * @returns
+ */
+export declare function provideDbxStyleService(config: ProvideDbxStyleServiceConfig): EnvironmentProviders;

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

@@ -1,34 +1,44 @@
 import { Destroyable, type Maybe } from '@dereekb/util';
+import { ObservableOrValue } from '@dereekb/rxjs';
 import { Observable } from 'rxjs';
 import { InjectionToken } from '@angular/core';
+import { DbxStyleClass, DbxStyleClassCleanSuffix, DbxStyleClassSuffix, DbxStyleConfig } from './style';
 import * as i0 from "@angular/core";
 export declare const DBX_STYLE_DEFAULT_CONFIG_TOKEN: InjectionToken<unknown>;
-export interface DbxStyleConfig {
-    /**
-     * Root style name.
-     */
-    style: string;
-    /**
-     * Suffixes available to this configuration.
-     */
-    suffixes?: Set<string>;
-}
 /**
  * Used for managing styles within an app.
  */
 export declare class DbxStyleService implements Destroyable {
     private readonly _defaultConfig;
     private readonly _config;
-    private readonly _suffix;
+    private readonly _styleClassSuffix;
     readonly config$: Observable<DbxStyleConfig>;
-    readonly suffix$: Observable<Maybe<string>>;
-    readonly style$: Observable<string>;
-    get suffix(): Maybe<string>;
-    set suffix(suffix: Maybe<string>);
-    getStyleWithConfig(configObs: Observable<DbxStyleConfig>): Observable<string>;
-    toggleDarkSuffix(dark?: Maybe<boolean>): void;
+    readonly styleClassSuffix$: Observable<Maybe<string>>;
+    readonly styleClassName$: Observable<string>;
+    /**
+     * Returns the style class given the input configuration.
+     *
+     * @param configObs Observable containing the configuration to use.
+     * @returns DbxStyleClass
+     */
+    getStyleClassWithConfig(configObs: Observable<DbxStyleConfig>): Observable<DbxStyleClass>;
+    /**
+     * Toggles the dark suffix on/off for the service.
+     *
+     * @param toggle Whether to toggle the suffix on or off
+     */
+    toggleDarkSuffix(toggle?: Maybe<boolean>): void;
+    /**
+     * Toggles the arbitrary suffix on/off for the service.
+     *
+     * @param suffix The suffix to toggle
+     * @param toggle Whether to toggle the suffix on or off
+     */
+    toggleSuffix(suffix: DbxStyleClassSuffix, toggle?: Maybe<boolean>): void;
+    get currentStyleClassSuffix(): Maybe<DbxStyleClassCleanSuffix>;
+    setStyleClassSuffix(suffix: Maybe<DbxStyleClassSuffix>): void;
     setDefaultConfig(defaultConfig: DbxStyleConfig): void;
-    setConfig(config: Observable<DbxStyleConfig>): void;
+    setConfig(config: ObservableOrValue<DbxStyleConfig>): void;
     destroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxStyleService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DbxStyleService>;

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

@@ -1,8 +1,8 @@
+import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { type Maybe } from '@dereekb/util';
 import { Observable } from 'rxjs';
-import { OnDestroy, ChangeDetectorRef, OnInit } from '@angular/core';
-import { DbxStyleConfig, DbxStyleService } from './style.service';
-import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+import { OnDestroy, OnInit } from '@angular/core';
+import { DbxStyleConfig, DbxStyleClass } from './style';
 import * as i0 from "@angular/core";
 /**
  * Used to denote which app style to use for all children below this.
@@ -10,22 +10,24 @@ import * as i0 from "@angular/core";
  * Will update the parent DbxStyleService.
  */
 export declare class DbxSetStyleDirective extends AbstractSubscriptionDirective implements OnDestroy, OnInit {
-    private readonly _suffixes;
-    private readonly _style;
-    readonly styleService: DbxStyleService;
-    readonly cdRef: ChangeDetectorRef;
+    private readonly _styleService;
+    /**
+     * The input DbxStyleName to style the host element with.
+     */
+    readonly dbxSetStyle: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * The input suffixes to allow to be applied to the
+     */
+    readonly suffixes: import("@angular/core").InputSignal<Maybe<string>>;
+    /**
+     * The output style class to apply to the host element.
+     */
+    readonly outputStyleClassSignal: import("@angular/core").WritableSignal<string>;
     readonly style$: Observable<string>;
     readonly suffixes$: Observable<Set<string>>;
     readonly config$: Observable<DbxStyleConfig>;
-    readonly outputStyle$: Observable<string>;
-    outputStyle: string;
-    constructor();
+    readonly styleClass$: Observable<DbxStyleClass>;
     ngOnInit(): void;
-    ngOnDestroy(): void;
-    get style(): string;
-    set style(style: string);
-    get suffixes(): Maybe<string>;
-    set suffixes(suffixes: Maybe<string>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSetStyleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxSetStyleDirective, "[dbxSetStyle]", never, { "style": { "alias": "dbxSetStyle"; "required": false; }; "suffixes": { "alias": "suffixes"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxSetStyleDirective, "[dbxSetStyle]", never, { "dbxSetStyle": { "alias": "dbxSetStyle"; "required": false; "isSignal": true; }; "suffixes": { "alias": "suffixes"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/layout/text/_text.scss

@@ -174,14 +174,14 @@ $dbx-detail-block-content-offset: 30px;
 }
 
 @mixin color($theme-config) {
-  $color-config: theming.get-color-config($theme-config);
+  $color-config: theming.m2-get-color-config($theme-config);
   $accent: map.get($color-config, 'accent');
   $warn: map.get($color-config, 'warn');
   $background: map.get($color-config, 'background');
   $foreground: map.get($color-config, 'foreground');
 
-  $text-color: theming.get-color-from-palette($foreground, 'text');
-  $border-color: theming.get-color-from-palette($background, 'background');
+  $text-color: theming.m2-get-color-from-palette($foreground, 'text');
+  $border-color: theming.m2-get-color-from-palette($background, 'background');
   $outlined-text-color: transparentize($border-color, 0.6);
 
   $is-dark: map.get($theme-config, is-dark);
@@ -222,12 +222,12 @@ $dbx-detail-block-content-offset: 30px;
 }
 
 @mixin typography($theme-config-or-typography-config) {
-  $typography-config: theming.get-typography-config($theme-config-or-typography-config);
+  $typography-config: theming.m2-get-typography-config($theme-config-or-typography-config);
 
   .dbx-label,
   .dbx-sublabel,
   .dbx-chip-sublabel {
-    font-size: theming.font-size($typography-config, 'caption');
+    font-size: theming.m2-font-size($typography-config, 'caption');
   }
 
   .dbx-chip-sublabel {
@@ -237,9 +237,9 @@ $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);
+    $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/text/address.component.d.ts

@@ -1,7 +1,7 @@
 import { Maybe, UnitedStatesAddressWithContact } from '@dereekb/util';
 import * as i0 from "@angular/core";
 export declare class DbxUnitedStatesAddressComponent {
-    address: Maybe<Partial<UnitedStatesAddressWithContact>>;
+    address?: Maybe<Partial<UnitedStatesAddressWithContact>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxUnitedStatesAddressComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxUnitedStatesAddressComponent, "dbx-us-address", never, { "address": { "alias": "address"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxUnitedStatesAddressComponent, "dbx-us-address", never, { "address": { "alias": "address"; "required": false; }; }, {}, never, never, true, 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": { "alias": "icon"; "required": false; }; "header": { "alias": "header"; "required": false; }; }, {}, never, ["[header]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDetailBlockComponent, "dbx-detail-block", never, { "icon": { "alias": "icon"; "required": false; }; "header": { "alias": "header"; "required": false; }; }, {}, never, ["[header]", "*"], true, 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": { "alias": "icon"; "required": false; }; "header": { "alias": "header"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDetailBlockHeaderComponent, "dbx-detail-block-header", never, { "icon": { "alias": "icon"; "required": false; }; "header": { "alias": "header"; "required": false; }; }, {}, never, ["*"], true, 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, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxIconSpacerDirective, "dbx-icon-spacer,[dbxIconSpacer]", never, {}, {}, never, never, true, 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": { "alias": "header"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLabelBlockComponent, "dbx-label-block", never, { "header": { "alias": "header"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -6,12 +6,13 @@ import * as i0 from "@angular/core";
  */
 export declare class DbxLinkifyComponent implements OnDestroy {
     private readonly sanitizer;
-    private _text;
+    private readonly _text;
     readonly linkifiedText$: import("rxjs").Observable<string | undefined>;
     readonly linkifiedBody$: import("rxjs").Observable<import("@angular/platform-browser").SafeHtml | undefined>;
+    readonly linkifiedBodySignal: import("@angular/core").Signal<import("@angular/platform-browser").SafeHtml | undefined>;
     ngOnDestroy(): void;
     get text(): Maybe<string>;
     set text(text: Maybe<string>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxLinkifyComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLinkifyComponent, "dbx-linkify", never, { "text": { "alias": "text"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLinkifyComponent, "dbx-linkify", never, { "text": { "alias": "text"; "required": false; }; }, {}, never, never, true, 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": { "alias": "small"; "required": false; }; "block": { "alias": "block"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxChipDirective, "dbx-chip", never, { "small": { "alias": "small"; "required": false; }; "block": { "alias": "block"; "required": false; }; }, {}, never, never, true, never>;
 }

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

@@ -8,9 +8,8 @@ export interface TextChip<T = unknown> {
     data?: T;
 }
 export declare class DbxTextChipsComponent<T = unknown> {
-    defaultSelection?: boolean;
-    chips?: Maybe<TextChip<T>[]>;
-    trackChipByText(index: number, chip: TextChip<T>): string;
+    readonly defaultSelection: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly chips: import("@angular/core").InputSignal<Maybe<TextChip<T>[]>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTextChipsComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTextChipsComponent<any>, "dbx-text-chips", never, { "defaultSelection": { "alias": "defaultSelection"; "required": false; }; "chips": { "alias": "chips"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTextChipsComponent<any>, "dbx-text-chips", never, { "defaultSelection": { "alias": "defaultSelection"; "required": false; "isSignal": true; }; "chips": { "alias": "chips"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -7,12 +7,8 @@ import * as i5 from "./label.block.component";
 import * as i6 from "./linkify.component";
 import * as i7 from "./text.chips.component";
 import * as i8 from "./icon.spacer.component";
-import * as i9 from "@angular/common";
-import * as i10 from "@angular/material/chips";
-import * as i11 from "@angular/material/tooltip";
-import * as i12 from "@angular/material/icon";
 export declare class DbxTextModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTextModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTextModule, [typeof i1.DbxUnitedStatesAddressComponent, typeof i2.DbxChipDirective, typeof i3.DbxDetailBlockComponent, typeof i4.DbxDetailBlockHeaderComponent, typeof i5.DbxLabelBlockComponent, typeof i6.DbxLinkifyComponent, typeof i7.DbxTextChipsComponent, typeof i8.DbxIconSpacerDirective], [typeof i9.CommonModule, typeof i10.MatChipsModule, typeof i11.MatTooltipModule, typeof i12.MatIconModule], [typeof i1.DbxUnitedStatesAddressComponent, typeof i2.DbxChipDirective, typeof i3.DbxDetailBlockComponent, typeof i4.DbxDetailBlockHeaderComponent, typeof i5.DbxLabelBlockComponent, typeof i6.DbxLinkifyComponent, typeof i7.DbxTextChipsComponent, typeof i8.DbxIconSpacerDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTextModule, never, [typeof i1.DbxUnitedStatesAddressComponent, typeof i2.DbxChipDirective, typeof i3.DbxDetailBlockComponent, typeof i4.DbxDetailBlockHeaderComponent, typeof i5.DbxLabelBlockComponent, typeof i6.DbxLinkifyComponent, typeof i7.DbxTextChipsComponent, typeof i8.DbxIconSpacerDirective], [typeof i1.DbxUnitedStatesAddressComponent, typeof i2.DbxChipDirective, typeof i3.DbxDetailBlockComponent, typeof i4.DbxDetailBlockHeaderComponent, typeof i5.DbxLabelBlockComponent, typeof i6.DbxLinkifyComponent, typeof i7.DbxTextChipsComponent, typeof i8.DbxIconSpacerDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxTextModule>;
 }

package/lib/loading/_loading.scss

@@ -33,9 +33,9 @@ $linear-line-height: 4px;
 
 @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);
+    $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/loading/basic-loading.component.d.ts

@@ -1,46 +1,27 @@
-import { OnDestroy, ElementRef } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
-import { ProgressBarMode } from '@angular/material/progress-bar';
+import { ElementRef } from '@angular/core';
 import { ErrorInput, type Maybe } from '@dereekb/util';
-import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
-import { DbxThemeColor } from '../layout/style/style';
 import * as i0 from "@angular/core";
 /**
  * DbxBasicLoadingComponent loading state.
  */
-export declare enum LoadingComponentState {
-    NONE = -1,
-    LOADING = 0,
-    CONTENT = 1,
-    ERROR = 2
-}
+export type LoadingComponentState = 'none' | 'loading' | 'content' | 'error';
 /**
  * Basic loading component.
  */
-export declare class DbxBasicLoadingComponent implements OnDestroy {
-    private _loading;
-    private _show;
-    private _error;
-    private _customErrorContent;
-    private _customLoadingContent;
-    readonly state$: import("rxjs").Observable<LoadingComponentState>;
-    readonly error$: import("rxjs").Observable<Maybe<ErrorInput>>;
-    readonly hasNoCustomError$: import("rxjs").Observable<boolean>;
-    readonly hasNoCustomLoading$: import("rxjs").Observable<boolean>;
-    diameter?: Maybe<number>;
-    mode: ProgressBarMode | ProgressSpinnerMode;
-    color: ThemePalette | DbxThemeColor;
-    text?: Maybe<string>;
-    linear: Maybe<boolean>;
-    ngOnDestroy(): void;
-    get show(): boolean;
-    set show(show: Maybe<boolean>);
-    get loading(): Maybe<boolean>;
-    set loading(loading: Maybe<boolean>);
-    get error(): Maybe<ErrorInput>;
-    set error(error: Maybe<ErrorInput>);
-    set customErrorContent(customErrorContent: Maybe<ElementRef>);
-    set customLoadingContent(customLoadingContent: Maybe<ElementRef>);
+export declare class DbxBasicLoadingComponent {
+    readonly customError: import("@angular/core").Signal<Maybe<ElementRef<any>>>;
+    readonly customLoading: import("@angular/core").Signal<Maybe<ElementRef<any>>>;
+    readonly diameter: import("@angular/core").InputSignal<Maybe<number>>;
+    readonly mode: import("@angular/core").InputSignal<"determinate" | "indeterminate" | "buffer" | "query">;
+    readonly color: import("@angular/core").InputSignal<"primary" | "accent" | "warn" | "notice" | "ok" | "success" | "grey" | "background" | "disabled" | undefined>;
+    readonly text: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly linear: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly show: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly loading: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly error: import("@angular/core").InputSignal<Maybe<ErrorInput>>;
+    readonly stateSignal: import("@angular/core").Signal<LoadingComponentState>;
+    readonly hasNoCustomErrorSignal: import("@angular/core").Signal<boolean>;
+    readonly hasNoCustomLoadingSignal: import("@angular/core").Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxBasicLoadingComponent, never>;
-    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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxBasicLoadingComponent, "dbx-basic-loading", never, { "diameter": { "alias": "diameter"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "show": { "alias": "show"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[loading]", "[error]", "[errorAction]"], true, never>;
 }

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

@@ -1,25 +1,23 @@
-import { ThemePalette } from '@angular/material/core';
 import { ProgressBarMode } from '@angular/material/progress-bar';
 import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
 import { type Maybe } from '@dereekb/util';
-import { DbxThemeColor } from '../layout/style/style';
 import * as i0 from "@angular/core";
 export declare const DEFAULT_LOADING_PROGRESS_DIAMETER = 96;
 /**
  * Basic loading progress component.
  */
 export declare class DbxLoadingProgressComponent {
-    private _diameter;
-    text?: Maybe<string>;
-    linear?: Maybe<boolean>;
-    mode: ProgressBarMode | ProgressSpinnerMode;
-    color: ThemePalette | DbxThemeColor;
-    value?: number;
-    bufferValue: number;
-    get diameter(): number;
-    set diameter(diameter: Maybe<number>);
-    get bmode(): ProgressBarMode;
-    get smode(): ProgressSpinnerMode;
+    readonly defaultDiameter = 96;
+    readonly diameter: import("@angular/core").InputSignal<Maybe<number>>;
+    readonly text: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly linear: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly mode: import("@angular/core").InputSignal<"determinate" | "indeterminate" | "buffer" | "query">;
+    readonly color: import("@angular/core").InputSignal<"primary" | "accent" | "warn" | "notice" | "ok" | "success" | "grey" | "background" | "disabled" | undefined>;
+    readonly value: import("@angular/core").InputSignal<Maybe<number>>;
+    readonly bufferValue: import("@angular/core").InputSignal<Maybe<number>>;
+    readonly bmode: import("@angular/core").Signal<ProgressBarMode>;
+    readonly smode: import("@angular/core").Signal<ProgressSpinnerMode>;
+    readonly diameterSignal: import("@angular/core").Signal<number>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxLoadingProgressComponent, never>;
-    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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLoadingProgressComponent, "dbx-loading-progress", never, { "diameter": { "alias": "diameter"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "bufferValue": { "alias": "bufferValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1,6 +1,5 @@
 import { DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
 import { OnInit, OnDestroy } from '@angular/core';
-import { LoadingStateContextInstance } from '@dereekb/rxjs';
 import { DbxLoadingComponent } from './loading.component';
 import * as i0 from "@angular/core";
 /**
@@ -9,10 +8,9 @@ import * as i0 from "@angular/core";
 export declare class DbxActionLoadingContextDirective implements OnInit, OnDestroy {
     readonly loadingComponent: DbxLoadingComponent;
     readonly source: DbxActionContextStoreSourceInstance<any, any>;
-    private _context;
-    get context(): LoadingStateContextInstance<unknown, import("@dereekb/rxjs").LoadingState<any>>;
+    private readonly _context;
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionLoadingContextDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionLoadingContextDirective, "[dbxActionLoadingContext]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionLoadingContextDirective, "[dbxActionLoadingContext]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,43 +1,45 @@
 import { Observable } from 'rxjs';
-import { OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
+import { Signal } from '@angular/core';
 import { ProgressBarMode } from '@angular/material/progress-bar';
-import { LoadingContext } from '@dereekb/rxjs';
+import { LoadingContext, LoadingContextEvent, MaybeObservableOrValue } from '@dereekb/rxjs';
 import { ErrorInput, type Maybe } from '@dereekb/util';
-import { DbxThemeColor } from '../layout/style/style';
 import * as i0 from "@angular/core";
+/**
+ * State of a DbxLoadingComponent.
+ */
 export interface DbxLoadingComponentState {
-    loading: boolean;
-    error: Maybe<ErrorInput>;
+    readonly loading: boolean;
+    readonly error: Maybe<ErrorInput>;
 }
 /**
  * Loading View component that provides content sections for loading, error, and an error action.
  */
-export declare class DbxLoadingComponent implements OnDestroy {
-    readonly cdRef: ChangeDetectorRef;
-    private _context;
-    private _inputLoading;
-    private _inputError;
-    readonly state$: Observable<DbxLoadingComponentState>;
-    readonly loading$: Observable<boolean>;
-    readonly error$: Observable<Maybe<ErrorInput>>;
-    show?: Maybe<boolean>;
-    text?: Maybe<string>;
-    mode: ProgressBarMode;
-    color: ThemePalette | DbxThemeColor;
-    diameter?: Maybe<number>;
-    linear?: Maybe<boolean>;
+export declare class DbxLoadingComponent {
+    private readonly _contextOverrideSignal;
     /**
      * Whether or not to add padding to the linear presentation when linear is complete. This prevents the linear bar from pushing content around.
      */
-    padding?: Maybe<boolean>;
-    ngOnDestroy(): void;
-    get context(): Maybe<LoadingContext>;
-    set context(context: Maybe<LoadingContext>);
-    get loading(): Maybe<boolean>;
-    set loading(loading: Maybe<boolean>);
-    get error(): Maybe<ErrorInput>;
-    set error(error: Maybe<ErrorInput>);
+    readonly padding: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly show: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly text: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly mode: import("@angular/core").InputSignal<ProgressBarMode>;
+    readonly color: import("@angular/core").InputSignal<"primary" | "accent" | "warn" | "notice" | "ok" | "success" | "grey" | "background" | "disabled" | undefined>;
+    readonly diameter: import("@angular/core").InputSignal<Maybe<number>>;
+    readonly linear: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly loading: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly error: import("@angular/core").InputSignal<Maybe<ErrorInput>>;
+    readonly context: import("@angular/core").InputSignal<MaybeObservableOrValue<LoadingContext<LoadingContextEvent>>>;
+    readonly contextSignal: Signal<MaybeObservableOrValue<LoadingContext>>;
+    readonly contextStream$: Observable<Maybe<LoadingContextEvent>>;
+    readonly contextStreamSignal: Signal<Maybe<LoadingContextEvent>>;
+    readonly stateSignal: Signal<DbxLoadingComponentState>;
+    readonly showPaddingSignal: Signal<boolean | null | undefined>;
+    /**
+     * Sets/overrides the context directly.
+     *
+     * @param context Context source to use as an override.
+     */
+    setContext(context: MaybeObservableOrValue<LoadingContext>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxLoadingComponent, never>;
-    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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxLoadingComponent, "dbx-loading", never, { "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "show": { "alias": "show"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "diameter": { "alias": "diameter"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; }, {}, never, ["[loading]", "*", "[error]", "[errorAction]"], true, never>;
 }

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

@@ -3,12 +3,8 @@ import * as i1 from "./loading.component";
 import * as i2 from "./basic-loading.component";
 import * as i3 from "./loading-progress.component";
 import * as i4 from "./loading.action.directive";
-import * as i5 from "@angular/common";
-import * as i6 from "../error/error.module";
-import * as i7 from "@angular/material/progress-spinner";
-import * as i8 from "@angular/material/progress-bar";
 export declare class DbxLoadingModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxLoadingModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxLoadingModule, [typeof i1.DbxLoadingComponent, typeof i2.DbxBasicLoadingComponent, typeof i3.DbxLoadingProgressComponent, typeof i4.DbxActionLoadingContextDirective], [typeof i5.CommonModule, typeof i6.DbxReadableErrorModule, typeof i7.MatProgressSpinnerModule, typeof i8.MatProgressBarModule], [typeof i1.DbxLoadingComponent, typeof i2.DbxBasicLoadingComponent, typeof i3.DbxLoadingProgressComponent, typeof i4.DbxActionLoadingContextDirective, typeof i7.MatProgressSpinnerModule, typeof i8.MatProgressBarModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxLoadingModule, never, [typeof i1.DbxLoadingComponent, typeof i2.DbxBasicLoadingComponent, typeof i3.DbxLoadingProgressComponent, typeof i4.DbxActionLoadingContextDirective], [typeof i1.DbxLoadingComponent, typeof i2.DbxBasicLoadingComponent, typeof i3.DbxLoadingProgressComponent, typeof i4.DbxActionLoadingContextDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxLoadingModule>;
 }