@dereekb/dbx-web 12.4.5 → 12.5.1

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

@@ -22,7 +22,7 @@ export interface DbxActionConfirmConfig<T = unknown> extends DbxPromptConfirmCon
 export declare class DbxActionConfirmDirective<T = unknown, O = unknown> extends AbstractPromptConfirmDirective implements OnInit, OnDestroy {
     readonly source: DbxActionContextStoreSourceInstance<T, O>;
     readonly dbxActionConfirm: import("@angular/core").InputSignalWithTransform<Maybe<DbxActionConfirmConfig<T>>, Maybe<"" | DbxActionConfirmConfig<T>>>;
-    private readonly _sourceSubscription;
+    private readonly _sourceSub;
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected getDefaultDialogConfig(): Maybe<DbxPromptConfirmConfig>;

package/lib/button/_button.scss

@@ -10,7 +10,8 @@ $big-button-height: 46px; // 33% bigger
 // MARK: Mixin
 @mixin core() {
   // increases the height of the mat-mdc-button
-  .dbx-button-big {
+  .dbx-button-big,
+  .dbx-button-large {
     .mdc-button.mat-mdc-button {
       height: $big-button-height;
     }

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

@@ -3,6 +3,7 @@ import { AbstractDbxButtonDirective } from '@dereekb/dbx-core';
 import { type Maybe } from '@dereekb/util';
 import { DbxProgressButtonConfig } from './progress/button.progress.config';
 import { type DbxThemeColor } from '../layout/style/style';
+import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
 import * as i0 from "@angular/core";
 export type DbxButtonType = 'basic' | 'raised' | 'stroked' | 'flat' | 'icon';
 /**
@@ -10,6 +11,7 @@ export type DbxButtonType = 'basic' | 'raised' | 'stroked' | 'flat' | 'icon';
  */
 export interface DbxButtonStyle {
     readonly type?: DbxButtonType;
+    readonly mode?: ProgressSpinnerMode;
     readonly color?: ThemePalette | DbxThemeColor;
     readonly spinnerColor?: ThemePalette | DbxThemeColor;
     readonly customButtonColor?: string;
@@ -30,6 +32,7 @@ export declare enum DbxButtonDisplayType {
  * Complex button that supports loading states.
  */
 export declare class DbxButtonComponent extends AbstractDbxButtonDirective {
+    readonly bar: import("@angular/core").InputSignalWithTransform<boolean, Maybe<boolean | "">>;
     readonly type: import("@angular/core").InputSignal<Maybe<DbxButtonType>>;
     readonly buttonStyle: import("@angular/core").InputSignal<Maybe<DbxButtonStyle>>;
     readonly color: import("@angular/core").InputSignal<"primary" | "accent" | "warn" | "notice" | "ok" | "success" | "grey" | "background" | "disabled" | undefined>;
@@ -43,8 +46,9 @@ export declare class DbxButtonComponent extends AbstractDbxButtonDirective {
     readonly flat: import("@angular/core").InputSignalWithTransform<boolean, Maybe<boolean | "">>;
     readonly iconOnly: import("@angular/core").InputSignalWithTransform<boolean, Maybe<boolean | "">>;
     readonly fab: import("@angular/core").InputSignalWithTransform<boolean, Maybe<boolean | "">>;
+    readonly mode: import("@angular/core").InputSignal<Maybe<ProgressSpinnerMode>>;
     readonly typeSignal: import("@angular/core").Signal<DbxButtonType>;
     readonly configSignal: import("@angular/core").Signal<DbxProgressButtonConfig>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxButtonComponent, "dbx-button", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "buttonStyle": { "alias": "buttonStyle"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "spinnerColor": { "alias": "spinnerColor"; "required": false; "isSignal": true; }; "customButtonColor": { "alias": "customButtonColor"; "required": false; "isSignal": true; }; "customTextColor": { "alias": "customTextColor"; "required": false; "isSignal": true; }; "customSpinnerColor": { "alias": "customSpinnerColor"; "required": false; "isSignal": true; }; "basic": { "alias": "basic"; "required": false; "isSignal": true; }; "raised": { "alias": "raised"; "required": false; "isSignal": true; }; "stroked": { "alias": "stroked"; "required": false; "isSignal": true; }; "flat": { "alias": "flat"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "fab": { "alias": "fab"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxButtonComponent, "dbx-button", never, { "bar": { "alias": "bar"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "buttonStyle": { "alias": "buttonStyle"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "spinnerColor": { "alias": "spinnerColor"; "required": false; "isSignal": true; }; "customButtonColor": { "alias": "customButtonColor"; "required": false; "isSignal": true; }; "customTextColor": { "alias": "customTextColor"; "required": false; "isSignal": true; }; "customSpinnerColor": { "alias": "customSpinnerColor"; "required": false; "isSignal": true; }; "basic": { "alias": "basic"; "required": false; "isSignal": true; }; "raised": { "alias": "raised"; "required": false; "isSignal": true; }; "stroked": { "alias": "stroked"; "required": false; "isSignal": true; }; "flat": { "alias": "flat"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "fab": { "alias": "fab"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -1,23 +1,27 @@
 import { OnDestroy, Signal } from '@angular/core';
-import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+import { AbstractSubscriptionDirective, type DbxActionWorkProgress, type DbxButtonWorking } from '@dereekb/dbx-core';
 import { type Maybe } from '@dereekb/util';
 import { DbxProgressButtonConfig } from './button.progress.config';
+import { type ProgressSpinnerMode } from '@angular/material/progress-spinner';
 import * as i0 from "@angular/core";
 export declare abstract class AbstractProgressButtonDirective extends AbstractSubscriptionDirective implements OnDestroy {
     private readonly globalConfig;
     readonly btnClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
     readonly config: import("@angular/core").InputSignal<Maybe<DbxProgressButtonConfig>>;
     readonly buttonId: import("@angular/core").InputSignal<Maybe<string>>;
-    readonly working: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly working: import("@angular/core").InputSignal<Maybe<import("@dereekb/dbx-core").DbxActionWorkOrWorkProgress>>;
     readonly disabled: import("@angular/core").InputSignal<Maybe<boolean>>;
     readonly globalOptionsSignal: Signal<Maybe<DbxProgressButtonConfig>>;
     readonly configSignal: Signal<Maybe<DbxProgressButtonConfig>>;
     readonly baseCssClassSignal: Signal<string[]>;
     readonly baseCssClasses$: import("rxjs").Observable<string[]>;
-    readonly workingSignal: Signal<boolean>;
-    readonly disabledSignal: Signal<boolean>;
+    readonly workingProgressSignal: Signal<DbxButtonWorking>;
+    readonly isWorkingSignal: Signal<boolean>;
+    readonly workingValueSignal: Signal<Maybe<DbxActionWorkProgress>>;
+    readonly modeSignal: Signal<ProgressSpinnerMode>;
+    readonly disabledSignal: Signal<Maybe<boolean>>;
     readonly buttonTypeAttributeSignal: Signal<Maybe<string>>;
-    readonly buttonDisabledSignal: Signal<boolean>;
+    readonly buttonDisabledSignal: Signal<Maybe<boolean>>;
     readonly showProgressSignal: Signal<boolean>;
     handleClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractProgressButtonDirective, never>;

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

@@ -4,8 +4,9 @@ import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
 import { type Maybe } from '@dereekb/util';
 import { DbxThemeColor } from '../../layout/style/style';
 import { DbxButtonType } from '../button.component';
+import { DbxButtonWorking, DbxButtonWorkingProgress } from '@dereekb/dbx-core';
 export interface DbxProgressButtonConfig {
-    readonly working?: Maybe<boolean>;
+    readonly working?: Maybe<DbxButtonWorking>;
     readonly text?: Maybe<string>;
     readonly spinnerText?: Maybe<string>;
     readonly buttonColor?: Maybe<ThemePalette | DbxThemeColor>;
@@ -18,7 +19,10 @@ export interface DbxProgressButtonConfig {
     readonly spinnerSize?: Maybe<number>;
     readonly spinnerRatio?: Maybe<number>;
     readonly mode?: Maybe<ProgressSpinnerMode>;
-    readonly value?: Maybe<number>;
+    /**
+     * @deprecated use working instead
+     */
+    readonly value?: Maybe<DbxButtonWorkingProgress>;
     readonly fullWidth?: Maybe<boolean>;
     readonly disabled?: Maybe<boolean>;
     readonly customStyle?: Maybe<{

package/lib/interaction/_interaction.scss

@@ -5,6 +5,7 @@
 @use './popup/popup';
 @use './prompt/prompt';
 @use './style/style';
+@use './upload/upload';
 
 @mixin all-interaction-core() {
   @include dialog.core();
@@ -14,6 +15,7 @@
   @include popup.core();
   @include prompt.core();
   @include style.core();
+  @include upload.core();
 }
 
 @mixin all-interaction-typography($theme-config) {
@@ -24,6 +26,7 @@
   @include popup.typography($theme-config);
   @include prompt.typography($theme-config);
   @include style.typography($theme-config);
+  @include upload.typography($theme-config);
 }
 
 @mixin all-interaction-theme($theme-config) {
@@ -34,4 +37,5 @@
   @include popup.theme($theme-config);
   @include prompt.theme($theme-config);
   @include style.theme($theme-config);
+  @include upload.theme($theme-config);
 }

package/lib/interaction/index.d.ts

@@ -5,3 +5,4 @@ export * from './popover';
 export * from './popup';
 export * from './prompt';
 export * from './interaction.module';
+export * from './upload';

package/lib/interaction/upload/_upload.scss

@@ -0,0 +1,100 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:color';
+@use '../../style/theming';
+
+// Sections
+@mixin core() {
+  .dbx-file-upload-area-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    border: 2px;
+    border-style: dashed;
+    // border-radius: 8px;
+  }
+
+  .dbx-file-upload-area-content-text {
+    display: flex;
+    align-items: center;
+  }
+
+  .dbx-file-upload-area-rounded {
+    border-radius: 50%;
+  }
+
+  .dbx-file-upload-area-square {
+    border-radius: 12px;
+  }
+
+  .dbx-file-upload-area-with-hint .dbx-file-upload-area-content {
+    padding: 32px 16px;
+  }
+
+  .dbx-file-upload-area-content-hint {
+    position: relative;
+    top: -24px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    user-select: none;
+  }
+}
+
+@mixin color($theme-config) {
+  $color-config: theming.m2-get-color-config($theme-config);
+
+  $primary: map.get($color-config, 'primary');
+  $background: map.get($color-config, 'background');
+  $foreground: map.get($color-config, 'foreground');
+  $cdk-background-color: theming.m2-get-color-from-palette($background, 'background');
+  $cdk-text-color: theming.m2-get-color-from-palette($foreground, 'text');
+
+  $cdk-border-color: color.adjust(
+    $color: $cdk-text-color,
+    $alpha: -0.5
+  );
+
+  $cdk-highlight-background-color: color.adjust(
+    $color: $cdk-text-color,
+    $alpha: -0.7
+  );
+
+  $primary-color: theming.m2-get-color-from-palette($primary, 500);
+
+  .dbx-file-upload-area-content {
+    border-color: $cdk-border-color;
+  }
+
+  .dbx-file-upload-area-drag-over .dbx-file-upload-area-content {
+    animation: dbx-file-upload-area-fade 200ms ease-in forwards;
+
+    @keyframes dbx-file-upload-area-fade {
+      to {
+        border-color: $primary-color;
+        background-color: $cdk-highlight-background-color;
+      }
+    }
+  }
+}
+
+@mixin typography($theme-config-or-typography-config) {
+}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-interaction-upload') {
+    $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);
+    }
+
+    @if $typography !=null {
+      @include typography($theme-config);
+    }
+  }
+}

package/lib/interaction/upload/abstract.upload.component.d.ts

@@ -0,0 +1,54 @@
+import { Maybe } from '@dereekb/util';
+import { FileArrayAcceptMatchConfig, FileArrayAcceptMatchResult } from './upload.accept';
+import { DbxFileUploadActionCompatable } from './upload.action';
+import { DbxButtonWorking } from '@dereekb/dbx-core';
+import * as i0 from "@angular/core";
+export interface DbxFileUploadFilesChangedEvent {
+    readonly allFiles: File[];
+    readonly matchResult: FileArrayAcceptMatchResult;
+}
+export declare abstract class AbstractDbxFileUploadComponent implements DbxFileUploadActionCompatable {
+    /**
+     * Whether or not multiple files can be uploaded.
+     */
+    readonly multiple: import("@angular/core").InputSignalWithTransform<Maybe<boolean>, Maybe<boolean | "">>;
+    /**
+     * Accepted file types filter.
+     */
+    readonly accept: import("@angular/core").InputSignal<string | import("./upload.accept").FileAcceptFilterTypeStringArray | import("./upload.accept").FileAcceptFunction>;
+    /**
+     * This disabled is input-only
+     */
+    readonly disabled: import("@angular/core").InputSignal<Maybe<boolean>>;
+    /**
+     * This working is input-only
+     */
+    readonly working: import("@angular/core").InputSignal<Maybe<import("@dereekb/dbx-core").DbxActionWorkOrWorkProgress>>;
+    /**
+     * This signal is set by setMultiple
+     */
+    private readonly _multipleSignal;
+    /**
+     * This signal is set by setAccept
+     */
+    private readonly _acceptSignal;
+    /**
+     * This signal is set by setDisabled
+     */
+    private readonly _disabledSignal;
+    /**
+     * This signal is set by setWorking
+     */
+    private readonly _workingSignal;
+    readonly multipleSignal: import("@angular/core").Signal<Maybe<boolean>>;
+    readonly acceptSignal: import("@angular/core").Signal<string | import("./upload.accept").FileAcceptFilterTypeStringArray | import("./upload.accept").FileAcceptFunction>;
+    readonly disabledSignal: import("@angular/core").Signal<boolean>;
+    readonly workingSignal: import("@angular/core").Signal<Maybe<import("@dereekb/dbx-core").DbxActionWorkOrWorkProgress>>;
+    readonly isWorkingSignal: import("@angular/core").Signal<boolean>;
+    setDisabled(disabled?: Maybe<boolean>): void;
+    setWorking(working?: Maybe<DbxButtonWorking>): void;
+    setMultiple(multiple?: Maybe<boolean>): void;
+    setAccept(accept?: Maybe<FileArrayAcceptMatchConfig['accept']>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxFileUploadComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxFileUploadComponent, never, never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "working": { "alias": "working"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/interaction/upload/index.d.ts

@@ -0,0 +1,7 @@
+export * from './abstract.upload.component';
+export * from './upload.accept';
+export * from './upload.area.component';
+export * from './upload.button.component';
+export * from './upload.component';
+export * from './upload.action';
+export * from './upload.action.directive';

package/lib/interaction/upload/upload.accept.d.ts

@@ -0,0 +1,87 @@
+import { DecisionFunction, MimeTypeWithSubtypeWildcardWithoutParameters, MimeTypeWithoutParameters, SlashPathTypedFileSuffix, MimeTypeWildcard } from '@dereekb/util';
+/**
+ * String used as input for the "accept" attribute of a file input element.
+ */
+export type FileAcceptString = string;
+/**
+ * Returns a string that can be used as the "accept" attribute of a file input element.
+ *
+ * @param accept
+ * @returns
+ */
+export declare function fileAcceptString(accept: FileAcceptString | FileAcceptFilterTypeStringArray): FileAcceptString;
+/**
+ * A string that describes a type of file that can be selected.
+ *
+ * Can either be a mime type or a file suffix.
+ */
+export type FileAcceptFilterTypeString = MimeTypeWildcard | MimeTypeWithoutParameters | MimeTypeWithSubtypeWildcardWithoutParameters | SlashPathTypedFileSuffix;
+/**
+ * An array of file accept filter type strings.
+ */
+export type FileAcceptFilterTypeStringArray = FileAcceptFilterTypeString[];
+export declare function fileAcceptFilterTypeStringArray(accept: FileAcceptString | FileAcceptFilterTypeStringArray): FileAcceptFilterTypeStringArray;
+export interface FileArrayAcceptMatchConfig {
+    readonly accept: FileAcceptFunction | FileAcceptString | FileAcceptFilterTypeStringArray;
+    /**
+     * If false, then only the first file will be accepted.
+     *
+     * Defaults to true.
+     */
+    readonly multiple?: boolean;
+}
+export interface FileArrayAcceptMatchResult {
+    /**
+     * If multiple is allowed or not.
+     */
+    readonly multiple: boolean;
+    /**
+     * The input files.
+     */
+    readonly input: File[];
+    /**
+     * The final list of accepted files.
+     */
+    readonly accepted: File[];
+    /**
+     * The final list of rejected files.
+     */
+    readonly rejected: File[];
+    /**
+     * The list of accepted files based on the file type.
+     *
+     * If multiple is false, all files that would have been accepted are included here.
+     */
+    readonly acceptedType: File[];
+    /**
+     * The list of rejected files based on the file type.
+     *
+     * If multiple is false, only files that would have been rejected by type are included here.
+     */
+    readonly rejectedType: File[];
+}
+/**
+ * A function that matches an array of files based on the internal configuration.
+ */
+export type FileArrayAcceptMatchFunction = (input: File[]) => FileArrayAcceptMatchResult;
+/**
+ * Creates a FileArrayAcceptMatchFunction from the input.
+ */
+export declare function fileArrayAcceptMatchFunction(config: FileArrayAcceptMatchConfig): FileArrayAcceptMatchFunction;
+/**
+ * Type of input used for a FileAcceptFunction.
+ *
+ * Isolates the name and type fields from a File.
+ */
+export type FileAcceptFunctionInput = Pick<File, 'name' | 'type'>;
+/**
+ * Used to determine if a file is an accepted type based on the internal configuration.
+ */
+export type FileAcceptFunction = DecisionFunction<FileAcceptFunctionInput>;
+/**
+ * Creates a FileAcceptFunction from the input.
+ *
+ * @param accept
+ * @returns
+ */
+export declare function fileAcceptFunction(accept: FileAcceptString | FileAcceptFilterTypeStringArray): FileAcceptFunction;

package/lib/interaction/upload/upload.action.d.ts

@@ -0,0 +1,17 @@
+import { Type, Provider } from '@angular/core';
+import { Maybe } from '@dereekb/util';
+import { FileArrayAcceptMatchConfig } from './upload.accept';
+import { DbxButtonWorking } from '@dereekb/dbx-core';
+/**
+ * Compatable interface for DbxUploadActionDirective.
+ */
+export declare abstract class DbxFileUploadActionCompatable {
+    abstract setDisabled(disabled?: Maybe<boolean>): void;
+    abstract setWorking(working?: Maybe<DbxButtonWorking>): void;
+    abstract setMultiple(multiple?: Maybe<boolean>): void;
+    abstract setAccept(accept?: Maybe<FileArrayAcceptMatchConfig['accept']>): void;
+}
+/**
+ * Provides a DbxUploadActionCompatable for a given type.
+ */
+export declare function provideDbxFileUploadActionCompatable<S extends DbxFileUploadActionCompatable>(sourceType: Type<S>): Provider[];

package/lib/interaction/upload/upload.action.directive.d.ts

@@ -0,0 +1,17 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { DbxFileUploadActionCompatable } from './upload.action';
+import * as i0 from "@angular/core";
+/**
+ * Context used for linking a button to an ActionContext.
+ */
+export declare class DbxFileUploadActionSyncDirective implements OnInit, OnDestroy {
+    readonly source: DbxActionContextStoreSourceInstance<any, any>;
+    readonly uploadCompatable: DbxFileUploadActionCompatable;
+    private readonly _workingSub;
+    private readonly _disabledSub;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFileUploadActionSyncDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFileUploadActionSyncDirective, "[dbxFileUploadActionSync]", never, {}, {}, never, never, true, never>;
+}

package/lib/interaction/upload/upload.area.component.d.ts

@@ -0,0 +1,22 @@
+import { Maybe } from '@dereekb/util';
+import { AbstractDbxFileUploadComponent, DbxFileUploadFilesChangedEvent } from './abstract.upload.component';
+import * as i0 from "@angular/core";
+export type DbxFileUploadAreaFilesChangedEvent = DbxFileUploadFilesChangedEvent;
+export declare class DbxFileUploadAreaComponent extends AbstractDbxFileUploadComponent {
+    readonly icon: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly text: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly hint: import("@angular/core").InputSignal<Maybe<string | boolean>>;
+    readonly show: import("@angular/core").InputSignal<boolean>;
+    readonly hintSignal: import("@angular/core").Signal<string | null>;
+    readonly filesChanged: import("@angular/core").OutputEmitterRef<DbxFileUploadFilesChangedEvent>;
+    readonly areaClicked: import("@angular/core").OutputEmitterRef<void>;
+    readonly areaDragActiveChanged: import("@angular/core").OutputEmitterRef<boolean>;
+    readonly dragOverStateSignal: import("@angular/core").WritableSignal<boolean>;
+    readonly filesAcceptedFunctionSignal: import("@angular/core").Signal<import("./upload.accept").FileArrayAcceptMatchFunction>;
+    onClick(evt: MouseEvent): void;
+    onDragOver(evt: DragEvent): void;
+    onDragLeave(evt: DragEvent): void;
+    onDrop(evt: DragEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFileUploadAreaComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFileUploadAreaComponent, "dbx-file-upload-area", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "show": { "alias": "show"; "required": false; "isSignal": true; }; }, { "filesChanged": "filesChanged"; "areaClicked": "areaClicked"; "areaDragActiveChanged": "areaDragActiveChanged"; }, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,24 @@
+import { ElementRef } from '@angular/core';
+import { DbxButtonStyle } from '../../button/button.component';
+import { Maybe } from '@dereekb/util';
+import { AbstractDbxFileUploadComponent, DbxFileUploadFilesChangedEvent } from './abstract.upload.component';
+import * as i0 from "@angular/core";
+export type DbxFileUploadButtonFilesChangedEvent = DbxFileUploadFilesChangedEvent;
+export declare class DbxFileUploadButtonComponent extends AbstractDbxFileUploadComponent {
+    readonly fileInput: import("@angular/core").Signal<ElementRef<HTMLInputElement>>;
+    readonly text: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly icon: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly buttonStyle: import("@angular/core").InputSignal<Maybe<DbxButtonStyle>>;
+    readonly filesChanged: import("@angular/core").OutputEmitterRef<DbxFileUploadFilesChangedEvent>;
+    readonly buttonAcceptSignal: import("@angular/core").Signal<string | undefined>;
+    readonly buttonMultipleSignal: import("@angular/core").Signal<boolean>;
+    readonly filesAcceptedFunctionSignal: import("@angular/core").Signal<import("./upload.accept").FileArrayAcceptMatchFunction | undefined>;
+    /**
+     * The HTML attribute should not be added if it is false, so we return null.
+     */
+    readonly multipleAttributeSignal: import("@angular/core").Signal<"" | null>;
+    openInput(): void;
+    fileInputChanged(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFileUploadButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFileUploadButtonComponent, "dbx-file-upload-button", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "buttonStyle": { "alias": "buttonStyle"; "required": false; "isSignal": true; }; }, { "filesChanged": "filesChanged"; }, never, ["*"], true, never>;
+}

package/lib/interaction/upload/upload.component.d.ts

@@ -0,0 +1,58 @@
+import { FileArrayAcceptMatchConfig } from './upload.accept';
+import { DbxButtonStyle } from '../../button/button.component';
+import { Maybe } from '@dereekb/util';
+import { DbxFileUploadButtonComponent, DbxFileUploadButtonFilesChangedEvent } from './upload.button.component';
+import { DbxFileUploadAreaComponent, DbxFileUploadAreaFilesChangedEvent } from './upload.area.component';
+import { AbstractDbxFileUploadComponent, DbxFileUploadFilesChangedEvent } from './abstract.upload.component';
+import * as i0 from "@angular/core";
+export type DbxFileUploadMode = 'area' | 'button' | 'default';
+export interface DbxFileUploadComponentConfig {
+    readonly mode?: DbxFileUploadMode;
+    readonly accept?: Maybe<FileArrayAcceptMatchConfig['accept']>;
+    readonly multiple?: Maybe<boolean>;
+    /**
+     * If true, the area will be clickable to open the file picker.
+     */
+    readonly clickAreaToUpload?: Maybe<boolean>;
+    readonly area?: Maybe<{
+        readonly icon?: Maybe<string>;
+        readonly text?: Maybe<string>;
+        readonly hint?: Maybe<string | boolean>;
+    }>;
+    readonly button?: Maybe<{
+        readonly icon?: Maybe<string>;
+        readonly text?: Maybe<string>;
+        readonly style?: DbxButtonStyle;
+    }>;
+}
+/**
+ * Combines both the file upload area and button into a single component.
+ */
+export declare class DbxFileUploadComponent extends AbstractDbxFileUploadComponent {
+    readonly config: import("@angular/core").InputSignal<Maybe<DbxFileUploadComponentConfig>>;
+    readonly area: import("@angular/core").Signal<DbxFileUploadAreaComponent>;
+    readonly button: import("@angular/core").Signal<DbxFileUploadButtonComponent>;
+    readonly buttonStyle: import("@angular/core").InputSignal<Maybe<DbxButtonStyle>>;
+    readonly mode: import("@angular/core").InputSignal<Maybe<DbxFileUploadMode>>;
+    readonly text: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly icon: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly hint: import("@angular/core").InputSignal<Maybe<string | boolean>>;
+    readonly modeSignal: import("@angular/core").Signal<"button" | "area" | "default">;
+    readonly showButtonSignal: import("@angular/core").Signal<boolean>;
+    readonly showAreaSignal: import("@angular/core").Signal<boolean>;
+    readonly clickAreaToUpload: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly clickAreaToUploadSignal: import("@angular/core").Signal<Maybe<boolean>>;
+    readonly buttonTextSignal: import("@angular/core").Signal<Maybe<string>>;
+    readonly buttonIconSignal: import("@angular/core").Signal<Maybe<string>>;
+    readonly areaTextSignal: import("@angular/core").Signal<Maybe<string>>;
+    readonly areaIconSignal: import("@angular/core").Signal<Maybe<string>>;
+    readonly areaHintSignal: import("@angular/core").Signal<Maybe<string | boolean>>;
+    readonly uploadMultipleSignal: import("@angular/core").Signal<Maybe<boolean>>;
+    readonly uploadAcceptSignal: import("@angular/core").Signal<string | import("./upload.accept").FileAcceptFilterTypeStringArray | import("./upload.accept").FileAcceptFunction>;
+    readonly filesChanged: import("@angular/core").OutputEmitterRef<DbxFileUploadFilesChangedEvent>;
+    areaClicked(): void;
+    areaFilesChanged(event: DbxFileUploadAreaFilesChangedEvent): void;
+    buttonFilesChanged(event: DbxFileUploadButtonFilesChangedEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFileUploadComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFileUploadComponent, "dbx-file-upload", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "buttonStyle": { "alias": "buttonStyle"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "clickAreaToUpload": { "alias": "clickAreaToUpload"; "required": false; "isSignal": true; }; }, { "filesChanged": "filesChanged"; }, never, ["*"], true, never>;
+}

package/lib/layout/_layout.scss

@@ -1,3 +1,4 @@
+@use './avatar/avatar';
 @use './bar/bar';
 @use './block/block';
 @use './card/card';
@@ -13,6 +14,7 @@
 @use './text/text';
 
 @mixin all-layout-core() {
+  @include avatar.core();
   @include bar.core();
   @include block.core();
   @include card.core();
@@ -29,6 +31,7 @@
 }
 
 @mixin all-layout-typography($theme-config) {
+  @include avatar.typography($theme-config);
   @include bar.typography($theme-config);
   @include block.typography($theme-config);
   @include card.typography($theme-config);
@@ -45,6 +48,7 @@
 }
 
 @mixin all-layout-theme($theme-config) {
+  @include avatar.theme($theme-config);
   @include bar.theme($theme-config);
   @include block.theme($theme-config);
   @include card.theme($theme-config);