@dereekb/dbx-web 12.6.15 → 12.6.17

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

@@ -28,7 +28,7 @@ export declare class DbxActionTransitionSafetyDirective<T, O> implements OnInit,
     protected readonly viewContainerRef: ViewContainerRef;
     protected readonly dialog: MatDialog;
     readonly source: DbxActionContextStoreSourceInstance<T, O>;
-    readonly safetyType$: Observable<"dialog" | "auto" | "none">;
+    readonly safetyType$: Observable<"dialog" | "none" | "auto">;
     protected readonly _dbxActionTransitionSafetyUpdateEffect: import("@angular/core").EffectRef;
     private _currentDialogRef?;
     private stopWatchingTransition?;

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

@@ -1,24 +1,9 @@
-import { ThemePalette } from '@angular/material/core';
 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 { DbxButtonStyle, DbxButtonType } from './button';
 import * as i0 from "@angular/core";
-export type DbxButtonType = 'basic' | 'raised' | 'stroked' | 'flat' | 'icon';
-/**
- * Style details for the button
- */
-export interface DbxButtonStyle {
-    readonly type?: DbxButtonType;
-    readonly mode?: ProgressSpinnerMode;
-    readonly color?: ThemePalette | DbxThemeColor;
-    readonly spinnerColor?: ThemePalette | DbxThemeColor;
-    readonly customButtonColor?: string;
-    readonly customTextColor?: string;
-    readonly customSpinnerColor?: string;
-    readonly fab?: boolean;
-}
 /**
  * @deprecated use DbxButtonType instead.
  */

package/lib/button/button.d.ts

@@ -0,0 +1,20 @@
+import { type ThemePalette } from '@angular/material/core';
+import { type ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import type { DbxThemeColor } from '../layout';
+/**
+ * DbxButton display type
+ */
+export type DbxButtonType = 'basic' | 'raised' | 'stroked' | 'flat' | 'icon';
+/**
+ * DbxButton style configuration
+ */
+export interface DbxButtonStyle {
+    readonly type?: DbxButtonType;
+    readonly mode?: ProgressSpinnerMode;
+    readonly color?: ThemePalette | DbxThemeColor;
+    readonly spinnerColor?: ThemePalette | DbxThemeColor;
+    readonly customButtonColor?: string;
+    readonly customTextColor?: string;
+    readonly customSpinnerColor?: string;
+    readonly fab?: boolean;
+}

package/lib/button/index.d.ts

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

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

@@ -3,7 +3,7 @@ import { type ThemePalette } from '@angular/material/core';
 import { type ProgressSpinnerMode } from '@angular/material/progress-spinner';
 import { type Maybe } from '@dereekb/util';
 import { type DbxThemeColor } from '../../layout/style/style';
-import { type DbxButtonType } from '../button.component';
+import { type DbxButtonType } from '../button';
 import { type DbxButtonWorking, type DbxButtonWorkingProgress } from '@dereekb/dbx-core';
 export interface DbxProgressButtonConfig {
     readonly working?: Maybe<DbxButtonWorking>;
@@ -13,7 +13,7 @@ export interface DbxProgressButtonConfig {
     readonly spinnerColor?: Maybe<ThemePalette | DbxThemeColor>;
     readonly barColor?: Maybe<ThemePalette | DbxThemeColor>;
     /**
-     * Whether or not to render as an icon button.
+     * Only renders the icon button.
      */
     readonly iconOnly?: Maybe<boolean>;
     readonly spinnerSize?: Maybe<number>;

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

@@ -8,7 +8,7 @@ export declare class DbxProgressSpinnerButtonComponent extends AbstractProgressB
     readonly buttonCss$: import("rxjs").Observable<string>;
     readonly spinnerSizeSignal: import("@angular/core").Signal<number>;
     readonly buttonCssSignal: import("@angular/core").Signal<string | undefined>;
-    readonly showTextSignal: import("@angular/core").Signal<boolean>;
+    readonly showTextContentSignal: import("@angular/core").Signal<boolean>;
     readonly showTextButtonIconSignal: import("@angular/core").Signal<false | Maybe<import("@dereekb/dbx-web").DbxProgressButtonIcon>>;
     readonly showIconSignal: import("@angular/core").Signal<boolean | null | undefined>;
     readonly customSpinnerStyleSignal: import("@angular/core").Signal<{

package/lib/extension/download/blob/download.blob.button.component.d.ts

@@ -1,7 +1,7 @@
 import { ElementRef, OnDestroy } from '@angular/core';
 import { SafeResourceUrl } from '@angular/platform-browser';
 import { AbstractSubscriptionDirective, DbxButtonDisplay } from '@dereekb/dbx-core';
-import { type DbxButtonStyle } from '../../../button/button.component';
+import { type DbxButtonStyle } from '../../../button/button';
 import { Getter, Maybe, PromiseOrValue } from '@dereekb/util';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";

package/lib/extension/download/text/download.text.component.d.ts

@@ -12,10 +12,13 @@ import * as i0 from "@angular/core";
 export declare class DbxDownloadTextViewComponent extends AbstractDbxClipboardDirective implements OnDestroy {
     private readonly _browserObjectUrl;
     readonly downloadButton: import("@angular/core").Signal<Maybe<ElementRef<any>>>;
+    readonly showDownloadButton: import("@angular/core").InputSignal<boolean>;
     readonly loadingText: import("@angular/core").InputSignal<Maybe<string>>;
     readonly linear: import("@angular/core").InputSignal<Maybe<boolean>>;
     readonly showTitle: import("@angular/core").InputSignal<boolean>;
     readonly showPreview: import("@angular/core").InputSignal<boolean>;
+    readonly showExpandPreviewButton: import("@angular/core").InputSignal<boolean>;
+    readonly expandPreview: import("@angular/core").ModelSignal<boolean>;
     readonly content: import("@angular/core").InputSignal<Maybe<DownloadTextContent>>;
     readonly contentState: import("@angular/core").InputSignal<MaybeObservableOrValue<LoadingState<DownloadTextContent>>>;
     readonly contentState$: Observable<Maybe<LoadingState<DownloadTextContent>>>;
@@ -30,6 +33,7 @@ export declare class DbxDownloadTextViewComponent extends AbstractDbxClipboardDi
     readonly context: import("@dereekb/rxjs").MutableLoadingStateContext<unknown, LoadingState<DownloadTextContent>, import("@dereekb/rxjs").LoadingContextEvent & LoadingState<DownloadTextContent>>;
     readonly handleCopyToClipboard: WorkUsingObservable;
     ngOnDestroy(): void;
+    toggleExpandPreview(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxDownloadTextViewComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDownloadTextViewComponent, "dbx-download-text-view", never, { "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "showTitle": { "alias": "showTitle"; "required": false; "isSignal": true; }; "showPreview": { "alias": "showPreview"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "contentState": { "alias": "contentState"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDownloadTextViewComponent, "dbx-download-text-view", never, { "showDownloadButton": { "alias": "showDownloadButton"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "showTitle": { "alias": "showTitle"; "required": false; "isSignal": true; }; "showPreview": { "alias": "showPreview"; "required": false; "isSignal": true; }; "showExpandPreviewButton": { "alias": "showExpandPreviewButton"; "required": false; "isSignal": true; }; "expandPreview": { "alias": "expandPreview"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "contentState": { "alias": "contentState"; "required": false; "isSignal": true; }; }, { "expandPreview": "expandPreviewChange"; }, never, never, true, never>;
 }

package/lib/extension/help/help.view.list.component.d.ts

@@ -2,7 +2,8 @@ import { DbxHelpContextString } from './help';
 import { ObservableOrValue } from '@dereekb/rxjs';
 import { Observable } from 'rxjs';
 import { DbxHelpWidgetService } from './help.widget.service';
-import { ArrayOrValue } from '@dereekb/util';
+import { ArrayOrValue, Maybe } from '@dereekb/util';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 export declare class DbxHelpViewListComponent {
     readonly helpWidgetService: DbxHelpWidgetService;
@@ -10,11 +11,22 @@ export declare class DbxHelpViewListComponent {
      * Whether the accordion should allow multiple expanded panels.
      */
     readonly multi: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Whether or not to show the empty list content.
+     */
+    readonly allowEmptyListContent: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Optional footer component config to inject after the list.
+     *
+     * If set null, then will not show any footer.
+     */
+    readonly helpListFooterComponentConfig: import("@angular/core").InputSignal<Maybe<DbxInjectionComponentConfig<unknown>>>;
     readonly helpContextStrings: import("@angular/core").InputSignal<ObservableOrValue<ArrayOrValue<string>>>;
     readonly helpContextStrings$: Observable<DbxHelpContextString[]>;
     readonly helpContextStringsSignal: import("@angular/core").Signal<string[]>;
     readonly helpWidgetEntriesSignal: import("@angular/core").Signal<import("@dereekb/dbx-web").DbxHelpWidgetServiceEntry[]>;
     readonly hasNoHelpWidgetEntriesSignal: import("@angular/core").Signal<boolean>;
+    readonly helpListFooterComponentConfigSignal: import("@angular/core").Signal<Maybe<DbxInjectionComponentConfig<unknown>>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxHelpViewListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxHelpViewListComponent, "dbx-help-view-list", never, { "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "helpContextStrings": { "alias": "helpContextStrings"; "required": true; "isSignal": true; }; }, {}, never, ["[empty]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxHelpViewListComponent, "dbx-help-view-list", never, { "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "allowEmptyListContent": { "alias": "allowEmptyListContent"; "required": false; "isSignal": true; }; "helpListFooterComponentConfig": { "alias": "helpListFooterComponentConfig"; "required": false; "isSignal": true; }; "helpContextStrings": { "alias": "helpContextStrings"; "required": true; "isSignal": true; }; }, {}, never, ["[empty]"], true, never>;
 }

package/lib/extension/help/help.view.popover.button.component.d.ts

@@ -3,15 +3,28 @@ import { Maybe } from '@dereekb/util';
 import { AbstractPopoverRefDirective } from '../../interaction/popover/abstract.popover.ref.directive';
 import { NgPopoverRef } from 'ng-overlay-container';
 import { DbxHelpViewPopoverConfigWithoutOrigin } from './help.view.popover.component';
+import { DbxButtonDisplay } from '@dereekb/dbx-core';
+import { DbxButtonStyle } from '../../button';
 import * as i0 from "@angular/core";
-export type DbxHelpViewPopoverButtonConfig = DbxHelpViewPopoverConfigWithoutOrigin;
+export interface DbxHelpViewPopoverButtonConfig extends DbxHelpViewPopoverConfigWithoutOrigin {
+    /**
+     * The display configuration for the button.
+     */
+    readonly buttonDisplay?: Maybe<DbxButtonDisplay>;
+    /**
+     * The style configuration for the button.
+     */
+    readonly buttonStyle?: Maybe<DbxButtonStyle>;
+}
 /**
  * Button component that opens a help popover showing active help contexts.
  */
 export declare class DbxHelpViewPopoverButtonComponent extends AbstractPopoverRefDirective<unknown, unknown> {
     private readonly _dbxPopoverService;
     readonly buttonElement: import("@angular/core").Signal<ElementRef<any>>;
-    readonly config: import("@angular/core").InputSignal<Maybe<DbxHelpViewPopoverConfigWithoutOrigin>>;
+    readonly config: import("@angular/core").InputSignal<Maybe<DbxHelpViewPopoverButtonConfig>>;
+    readonly buttonDisplaySignal: import("@angular/core").Signal<DbxButtonDisplay>;
+    readonly buttonStyleSignal: import("@angular/core").Signal<Maybe<DbxButtonStyle>>;
     protected _makePopoverRef(origin?: Maybe<ElementRef>): NgPopoverRef<unknown, unknown>;
     showHelpPopover(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxHelpViewPopoverButtonComponent, never>;

package/lib/extension/help/help.view.popover.component.d.ts

@@ -2,7 +2,7 @@ import { ElementRef } from '@angular/core';
 import { ArrayOrValue, Maybe } from '@dereekb/util';
 import { AbstractPopoverDirective } from '../../interaction/popover/abstract.popover.directive';
 import { DbxPopoverKey } from '../../interaction/popover/popover';
-import { DbxPopoverService } from '../../interaction/popover/popover.service';
+import { DbxPopoverConfigSizing, DbxPopoverService } from '../../interaction/popover/popover.service';
 import { DbxHelpContextString } from './help';
 import { NgPopoverRef } from 'ng-overlay-container';
 import { ObservableOrValue } from '@dereekb/rxjs';
@@ -34,12 +34,26 @@ export interface DbxHelpViewPopoverConfig {
      * Specific contexts to display. If not provided, shows all active contexts from the DbxHelpContextService.
      */
     readonly helpContextStrings?: Maybe<ObservableOrValue<ArrayOrValue<DbxHelpContextString>>>;
+    /**
+     * Optional footer component config to inject after the list.
+     */
+    readonly helpListFooterComponentConfig?: Maybe<DbxInjectionComponentConfig>;
+    /**
+     * Whether to show the empty list content.
+     *
+     * Defaults to true.
+     */
+    readonly allowEmptyListContent?: Maybe<boolean>;
     /**
      * Overrides the default popover header config.
      *
      * If not provided, the default popover header config will be used from DbxHelpWidgetService.
      */
     readonly popoverHeaderConfig?: Maybe<DbxInjectionComponentConfig>;
+    /**
+     * Additional popover configuration.
+     */
+    readonly popoverSizingConfig?: Maybe<DbxPopoverConfigSizing>;
 }
 export type DbxHelpViewPopoverConfigWithoutOrigin = Omit<DbxHelpViewPopoverConfig, 'origin'>;
 /**
@@ -54,6 +68,8 @@ export declare class DbxHelpViewPopoverComponent extends AbstractPopoverDirectiv
     readonly icon: string;
     readonly header: string;
     readonly emptyText: string;
+    readonly allowEmptyListContent: boolean;
+    readonly helpListFooterComponentConfig: Maybe<DbxInjectionComponentConfig<unknown>>;
     readonly popoverHeaderConfig: Maybe<DbxInjectionComponentConfig>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxHelpViewPopoverComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxHelpViewPopoverComponent, "ng-component", never, {}, {}, never, never, true, never>;

package/lib/extension/help/help.widget.d.ts

@@ -17,6 +17,12 @@ export interface DbxHelpWidgetServiceEntry {
      * Icon for the help topic, if applicable.
      */
     readonly icon?: Maybe<string>;
+    /**
+     * The priority to use when sorting the entities.
+     *
+     * Higher values are displayed first in the list.
+     */
+    readonly sortPriority?: Maybe<number>;
     /**
      * Custom help widget component class to use.
      *

package/lib/extension/help/help.widget.service.d.ts

@@ -5,6 +5,9 @@ import { DbxHelpWidgetServiceEntry } from './help.widget';
 import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 export declare abstract class DbxHelpWidgetServiceConfig {
+    /**
+     * All help widget service entries.
+     */
     abstract readonly entries?: Maybe<DbxHelpWidgetServiceEntry[]>;
     /**
      * Default icon to use for unknown help topics.
@@ -14,6 +17,10 @@ export declare abstract class DbxHelpWidgetServiceConfig {
      * Default/Unknown help topic component class.
      */
     abstract readonly defaultWidgetComponentClass?: Maybe<Type<unknown>>;
+    /**
+     * Optional component class that shows up under the help content in the list view.
+     */
+    abstract readonly helpListFooterComponentConfig?: Maybe<DbxInjectionComponentConfig>;
     /**
      * Optional header component class to use for the list view.
      */
@@ -27,7 +34,9 @@ export declare abstract class DbxHelpWidgetServiceConfig {
  */
 export declare class DbxHelpWidgetService {
     private readonly _entries;
+    private readonly _sortPriorityMap;
     private _defaultWidgetComponentClass;
+    private _helpListFooterComponentConfig;
     private _defaultIcon?;
     private _popoverHeaderComponentConfig;
     constructor(initialConfig?: DbxHelpWidgetServiceConfig);
@@ -37,6 +46,8 @@ export declare class DbxHelpWidgetService {
     setDefaultIcon(icon: Maybe<string>): void;
     getPopoverHeaderComponentConfig(): Maybe<DbxInjectionComponentConfig>;
     setPopoverHeaderComponentConfig(componentConfig: Maybe<DbxInjectionComponentConfig>): void;
+    getHelpListFooterComponentConfig(): Maybe<DbxInjectionComponentConfig>;
+    setHelpListFooterComponentConfig(componentConfig: Maybe<DbxInjectionComponentConfig>): void;
     /**
      * Used to register one or more entries.
      *
@@ -50,6 +61,7 @@ export declare class DbxHelpWidgetService {
     getHelpWidgetEntry(helpContextString: DbxHelpContextString): Maybe<DbxHelpWidgetServiceEntry>;
     getHelpWidgetEntriesForHelpContextStrings(helpContextStrings: DbxHelpContextString[]): DbxHelpWidgetServiceEntry[];
     hasHelpWidgetEntry(context: DbxHelpContextString): boolean;
+    getSortPriorityMap(): Map<string, number>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxHelpWidgetService, [{ optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DbxHelpWidgetService>;
 }

package/lib/interaction/popover/popover.service.d.ts

@@ -4,7 +4,7 @@ import { NgOverlayContainerConfiguration, NgPopoverRef } from 'ng-overlay-contai
 import * as i0 from "@angular/core";
 export type DbxPopoverConfigSizing = Pick<NgOverlayContainerConfiguration, 'originX' | 'originY' | 'height' | 'width' | 'minHeight' | 'minWidth' | 'isResizable'>;
 export interface DbxPopoverConfig<O, I, T> extends DbxPopoverComponentConfig<O, I, T>, DbxPopoverConfigSizing {
-    injector?: Injector;
+    readonly injector?: Injector;
 }
 /**
  * Used for displaying a popover.

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

@@ -1,5 +1,5 @@
 import { ElementRef } from '@angular/core';
-import { DbxButtonStyle } from '../../button/button.component';
+import { DbxButtonStyle } from '../../button/button';
 import { Maybe } from '@dereekb/util';
 import { AbstractDbxFileUploadComponent, DbxFileUploadFilesChangedEvent } from './abstract.upload.component';
 import * as i0 from "@angular/core";

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

@@ -1,5 +1,5 @@
 import { FileArrayAcceptMatchConfig } from './upload.accept';
-import { DbxButtonStyle } from '../../button/button.component';
+import { DbxButtonStyle } from '../../button/button';
 import { Maybe } from '@dereekb/util';
 import { DbxFileUploadButtonComponent, DbxFileUploadButtonFilesChangedEvent } from './upload.button.component';
 import { DbxFileUploadAreaComponent, DbxFileUploadAreaFilesChangedEvent } from './upload.area.component';

package/lib/layout/content/_content.scss

@@ -23,6 +23,8 @@ $content-end-margin: theming.$padding-4;
 
 $scroll-content-bottom-padding: 42px;
 
+$dbx-content-pit-floating-button-margin: 8px;
+
 @mixin core() {
   .dbx-content-border {
     padding: $content-border-inner-padding;
@@ -57,11 +59,24 @@ $scroll-content-bottom-padding: 42px;
   }
 
   .dbx-content-pit-scrollable {
-    max-height: 140px; // TODO: Allow configuring height
+    max-height: theming.$dbx-content-pit-scrollable-max-height;
     max-width: 100%;
     overflow-y: scroll;
   }
 
+  .dbx-content-pit-floating-button {
+    float: right;
+    position: sticky;
+    top: $dbx-content-pit-floating-button-margin;
+    z-index: 10;
+    margin-right: $dbx-content-pit-floating-button-margin;
+    margin-bottom: $dbx-content-pit-floating-button-margin;
+  }
+
+  .dbx-content-pit-scrollable > .dbx-content-pit-floating-button {
+    top: 0;
+  }
+
   .dbx-content-end {
     margin-bottom: $content-end-margin;
   }

package/lib/style/_root-variables.scss

@@ -33,6 +33,7 @@
     #{theming.$dbx-content-height-additional-offset-var}: 0px;
 
     #{theming.$dbx-content-pit-rounded-border-radius-var}: 12px;
+    #{theming.$dbx-content-pit-scrollable-max-height-var}: 140px;
 
     #{theming.$dbx-avatar-size-var}: theming.get-dbx-avatar-size($theme-config);
     #{theming.$dbx-avatar-large-size-var}: theming.get-dbx-avatar-large-size($theme-config);

package/lib/style/_variables.scss

@@ -131,6 +131,9 @@ $dbx-bg-color-contrast: var($dbx-bg-color-contrast-var);
 $dbx-content-pit-rounded-border-radius-var: --dbx-content-pit-rounded-border-radius;
 $dbx-content-pit-rounded-border-radius: var($dbx-content-pit-rounded-border-radius-var);
 
+$dbx-content-pit-scrollable-max-height-var: --dbx-content-pit-scrollable-max-height;
+$dbx-content-pit-scrollable-max-height: var($dbx-content-pit-scrollable-max-height-var);
+
 $dbx-avatar-size: var($dbx-avatar-size-var);
 $dbx-avatar-large-size: var($dbx-avatar-large-size-var);
 $dbx-avatar-small-size: var($dbx-avatar-small-size-var);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "12.6.15",
+  "version": "12.6.17",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",