@dereekb/dbx-web 1.2.0 → 3.0.0

package/lib/action/_action.scss

@@ -1,40 +1,13 @@
-@use '../style/theming';
+@use './snackbar/snackbar';
 
-// MARK: Variables
-
-
-// MARK: Mixin
-@mixin core() {}
-
-@mixin color($theme-config) {}
-
-@mixin typography($typography-config) {}
-
-@mixin theme($theme-config) {
-  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-action') {
-    $color: theming.get-color-config($theme-config);
-    $typography: theming.get-typography-config($theme-config);
-
-    @if $color !=null {
-      @include color($theme-config);
-    }
-
-    @if $typography !=null {
-      @include typography($typography);
-    }
-  }
+@mixin all-action-core() {
+  @include snackbar.core();
 }
 
-// TODO:
-.dbx-action-snackbar {
-  display: flex;
-  align-items: center;
-
-  &.dbx-action-snackbar-success {
-    // background: $success-color;
-  }
+@mixin all-action-typography($typography-config) {
+  @include snackbar.typography($typography-config);
+}
 
-  &.dbx-action-snackbar-error {
-    // background: red;
-  }
+@mixin all-action-theme($theme-config) {
+  @include snackbar.theme($theme-config);
 }

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

@@ -2,8 +2,17 @@ import { OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { AbstractPromptConfirmDirective } from '../interaction/prompt/prompt.confirm.directive';
 import { DbxPromptConfirmConfig } from '../interaction/prompt/prompt.confirm.component';
-import { ActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
+/**
+ * DbxActionConfirmDirective configuration.
+ */
+export interface DbxActionConfirmConfig<T> extends DbxPromptConfirmConfig {
+    /**
+     * Optionally set the readyValue passed to the instance.
+     */
+    readyValue?: T;
+}
 /**
  * Directive that when triggered shows a dialog to accept or reject.
  *
@@ -11,10 +20,10 @@ import * as i0 from "@angular/core";
  * For button usage, use an appPromptConfirmButton directive.
  */
 export declare class DbxActionConfirmDirective<T, O> extends AbstractPromptConfirmDirective implements OnInit, OnDestroy {
-    readonly source: ActionContextStoreSourceInstance<T, O>;
-    config?: DbxPromptConfirmConfig;
+    readonly source: DbxActionContextStoreSourceInstance<T, O>;
+    config?: DbxActionConfirmConfig<T>;
     private _sourceSubscription;
-    constructor(source: ActionContextStoreSourceInstance<T, O>, dialog: MatDialog);
+    constructor(source: DbxActionContextStoreSourceInstance<T, O>, dialog: MatDialog);
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected _handleDialogResult(result: boolean): boolean;

package/lib/action/action.module.d.ts

@@ -1,16 +1,17 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./key.trigger.directive";
-import * as i2 from "./action.snackbar.component";
-import * as i3 from "./action.confirm.directive";
+import * as i2 from "./action.confirm.directive";
+import * as i3 from "./action.progress.component";
 import * as i4 from "@angular/common";
 import * as i5 from "@dereekb/dbx-core";
 import * as i6 from "../button/button.module";
-import * as i7 from "@angular/material/snack-bar";
-import * as i8 from "@angular/material/dialog";
-import * as i9 from "@angular/material/button";
-import * as i10 from "../interaction/prompt/prompt.module";
+import * as i7 from "../loading/loading.module";
+import * as i8 from "@angular/material/snack-bar";
+import * as i9 from "@angular/material/dialog";
+import * as i10 from "@angular/material/button";
+import * as i11 from "../interaction/prompt/prompt.module";
 export declare class DbxActionModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxActionModule, [typeof i1.DbxActionKeyTriggerDirective, typeof i2.DbxActionSnackbarComponent, typeof i3.DbxActionConfirmDirective], [typeof i4.CommonModule, typeof i5.DbxCoreActionModule, typeof i6.DbxButtonModule, typeof i7.MatSnackBarModule, typeof i8.MatDialogModule, typeof i9.MatButtonModule, typeof i10.DbxPromptModule], [typeof i5.DbxCoreActionModule, typeof i1.DbxActionKeyTriggerDirective, typeof i2.DbxActionSnackbarComponent, typeof i3.DbxActionConfirmDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxActionModule, [typeof i1.DbxActionKeyTriggerDirective, typeof i2.DbxActionConfirmDirective, typeof i3.DbxActionProgressComponent], [typeof i4.CommonModule, typeof i5.DbxCoreActionModule, typeof i6.DbxButtonModule, typeof i7.DbxLoadingModule, typeof i8.MatSnackBarModule, typeof i9.MatDialogModule, typeof i10.MatButtonModule, typeof i11.DbxPromptModule], [typeof i5.DbxCoreActionModule, typeof i1.DbxActionKeyTriggerDirective, typeof i2.DbxActionConfirmDirective, typeof i3.DbxActionProgressComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxActionModule>;
 }

package/lib/action/action.progress.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DbxActionProgressComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionProgressComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxActionProgressComponent, "dbx-action-progress", never, {}, {}, never, never>;
+}

package/lib/action/index.d.ts

@@ -1,5 +1,6 @@
+export * from './snackbar';
 export * from './transition';
 export * from './action.confirm.directive';
 export * from './action.module';
-export * from './action.snackbar.component';
 export * from './key.trigger.directive';
+export * from './action.progress.component';

package/lib/action/key.trigger.directive.d.ts

@@ -1,5 +1,5 @@
 import { Maybe } from '@dereekb/util';
-import { ActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 /**
  * Directive that triggers the action on a specific key up event.
@@ -7,9 +7,9 @@ import * as i0 from "@angular/core";
  * Events/Keys to respond to should be lowercase.
  */
 export declare class DbxActionKeyTriggerDirective<T = any, O = any> {
-    readonly source: ActionContextStoreSourceInstance<T, O>;
+    readonly source: DbxActionContextStoreSourceInstance<T, O>;
     inputKey: Maybe<string>;
-    constructor(source: ActionContextStoreSourceInstance<T, O>);
+    constructor(source: DbxActionContextStoreSourceInstance<T, O>);
     get key(): string;
     onKeyupHandler(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionKeyTriggerDirective<any, any>, [{ host: true; }]>;

package/lib/action/snackbar/_snackbar.scss

@@ -0,0 +1,33 @@
+@use '../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-action-snackbar {
+    display: flex;
+    align-items: center;
+  }
+
+}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-action-snackbar') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/lib/action/snackbar/action.snackbar.component.d.ts

@@ -0,0 +1,36 @@
+import { OnInit } from '@angular/core';
+import { LoadingStateType } from '@dereekb/rxjs';
+import { Observable } from 'rxjs';
+import { OnDestroy, AfterViewInit } from '@angular/core';
+import { MatSnackBarRef } from '@angular/material/snack-bar';
+import { Maybe } from '@dereekb/util';
+import { DbxActionSnackbarDisplayConfig, DbxActionSnackbarActionConfig } from './action.snackbar';
+import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+import * as i0 from "@angular/core";
+/**
+ * Component for a snackbar that contains an action.
+ */
+export declare class DbxActionSnackbarComponent extends AbstractSubscriptionDirective implements OnInit, AfterViewInit, OnDestroy {
+    readonly snackbar: MatSnackBarRef<DbxActionSnackbarComponent>;
+    readonly data: DbxActionSnackbarDisplayConfig;
+    private _durationTimeout;
+    private _actionRef;
+    readonly value$: Observable<number>;
+    readonly sourceInstance$: Observable<import("@dereekb/dbx-core").DbxActionContextStoreSourceInstance<any, any>>;
+    readonly complete$: Observable<boolean>;
+    readonly loadingStateType$: Observable<LoadingStateType>;
+    readonly snackbarStatusClass$: Observable<string>;
+    readonly button: Maybe<string>;
+    get action(): DbxActionSnackbarActionConfig | undefined;
+    get hasAction(): boolean;
+    get message(): Maybe<string>;
+    get actionConfig(): Maybe<DbxActionSnackbarActionConfig>;
+    constructor(snackbar: MatSnackBarRef<DbxActionSnackbarComponent>, data: DbxActionSnackbarDisplayConfig);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngAfterViewInit(): void;
+    dismissAfterActionCompletes: () => void;
+    dismiss: () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionSnackbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxActionSnackbarComponent, "ng-component", never, {}, {}, never, never>;
+}

package/lib/action/snackbar/action.snackbar.d.ts

@@ -0,0 +1,52 @@
+import { MatSnackBarConfig } from "@angular/material/snack-bar";
+import { DbxActionContextSourceReference } from "@dereekb/dbx-core";
+import { LoadingState, LoadingStateType } from "@dereekb/rxjs";
+import { Maybe } from "@dereekb/util";
+export declare type DbxActionSnackbarType = string;
+export declare type DbxActionSnackbarKnownType = 'none' | 'create' | 'save' | 'delete' | 'merge' | 'send' | 'cancel' | 'restore' | 'refresh' | 'read' | 'unread';
+/**
+ * ActionSnackbar event. Depending on the type, a value or error is also available.
+ */
+export interface DbxActionSnackbarEvent<O = any> extends Omit<LoadingState<O>, 'loading'> {
+    type: LoadingStateType;
+}
+/**
+ * Configuration for the actual snackbar popup.
+ */
+export interface DbxActionSnackbarDisplayConfig {
+    /**
+     * Text to be shown on the close button. If action is defined, this is ignored and the action text is used.
+     */
+    button?: string;
+    /**
+     * Message to show in the snackbar.
+     */
+    message?: Maybe<string>;
+    /**
+     * Additional action that can occur.
+     */
+    action?: DbxActionSnackbarActionConfig;
+    /**
+     * MatSnackBar configuration
+     */
+    snackbar?: MatSnackBarConfig;
+}
+/**
+ * Used for configuring an action on the snackbar component.
+ */
+export interface DbxActionSnackbarActionConfig {
+    /**
+     * Action label to display on the button.
+     */
+    button: string;
+    /**
+     * Action reference to use.
+     *
+     * The referred to action is used for triggering and lifecycle.
+     */
+    reference: DbxActionContextSourceReference;
+    /**
+     * Duration to show the action.
+     */
+    duration?: number;
+}

package/lib/action/snackbar/action.snackbar.default.d.ts

@@ -0,0 +1,2 @@
+import { DbxActionSnackbarEventMakeConfig } from './action.snackbar.service';
+export declare const DBX_ACTION_SNACKBAR_DEFAULTS: DbxActionSnackbarEventMakeConfig;

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

@@ -0,0 +1,25 @@
+import { OnInit } from '@angular/core';
+import { AbstractSubscriptionDirective, DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
+import { DbxActionSnackbarDisplayConfig, DbxActionSnackbarEvent, DbxActionSnackbarType } from './action.snackbar';
+import { DbxActionSnackbarService } from './action.snackbar.service';
+import { DbxActionSnackbarDisplayConfigGeneratorFunction, DbxActionSnackbarGeneratorUndoInput } from './action.snackbar.generator';
+import * as i0 from "@angular/core";
+/**
+ * Action directive that displays a snackbar when the action context hits a certain state.
+ */
+export declare class DbxActionSnackbarDirective<T = any, O = any> extends AbstractSubscriptionDirective implements OnInit {
+    readonly source: DbxActionContextStoreSourceInstance<T, O>;
+    readonly dbxActionSnackbarService: DbxActionSnackbarService;
+    private _snackbarFunction?;
+    get snackbarFunction(): Maybe<DbxActionSnackbarDisplayConfigGeneratorFunction<O>>;
+    set snackbarFunction(snackbarFunction: Maybe<'' | DbxActionSnackbarDisplayConfigGeneratorFunction<O>>);
+    dbxActionSnackbarDefault?: Maybe<DbxActionSnackbarType>;
+    dbxActionSnackbarUndo?: DbxActionSnackbarGeneratorUndoInput;
+    constructor(source: DbxActionContextStoreSourceInstance<T, O>, dbxActionSnackbarService: DbxActionSnackbarService);
+    ngOnInit(): void;
+    protected buildConfigurationForEvent(event: DbxActionSnackbarEvent): Maybe<DbxActionSnackbarDisplayConfig>;
+    protected showSnackbarForConfiguration(config: DbxActionSnackbarDisplayConfig, event: DbxActionSnackbarEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionSnackbarDirective<any, any>, [{ host: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionSnackbarDirective<any, any>, "[dbxActionSnackbar]", never, { "snackbarFunction": "dbxActionSnackbar"; "dbxActionSnackbarDefault": "dbxActionSnackbarDefault"; "dbxActionSnackbarUndo": "dbxActionSnackbarUndo"; }, {}, never>;
+}

package/lib/action/snackbar/action.snackbar.generator.d.ts

@@ -0,0 +1,32 @@
+import { DbxActionContextSourceReference } from "@dereekb/dbx-core";
+import { Milliseconds, Maybe, GetterOrValue, Getter } from "@dereekb/util";
+import { DbxActionSnackbarDisplayConfig, DbxActionSnackbarEvent } from "./action.snackbar";
+export interface DbxActionSnackbarGeneratorInput<O = any> {
+    event: DbxActionSnackbarEvent<O>;
+    undo?: Maybe<DbxActionSnackbarGeneratorUndoInput>;
+}
+export declare type DbxActionSnackbarGeneratorUndoInput = DbxActionSnackbarGeneratorUndoInputConfig | Getter<DbxActionContextSourceReference>;
+export interface DbxActionSnackbarGeneratorUndoInputConfig {
+    duration?: Milliseconds;
+    getUndoAction: Getter<DbxActionContextSourceReference>;
+}
+export declare type DbxActionSnackbarDisplayConfigGeneratorFunction<O = any> = (input: DbxActionSnackbarGeneratorInput<O>) => Maybe<DbxActionSnackbarDisplayConfig>;
+export interface DbxMakeActionSnackbarGeneratorConfiguration {
+    idle?: GetterOrValue<DbxMakeActionSnackbarGeneratorEventConfiguration>;
+    loading?: GetterOrValue<DbxMakeActionSnackbarGeneratorEventConfiguration>;
+    success?: GetterOrValue<DbxMakeActionSnackbarGeneratorEventConfiguration>;
+    error?: GetterOrValue<DbxMakeActionSnackbarGeneratorEventConfiguration>;
+}
+export interface DbxMakeActionSnackbarGeneratorEventConfiguration extends Omit<DbxActionSnackbarDisplayConfig, 'action'> {
+    /**
+     * Sets the undo action text. If undefined, will default to 'undo'
+     */
+    undoButtonText?: string;
+}
+/**
+ * Creates a DbxActionSnackbarDisplayConfigGeneratorFunction from the input config.
+ *
+ * @param config
+ * @returns
+ */
+export declare function makeDbxActionSnackbarDisplayConfigGeneratorFunction<O = any>(config: DbxMakeActionSnackbarGeneratorConfiguration): DbxActionSnackbarDisplayConfigGeneratorFunction<O>;

package/lib/action/snackbar/action.snackbar.module.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./action.snackbar.component";
+import * as i2 from "./action.snackbar.directive";
+import * as i3 from "@angular/common";
+import * as i4 from "../../layout/style/style.layout.module";
+import * as i5 from "@dereekb/dbx-core";
+import * as i6 from "../../interaction/prompt/prompt.module";
+import * as i7 from "../../button/button.module";
+import * as i8 from "../../error/error.module";
+export declare class DbxActionSnackbarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionSnackbarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxActionSnackbarModule, [typeof i1.DbxActionSnackbarComponent, typeof i2.DbxActionSnackbarDirective], [typeof i3.CommonModule, typeof i4.DbxStyleLayoutModule, typeof i5.DbxCoreActionModule, typeof i6.DbxPromptModule, typeof i7.DbxButtonModule, typeof i8.DbxReadableErrorModule], [typeof i1.DbxActionSnackbarComponent, typeof i2.DbxActionSnackbarDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxActionSnackbarModule>;
+}

package/lib/action/snackbar/action.snackbar.service.d.ts

@@ -0,0 +1,39 @@
+import { DbxActionSnackbarComponent } from './action.snackbar.component';
+import { InjectionToken, Type } from "@angular/core";
+import { MatSnackBar, MatSnackBarConfig, MatSnackBarRef } from "@angular/material/snack-bar";
+import { Milliseconds, Maybe } from "@dereekb/util";
+import { DbxActionSnackbarDisplayConfig, DbxActionSnackbarType } from "./action.snackbar";
+import { DbxActionSnackbarGeneratorInput, DbxMakeActionSnackbarGeneratorConfiguration } from "./action.snackbar.generator";
+import * as i0 from "@angular/core";
+export declare const DBX_ACTION_SNACKBAR_SERVICE_CONFIG: InjectionToken<unknown>;
+export declare const DEFAULT_SNACKBAR_DIRECTIVE_DURATION: number;
+export interface DbxActionSnackbarEventMakeConfig {
+    [key: string]: DbxMakeActionSnackbarGeneratorConfiguration;
+}
+export interface DbxActionSnackbarServiceConfig<C = any> {
+    readonly componentClass: Type<C>;
+    readonly snackbar?: Pick<MatSnackBarConfig, 'horizontalPosition' | 'verticalPosition'>;
+    readonly defaultDuration?: Milliseconds;
+    readonly defaultUndoDuration?: Milliseconds;
+    readonly eventTypeConfigs: DbxActionSnackbarEventMakeConfig;
+}
+/**
+ * Used for managing/configuring the snackbar default values and pushing snackbar events.
+ */
+export declare class DbxActionSnackbarService<C = DbxActionSnackbarComponent> {
+    readonly matSnackBar: MatSnackBar;
+    readonly config: DbxActionSnackbarServiceConfig<C>;
+    get componentClass(): Type<C>;
+    get eventTypeConfigs(): DbxActionSnackbarEventMakeConfig;
+    constructor(matSnackBar: MatSnackBar, inputConfig: Partial<DbxActionSnackbarServiceConfig<C>>);
+    /**
+     * Opens a new snackbar given the input configuration.
+     *
+     * @param config
+     * @returns
+     */
+    openSnackbar(config: DbxActionSnackbarDisplayConfig): MatSnackBarRef<C>;
+    generateDisplayConfig(type: Maybe<DbxActionSnackbarType>, input: DbxActionSnackbarGeneratorInput): Maybe<DbxActionSnackbarDisplayConfig>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionSnackbarService<any>, [null, { optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DbxActionSnackbarService<any>>;
+}

package/lib/action/snackbar/index.d.ts

@@ -0,0 +1,7 @@
+export * from './action.snackbar.component';
+export * from './action.snackbar.default';
+export * from './action.snackbar.directive';
+export * from './action.snackbar.generator';
+export * from './action.snackbar.module';
+export * from './action.snackbar.service';
+export * from './action.snackbar';

package/lib/action/transition/transition.safety.directive.d.ts

@@ -2,7 +2,7 @@ import { OnInit, OnDestroy, ViewContainerRef } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { HookResult, Transition, TransitionService } from '@uirouter/core';
 import { Observable } from 'rxjs';
-import { ActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 /**
  * How to handle transitions.
@@ -21,14 +21,14 @@ export declare type DbxActionTransitionSafetyType = 'none' | 'dialog' | 'auto';
  * NOTE: This dialog only works for uirouter.
  */
 export declare class DbxActionTransitionSafetyDirective<T, O> implements OnInit, OnDestroy {
-    readonly source: ActionContextStoreSourceInstance<T, O>;
+    readonly source: DbxActionContextStoreSourceInstance<T, O>;
     protected readonly transitionService: TransitionService;
     protected readonly viewContainerRef: ViewContainerRef;
     protected readonly dialog: MatDialog;
     inputSafetyType?: DbxActionTransitionSafetyType;
     private _dialogRef?;
     private stopWatchingTransition?;
-    constructor(source: ActionContextStoreSourceInstance<T, O>, transitionService: TransitionService, viewContainerRef: ViewContainerRef, dialog: MatDialog);
+    constructor(source: DbxActionContextStoreSourceInstance<T, O>, transitionService: TransitionService, viewContainerRef: ViewContainerRef, dialog: MatDialog);
     get safetyType(): DbxActionTransitionSafetyType;
     private get _destroyed();
     ngOnInit(): void;

package/lib/button/_button.scss

@@ -6,10 +6,31 @@ $button-spacer-width: 6px;
 // MARK: Mixin
 @mixin core() {
 
+  .dbx-wide-button {
+    .dbx-button {
+      min-width: 120px;
+      max-width: 100%;
+    }
+  }
+
+  .dbx-grow-button {
+    width: 100%;
+
+    .dbx-button {
+      width: 100%;
+    }
+  }
+
   .dbx-button-spacer {
     padding-right: $button-spacer-width;
   }
 
+  .dbx-spinner-custom.mat-progress-spinner.mat-accent circle,
+  .dbx-spinner-custom.mat-spinner.mat-accent circle {
+    // mat-spinners marked with dbx-spinner-custom should allow the stroke to be inherited.
+    stroke: unset !important;
+  }
+
 }
 
 @mixin color($theme-config) {}

package/lib/button/button.component.d.ts

@@ -1,6 +1,7 @@
 import { ThemePalette } from '@angular/material/core';
 import { AbstractDbxButtonDirective } from '@dereekb/dbx-core';
-import { MatProgressButtonOptions } from 'mat-progress-buttons';
+import { Maybe } from '@dereekb/util';
+import { DbxProgressButtonOptions } from './progress/button.progress.config';
 import * as i0 from "@angular/core";
 export declare enum DbxButtonDisplayType {
     RAISED = 0,
@@ -19,7 +20,10 @@ export declare class DbxButtonComponent extends AbstractDbxButtonDirective {
     get flat(): boolean;
     set flat(flat: boolean);
     color: ThemePalette;
-    get btnOptions(): MatProgressButtonOptions;
+    customButtonColor: Maybe<string>;
+    customTextColor: Maybe<string>;
+    customSpinnerColor: Maybe<string>;
+    get btnOptions(): DbxProgressButtonOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxButtonComponent, "dbx-button", never, { "type": "type"; "raised": "raised"; "stroked": "stroked"; "flat": "flat"; "color": "color"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxButtonComponent, "dbx-button", never, { "type": "type"; "raised": "raised"; "stroked": "stroked"; "flat": "flat"; "color": "color"; "customButtonColor": "customButtonColor"; "customTextColor": "customTextColor"; "customSpinnerColor": "customSpinnerColor"; }, {}, never, ["*"]>;
 }

package/lib/button/button.module.d.ts

@@ -2,9 +2,10 @@ import * as i0 from "@angular/core";
 import * as i1 from "./button.component";
 import * as i2 from "./button.spacer.component";
 import * as i3 from "@angular/common";
-import * as i4 from "mat-progress-buttons";
+import * as i4 from "./progress/button.progress.module";
+import * as i5 from "@dereekb/dbx-core";
 export declare class DbxButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxButtonModule, [typeof i1.DbxButtonComponent, typeof i2.DbxButtonSpacerComponent], [typeof i3.CommonModule, typeof i4.MatProgressButtonsModule], [typeof i4.MatProgressButtonsModule, typeof i1.DbxButtonComponent, typeof i2.DbxButtonSpacerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxButtonModule, [typeof i1.DbxButtonComponent, typeof i2.DbxButtonSpacerDirective], [typeof i3.CommonModule, typeof i4.DbxProgressButtonsModule], [typeof i5.DbxCoreButtonModule, typeof i4.DbxProgressButtonsModule, typeof i1.DbxButtonComponent, typeof i2.DbxButtonSpacerDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxButtonModule>;
 }

package/lib/button/button.spacer.component.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
 /**
- * Button spacer component.
+ * Button spacer directive.
  */
-export declare class DbxButtonSpacerComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxButtonSpacerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxButtonSpacerComponent, "dbx-button-spacer", never, {}, {}, never, never>;
+export declare class DbxButtonSpacerDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxButtonSpacerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxButtonSpacerDirective, "dbx-button-spacer,dbxButtonSpacer", never, {}, {}, never>;
 }

package/lib/button/index.d.ts

@@ -1,3 +1,4 @@
+export * from './progress';
 export * from './button.component';
 export * from './button.spacer.component';
 export * from './button.module';

package/lib/button/progress/bar.button.component.d.ts

@@ -0,0 +1,6 @@
+import { AbstractProgressButtonDirective } from './base.progress.button.directive';
+import * as i0 from "@angular/core";
+export declare class DbxBarButtonComponent extends AbstractProgressButtonDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxBarButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxBarButtonComponent, "dbx-bar-button", never, {}, {}, never, ["*"]>;
+}

package/lib/button/progress/bar.button.component.scss

@@ -0,0 +1,23 @@
+:host {
+  button {
+    &.working {
+      cursor: not-allowed;
+    }
+    &.fullWidth {
+      width: 100%;
+    }
+    .bar {
+      position:absolute;
+      top: 0;
+      left: 0;
+    }
+    mat-icon {
+      padding-right: 5px;
+      &.is-mat-icon {
+        font-size: 18px;
+        position: relative;
+        top: 3px;
+      }
+    }
+  }
+}

package/lib/button/progress/base.progress.button.directive.d.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
+import { Observable } from 'rxjs';
+import { EventEmitter } from '@angular/core';
+import { DbxProgressButtonGlobalConfig, DbxProgressButtonOptions } from './button.progress.config';
+import * as i0 from "@angular/core";
+export declare abstract class AbstractProgressButtonDirective extends AbstractSubscriptionDirective implements OnInit, OnDestroy {
+    private globalConfig;
+    readonly cdRef: ChangeDetectorRef;
+    private _computedOptions;
+    private _working;
+    private _disabled;
+    private _buttonId;
+    private _options;
+    readonly globalOptions$: Observable<Maybe<DbxProgressButtonOptions>>;
+    readonly options$: Observable<DbxProgressButtonOptions>;
+    readonly btnClick: EventEmitter<MouseEvent>;
+    constructor(globalConfig: DbxProgressButtonGlobalConfig, cdRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    handleClick(event: MouseEvent): void;
+    get options(): DbxProgressButtonOptions;
+    get customSpinnerStyle(): {
+        stroke: string;
+    } | undefined;
+    set options(options: DbxProgressButtonOptions);
+    set buttonId(buttonId: string);
+    /**
+     * @deprecated
+     */
+    set active(active: boolean);
+    set working(working: boolean);
+    set disabled(disabled: boolean);
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractProgressButtonDirective, [{ optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractProgressButtonDirective, never, never, { "options": "options"; "buttonId": "buttonId"; "active": "active"; "working": "working"; "disabled": "disabled"; }, { "btnClick": "btnClick"; }, never>;
+}

package/lib/button/progress/button.progress.config.d.ts

@@ -0,0 +1,51 @@
+import { InjectionToken } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
+import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import { Maybe } from '@dereekb/util';
+export interface DbxProgressButtonOptions {
+    /**
+     * @deprecated alias for working
+     */
+    active?: boolean;
+    working?: boolean;
+    text?: string;
+    spinnerText?: string;
+    buttonColor?: ThemePalette;
+    spinnerColor?: ThemePalette;
+    barColor?: ThemePalette;
+    raised?: boolean;
+    stroked?: boolean;
+    flat?: boolean;
+    fab?: boolean;
+    spinnerSize?: number;
+    spinnerRatio?: number;
+    mode?: ProgressSpinnerMode;
+    value?: number;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    icon?: DbxProgressButtonIcon;
+    type?: string;
+    customStyle?: {
+        [key: string]: any;
+    };
+    customClass?: string;
+    /**
+     * Custom spinner color. Overrides the normal spinner color if provided.
+     */
+    customSpinnerColor?: Maybe<string>;
+    buttonIcon?: DbxProgressButtonIcon;
+    id?: string;
+}
+export interface DbxProgressButtonIcon {
+    color?: ThemePalette;
+    fontIcon?: string;
+    fontSet?: string;
+    inline?: boolean;
+    svgIcon?: string;
+    customClass?: string;
+}
+export interface DbxProgressButtonTargetedConfig extends DbxProgressButtonOptions {
+    id?: string;
+}
+export declare type DbxProgressButtonGlobalConfig = DbxProgressButtonTargetedConfig[];
+export declare const DBX_MAT_PROGRESS_BUTTON_GLOBAL_CONFIG: InjectionToken<DbxProgressButtonGlobalConfig>;