import * as _dereekb_dbx_core from '@dereekb/dbx-core'; import { DbxActionWorkOrWorkProgress, DbxActionWorkProgress, DbxActionContextStoreSourceInstance, DbxActionContextSourceReference, DbxActionSuccessHandlerFunction, AbstractTransitionWatcherDirective, AuthUserIdentifier, DbxInjectionComponentConfig, SegueRef, ClickableAnchor, SegueRefOrSegueRefRouterLink, DbxButtonDisplay, AbstractDbxButtonDirective, DbxButtonWorking, DbxButtonEcho, SimpleStorageAccessorFactory, StorageAccessor, AbstractDbxAnchorDirective, ClickableIconAnchorLink, ClickableAnchorLink, DbxInjectionTemplateConfig, ClickableAnchorLinkTree, ExpandedClickableAnchorLinkTree, ClickableAnchorLinkSegueRef, AbstractTransitionDirective, AbstractIfDirective, AbstractDbxActionValueGetterDirective, DbxActionWorkable, DbxButton, ClickableUrl, FilterSourceDirective, ClickablePartialFilterPreset, AbstractDbxActionHandlerDirective, ClickableFilterPresetOrPartialPreset, ClickableFilterPreset, DbxButtonInterceptor } from '@dereekb/dbx-core'; import * as _angular_core from '@angular/core'; import { Signal, ElementRef, AfterViewInit, InjectionToken, Type, OnInit, Injector, Provider, TrackByFunction, OutputEmitterRef, OnDestroy, OutputRef, EnvironmentProviders, ViewContainerRef, TemplateRef, ComponentRef } from '@angular/core'; import { ProgressBarMode } from '@angular/material/progress-bar'; import * as _dereekb_util from '@dereekb/util'; import { Maybe, ErrorInput, Milliseconds, GetterOrValue, Getter, CssClass, CharacterPrefixSuffixCleanString, DashPrefixString, CssStyleObject, CssToken, CssTokenVar, WebsiteUrlWithPrefix, WebsitePath, ArrayOrValue, Pixels, PixelsString, DecisionFunction, ModifierMap, Modifier, ModifierFunction, UniqueModel, CssClassesArray, PrimativeKey, SortCompareFunction, ModelKeyRef, HtmlHeaderLevel, Destroyable, UnitedStatesAddressWithContact, LabeledValue, GetterOrValueWithInput, Seconds, DestroyFunction, ReadableError, ReadableErrorWithCode, ServerError, ServerErrorResponseData, ServerErrorResponse, PromiseOrValue, SpaceSeparatedCssClasses, StringErrorCode, ModelKeyTypeNamePair, UnixDateTimeSecondsNumber, ModelKey, ModelTypeString, MimeTypeWithoutParameters, ContentTypeMimeType, ModelTypeDataPair, MapFunction, SlashPathDirectoryTreeNode, SlashPathDirectoryTreeNodeValue, SlashPathDirectoryTreeRoot, FileSize, MimeTypeWildcard, MimeTypeWithSubtypeWildcardWithoutParameters, SlashPathTypedFileSuffix, ISO8601DateString, ModelIdFactory, WebsiteUrl, PortNumber } from '@dereekb/util'; import { ProgressSpinnerMode } from '@angular/material/progress-spinner'; import * as _______________dist_packages_dbx_core_types_dereekb_dbx_core from '../../../dist/packages/dbx-core/types/dereekb-dbx-core'; import * as rxjs from 'rxjs'; import { Observable, BehaviorSubject, MonoTypeOperatorFunction, Subject } from 'rxjs'; import * as _dereekb_rxjs from '@dereekb/rxjs'; import { MaybeObservableOrValue, LoadingContext, LoadingContextEvent, LoadingState, LoadingStateType, ListLoadingState, ListLoadingStateContext, ObservableOrValue, LockSet, WorkUsingObservable, IsModifiedFunction, IsEqualFunction, WorkUsingContext, FilterSource, PresetFilterSource, FilterSourceConnector, FilterWithPreset } from '@dereekb/rxjs'; import { MatSnackBarConfig, MatSnackBarRef, MatSnackBar } from '@angular/material/snack-bar'; import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog'; import { ThemePalette } from '@angular/material/core'; import { TransitionService, Transition, HookResult } from '@uirouter/core'; import * as _dereekb_dbx_web from '@dereekb/dbx-web'; import * as ng_overlay_container from 'ng-overlay-container'; import { NgPopoverRef, NgPopoverCloseType, NgOverlayContainerConfiguration, NgPopoverCloseEvent } from 'ng-overlay-container'; import { HttpErrorResponse } from '@angular/common/http'; import * as _ngrx_store from '@ngrx/store'; import { ActionCreator, Action, Store } from '@ngrx/store'; import { BrowserAgentInfo, BrowserAgentOsType, BrowserAgentMatch } from '@dereekb/browser'; import * as _angular_platform_browser from '@angular/platform-browser'; import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser'; import { Clipboard } from '@angular/cdk/clipboard'; import { Entry, ZipReader, FileEntry } from '@zip.js/zip.js'; import { PDFDocument, PDFPage } from '@cantoo/pdf-lib'; import { ComponentStore } from '@ngrx/component-store'; import { CdkDragDrop } from '@angular/cdk/drag-drop'; import { MatButtonToggleChange } from '@angular/material/button-toggle'; import { HorizontalConnectionPos, Overlay, FlexibleConnectedPositionStrategy, GlobalPositionStrategy } from '@angular/cdk/overlay'; import { MatSelectionListChange } from '@angular/material/list'; import linkifyStr from 'linkify-string'; import { MatSidenav, MatDrawerMode } from '@angular/material/sidenav'; import { StateOrName, Obj, TransitionOptions } from '@uirouter/angular'; /** * Visual state of a {@link DbxBasicLoadingComponent}. * * - `none` — waiting for initial input (no loading or error yet) * - `loading` — spinner/progress bar is visible * - `content` — loading complete, projected content is shown * - `error` — an error occurred, error view is shown */ type LoadingComponentState = 'none' | 'loading' | 'content' | 'error'; /** * Low-level loading component that renders a spinner or progress bar, error state, and projected content. * * Prefer using {@link DbxLoadingComponent} (``) which wraps this component with * support for {@link LoadingContext} streams. * * @dbxWebComponent * @dbxWebSlug basic-loading * @dbxWebCategory feedback * @dbxWebRelated loading, loading-progress, error * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html *

Content

 * ``` * * @example * ```html * *

Content appears here when loading is false.

* * ``` */ declare class DbxBasicLoadingComponent { readonly customError: Signal>>; readonly customLoading: Signal>>; readonly diameter: _angular_core.InputSignal>; readonly mode: _angular_core.InputSignal>; readonly text: _angular_core.InputSignal>; readonly linear: _angular_core.InputSignal>; readonly show: _angular_core.InputSignal>; readonly loading: _angular_core.InputSignal>; readonly error: _angular_core.InputSignal>; readonly loadingProgressSignal: Signal>; readonly modeSignal: Signal; readonly isLoadingSignal: Signal; readonly stateSignal: Signal; readonly hasNoCustomErrorSignal: Signal; readonly hasNoCustomLoadingSignal: Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Default diameter in pixels for the progress spinner. */ declare const DEFAULT_LOADING_PROGRESS_DIAMETER = 96; /** * Renders a Material progress spinner or progress bar to indicate loading. * * Supports both linear (bar) and circular (spinner) modes with configurable * diameter and optional hint text below the indicator. To color the indicator, * apply `[dbxColor]` directly on the host — its `dbx-loading-progress.dbx-color` * SCSS maps the indicator color to the supplied token. Without `[dbxColor]` the * indicator uses the Material default color. * * @dbxWebComponent * @dbxWebSlug loading-progress * @dbxWebCategory feedback * @dbxWebRelated loading, basic-loading * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxLoadingProgressComponent { readonly defaultDiameter = 96; readonly diameter: _angular_core.InputSignal>; readonly text: _angular_core.InputSignal>; readonly linear: _angular_core.InputSignal>; readonly mode: _angular_core.InputSignal<"determinate" | "indeterminate" | "buffer" | "query">; readonly value: _angular_core.InputSignal>; readonly bufferValue: _angular_core.InputSignal>; readonly bmodeSignal: _angular_core.Signal<"determinate" | "indeterminate" | "buffer" | "query">; readonly smodeSignal: _angular_core.Signal; readonly diameterSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Numeric progress value (0-100) for a loading indicator. */ type DbxLoadingProgress = DbxActionWorkProgress; /** * Loading state for a loading component, accepting either a boolean or numeric progress. * * - `true` triggers an indeterminate loading indicator * - A number (0-100) triggers a determinate progress indicator * - `false` or `undefined` hides the loading indicator */ type DbxLoadingIsLoadingOrProgress = DbxActionWorkOrWorkProgress; /** * Resolved loading and error state consumed by {@link DbxLoadingComponent} internally. */ interface DbxLoadingComponentState { readonly loading: DbxLoadingIsLoadingOrProgress; readonly error: Maybe; } /** * Primary loading wrapper that shows a spinner/progress bar while data is being fetched, * then reveals projected content on completion, or displays an error state. * * Accepts a {@link LoadingContext} observable via the `context` input to automatically * track loading and error state from reactive streams. Also supports manual `loading` * and `error` inputs for simpler use cases. * * @dbxWebComponent * @dbxWebSlug loading * @dbxWebCategory feedback * @dbxWebRelated basic-loading, loading-progress, error * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * Body * ``` * * @example * ```html * * * * ``` */ 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. */ readonly padding: _angular_core.InputSignal>; readonly show: _angular_core.InputSignal>; readonly text: _angular_core.InputSignal>; readonly mode: _angular_core.InputSignal>; readonly diameter: _angular_core.InputSignal>; readonly linear: _angular_core.InputSignal>; readonly loading: _angular_core.InputSignal>; readonly error: _angular_core.InputSignal>; readonly context: _angular_core.InputSignal>>; readonly contextSignal: Signal>; readonly contextStream$: Observable>; readonly contextStreamSignal: Signal>; readonly stateSignal: Signal; readonly showPaddingSignal: Signal; /** * Sets/overrides the context directly. * * @param context - Context source to use as an override. */ setContext(context: MaybeObservableOrValue): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Links a {@link DbxLoadingComponent} to a {@link DbxActionContextStoreSourceInstance} by forwarding its loading state. * * Apply to a `` element that is within an action context to automatically * reflect the action's loading state in the loading component. * * @dbxWebComponent * @dbxWebSlug action-loading-context * @dbxWebCategory action * @dbxWebRelated loading, action-snackbar * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * * * ``` */ declare class DbxActionLoadingContextDirective { readonly loadingComponent: DbxLoadingComponent; readonly source: DbxActionContextStoreSourceInstance; private readonly _context; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Convenience NgModule that imports and exports all loading-related components and directives. * * Includes {@link DbxLoadingComponent}, {@link DbxBasicLoadingComponent}, * {@link DbxLoadingProgressComponent}, and {@link DbxActionLoadingContextDirective}. */ declare class DbxLoadingModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Identifies the snackbar category, used to select the appropriate default messages. */ type DbxActionSnackbarType = string; /** * Well-known snackbar types that have pre-configured default messages (e.g. "Saving...", "Saved", "Save Failed"). */ type DbxActionSnackbarKnownType = 'none' | 'create' | 'save' | 'delete' | 'merge' | 'send' | 'cancel' | 'restore' | 'refresh' | 'read' | 'unread'; /** * Represents a snackbar event derived from an action's loading state. * Contains the loading state type and, depending on the outcome, either the result value or an error. */ interface DbxActionSnackbarEvent extends Omit, 'loading'> { readonly type: LoadingStateType; } /** * Configuration for rendering a snackbar popup, including the message, close button, optional action, and Material snackbar settings. */ interface DbxActionSnackbarDisplayConfig { /** * Text to be shown on the close button. If action is defined, this is ignored and the action text is used. */ readonly button?: string; /** * Message to show in the snackbar. */ readonly message?: Maybe; /** * Additional action that can occur. */ readonly action?: DbxActionSnackbarActionConfig; /** * MatSnackBar configuration */ readonly snackbar?: MatSnackBarConfig; } /** * Configuration for an interactive action button displayed within the snackbar, such as an "Undo" button. */ interface DbxActionSnackbarActionConfig { /** * Action label to display on the button. */ readonly button: string; /** * Action reference to use. * * The referred to action is used for triggering and lifecycle. */ readonly reference: DbxActionContextSourceReference; /** * Duration to show the action. */ readonly duration?: Milliseconds; } /** * Renders the content of an action snackbar, including a message, optional close button, * and an optional interactive action (e.g. "Undo"). Automatically dismisses after the * configured duration or after the action completes successfully. * * This component is opened programmatically by {@link DbxActionSnackbarService} and is not used directly in templates. */ declare class DbxActionSnackbarComponent implements AfterViewInit { readonly snackbarRef: MatSnackBarRef; readonly snackbarData: DbxActionSnackbarDisplayConfig; private readonly _durationTimeout; private readonly _actionRef; readonly sourceInstance$: rxjs.Observable<_dereekb_dbx_core.DbxActionContextStoreSourceInstance>; readonly complete$: rxjs.Observable; readonly loadingStateType$: rxjs.Observable; readonly sourceInstanceSignal: _angular_core.Signal<_dereekb_dbx_core.DbxActionContextStoreSourceInstance | undefined>; readonly completeSignal: _angular_core.Signal; readonly loadingStateTypeSignal: _angular_core.Signal; readonly snackbarStatusClassSignal: _angular_core.Signal; readonly button: Maybe; readonly action: Maybe; readonly hasAction: boolean; readonly message: Maybe; readonly actionConfig: Maybe; constructor(); ngAfterViewInit(): void; dismissAfterActionCompletes: DbxActionSuccessHandlerFunction; dismiss: () => void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Input passed to a snackbar display config generator function, containing the * action event and optional undo configuration. */ interface DbxActionSnackbarGeneratorInput { /** * The action snackbar event that triggered the generator. */ readonly event: DbxActionSnackbarEvent; /** * Optional undo action configuration, only applied on success events. */ readonly undo?: Maybe>; } /** * Input for configuring an undo action on the snackbar. Can be either a simple getter * that returns the action source reference, or a full config object with duration. */ type DbxActionSnackbarGeneratorUndoInput = Getter> | DbxActionSnackbarGeneratorUndoInputConfig; /** * Extended undo configuration that specifies how long to show the undo action * and how to obtain the undo action source reference. */ interface DbxActionSnackbarGeneratorUndoInputConfig { /** * How long the undo button remains visible in the snackbar. */ readonly duration?: Milliseconds; /** * Factory that returns the action context source reference to trigger for undo. */ readonly getUndoAction: Getter>; } /** * Function that produces a snackbar display configuration from a generator input. * Returns `undefined` to suppress the snackbar for a given event. */ type DbxActionSnackbarDisplayConfigGeneratorFunction = (input: DbxActionSnackbarGeneratorInput) => Maybe>; /** * Configuration for generating snackbar display configs per loading state type. * Each property maps a loading state (idle, loading, success, error) to its message configuration. */ interface DbxMakeActionSnackbarGeneratorConfiguration { /** * Configuration shown when the action is idle. */ readonly idle?: GetterOrValue; /** * Configuration shown while the action is loading. */ readonly loading?: GetterOrValue; /** * Configuration shown when the action succeeds. */ readonly success?: GetterOrValue; /** * Configuration shown when the action fails. */ readonly error?: GetterOrValue; } /** * Per-event snackbar configuration that extends the base display config with undo button text. * The `action` field from {@link DbxActionSnackbarDisplayConfig} is omitted because undo actions * are configured separately via the generator input. */ interface DbxMakeActionSnackbarGeneratorEventConfiguration extends Omit { /** * Label for the undo button. Defaults to "Undo" if not specified. */ readonly undoButtonText?: string; } /** * Creates a generator function that produces snackbar display configurations based on * the current loading state type. If an undo input is provided, an undo action button * is included in the generated config. * * @param config - Per-state message configurations (idle, loading, success, error). * @returns Maps generator input to a snackbar display configuration. * * @example * ```typescript * const generator = makeDbxActionSnackbarDisplayConfigGeneratorFunction({ * loading: { message: 'Processing...' }, * success: { message: 'Done!', button: 'Ok' }, * error: { message: 'Failed', button: 'X' } * }); * ``` * @__NO_SIDE_EFFECTS__ */ declare function makeDbxActionSnackbarDisplayConfigGeneratorFunction(config: DbxMakeActionSnackbarGeneratorConfiguration): DbxActionSnackbarDisplayConfigGeneratorFunction; /** * Injection token for providing a custom {@link DbxActionSnackbarServiceConfig}. */ declare const DBX_ACTION_SNACKBAR_SERVICE_CONFIG: InjectionToken; /** * Default snackbar display duration in milliseconds (4 seconds). */ declare const DEFAULT_SNACKBAR_DIRECTIVE_DURATION: number; /** * Maps snackbar type keys (e.g. "save", "delete") to their generator configurations * for producing display configs per loading state. */ interface DbxActionSnackbarEventMakeConfig { [key: string]: DbxMakeActionSnackbarGeneratorConfiguration; } /** * Root-level configuration for the snackbar service, controlling the component class, * positioning, default durations, and per-type message configurations. */ interface DbxActionSnackbarServiceConfig { /** * Component class to render inside the snackbar. Defaults to {@link DbxActionSnackbarComponent}. */ readonly componentClass: Type; /** * Snackbar positioning overrides. */ readonly snackbar?: Pick; /** * Default duration for snackbars without an action. */ readonly defaultDuration?: Milliseconds; /** * Default duration for snackbars that include an undo action. */ readonly defaultUndoDuration?: Milliseconds; /** * Per-type message configurations (e.g. "save", "create", "delete"). */ readonly eventTypeConfigs: DbxActionSnackbarEventMakeConfig; } /** * Application-wide service for opening action snackbars and generating display configurations * from registered type presets. Merges user-provided config with built-in defaults. * * @example * ```typescript * const service = inject(DbxActionSnackbarService); * service.openSnackbar({ message: 'Item saved!', button: 'Ok' }); * ``` */ declare class DbxActionSnackbarService { readonly matSnackBar: MatSnackBar; readonly config: DbxActionSnackbarServiceConfig; get componentClass(): Type; get eventTypeConfigs(): DbxActionSnackbarEventMakeConfig; /** * Opens a new snackbar with the given display configuration, merging with global defaults. * * @param config - Display configuration for the snackbar content and behavior. * @returns A reference to the opened Material snackbar. */ openSnackbar(config: DbxActionSnackbarDisplayConfig): MatSnackBarRef; /** * Generates a snackbar display configuration for the given type and event input, * using the registered event type configs. Returns `undefined` if no config is found for the type. * * @param type - The snackbar type key (e.g. "save", "delete"), or undefined to use "none". * @param input - The generator input containing the event and optional undo configuration. * @returns The generated display configuration, or `undefined` if no config is registered for the given type. */ generateDisplayConfig(type: Maybe, input: DbxActionSnackbarGeneratorInput): Maybe>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵprov: _angular_core.ɵɵInjectableDeclaration>; } /** * Built-in default snackbar message configurations for common action types * such as create, save, delete, merge, cancel, restore, and refresh. * Each type provides loading, success, and error messages. */ declare const DBX_ACTION_SNACKBAR_DEFAULTS: DbxActionSnackbarEventMakeConfig; /** * Displays a Material snackbar notification when the parent action transitions between loading states * (loading, success, error). Supports built-in message presets via `dbxActionSnackbarDefault` and * custom generator functions via the `dbxActionSnackbar` input. * * @dbxWebComponent * @dbxWebSlug action-snackbar * @dbxWebCategory action * @dbxWebRelated action-snackbar-error, action-confirm, error-snackbar * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html * * ``` */ declare class DbxActionSnackbarDirective implements OnInit { readonly source: DbxActionContextStoreSourceInstance; readonly dbxActionSnackbarService: DbxActionSnackbarService; readonly dbxActionSnackbarDefault: _angular_core.InputSignal>; readonly dbxActionSnackbarUndo: _angular_core.InputSignal>>; readonly dbxActionSnackbar: _angular_core.InputSignalWithTransform, "" | Maybe>; protected readonly _sub: _dereekb_rxjs.SubscriptionObject; ngOnInit(): void; protected buildConfigurationForEvent(event: DbxActionSnackbarEvent): Maybe>; protected showSnackbarForConfiguration(config: DbxActionSnackbarDisplayConfig, _event: DbxActionSnackbarEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[dbxActionSnackbar]", never, { "dbxActionSnackbarDefault": { "alias": "dbxActionSnackbarDefault"; "required": false; "isSignal": true; }; "dbxActionSnackbarUndo": { "alias": "dbxActionSnackbarUndo"; "required": false; "isSignal": true; }; "dbxActionSnackbar": { "alias": "dbxActionSnackbar"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Bundles the snackbar component and directive for convenient import. */ declare class DbxActionSnackbarModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Abstract base directive for dialog components that automatically close on a successful route transition. * * Provides access to the dialog's injected data and a reference to close or return a value from the dialog. */ declare abstract class AbstractDialogDirective extends AbstractTransitionWatcherDirective { readonly data: D; readonly dialogRef: MatDialogRef; protected updateForSuccessfulTransition(): void; returnValue(value?: R): void; close(value?: R): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, {}, never, never, true, never>; } /** * Calculates and applies a dynamic height to a Material expansion panel header based on text content. * * Sets the `--mat-expansion-header-collapsed-state-height` and `--mat-expansion-header-expanded-state-height` * CSS custom properties. On small screens, the estimated line count is scaled up to account for text wrapping. * If the calculated height is zero or nullish, no style override is applied. * * @example * ```html * * * {{ item.title }} * *

Panel content

* * ``` */ declare class DbxAccordionHeaderHeightDirective { private readonly _screenMediaService; /** * The base height of the header. */ readonly dbxAccordionHeaderHeight: _angular_core.InputSignal>; /** * The amount of height to add to the header when expanded. */ readonly expandedHeightIncrease: _angular_core.InputSignal>; /** * The maximum allowed height of the header. */ readonly maxHeaderHeight: _angular_core.InputSignal>; /** * Text used to help determine the height of the header. * * Height will stay static to the given header height when this is not set. * * Ignored if heightTextLines is set. */ readonly heightText: _angular_core.InputSignal>; /** * The number of characters used for calculating a line. */ readonly heightTextLineLength: _angular_core.InputSignal; /** * Number of lines of text to use for the height calculation. */ readonly heightTextLines: _angular_core.InputSignal>; /** * The amount of height to add for every line of text. */ readonly heightTextLineHeight: _angular_core.InputSignal; /** * Multiplier to apply to the height on small screens. */ readonly heightTextSmallScreenMultiplier: _angular_core.InputSignal>; readonly widthTypeSignal: _angular_core.Signal<_dereekb_dbx_web.ScreenMediaWidthType | undefined>; readonly expansionPanelHeightSignal: _angular_core.Signal>; readonly expansionPanelStyleSignal: _angular_core.Signal>>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * An kebab-case style name that uniquely identifies a styling for an app. * * Examples: 'doc-app' */ 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 */ type DbxStyleClassSuffix = DbxStyleClassCleanSuffix | DbxStyleClassDashSuffix; /** * A DbxStyleClassSuffix that does not start with a dash. * * Dark mode is an example, with the suffix 'dark'. */ type DbxStyleClassCleanSuffix = CharacterPrefixSuffixCleanString; /** * A DbxStyleClassSuffix that starts with a dash. * * Dark mode is an example, with the suffix '-dark'. */ type DbxStyleClassDashSuffix = DashPrefixString; /** * Strips a leading dash from a style class suffix string, producing a clean suffix. */ declare const dbxStyleClassCleanSuffix: { (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 */ type DbxStyleClass = string | `${DbxStyleName}${DbxStyleClassSuffix}`; /** * The standard suffix used for dark mode styling. */ declare const DBX_DARK_STYLE_CLASS_SUFFIX: DbxStyleClassSuffix; /** * Configuration for an application's style, including the root style class and allowed suffixes for variant modes (e.g., dark mode). */ 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; } /** * Supplemental classes / inline styles (CSS custom properties) applied on top of the configured global style. * * Used by `DbxStyleService` to layer additional styling onto `document.body` (via `DbxStyleBodyDirective`) without * replacing the configured root style class — e.g. the style-demo controls forward their active levers here so they * repaint the entire app. */ interface DbxStyleSupplement { /** * Supplemental classes added alongside the configured root style class. */ readonly classes?: Maybe; /** * Supplemental inline styles (typically CSS custom properties such as `--mat-sys-*`). */ readonly style?: Maybe; } /** * Flattened body application: the root style class plus any supplement classes, alongside the supplement inline styles. * * Emitted by `DbxStyleService.styleApplication$` and consumed by `DbxStyleBodyDirective` to apply both classes and * inline custom properties to `document.body`. */ interface DbxStyleApplication { /** * The root style class followed by any supplement classes. */ readonly classes: CssClass[]; /** * The supplement inline styles (empty when no supplement is set). */ readonly style: CssStyleObject; } /** * The five core Material Design M3 theme palette colors. * * - 'secondary' is the M3 secondary palette color (equivalent to 'accent') * - 'tertiary' is the M3 tertiary palette color */ type DbxThemeColorMain = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'warn'; /** * Additional semantic theme colors beyond the core Material palettes. */ type DbxThemeColorExtra = 'notice' | 'ok' | 'success' | 'grey'; /** * Secondary theme colors representing neutral or inactive states. */ type DbxThemeColorExtraSecondary = 'default' | 'disabled'; /** * Union of main and extra theme colors, excluding secondary states. */ type DbxThemeColorMainOrExtra = DbxThemeColorMain | DbxThemeColorExtra; /** * All available theme colors, including main, extra, and secondary variants. */ type DbxThemeColor = DbxThemeColorMainOrExtra | DbxThemeColorExtraSecondary; declare const DBX_THEME_COLORS_MAIN: DbxThemeColorMain[]; declare const DBX_THEME_COLORS_EXTRA: DbxThemeColorExtra[]; declare const DBX_THEME_COLORS_EXTRA_SECONDARY: DbxThemeColorExtraSecondary[]; declare const DBX_THEME_COLORS: DbxThemeColor[]; /** * Background mix percentage (0-100) that controls the opacity of a themed background color. * * Used with `--dbx-color-bg-tone` to create tonal/muted color appearances. * A value of `100` produces a fully opaque background, while lower values (e.g. `18`) produce a subtle tonal effect. */ type DbxColorTone = number; /** * Identifier for a {@link DbxColorConfigTemplate} registered with the `DbxColorService`. * * Use a kebab-case string (e.g. `'brand-positive'`) to reference a template from a * {@link DbxColorConfig} via {@link DbxColorConfig.template}. */ type DbxColorConfigTemplateKey = string; /** * Reusable, named {@link DbxColorConfig} preset registered with the `DbxColorService`. * * Templates are looked up by their {@link key} and merged beneath an input * {@link DbxColorConfig} that references them via {@link DbxColorConfig.template}. */ interface DbxColorConfigTemplate { /** * Unique key identifying this template. */ readonly key: DbxColorConfigTemplateKey; /** * Template values applied when an input {@link DbxColorConfig} references this template. */ readonly config: DbxColorConfig; /** * When true, the template participates in the "curated color set" — the pool of colors used by * deterministic color pickers (e.g. avatar initials backgrounds via {@link dbxCuratedColorConfigForString}). */ readonly curated?: Maybe; } /** * Config object accepted by `[dbxColor]` / `[dbxTextColor]` when applying an arbitrary (non-themed) color. * * Any valid CSS color value is allowed: hex, `rgb()`, `hsl()`, `var(...)`, `color-mix(...)`, etc. * * A {@link template} can also be set to reference a registered {@link DbxColorConfigTemplate} * via the `DbxColorService`; the template's fields are merged in as defaults, with the * input config's fields taking precedence. * * @example * ```html *
Hex
*
Tonal
* Text only *
Template
*
Template with override
* ``` */ interface DbxColorConfig { /** * Optional key of a {@link DbxColorConfigTemplate} registered with the `DbxColorService`. * * When set, the referenced template's fields are merged beneath this config (input fields win). */ readonly template?: Maybe; /** * Background/vibrant color when used with `[dbxColor]`; foreground color when used with `[dbxTextColor]`. * * Optional when a {@link template} is set that supplies the color. */ readonly color?: string; /** * Contrast/foreground color used by `[dbxColor]`. Ignored by `[dbxTextColor]`. */ readonly contrast?: string; /** * Optional opacity (0-100). The standalone `[dbxColorTone]` input wins when set. */ readonly tone?: DbxColorTone; /** * Optional explicit tonal-mode flag. Only consulted when the standalone `[dbxColorTone]` input is unset. */ readonly tonal?: boolean; } /** * Union accepted by `[dbxColor]` and `[dbxTextColor]` — either a named theme color or a config object with arbitrary CSS color values. */ type DbxColorInput = DbxThemeColor | DbxColorConfig | ''; /** * Type guard: true when the value is a {@link DbxColorConfig} object (not a named-color string). * * Any non-null object is treated as a config so template-only configs (i.e. `{ template: 'foo' }`) * are detected before the service expands them. * * @param value - The value to test. * @returns `true` when the value is a {@link DbxColorConfig} * * @example * ```ts * isDbxColorConfig('primary'); // false * isDbxColorConfig({ color: '#ff0066' }); // true * isDbxColorConfig({ template: 'brand-positive' }); // true * isDbxColorConfig(undefined); // false * ``` */ declare function isDbxColorConfig(value: Maybe): value is DbxColorConfig; /** * Number of curated colors shipped in the default curated color set. * * Matches the `--dbx-curated-color-1` … `--dbx-curated-color-{@link DBX_CURATED_COLOR_COUNT}` CSS tokens * declared by the dbx-web theme. */ declare const DBX_CURATED_COLOR_COUNT = 12; /** * Key prefix used for the default curated color templates ({@link DBX_CURATED_COLOR_TEMPLATES}). */ declare const DBX_CURATED_COLOR_TEMPLATE_KEY_PREFIX = "curated-"; /** * Default curated color templates ({@link DBX_CURATED_COLOR_COUNT} entries). * * Each template is flagged {@link DbxColorConfigTemplate.curated} and references the * `--dbx-curated-color-N` / `--dbx-curated-color-N-contrast` CSS tokens (rather than literal color * values) so applications can override the palette by overriding those tokens. The `var(...)` values * are applied directly by `[dbxColor]` even when the `DbxColorService` has not expanded the template. * * Registered automatically by the `DbxColorService` so the curated set is always available. */ declare const DBX_CURATED_COLOR_TEMPLATES: DbxColorConfigTemplate[]; /** * Deterministically selects a curated {@link DbxColorConfig} for the given string. * * The same input string always maps to the same curated color (via {@link hashStringToNumber}), * making it suitable for stable, name-derived colors such as avatar initials backgrounds. The * returned config includes the picked template's `key` (so the `DbxColorService` can re-expand it * with app overrides) alongside its `var(...)`-backed color values (so it renders even without the service). * * @param value - The string to derive a curated color from (e.g. a person's name). * @param templates - Curated templates to pick from. Defaults to {@link DBX_CURATED_COLOR_TEMPLATES}. * @returns The selected curated config, or `null` when the value is blank or no templates are available. * * @example * ```ts * dbxCuratedColorConfigForString('Michelle B'); * // -> { color: 'var(--dbx-curated-color-3)', contrast: 'var(--dbx-curated-color-3-contrast)', template: 'curated-3' } * ``` */ declare function dbxCuratedColorConfigForString(value: Maybe, templates?: DbxColorConfigTemplate[]): Maybe; /** * CSS class that applies the background `color-mix` rule using the host's inline `--dbx-bg-color-current` / `--dbx-color-current` values. * * Used by `[dbxColor]` when bound to a {@link DbxColorConfig}. */ declare const DBX_COLOR_CUSTOM_BG_CSS_CLASS: CssClass; /** * CSS class that applies `color: var(--dbx-color-current)` only. * * Used by `[dbxTextColor]` when bound to a {@link DbxColorConfig}. */ declare const DBX_COLOR_CUSTOM_TEXT_CSS_CLASS: CssClass; /** * Returns the token-providing CSS class name for a themed background color. * * Under the token-only contract the returned `dbx-{color}-bg` classes declare the `--dbx-bg-color-current` / * `--dbx-color-current` custom properties but paint nothing on their own — painting is performed by the * `.dbx-color-bg` utility (or a `.dbx-color`-scoped component) reading those tokens. For named colors this returns the * `dbx-{color}-bg` token class; for a {@link DbxColorConfig} it returns {@link DBX_COLOR_CUSTOM_BG_CSS_CLASS} so static * (non-directive) callers still paint, while the `[dbxColor]` directive itself bypasses this for configs and supplies the * tokens through inline style bindings instead. * * @param color - The theme color, color config, or nullish/empty for the default class. * @returns The CSS class name for the themed background (e.g., `'dbx-primary-bg'`, `'dbx-color-bg'`, or `'dbx-default'`) * * @example * ```ts * dbxColorBackground('primary'); // 'dbx-primary-bg' * dbxColorBackground({ color: '#ff0066' }); // 'dbx-color-bg' * dbxColorBackground(undefined); // 'dbx-default' * ``` */ declare function dbxColorBackground(color: Maybe): CssClass; /** * Returns the CSS token reference string for a given {@link DbxThemeColor}. * * @example * ```ts * dbxThemeColorCssToken('primary'); // '--dbx-primary-color' * dbxThemeColorCssToken(undefined); // undefined * ``` * * @param color - the theme color, or nullish/empty for the default * @param returnDefault - when true, returns the default token instead of undefined for unrecognized colors * @returns CSS token reference string (e.g., `'--dbx-primary-color'`) or undefined if the color is not valid. */ declare function dbxThemeColorCssToken(color: Maybe, returnDefault: true): CssToken; declare function dbxThemeColorCssToken(color: Maybe, returnDefault?: Maybe): Maybe; /** * Returns the CSS token var() reference string for a given {@link DbxThemeColor}. * * @example * ```ts * dbxThemeColorCssTokenVar('primary'); // 'var(--dbx-primary-color)' * dbxThemeColorCssTokenVar(undefined); // undefined * ``` * * @param color - the theme color, or nullish/empty for the default * @param returnDefault - when true, returns the default token var instead of undefined for unrecognized colors * @returns CSS token var() reference string (e.g., `'var(--dbx-primary-color)'`) or undefined if the color is not valid. */ declare function dbxThemeColorCssTokenVar(color: Maybe, returnDefault: true): CssTokenVar; declare function dbxThemeColorCssTokenVar(color: Maybe, returnDefault?: Maybe): Maybe; /** * Arbitrary string selector used to differentiate avatars by category or context. */ type DbxAvatarSelector = string; /** * Arbitrary key used to configure an avatar from a predefined set of avatar options. */ type DbxAvatarKey = string; /** * Shape style applied to the avatar container. Defaults to `'circle'` when not specified. */ type DbxAvatarStyle = 'circle' | 'square'; /** * Size variant for the avatar display. Controls the rendered dimensions of the avatar. */ type DbxAvatarSize = 'small' | 'normal' | 'large'; /** * How an avatar image is fitted into the avatar box. * * `'cover'` fills the box and crops (the right choice for a photo); `'contain'` fits the whole image * inside the box (the right choice for a brand logo, which must never be cropped). */ type DbxAvatarImageFit = 'cover' | 'contain'; /** * Contextual information for displaying an avatar, including its image URL, fallback icon, style, and user association. * * Passed to avatar components via the {@link DBX_AVATAR_CONTEXT_DATA_TOKEN} injection token. */ interface DbxAvatarContext { /** * An arbitrary discriminator used to differentiate avatars. */ readonly selector?: Maybe; /** * User identifier. * * May be used in some cases to display a user-specific avatar. */ readonly uid?: Maybe; /** * A full website URL to an avatar image. */ readonly url?: Maybe; /** * Name or characters used to render initials (e.g. `'Michelle B'` -> `'MB'`, `'BB'` -> `'BB'`) on a * curated color background when no avatar image is shown. The same value always maps to the same * curated color. */ readonly name?: Maybe; /** * Arbitrary key that is used to configure an avatar. */ readonly key?: Maybe; /** * The avatar style. */ readonly style?: DbxAvatarStyle; /** * Icon name to use for the fallback avatar when no image is provided. */ readonly icon?: Maybe; /** * If true, when the image cannot be loaded then the entire avatar view should be hidden. */ readonly hideOnError?: Maybe; /** * If true, the avatar renders with the `` presentation: the avatar view takes the * `dbx-icon-tile` class, so the `--dbx-icon-tile-*` customizations and the tile's `[dbxColor]` * surface apply. Use it for a branded/iconographic avatar rather than a person's photo. */ readonly tile?: Maybe; /** * Color painted behind the avatar. Pair with {@link colorTone} for a tonal (muted) surface. */ readonly color?: Maybe; /** * Background tone level (0-100) for {@link color}. */ readonly colorTone?: Maybe; /** * How the avatar image fills the avatar box. Defaults to `'contain'` in {@link tile} mode (a logo * must not be cropped) and `'cover'` otherwise. */ readonly imageFit?: Maybe; /** * Optional CSS filter applied to the avatar image (e.g. `'brightness(0) invert(1)'` to force a * single-color logo to render white). */ readonly imageFilter?: Maybe; /** * If true, `DbxAvatarViewService.defaultAvatarUrl` is not used when no url is available. * * That default is an app-wide *person* placeholder; an avatar that means to fall through to its * {@link icon} (a provider tile, say) has to be able to opt out of it. */ readonly ignoreDefaultUrl?: Maybe; } /** * Injection token for the avatar context data. */ declare const DBX_AVATAR_CONTEXT_DATA_TOKEN: InjectionToken; /** * Injection component configuration for an avatar view, excluding the `injector` property. * * The injector is managed internally by {@link DbxAvatarComponent} to provide * {@link DBX_AVATAR_CONTEXT_DATA_TOKEN} with the current avatar context. */ type DbxAvatarInjectionComponentConfig = Omit; /** * Returns a component configuration for the given avatar context, allowing context-specific avatar rendering. * * Return `null` or `undefined` to fall back to the default avatar component. */ type DbxAvatarComponentForContextFunction = (context: DbxAvatarContext) => Maybe; /** * Abstract configuration class for customizing the avatar view service defaults. * * Provide this via Angular DI to configure default URLs, icons, and component overrides * for all avatar instances in the application. */ declare abstract class DbxAvatarViewServiceConfig { /** * The default avatar URL to use in DbxAvatarViewComponent if no other url is available */ readonly defaultAvatarUrl?: Maybe; /** * The default fallback icon to use when no avatar image is provided. */ readonly defaultAvatarIcon?: Maybe; /** * The default fallback icon to use when an avatar image is provided but fails to load. */ readonly defaultAvatarErrorIcon?: Maybe; /** * Overrides the default avatar component. */ readonly defaultAvatarComponentConfig?: Maybe; /** * Custom function that returns a DbxInjectionComponentConfig for the given context. */ readonly avatarComponentForContext?: DbxAvatarComponentForContextFunction; } /** * Root-level service that manages avatar defaults and resolves the avatar component to render for a given context. * * Provides fallback URLs, icons, and component configurations used by {@link DbxAvatarComponent} * and {@link DbxAvatarViewComponent}. Configure application-wide defaults by providing {@link DbxAvatarViewServiceConfig}. */ declare class DbxAvatarViewService { private readonly _serviceConfig; private _defaultAvatarUrl; private _defaultAvatarIcon; private _defaultAvatarErrorIcon; private _defaultAvatarComponentConfig; private _avatarComponentForContext?; /** * Resolves the injection component configuration for the given avatar context. * * Falls back to the default component config if no custom resolver is configured or if it returns null. * * @param context - The avatar context used to resolve the appropriate component configuration. * @returns The resolved injection component config, or the default if no custom resolver matches. */ avatarComponentForContext(context: DbxAvatarContext): DbxAvatarInjectionComponentConfig; get defaultAvatarUrl(): Maybe; get defaultAvatarIcon(): Maybe; get defaultAvatarErrorIcon(): Maybe; /** * Sets the default avatar image URL used when no context-specific URL is provided. * * @param url - The URL to use as the default avatar image, or nullish to clear. */ setDefaultAvatarUrl(url: Maybe): void; /** * Sets the default Material icon name used as a fallback when no avatar image is available. * * @param icon - The Material icon name to use, or nullish to clear. */ setDefaultAvatarIcon(icon: Maybe): void; /** * Sets the Material icon name displayed when the avatar image fails to load. * * @param icon - The Material icon name to display on image load error, or nullish to clear. */ setDefaultAvatarErrorIcon(icon: Maybe): void; /** * Overrides the default component used to render avatars when no context-specific component is resolved. * * @param config - The injection component config to use as the new default. */ setDefaultAvatarComponentConfig(config: DbxAvatarInjectionComponentConfig): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Renders an avatar by dynamically injecting the appropriate avatar view component based on the provided context. * * Merges individual input properties with the optional `context` input and delegates rendering * to the component resolved by {@link DbxAvatarViewService}. Supports size variants via CSS classes. * * Renders an image when one is available, then name initials on a curated color, then a Material icon. * With `[avatarTile]` the avatar takes the `` presentation — every `--dbx-icon-tile-*` * customization applies and `[avatarColor]` / `[avatarColorTone]` paint the tile surface — which makes * it the right choice for a branded row (a connected app, an integration) rather than a person. * * @dbxWebComponent * @dbxWebSlug avatar * @dbxWebCategory layout * @dbxWebRelated icon-tile, dbx-color, avatar-view * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` * * @example * ```html * * * ``` * * @example * ```html * * ``` */ declare class DbxAvatarComponent { readonly injector: Injector; readonly avatarService: DbxAvatarViewService; readonly context: _angular_core.InputSignal; readonly avatarSelector: _angular_core.InputSignal>; readonly avatarUid: _angular_core.InputSignal>; readonly avatarUrl: _angular_core.InputSignal>; readonly avatarName: _angular_core.InputSignal>; readonly avatarKey: _angular_core.InputSignal>; readonly avatarIcon: _angular_core.InputSignal>; readonly avatarStyle: _angular_core.InputSignal>; readonly avatarSize: _angular_core.InputSignal>; readonly avatarHideOnError: _angular_core.InputSignal>; readonly avatarTile: _angular_core.InputSignal>; readonly avatarColor: _angular_core.InputSignal>; readonly avatarColorTone: _angular_core.InputSignal>; readonly avatarImageFit: _angular_core.InputSignal>; readonly avatarImageFilter: _angular_core.InputSignal>; readonly avatarIgnoreDefaultUrl: _angular_core.InputSignal>; readonly contextSignal: _angular_core.Signal; readonly configSignal: _angular_core.Signal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Configuration provided in the root module/environment for seeding {@link DbxColorService} with initial templates. */ declare abstract class DbxColorServiceConfig { /** * Templates to register at service construction time. */ abstract readonly templates?: Maybe; } /** * Service that registers named {@link DbxColorConfigTemplate} entries and expands * {@link DbxColorConfig} values that reference a template by key. * * Seeded via `provideDbxStyleService({ dbxColorServiceConfig: { templates: [...] } })`, * then injected by {@link DbxColorDirective} and {@link DbxTextColorDirective} to resolve * template references at render time. * * @dbxWebComponent * @dbxWebSlug color-service * @dbxWebCategory layout * @dbxWebRelated color, text-color, style-service * * @example * ```ts * const colorService = inject(DbxColorService); * colorService.register({ key: 'brand-positive', config: { color: '#1f9b59', contrast: 'white', tone: 18 } }); * colorService.expandColorConfig({ template: 'brand-positive' }); * // -> { template: 'brand-positive', color: '#1f9b59', contrast: 'white', tone: 18 } * ``` */ declare class DbxColorService { private readonly _templates; constructor(); /** * Registers one or more {@link DbxColorConfigTemplate} entries. * * @param templates - The template(s) to register. * @param override - Whether existing entries with the same key should be replaced (default true) */ register(templates: ArrayOrValue, override?: boolean): void; /** * Returns whether a template with the given key has been registered. * * @param key - The template key to check. * @returns True when a template is registered under the given key. */ hasTemplate(key: DbxColorConfigTemplateKey): boolean; /** * Returns the {@link DbxColorConfigTemplate} registered under the given key, or undefined if none. * * @param key - The template key to look up. * @returns The registered template, or undefined when no template matches. */ getTemplate(key: DbxColorConfigTemplateKey): Maybe; /** * Returns all currently registered template keys. * * @returns Array of all registered template keys. */ getAllRegisteredTemplateKeys(): DbxColorConfigTemplateKey[]; /** * Returns all registered templates flagged as part of the curated color set, in registration order. * * Includes the default {@link DBX_CURATED_COLOR_TEMPLATES} plus any app-registered curated templates. * * @returns The curated templates in insertion order. */ getCuratedColorTemplates(): DbxColorConfigTemplate[]; /** * Deterministically selects a curated {@link DbxColorConfig} for the given string from the registered curated set. * * The same input always maps to the same curated color, making it suitable for stable, name-derived * colors such as avatar initials backgrounds. * * @param value - The string to derive a curated color from (e.g. a person's name). * @returns The selected curated config, or `null` when the value is blank or no curated templates are registered. */ getCuratedColorForValue(value: Maybe): Maybe; /** * Resolves the {@link DbxColorConfig.template} reference (if any) and merges the template's * fields beneath the input config. Input config fields override the template's fields. * * Returns the input unchanged when no template is set or when the template key is unknown. * * @param config - The input config to expand. * @returns An expanded config, or the input unchanged when no expansion applies. * * @example * ```ts * service.register({ key: 'brand-positive', config: { color: '#1f9b59', contrast: 'white', tone: 18 } }); * service.expandColorConfig({ template: 'brand-positive' }); * // -> { template: 'brand-positive', color: '#1f9b59', contrast: 'white', tone: 18 } * service.expandColorConfig({ template: 'brand-positive', tone: 60 }); * // -> { template: 'brand-positive', color: '#1f9b59', contrast: 'white', tone: 60 } * ``` */ expandColorConfig(config: Maybe): Maybe; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Provides themed color *tokens* to the host element — it never paints a background itself. * * Accepts either a {@link DbxThemeColor} string (e.g. `'primary'`, `'success'`) or a {@link DbxColorConfig} * object carrying arbitrary CSS color values (any hex, `rgb()`, `hsl()`, `var(...)`, `color-mix(...)`, etc.). * The directive sets the `--dbx-bg-color-current` / `--dbx-color-current` (and tone) custom properties and adds the * `.dbx-color` marker class, leaving the actual painting to either the explicit `.dbx-color-bg` utility on the same * element or a colored-surface component's own `.dbx-color`-scoped SCSS (e.g. ``, ``, ``, * ``, ``) that reads the inherited tokens. * * Optionally set {@link dbxColorTone} (0-100) to control background opacity for a tonal/muted appearance. * When tonal mode is active, the `dbx-color-tonal` CSS class is added and a CSS rule overrides the text * color to the vibrant color (via `--dbx-bg-color-current`). * * The standalone `[dbxColorTone]` input wins over `config.tone` when both are set; the same precedence * applies to tonal mode. * * @dbxWebComponent * @dbxWebSlug color * @dbxWebCategory layout * @dbxWebRelated text-color, color-service * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html * *
Themed background
*
Tonal themed
*
Custom hex
* * * Bar paints itself * * ``` */ declare class DbxColorDirective { private readonly _colorService; /** * The color to provide tokens for. Declared as a `model` so a colored-surface component on the same host (e.g. * `dbx-button`) can push its resolved color into the directive, keeping it the single token provider on the element. */ readonly dbxColor: _angular_core.ModelSignal>; /** * Background tone level (0-100). When set, the background becomes semi-transparent * and text color switches to the vibrant theme color for a tonal appearance. * * Declared as a `model` for the same reason as {@link dbxColor}: a colored-surface component on the same host (e.g. * `dbx-avatar-view`) resolves its tone from its own inputs/context and pushes it here, keeping this directive the * single token provider on the element. */ readonly dbxColorTone: _angular_core.ModelSignal>; /** * Whether a color is currently bound. When nothing is bound the directive is fully inert — it adds no marker class * and no token class — so color tokens inherited from a `[dbxColor]` ancestor pass through untouched (important for * components that host this directive unconditionally, e.g. `dbx-button` inside a tonal `[dbxColor]` card). */ readonly hasColorSignal: _angular_core.Signal; /** * Applies the named `dbx-{color}-bg` token class for a {@link DbxThemeColor} string, or `''` both for a * {@link DbxColorConfig} (whose tokens are supplied by the inline `--dbx-bg-color-current` / `--dbx-color-current` * style bindings instead) and when no color is bound (inert; inherited tokens pass through). The directive is a pure * token provider — none of these classes paint a background; painting is done by the `.dbx-color-bg` utility or a * component's own `.dbx-color`-scoped SCSS. */ readonly cssClassSignal: _angular_core.Signal; private readonly _configSignal; /** * Inline `--dbx-bg-color-current` value applied when a {@link DbxColorConfig} is bound. Resolves to `null` in string mode so the named `.dbx-{color}-bg` class supplies the variable instead. */ readonly bgColorStyleSignal: _angular_core.Signal; /** * Inline `--dbx-color-current` value applied when a {@link DbxColorConfig} is bound. Resolves to `null` (and inherits from the named bg class) when omitted or in string mode. */ readonly colorStyleSignal: _angular_core.Signal; /** * Effective tone used for opacity. The standalone `[dbxColorTone]` input wins when set; otherwise `config.tone` applies. */ readonly effectiveToneSignal: _angular_core.Signal>; /** * Whether tonal mode is active. Adds the `dbx-color-tonal` CSS class which * overrides the text color to the vibrant theme color via CSS rather than * an inline style binding (which would conflict with `[ngStyle]`). * * Precedence: an input-tone always implies tonal (existing behavior); otherwise * `config.tonal` wins when explicitly set, then falls back to inferring tonal mode * from `config.tone`. */ readonly isTonalSignal: _angular_core.Signal; /** * Sets `--dbx-color-bg-tone` on the host to control the background opacity via `color-mix` in the `-bg` class mixin. */ readonly bgToneStyleSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Displays an avatar image with automatic fallback to name initials and then a Material icon when no image is * available or when the image fails to load. * * Supports circle and square styles, and can optionally hide entirely on image error. * Receives context via the {@link DBX_AVATAR_CONTEXT_DATA_TOKEN} injection token or direct inputs. * * In tile mode the host also takes the `dbx-icon-tile` class, so the `--dbx-icon-tile-*` customizations and the * tile's own `.dbx-color` surface rule apply to the avatar. The color is pushed into the host * {@link DbxColorDirective} rather than bound by the caller, since the avatar view is usually created dynamically * by {@link DbxAvatarComponent} and has no template bindings of its own. * * @example * ```html * * ``` */ declare class DbxAvatarViewComponent { readonly defaultContext: Maybe; readonly avatarService: DbxAvatarViewService; readonly colorService: DbxColorService | null; readonly defaultAvatarUrl: Maybe; readonly avatarUrl: _angular_core.InputSignal>; readonly avatarErrorUrlSignal: _angular_core.WritableSignal>; readonly avatarName: _angular_core.InputSignal>; readonly avatarStyle: _angular_core.InputSignal>; readonly avatarIcon: _angular_core.InputSignal>; readonly avatarHideOnError: _angular_core.InputSignal>; readonly avatarTile: _angular_core.InputSignal>; readonly avatarColor: _angular_core.InputSignal>; readonly avatarColorTone: _angular_core.InputSignal>; readonly avatarImageFit: _angular_core.InputSignal>; readonly avatarImageFilter: _angular_core.InputSignal>; readonly avatarIgnoreDefaultUrl: _angular_core.InputSignal>; constructor(); readonly avatarHideOnErrorSignal: _angular_core.Signal; readonly avatarTileSignal: _angular_core.Signal; readonly avatarColorSignal: _angular_core.Signal>; readonly avatarColorToneSignal: _angular_core.Signal>; readonly avatarImageFilterSignal: _angular_core.Signal>; /** * A tile is a branded surface, so its image defaults to `'contain'` — cropping a logo is never right. */ readonly avatarImageFitSignal: _angular_core.Signal; readonly avatarIgnoreDefaultUrlSignal: _angular_core.Signal; readonly currentAvatarUrlSignal: _angular_core.Signal>; readonly hasAvatarErrorSignal: _angular_core.Signal; readonly avatarUrlSignal: _angular_core.Signal>; readonly hasAvatarSignal: _angular_core.Signal; readonly missingAvatarSignal: _angular_core.Signal; readonly avatarStyleClassSignal: _angular_core.Signal<"circle" | "square">; readonly hideAvatarSignal: _angular_core.Signal; readonly avatarIconSignal: _angular_core.Signal; readonly nameSignal: _angular_core.Signal>; readonly initialsSignal: _angular_core.Signal>; readonly hasInitialsSignal: _angular_core.Signal; /** * The curated color the initials are painted on. * * Null when an explicit color is set: the initials surface is 100% of the avatar box, so a curated color would * cover the host's painted surface entirely, and the host's inherited `--dbx-color-bg-tone` would wash it out. */ readonly curatedColorSignal: _angular_core.Signal>; onAvatarImageError(event: Event): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Renders a horizontal bar used to visually group or separate content. * * To give the bar a themed background apply `[dbxColor]` (optionally with `[dbxColorTone]`) directly on the host — * the bar paints itself from the supplied color tokens via its `.dbx-bar.dbx-color` SCSS. The directive itself only * applies the `.dbx-bar` layout class. * * @dbxWebComponent * @dbxWebSlug bar * @dbxWebCategory layout * @dbxWebRelated bar-header, pagebar, button-spacer * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * * * * * ``` */ declare class DbxBarDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * A header bar displaying an optional icon and text label, useful as a section divider. * * To give it a themed background apply `[dbxColor]` directly on the host — the inner `` paints from the * inherited tokens via the `dbx-bar-header.dbx-color .dbx-bar` SCSS. * * @dbxWebComponent * @dbxWebSlug bar-header * @dbxWebCategory layout * @dbxWebRelated bar, pagebar * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * * * ``` */ declare class DbxBarHeaderComponent { readonly text: _angular_core.InputSignal>; readonly icon: _angular_core.InputSignal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * A page-level toolbar with left and right content slots, built on Angular Material's mat-toolbar. * * To give it a themed background apply `[dbxColor]` directly on the host — the inner `mat-toolbar` maps its * `--mat-toolbar-*` colors to the inherited tokens via the `dbx-pagebar.dbx-color mat-toolbar` SCSS. * * @dbxWebComponent * @dbxWebSlug pagebar * @dbxWebCategory layout * @dbxWebRelated bar, navbar * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks, dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html * Title * ``` * * @example * ```html * *

Settings

* * * * ``` */ declare class DbxPagebarComponent { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Module for dbx-bar components. */ declare class DbxBarLayoutModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Resize event used by resizeSignal. * * Maintains the same pattern as https://github.com/NemesLaszlo/angular-resize-event */ interface ResizedEvent { readonly newRect: DOMRectReadOnly; readonly oldRect?: DOMRectReadOnly; readonly isFirst: boolean; } /** * Creates a signal that emits {@link ResizedEvent} values whenever the observed element is resized. * * Must be called in an Angular injection context. Automatically disconnects the ResizeObserver on destroy. * * @param inputElement - The element to observe; if omitted, the host element is injected via `ElementRef` * @returns A read-only signal of resize events. * * @example * ```ts * // In a component: * readonly resize = resizeSignal(); * * readonly widthEffect = effect(() => { * console.log('New width:', this.resize().newRect.width); * }); * ``` */ declare function resizeSignal(inputElement?: ElementRef): Signal; /** * A two-section layout block where the top section has a measured height and the bottom * section fills the remaining vertical space. * * The top section's height is dynamically measured via resize observation. Use the `[top]` * content slot for the fixed-height area and default content for the flexible bottom area. * * @example * ```html * *
Fixed header area
*
Scrollable content area
* * ``` */ declare class DbxTwoBlockComponent { /** * Whether or not the top bar should be fixed in place instead of scrolling with the bottom when content is too tall. */ readonly fixedTop: _angular_core.InputSignal; readonly topHeightSignal: _angular_core.WritableSignal; readonly topHeightPixelsSignal: _angular_core.Signal; viewResized(event: ResizedEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Displays a card-style box with an optional section header, icon, and projected content. * * Supports a named content slot `[sectionHeader]` for custom header actions beside the title. * * @dbxWebComponent * @dbxWebSlug card-box * @dbxWebCategory card * @dbxWebRelated card-box-container, section * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html *

Body

 * ``` * * @example * ```html * * *

Card body content goes here.

* * ``` */ declare class DbxCardBoxComponent { readonly header: _angular_core.InputSignal; readonly icon: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Adds content padding around a card box section. * * Can be used as an element or as an attribute directive on any host element. * * @dbxWebComponent * @dbxWebSlug card-box-container * @dbxWebCategory card * @dbxWebRelated card-box * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html * * * * * ``` */ declare class DbxCardBoxContainerDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Convenience module that imports and exports all card box layout components and directives. * * Includes {@link DbxCardBoxComponent} and {@link DbxCardBoxContainerDirective}. */ declare class DbxCardBoxLayoutModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * State model for the {@link TwoColumnsContextStore}, containing all configuration * flags that control two-column layout visibility and sizing behavior. */ interface TwoColumnsState { /** * Whether or not to reverse the sizing. */ readonly reverseSizing: boolean; /** * Whether or not the right side should be shown. */ readonly showRight: boolean; /** * Overrides showRight if not null. */ readonly showRightOverride?: Maybe; /** * Whether or not there is any registered right content currently. */ readonly hasRight: boolean; /** * Whether or not to allow the left to fill up the screen when no right is shown. */ readonly fullLeft: boolean; /** * Optional ref to use with TwoColumns that use an sref for the back button. */ readonly backRef?: Maybe; /** * Size of the view's total width in pixels. */ readonly totalWidth?: Maybe; /** * Minimum right side size allowed before hiding the left content. */ readonly minRightWidth: number; } /** * Default minimum width in pixels for the right column before the left column is hidden. */ declare const DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH = 320; /** * NgRx ComponentStore that manages the reactive state for a two-column layout. * * Controls column visibility, sizing, back navigation, and responsive behavior. * Typically provided via {@link provideTwoColumnsContext} or the {@link DbxTwoColumnContextDirective}. */ declare class TwoColumnsContextStore extends ComponentStore { private readonly _back; constructor(); readonly hideLeft$: rxjs.Observable; /** * Pipes the current state of reverseSizing. */ readonly reverseSizing$: rxjs.Observable; /** * Pipes the current state of hasRight. */ readonly hasRight$: rxjs.Observable; /** * Pipes the current state of showRight and showRightOverride. */ readonly currentShowRight$: rxjs.Observable; /** * Pipes the current state of showRight and hasRight */ readonly showRight$: rxjs.Observable; /** * Convenience function for the showRight compliment. */ readonly hideRight$: rxjs.Observable; /** * Pipes the current state of fullLeft. */ readonly fullLeft$: rxjs.Observable; /** * Whether or not to show the full left. */ readonly showFullLeft$: rxjs.Observable; /** * Pipes the current backRef value. */ readonly backRef$: rxjs.Observable>>; /** * Emits back events. */ readonly back$: rxjs.Observable; /** * Completely resets the store. */ readonly reset: () => void; /** * Changes the state to show right or not. */ readonly setReverseSizing: (() => void) | ((observableOrValue: Maybe | rxjs.Observable>) => rxjs.Subscription); /** * Changes the state to have right content or not. */ readonly setHasRight: (() => void) | ((observableOrValue: Maybe | rxjs.Observable>) => rxjs.Subscription); /** * Changes the state to show right or not. */ readonly setShowRight: (() => void) | ((observableOrValue: Maybe | rxjs.Observable>) => rxjs.Subscription); /** * Changes the override state to show right or not. */ readonly setShowRightOverride: (() => void) | ((observableOrValue: Maybe | rxjs.Observable>) => rxjs.Subscription); /** * Sets the full left. If undefined is passed, no change occurs. */ readonly setFullLeft: (() => void) | ((observableOrValue: Maybe | rxjs.Observable>) => rxjs.Subscription); /** * Sets the new back ref. */ readonly setBackRef: (() => void) | ((observableOrValue: Maybe> | rxjs.Observable>>) => rxjs.Subscription); /** * Sets the new total width. */ readonly setTotalWidth: (() => void) | ((observableOrValue: Maybe | rxjs.Observable>) => rxjs.Subscription); /** * Sets the new min right width. */ readonly setMinRightWidth: (() => void) | ((observableOrValue: Maybe | rxjs.Observable>) => rxjs.Subscription); /** * Emits a back event. */ back(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Creates Angular providers for a new {@link TwoColumnsContextStore} instance. * * @returns Array of Angular providers that supply a new {@link TwoColumnsContextStore} * * @Component ({ * providers: provideTwoColumnsContext(), * }) * export class MyColumnLayoutComponent { } * ``` * * @example * ```typescript */ declare function provideTwoColumnsContext(): Provider[]; /** * Pre-configured single-column layout that wraps {@link DbxTwoColumnComponent} with full-left mode enabled. * * Provides its own {@link TwoColumnsContextStore} and projects content into the left slot only. * * @example * ```html * *
Top content
*
Main content
* * ``` */ declare class DbxOneColumnComponent { readonly twoColumnsContextStore: TwoColumnsContextStore; /** * Whether this column is within a section page layout. Defaults to `true`. */ readonly inSectionPage: _angular_core.InputSignal; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Listens for back navigation events from the {@link TwoColumnsContextStore} and emits them as an output event. * Attach this directive to any element within a two-column context to respond to back button presses. * * @example * ```html *
*
* *
Sidebar
* Detail * *
*
* ``` */ declare class DbxTwoColumnBackDirective { readonly twoColumnsContextStore: TwoColumnsContextStore; /** * Emits when a back navigation event is triggered from the two-column context store. */ readonly dbxTwoColumnBack: _angular_core.OutputEmitterRef; constructor(); backClicked(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Represents the computed view state of a {@link DbxTwoColumnComponent}, capturing all layout flags * that determine column visibility and sizing behavior. */ interface DbxTwoColumnViewState { readonly showRight: boolean; readonly showFullLeft: boolean; readonly hideLeftColumn: boolean; readonly reverseSizing: boolean; readonly inSectionPage: boolean; } /** * Responsive two-column layout that splits content into a narrower left column and a wider right column. * * The right column contains the primary content. When the viewport is too narrow to fit both columns, * the left column can be automatically hidden based on the configured minimum right width. * * Requires a {@link TwoColumnsContextStore} to be provided by a parent component or directive. * * @dbxWebComponent * @dbxWebSlug two-column * @dbxWebCategory layout * @dbxWebRelated two-column-right * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks, dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html * *
Sidebar
*
Main
* * ``` * * @example * ```html * * * *

Selected item detail.

* * * ``` */ declare class DbxTwoColumnComponent { private readonly _elementRef; readonly twoColumnsContextStore: TwoColumnsContextStore; /** * Whether to reverse the default column sizing so the left column is larger than the right. */ readonly reverseSizing: _angular_core.InputSignal; /** * Whether this two-column layout is rendered within a section page context. */ readonly inSectionPage: _angular_core.InputSignal; /** * Acts as an override to show the right column without having to use dbx-two-column-right or update the context store directly. */ readonly hasRightContent: _angular_core.InputSignalWithTransform>; readonly reverseSizing$: Observable; readonly hideLeftColumn$: Observable; readonly inSectionPage$: Observable; readonly showRight$: Observable; readonly showFullLeft$: Observable; readonly hideLeftColumnSignal: _angular_core.Signal; readonly reverseSizingSignal: _angular_core.Signal; readonly showRightSignal: _angular_core.Signal; readonly cssClasses$: Observable<{ 'right-shown': boolean; 'full-left': boolean; 'hide-left-column': boolean; 'two-column-reverse-sizing': boolean; 'dbx-section-page-two': boolean; }>; readonly cssClassSignal: _angular_core.Signal<{ 'right-shown': boolean; 'full-left': boolean; 'hide-left-column': boolean; 'two-column-reverse-sizing': boolean; 'dbx-section-page-two': boolean; } | undefined>; protected readonly _reverseSizingEffect: _angular_core.EffectRef; protected readonly _hasRightContentEffect: _angular_core.EffectRef; viewResized(_event: ResizedEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Structural directive that provides a new {@link TwoColumnsContextStore} instance to its descendants. * Use this to create an isolated two-column context scope. * * Optionally controls the right column visibility via the `showRight` input. * * @example * ```html *
* *
Sidebar
*
Detail content
* *
* ``` */ declare class DbxTwoColumnContextDirective { readonly twoColumnsContextStore: TwoColumnsContextStore; /** * Override for the right column visibility state. When set, overrides the store's default `showRight` value. */ readonly showRight: _angular_core.InputSignalWithTransform, Maybe>; protected readonly _showRightEffect: _angular_core.EffectRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Enables full-left mode on a {@link DbxTwoColumnComponent}, allowing the left column to expand * to fill the entire width when the right column is not visible. * * The directive value defaults to `true` when applied without a binding. * * @example * ```html * *
Expands to full width when right is hidden
*
Detail content
* * ``` */ declare class DbxTwoColumnFullLeftDirective { private readonly _twoColumnsContextStore; /** * Whether to enable full-left mode. Defaults to `true`. */ readonly fullLeft: _angular_core.InputSignalWithTransform>; protected readonly _fullLeftEffect: _angular_core.EffectRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Header bar directive for two-column layouts. Sits at the top of a column's content area * and provides a flex container for navigation elements, titles, and action buttons. * * @example * ```html * * Header Title * * * ``` */ declare class DbxTwoColumnColumnHeadDirective { /** * Whether the header should use block-level display instead of flex. */ readonly block: _angular_core.InputSignal>; /** * Whether the header should expand to full width. */ readonly full: _angular_core.InputSignal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Wraps right-column content within a {@link DbxTwoColumnComponent} and renders a navigation bar with a back button. * * When this component is created, it automatically registers itself with the {@link TwoColumnsContextStore} * to indicate that right-side content is present. * * @dbxWebComponent * @dbxWebSlug two-column-right * @dbxWebCategory layout * @dbxWebRelated two-column * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks, dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html * Body * ``` * * @example * ```html * * *

Body content

* * ``` */ declare class DbxTwoColumnRightComponent { readonly twoColumnsContextStore: TwoColumnsContextStore; /** * Whether the header area should expand to full width. */ readonly full: _angular_core.InputSignal; /** * Optional title text displayed in the navigation bar header. */ readonly header: _angular_core.InputSignal>; /** * Whether the header should use block-level display. */ readonly block: _angular_core.InputSignal>; /** * Whether to show the default back button. Defaults to `true`. * If a `backRef` is set on the store, that anchor is used instead. */ readonly showBack: _angular_core.InputSignal; readonly alternativeBackRef$: Observable>; readonly alternativeBackRefSignal: _angular_core.Signal>; /** * Minimum right-side width allowed in pixels. */ readonly minRightWidth: _angular_core.InputSignal>; protected readonly _setMinRightWidthEffect: _angular_core.EffectRef; readonly showBackSignal: _angular_core.Signal; constructor(); backClicked(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Sets the back-navigation reference on the {@link TwoColumnsContextStore} from a segue ref or router link. * This controls where the back button in {@link DbxTwoColumnRightComponent} navigates to. * * @example * ```html * *
Sidebar
* Detail view with back to /items * * ``` */ declare class DbxTwoColumnSrefDirective { private readonly _twoColumnsContextStore; /** * The segue reference or router link to use as the back navigation target. */ readonly dbxTwoColumnSref: _angular_core.InputSignal>; protected readonly _dbxTwoColumnSrefEffect: _angular_core.EffectRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Automatically shows the right column when the current route is a child of the configured `backRef`. * * Works with {@link DbxTwoColumnSrefDirective} to determine when the user has navigated away from * the back reference route, and shows the right column accordingly. * * @example * ```html * *
Item list
* Item detail (shown on child routes) * * ``` */ declare class DbxTwoColumnSrefShowRightDirective { private readonly _twoColumnsContextStore; private readonly _dbxRouterService; readonly showRight$: rxjs.Observable; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Module that bundles all two-column layout components and directives for convenient importing. */ declare class DbxTwoColumnLayoutModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Represents the two display density modes: full (default) or compact (reduced spacing/content). */ declare enum CompactMode { FULL = "full", COMPACT = "compact" } /** * Maps each compact mode to a corresponding value of type `T`. */ interface CompactModeOptions { full?: T; compact?: T; } /** * Extends {@link CompactModeOptions} with a default mode fallback used when no mode is provided. */ interface CompactModeDefaultOptions extends CompactModeOptions { defaultMode?: Maybe; } /** * Accepts either a `CompactMode` enum value or a boolean (`true` = compact, `false` = full). */ type CompactModeOption = CompactMode | boolean; /** * Converts a boolean or `CompactMode` value into a normalized `CompactMode`. * `true` maps to `CompactMode.COMPACT`, `false` maps to `CompactMode.FULL`. * * @param input - Boolean or CompactMode value to normalize. * @returns The normalized CompactMode enum value. * * @example * ```ts * compactModeFromInput(true); // CompactMode.COMPACT * compactModeFromInput(CompactMode.FULL); // CompactMode.FULL * ``` */ declare function compactModeFromInput(input: CompactMode | boolean): CompactMode; /** * Maps an observable compact mode stream to the corresponding value from the config. * Falls back to the config's `defaultMode` (or `FULL`) when the observable is nullish. * * @param mode$ - An observable of the current compact mode, or nullish to use the default. * @param config - The mapping configuration containing values for each mode and an optional default. * @returns An observable emitting the mapped value corresponding to the current compact mode. * * @example * ```ts * const value$ = mapCompactModeObs(mode$, { * full: 'large-layout', * compact: 'small-layout', * defaultMode: CompactMode.FULL * }); * ``` */ declare function mapCompactModeObs(mode$: Maybe>, config: CompactModeDefaultOptions): Observable>; /** * State shape for the compact context store, holding the current compact mode. */ interface CompactContextState { mode: CompactMode; } /** * Injectable component store that manages the current {@link CompactMode} state. * Provided at the component level via {@link DbxCompactDirective} and consumed by * child components to adapt their layout density. */ declare class CompactContextStore extends ComponentStore { constructor(); readonly mode$: rxjs.Observable; readonly setMode: (observableOrValue: boolean | CompactMode | rxjs.Observable) => rxjs.Subscription; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Provides a {@link CompactContextStore} to descendant components, allowing them to react * to compact vs. full display mode. The mode is set via the directive's input binding. * * @example * ```html *
* * *
* *
* *
* ``` */ declare class DbxCompactDirective { readonly mode: _angular_core.InputSignal; readonly compactContextStore: CompactContextStore; readonly mode$: rxjs.Observable; protected readonly modeEffect: _angular_core.EffectRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Border opacity preset values. * * - `'lite'` — 50% opacity (default) * - `'full'` — 100% opacity */ type DbxContentBorderOpacity = 'lite' | 'full'; /** * Wraps the host element in a themed dashed border with internal padding. The border color * can be set to any theme color (defaults to `'default'`). Only the border is colored — * text color is not affected. * * The border opacity defaults to `'lite'` (50%). Set `borderOpacity` to `'full'` for * full opacity, or provide a custom percentage string (e.g., `'75%'`). * * @example * ```html * *

Lite primary border (default 50% opacity).

* * * *

Full opacity warn border.

* * *
*

Custom 75% opacity accent border.

*
* ``` */ declare class DbxContentBorderDirective { readonly color: _angular_core.InputSignal; readonly borderOpacity: _angular_core.InputSignal>; readonly borderColorVarSignal: _angular_core.Signal<`var(--${string})`>; readonly borderOpacityValueSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Wraps content in a box container with optional elevation (card-like shadow) and wide layout. * Both `elevate` and `wide` default to `true`. * * @dbxWebComponent * @dbxWebSlug content-box * @dbxWebCategory layout * @dbxWebRelated content, content-elevate, content-pit * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html *
Body
* ``` * * @example * ```html * *

Summary content

* * ``` */ declare class DbxContentBoxDirective { readonly elevate: _angular_core.InputSignal; readonly wide: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Sets the host element to fill the available page height. Use as a wrapper for page-level content blocks. * * @dbxWebComponent * @dbxWebSlug content * @dbxWebCategory layout * @dbxWebRelated content-container, content-page, content-box * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * Body * ``` * * @example * ```html *
*

Standard content body

*
* ``` */ declare class DbxContentDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Padding options for a content container. Controls the horizontal padding around the content. */ type DbxContentContainerPadding = 'none' | 'min' | 'small' | 'normal'; /** * Width constraint options for a content container. Controls the maximum width of the content area. */ type DbxContentContainerWidth = 'small' | 'medium' | 'large' | 'wide' | 'full'; /** * Constrains content to a maximum width with configurable padding. Useful for centering * page content and maintaining readable line lengths. * * @dbxWebComponent * @dbxWebSlug content-container * @dbxWebCategory layout * @dbxWebRelated content, content-page, content-box * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html *
Body
* ``` * * @example * ```html * *

Page body

* * ``` */ declare class DbxContentContainerDirective { readonly grow: _angular_core.InputSignal; readonly padding: _angular_core.InputSignal; readonly topPadding: _angular_core.InputSignal; readonly classConfigSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Applies elevation (box-shadow) styling to the host element, giving it a raised card appearance. * Elevation is enabled by default and can be toggled off. * * @dbxWebComponent * @dbxWebSlug content-elevate * @dbxWebCategory layout * @dbxWebRelated content-box, content-pit * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * Body * ``` * * @example * ```html *
Highlighted block
* ``` */ declare class DbxContentElevateDirective { readonly elevate: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Sets the host element to fill the full page height with page-level content styling. * Similar to `DbxContentDirective` but applies the `dbx-content-page` class for page-specific layout. * * @dbxWebComponent * @dbxWebSlug content-page * @dbxWebCategory layout * @dbxWebRelated content-container, section-page * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * Page * ``` * * @example * ```html *
*

...

 *
* ``` */ declare class DbxContentPageDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Input type for the pit's scrollable behavior. Pass `true` for default medium height, * `false` to disable scrolling, or a specific height value. */ type DbxContentPitScrollableInput = boolean | DbxContentPitScrollableHeight; /** * Height specification for a scrollable pit. Accepts a pixel number, a CSS pixel string, or a named preset. */ type DbxContentPitScrollableHeight = Pixels | PixelsString | DbxContentPitScrollableHeightSetting; /** * Named height presets for a scrollable pit: `'small'` (120px), `'medium'` (320px), or `'large'` (460px). */ type DbxContentPitScrollableHeightSetting = 'small' | 'medium' | 'large'; /** * Wraps content in a recessed "pit" container with optional scrollable overflow and rounded corners. * Useful for displaying bounded content areas such as lists or previews with a constrained height. * * Pits round their corners by default. Pass `[square]="true"` to square the pit — this applies the * common `.dbx-corners-none` opt-out utility rather than a pit-specific class. * * When `[scrollable]` is set the pit frame (padding, background, corners) stays fixed and an inner * `.dbx-content-pit-scrollable-content` wrapper does the scrolling — wrap the body in that element so * the frame doesn't shift at the scroll extremes. The resolved max height is published as the * `--dbx-content-pit-scrollable-max-height` custom property, which the inner wrapper reads. * * @dbxWebComponent * @dbxWebSlug content-pit * @dbxWebCategory layout * @dbxWebRelated content-box, content-elevate * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * Body * ``` * * @example * ```html *
Inset block
* ``` */ declare class DbxContentPitDirective { readonly scrollable: _angular_core.InputSignal>; readonly square: _angular_core.InputSignal; readonly scrollableHeightSignal: _angular_core.Signal; readonly scrollableMaxHeightSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Bundles all content layout directives including content containers, borders, elevation, * boxes, pits, and page-filling directives for convenient import. */ declare class DbxContentLayoutModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * A themed toolbar banner that wraps projected content, typically placed at the top of a page to highlight status or actions. * * @example * ```html * * Important notice * * ``` */ declare class DbxFlagComponent { readonly color: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * A themed banner with a text prompt and a slot for action content (e.g., buttons). * * Built on {@link DbxFlagComponent}, this is convenient for call-to-action banners. * * @example * ```html * * * * ``` */ declare class DbxFlagPromptComponent { readonly color: _angular_core.InputSignal; readonly text: _angular_core.InputSignal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Angular module that bundles {@link DbxFlagComponent} and {@link DbxFlagPromptComponent}. */ declare class DbxFlagLayoutModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Set of screen media width types. Their pixel sizes correspond with the DbxScreenMediaService's configuration. * * Values: * - micro: Screen is considered mobile. * - small: Screen is consider small, but larger than mobile. * - tablet: Screen is considered tablet size. * - large: Screen is considered large than a tablet, but not full size. * - full: Screen is greater than large. */ type ScreenMediaWidthType = 'micro' | 'small' | 'tablet' | 'large' | 'full'; /** * Ordered numeric mapping of {@link ScreenMediaWidthType} for size comparisons. */ declare const SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP: { micro: number; small: number; tablet: number; large: number; full: number; }; /** * Describes the current screen's vertical space. * * Values: * - tiny: Screen height is tiny, potentially the size of the navigation alone. * - normal: Screen has a normal height. */ type ScreenMediaHeightType = 'tiny' | 'normal'; /** * Returns `true` if the current screen width type is at least as wide as the given breakpoint. * * @param current - The current screen width type. * @param breakpoint - The minimum width type to check against. * @returns `true` if the current width type meets or exceeds the breakpoint. * * @example * ```ts * screenMediaWidthTypeIsActive('tablet', 'small'); // true * screenMediaWidthTypeIsActive('micro', 'tablet'); // false * ``` */ declare function screenMediaWidthTypeIsActive(current: ScreenMediaWidthType, breakpoint: ScreenMediaWidthType): boolean; /** * Compares two {@link ScreenMediaWidthType} values using a custom comparator on their numeric sizes. * * @param a - The first screen width type. * @param b - The second screen width type. * @param compare - A comparator function applied to the numeric size values of `a` and `b` * @returns The result of applying the comparator to the mapped numeric sizes. */ declare function compareScreenMediaWidthTypes(a: ScreenMediaWidthType, b: ScreenMediaWidthType, compare: (a: number, b: number) => boolean): boolean; /** * Creates a flex group container that arranges child elements in a responsive row layout. * * On small screens (below the configured breakpoint), the group applies a small-screen CSS class * that can be used to adjust styling. When `breakToColumn` is enabled, items will stack vertically * on small screens. * * @dbxWebComponent * @dbxWebSlug flex-group * @dbxWebCategory layout * @dbxWebRelated flex-size, bar * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html *
A
* ``` * * @example * ```html *
*
Wide
*
Narrow
*
* ``` */ declare class DbxFlexGroupDirective { private readonly _dbxScreenMediaService; /** * Whether to apply the flex group content styling. Defaults to `true`. */ readonly content: _angular_core.InputSignal; /** * Whether child items should break to a column layout on small screens. */ readonly breakToColumn: _angular_core.InputSignal; /** * Whether the flex group should use relative positioning. */ readonly relative: _angular_core.InputSignal; /** * Screen width breakpoint below which the group is considered "small". Defaults to `'tablet'`. */ readonly breakpoint: _angular_core.InputSignalWithTransform>; readonly isSmallScreen$: rxjs.Observable; readonly smallSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Flex size value from 1 to 6 representing a fraction of the available row width. * * A value of 6 occupies the full row, while 1 occupies 1/6th. Used with {@link DbxFlexSizeDirective} * to control the width of items within a {@link DbxFlexGroupDirective}. */ type DbxFlexSize = 1 | 2 | 3 | 4 | 5 | 6; /** * Applies a `dbx-flex-{size}` CSS class to the host element based on the given {@link DbxFlexSize} value. * Use within a {@link DbxFlexGroupDirective} to control how much row width this element occupies. * * @dbxWebComponent * @dbxWebSlug flex-size * @dbxWebCategory layout * @dbxWebRelated flex-group * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html *
*
Twice as wide
*
Narrow
*
* ``` */ declare class DbxFlexSizeDirective { /** * The flex size to apply, from 1 (1/6 width) to 6 (full width). */ readonly dbxFlexSize: _angular_core.InputSignal; readonly cssClassSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Displays an icon on the left with a header and projected content on the right. * * Useful for building descriptive list items or info rows where each entry is identified by a Material icon. * * @example * ```html * * hello@example.com * * ``` */ declare class DbxIconItemComponent { readonly icon: _angular_core.InputSignal>; readonly header: _angular_core.InputSignal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Injection token that provides the {@link DbxValueListItemSeparatorContext} to a separator component injected by a * {@link DbxValueListViewSeparatorConfig}. */ declare const DBX_VALUE_LIST_VIEW_ITEM_SEPARATOR: InjectionToken>>; /** * Decides whether a separator is rendered between two neighbouring list items. * * Called for every adjacent pair within a group, plus once before the group's first item (`previous` is undefined) * and once after its last item (`next` is undefined), so a separator can also lead or trail a group. Return `false` * when either side is missing to only separate items from each other. */ type DbxValueListItemSeparatorDecisionFunction = DbxValueListItem> = (previous: Maybe, next: Maybe) => boolean; /** * Configures a separator component that a value list view injects between two neighbouring items when * {@link showSeparator} returns true. * * The injection config fields (`componentClass`, `providers`, `init`, …) describe the separator component. The * component can inject {@link DBX_VALUE_LIST_VIEW_ITEM_SEPARATOR} to read the items it sits between. * * @example * ```ts * const separatorConfig: DbxValueListViewSeparatorConfig = { * componentClass: DayGapComponent, * showSeparator: dbxValueListItemSeparatorDecisionFunction((previous, next) => previous != null && next != null && !isNextDay(previous, next)) * }; * ``` */ interface DbxValueListViewSeparatorConfig = DbxValueListItem, S = unknown> extends DbxInjectionComponentConfig { /** * Whether to render the separator between the two items. */ readonly showSeparator: DbxValueListItemSeparatorDecisionFunction; } /** * The two neighbouring items a separator is rendered between. */ interface DbxValueListItemSeparatorContext = DbxValueListItem> { /** * The item before the separator. Undefined for a separator that leads a group. */ readonly previous: Maybe; /** * The item after the separator. Undefined for a separator that trails a group. */ readonly next: Maybe; } /** * Convenience function for mapping a decision function for two item values to a {@link DbxValueListItemSeparatorDecisionFunction}. * * @param decisionFunction - Decides whether to separate the two item values. Each value is undefined when that side has no item. * @returns A separator decision function that operates on the list items. * * @example * ```ts * const showSeparator = dbxValueListItemSeparatorDecisionFunction((previous, next) => previous != null && next != null && !isNextDay(previous, next)); * ``` */ declare function dbxValueListItemSeparatorDecisionFunction(decisionFunction: (previous: Maybe, next: Maybe) => boolean): DbxValueListItemSeparatorDecisionFunction; /** * Computes the separators to render around a run of rendered list items. * * The result has `items.length + 1` entries: entry `i` is the separator rendered before `items[i]`, and the last entry * is the separator rendered after the last item. An entry is undefined where no separator is shown. Each separator * config is the input config without `showSeparator`, with a {@link DBX_VALUE_LIST_VIEW_ITEM_SEPARATOR} provider added * ahead of the config's own providers. * * Each call returns configs with a fresh `init` wrapper (which still calls the input config's `init`). * `dbx-injection` ignores `providers` when comparing configs, so without it a reused separator would keep the neighbour * items it was created with; the new `init` makes the separator re-create with its current neighbours. * * @param items - The rendered items, in display order. * @param separatorConfig - The separator configuration. When not provided, no separators are rendered. * @returns The separator injection configs for each position around the items. * * @example * ```ts * const separators = dbxValueListItemSeparatorConfigs(items, separatorConfig); * // separators[0] leads the first item, separators[items.length] trails the last item. * ``` */ declare function dbxValueListItemSeparatorConfigs = DbxValueListItem>(items: I[], separatorConfig: Maybe>): Maybe[]; /** * Injection token that provides the current {@link DbxValueListItem} to dynamically injected item components. */ declare const DBX_VALUE_LIST_VIEW_ITEM: InjectionToken; /** * Describes a single item within a value-based list view, including its value, display options, and interaction state. */ interface DbxValueListItem { /** * The underlying value for this list item. * * The default trackBy function checks this value for a `key` ({@link ModelKeyRef}) or `id` ({@link UniqueModel}) * property to use as a stable tracking identity. To override this behavior, set {@link DbxValueListItem.key} explicitly * or provide a custom trackBy via the list view directive. */ itemValue: T; /** * Stable key for tracking this item across data updates. * * The default trackBy function uses this instead of the item's index * or the `itemValue`'s `key`, preventing unnecessary component recreation when * the list re-renders. */ key: string; /** * Arbitrary meta details available to the meta component. */ meta?: M; /** * Optional icon to display for the item. */ icon?: string; /** * Whether the item is disabled. */ disabled?: boolean; /** * Whether the ripple effect is disabled. */ rippleDisabled?: boolean; /** * Whether the item is selected. */ selected?: boolean; /** * Optional anchor for the item. */ anchor?: Maybe; } /** * A decision function that operates on a {@link DbxValueListItem}, used to determine item-level behavior such as selection or ripple state. */ type DbxValueListItemDecisionFunction = DecisionFunction>; /** * Convenience function for mapping a DecisionFunction for a value to a DecisionFunction for a DbxValueListItem with the same value type. * * @param decisionFunction * @returns * @__NO_SIDE_EFFECTS__ */ declare function dbxValueListItemDecisionFunction(decisionFunction: DecisionFunction): DbxValueListItemDecisionFunction; /** * Utility type for values that embed {@link DbxValueListItem} properties directly, avoiding the extra `itemValue` wrapper. */ /** * Utility type for values that embed {@link DbxValueListItem} properties directly, avoiding the extra `itemValue` wrapper. * * The `key` property is optional here because it is typically added during the `mapValuesToItemValues` step * rather than being present on the raw value. */ type DbxValueAsListItem = T & Omit>, 'itemValue' | 'key'> & { key?: string; }; /** * Base configuration for a value list view, defining the component to render each item and a mapping function for transforming raw values into list items. */ interface AbstractDbxValueListViewConfig = DbxValueListItem, V = unknown> extends DbxInjectionComponentConfig { mapValuesToItemValues(values: T[]): Observable; /** * @see DbxListViewMetaIconComponent.metaConfig() */ readonly metaConfig?: DbxInjectionComponentConfig; /** * (Optional) Separator component injected between two neighbouring items when its `showSeparator` function returns * true. Separators are evaluated within each group, in display order. * * Rendered by the list, selection list, and accordion views. The grid view ignores it. * * @see DbxValueListViewSeparatorConfig */ readonly separatorConfig?: Maybe>; /** * Whether group headers should stick to the top of the scroll container. * * Defaults to `true` for list, selection list, and grid views, `false` for accordion views. */ readonly stickyHeaders?: boolean; } /** * Extracts a stable tracking key from an item value by checking for `key` ({@link ModelKeyRef}), * `id` ({@link UniqueModel}), or falling back to a prefixed index string. * * @param itemValue - The raw value to extract a key from. * @param index - The item's position index, used as fallback. * @returns Key for tracking the item. (string) * * @example * ```ts * const key = dbxValueListItemKeyForItemValue({ key: 'abc' }, 0); // 'abc' * const key2 = dbxValueListItemKeyForItemValue({ id: '123' }, 0); // '123' * const key3 = dbxValueListItemKeyForItemValue({}, 5); // '__i_5' * ``` */ declare function dbxValueListItemKeyForItemValue(itemValue: unknown, index: number): string; /** * A {@link DbxValueListItem} combined with its injection component configuration, ready for rendering by the list view. */ type DbxValueListItemConfig = DbxValueListItem, V = unknown> = I & { config: DbxInjectionComponentConfig; metaConfig?: DbxInjectionComponentConfig; }; /** * Maps raw values into an observable of {@link DbxValueListItemConfig} items, applying the list view config's mapping function and attaching injection configuration. * * @param listViewConfig - The list view configuration containing the component and optional mapping function. * @param itemValues - The raw values to map into configured list items. * @returns An observable emitting the mapped and configured list item configs. * * @example * ```ts * const items$ = mapValuesToValuesListItemConfigObs(listViewConfig, rawValues); * ``` */ declare function mapValuesToValuesListItemConfigObs, V = unknown>(listViewConfig: AbstractDbxValueListViewConfig, itemValues: T[]): Observable[]>; /** * Adds injection component configuration and meta configuration to each list item, producing fully configured {@link DbxValueListItemConfig} entries ready for rendering. * * @param listViewConfig - The list view configuration providing injection component config and optional meta config. * @param listItems - The list items to augment with configuration. * @returns The list items extended with injection component configuration attached. */ declare function addConfigToValueListItems, V = unknown>(listViewConfig: Omit, 'mapValuesToItemValues'>, listItems: I[]): DbxValueListItemConfig[]; /** * Abstract class representing a view that provides a stream of value list items. Used as an injection token * so parent components can access the current list items. */ declare abstract class DbxValueListView = DbxValueListItem> { abstract readonly items$: Observable; } /** * Registers a component as a {@link DbxValueListView} provider for dependency injection. * * @param sourceType - The component class type to register as the list view provider. * @returns Array of Angular providers that bind the given component to {@link DbxValueListView} * * @Component ({ * providers: provideDbxValueListView(MyValueListViewComponent) * }) * export class MyValueListViewComponent extends DbxValueListView { ... } * ``` * * @example * ```ts */ declare function provideDbxValueListView>(sourceType: Type): Provider[]; /** * Determines how list items behave when interacted with. In 'select' mode, items can be selected/deselected. * In 'view' mode, items are simply clickable for navigation or viewing. */ type DbxListSelectionMode = 'select' | 'view'; /** * Represents the selection state of a single list item, including whether it is disabled or selected. */ interface ListSelectionStateItem { readonly disabled?: boolean; readonly selected?: boolean; readonly itemValue: T; } /** * Represents the aggregate selection state of all items in a list, emitted when selection changes occur. */ interface ListSelectionState { readonly items: ListSelectionStateItem[]; } /** * Interface for a view that renders the items of a DbxList. */ declare abstract class DbxListView = ListLoadingState> { /** * Current disabled state. */ abstract readonly disabled$: Observable; /** * (Optional) current selection mode. */ abstract readonly selectionMode$?: Observable>; /** * Values of the list view. */ abstract readonly values$: Observable; /** * Track by configuration. */ abstract readonly trackBy$?: Observable>>; /** * (Optional) clicked event emitter. * * If available, the DbxList will subscribe to it automatically. */ abstract clickValue?: OutputEmitterRef; /** * (Optional) selection changed event emitter. * * If available, the DbxList will subscribe to it automatically. */ abstract selectionChange?: OutputEmitterRef>; /** * Sets the models input loading state context for the view to render from. */ abstract setListContext(state: ListLoadingStateContext): void; /** * Sets the disabled state of the list view. */ abstract setDisabled(disabled: boolean): void; /** * Sets the selection mode of the list view. */ abstract setSelectionMode(selectionMode: Maybe): void; } /** * Registers a component as a {@link DbxListView} provider so it can be injected by parent list components. * * @param sourceType - The component class to register as the DbxListView provider. * @returns Array of Angular providers that wire up the component as a DbxListView. * * @Component ({ * providers: provideDbxListView(MyCustomListViewComponent) * }) * export class MyCustomListViewComponent extends DbxListView { ... } * ``` * * @example * ```ts */ declare function provideDbxListView>(sourceType: Type): Provider[]; /** * Abstract class and injection token for managing modifiers on value list items. Modifiers allow transforming * list item properties (e.g., disabling ripple, marking as selected) before rendering. */ declare abstract class DbxValueListItemModifier = DbxValueListItem> { abstract readonly modifiers$: Observable>; abstract addModifiers(modifiers: ArrayOrValue>): void; abstract removeModifiers(modifiers: ArrayOrValue>): void; } /** * Registers a directive as a {@link DbxValueListItemModifier} provider for dependency injection. * * @param sourceType - The directive class to register as the DbxValueListItemModifier provider. * @returns Array of Angular providers that wire up the directive as a DbxValueListItemModifier. * * @Directive ({ * providers: provideDbxValueListViewModifier(MyModifierDirective) * }) * export class MyModifierDirective extends DbxValueListItemModifier { ... } * ``` * * @example * ```ts */ declare function provideDbxValueListViewModifier(sourceType: Type): Provider[]; /** * A {@link Modifier} specialized for {@link DbxValueListItem} instances. */ type ListItemModifier = DbxValueListItem> = Modifier; /** * Creates a {@link ListItemModifier} with the given key and modification function. * * @param key - A unique string identifier for this modifier in the modifier map. * @param modify - The function that mutates list item properties during rendering. * @returns A new ListItemModifier with the given key and modification function. * * @example * ```ts * const highlightModifier = listItemModifier('highlight', (item) => { * item.selected = item.itemValue.isImportant; * }); * ``` */ declare function listItemModifier = DbxValueListItem>(key: string, modify: ModifierFunction): ListItemModifier; /** * Abstract directive that transforms raw list values into configured {@link DbxValueListItemConfig} items, applying any active modifiers. * Requires a parent {@link DbxListView} and optionally uses a {@link DbxValueListItemModifier} to modify items before rendering. */ declare abstract class AbstractDbxValueListViewDirective = DbxValueListItem, V = unknown, C extends AbstractDbxValueListViewConfig = AbstractDbxValueListViewConfig> implements DbxValueListView { readonly dbxListView: DbxListView; readonly dbxValueListViewModifier: DbxValueListItemModifier | null; readonly config: _angular_core.InputSignal; readonly config$: Observable; readonly modifyFn$: Observable>>; readonly items$: Observable[]>; readonly itemsSignal: _angular_core.Signal[] | undefined>; onClickValue(value: T): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>; } /** * A group of DbxValueListItem values, grouped by common data, name, and id. */ interface DbxValueListItemGroup, H = unknown, F = unknown> extends Omit, 'itemValue' | 'icon' | 'key'>, Readonly> { readonly data: G; readonly items: DbxValueListItemConfig[]; /** * (Optional) View configuration for the group's header. */ readonly headerConfig?: Maybe>; /** * (Optional) View configuration for the group's header. */ readonly footerConfig?: Maybe>; /** * Whether or not to show the group's items. Defaults to true. */ readonly showGroupItems?: boolean; /** * Custom CSS classes to apply to all groups. */ readonly cssClasses?: CssClassesArray; } /** * Function type that partitions a flat list of configured items into an array of {@link DbxValueListItemGroup} values. */ type DbxValueListViewGroupValuesFunction, H = unknown, F = unknown> = (items: DbxValueListItemConfig[]) => ObservableOrValue[]>; /** * Default grouping function that places all items into a single unnamed group. * * @param items - The flat list of configured list items to group. * @returns An array containing a single group with all input items. */ declare const defaultDbxValueListViewGroupValuesFunction: >(items: DbxValueListItemConfig[]) => DbxValueListItemGroup[]; /** * Abstract delegate responsible for grouping list items into {@link DbxValueListItemGroup} instances. * Provide a custom implementation to control how items are organized into visual groups. */ declare abstract class DbxValueListViewGroupDelegate = DbxValueListItem, H = unknown, F = unknown> { /** * Groups all input items into groups. */ abstract readonly groupValues: DbxValueListViewGroupValuesFunction; } /** * Creates a default {@link DbxValueListViewGroupDelegate} that places all items into a single ungrouped list. * * @returns A group delegate that places all items into one unnamed group. * * @example * ```ts * const delegate = defaultDbxValueListViewGroupDelegate(); * ``` */ declare function defaultDbxValueListViewGroupDelegate>(): DbxValueListViewGroupDelegate; /** * Registers a class as a {@link DbxValueListViewGroupDelegate} provider for dependency injection. * * @param sourceType - The class type to register as the group delegate provider. * @returns Array of Angular providers that bind the given class to {@link DbxValueListViewGroupDelegate} * * @Directive ({ * providers: provideDbxValueListViewGroupDelegate(MyGroupDelegate) * }) * export class MyGroupDelegate extends DbxValueListViewGroupDelegate { ... } * ``` * * @example * ```ts */ declare function provideDbxValueListViewGroupDelegate>(sourceType: Type): Provider[]; /** * Configuration for a {@link DbxValueListViewComponent}. Extends the base config with an option to emit click events for all items, including those with anchors. */ interface DbxValueListViewConfig = DbxValueListItem, V = unknown> extends AbstractDbxValueListViewConfig { /** * When true, emits click events for all items regardless of whether they have anchors. */ readonly emitAllClicks?: boolean; /** * @see AbstractDbxValueListViewConfig.stickyHeaders */ readonly stickyHeaders?: boolean; } /** * Renders a single group of list items within a {@link DbxValueListViewContentComponent}. Displays an optional header, * a list of items using `mat-list-item`, and an optional footer. When the content component has a separator config, * separators are injected between (and around) the group's items wherever its `showSeparator` function returns true. * * @example * ```html * * ``` */ declare class DbxValueListViewContentGroupComponent = DbxValueListItem> { readonly dbxValueListViewContentComponent: DbxValueListViewContentComponent>; readonly group: _angular_core.InputSignal>>; readonly trackByFunctionSignal: Signal> | ((index: number, item: DbxValueListItemConfig>) => any)>; readonly itemsSignal: Signal[]>; readonly separatorsSignal: Signal>[]>; readonly trailingSeparatorSignal: Signal>>; readonly headerConfigSignal: Signal>>; readonly footerConfigSignal: Signal>>; readonly cssClassSignal: Signal; onClickItem(item: I): void; onClickValue(value: T): void; rippleDisabledOnItem(item: I): boolean; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-list-view-content-group", never, { "group": { "alias": "group"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Default track-by function for list view content components. * * Uses the item's {@link DbxValueListItem.key} when available for stable identity across * data updates, falling back to a prefixed index string to avoid collisions with key values. * * @param index - The item's position index in the list. * @param item - The list item whose identity key is resolved. * @returns The item's key, itemValue key/id, or a prefixed index string as a fallback. */ declare const DEFAULT_VALUE_LIST_VIEW_CONTENT_COMPONENT_TRACK_BY_FUNCTION: TrackByFunction>; /** * Renders a Material nav list of grouped value list items. Can be used directly when items are pre-configured, * or as part of the standard list rendering pipeline via {@link DbxValueListViewComponent}. * * @example * ```html * * ``` */ declare class DbxValueListViewContentComponent = DbxValueListItem> { readonly dbxListView: DbxListView; private readonly _dbxListGroupDelegate; private readonly _trackBy$; readonly trackBy$: Observable<(index: number, item: DbxValueListItemConfig) => any>; readonly items: _angular_core.InputSignal[]>>; readonly emitAllClicks: _angular_core.InputSignal>; readonly stickyHeaders: _angular_core.InputSignal>; readonly separatorConfig: _angular_core.InputSignal>>; readonly groups$: Observable[]>; readonly groupsSignal: Signal[] | undefined>; readonly disabledSignal: Signal; onClickItem(item: I): void; onClickValue(value: T): void; rippleDisabledOnItem(item: I): boolean; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-list-view-content", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "emitAllClicks": { "alias": "emitAllClicks"; "required": false; "isSignal": true; }; "stickyHeaders": { "alias": "stickyHeaders"; "required": false; "isSignal": true; }; "separatorConfig": { "alias": "separatorConfig"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Renders a value-based list view using a configuration input. Must be used within a parent {@link DbxListView} context. * * @dbxWebComponent * @dbxWebSlug list-view * @dbxWebCategory list * @dbxWebRelated list, selection-list-view, list-grid-view, list-accordion-view * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxValueListViewComponent = DbxValueListItem, V = unknown, C extends DbxValueListViewConfig = DbxValueListViewConfig> extends AbstractDbxValueListViewDirective { readonly emitAllClicksSignal: Signal>; readonly stickyHeadersSignal: Signal>; readonly separatorConfigSignal: Signal>>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-list-view", never, {}, {}, never, never, true, never>; } /** * Configuration for a {@link DbxValueListAccordionViewComponent}. Extends the standard list view config with accordion-specific options. */ interface DbxValueListAccordionViewConfig = DbxValueListItem, V = unknown> extends DbxValueListViewConfig { /** * Whether the accordion allows multiple expanded panels simultaneously. */ readonly multi?: boolean; } /** * Render entry for an item within the flat accordion list. */ interface DbxAccordionRenderItemEntry = DbxValueListItem> { readonly type: 'item'; readonly trackId: string; readonly item: DbxValueListItemConfig; } /** * Render entry for a group header within the flat accordion list. */ interface DbxAccordionRenderGroupHeaderEntry { readonly type: 'group-header'; readonly trackId: string; readonly headerConfig: DbxInjectionComponentConfig; readonly cssClasses?: string; } /** * Render entry for a group footer within the flat accordion list. */ interface DbxAccordionRenderGroupFooterEntry { readonly type: 'group-footer'; readonly trackId: string; readonly footerConfig: DbxInjectionComponentConfig; } /** * Render entry for a separator between (or around) items within the flat accordion list. */ interface DbxAccordionRenderSeparatorEntry { readonly type: 'separator'; readonly trackId: string; readonly separatorConfig: DbxInjectionComponentConfig; } /** * Discriminated union of all render entry types used by the flat accordion list. */ type DbxAccordionRenderEntry = DbxValueListItem> = DbxAccordionRenderItemEntry | DbxAccordionRenderGroupHeaderEntry | DbxAccordionRenderGroupFooterEntry | DbxAccordionRenderSeparatorEntry; /** * Flattens grouped accordion items into a single array of render entries with stable track IDs. * * @param groups - The grouped items to flatten. * @param trackByFn - The track-by function used to derive stable item identity. * @param separatorConfig - (Optional) separator configuration. Separators are evaluated within each group. * @returns A flat array of render entries for use in a single `@for` loop. * * @example * ```ts * const entries = flattenAccordionGroups(groups, trackByFn); * ``` */ declare function flattenAccordionGroups = DbxValueListItem>(groups: DbxValueListItemGroup[], trackByFn: TrackByFunction>, separatorConfig?: Maybe>): DbxAccordionRenderEntry[]; /** * Content view that renders grouped list items inside a `mat-accordion`. Uses a single flat `@for` loop * with stable item identity tracking so that items moving between groups trigger DOM moves instead of * destroy+create cycles. * * @example * ```html * * ``` */ declare class DbxValueListAccordionViewContentComponent = DbxValueListItem> extends DbxValueListViewContentComponent { readonly multi: _angular_core.InputSignal>; readonly trackByFunctionSignal: _angular_core.Signal> | ((index: number, item: DbxValueListItemConfig) => any)>; readonly flatEntriesSignal: _angular_core.Signal[]>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-list-accordion-view-content", never, { "multi": { "alias": "multi"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Renders a value list as an accordion using a configuration input. Each item renders its own expansion panel. * Requires a parent {@link DbxListView} context. * * @dbxWebComponent * @dbxWebSlug list-accordion-view * @dbxWebCategory list * @dbxWebRelated list, list-view * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxValueListAccordionViewComponent = DbxValueListItem, V = unknown, C extends DbxValueListAccordionViewConfig = DbxValueListAccordionViewConfig> extends AbstractDbxValueListViewDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-list-accordion-view", never, {}, {}, never, never, true, never>; } /** * Default template string for value list view components that renders a `dbx-list-view` with a `config` binding. */ declare const DEFAULT_DBX_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE = ""; /** * Convenience module that imports and exports {@link DbxValueListViewComponent}. */ declare class DbxValueListViewComponentImportsModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Abstract base directive implementing {@link DbxListView}. Manages values, disabled state, selection mode, and click events. * * Extend this to create custom list view directives. If selection support is needed, * consider extending {@link AbstractDbxSelectionListViewDirective} instead. */ declare abstract class AbstractDbxListViewDirective implements DbxListView { readonly valuesArray: _angular_core.InputSignal>; readonly values: _angular_core.InputSignal>; readonly clickValue: _angular_core.OutputEmitterRef; private readonly _trackBySignal; private readonly _disabledSignal; private readonly _selectionModeSignal; private readonly _valuesOverrideSignal; readonly trackBy$: Observable>>; readonly disabled$: Observable; readonly selectionMode$: Observable>; readonly _inputValuesArray$: Observable>; readonly _inputValues$: Observable>; readonly _values$: Observable>; readonly values$: Observable; onClickValue(value: T): void; setListContext(state: ListLoadingStateContext): void; setValues(values: MaybeObservableOrValue): void; setDisabled(disabled: boolean): void; setSelectionMode(selectionMode: Maybe): void; setTrackBy(trackBy: Maybe>): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, { "valuesArray": { "alias": "valuesArray"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; }, { "clickValue": "clickValue"; }, never, never, true, never>; } /** * Default template string for accordion list view components that renders a `dbx-list-accordion-view` with a `config` binding. */ declare const DEFAULT_DBX_LIST_ACCORDION_VIEW_COMPONENT_CONFIGURATION_TEMPLATE = ""; declare const DBX_LIST_ACCORDION_VIEW_COMPONENT_IMPORTS_AND_EXPORTS: (typeof DbxValueListAccordionViewComponent)[]; /** * Convenience module that imports and exports {@link DbxValueListAccordionViewComponent}. */ declare class DbxListAccordionViewComponentImportsModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Abstract base directive for accordion-based list views. Extend this to create custom accordion list views * that provide a {@link DbxValueListAccordionViewConfig}. */ declare abstract class AbstractDbxListAccordionViewDirective extends AbstractDbxListViewDirective { abstract readonly config: DbxValueListAccordionViewConfig>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, {}, never, never, true, never>; } /** * Configuration for a {@link DbxValueListGridViewComponent}. Extends the standard list view config with optional grid layout sizing. */ interface DbxValueListGridViewConfig = DbxValueListItem, V = unknown> extends DbxValueListViewConfig { /** * Optional grid sizing configuration for column layout and gap spacing. */ readonly grid?: Maybe>; } /** * Defines the CSS grid layout dimensions for a grid-based list view. */ interface DbxValueListGridItemViewGridSizeConfig { /** * Gap size in %, px, vw, vh */ readonly gap: string; /** * Columns configuration. * * Example: repeat(auto-fill, minmax(200px, 1fr)) */ readonly columns: string; } /** * Default grid size configuration with responsive auto-fill columns (minimum 320px) and 8px gap. */ declare const DEFAULT_LIST_GRID_SIZE_CONFIG: DbxValueListGridItemViewGridSizeConfig; /** * Structural directive that provides grid size configuration to descendant {@link DbxValueListGridViewContentComponent} instances. * * @example * ```html *
* *
* ``` */ declare class DbxValueListGridSizeDirective { readonly gridSize: _angular_core.InputSignal>>; readonly gridSize$: rxjs.Observable>>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Renders a single group of items within a CSS grid layout, including optional header/footer and ripple effects on items. * * @example * ```html * * ``` */ declare class DbxValueListGridViewContentGroupComponent = DbxValueListItem> { readonly dbxValueListGridViewContentComponent: DbxValueListGridViewContentComponent>; readonly group: _angular_core.InputSignal>>; readonly trackByFunctionSignal: Signal<_angular_core.TrackByFunction> | ((index: number, item: _dereekb_dbx_web.DbxValueListItemConfig>) => any)>; readonly gridConfigSignal: Signal; readonly itemsSignal: Signal<_dereekb_dbx_web.DbxValueListItemConfig[]>; readonly headerConfigSignal: Signal>>; readonly footerConfigSignal: Signal>>; readonly cssClassSignal: Signal; onClickItem(item: I): void; rippleDisabledOnItem(item: I): boolean; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-list-grid-view-content-group", never, { "group": { "alias": "group"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Renders grouped list items in a CSS grid layout. Supports configurable grid sizing via the `grid` input * or a parent {@link DbxValueListGridSizeDirective}. * * @example * ```html * * ``` */ declare class DbxValueListGridViewContentComponent = DbxValueListItem> extends DbxValueListViewContentComponent { private readonly _gridSizeOverride; readonly inputGridConfig: _angular_core.InputSignal>>; readonly gridConfigFromGridSizeSignal: Signal>>; readonly gridConfigSignal: Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-list-grid-view-content", never, { "inputGridConfig": { "alias": "grid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Renders a value list as a CSS grid using a configuration input. Requires a parent {@link DbxListView} context. * * @dbxWebComponent * @dbxWebSlug list-grid-view * @dbxWebCategory list * @dbxWebRelated list, list-view * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxValueListGridViewComponent = DbxValueListItem, V = unknown, C extends DbxValueListGridViewConfig = DbxValueListGridViewConfig> extends AbstractDbxValueListViewDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-list-grid-view", never, {}, {}, never, never, true, never>; } /** * Default template string for grid list view components that renders a `dbx-list-grid-view` with a `config` binding. */ declare const DEFAULT_DBX_LIST_GRID_VIEW_COMPONENT_CONFIGURATION_TEMPLATE = ""; declare const DBX_LIST_GRID_VIEW_COMPONENT_IMPORTS_AND_EXPORTS: (typeof DbxValueListGridViewComponent)[]; /** * Convenience module that imports and exports {@link DbxValueListGridViewComponent}. */ declare class DbxListGridViewComponentImportsModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Abstract base directive for grid-based list views. Extend this to create custom grid list views * that provide a {@link DbxValueListGridViewConfig}. */ declare abstract class AbstractDbxListGridViewDirective extends AbstractDbxListViewDirective { abstract readonly config: DbxValueListGridViewConfig>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, {}, never, never, true, never>; } /** * Injection token for providing a default meta icon string to {@link DbxListViewMetaIconComponent} instances. */ declare const DEFAULT_DBX_LIST_VIEW_META_ICON: InjectionToken; /** * Configuration interface for the meta icon, specifying which Material icon to display. */ interface DbxListViewMetaIconConfig { readonly icon?: Maybe; } /** * Displays a Material icon in the meta (trailing) area of a list item. Reads its icon from the item's meta * configuration or falls back to a default provided via {@link DEFAULT_DBX_LIST_VIEW_META_ICON}. * * Use the static `metaConfig()` method to create the injection component config for use in list view configurations. * * @example * ```html * * ``` */ declare class DbxListViewMetaIconComponent { readonly item: DbxValueListItem | null; readonly defaultIcon: Maybe; readonly icon: Maybe; static metaConfig(defaultIcon?: Maybe): DbxInjectionComponentConfig; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Describes the display data for a title-based list group, including title text, optional icon, and hint. */ interface DbxListTitleGroupData { /** * Data Value. Should generally be defined, but can be null if the group is a default group. */ readonly value: O; /** * Optional icon to show at the left. */ readonly icon?: string; readonly title: string; readonly hint?: string; /** * Custom CSS classes to apply only to this group. */ readonly cssClasses?: CssClassesArray; } /** * Delegate interface for grouping list items by a key value and producing titled group headers. Determines which group * each item belongs to and generates the display data for each group's header. */ interface DbxListTitleGroupTitleDelegate = DbxListTitleGroupData, I extends DbxValueListItem = DbxValueListItem> { /** * Returns a key value for the input item. If the item does not belong to a group, returns undefined. * * @param item * @returns */ readonly groupValueForItem: (item: DbxValueListItemConfig) => O; /** * Converts a key value to a DbxListTitleGroupData for a group. * * @param value * @returns */ readonly dataForGroupValue: (value: O, items: DbxValueListItemConfig[]) => D; /** * (Optional) sort function for sorting groups by their data. */ readonly sortGroupsByData?: SortCompareFunction; /** * Custom header component class to inject. * * DbxListTitleGroupHeaderComponent is injected by default. */ readonly headerComponentClass?: Type; /** * Custom footer component class to inject, if applicable. */ readonly footerComponentClass?: Type; /** * (Optional) CSS classes to apply to the group. */ readonly cssClasses?: CssClassesArray; } /** * Directive that groups list items into titled sections based on a {@link DbxListTitleGroupTitleDelegate}. * Automatically provides itself as a {@link DbxValueListViewGroupDelegate} so list views can consume the grouping. * * @example * ```html * * ``` */ declare class DbxListTitleGroupDirective = DbxListTitleGroupData, I extends DbxValueListItem = DbxValueListItem> implements DbxValueListViewGroupDelegate { readonly delegate: _angular_core.InputSignal>>; private readonly _delegate$; readonly groupValues: DbxValueListViewGroupValuesFunction; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[dbxListTitleGroup]", never, { "delegate": { "alias": "dbxListTitleGroup"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Injection token that provides the {@link DbxListTitleGroupData} to group header components. */ declare const DBX_LIST_TITLE_GROUP_DATA: InjectionToken; /** * Abstract base class for group header components. Automatically injects the {@link DbxListTitleGroupData} * via the {@link DBX_LIST_TITLE_GROUP_DATA} token. Extend this to create custom group header renderers. */ declare abstract class AbstractDbxListTitleGroupHeaderComponent> { readonly data: D; } /** * Default group header component that displays a title, optional icon, and optional hint text. * Used automatically by {@link DbxListTitleGroupDirective} unless a custom header component is specified. * * @dbxWebComponent * @dbxWebSlug list-title-group-header * @dbxWebCategory list * @dbxWebRelated list, list-view * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxListTitleGroupHeaderComponent> extends AbstractDbxListTitleGroupHeaderComponent { readonly icon: string | undefined; readonly title: string; readonly hint: string | undefined; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-list-title-group-header", never, {}, {}, never, never, true, never>; } /** * Directive that implements {@link DbxValueListItemModifier}, managing a collection of item modifiers * that transform list items before rendering. Accepts modifiers via the `dbxListItemModifier` input or programmatically. * * @example * ```html * * ``` */ declare class DbxValueListItemModifierDirective = DbxValueListItem> implements DbxValueListItemModifier { readonly inputModifiers: _angular_core.InputSignalWithTransform>>, Maybe<"" | ArrayOrValue>>>; private readonly _additionalModifiers; readonly modifiers$: Observable>>; addModifiers(modifiers: ArrayOrValue>): void; removeModifiers(modifiers: ArrayOrValue>): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "dbxListItemModifier,[dbxListItemModifier]", never, { "inputModifiers": { "alias": "dbxListItemModifier"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Abstract base directive for creating custom list item modifiers. Automatically registers and unregisters * its modifiers with the parent {@link DbxValueListItemModifier}. Extend this to build reusable modifier directives. */ declare abstract class AbstractDbxValueListItemModifierDirective = DbxValueListItem> { readonly dbxValueListItemModifier: DbxValueListItemModifier; private _currentLinkedModifiers; private readonly _modifiers; readonly modifiers$: Observable>>>; constructor(); setModifiers(modifiers: MaybeObservableOrValue>>): void; private _linkModifiers; private _unlinkModifiers; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, {}, never, never, true, never>; } /** * Modifier key used to identify the ripple-disable modifier in the modifier map. */ declare const DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY = "disable_ripple_anchor"; /** * Default decision function that disables ripple on items that already have ripple disabled, * lack an anchor, or have an anchor with no navigation target. * * @param item - The list item to evaluate for ripple disabling. * @returns `true` if the ripple should be disabled for this item. */ declare const DEFAULT_DBX_LIST_ITEM_DISABLE_FUNCTION: DbxValueListItemDecisionFunction; /** * Modifier directive that disables the Material ripple effect on list items based on a decision function. * By default, disables ripple on items without meaningful anchor navigation targets. * * @example * ```html * * ``` */ declare class DbxListItemDisableRippleModifierDirective extends AbstractDbxValueListItemModifierDirective { readonly disableRippleForItem: _angular_core.InputSignalWithTransform>, Maybe<"" | DbxValueListItemDecisionFunction>>; readonly disableRippleForItemModifiers$: Observable>>>>; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "dbxListItemDisableRippleModifier,[dbxListItemDisableRippleModifier]", never, { "disableRippleForItem": { "alias": "dbxListItemDisableRippleModifier"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Modifier key used to identify the selection modifier in the modifier map. */ declare const DBX_LIST_ITEM_IS_SELECTED_ITEM_MODIFIER_KEY = "is_selected_item_modifier"; /** * Default decision function that returns the item's current `selected` state (defaulting to false). * * @param item - The list item to check for selection. * @returns `true` if the item is currently selected, `false` otherwise. */ declare const DEFAULT_DBX_LIST_ITEM_IS_SELECTED_FUNCTION: DbxValueListItemDecisionFunction; /** * Modifier directive that sets the `selected` property on list items based on a custom decision function. * Useful for programmatically controlling which items appear selected in a list view. * * @example * ```html * * ``` */ declare class DbxListItemIsSelectedModifierDirective extends AbstractDbxValueListItemModifierDirective { readonly listItemIsSelected: _angular_core.InputSignalWithTransform>, Maybe<"" | DbxValueListItemDecisionFunction>>; readonly listItemIsSelectedModifiers$: Observable>>>>; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "dbxListItemIsSelectedModifier,[dbxListItemIsSelectedModifier]", never, { "listItemIsSelected": { "alias": "dbxListItemIsSelectedModifier"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Exports all dbx-list modifier-related directives. */ declare class DbxListModifierModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Displays centered placeholder content within an empty list. Projects its content into a styled container. * * @dbxWebComponent * @dbxWebSlug list-empty-content * @dbxWebCategory list * @dbxWebRelated list * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * Empty * ``` * * @example * ```html * * *

No items yet — add one to get started.

* * * ``` */ declare class DbxListEmptyContentComponent { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Internal directive used by {@link DbxListComponent} to track the scrollable content area and forward scroll events. * * @example * ```html *
...
* ``` */ declare class DbxListInternalContentDirective { private readonly parent; readonly elementRef: ElementRef; readonly hide: _angular_core.InputSignal>; constructor(); onScrollEvent($event: Event): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Direction the scroll was triggered moving. */ type DbxListScrollDirectionTrigger = 'up' | 'down'; /** * Used to trigger the loading of additional items. * * If an observable is returned it is used to throttle the loading of more items until it returns. */ type DbxListLoadMoreHandler = () => Observable | void; /** * DbxListComponent configuration. */ interface DbxListConfig = DbxListView> extends DbxInjectionComponentConfig { /** * Whether or not to hide the list content when it is an empty list. */ readonly hideOnEmpty?: boolean; /** * Whether or not this list should scroll upward from the bottom, like a message list. */ readonly invertedList?: boolean; /** * Distance to scroll. */ readonly scrollDistance?: number; /** * Number of ms to throttle scrolling events. */ readonly throttle?: Milliseconds; /** * (Optional) onClick handler */ readonly onClick?: (value: T) => void; /** * (Optional) onSelection handler */ readonly onSelectionChange?: (selection: ListSelectionState) => void; /** * (Optional) handler function to load more items. */ readonly loadMore?: DbxListLoadMoreHandler; /** * Default selection list value. If not defined, will default to 'view'. */ readonly defaultSelectionMode?: Maybe; } /** * Numeric scroll position emitted by the {@link DbxListComponent} when its content area is scrolled. */ type DbxListComponentScrolledEventPosition = number; /** * Default infinite scroll distance multiplier for triggering load-more events. */ declare const DEFAULT_DBX_LIST_SCROLL_DISTANCE = 1.5; /** * Default throttle duration in milliseconds for scroll events. */ declare const DEFAULT_DBX_LIST_THROTTLE_SCROLL = 50; /** * Displays a potentially infinitely scrollable list of content. Supports load-more triggers, selection modes, and empty/loading states. * * This component is typically wrapped by a higher-level component that provides its configuration via the `config` input. * * @dbxWebComponent * @dbxWebSlug list * @dbxWebCategory list * @dbxWebRelated list-view, list-empty-content, list-grid-view, list-accordion-view, selection-list-view * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxListComponent = DbxListView, S extends ListLoadingState = ListLoadingState> implements OnDestroy { /** * Emitted when content is scrolled. */ readonly contentScrolled: _angular_core.OutputEmitterRef; /** * Whether or not to add bottom padding to the list content. */ readonly padded: _angular_core.InputSignal; readonly state: _angular_core.InputSignal>>>; readonly config: _angular_core.InputSignal>>; readonly disabled: _angular_core.InputSignal>; readonly selectionMode: _angular_core.InputSignal>; readonly hasMore: _angular_core.InputSignal>; readonly hasMore$: Observable>; private readonly _internalContentSignal; readonly nativeElementSignal: _angular_core.Signal; private readonly _loadMoreTrigger; private readonly _scrollTrigger; private readonly _loadMoreSub; private readonly _onClickSub; private readonly _disabledSub; private readonly _selectionModeSub; private readonly _onSelectionChangeSub; readonly currentState$: Observable>; readonly context: _dereekb_rxjs.MutableListLoadingStateContext; readonly hasMoreFromCurrentState$: Observable>; readonly isEnd$: Observable>; readonly isEmpty$: Observable; readonly isEmptyLoading$: Observable; readonly isEmptyAndNotLoading$: Observable; readonly config$: Observable>>; readonly disabled$: Observable; readonly selectionMode$: Observable>; readonly hideOnEmpty$: Observable; readonly invertedList$: Observable; readonly throttleScroll$: Observable; readonly scrollDistance$: Observable; readonly scrollLoadMoreTrigger$: Observable; readonly loadMore$: Observable; readonly injectedComponentConfig$: Observable>>; readonly hideContent$: Observable; readonly infiniteScrollDistanceSignal: _angular_core.Signal; readonly infiniteScrollThrottleSignal: _angular_core.Signal; readonly hideContentSignal: _angular_core.Signal; readonly injectedComponentConfigSignal: _angular_core.Signal>>; readonly isEmptyAndNotLoadingSignal: _angular_core.Signal; readonly isEmptyLoadingSignal: _angular_core.Signal; readonly isEndSignal: _angular_core.Signal>; ngOnDestroy(): void; getScrollPositionRelativeToBottom(): number; jumpToBottom(): void; jumpToPositionRelativeToBottom(pos: number): void; onScrollDown(): void; onScrollUp(): void; loadMore(): void; setInternalContent(content: DbxListInternalContentDirective): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-list", never, { "padded": { "alias": "padded"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "hasMore": { "alias": "hasMore"; "required": false; "isSignal": true; }; }, { "contentScrolled": "contentScrolled"; }, never, ["[top]", "[bottom]", "[end]", "[empty]", "[emptyLoading]"], true, never>; } /** * Common interface for views that may wrap a DbxListView, and pass values through to it. */ declare abstract class DbxListViewWrapper = ListLoadingState> { abstract readonly currentState$: Observable>; abstract readonly loadMore?: OutputRef; /** * Sets/overrides the state for this view. */ abstract setState(state: MaybeObservableOrValue): void; /** * Sets/overrides the selection mode for this view. */ abstract setSelectionMode(selectionMode: MaybeObservableOrValue): void; } /** * Registers a component as a {@link DbxListViewWrapper} provider for dependency injection. * * @param sourceType - The component class to register as the DbxListViewWrapper provider. * @returns Array of Angular providers that wire up the component as a DbxListViewWrapper. * * @Component ({ * providers: provideDbxListViewWrapper(MyListWrapperComponent) * }) * export class MyListWrapperComponent extends DbxListViewWrapper { ... } * ``` * * @example * ```ts */ declare function provideDbxListViewWrapper(sourceType: Type): Provider[]; /** * Default HTML template for list wrapper components. Passes through state, config, and content projection slots to a child `dbx-list`. */ declare const DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE = "\n \n \n \n \n \n \n "; /** * Convenience module that imports and exports {@link DbxListComponent} for use in list wrapper component templates. */ declare class DbxListWrapperComponentImportsModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Configuration type for list wrapper directives. Omits `onClick` and `loadMore` since the wrapper converts those to output events. */ type DbxListWrapperConfig = DbxListView> = Omit, 'onClick' | 'loadMore'>; /** * Abstract base directive for components that wrap a {@link DbxListComponent}. Manages state, config, selection mode, * and emits `clickItem` and `loadMore` output events. Extend this to build custom list wrapper components. */ declare abstract class AbstractDbxListWrapperDirective = DbxListView, C extends DbxListWrapperConfig = DbxListWrapperConfig, S extends ListLoadingState = ListLoadingState> implements DbxListViewWrapper { private readonly _config; private readonly _stateOverride; private readonly _selectionModeOverride; private readonly _disabledOverride; private readonly _selectionModeOverrideSignal; private readonly _disabledOverrideSignal; readonly hasMore: _angular_core.InputSignal>; readonly clickItem: _angular_core.OutputEmitterRef; readonly loadMore: _angular_core.OutputEmitterRef; readonly disabled: _angular_core.InputSignal>; readonly selectionMode: _angular_core.InputSignal>; readonly state: _angular_core.InputSignal>>; readonly selectionModeSignal: Signal>; readonly disabledSignal: Signal>; readonly currentState$: rxjs.Observable>; readonly config$: rxjs.Observable | undefined>; readonly configSignal: Signal | undefined>; constructor(initConfig: ObservableOrValue); setState(stateObs: MaybeObservableOrValue): void; setSelectionMode(selectionMode: MaybeObservableOrValue): void; setDisabled(disabled: MaybeObservableOrValue): void; protected _buildListConfig(config: C): DbxListConfig; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, { "hasMore": { "alias": "hasMore"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; }, { "clickItem": "clickItem"; "loadMore": "loadMore"; }, never, never, true, never>; } /** * Configuration type for selection list wrappers. Further omits `onSelectionChange` since the wrapper emits it as an output event. */ type DbxSelectionListWrapperConfig = DbxListView> = Omit, 'onSelectionChange'>; /** * Abstract base directive for list wrappers that also support selection change events. Extends {@link AbstractDbxListWrapperDirective} * with a `selectionChange` output that emits whenever the user changes item selection. */ declare abstract class AbstractDbxSelectionListWrapperDirective = DbxListView, C extends DbxSelectionListWrapperConfig = DbxSelectionListWrapperConfig, S extends ListLoadingState = ListLoadingState> extends AbstractDbxListWrapperDirective { readonly selectionChange: _angular_core.OutputEmitterRef>; protected _buildListConfig(config: C): DbxListConfig; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, { "selectionChange": "selectionChange"; }, never, never, true, never>; } /** * Contains all supporting list components and directives. */ declare class DbxListModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Angular {@link TrackByFunction} that tracks {@link UniqueModel} items by their `id` property. * * @param index - The item's index in the iterable. * @param model - The model whose `id` is used as the tracking identity. * @returns The model's unique `id` value. */ declare const TRACK_BY_MODEL_ID: TrackByFunction; /** * Returns a {@link TrackByFunction} that tracks items by their unique `id` property. * * @returns A TrackByFunction that uses the item's `id` for identity tracking. * * @example * ```ts * readonly trackBy = trackByUniqueIdentifier(); * ``` */ declare function trackByUniqueIdentifier(): TrackByFunction; /** * Angular {@link TrackByFunction} that tracks {@link ModelKeyRef} items by their `key` property. * * @param index - The item's index in the iterable. * @param model - The model whose `key` is used as the tracking identity. * @returns The model's `key` value. */ declare const TRACK_BY_MODEL_KEY: TrackByFunction; /** * Returns a {@link TrackByFunction} that tracks items by their model `key` property. * * @returns A TrackByFunction that uses the item's `key` for identity tracking. * * @example * ```ts * readonly trackBy = trackByModelKeyRef(); * ``` */ declare function trackByModelKeyRef(): TrackByFunction; /** * Configuration for a {@link DbxSelectionValueListViewComponent}. Extends the base config with an option for single or multiple selection. */ interface DbxSelectionValueListViewConfig = DbxValueListItem, V = unknown> extends AbstractDbxValueListViewConfig { /** * Whether multiple items can be selected at once. Defaults to true. */ readonly multiple?: boolean; } /** * Renders a selection-capable list view. In 'select' mode, displays a `mat-selection-list` with checkboxes. * In 'view' mode, falls back to the standard {@link DbxValueListViewContentComponent} rendering. * * @example * ```html * * ``` */ declare class DbxSelectionValueListViewContentComponent = DbxValueListItem> extends DbxValueListViewContentComponent { readonly multiple: _angular_core.InputSignal>; readonly selectionMode: _angular_core.InputSignal>; readonly trackByFunctionSignal: _angular_core.Signal<_angular_core.TrackByFunction> | ((index: number, item: _dereekb_dbx_web.DbxValueListItemConfig) => any)>; /** * Separators for the 'select' mode list, which renders its items without grouping. The 'view' mode list renders its own. */ readonly separatorsSignal: _angular_core.Signal>[]>; readonly trailingSeparatorSignal: _angular_core.Signal>>; constructor(); matSelectionChanged(selection: MatSelectionListChange): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-selection-list-view-content", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Renders a selection-capable list view using a configuration input. Requires a parent {@link DbxListView} context. * Switches between selection mode (with checkboxes) and view mode (standard list) based on the parent's selection mode. * * @dbxWebComponent * @dbxWebSlug selection-list-view * @dbxWebCategory list * @dbxWebRelated list, list-view * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxSelectionValueListViewComponent = DbxValueListItem, V = unknown> extends AbstractDbxValueListViewDirective> { readonly selectionMode$: rxjs.Observable<"select" | "view">; readonly selectionModeSignal: _angular_core.Signal<"select" | "view">; readonly multipleSignal: _angular_core.Signal; readonly stickyHeadersSignal: _angular_core.Signal; readonly separatorConfigSignal: _angular_core.Signal>>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-selection-list-view", never, {}, {}, never, never, true, never>; } /** * Default template string for selection list view components that renders a `dbx-selection-list-view` with a `config` binding. */ declare const DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE = ""; /** * Convenience module that imports and exports {@link DbxSelectionValueListViewComponent}. */ declare class DbxSelectionValueListViewComponentImportsModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Abstract list view directive with built-in selection change support. Converts Angular Material {@link MatSelectionListChange} * events into {@link ListSelectionState} emissions. Extend this for list views that need item selection. */ declare abstract class AbstractDbxSelectionListViewDirective extends AbstractDbxListViewDirective { readonly selectionChange: _angular_core.OutputEmitterRef>; selectionChanged(selection: ListSelectionState): void; matSelectionChanged(selection: MatSelectionListChange): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, { "selectionChange": "selectionChange"; }, never, never, true, never>; } /** * Abstract base component for individual list item views. Automatically injects the current {@link DbxValueListItem} * via the {@link DBX_VALUE_LIST_VIEW_ITEM} token and provides convenient accessors for item properties. * * Extend this to create custom item rendering components used within value list views. */ declare abstract class AbstractDbxValueListViewItemComponent = DbxValueListItem> { readonly item: I; get itemValue(): T; get itemIcon(): string | undefined; get itemDisabled(): boolean | undefined; get itemRippleDisabled(): boolean | undefined; get itemSelected(): boolean | undefined; get itemAnchor(): Maybe | undefined; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, {}, never, never, true, never>; } /** * Heading level for a section header, corresponding to HTML heading elements h1 through h5. */ type DbxSectionHeaderHType = Exclude; /** * Configuration object for a section header's display properties, including * heading level, text, icon, hint text, and padding options. */ interface DbxSectionHeaderConfig { /** * Header sizing */ readonly h?: Maybe; /** * Whether or not to pad the header so it is inline with a dbx-content-container */ readonly paddedHeader?: Maybe; /** * The header text */ readonly header?: Maybe; /** * Whether or not the header should be the only content in the section. */ readonly onlyHeader?: Maybe; /** * The icon to show. */ readonly icon?: Maybe; /** * The hint text to show. */ readonly hint?: Maybe; /** * Whether or not the hint should be shown inline with the header. */ readonly hintInline?: Maybe; } /** * Renders a section header with a configurable heading level (h1-h5), optional icon, and hint text. * Can be used as a standalone element or as an attribute directive on elements with the `.dbx-section-header` class. * Serves as the base class for `DbxSectionComponent` and `DbxSectionPageComponent`. * * @dbxWebComponent * @dbxWebSlug section-header * @dbxWebCategory layout * @dbxWebRelated section, subsection * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * * ``` * * @example * ```html *
* ``` */ declare class DbxSectionHeaderComponent { readonly headerConfig: _angular_core.InputSignal>; readonly h: _angular_core.InputSignal>; readonly paddedHeader: _angular_core.InputSignal>; readonly header: _angular_core.InputSignal>; readonly onlyHeader: _angular_core.InputSignal>; readonly icon: _angular_core.InputSignal>; readonly hint: _angular_core.InputSignal>; readonly hintInline: _angular_core.InputSignal>; readonly hintInlineDefault: _angular_core.WritableSignal>; readonly headerConfigSignal: _angular_core.Signal; readonly showTitleSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Displays a content section with a header and body area. The header defaults to an h3 heading * and supports optional elevation styling. * * @dbxWebComponent * @dbxWebSlug section * @dbxWebCategory layout * @dbxWebRelated subsection, section-page, section-header, intro-action-section * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks, dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html *

Body

 * ``` * * @example * ```html * *

Section body content here.

* * * * *

Body content with elevated card styling.

* * ``` */ declare class DbxSectionComponent extends DbxSectionHeaderComponent { /** * Apply elevated card styling. */ readonly elevate: _angular_core.InputSignal; readonly classConfigSignal: _angular_core.Signal<"" | "dbx-section-elevate dbx-content-elevate">; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Default style for the intro action button. */ declare const DEFAULT_INTRO_ACTION_SECTION_BUTTON_STYLE: DbxButtonStyle; /** * Displays an introductory message with a call-to-action button. When the button is clicked, * the intro is replaced by the projected content. Useful for onboarding or first-time-use flows. * * @dbxWebComponent * @dbxWebSlug intro-action-section * @dbxWebCategory feedback * @dbxWebRelated section, list-empty-content * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html *

Body

 * ``` * * @example * ```html * *

Main content shown after the action.

* * ``` */ declare class DbxIntroActionSectionComponent { readonly hint: _angular_core.InputSignal>; readonly showIntro: _angular_core.InputSignal>; readonly action: _angular_core.InputSignal>; /** * (Optional) Style for the action button. * * Defaults to {@link DEFAULT_INTRO_ACTION_SECTION_BUTTON_STYLE}. Set a `color` here to paint the button with an * arbitrary {@link DbxColorInput} (including a registered color template) rather than the default accent palette. */ readonly buttonStyle: _angular_core.InputSignal>; readonly buttonStyleSignal: _angular_core.Signal; readonly showAction: _angular_core.OutputEmitterRef; actionClicked(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Scroll locking modes for a section page. * * - `'all'` - The entire header and body scroll together. * - `'body'` - The header stays fixed while the body scrolls. * - `'locked'` - All overflow is hidden and scrolling is disabled. */ type DbxSectionPageScrollLockedMode = 'all' | 'body' | 'locked'; /** * Renders a full page section with a header (defaulting to h2) and scrollable body area. * Supports nested section pages that retain proper fixed-height layout. Use for top-level * page content that needs a prominent heading. * * @dbxWebComponent * @dbxWebSlug section-page * @dbxWebCategory layout * @dbxWebRelated section, content-page * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks, dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html *

Body

 * ``` * * @example * ```html * *

Top-level page content.

* * ``` */ declare class DbxSectionPageComponent extends DbxSectionHeaderComponent { readonly scroll: _angular_core.InputSignal; readonly classConfigSignal: _angular_core.Signal; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Renders a subsection within a parent section, using a smaller heading (defaults to h4). * Useful for grouping related content under a `dbx-section`. * * @dbxWebComponent * @dbxWebSlug subsection * @dbxWebCategory layout * @dbxWebRelated section, section-header * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html *

Body

 * ``` * * @example * ```html * * *

Subsection body.

* * * ``` */ declare class DbxSubSectionComponent extends DbxSectionComponent { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Bundles all section layout components including section headers, sections, subsections, * section pages, and the intro action section for convenient import. */ declare class DbxSectionLayoutModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Adds flexible spacing between sibling elements in a flex container. * * @dbxWebComponent * @dbxWebSlug spacer * @dbxWebCategory layout * @dbxWebRelated bar, button-spacer * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * Title * * * * ``` */ declare class DbxSpacerDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Applies the current application style class from {@link DbxStyleService} to the host element. * * Use this directive to propagate the active style class onto any element or component. * * @dbxWebComponent * @dbxWebSlug style * @dbxWebCategory layout * @dbxWebRelated style-service, style-body, set-style * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html *
Styled content
* ``` */ declare class DbxStyleDirective { private readonly _styleService; readonly styleClassNameSignal: _angular_core.WritableSignal>; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Determines how the style is applied by {@link DbxSetStyleDirective}. * * - `'global'` - Sets the style on the parent {@link DbxStyleService} for the entire app. * - `'self'` - Applies the style class only to the host element. * - `'both'` - Applies the style both globally and to the host element. */ type DbxSetStyleMode = 'both' | 'global' | 'self'; /** * Sets the active application style for child elements and/or the global {@link DbxStyleService}. * * Accepts a {@link DbxStyleName} and optional suffixes, then applies the computed style class * depending on the configured {@link DbxSetStyleMode}. * * @dbxWebComponent * @dbxWebSlug set-style * @dbxWebCategory layout * @dbxWebRelated style, style-service, style-body * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html *
* *
* ``` */ declare class DbxSetStyleDirective implements OnDestroy { private readonly _styleService; /** * The mode for the style. * * - global: The style will be set on the parent DbxStyleService. * - self: The style will be applied to the host element. */ readonly setStyleMode: _angular_core.InputSignal; /** * The input DbxStyleName to style the host element with. */ readonly dbxSetStyle: _angular_core.InputSignal; /** * The input suffixes to allow to be applied to the */ readonly suffixes: _angular_core.InputSignal>; /** * The output style class to apply to the host element. */ readonly outputStyleClassSignal: _angular_core.WritableSignal; readonly style$: Observable; readonly suffixes$: Observable>; readonly config$: Observable; readonly styleClass$: Observable; readonly _outputStyleClassSubscription: _dereekb_rxjs.SubscriptionObject; protected readonly _modeEffect: _angular_core.EffectRef; ngOnDestroy(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Applies the current {@link DbxStyleService} body application — the active style class, any supplement classes, and * supplement inline styles (CSS custom properties) — to the document `` element. * * Place this directive on a root-level element so that the body tag receives the active style. * * @dbxWebComponent * @dbxWebSlug style-body * @dbxWebCategory layout * @dbxWebRelated style, style-service, set-style * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html *
* ``` */ declare class DbxStyleBodyDirective { private readonly _styleService; private readonly _renderer; private _classes; private _styleKeys; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Angular module that bundles all style-related directives: {@link DbxColorDirective}, {@link DbxSpacerDirective}, * {@link DbxStyleDirective}, {@link DbxSetStyleDirective}, and {@link DbxStyleBodyDirective}. */ declare class DbxStyleLayoutModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Injection token for providing the default {@link DbxStyleConfig} to {@link DbxStyleService}. */ declare const DEFAULT_DBX_STYLE_CONFIG_TOKEN: InjectionToken; /** * Manages application-wide style classes and suffix modes (e.g., dark mode). * * Consumers can set a default style config, override it with an observable config, * and toggle style suffixes to switch between style variants at runtime. * * Provided via `provideDbxStyleService()` from `style.providers`. * * @dbxWebComponent * @dbxWebSlug style-service * @dbxWebCategory layout * @dbxWebRelated style, set-style, style-body, color-service * * @example * ```ts * const styleService = inject(DbxStyleService); * styleService.toggleDarkSuffix(); // toggle dark mode on/off * styleService.setStyleClassSuffix('dark'); // force dark mode * ``` */ declare class DbxStyleService implements Destroyable { private readonly _defaultConfig; private readonly _config; private readonly _styleClassSuffix; private readonly _supplement; readonly config$: Observable; readonly styleClassSuffix$: Observable>; readonly styleClassName$: Observable; /** * The currently active style supplement, or undefined when none is set. */ readonly supplement$: Observable>; /** * The flattened body application: the root style class plus any supplement classes, alongside the supplement inline styles. */ readonly styleApplication$: Observable; /** * Returns the style class given the input configuration. * * @param configObs - Observable containing the configuration to use. * @returns DbxStyleClass. */ getStyleClassWithConfig(configObs: Observable): Observable; /** * Toggles the dark suffix on/off for the service. * * @param toggle - Whether to toggle the suffix on or off. */ toggleDarkSuffix(toggle?: Maybe): 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): void; /** * Returns the current style class suffix, if one is set. * * @returns The currently active style class suffix, or undefined if none is set. */ get currentStyleClassSuffix(): Maybe; /** * Directly sets the active style class suffix, or clears it if null/undefined. * * @param suffix - The suffix to activate, or nullish to clear the current suffix. */ setStyleClassSuffix(suffix: Maybe): void; /** * Updates the default style configuration used when no override config is set. * * @param defaultConfig - The style configuration to use as the new default. */ setDefaultConfig(defaultConfig: DbxStyleConfig): void; /** * Overrides the active style configuration with the given value or observable. * * @param config - A style configuration value or observable to set as the active override. */ setConfig(config: ObservableOrValue): void; /** * Clears the active config override if it matches the given reference, reverting to the default config. * * @param config - The config reference to compare against the current override. */ unsetConfig(config: ObservableOrValue): void; /** * Sets the active style supplement (classes + inline styles) layered on top of the configured style on the body. * * @param supplement - A supplement value or observable, or nullish to clear the current supplement. */ setSupplement(supplement: Maybe>>): void; /** * Clears the active supplement if it matches the given reference. * * @param supplement - The supplement reference to compare against the current supplement. */ unsetSupplement(supplement: ObservableOrValue>): void; destroy(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Configuration for provideDbxStyleService(). */ interface ProvideDbxStyleServiceConfig { /** * Default style configuration, if applicable. * * If null, the DbxStyleService will not have a default style */ readonly dbxStyleConfig: Maybe; /** * Optional initial configuration for the {@link DbxColorService}. * * When provided, seeds the color service with the supplied templates. */ readonly dbxColorServiceConfig?: Maybe; } /** * Provides environment-level providers for {@link DbxStyleService}, {@link DbxColorService}, and their default configurations. * * @param config - Configuration specifying the default style and optional color templates. * @returns Environment providers for the style and color services and their default config tokens. * * @example * ```ts * provideDbxStyleService({ * dbxStyleConfig: { style: 'my-app', suffixes: new Set(['dark']) }, * dbxColorServiceConfig: { * templates: [{ key: 'brand-positive', config: { color: '#1f9b59', contrast: 'white', tone: 18 } }] * } * }); * ``` * * @__NO_SIDE_EFFECTS__ */ declare function provideDbxStyleService(config: ProvideDbxStyleServiceConfig): EnvironmentProviders; /** * Applies a themed text color to the host element. * * Accepts either a {@link DbxThemeColor} string (e.g. `'primary'`, `'warn'`) or a {@link DbxColorConfig} * object carrying an arbitrary CSS color value. Unlike {@link DbxColorDirective} which sets the background, * this directive only sets the foreground text color. * * @dbxWebComponent * @dbxWebSlug text-color * @dbxWebCategory layout * @dbxWebRelated color, color-service * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * error * Themed text * Custom hex text * ``` */ declare class DbxTextColorDirective { private readonly _colorService; readonly dbxTextColor: _angular_core.InputSignal>; private readonly _configSignal; readonly cssClassSignal: _angular_core.Signal; /** * Inline `--dbx-color-current` value applied when a {@link DbxColorConfig} is bound. Resolves to `null` in string mode so the named `.dbx-{color}` class supplies the variable instead. */ readonly colorStyleSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Displays a formatted United States address with optional contact fields (name, phone). * * @example * ```html * * ``` */ declare class DbxUnitedStatesAddressComponent { readonly address: _angular_core.InputSignal>>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * A structured content block with a header row (icon + label) and a detail content area below. * * Use the `[header]` content slot for extra header-level content and default content for the detail area. * * The component provides the structure only. Add the `dbx-detail-block-tile` class for the tile styling: the icon in a * round tile beside the content, an uppercase label, and `dbx-detail-block-tile-value` / `dbx-detail-block-tile-hint` * lines for the value and its supporting text. * * @dbxWebComponent * @dbxWebSlug detail-block * @dbxWebCategory text * @dbxWebRelated label-block * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * Body * ``` * * @example * ```html * *

{{ user.email }}

* * ``` * * @example * ```html * * 7:45 AM – 3:30 PM * Full day · 8 hrs * * ``` */ declare class DbxDetailBlockComponent { readonly icon: _angular_core.InputSignal>; readonly header: _angular_core.InputSignal>; readonly alignHeader: _angular_core.InputSignal; readonly bigHeader: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Header row for a detail block, displaying an optional icon and label with projected content. * * Used internally by {@link DbxDetailBlockComponent} but can also be used standalone. * * @example * ```html * * * * ``` */ declare class DbxDetailBlockHeaderComponent { readonly icon: _angular_core.InputSignal>; readonly header: _angular_core.InputSignal>; readonly alignHeader: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Rounded, padded leading-icon tile. Renders a `` from the * `icon` input centered inside a flex tile, or projects custom content * when `icon` is not supplied. Apply `[dbxColor]` (optionally with * `[dbxColorTone]`) directly on the host to give the tile a tonal or * full-color background — the tile itself sets layout only. * * Set `[round]="true"` to apply the `dbx-icon-tile-round` modifier and * render a circle instead of the default 12px-rounded square. * * Equivalent to writing `
…
`, * but with the icon name as a single input. Backed by the same * `dbx-icon-tile` host class as {@link DbxIconTileDirective}, so the CSS * utility, the directive form, and this component all share styling. * * Sizing, padding, border radius, font, and inner `.mat-icon` size are * all configurable via CSS custom properties on the host: * `--dbx-icon-tile-width`, `--dbx-icon-tile-height`, * `--dbx-icon-tile-min-width`, `--dbx-icon-tile-padding`, * `--dbx-icon-tile-border-radius`, `--dbx-icon-tile-font-size`, * `--dbx-icon-tile-font-weight`, `--dbx-icon-tile-icon-size`. * * @dbxWebComponent * @dbxWebSlug icon-tile * @dbxWebCategory layout * @dbxWebRelated icon-tile-host, dbx-color, list-two-line-item * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebContentProjection Optional fallback content rendered when `icon` is not supplied (e.g. a custom icon component). * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * * * * * * * ``` */ declare class DbxIconTileComponent { readonly icon: _angular_core.InputSignal>; readonly round: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Host-class form of the icon tile — applies the `dbx-icon-tile` utility * (flex-centered, 12px rounded, 8px padded) to an existing element. Use * this when an existing slot (e.g. a list row's `.item-icon` div) needs * the tile presentation without introducing a wrapping component, or * when stacking with another component that already owns the host (so a * `` child element isn't possible). * * Pair with `[dbxColor]` (optionally `[dbxColorTone]`) on the same host * for a tonal/full-color background. The host has no background of its * own — only layout. For the convenient component form that renders the * `` for you, use {@link DbxIconTileComponent} (``). * * Sizing, padding, border radius, font, and inner `.mat-icon` size are * all configurable via CSS custom properties on the host: * `--dbx-icon-tile-width`, `--dbx-icon-tile-height`, * `--dbx-icon-tile-min-width`, `--dbx-icon-tile-padding`, * `--dbx-icon-tile-border-radius`, `--dbx-icon-tile-font-size`, * `--dbx-icon-tile-font-weight`, `--dbx-icon-tile-icon-size`. * * @dbxWebComponent * @dbxWebSlug icon-tile-host * @dbxWebCategory layout * @dbxWebRelated icon-tile, dbx-color, list-two-line-item * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html *
* star *
* ``` * * @example * ```html *
*
* check_circle *
*
* Title * Details *
*
* ``` */ declare class DbxIconTileDirective { /** * When `true`, applies the `dbx-icon-tile-round` modifier to render the * tile as a circle instead of a 12px-rounded square. */ readonly dbxIconTileRound: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Configuration object for {@link DbxStepBlockComponent}. * * Pass via the `config` input as an alternative to setting individual inputs. * Individual inputs take precedence over config values. * * @example * ```typescript * const stepConfig: DbxStepBlockComponentConfig = { * step: 1, * header: 'Create Account', * hint: 'Fill in the registration form.', * color: 'primary' * }; * ``` */ interface DbxStepBlockComponentConfig { readonly step?: Maybe; readonly icon?: Maybe; readonly header?: Maybe; readonly hint?: Maybe; readonly color?: Maybe; readonly center?: Maybe; } /** * A step-oriented content block that displays a numbered circle badge on the left * with header, hint, and projected content on the right. * * Use the `icon` input to replace the step number with a Material icon. * Use the `[header]` content slot for extra header-level content (like `dbx-detail-block`). * Use the `color` input to customize the badge color (defaults to `'primary'`). * * Use the `center` input to vertically center the badge with the content. * * Accepts either individual inputs or a single `config` object. Individual inputs * take precedence over config values when both are provided. * * @example * ```html * *

Enter your email and password to get started.

* * * *

Content using a config object.

* * * * Extra header content *

Detail content goes here.

* * ``` */ declare class DbxStepBlockComponent { readonly config: _angular_core.InputSignal>; readonly step: _angular_core.InputSignal>; readonly icon: _angular_core.InputSignal>; readonly header: _angular_core.InputSignal>; readonly hint: _angular_core.InputSignal>; readonly color: _angular_core.InputSignal>; readonly center: _angular_core.InputSignal>; readonly stepSignal: _angular_core.Signal; readonly iconSignal: _angular_core.Signal>; readonly headerSignal: _angular_core.Signal>; readonly hintSignal: _angular_core.Signal>; readonly colorSignal: _angular_core.Signal<"" | "default" | "primary" | "secondary" | "tertiary" | "accent" | "warn" | "notice" | "ok" | "success" | "grey" | "disabled" | _dereekb_dbx_web.DbxColorConfig>; readonly centerSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Adds inline spacing sized for icons, typically used to align text that sits next to icon-bearing siblings. * * @example * ```html * * Text aligned with icon spacing * ``` */ declare class DbxIconSpacerDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Displays a label header above projected content, useful for labeling form fields or data sections. * * @dbxWebComponent * @dbxWebSlug label-block * @dbxWebCategory text * @dbxWebRelated detail-block * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * Body * ``` * * @example * ```html * Active * ``` */ declare class DbxLabelBlockComponent { readonly header: _angular_core.InputSignal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * The default linkify string type. */ declare const DEFAULT_DBX_LINKIFY_STRING_TYPE: DbxLinkifyStringType; /** * Custom key used to identify a type of linkify string. * * I.E. how-to-section, product-description, etc. */ type DbxLinkifyStringType = string; /** * Customization options used by DbxLinkifyComponent. */ type DbxLinkifyStringOptions = Parameters[1]; /** * Inline configuration for {@link DbxLinkifyComponent}, allowing a type key and/or custom linkify options. */ interface DbxLinkifyConfig { /** * The type to use for retrieving pre-configured configuration. */ readonly type?: Maybe; /** * Additional options to use for linkification. These options override the default options. */ readonly options?: DbxLinkifyStringOptions; } /** * Converts URLs and email addresses in plain text into clickable HTML links using the linkify-string library. * * Options are resolved from {@link DbxLinkifyService} by type, then merged with any inline config overrides. * * @example * ```html * * * ``` */ declare class DbxLinkifyComponent { private readonly sanitizer; private readonly dbxLinkifyService; readonly text: _angular_core.InputSignal>; readonly type: _angular_core.InputSignal>; readonly config: _angular_core.InputSignal>; readonly linkifiedTextSignal: _angular_core.Signal; readonly linkifiedBodySignal: _angular_core.Signal<_angular_platform_browser.SafeHtml | undefined>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * A registered linkify configuration keyed by type, holding the linkify-string options for that type. */ interface DbxLinkifyServiceEntry { readonly type: DbxLinkifyStringType; readonly options: DbxLinkifyStringOptions; } /** * Default entry type without the type field. * * Used for registerDefaultEntry() and DbxLinkifyServiceConfig. */ type DbxLinkifyServiceDefaultEntry = Omit; /** * Configuration provided in the root module for configuring entries. */ declare abstract class DbxLinkifyServiceConfig { /** * Optional default entry override. */ abstract defaultEntry?: Maybe; /** * Entries to register. */ abstract entries?: Maybe>; } /** * Service used to register and retrieve linkify configurations by type. * * It has a default entry that is used when no type is specified or the requested type is not found. * By default, the default entry uses `{ defaultProtocol: 'https', target: { url: '_blank' } }`. * * Apps can override the default and register additional types via DbxLinkifyServiceConfig * (provided by provideDbxLinkify()) or by calling register()/registerDefaultEntry() directly. */ declare class DbxLinkifyService { private readonly _entries; constructor(); /** * Registers the default entry. * * @param entry - Entry without the type field. */ registerDefaultEntry(entry: DbxLinkifyServiceDefaultEntry): void; /** * Registers one or more entries by type. * * @param entries - One or more entries to register. * @param override - Whether to override existing entries (default: true) */ register(entries: ArrayOrValue, override?: boolean): void; /** * Returns the default entry. * * @returns The default linkify service entry, or undefined if none is registered. */ getDefaultEntry(): Maybe; /** * Returns the entry for the given type. * * @param type - The linkify string type to look up. * @returns The registered entry for the given type, or undefined if not found. */ getEntryRegisteredForType(type: DbxLinkifyStringType): Maybe; /** * Returns the entry for the given type, or the default type if there is no entry registered or the input type is null/undefined. * * @param type - The linkify string type to look up, or nullish to retrieve the default entry. * @returns The matching entry, or the default entry if the type is not provided. */ getEntry(type?: Maybe): Maybe; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Factory for DbxLinkifyServiceConfig. */ type DbxLinkifyServiceConfigFactory = (injector: Injector) => DbxLinkifyServiceConfig; /** * Configuration for provideDbxLinkify(). */ interface ProvideDbxLinkifyConfig { /** * Factory for DbxLinkifyServiceConfig. */ readonly dbxLinkifyServiceConfigFactory: DbxLinkifyServiceConfigFactory; } /** * Creates environment-level providers for configuring {@link DbxLinkifyService} with a custom factory. * * @param config - Configuration containing the factory function for creating the linkify service config. * @returns Environment providers that register the DbxLinkifyServiceConfig. * * @example * ```ts * provideDbxLinkify({ * dbxLinkifyServiceConfigFactory: (injector) => ({ * defaultEntry: { options: { defaultProtocol: 'https' } }, * entries: [{ type: 'bio', options: { target: { url: '_blank' } } }] * }) * }); * ``` */ declare function provideDbxLinkify(config: ProvideDbxLinkifyConfig): EnvironmentProviders; /** * Display configuration for a single colored chip. * * Combines a labeled value with a theme color for rendering a styled chip. */ interface DbxChipDisplay extends LabeledValue { /** * Optional unique key for tracking in `@for` loops. Falls back to `label` when not provided. */ readonly key?: string; /** * Theme color or {@link DbxColorConfig} applied to the chip background. */ readonly color?: Maybe; /** * Whether to render the chip in small mode. */ readonly small?: Maybe; /** * Whether to render the chip in block mode (no border-radius). */ readonly block?: Maybe; /** * Background tone level controlling the opacity of the chip color. */ readonly tone?: Maybe; } /** * Default background tone percentage for tonal chip coloring. */ declare const DEFAULT_DBX_CHIP_TONE = 18; /** * Renders a styled chip element with optional small, block, and color modes. * * Hosts a {@link DbxColorDirective} that provides the color tokens + `.dbx-color` marker the chip's * `.dbx-chip.dbx-color` SCSS paints from. The color can be supplied either through the {@link color}/{@link display} * inputs (pushed into the host directive) or by binding `[dbxColor]` directly; the chip's tone handling (default * {@link DEFAULT_DBX_CHIP_TONE} → tonal text) applies to both. * * @dbxWebComponent * @dbxWebSlug chip * @dbxWebCategory text * @dbxWebRelated chip-list * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxChipDirective { private readonly _dbxColorDirective; constructor(); readonly small: _angular_core.InputSignal>; readonly block: _angular_core.InputSignal>; /** * Theme color or {@link DbxColorConfig} applied to the chip, pushed into the host {@link DbxColorDirective}. * * When {@link display} is also set, its color is used as a fallback. */ readonly color: _angular_core.InputSignal>; /** * Display configuration that provides color (and optionally label/value metadata). * * The color from `display` is used as a fallback when `color` is not explicitly set. */ readonly display: _angular_core.InputSignal>; /** * Background tone level for tonal appearance. Defaults to {@link DEFAULT_DBX_CHIP_TONE}. * * Set to `100` for fully opaque background. */ readonly tone: _angular_core.InputSignal>; readonly colorSignal: _angular_core.Signal>; /** * The effective color on the host {@link DbxColorDirective} — either pushed from {@link colorSignal} or bound * directly via `[dbxColor]`. Drives the chip's tone/tonal handling. */ readonly effectiveColorSignal: _angular_core.Signal>; readonly toneSignal: _angular_core.Signal; readonly styleSignal: _angular_core.Signal; /** * Sets `--dbx-color-bg-tone` on the host to control the background opacity of the painted chip surface. * Only applied when a color is set. */ readonly bgToneStyleSignal: _angular_core.Signal; /** * Whether tonal mode is active (color is set and tone < 100). Adds the `dbx-color-tonal` * CSS class which overrides text color to the vibrant theme color via CSS rather than * an inline style binding (which would conflict with `[ngStyle]`). */ readonly isTonalSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Renders a row of colored chips from an array of {@link DbxChipDisplay} items. * * Uses {@link DbxChipDirective} internally with `dbx-chip-spacer` class for spacing. * * @dbxWebComponent * @dbxWebSlug chip-list * @dbxWebCategory text * @dbxWebRelated chip * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * * * * ``` */ declare class DbxChipListComponent { readonly chips: _angular_core.InputSignal>; readonly small: _angular_core.InputSignal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Configuration for a single chip displayed by {@link DbxTextChipsComponent}. * * Extends {@link LabeledValue} for the chip label and value. */ interface TextChip extends LabeledValue { /** * Optional unique key for tracking in `@for` loops. Falls back to `label` when not provided. */ readonly key?: string; /** * Optional tooltip shown on hover. */ readonly tooltip?: string; /** * Whether the chip appears selected. */ readonly selected?: boolean; /** * Theme color or {@link DbxColorConfig} applied to the chip background via {@link dbxColorBackground}. */ readonly color?: Maybe; } /** * Renders a read-only list of Material chip options from an array of {@link TextChip} objects. * * @example * ```html * * ``` */ declare class DbxTextChipsComponent { private readonly _colorService; readonly defaultSelection: _angular_core.InputSignal>; readonly chips: _angular_core.InputSignal>; /** * Returns the themed background CSS class for a chip's color. * * @param chip - The chip to get the color class for. * @returns The CSS class name for the chip's background color, or empty string if no color. */ chipColorClass(chip: TextChip): string; /** * Returns the inline `--dbx-bg-color-current` value for a chip when its color is a {@link DbxColorConfig}; otherwise null. * * @param chip - The chip. * @returns The background color CSS value, or null for named-color strings. */ chipBgColorStyle(chip: TextChip): Maybe; /** * Returns the inline `--dbx-color-current` value for a chip when its color is a {@link DbxColorConfig}; otherwise null. * * @param chip - The chip. * @returns The contrast color CSS value, or null for named-color strings. */ chipColorStyle(chip: TextChip): Maybe; private _expandedChipConfig; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Configuration for the DbxNumberWithLimitComponent. */ interface NumberWithLimit { /** * Number to display, if applicable. */ readonly value: T; /** * Limit to display, if applicable. */ readonly limit?: Maybe; /** * Function to format the input number(s) to a string before being displayed, if applicable. */ readonly formatNumber?: Maybe<(number: T) => string>; /** * Prefix to add before the value */ readonly prefix?: Maybe; /** * Suffix to add after the value */ readonly suffix?: Maybe; } /** * Displays a number value with an optional limit, automatically applying color-coded * theming based on the ratio of value to limit (ok, notice, warn). * * @example * ```html * * * ``` */ declare class DbxNumberWithLimitComponent { readonly number: _angular_core.InputSignal | undefined>; readonly rounded: _angular_core.InputSignal; readonly valueSignal: _angular_core.Signal; readonly limitSignal: _angular_core.Signal; readonly hasLimitSignal: _angular_core.Signal; readonly prefixSignal: _angular_core.Signal>; readonly suffixSignal: _angular_core.Signal>; readonly colorSignal: _angular_core.Signal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-number-with-limit", never, { "number": { "alias": "number"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Whether copying to the clipboard succeeded. */ type CopyToClipboardSuccess = boolean; /** * Content that can be copied to the clipboard (strings only). */ type CopyToClipboardContent = string; /** * Function that copies text content to the clipboard with retry support. * * @example * ```ts * const copy = copyToClipboardFunction(clipboard); * const success = await copy('Hello world'); * ``` */ type CopyToClipboardFunction = ((content: CopyToClipboardContent) => Promise) & { readonly _clipboard: Clipboard; }; /** * Configuration for {@link copyToClipboardFunction} controlling timeout and retry behavior. */ interface CopyToClipboardFunctionConfig { readonly copyTimeoutSeconds?: Maybe; readonly delayBetweenCopyAttempts?: Maybe; readonly onCopyResult?: Maybe<(success: CopyToClipboardSuccess, content: CopyToClipboardContent) => void>; } /** * Creates a {@link CopyToClipboardFunction} that retries the copy operation until success or timeout. * * @param clipboard - The Angular CDK Clipboard instance. * @param config - Optional timeout and retry settings. * @returns Copies text to the clipboard. * * @example * ```ts * const copy = copyToClipboardFunction(clipboard, { copyTimeoutSeconds: 10 }); * const success = await copy('some text'); * ``` * * @__NO_SIDE_EFFECTS__ */ declare function copyToClipboardFunction(clipboard: Clipboard, config?: CopyToClipboardFunctionConfig): CopyToClipboardFunction; /** * Injects a {@link CopyToClipboardFunction} using Angular's dependency injection. * * Must be called in an Angular injection context. * * @param config - Optional timeout and retry settings. * @returns The clipboard copy function. * * @example * ```ts * const copy = injectCopyToClipboardFunction(); * await copy('copied text'); * ``` * * @__NO_SIDE_EFFECTS__ */ declare function injectCopyToClipboardFunction(config?: CopyToClipboardFunctionConfig): CopyToClipboardFunction; /** * Extended clipboard copy function that shows a Material snackbar notification on success or failure. */ type CopyToClipboardFunctionWithSnackbarMessage = CopyToClipboardFunction & { setSnackbarMessagesConfig(config: Maybe): void; setSnackbarMessagesEnabled(enabled: boolean): void; }; interface CopyToClipboardFunctionWithSnackbarMessageSnackbarConfig { /** * The duration to show the snackbar for. * * Defaults to 3 seconds. */ readonly snackbarDuration?: Milliseconds; /** * The message to show when the content is copied successfully. */ readonly successMessage?: GetterOrValueWithInput; /** * The message to show when the content fails to copy. */ readonly failureMessage?: GetterOrValueWithInput; } /** * Combined configuration for the clipboard copy function and its snackbar notification behavior. */ interface CopyToClipboardFunctionWithSnackbarMessageConfig extends CopyToClipboardFunctionConfig, CopyToClipboardFunctionWithSnackbarMessageSnackbarConfig { } /** * Injects a {@link CopyToClipboardFunctionWithSnackbarMessage} that copies text to the clipboard * and shows a Material snackbar with a success or failure message. * * Must be called in an Angular injection context. * * @param config - Optional configuration for copy behavior and snackbar messages. * @returns Clipboard copy function with snackbar notification support. * * @example * ```ts * const copy = injectCopyToClipboardFunctionWithSnackbarMessage({ * successMessage: 'Link copied!', * snackbarDuration: 2000 * }); * await copy('https://example.com'); * ``` */ declare function injectCopyToClipboardFunctionWithSnackbarMessage(config?: CopyToClipboardFunctionWithSnackbarMessageConfig): CopyToClipboardFunctionWithSnackbarMessage; /** * Abstract base class for clipboard directives that provides copy-to-clipboard * functionality with configurable snackbar notifications. * * Subclasses should call `this._copyToClipboard(text)` to trigger a copy operation. */ declare class AbstractDbxClipboardDirective { protected readonly _copyToClipboard: _dereekb_dbx_web.CopyToClipboardFunctionWithSnackbarMessage; readonly clipboardSnackbarMessagesConfig: _angular_core.InputSignal>; readonly clipboardSnackbarMessagesEnabled: _angular_core.InputSignal; protected readonly _configEffect: _angular_core.EffectRef; protected readonly _enabledEffect: _angular_core.EffectRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Makes the host element clickable to copy text to the clipboard. * * If no explicit `dbxClickToCopyText` value is provided, copies the element's text content. * Optionally highlights the element to indicate it is copyable. * * @example * ```html * Copy this value * Subtle copy * ``` */ declare class DbxClickToCopyTextDirective extends AbstractDbxClipboardDirective { readonly copyTextFromElement: _angular_core.ModelSignal | undefined>; /** * If the input is null, then copy from the element's text content. */ readonly copyText: _angular_core.InputSignal>>; /** * If true, the click events will be ignored. */ readonly disableCopy: _angular_core.InputSignal; /** * Highlight the text visually. */ readonly highlighted: _angular_core.InputSignal; handleClick(event: MouseEvent): void; _copyText(eventElement?: Maybe): Maybe; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Disables the browser right-click context menu on the CDK overlay container element. * * Useful for preventing the default context menu from appearing over dialogs or popups. * * @param classes - CSS class name of the overlay container element to target. Defaults to `'cdk-overlay-container'`. * @param onEvent - Optional callback invoked on each suppressed right-click event. * @returns A cleanup function that removes the event listener. * * @example * ```ts * const cleanup = disableRightClickInCdkBackdrop(); * // later, to re-enable: * cleanup(); * ``` */ declare function disableRightClickInCdkBackdrop(classes?: string, onEvent?: (event: MouseEvent) => void): DestroyFunction; /** * Configuration for {@link overrideClickElementEffect} specifying the click target * and the child element whose clicks should be intercepted. */ interface OverrideClickElementEffectConfig { /** * Target to transfer "click" events to. */ readonly clickTarget?: Maybe>>>; /** * The child target to watch and override clicks for. */ readonly childClickTarget: Signal>>; /** * Optional signal to disable the clicking override. */ readonly disabledSignal?: Maybe>; } /** * Creates an Angular effect that intercepts clicks on a child element and redirects them * to a parent click target, while preventing the default browser navigation. * * Solves the problem where an injected element calls `event.stopPropagation()` without * `event.preventDefault()` — for example, a `dbx-button` inside a router anchor would * stop the router link from firing but still trigger the anchor's href navigation. * * Modifier clicks (ctrl, cmd, shift, middle-click) are allowed through for new tab/window behavior. * * Must be called in an Angular injection context. * * @param config - Configuration specifying the click target, child element to intercept, and optional disabled signal. * @returns The created Angular effect reference. * * @example * ```ts * overrideClickElementEffect({ * clickTarget: this.anchorElementRef, * childClickTarget: this.buttonElementRef * }); * ``` */ declare function overrideClickElementEffect(config: OverrideClickElementEffectConfig): _angular_core.EffectRef; /** * Icon shown by {@link DbxClickToCopyTextComponent} when no icon is configured. */ declare const DEFAULT_DBX_CLICK_TO_COPY_TEXT_ICON = "content_copy"; /** * Configuration object for {@link DbxClickToCopyTextComponent}. * * Pass via the `config` input as an alternative to setting individual inputs. Individual inputs take precedence over config values. */ interface DbxClickToCopyTextComponentConfig { /** * Text to copy. Defaults to the projected content's text. */ readonly copyText?: Maybe; /** * Whether to show the copy icon. Defaults to true. */ readonly showIcon?: Maybe; /** * Whether to underline the content. Defaults to false. */ readonly highlighted?: Maybe; /** * Snackbar messages shown after copying. */ readonly clipboardSnackbarMessagesConfig?: Maybe; /** * Whether to show a snackbar after copying. Defaults to true. */ readonly clipboardSnackbarMessagesEnabled?: Maybe; /** * The copy icon. Defaults to {@link DEFAULT_DBX_CLICK_TO_COPY_TEXT_ICON}. */ readonly clickToCopyIcon?: Maybe; /** * Whether only the icon copies, leaving the content selectable. Defaults to false. */ readonly clickIconToCopyOnly?: Maybe; } /** * Wraps projected content with click-to-copy functionality and a copy icon button. * * Clicking the text or the icon copies the text to the clipboard and optionally shows a snackbar confirmation. * * Accepts either individual inputs or a single `config` object. Individual inputs take precedence over config values. * * @dbxWebComponent * @dbxWebSlug click-to-copy-text * @dbxWebCategory text * @dbxWebRelated chip, click-to-copy-field * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * {{ value }} * ``` * * @example * ```html * User {{ userId }} * ``` */ declare class DbxClickToCopyTextComponent { readonly contentElementRef: _angular_core.Signal | undefined>; readonly dbxClickToCopyText: _angular_core.Signal; readonly config: _angular_core.InputSignal>; readonly copyText: _angular_core.InputSignal>; readonly showIcon: _angular_core.InputSignal>; readonly highlighted: _angular_core.InputSignal>; readonly clipboardSnackbarMessagesConfig: _angular_core.InputSignal>; readonly clipboardSnackbarMessagesEnabled: _angular_core.InputSignal>; readonly clickToCopyIcon: _angular_core.InputSignal>; readonly clickIconToCopyOnly: _angular_core.InputSignal>; readonly copyTextSignal: _angular_core.Signal>; readonly showIconSignal: _angular_core.Signal; readonly highlightedSignal: _angular_core.Signal; readonly clipboardSnackbarMessagesConfigSignal: _angular_core.Signal>; readonly clipboardSnackbarMessagesEnabledSignal: _angular_core.Signal; readonly clickToCopyIconSignal: _angular_core.Signal; readonly clickIconToCopyOnlySignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Text shown in place of a secret {@link DbxClickToCopyFieldComponent} value until it is revealed. */ declare const DEFAULT_DBX_CLICK_TO_COPY_FIELD_HIDDEN_TEXT = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"; /** * Configuration object for {@link DbxClickToCopyFieldComponent}. * * Extends the {@link DbxClickToCopyTextComponentConfig} the field passes to its `dbx-click-to-copy-text`, except `highlighted`, which * underlines inline text and does not suit a field. `copyText` defaults to {@link text}. * * Pass via the `config` input as an alternative to setting individual inputs. Individual inputs take precedence over config values. */ interface DbxClickToCopyFieldComponentConfig extends Omit { /** * The value shown in the field, and copied unless `copyText` is set. */ readonly text?: Maybe; /** * Icon shown before the value. */ readonly icon?: Maybe; /** * Whether to show the value in a monospace font, for urls, ids, keys, and codes. */ readonly monospace?: Maybe; /** * Whether the value is a secret. It is then hidden behind {@link hiddenText} until the user reveals it with the field's show/hide button. * Copying always copies the real value. */ readonly secret?: Maybe; /** * Text shown in place of a hidden secret. Defaults to {@link DEFAULT_DBX_CLICK_TO_COPY_FIELD_HIDDEN_TEXT}. */ readonly hiddenText?: Maybe; } /** * A read-only field that shows a value, such as a url, id, or key, and copies it when clicked or when its copy icon is clicked. * * Copying is done by a wrapped `dbx-click-to-copy-text`, and the field passes its copy options (`copyText`, `showIcon`, `clickToCopyIcon`, * `clickIconToCopyOnly`, and the clipboard snackbar options) through to it. Set `clickIconToCopyOnly` to leave the value selectable. * * Set `secret` to hide the value until the user reveals it with the field's show/hide button. Bind `[(revealed)]` to follow or control * whether the secret is shown, such as to hide the same secret elsewhere on the page. * * Accepts either individual inputs or a single `config` object. Individual inputs take precedence over config values. * * @dbxWebComponent * @dbxWebSlug click-to-copy-field * @dbxWebCategory text * @dbxWebRelated click-to-copy-text * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * * ``` */ declare class DbxClickToCopyFieldComponent { readonly config: _angular_core.InputSignal>; readonly text: _angular_core.InputSignal>; readonly icon: _angular_core.InputSignal>; readonly monospace: _angular_core.InputSignal>; readonly secret: _angular_core.InputSignal>; readonly hiddenText: _angular_core.InputSignal>; readonly copyText: _angular_core.InputSignal>; readonly showIcon: _angular_core.InputSignal>; readonly clickToCopyIcon: _angular_core.InputSignal>; readonly clickIconToCopyOnly: _angular_core.InputSignal>; readonly clipboardSnackbarMessagesEnabled: _angular_core.InputSignal>; readonly clipboardSnackbarMessagesConfig: _angular_core.InputSignal>; /** * Whether a secret value is shown. Hidden at first. */ readonly revealed: _angular_core.ModelSignal; readonly textSignal: _angular_core.Signal>; readonly iconSignal: _angular_core.Signal>; readonly monospaceSignal: _angular_core.Signal; readonly secretSignal: _angular_core.Signal; readonly hiddenTextSignal: _angular_core.Signal; /** * The copy options passed to the wrapped `dbx-click-to-copy-text`, which applies its own defaults to the unset ones. */ readonly clickToCopyTextConfigSignal: _angular_core.Signal; readonly displayTextSignal: _angular_core.Signal>; toggleRevealed(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Angular module that bundles all text-related layout components and directives, including * address display, chips, detail blocks, copy-to-clipboard, linkify, and number-with-limit. */ declare class DbxTextModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Material button display variant used by dbx-button components. */ type DbxButtonType = 'basic' | 'raised' | 'stroked' | 'flat' | 'tonal' | 'icon'; /** * Programmatic style configuration for a dbx-button, providing fine-grained control * over button type, colors, spinner appearance, and floating action button mode. */ interface DbxButtonStyle { /** * Material button variant. */ readonly type?: Maybe; /** * Progress spinner mode (determinate or indeterminate). */ readonly mode?: Maybe; /** * Material theme palette, theme color, or {@link DbxColorConfig} for the button. * * Forwarded to the button host's `[dbxColor]` directive. */ readonly color?: Maybe; /** * Material theme palette or custom theme color for the loading spinner. */ readonly spinnerColor?: Maybe; /** * Custom CSS text color for the button label. */ readonly customTextColor?: Maybe; /** * Custom CSS color for the spinner stroke. */ readonly customSpinnerColor?: Maybe; /** * Whether to render as a Material floating action button (FAB). A button with text renders as an extended FAB. * * Combined with an `icon` type (or `iconOnly`), renders a round icon button instead. */ readonly fab?: Maybe; } /** * A button style and display pair. */ interface DbxButtonDisplayStylePair { readonly style?: Maybe; readonly display?: Maybe; } /** * Configuration for the confirmation prompt display. */ interface DbxPromptConfirmConfig { readonly title?: string; readonly prompt?: string; readonly confirmText?: string; readonly cancelText?: string; /** * (Optional) Style for the confirm button. * * Defaults to {@link DEFAULT_PROMPT_CONFIRM_BUTTON_STYLE}. Set a `color` here to paint the button with an arbitrary * {@link DbxColorInput} (including a registered color template) rather than the default palette. */ readonly confirmButtonStyle?: Maybe; /** * (Optional) Style for the cancel button. * * Defaults to {@link DEFAULT_PROMPT_CANCEL_BUTTON_STYLE}. */ readonly cancelButtonStyle?: Maybe; } /** * Default style for the confirm button. */ declare const DEFAULT_PROMPT_CONFIRM_BUTTON_STYLE: DbxButtonStyle; /** * Default style for the cancel button. */ declare const DEFAULT_PROMPT_CANCEL_BUTTON_STYLE: DbxButtonStyle; /** * Renders a confirmation prompt with customizable title, message, confirm, and cancel buttons. * * Projected content shows above the buttons. Content marked with the `buttons` attribute shows in the same row, before the * confirm button. * * @dbxWebComponent * @dbxWebSlug prompt-confirm * @dbxWebCategory overlay * @dbxWebRelated prompt, action-confirm * @dbxWebSkillRefs dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxPromptConfirmComponent { readonly config: _angular_core.InputSignal>; readonly confirmTextSignal: _angular_core.Signal; readonly cancelTextSignal: _angular_core.Signal; readonly confirmButtonStyleSignal: _angular_core.Signal; readonly cancelButtonStyleSignal: _angular_core.Signal; readonly confirm: _angular_core.OutputEmitterRef; readonly cancel: _angular_core.OutputEmitterRef; onConfirm(): void; onCancel(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Possible outcomes of the transition safety dialog. * * - `'success'` - The action completed successfully; allow the transition. * - `'stay'` - The user chose to stay on the current page. * - `'discard'` - The user chose to discard changes and allow the transition. * - `'none'` - The dialog was closed programmatically without a user decision. */ type DbxActionTransitionSafetyDialogResult = 'success' | 'stay' | 'discard' | 'none'; /** * Confirmation dialog displayed by {@link DbxActionTransitionSafetyDirective} when the user * attempts to navigate away with unsaved changes. Offers options to stay on the page, * leave without saving, or save before leaving. */ declare class DbxActionUIRouterTransitionSafetyDialogComponent extends AbstractDialogDirective { readonly config: DbxPromptConfirmConfig; confirm(): void; cancel(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Strategy for handling route transitions when the action has unsaved changes. * * - `'none'` - Allow the transition without any prompt. * - `'dialog'` - Always show a confirmation dialog and act based on the user's choice. * - `'auto'` - Attempt to auto-trigger the action if possible. If modified but not triggerable, fall back to showing a dialog. Best used with an auto-save mechanism. */ type DbxActionTransitionSafetyType = 'none' | 'dialog' | 'auto'; /** * Prevents UI Router transitions when the action has unsaved changes. Depending on the * configured safety type, it can auto-trigger the action, show a confirmation dialog, * or allow the transition without intervention. * * NOTE: This directive only works with UI-Router (not Angular Router). * * @dbxWebComponent * @dbxWebSlug action-transition-safety * @dbxWebCategory action * @dbxWebRelated action-confirm * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html *
...
* ``` */ declare class DbxActionTransitionSafetyDirective implements OnInit, OnDestroy { protected readonly _safetyType: BehaviorSubject>; readonly dbxActionTransitionSafety: _angular_core.InputSignal; protected readonly transitionService: TransitionService; protected readonly viewContainerRef: ViewContainerRef; protected readonly dialog: MatDialog; readonly source: DbxActionContextStoreSourceInstance; readonly safetyType$: Observable<"none" | "auto" | "dialog">; protected readonly _dbxActionTransitionSafetyUpdateEffect: _angular_core.EffectRef; private _currentDialogRef?; private stopWatchingTransition?; private checkIsDestroyed; ngOnInit(): void; ngOnDestroy(): void; protected _handleOnBeforeTransition(transition: Transition): HookResult; protected _handleIsModifiedState(transition: Transition, safetyType: DbxActionTransitionSafetyType): Observable; private _autoTrigger; private _showDialog; private _closeDialog; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[dbxActionTransitionSafety]", never, { "dbxActionTransitionSafety": { "alias": "dbxActionTransitionSafety"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Abstract class representing a confirmation prompt that shows a dialog and returns the user's decision. */ declare abstract class DbxPromptConfirm { abstract showDialog(): Observable>; } /** * Provides a {@link DbxPromptConfirm} implementation for dependency injection. * * @param sourceType - The concrete class that implements {@link DbxPromptConfirm} * @returns The providers that register the given type as the {@link DbxPromptConfirm} implementation. * * @Directive ({ providers: provideDbxPromptConfirm(MyConfirmDirective) }) * ``` * * @example * ```ts */ declare function provideDbxPromptConfirm(sourceType: Type): Provider[]; /** * Abstract base directive that opens a confirmation dialog and resolves with the user's boolean decision. * * Subclasses provide the default dialog configuration. */ declare abstract class AbstractPromptConfirmDirective implements DbxPromptConfirm { protected readonly matDialog: MatDialog; private _currentDialogRef?; private _currentDialogPromise?; protected abstract getDefaultDialogConfig(): Maybe; showDialog(): Observable; protected showDialogWithConfig(config: Maybe): Observable; protected _handleDialogResult(result: boolean): boolean; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Directive that provides a {@link DbxPromptConfirm} implementation, opening a confirmation dialog with the given config. * * @example * ```html * * ``` */ declare class DbxPromptConfirmDirective extends AbstractPromptConfirmDirective { readonly dbxPromptConfirm: _angular_core.InputSignal>; protected getDefaultDialogConfig(): Maybe; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Configuration for the action confirmation dialog, extending the base prompt configuration * with an optional value to pass to the action when confirmed. */ interface DbxActionConfirmConfig extends DbxPromptConfirmConfig { /** * Value to pass to the action's ready state when the user confirms. */ readonly readyValue?: T; /** * Whether to confirm the action immediately instead of showing the dialog. * * Useful for actions that need no confirmation but are rendered by the same template as actions that do, * and for passing a readyValue through without prompting. * * Defaults to false. */ readonly autoConfirm?: boolean; } /** * Displays a confirmation dialog when the action is triggered. If the user confirms, * the configured ready value is passed to the action. If the user cancels, the action is rejected. * * A config with `autoConfirm` true shows no dialog and marks the action ready immediately. This lets a * template bind the same input for actions that need confirmation and actions that do not. * * This directive works with action triggering only, not button clicks. * For button-based confirmation, use an appPromptConfirmButton directive instead. * * @dbxWebComponent * @dbxWebSlug action-confirm * @dbxWebCategory action * @dbxWebRelated action-snackbar, prompt-confirm * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html * * ``` */ declare class DbxActionConfirmDirective extends AbstractPromptConfirmDirective { readonly source: DbxActionContextStoreSourceInstance; readonly dbxActionConfirm: _angular_core.InputSignalWithTransform>, Maybe<"" | DbxActionConfirmConfig>>; /** * When true, the confirmation dialog is disabled and the action proceeds without prompting. */ readonly dbxActionConfirmSkip: _angular_core.InputSignalWithTransform; constructor(); protected getDefaultDialogConfig(): Maybe; protected _handleDialogResult(result: boolean): boolean; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[dbxActionConfirm]", never, { "dbxActionConfirm": { "alias": "dbxActionConfirm"; "required": false; "isSignal": true; }; "dbxActionConfirmSkip": { "alias": "dbxActionConfirmSkip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Triggers the parent action context when a specific keyboard key is released. * Defaults to the "enter" key. Key names should be lowercase. * * @dbxWebComponent * @dbxWebSlug action-key-trigger * @dbxWebCategory action * @dbxWebRelated action-confirm, action-snackbar * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html *
...
* ``` */ declare class DbxActionKeyTriggerDirective { readonly source: DbxActionContextStoreSourceInstance; readonly key: _angular_core.InputSignalWithTransform>; onKeyupHandler(event: KeyboardEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[dbxActionKeyTrigger]", never, { "key": { "alias": "dbxActionKeyTrigger"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Convenience module that bundles all base dbxAction-related directives from * both @dereekb/dbx-core and @dereekb/dbx-web, including key triggers and confirmation dialogs. */ declare class DbxActionModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Lightweight button that renders as either an icon-only Material icon button or a text button * with an icon prefix, depending on whether text is provided. * * @dbxWebComponent * @dbxWebSlug icon-button * @dbxWebCategory button * @dbxWebRelated button * @dbxWebSkillRefs dbx__migration__migrate-dbx-icon-button * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxIconButtonComponent extends AbstractDbxButtonDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Full configuration for a progress button, controlling appearance, working state, * colors, spinner behavior, and button type. */ interface DbxProgressButtonConfig { /** * Current working state. A boolean enables indeterminate mode; a number (0-100) enables determinate mode. */ readonly working?: Maybe; /** * Button label text. */ readonly text?: Maybe; /** * Text displayed alongside the spinner while working. */ readonly spinnerText?: Maybe; /** * Theme color for the progress spinner. */ readonly spinnerColor?: Maybe; /** * Theme color for the progress bar (bar mode only). */ readonly barColor?: Maybe; /** * When true, renders only the icon button without text. */ readonly iconOnly?: Maybe; /** * Explicit spinner diameter in pixels. */ readonly spinnerSize?: Maybe; /** * Ratio of spinner size relative to button height (0-1). */ readonly spinnerRatio?: Maybe; /** * Spinner mode: determinate or indeterminate. */ readonly mode?: Maybe; /** * Whether the button stretches to full container width. */ readonly fullWidth?: Maybe; /** * Whether the button is disabled. */ readonly disabled?: Maybe; /** * Custom inline styles applied to the button element. */ readonly customStyle?: Maybe<{ [key: string]: string; }>; /** * Custom CSS class applied to the button element. */ readonly customClass?: Maybe; /** * Custom CSS color for the spinner stroke. Overrides `spinnerColor` when provided. */ readonly customSpinnerColor?: Maybe; /** * Icon configuration for the button. */ readonly buttonIcon?: Maybe; /** * Identifier used for matching against global configuration. */ readonly id?: Maybe; /** * Material button variant to render. */ readonly buttonType?: Maybe; /** * HTML `type` attribute for the underlying button element (e.g. "submit", "button"). */ readonly buttonTypeAttribute?: Maybe; /** * Whether to render as a Material floating action button (`mat-fab`). A button with text renders as an extended FAB. * * Combined with {@link iconOnly}, renders a round icon button instead. */ readonly fab?: Maybe; /** * Accessible label for the button, applied as `aria-label`. * Especially important for icon-only buttons that lack visible text. */ readonly ariaLabel?: Maybe; /** * Active button echo. When set, the button's text/icon fade out (preserving width) * and a centered echo icon overlay appears, mirroring the spinner working animation. */ readonly buttonEcho?: Maybe; /** * Whether the button has meaningful text or projected content to display alongside the icon. * When explicitly `false`, the button renders the icon without text-mode margins/padding, * centering the icon properly. When `true` or `undefined`, the button renders the text area normally. */ readonly hasTextContent?: Maybe; } /** * Configuration for the icon displayed inside a progress button. */ interface DbxProgressButtonIcon { /** * Theme color for the icon. */ readonly color?: Maybe; /** * Material icon font ligature name (e.g. "save", "delete"). */ readonly fontIcon?: Maybe; /** * Icon font set to use (e.g. for extended icon libraries). */ readonly fontSet?: Maybe; /** * Whether to render the icon inline with text. */ readonly inline?: Maybe; /** * SVG icon name registered with MatIconRegistry. */ readonly svgIcon?: Maybe; /** * Custom CSS class applied to the icon element. */ readonly customClass?: Maybe; } /** * Progress button configuration that includes an identifier, used for matching * buttons against global configuration overrides. */ interface DbxProgressButtonTargetedConfig extends DbxProgressButtonConfig { readonly id?: Maybe; } /** * Array of targeted progress button configurations, provided globally to override * defaults for buttons matching specific IDs. */ type DbxProgressButtonGlobalConfig = DbxProgressButtonTargetedConfig[]; /** * Injection token for providing a global array of progress button configurations. */ declare const DBX_PROGRESS_BUTTON_GLOBAL_CONFIG: InjectionToken; /** * Abstract base for progress button components. Manages configuration merging with global defaults, * working/disabled state computation, CSS class generation, and click event handling. * Subclasses provide the specific template (spinner or bar). */ declare abstract class AbstractProgressButtonDirective { private readonly globalConfig; readonly btnClick: _angular_core.OutputEmitterRef; readonly config: _angular_core.InputSignal>; readonly buttonId: _angular_core.InputSignal>; readonly working: _angular_core.InputSignal>; readonly disabled: _angular_core.InputSignal>; readonly globalOptionsSignal: Signal>; readonly configSignal: Signal>; /** * CSS classes shared by every button presentation (custom class, full width, disabled), without the Material variant classes. */ readonly commonCssClassSignal: Signal; /** * {@link commonCssClassSignal} plus the Material variant classes for the configured {@link DbxButtonType}. */ readonly baseCssClassSignal: Signal; readonly baseCssClasses$: rxjs.Observable; readonly workingProgressSignal: Signal; readonly isWorkingSignal: Signal; readonly workingValueSignal: Signal>; readonly modeSignal: Signal; readonly disabledSignal: Signal>; readonly buttonTypeAttributeSignal: Signal>; readonly buttonDisabledSignal: Signal>; readonly showProgressSignal: Signal; /** * Whether a button echo overlay is active (iconOnly echo mode). */ readonly echoActiveSignal: Signal; /** * Whether button content should be hidden via opacity (working spinner or echo overlay active). */ readonly hideContentSignal: Signal; /** * When true, the click handler will not call `stopImmediatePropagation()`, * allowing the click event to continue bubbling. Needed for components like * file upload buttons where a parent must handle the click synchronously. */ readonly allowClickPropagation: _angular_core.InputSignalWithTransform>; handleClick(event: MouseEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Progress button that displays a Material progress bar beneath the button while working. * * @dbxWebComponent * @dbxWebSlug progress-bar-button * @dbxWebCategory button * @dbxWebRelated button, progress-spinner-button * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxProgressBarButtonComponent extends AbstractProgressButtonDirective { readonly buttonCss$: rxjs.Observable; readonly buttonCssSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Progress button that overlays a Material progress spinner on the button while working. * Supports icon-only, FAB, extended FAB, and text button modes with automatic spinner sizing. * * A `fab` config renders a Material `mat-fab` — an extended FAB when the button has text — while `fab` + `iconOnly` renders a * round icon button. * * @dbxWebComponent * @dbxWebSlug progress-spinner-button * @dbxWebCategory button * @dbxWebRelated button, progress-bar-button * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDirective { readonly buttonRef: _angular_core.Signal>; /** * Whether the button renders as a Material FAB (`mat-fab`). Set by `fab` without `iconOnly`; an `iconOnly` + `fab` button keeps the * round icon-button presentation. */ readonly isFabSignal: _angular_core.Signal; /** * Whether a FAB renders as an extended FAB (icon + label) because it has text content. */ readonly isExtendedFabSignal: _angular_core.Signal; readonly buttonCssArraySignal: _angular_core.Signal; readonly buttonCss$: rxjs.Observable; readonly spinnerSizeSignal: _angular_core.Signal; readonly buttonCssSignal: _angular_core.Signal; readonly showTextContentSignal: _angular_core.Signal; readonly showTextButtonIconSignal: _angular_core.Signal>; readonly showIconSignal: _angular_core.Signal; readonly customSpinnerStyleSignal: _angular_core.Signal<{ '--mat-progress-spinner-active-indicator-color': string; } | undefined>; readonly customSpinnerStyleClassSignal: _angular_core.Signal<{ 'dbx-progress-spinner-custom': boolean; } | undefined>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Registers a global configuration for progress buttons, allowing default styles and * behavior to be overridden application-wide by button ID. * * @param config - Array of targeted configurations to apply globally. * @returns Environment providers to include in your application bootstrap. * * @example * ```typescript * bootstrapApplication(AppComponent, { * providers: [ * provideDbxProgressButtonGlobalConfig([ * { id: 'primary-save', buttonType: 'raised', spinnerColor: 'primary' } * ]) * ] * }); * ``` */ declare function provideDbxProgressButtonGlobalConfig(config: DbxProgressButtonGlobalConfig): EnvironmentProviders; /** * A single state of a {@link DbxRotatingButtonDirective}. * * The `display` (icon/text) and `style` (color, type, …) are applied to the host `dbx-button` while the state is active. */ interface DbxRotatingButtonState extends DbxButtonDisplayStylePair { /** * Value the state represents. */ readonly value: T; /** * Label for the state, e.g. "On". Used in the button's aria-label ("{label}: {state label}") and the change announcement. */ readonly label?: Maybe; } /** * Identifies the "Default" state of a {@link DbxRotatingButtonConfig} and the state it resolves to. For example, a tristate * "Default" state whose value is `null` but that resolves to On (`true`). */ interface DbxRotatingButtonDefaultState { /** * Value of the default state. */ readonly value: T; /** * Value of the state the default state resolves to. */ readonly equivalentValue: T; } /** * Function that compares two rotating button values. */ type DbxRotatingButtonValueIsEqualFunction = (a: Maybe, b: Maybe) => boolean; /** * Configuration for a {@link DbxRotatingButtonDirective}. */ interface DbxRotatingButtonConfig { /** * States to rotate through, in order. Each click moves to the next state, wrapping back to the first. */ readonly states: DbxRotatingButtonState[]; /** * Label for the thing being changed, e.g. "Email". Prefixes the state label in the aria-label and announcements. */ readonly label?: Maybe; /** * Base style for every state. Each state's `style` is merged over it. * * The directive sets the button's `buttonStyle`, so pass the base style here instead of binding `buttonStyle` on the button. */ readonly style?: Maybe; /** * Whether to announce each change through the LiveAnnouncer. True by default. */ readonly announceChanges?: Maybe; /** * Compares values to find the current state. Defaults to {@link isEqualDbxRotatingButtonValue}. */ readonly isEqual?: Maybe>; /** * The default state and the state it resolves to. Used by {@link DbxRotatingButtonConfig.skipDefaultEquivalentOnFirstClick}. */ readonly defaultState?: Maybe>; /** * Whether the first click skips moving between the {@link DbxRotatingButtonConfig.defaultState} and the state it resolves * to, so the first click always changes the resolved value. The skipped state is visited last instead, so the button still * rotates through every state before returning to where it started. See {@link dbxRotatingButtonRotationOrder}. False by default. */ readonly skipDefaultEquivalentOnFirstClick?: Maybe; } /** * Default value comparison for a {@link DbxRotatingButtonConfig}. Strict equality, treating `null` and `undefined` as equal. * * @param a - The first value. * @param b - The second value. * @returns True if the values are equal. */ declare function isEqualDbxRotatingButtonValue(a: Maybe, b: Maybe): boolean; /** * Returns the index of the state that matches the value, or -1 if no state matches. * * @param config - The rotating button configuration. * @param value - The value to find. * @returns The index of the matching state, or -1. */ declare function dbxRotatingButtonStateIndex(config: Pick, 'states' | 'isEqual'>, value: Maybe): number; /** * Returns the order the states rotate in, as indexes of the config's states. * * This is the configured order, unless `skipDefaultEquivalent` is true, the config has a `defaultState`, and the move from the * state matching the value is between the default state and the state it resolves to, which would not change the resolved value. * That move is then skipped, and the skipped state is visited last instead, just before returning to the state matching the value. * For example, a tristate whose default resolves to On rotates Default -> Off -> On -> Default. With only two states, or a value * that matches no state, the configured order is returned. * * @param config - The rotating button configuration. * @param value - The current value, where the rotation starts. * @param skipDefaultEquivalent - Whether to skip the move between the default state and its equivalent state. * @returns The state indexes in rotation order. */ declare function dbxRotatingButtonRotationOrder(config: Pick, 'states' | 'isEqual' | 'defaultState'>, value: Maybe, skipDefaultEquivalent?: Maybe): number[]; /** * Returns the state after the state matching the value in the rotation order, wrapping back to the start. A value that matches * no state starts at the first state. * * @param config - The rotating button configuration. * @param value - The current value. * @param rotationOrder - The state indexes in rotation order, from {@link dbxRotatingButtonRotationOrder}. Defaults to the configured order. * @returns The next state, or undefined if there are no states. */ declare function nextDbxRotatingButtonState(config: Pick, 'states' | 'isEqual'>, value: Maybe, rotationOrder?: Maybe): Maybe>; /** * Returns the aria-label for a rotating button state: "{label}: {state label}", or whichever of the two is set. * * @param label - The rotating button label. * @param state - The current state. * @returns The aria-label, or undefined if neither label is set. */ declare function dbxRotatingButtonAriaLabel(label: Maybe, state: Maybe>): Maybe; /** * Value of a three-state / 3-phase (default/on/off) choice. * * - `true` — explicitly on * - `false` — explicitly off * - `null`/`undefined` — no explicit choice; resolves to the default. Emitted as `null`, which means "clear". */ type DbxTristateValue = Maybe; /** * Display state of a {@link DbxTristateValue}. */ type DbxTristateState = 'on' | 'off' | 'default'; /** * Default icon for the explicit "on" state. */ declare const DEFAULT_DBX_TRISTATE_ON_ICON = "check_circle"; /** * Default icon for the explicit "off" state. */ declare const DEFAULT_DBX_TRISTATE_OFF_ICON = "block"; /** * Icon for the "default" state when the default value is unknown. */ declare const DEFAULT_DBX_TRISTATE_UNKNOWN_DEFAULT_ICON = "radio_button_unchecked"; /** * Default color for the explicit "on" state. */ declare const DEFAULT_DBX_TRISTATE_ON_COLOR: DbxButtonStyle['color']; /** * Default color for the explicit "off" state. */ declare const DEFAULT_DBX_TRISTATE_OFF_COLOR: DbxButtonStyle['color']; /** * Returns the display state for the input value. * * @param value - The tristate value. * @returns `'on'`, `'off'` or `'default'`. */ declare function dbxTristateState(value: DbxTristateValue): DbxTristateState; /** * Returns the effective value, resolving the default state to the default value. * * @param value - The tristate value. * @param defaultValue - What the default state resolves to. * @returns The effective value, or undefined if the value is the default and the default is unknown. */ declare function dbxTristateEffectiveValue(value: DbxTristateValue, defaultValue?: Maybe): Maybe; /** * Rotation order of a tristate value: default, then on, then off. * * The first click skips moving between the default state and the state it resolves to (see * {@link DbxTristateRotatingButtonConfigInput.skipDefaultEquivalentOnFirstClick}), so it always flips the effective value, * and the skipped state is visited last instead. For example, a default that resolves to on rotates Default -> Off -> On -> Default. */ declare const DBX_TRISTATE_CYCLE: readonly DbxTristateValue[]; /** * Per-state display configuration for {@link dbxTristateRotatingButtonConfig}. */ interface DbxTristateStateDisplayConfig { /** * Icon to show for the state. */ readonly icon?: Maybe; /** * Label for the state. */ readonly label?: Maybe; /** * Color of the button for the state. */ readonly color?: DbxButtonStyle['color']; } /** * Input for {@link dbxTristateStateLabel}. */ interface DbxTristateStateLabelInput { /** * The current value. */ readonly value: DbxTristateValue; /** * What the default state resolves to. */ readonly defaultValue?: Maybe; /** * Per-state label overrides. */ readonly on?: Maybe>; readonly off?: Maybe>; readonly default?: Maybe>; } /** * Returns the label for the state of a tristate value: `On`, `Off`, `Default (On)`, `Default (Off)` or `Default`. * * @param input - The current value, default value and per-state labels. * @returns The state label. */ declare function dbxTristateStateLabel(input: DbxTristateStateLabelInput): string; /** * Input for {@link dbxTristateRotatingButtonConfig}. */ interface DbxTristateRotatingButtonConfigInput { /** * Label for the thing being changed, e.g. "Email". */ readonly label?: Maybe; /** * What the default state resolves to. */ readonly defaultValue?: Maybe; /** * Display for the explicit "on" state. */ readonly on?: Maybe; /** * Display for the explicit "off" state. */ readonly off?: Maybe; /** * Display for the default state. The icon defaults to the resolved on/off icon, with no color. */ readonly default?: Maybe; /** * Base button style for every state. */ readonly style?: Maybe; /** * Whether to announce each change through the LiveAnnouncer. True by default. */ readonly announceChanges?: Maybe; /** * Whether the first click skips moving between the default state and the state it resolves to, such as from "Default (On)" * to "On", so the first click always flips the effective value. The skipped state is visited last instead, such as * "Default (On)" -> "Off" -> "On" -> "Default (On)". Has no effect when the default value is unknown. True by default. */ readonly skipDefaultEquivalentOnFirstClick?: Maybe; } /** * Creates a {@link DbxRotatingButtonConfig} for a three-state / 3-phase (default/on/off) toggle. * * The states rotate in {@link DBX_TRISTATE_CYCLE} order (default, on, off). A known default value sets the config's * `defaultState`, so by default the first click skips the state that would look like no change and visits it last. Explicit choices are * colored; the default state shows the resolved on/off icon without a color. * * @param input - The labels, default value and per-state display. * @returns A rotating button configuration whose default state has the value `null`. * * @example * ```ts * const config = dbxTristateRotatingButtonConfig({ label: 'Text', defaultValue: false }); * ``` */ declare function dbxTristateRotatingButtonConfig(input: DbxTristateRotatingButtonConfigInput): DbxRotatingButtonConfig; /** * Feature-rich button component that supports loading indicators, multiple Material button styles, * custom colors, icons, and floating action button (FAB / extended FAB) mode. Integrates with the dbxAction system * for automatic working/disabled state management. * * @dbxWebComponent * @dbxWebSlug button * @dbxWebCategory button * @dbxWebRelated icon-button, progress-spinner-button, progress-bar-button * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * * ``` * * @example * ```html * * * ``` * * @example * ```html * * * * ``` */ declare class DbxButtonComponent extends AbstractDbxButtonDirective { /** * Whether the host element has projected content (checked at construction time, * before Angular moves the nodes for content projection). */ private readonly _hasProjectedContent; constructor(); readonly bar: _angular_core.InputSignalWithTransform>; readonly type: _angular_core.InputSignal>; /** * Style of the button. Individual style inputs (e.g. {@link color}, {@link raised}) take precedence. * * Declared as a `model` so a directive composed onto the button (e.g. `dbxRotatingButton`) can set it. */ readonly buttonStyle: _angular_core.ModelSignal>; /** * Color of the button. Takes precedence over the {@link buttonStyle} color. * * Declared as a `model` so a directive composed onto the button (e.g. `dbxRotatingButton`) can set it. */ readonly color: _angular_core.ModelSignal>; readonly spinnerColor: _angular_core.InputSignal>; readonly customTextColor: _angular_core.InputSignal>; readonly customSpinnerColor: _angular_core.InputSignal>; readonly basic: _angular_core.InputSignalWithTransform>; readonly tonal: _angular_core.InputSignalWithTransform>; readonly raised: _angular_core.InputSignalWithTransform>; readonly stroked: _angular_core.InputSignalWithTransform>; readonly flat: _angular_core.InputSignalWithTransform>; readonly iconOnly: _angular_core.InputSignalWithTransform>; /** * Renders a Material FAB, or an extended FAB when the button has text. Combine with {@link iconOnly} for a round icon button. */ readonly fab: _angular_core.InputSignalWithTransform>; readonly customContent: _angular_core.InputSignalWithTransform>; readonly allowClickPropagation: _angular_core.InputSignalWithTransform>; readonly mode: _angular_core.InputSignal>; /** * The echo currently being displayed, if any. Echoes only display while the button is neither working nor disabled, * mirroring the echo gating in {@link configSignal}. */ private readonly _activeEchoSignal; /** * Resolved button color from the active echo, the {@link color} input, or {@link buttonStyle} (in that order). Pushed * into the host {@link DbxColorDirective}, which provides the color tokens + `.dbx-color` marker that the button's * `dbx-button.dbx-color .mdc-button` SCSS paints from; an active echo's color temporarily takes over those tokens. */ readonly colorSignal: _angular_core.Signal>; readonly styleTypeSignal: _angular_core.Signal>; readonly configSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Turns a `dbx-button` into a rotating / multi-state button. Each click moves to the next configured state, and the * state's icon, text, style and aria-label are set on the button. * * Use {@link dbxTristateRotatingButtonConfig} for a three-state / 3-phase (default/on/off) toggle. The directive sets the * button's `icon`, `text`, `buttonStyle` and `ariaLabel`, so configure those through the config rather than on the button. * * The button stops click propagation by default, so a rotating button works inside clickable list rows. * * @dbxWebComponent * @dbxWebSlug rotating-button * @dbxWebCategory button * @dbxWebKind directive * @dbxWebRelated button, icon-button * @dbxWebMinimalExample ```html * * ``` * * @example * ```ts * readonly tristateConfig = dbxTristateRotatingButtonConfig({ label: 'Text', defaultValue: false }); * ``` * * @example * ```html * * ``` */ declare class DbxRotatingButtonDirective { readonly dbxButton: DbxButtonComponent; private readonly _liveAnnouncer; /** * Order the states rotate in, set by the first click. See {@link dbxRotatingButtonRotationOrder}. * * Kept while the config has the same number of states, since a host may rebuild the config on every change. */ private _rotationOrder; readonly dbxRotatingButton: _angular_core.InputSignal>>; /** * The current value. Two-way bindable with `[(dbxRotatingButtonValue)]`. */ readonly dbxRotatingButtonValue: _angular_core.ModelSignal>; /** * Index of the state matching the current value, or -1 if none match. */ readonly stateIndexSignal: _angular_core.Signal; /** * The current state. Falls back to the first state when the value matches no state. */ readonly stateSignal: _angular_core.Signal<_dereekb_dbx_web.DbxRotatingButtonState | undefined>; readonly ariaLabelSignal: _angular_core.Signal>; constructor(); /** * Moves to the next state, emits its value, and announces the change. * * When the config sets `skipDefaultEquivalentOnFirstClick`, the first rotation skips the state equivalent to the default state * and visits it last instead. */ rotate(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[dbxRotatingButton]", ["dbxRotatingButton"], { "dbxRotatingButton": { "alias": "dbxRotatingButton"; "required": false; "isSignal": true; }; "dbxRotatingButtonValue": { "alias": "dbxRotatingButtonValue"; "required": false; "isSignal": true; }; }, { "dbxRotatingButtonValue": "dbxRotatingButtonValueChange"; }, never, never, true, never>; } /** * Adds inline spacing between adjacent buttons. Can be used as an element or attribute. * * @dbxWebComponent * @dbxWebSlug button-spacer * @dbxWebCategory button * @dbxWebRelated bar, spacer, button * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * * * * * ``` */ declare class DbxButtonSpacerDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * How a {@link DbxButtonFloatingDirective} host floats. * * - `'sticky'`: pinned to the edge of its scroll container while its parent section is on screen, then rests at the end of that section. * - `'fixed'`: pinned to the viewport, like a classic floating action button. */ type DbxButtonFloatingMode = 'sticky' | 'fixed'; /** * Edge and alignment a {@link DbxButtonFloatingDirective} host floats to. */ type DbxButtonFloatingPosition = 'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left' | 'top-center'; /** * Horizontal alignment portion of a {@link DbxButtonFloatingPosition}. */ type DbxButtonFloatingHorizontalAlignment = 'left' | 'center' | 'right'; /** * Distance between a floating button and the edge it is pinned to. Numbers are treated as pixels. */ type DbxButtonFloatingOffset = Pixels | PixelsString | CssTokenVar; /** * Configuration for a {@link DbxButtonFloatingDirective}. */ interface DbxButtonFloatingConfig { /** * How the host floats. Defaults to `'sticky'`. */ readonly mode?: Maybe; /** * Edge and alignment the host floats to. Defaults to `'bottom-right'`. */ readonly position?: Maybe; /** * Offset applied to both axes. Defaults to the `--dbx-button-floating-offset` token (`padding-4`). */ readonly offset?: Maybe; /** * Horizontal offset. Takes priority over {@link offset}. Only applies in `'fixed'` mode. */ readonly offsetX?: Maybe; /** * Vertical offset. Takes priority over {@link offset}. */ readonly offsetY?: Maybe; } /** * Default {@link DbxButtonFloatingPosition} for a {@link DbxButtonFloatingDirective}. */ declare const DEFAULT_DBX_BUTTON_FLOATING_POSITION: DbxButtonFloatingPosition; /** * Floats its host — typically a `dbx-button` with `dbxActionButton`, or a wrapper holding several buttons — over the content * by applying the `.dbx-button-floating` utility classes. * * In the default `'sticky'` mode the host stays pinned to the edge of its scroll container while its parent section is on * screen, which suits a Save button at the end of a long form. Place the host at the end of its section for bottom positions and * at the start for top positions. Sticky stops working when an ancestor between the host and the scroll container sets * `overflow`. In `'fixed'` mode the host is pinned to the viewport; fixed positioning is re-anchored to any ancestor that sets * `transform`, `filter` or `contain`. * * Set `fab` on the `dbx-button` for the Material FAB presentation (an extended FAB when it has text). Pair with * `dbxActionEnforceModified` on the action to keep a floating Save button disabled until the form has changes. * * @dbxWebComponent * @dbxWebSlug button-floating * @dbxWebCategory button * @dbxWebRelated button, button-spacer, content-pit * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html * * ``` * * @example * ```html *
* * *
* ``` * * @example * ```html * * ``` */ declare class DbxButtonFloatingDirective { /** * Config for the floating button, or a {@link DbxButtonFloatingPosition} shorthand. Empty when used as a bare attribute. */ readonly dbxButtonFloating: _angular_core.InputSignal>; readonly dbxButtonFloatingMode: _angular_core.InputSignal>; readonly dbxButtonFloatingPosition: _angular_core.InputSignal>; readonly dbxButtonFloatingOffset: _angular_core.InputSignal>; readonly configSignal: _angular_core.Signal>; readonly modeSignal: _angular_core.Signal; readonly positionSignal: _angular_core.Signal; readonly isFixedSignal: _angular_core.Signal; readonly isTopSignal: _angular_core.Signal; readonly horizontalAlignmentSignal: _angular_core.Signal; readonly offsetXSignal: _angular_core.Signal>; readonly offsetYSignal: _angular_core.Signal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Convenience module that bundles all button components and directives from * both @dereekb/dbx-core and @dereekb/dbx-web, including progress buttons and icon buttons. */ declare class DbxButtonModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Abstract base class for custom error widget components. * * Provides access to the injected {@link ReadableErrorWithCode} data, including the error code and message. * Extend this class when creating custom error widgets registered with {@link DbxErrorWidgetService}. * * @example * ```typescript * @Component({ template: `

Error: {{ message }}

` }) * export class MyCustomErrorWidget extends AbstractDbxErrorWidgetComponent { * // Access this.data, this.code, this.message * } * ``` */ declare abstract class AbstractDbxErrorWidgetComponent { readonly data: ReadableErrorWithCode; get code(): string; get message(): _dereekb_util.Maybe; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, {}, never, never, true, never>; } /** * Default error widget that displays the error code, message, and optional server error data as JSON. * * Registered as both the default and unknown error widget in {@link DbxErrorWidgetService}. * Extends {@link AbstractDbxErrorWidgetComponent} for access to the injected error data. */ declare class DbxErrorDefaultErrorWidgetComponent extends AbstractDbxErrorWidgetComponent { get serverErrorData(): ServerErrorResponseData | undefined; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Event emitted when the error icon button is clicked, containing the button's element reference for popover anchoring. */ interface DbxErrorViewButtonEvent { /** * The element reference of the clicked button, used as the popover origin. */ readonly origin: ElementRef; } /** * Low-level error view that renders a Material icon button and an optional error message. * * Emits a {@link DbxErrorViewButtonEvent} when the button is clicked, which is typically used * to open an error detail popover. Used internally by {@link DbxErrorComponent}. * * @dbxWebComponent * @dbxWebSlug error-view * @dbxWebCategory feedback * @dbxWebRelated error, error-snackbar * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * * * ``` */ declare class DbxErrorViewComponent { readonly icon: _angular_core.InputSignal; readonly message: _angular_core.InputSignal>; /** * Whether or not the error button is disabled. */ readonly buttonDisabled: _angular_core.InputSignal>; readonly buttonClick: _angular_core.OutputEmitterRef; readonly buttonOrigin: _angular_core.Signal>; clickError(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Determines how the error component renders its content. * * - `'none'` - No error to display. * - `'default'` - Uses the built-in error view with icon and message. * - `'custom'` - Uses a dynamically injected custom error widget component. */ type DbxErrorComponentViewType = 'none' | 'default' | 'custom'; /** * Internal state used by {@link DbxErrorComponent} to track the current error display configuration. */ interface DbxErrorComponentState { readonly viewType: DbxErrorComponentViewType; readonly isDefaultError?: Maybe; readonly message?: Maybe; readonly rawError?: Maybe; readonly error?: Maybe; readonly customView?: Maybe; } /** * Root error component that displays content related to an error. * * Converts an {@link ErrorInput} into a {@link ReadableError} and renders either a default error view * with an icon and message, or a custom error widget registered via {@link DbxErrorWidgetService}. * Clicking the error icon opens a popover with detailed error information. * * @dbxWebComponent * @dbxWebSlug error * @dbxWebCategory feedback * @dbxWebRelated error-snackbar, error-view, loading * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxErrorComponent { private readonly popoverService; private readonly dbxErrorWidgetService; readonly popoverOpened: _angular_core.OutputEmitterRef>; readonly error: _angular_core.InputSignal>; readonly iconOnly: _angular_core.InputSignal>; private readonly _errorOverrideSignal; readonly errorSignal: _angular_core.Signal>; readonly stateSignal: _angular_core.Signal; readonly viewTypeSignal: _angular_core.Signal; readonly isDefaultErrorSignal: _angular_core.Signal>; readonly messageSignal: _angular_core.Signal>; readonly customViewSignal: _angular_core.Signal>>; setError(error: Maybe): void; openErrorPopover(event: DbxErrorViewButtonEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Links a {@link DbxErrorComponent} to an action context, automatically displaying the action's error state. * * Place this directive on a `` element within an action context to have errors * from the action automatically forwarded to the error display. * * @example * ```html * * ``` */ declare class DbxActionErrorDirective { readonly error: DbxErrorComponent; readonly source: DbxActionContextStoreSourceInstance; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Converts an HTTP error response into a plain JSON-serializable {@link ServerError} object. * * Ensures that the error data is safe for serialization by running it through `JSON.stringify`/`JSON.parse`. * Non-serializable data is stripped with a console warning. * * @param httpError - The HTTP error response or generic error object to convert. * @returns A plain JSON-serializable {@link ServerError} object. * * @example * ```typescript * const pojoError = convertToPOJOServerErrorResponse(httpErrorResponse); * console.log(pojoError.message); * ``` */ declare function convertToPOJOServerErrorResponse(httpError: HttpErrorResponse | object): ServerError; /** * Converts an {@link HttpErrorResponse} or generic error object into a {@link ServerErrorResponse}. * * Handles HTTP 401 responses specially by returning an {@link UnauthorizedServerErrorResponse}. * Returns `undefined` if the input is falsy. * * @param error - The HTTP error response or generic error object to convert. * @returns A {@link ServerErrorResponse} derived from the error, or `undefined` if the input is falsy. * * @example * ```typescript * const serverError = convertToServerErrorResponse(httpErrorResponse); * if (serverError) { * console.log(serverError.status, serverError.message); * } * ``` */ declare function convertToServerErrorResponse(error: HttpErrorResponse | object): ServerErrorResponse | undefined; /** * Displays detailed error information using the error widget system. * * Wraps {@link DbxErrorWidgetViewComponent} to render a widget for the given {@link ReadableError}. * Typically used inside popovers or detail panels to show expanded error data. * * @example * ```html * * ``` */ declare class DbxErrorDetailsComponent { readonly error: _angular_core.InputSignal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Links a {@link DbxErrorComponent} to a {@link LoadingContext}, automatically displaying loading errors. * * Subscribes to the loading context's stream and forwards any errors to the host `` component. * Accepts a `LoadingContext` directly or an `Observable`. * * @example * ```html * * * * ``` */ declare class DbxLoadingErrorDirective { readonly error: DbxErrorComponent; readonly context: _angular_core.InputSignal>>; readonly context$: rxjs.Observable<_dereekb_util.Maybe>>; readonly contextSignal: _angular_core.Signal<_dereekb_util.Maybe>>; protected readonly _errorEffectSub: _dereekb_rxjs.SubscriptionObject; protected readonly _errorEffect: _angular_core.EffectRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Unique key used to identify and coordinate popover instances. */ type DbxPopoverKey = string; /** * Abstract controller for managing a popover's lifecycle, providing access to its data and close/return operations. */ declare abstract class DbxPopoverController { abstract readonly key: DbxPopoverKey; abstract readonly data?: Maybe; abstract readonly closing$: Observable; /** * Signals for the popover to close. */ abstract close(): void; /** * Closes the popover and returns the input value. */ abstract return(value?: O): void; } /** * Extended popover controller that supports an optional async closing value function. */ declare abstract class DbxPopoverComponentController extends DbxPopoverController { getClosingValueFn?: (value?: I) => Promise; } interface DbxPopoverComponentConfig { /** * Key used for uniquely identifying a limited instance. * * Only one popover should exist at a time given a certain key. */ readonly key: DbxPopoverKey; /** * Origin element to position on. */ readonly origin: ElementRef; /** * Whether or not to close if a transition occurs. */ readonly closeOnTransition?: boolean; /** * Whether or not to dismiss when the escape button is pressed. * * False by default. */ readonly closeOnEscape?: boolean; /** * Component to inject into the popover. */ readonly componentClass: Type; /** * Panel classes to add to the popover. */ readonly panelClass?: Maybe; /** * Data available to the popover. */ readonly data?: Maybe; /** * Optional function to initialize the popover component. * * @param component * @param controller */ readonly init?: (component: T, controller: DbxPopoverController) => void; } /** * Full popover configuration including overlay container settings. Used internally. */ interface FullDbxPopoverComponentConfig extends DbxPopoverComponentConfig { readonly configuration: NgOverlayContainerConfiguration; } /** * Core popover component that renders injected content with position strategy, transition watching, and keyboard close support. * * Coordinates with {@link DbxPopoverCoordinatorService} to ensure only one popover per key is active at a time. * * @dbxWebComponent * @dbxWebSlug popover * @dbxWebCategory overlay * @dbxWebRelated popup, prompt-confirm, dialog-content * @dbxWebSkillRefs dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * // In a service: this.popoverService.open({ content: MyContentComponent, origin }) * ``` */ declare class DbxPopoverComponent extends AbstractTransitionWatcherDirective implements DbxPopoverController, OnInit, OnDestroy { private readonly popoverRef; private readonly compactContextState; readonly lockSet: LockSet; readonly contentConfig: DbxInjectionComponentConfig; private _startedClosing; private _awaitingClosingValue; private readonly _closing; private _triggerCloseKeys; readonly isClosing$: rxjs.Observable; readonly closing$: rxjs.Observable; /** * Optional function that provides the value to close with. A value that is not a promise closes the popover right away. */ getClosingValueFn?: (value: Maybe, closeType: NgPopoverCloseType) => PromiseOrValue; constructor(); get config(): FullDbxPopoverComponentConfig; get panelClass(): Maybe; get key(): DbxPopoverKey; get data(): Maybe; get triggerCloseKeys(): string[]; ngOnInit(): void; ngOnDestroy(): void; protected updateForSuccessfulTransition(): void; close(): void; return(value?: O | undefined): void; private _useClosingValue; handleKeydown(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "ng-component", never, {}, {}, never, never, true, never>; } /** * Abstract base directive for components rendered inside a popover, providing access to close and return operations. */ declare abstract class AbstractPopoverDirective { readonly popover: DbxPopoverComponent; close(): void; returnAndClose(value: O): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, {}, never, never, true, never>; } /** * Sizing-related configuration options for a popover overlay. */ type DbxPopoverConfigSizing = Pick; /** * Full configuration for opening a popover via {@link DbxPopoverService}, combining component config with sizing and an optional injector. */ interface DbxPopoverConfig extends DbxPopoverComponentConfig, DbxPopoverConfigSizing { readonly injector?: Injector; } /** * Root-level service for programmatically opening popover overlays with dynamic component content. * * @example * ```ts * const ref = popoverService.open({ * key: 'my-popover', * origin: elementRef, * componentClass: MyPopoverContentComponent, * width: '400px', * height: '300px' * }); * ``` */ declare class DbxPopoverService { private readonly _overlay; private readonly _injector; private readonly _overlayContainerService; open(config: DbxPopoverConfig): NgPopoverRef, O>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Default popover key used when opening an error popover. */ declare const DEFAULT_ERROR_POPOVER_KEY = "error"; /** * Configuration for opening an error popover via {@link DbxErrorPopoverComponent.openPopover}. */ interface DbxErrorPopoverConfig { /** * The element that the popover should be anchored to. */ readonly origin: ElementRef; /** * The error to display in the popover. */ readonly error: ReadableError; } /** * Popover component that displays detailed error information including the error code and widget details. * * Opened programmatically via the static {@link DbxErrorPopoverComponent.openPopover} method rather than * being used directly in templates. * * @example * ```typescript * DbxErrorPopoverComponent.openPopover(popoverService, { * origin: elementRef, * error: readableError * }); * ``` */ declare class DbxErrorPopoverComponent extends AbstractPopoverDirective { readonly error: ReadableError; readonly code: string | undefined; static openPopover(popoverService: DbxPopoverService, { origin, error }: DbxErrorPopoverConfig, popoverKey?: DbxPopoverKey): ng_overlay_container.NgPopoverRef<_dereekb_dbx_web.DbxPopoverComponentConfig, unknown>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Configuration for error snackbar display, extending Material snackbar config but excluding `data` and `viewContainerRef`. */ type DbxErrorSnackbarConfig = Omit, 'data' | 'viewContainerRef'>; /** * Data passed to the error snackbar component via `MAT_SNACK_BAR_DATA`. */ interface DbxErrorSnackbarData { /** * The error to display in the snackbar. */ readonly error: T; /** * Optional auto-dismiss duration in milliseconds. If omitted, the snackbar persists until manually dismissed. */ readonly duration?: number; } /** * Snackbar component that displays an error with a dismiss button. * * Supports an optional auto-dismiss timer that pauses while an error detail popover is open. * Typically opened via {@link DbxErrorSnackbarService} or the static {@link DbxErrorSnackbarComponent.showErrorSnackbar} method. * * @dbxWebComponent * @dbxWebSlug error-snackbar * @dbxWebCategory feedback * @dbxWebRelated error * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * // Triggered via DbxErrorSnackbarService.showError(error) * ``` */ declare class DbxErrorSnackbarComponent { readonly snackBarRef: MatSnackBarRef; readonly data: DbxErrorSnackbarData; readonly error: ErrorInput; private readonly _popoverOpen; private readonly _timer; private readonly _allowAutoDismiss; protected readonly _popoverSyncEffect: _angular_core.EffectRef; private readonly _popoverAfterClosedSub; private readonly _autoDismissSub; constructor(); onPopoverOpened(popover: NgPopoverRef): void; dismiss(): void; static showErrorSnackbar(matSnackbar: MatSnackBar, error: ErrorInput, config?: DbxErrorSnackbarConfig): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Default configuration for error snackbars, using polite announcements centered at the bottom of the viewport. */ declare const DEFAULT_DBX_ERROR_SNACKBAR_CONFIG: DbxErrorSnackbarConfig; /** * Application-wide service for displaying error notifications in a Material snackbar. * * Wraps {@link DbxErrorSnackbarComponent} with configurable defaults. Inject this service * to programmatically show error snackbars from any component or service. * * @example * ```typescript * const snackbarService = inject(DbxErrorSnackbarService); * snackbarService.showSnackbarError(error, { duration: 5000 }); * ``` */ declare class DbxErrorSnackbarService { readonly matSnackbar: MatSnackBar; private _defaultConfig; get defaultConfig(): DbxErrorSnackbarConfig; setDefaultConfig(defaultConfig: DbxErrorSnackbarConfig): void; showSnackbarError(error: ErrorInput, inputConfig?: Maybe): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Displays action errors in a snackbar notification. * * Subscribes to the action context's error stream and shows a snackbar via {@link DbxErrorSnackbarService} * whenever an error occurs. Accepts an optional configuration or a duration in milliseconds as input. * * @dbxWebComponent * @dbxWebSlug action-snackbar-error * @dbxWebCategory action * @dbxWebRelated action-snackbar * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html * * ``` */ declare class DbxActionSnackbarErrorDirective { readonly dbxErrorSnackbarService: DbxErrorSnackbarService; readonly source: DbxActionContextStoreSourceInstance; readonly config: _angular_core.InputSignal>; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Error code used to identify the default error widget entry in {@link DbxErrorWidgetService}. */ declare const DEFAULT_ERROR_WIDGET_CODE = "DEFAULT_ERROR_WIDGET"; /** * Error code used to identify the unknown/fallback error widget entry in {@link DbxErrorWidgetService}. */ declare const UNKNOWN_ERROR_WIDGET_CODE = "UNKNOWN_ERROR_WIDGET"; /** * Registration entry that maps an error code to one or more widget component classes for rendering that error. */ interface DbxErrorWidgetEntry { /** * Error code to respond to. */ readonly code: StringErrorCode; /** * In-line error widget component class to use. * * This changes how it appears in dbx-error. * * If not provided, dbx-error will display the default output. */ readonly errorComponentClass?: Maybe>; /** * Custom popup error widget component class to use. * * This changes how it appears in the dbx-error-widget-view. * * If not provided, the widget will display the default entry. */ readonly widgetComponentClass?: Maybe>; } /** * A {@link DbxErrorWidgetEntry} that is guaranteed to have a `popupComponentClass` defined. */ type DbxErrorWidgetEntryWithPopupComponentClass = Omit & { popupComponentClass: Type; }; /** * Service used to register error widgets. * * It has two default widgets: * * - default: used in cases where an error has been registered by its error code * - unknown: used in cases where an error has an error code that has not been registered * * By default the DbxErrorDefaultErrorWidgetComponent is registered to both the default and unknown error entries. */ declare class DbxErrorWidgetService { private readonly _entries; constructor(); registerDefaultEntry(entry: Omit): boolean; registerUnknownEntry(entry: Omit): boolean; register(entry: DbxErrorWidgetEntry, override?: boolean): boolean; getErrorWidgetIdentifiers(): StringErrorCode[]; getDefaultErrorWidgetEntry(): Maybe; getUnknownErrorWidgetEntry(): Maybe; getErrorWidgetEntry(code: StringErrorCode): Maybe; getErrorWidgetEntries(codes: Iterable): DbxErrorWidgetEntry[]; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Resolves and displays an error widget component based on the error's code. * * Looks up the appropriate widget component from {@link DbxErrorWidgetService} using the error's code, * falling back to the default or unknown widget entry as appropriate. Renders the widget via dynamic injection. * * @example * ```html * * ``` */ declare class DbxErrorWidgetViewComponent { readonly dbxErrorWidgetService: DbxErrorWidgetService; readonly error: _angular_core.InputSignal>; readonly errorWithCodeSignal: _angular_core.Signal>>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Wrapper for a {@link ServerError} used as NgRx action props. */ interface ServerErrorParams { readonly error: ServerError; } /** * Converts an HTTP error response into {@link ServerErrorParams} suitable for dispatching as an NgRx action prop. * * @param httpError - The HTTP error response or generic error object to convert. * @returns A {@link ServerErrorParams} object wrapping the converted server error. * * @example * ```typescript * const params = convertServerErrorParams(httpErrorResponse); * store.dispatch(myErrorAction(params)); * ``` */ declare function convertServerErrorParams(httpError: HttpErrorResponse | object): ServerErrorParams; /** * RxJS operator that catches HTTP errors, converts them to {@link ServerErrorParams}, and dispatches the given NgRx action. * * @param action - The NgRx action creator to dispatch with the converted error params. * @param mapError - Optional function to transform the {@link ServerErrorParams} before dispatching. Defaults to identity. * @returns An RxJS operator that catches errors and emits the corresponding error action. * * @example * ```typescript * return this.actions$.pipe( * ofType(myAction), * switchMap(() => this.api.getData().pipe( * catchErrorServerParams(myErrorAction) * )) * ); * ``` */ declare function catchErrorServerParams(action: ActionCreator E & Action>, mapError?: (error: ServerErrorParams) => E): MonoTypeOperatorFunction>; /** * Provides the {@link BrowserAgentInfo} of the current browser. * * Replace this service to provide a fixed browser agent in tests or demos. * * @example * ```typescript * providers: [{ provide: DbxBrowserAgentService, useValue: { agentInfo: parseBrowserAgentInfo({ userAgent }) } }] * ``` */ declare class DbxBrowserAgentService { readonly agentInfo: BrowserAgentInfo; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Unique key of a {@link DbxBrowserAgentViewEntry} within a {@link DbxBrowserAgentViewConfig}. */ type DbxBrowserAgentViewEntryKey = string; /** * An entry displayed by the {@link DbxBrowserAgentViewComponent} when its match is the first to match the detected browser agent, or when it is selected manually. */ interface DbxBrowserAgentViewEntry { /** * Unique key of the entry. Used to select the entry manually. */ readonly key: DbxBrowserAgentViewEntryKey; /** * Label shown in the override menu. */ readonly label: string; /** * Optional icon shown in the override menu. */ readonly icon?: Maybe; /** * Match used to auto-detect this entry. * * Entries without a match are never auto-detected, but can still be selected manually. Ignored on the default entry. */ readonly match?: Maybe; /** * Component to render when this entry is selected. */ readonly componentConfig: DbxInjectionComponentConfig; } /** * Config for a {@link DbxBrowserAgentViewComponent}. */ interface DbxBrowserAgentViewConfig { /** * Ordered entries to match against. The first matching entry wins. */ readonly entries?: Maybe; /** * Entry used when no other entry matches. */ readonly defaultEntry: DbxBrowserAgentViewEntry; /** * Whether or not to show the override button that lets the user pick another entry. */ readonly showOverrideButton?: Maybe; } /** * Returns the first entry of the config whose match matches the input browser agent info, otherwise the config's default entry. * * @param config - The view config to search. * @param agentInfo - The browser agent info to match against. * @returns The matching entry, or the default entry. * * @example * ```typescript * const entry = findDbxBrowserAgentViewEntry(config, getCurrentBrowserAgentInfo()); * ``` */ declare function findDbxBrowserAgentViewEntry(config: DbxBrowserAgentViewConfig, agentInfo: BrowserAgentInfo): DbxBrowserAgentViewEntry; /** * Context provided by the {@link DbxBrowserAgentViewComponent}. * * Injected components can inject this to read the detected browser agent or to switch to another entry. */ declare abstract class DbxBrowserAgentViewContext { /** * The detected browser agent info. */ abstract readonly agentInfo: BrowserAgentInfo; /** * All entries of the config, including the default entry as the last entry. */ abstract readonly entriesSignal: Signal; /** * The entry that matches the detected browser agent. */ abstract readonly detectedEntrySignal: Signal>; /** * The entry currently displayed. This is the override entry when set, otherwise the detected entry. */ abstract readonly selectedEntrySignal: Signal>; /** * Whether or not an override entry is currently selected. */ abstract readonly isOverriddenSignal: Signal; /** * Selects the entry with the input key. Unknown keys fall back to the detected entry. */ abstract setOverride(key: Maybe): void; /** * Clears the override and returns to the detected entry. */ abstract clearOverride(): void; } /** * An operating system that can be configured with {@link makeDbxBrowserAgentViewConfigFromOsMap}, or `default` for the default entry. */ type DbxBrowserAgentViewOsKey = Exclude | 'default'; /** * Display label and icon for an OS entry. */ interface DbxBrowserAgentViewOsDisplay { readonly label: string; readonly icon: string; } /** * Default labels and icons for each {@link DbxBrowserAgentViewOsKey}. */ declare const DEFAULT_DBX_BROWSER_AGENT_VIEW_OS_DISPLAY: Readonly>; /** * Component config for an OS entry, with an optional custom label and icon. */ interface DbxBrowserAgentViewOsEntryConfig { readonly componentConfig: DbxInjectionComponentConfig; /** * Custom label. Defaults to the {@link DEFAULT_DBX_BROWSER_AGENT_VIEW_OS_DISPLAY} label. */ readonly label?: Maybe; /** * Custom icon. Defaults to the {@link DEFAULT_DBX_BROWSER_AGENT_VIEW_OS_DISPLAY} icon. */ readonly icon?: Maybe; } /** * A component config, or a {@link DbxBrowserAgentViewOsEntryConfig} to customize the display. */ type DbxBrowserAgentViewOsMapValue = DbxInjectionComponentConfig | DbxBrowserAgentViewOsEntryConfig; /** * Creates a {@link DbxBrowserAgentViewEntry} for the input OS, using the default label and icon and matching on the OS. * * The `default` key creates an entry without a match. * * @param os - The OS to create the entry for. * @param componentConfigOrEntry - The component config, or an entry config with a custom label and icon. * @returns The entry. * * @example * ```typescript * const iosEntry = makeDbxBrowserAgentViewEntryForOs('ios', { componentClass: IosInstructionsComponent }); * const androidEntry = makeDbxBrowserAgentViewEntryForOs('android', { componentConfig: { componentClass: AndroidInstructionsComponent }, label: 'Android Phone' }); * ``` */ declare function makeDbxBrowserAgentViewEntryForOs(os: DbxBrowserAgentViewOsKey, componentConfigOrEntry: DbxBrowserAgentViewOsMapValue): DbxBrowserAgentViewEntry; /** * Input for {@link makeDbxBrowserAgentViewConfigFromOsMap}. */ interface DbxBrowserAgentViewOsMapConfig { readonly ios?: Maybe; readonly android?: Maybe; readonly windows?: Maybe; readonly macos?: Maybe; readonly linux?: Maybe; readonly chromeos?: Maybe; /** * Used when the detected OS has no entry. */ readonly default: DbxBrowserAgentViewOsMapValue; readonly showOverrideButton?: Maybe; } /** * Creates a {@link DbxBrowserAgentViewConfig} with one entry per configured OS, plus the default entry. * * @param config - The component config for each OS. * @returns The view config. * * @example * ```typescript * const config = makeDbxBrowserAgentViewConfigFromOsMap({ * ios: { componentClass: IosInstructionsComponent }, * android: { componentClass: AndroidInstructionsComponent }, * default: { componentClass: BookmarkInstructionsComponent }, * showOverrideButton: true * }); * ``` */ declare function makeDbxBrowserAgentViewConfigFromOsMap(config: DbxBrowserAgentViewOsMapConfig): DbxBrowserAgentViewConfig; /** * Renders the component of the first {@link DbxBrowserAgentViewEntry} whose match matches the current browser agent (OS, browser, and device), falling back to the config's default entry. * * An optional override button lets the user pick another entry. Injected components can inject {@link DbxBrowserAgentViewContext} to read the detected agent or to switch entries. * * @dbxWebComponent * @dbxWebSlug browser-agent-view * @dbxWebCategory misc * @dbxWebRelated widget, browser-agent-view-override-button * @dbxWebMinimalExample ```html * * ``` * * @example * ```typescript * readonly config = makeDbxBrowserAgentViewConfigFromOsMap({ * ios: { componentClass: IosInstructionsComponent }, * android: { componentClass: AndroidInstructionsComponent }, * default: { componentClass: BookmarkInstructionsComponent }, * showOverrideButton: true * }); * ``` * * ```html * * ``` */ declare class DbxBrowserAgentViewComponent implements DbxBrowserAgentViewContext { readonly agentInfo: BrowserAgentInfo; readonly config: _angular_core.InputSignal>; readonly showOverrideButton: _angular_core.InputSignal>; /** * Key of the manually selected entry. Can be bound two-way to persist the user's choice. */ readonly overrideKey: _angular_core.ModelSignal>; readonly entriesSignal: _angular_core.Signal; readonly detectedEntrySignal: _angular_core.Signal>; readonly overrideEntrySignal: _angular_core.Signal>; readonly selectedEntrySignal: _angular_core.Signal>; readonly isOverriddenSignal: _angular_core.Signal; /** * Uses the entry's own config object so the injected component is only recreated when the selected entry changes. */ readonly injectionConfigSignal: _angular_core.Signal>>; readonly showOverrideButtonSignal: _angular_core.Signal; setOverride(key: Maybe): void; clearOverride(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Button that opens a menu to manually select an entry of the parent {@link DbxBrowserAgentViewComponent}, or to return to the auto-detected entry. * * Rendered by the view when `showOverrideButton` is enabled, but can also be placed inside the injected content to position it manually. * * @dbxWebComponent * @dbxWebSlug browser-agent-view-override-button * @dbxWebCategory misc * @dbxWebRelated browser-agent-view * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * *

Follow these steps to add the app to your home screen.

* * ``` */ declare class DbxBrowserAgentViewOverrideButtonComponent { readonly context: DbxBrowserAgentViewContext; readonly entriesSignal: _angular_core.Signal<_dereekb_dbx_web.DbxBrowserAgentViewEntry[]>; readonly detectedEntrySignal: _angular_core.Signal<_dereekb_util.Maybe<_dereekb_dbx_web.DbxBrowserAgentViewEntry>>; readonly selectedEntrySignal: _angular_core.Signal<_dereekb_util.Maybe<_dereekb_dbx_web.DbxBrowserAgentViewEntry>>; readonly isOverriddenSignal: _angular_core.Signal; readonly overrideKeySignal: _angular_core.Signal; setOverride(key: DbxBrowserAgentViewEntryKey): void; clearOverride(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * NgRx state slice for model module configuration. */ interface DbxModelModuleStateConfiguration { } /** * NgRx feature key for the model module configuration state slice. */ declare const STATE_FEATURE_KEY = "model.module.config"; declare const FEATURE_KEY = "app.model"; interface DbxModelState { [STATE_FEATURE_KEY]: DbxModelModuleStateConfiguration; } interface State { [FEATURE_KEY]: DbxModelState; } /** * Combined reducer for the DbxModel NgRx feature state, delegating to sub-reducers for each state slice. * * @param state - The current DbxModel feature state, or undefined for initial state. * @param action - The NgRx action to process. * @returns The new DbxModelState produced by the combined sub-reducers. */ declare function reducers(state: DbxModelState | undefined, action: Action): { "model.module.config": DbxModelModuleStateConfiguration; }; declare const selectDbxModelFeature: _ngrx_store.MemoizedSelector>; declare const selectDbxModelFeatureObjectModuleConfig: _ngrx_store.MemoizedSelector DbxModelModuleStateConfiguration>; type index_d$1_DbxModelState = DbxModelState; declare const index_d$1_FEATURE_KEY: typeof FEATURE_KEY; type index_d$1_State = State; declare const index_d$1_reducers: typeof reducers; declare const index_d$1_selectDbxModelFeature: typeof selectDbxModelFeature; declare const index_d$1_selectDbxModelFeatureObjectModuleConfig: typeof selectDbxModelFeatureObjectModuleConfig; declare namespace index_d$1 { export { index_d$1_FEATURE_KEY as FEATURE_KEY, index_d$1_reducers as reducers, index_d$1_selectDbxModelFeature as selectDbxModelFeature, index_d$1_selectDbxModelFeatureObjectModuleConfig as selectDbxModelFeatureObjectModuleConfig }; export type { index_d$1_DbxModelState as DbxModelState, index_d$1_State as State }; } /** * The full NgRx state shape including the model feature state slice. */ type DbxModelFullState = State; /** * NgRx action that resets the model state to its initial configuration. */ declare const dbxModelResetState: _ngrx_store.ActionCreator<"[App/Model] Reset State", () => _ngrx_store.Action<"[App/Model] Reset State">>; declare const actions_d_dbxModelResetState: typeof dbxModelResetState; declare namespace actions_d { export { actions_d_dbxModelResetState as dbxModelResetState, }; } /** * Parameters for dispatching a model object viewed event through the NgRx store. */ interface DbxModelObjectViewedParams { readonly modelKeyTypeNamePair: ModelKeyTypeNamePair; readonly context?: Maybe; } /** * Parameters for navigating to a model object's view. */ interface DbxModelGoToObjectViewParams { readonly modelKeyTypeNamePair: ModelKeyTypeNamePair; } /** * NgRx action dispatched when a model object is viewed, carrying the model key/type pair and optional context. */ declare const emitObjectViewEvent: _ngrx_store.ActionCreator<"[App/Model/Type] Object Viewed", (props: DbxModelObjectViewedParams) => DbxModelObjectViewedParams & _ngrx_store.Action<"[App/Model/Type] Object Viewed">>; type model_actions_d_DbxModelGoToObjectViewParams = DbxModelGoToObjectViewParams; type model_actions_d_DbxModelObjectViewedParams = DbxModelObjectViewedParams; declare const model_actions_d_emitObjectViewEvent: typeof emitObjectViewEvent; declare namespace model_actions_d { export { model_actions_d_emitObjectViewEvent as emitObjectViewEvent }; export type { model_actions_d_DbxModelGoToObjectViewParams as DbxModelGoToObjectViewParams, model_actions_d_DbxModelObjectViewedParams as DbxModelObjectViewedParams }; } declare namespace index_d { export { actions_d as DbxModelStateActions, model_actions_d as DbxModelStateModelActions, }; } /** * String identifier for the context in which a model was viewed (e.g., "list", "detail"). */ type ModelViewContext = string; /** * Represents a single model view event, recording when and in what context a specific model was viewed. */ interface DbxModelViewTrackerEvent { /** * Event time */ readonly d?: UnixDateTimeSecondsNumber; /** * Context */ readonly c?: Maybe; /** * Model info */ readonly m: ModelKeyTypeNamePair; readonly folder?: Maybe; } /** * A set of model view tracker events with a timestamp of the latest event, used for storage and retrieval. */ interface DbxModelViewTrackerEventSet { /** * The latest date/time number. */ readonly l: UnixDateTimeSecondsNumber; /** * List of events. */ readonly e: DbxModelViewTrackerEvent[]; } /** * Extracts all model keys from a {@link DbxModelViewTrackerEventSet}. * * @param eventSet - The event set from which to extract model keys. * @returns Array of model keys from all events in the set. * * @example * ```typescript * const keys = allDbxModelViewTrackerEventSetModelKeys(eventSet); * ``` */ declare function allDbxModelViewTrackerEventSetModelKeys(eventSet: DbxModelViewTrackerEventSet): ModelKey[]; /** * Extracts all model keys from an array of {@link DbxModelViewTrackerEvent}. * * @param events - Array of view tracker events from which to extract model keys. * @returns Array of model keys, one per event. * * @example * ```typescript * const keys = allDbxModelViewTrackerEventModelKeys(events); * ``` */ declare function allDbxModelViewTrackerEventModelKeys(events: DbxModelViewTrackerEvent[]): ModelKey[]; /** * Creates a {@link StorageAccessor} for persisting model view tracker events using the `mtvs` storage prefix. * * @param storageAccessorFactory - The factory used to create typed storage accessors. * @returns A storage accessor configured with the `mtvs` prefix for model view tracker events. * * @example * ```typescript * const accessor = defaultDbxModelViewTrackerStorageAccessorFactory(storageAccessorFactory); * ``` * * @__NO_SIDE_EFFECTS__ */ declare function defaultDbxModelViewTrackerStorageAccessorFactory(storageAccessorFactory: SimpleStorageAccessorFactory): StorageAccessor; /** * Creates EnvironmentProviders for providing DbxModelTrackerService, DbxModelObjectStateService and sets up the NgRx store for DbxModelTrackerEffects. * * @returns EnvironmentProviders. * * @__NO_SIDE_EFFECTS__ */ declare function provideDbxModelService(): EnvironmentProviders; /** * Service that dispatches model-related NgRx store actions, such as emitting model view events to the store for tracking. */ declare class DbxModelObjectStateService { readonly store: Store; /** * Emit a model viewed event. * * @param params - The model viewed event parameters. * @param params.modelKeyTypeNamePair - Identifies the model that was viewed. * @param params.context - Optional context describing how the model was viewed. */ emitModelViewEvent({ modelKeyTypeNamePair, context }: DbxModelObjectViewedParams): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Service used for tracking/logging different kinds of events on objects. */ declare class DbxModelTrackerService { private readonly _viewTrackerStorage; private _defaultFolder; /** * Emits whenever a new view tracker event is recorded. */ readonly newEvent$: Observable; /** * The default storage folder used when no folder is specified in tracking calls. * * @returns The current default folder name, or undefined if not set. */ get defaultFolder(): Maybe; set defaultFolder(folder: Maybe); /** * Records a view event for the given model, optionally in a specific context and folder. * * @param modelKeyTypeNamePair - The model identity to track. * @param context - Optional view context metadata. * @param folder - Storage folder; defaults to {@link defaultFolder} */ trackViewedObject(modelKeyTypeNamePair: ModelKeyTypeNamePair, context?: Maybe, folder?: Maybe): void; /** * Returns all recorded view events for the given folder, sorted by most recent first. * * @param folder - Storage folder; defaults to {@link defaultFolder} * @returns Observable of view events sorted by most recent first. */ getAllViewEvents(folder?: Maybe): Observable; /** * Returns the complete event set (events and last-update timestamp) for the given folder. * * @param folder - Storage folder; defaults to {@link defaultFolder} * @returns Observable of the complete event set including events and last-update timestamp. */ getViewEventSet(folder?: Maybe): Observable; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Injection token for a {@link StorageAccessor} used by {@link DbxModelViewTrackerStorage} to persist model view events. */ declare const DBX_MODEL_VIEW_TRACKER_STORAGE_ACCESSOR_TOKEN: InjectionToken; /** * Manages persistence of {@link DbxModelViewTrackerEvent} items in local storage. Handles deduplication, sorting by date, and folder-based partitioning of events. */ declare class DbxModelViewTrackerStorage { static readonly OBJECT_VIEW_TRACKER_STORAGE_LIST_KEY = "dbxModelViewTrackerEvents"; static readonly DEFAULT_MAX_EVENTS = 100; readonly storageAccessor: StorageAccessor; private readonly _newEvent; readonly newEvent$: Observable; protected get storageKey(): string; protected get maxEventsToKeep(): number; /** * Persists a view tracker event to storage. Deduplicates by model key, sorts by date, and trims to the max event limit. * * @param event - The event to record. * @returns Observable that completes when the event has been persisted. */ addTrackerEvent(event: DbxModelViewTrackerEvent): Observable; /** * Returns all stored view events for the given folder. * * @param folder - Optional folder name; defaults to `'default'` * @returns Observable of all view tracker events in the folder. */ getAllEvents(folder?: Maybe): Observable; /** * Returns the complete event set for the given folder. * * @param folder - Optional folder name; defaults to `'default'` * @returns Observable of the event set containing events and the last-update timestamp. */ getEventSet(folder?: Maybe): Observable; private _getEventSetForStorageKey; /** * Computes the storage key for a given folder name. * * @param folder - Optional folder name; defaults to `'default'` * @returns The computed storage key string combining the base key and folder name. */ getStorageKeyForFolder(folder?: Maybe): string; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Generates a SegueRef based on the input model's key and optional view context, or returns null/undefined if no ref is available. */ type DbxModelTypeConfigurationSrefFactory = (key: ModelKey, context?: ModelViewContext) => Maybe; /** * Generates a DbxModelTypeConfigurationSrefFactory. */ type DbxModelTypeConfigurationSrefFactoryBuilder = (injector: Injector) => DbxModelTypeConfigurationSrefFactory; /** * Configuration for a single model type, defining its display label, icon, analytics name, and navigation segue reference. */ interface DbxModelTypeConfiguration { /** * Popup label that can be used for these types. */ readonly label?: string; /** * Name used in analytics events. If not provided, label is used by default. */ readonly analyticsName?: string; /** * Model type this configuration is for. */ readonly modelType: ModelTypeString; /** * Sref factory for viewing objects of this type. */ readonly sref?: DbxModelTypeConfigurationSrefFactory; /** * DbxModelTypeConfigurationSrefFactoryBuilder */ readonly srefBuilder?: DbxModelTypeConfigurationSrefFactoryBuilder; /** * Icon used to represent this model. */ readonly icon?: string; } /** * Map of model type strings to their {@link DbxModelTypeConfiguration} entries. */ interface DbxModelTypeConfigurationMap { [key: string]: DbxModelTypeConfiguration; } /** * Resolved model type information, extending configuration with computed properties like navigation capability. */ interface DbxModelTypeInfo extends Omit { /** * Whether or not a response is expected for segues * to a view for objects of this type. */ readonly canSegueToView: boolean; } /** * Map of model type strings to their resolved {@link DbxModelTypeInfo} entries. */ interface DbxModelTypesMap { readonly [type: string]: I; } /** * Map of model type strings to their Material icon names. */ interface DbxModelIconsMap { readonly [type: string]: string; } /** * Registry service for model type configurations. Provides reactive access to model type information, icons, and navigation capability. Resolves labels, analytics names, and segue refs from registered configurations. * * @example * ```typescript * modelTypesService.addTypeConfigs({ modelType: 'user', label: 'User', icon: 'person' }); * ``` */ declare class DbxModelTypesService { static readonly DEFAULT_ICON = "help_outline"; readonly injector: Injector; private readonly _configs; /** * Registers one or more model type configurations. Merges with any previously registered configs. * * @param configs - Single or array of model type configurations to register. */ addTypeConfigs(configs: ArrayOrValue): void; /** * Registers model type configurations from a map, merging with existing configs. * * @param configs - Map of model type strings to their configurations. */ addTypeConfigsMap(configs: DbxModelTypeConfigurationMap): void; /** * Observable map of all registered model types to their resolved {@link DbxModelTypeInfo} entries. */ readonly typesMap$: Observable>; /** * Observable map of model type strings to their Material icon names. */ readonly iconMap$: Observable; /** * Returns an observable of the Material icon name for the given model type. * * @param type - The model type string to look up. * @returns Observable emitting the icon name for the given model type. */ iconForType(type: ModelTypeString): Observable; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵprov: _angular_core.ɵɵInjectableDeclaration>; } /** * Configuration for the {@link DbxDownloadBlobButtonComponent} that controls what blob to download and how the button appears. */ interface DbxDownloadBlobButtonConfig { /** * Custom button style pair to use. */ readonly buttonStylePair?: Maybe; /** * Name of the file to save when downloaded. */ readonly fileName?: Maybe; /** * Blob to download. */ readonly blob?: Maybe; /** * Getter for the blob to download. */ readonly loadBlob?: Maybe>>>; /** * Whether or not to preload the blob from the blobGetter instead of waiting for the button to be moused over. * * Ignored if blobGetter is not provided. */ readonly preloadBlob?: Maybe; } /** * Button that downloads an arbitrary blob as a file when clicked. Supports both pre-loaded blobs and lazy-loaded blobs via a getter function. * * @example * ```html * * ``` */ declare class DbxDownloadBlobButtonComponent { private readonly _sanitizer; private readonly _browserObjectUrl; readonly config: _angular_core.InputSignal>; readonly downloadButton: _angular_core.Signal>>; readonly config$: Observable>; readonly blob$: Observable>; readonly blobSignal: _angular_core.Signal>; readonly fileUrlSignal: _angular_core.Signal; readonly fileNameSignal: _angular_core.Signal; readonly downloadReadySignal: _angular_core.Signal; readonly buttonDisplaySignal: _angular_core.Signal; readonly buttonStyleSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * How a file list item renders its details date. * * `'distance'` renders the date relative to now ("3 hours ago", "in 2 days"), and `'distance-past'` does * the same for a date that describes something that ALREADY HAPPENED — clamping it to now so it can never * read as the future. The remaining values are passed through to Angular's DatePipe. * * Prefer `'distance-past'` for an uploaded-at or created-at date. A stored timestamp lands marginally * ahead of the client more often than it looks: a clock a second out will do it, and so will a value * stored as whole Unix seconds, which rounds UP. Under `'distance'` such a date reads "in less than a * minute", which for something that already happened is nonsense. */ type DbxFileListItemDetailsDateStyle = 'distance' | 'distance-past' | 'short' | 'medium' | 'long'; /** * Default details date style used by a file list item. */ declare const DEFAULT_DBX_FILE_LIST_ITEM_DETAILS_DATE_STYLE: DbxFileListItemDetailsDateStyle; /** * Default css class applied to a file list item's details line. */ declare const DEFAULT_DBX_FILE_LIST_ITEM_DETAILS_CLASS = "dbx-hint"; /** * Configuration for the {@link DbxFileListItemComponent}. */ interface DbxFileListItemComponentConfig { /** * The file's name. Shown on the item's first line. */ readonly name?: Maybe; /** * Optional leading icon. * * Leave undefined when the item is rendered inside a dbx-list, as the list renders the * item's own icon itself. */ readonly icon?: Maybe; /** * Static text for the second line. Rendered before {@link detailsDate} when both are set. */ readonly details?: Maybe; /** * Date for the second line. */ readonly detailsDate?: Maybe; /** * How {@link detailsDate} is rendered. Defaults to {@link DEFAULT_DBX_FILE_LIST_ITEM_DETAILS_DATE_STYLE}. */ readonly detailsDateStyle?: Maybe; /** * Css class applied to the second line. Defaults to {@link DEFAULT_DBX_FILE_LIST_ITEM_DETAILS_CLASS}. * * Use `'dbx-warn'` to mark a file that failed. */ readonly detailsClass?: Maybe; } /** * A single row of a {@link DbxFileListComponent}. */ interface DbxFileListEntry extends DbxFileListItemComponentConfig { /** * Stable key used to track the entry across updates. */ readonly key: string; /** * Configuration for the row's download button. The button is not rendered when this is not set. */ readonly download?: Maybe; /** * Arbitrary value the entry was derived from. */ readonly data?: T; } /** * Configuration for the {@link DbxFileListComponent}. */ interface DbxFileListComponentConfig { /** * The entries to list. */ readonly entries?: Maybe[]>; /** * What is shown in place of the list while it has no entries. Nothing is shown when this is not set. */ readonly emptyText?: Maybe; } /** * Lists files described by {@link DbxFileListEntry} values, giving each entry that carries a download * configuration a download button. * * For a listing whose rows need controls of their own, build the list from {@link DbxFileListItemComponent} * directly and project those controls into each row. * * @example * ```html * * ``` */ declare class DbxFileListComponent { readonly config: _angular_core.InputSignal>>; readonly entries: _angular_core.InputSignal[]>>; readonly emptyText: _angular_core.InputSignal>; readonly entriesSignal: _angular_core.Signal[]>; readonly emptyTextSignal: _angular_core.Signal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-file-list", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "entries": { "alias": "entries"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * One row of a file listing: an optional leading icon, the file's name, an optional details line, and * whatever controls the caller projects into the row's trailing slot. * * Renders the `dbx-list-two-line-item` layout, which is a flat utility rather than something scoped to a * dbx-list, so the same row works both as the item component of a dbx-list and inside a plain list of its * own. That is the point of the component: the two file listings that exist differ in their list machinery * and in their controls, and share only this row. * * @example * ```html * * * * ``` */ declare class DbxFileListItemComponent { readonly config: _angular_core.InputSignal>; readonly name: _angular_core.InputSignal>; readonly icon: _angular_core.InputSignal>; readonly details: _angular_core.InputSignal>; readonly detailsDate: _angular_core.InputSignal>; readonly detailsDateStyle: _angular_core.InputSignal>; readonly detailsClass: _angular_core.InputSignal>; readonly nameSignal: _angular_core.Signal>; readonly iconSignal: _angular_core.Signal>; readonly detailsSignal: _angular_core.Signal>; readonly detailsDateSignal: _angular_core.Signal>; readonly detailsDateStyleSignal: _angular_core.Signal; readonly detailsClassSignal: _angular_core.Signal; readonly isDetailsDateDistanceSignal: _angular_core.Signal; /** * The date the row actually renders. * * A `'distance-past'` date is pinned to now once it runs ahead of the clock, so a timestamp that landed * marginally in the future reads as "less than a minute ago" rather than as something yet to happen. */ readonly renderedDetailsDateSignal: _angular_core.Signal>; readonly hasDetailsSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Represents text content that can be previewed and downloaded, including its filename and optional MIME type. */ interface DownloadTextContent { readonly content: string; readonly name: string; readonly mimeType?: string; } /** * Displays a preview of text content with options to copy to clipboard and download as a file. Supports loading states for async content retrieval. * * @example * ```html * * ``` */ declare class DbxDownloadTextViewComponent extends AbstractDbxClipboardDirective { readonly downloadButton: _angular_core.Signal>>; readonly showDownloadButton: _angular_core.InputSignal; readonly loadingText: _angular_core.InputSignal>; readonly linear: _angular_core.InputSignal>; readonly showTitle: _angular_core.InputSignal; readonly showPreview: _angular_core.InputSignal; readonly showExpandPreviewButton: _angular_core.InputSignal; readonly expandPreview: _angular_core.ModelSignal; readonly content: _angular_core.InputSignal>; readonly contentState: _angular_core.InputSignal>>; readonly contentState$: Observable>>; readonly contentStateSignal: _angular_core.Signal>>; readonly contentLoadingStateSignal: _angular_core.Signal>>; readonly contentLoadingState$: Observable>>; readonly content$: Observable>; readonly contentSignal: _angular_core.Signal>; readonly contentDataSignal: _angular_core.Signal; readonly fileNameSignal: _angular_core.Signal; readonly downloadConfigSignal: _angular_core.Signal; readonly context: _dereekb_rxjs.MutableLoadingStateContext, _dereekb_rxjs.LoadingContextEvent & LoadingState>; readonly handleCopyToClipboard: WorkUsingObservable; toggleExpandPreview(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Configuration for a DbxWebFilePreviewServicePreviewComponentFunction. */ interface DbxWebFilePreviewServicePreviewComponentFunctionInput { /** * The srcUrl to preview, if applicable. * * Either the srcUrl or the blob must be provided. */ readonly srcUrl?: Maybe; /** * Whether or not to sanitize the srcUrl. Ignored if srcUrl is not provided. * * Defaults to true. */ readonly sanitizeSrcUrl?: Maybe; /** * The blob to preview, if applicable. The embedMimeType should also be provided. * * Either the srcUrl or the blob must be provided. */ readonly blob?: Maybe; /** * The mimetype to instruct the browser to use for the preview. * * Should typically be provided, otherwise the browser will guess how to handle the data. */ readonly embedMimeType?: Maybe; } /** * Used for generating a preview component for the given src url and embedMimeType. */ type DbxWebFilePreviewServicePreviewComponentFunction = (input: DbxWebFilePreviewServicePreviewComponentFunctionInput) => DbxInjectionComponentConfig; /** * Configuration for a DbxWebFilePreviewServicePreviewDialogFunction. */ interface DbxWebFilePreviewServicePreviewDialogFunctionInput extends DbxWebFilePreviewServicePreviewComponentFunctionInput { /** * Arbitrary MatDialogConfig to use for configuring the dialog. */ readonly dialogConfig?: Maybe>; } /** * Configuration for a DbxWebFilePreviewServicePreviewDialogFunction. */ interface DbxWebFilePreviewServicePreviewDialogFunctionInputWithMatDialog extends DbxWebFilePreviewServicePreviewDialogFunctionInput { /** * MatDialog instance to use for opening the dialog. */ readonly matDialog: MatDialog; } /** * Used for previewing a src url and embedMimeType in a dialog. */ type DbxWebFilePreviewServicePreviewDialogFunction = (input: DbxWebFilePreviewServicePreviewDialogFunctionInputWithMatDialog) => MatDialogRef; /** * Configuration for a preview entry. */ interface DbxWebFilePreviewServiceEntry { /** * The MimeType(s) to associate the preview function with. */ readonly mimeType: ArrayOrValue; /** * The preview component function to use. */ readonly previewComponentFunction: DbxWebFilePreviewServicePreviewComponentFunction; /** * The preview dialog function to use. * * If one is not provided, a default dialog will be used that opens the preview component in a dialog. */ readonly previewDialogFunction?: DbxWebFilePreviewServicePreviewDialogFunction; } /** * Configuration for a DbxWebFilePreviewServicePreviewDialogWithComponentFunction. */ interface DbxWebFilePreviewServicePreviewDialogWithComponentFunctionInput extends Omit { /** * The component configuration for the component to display in the dialog. */ readonly componentConfig: DbxInjectionComponentConfig; } /** * Used for previewing a src url and embedMimeType in a dialog. */ type DbxWebFilePreviewServicePreviewDialogWithComponentFunction = (input: DbxWebFilePreviewServicePreviewDialogWithComponentFunctionInput) => MatDialogRef; /** * Default entries to inject. */ declare const DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN: InjectionToken; /** * Creates a provider that registers the given entries with the {@link DbxWebFilePreviewService} via the {@link DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN}. * * @param entries - Array of preview service entries to register, each mapping a MIME type to its preview component. * @returns A provider configuration that supplies the entries via the injection token. * * @example * ```typescript * provideDbxWebFilePreviewServiceEntries([DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_PRESET_ENTRY]); * ``` */ declare function provideDbxWebFilePreviewServiceEntries(entries: DbxWebFilePreviewServiceEntry[]): { provide: InjectionToken; useValue: DbxWebFilePreviewServiceEntry[]; }; /** * Default preview component function that embeds files using {@link DbxEmbedComponent}. Images are rendered with an `img` element; all other types use `embed`. * * @param input - The preview input containing blob data, source URL, and MIME type information. * @returns An injection component config that initializes a {@link DbxEmbedComponent} with the appropriate embed element and content. */ declare const DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_PREVIEW_COMPONENT_FUNCTION: DbxWebFilePreviewServicePreviewComponentFunction; /** * Default dialog-with-component function that opens the preview component inside a {@link DbxInjectionDialogComponent} with a close button. * * @param input - The dialog input containing the MatDialog instance and the component config to display. * @returns A MatDialogRef for the opened injection dialog. */ declare const DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_DIALOG_WITH_COMPONENT_FUNCTION: DbxWebFilePreviewServicePreviewDialogWithComponentFunction; /** * Service used for previewing files with given mime types. */ declare class DbxWebFilePreviewService { readonly matDialog: MatDialog; private readonly _entries; constructor(); private _defaultPreviewComponentFunction; private _defaultPreviewDialogWithComponentFunction; /** * Registers one or more file preview entries, mapping MIME types to their preview components. * * @param entries - Single or array of preview entries to register. */ registerPreviewEntries(entries: ArrayOrValue): void; /** * Registers a single file preview entry for its MIME type(s). * * @param entry - The preview entry to register. */ registerPreviewEntry(entry: DbxWebFilePreviewServiceEntry): void; /** * Overrides the default preview component function used when no MIME-specific entry is registered. * * @param previewFunction - The preview component function to use as the new default. */ setDefaultPreviewComponentFunction(previewFunction: DbxWebFilePreviewServicePreviewComponentFunction): void; /** * Overrides the default dialog-with-component function used when no MIME-specific dialog handler is registered. * * @param previewDialogWithComponentFunction - The dialog-with-component function to use as the new default. */ setDefaultPreviewDialogWithComponentFunction(previewDialogWithComponentFunction: DbxWebFilePreviewServicePreviewDialogWithComponentFunction): void; /** * Creates an injection component config for previewing a file. Uses a MIME-specific preview function if registered, otherwise falls back to the default. * * @param input - The preview input containing blob, URL, and MIME type information. * @returns An injection component config suitable for rendering the file preview. */ createPreviewConfig(input: DbxWebFilePreviewServicePreviewComponentFunctionInput): _______________dist_packages_dbx_core_types_dereekb_dbx_core.DbxInjectionComponentConfig; /** * Opens a Material dialog to preview a file. Uses a MIME-specific dialog function if registered, otherwise creates a preview component and wraps it in the default dialog. * * @param input - The dialog input containing file data and MIME type. * @returns Reference to the opened dialog. */ openPreviewDialog(input: DbxWebFilePreviewServicePreviewDialogFunctionInput): MatDialogRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Config for DbxWebFilePreviewComponent. */ type DbxWebFilePreviewComponentConfig = DbxWebFilePreviewServicePreviewComponentFunctionInput; /** * Previews a file by delegating to the {@link DbxWebFilePreviewService} to resolve the appropriate preview component for the given MIME type. * * @example * ```html * * ``` */ declare class DbxWebFilePreviewComponent { readonly webFilePreviewService: DbxWebFilePreviewService; readonly config: _angular_core.InputSignal>; readonly componentConfigSignal: _angular_core.Signal>>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Preview component function preset that renders zip files using {@link DbxZipPreviewComponent}. * * @param input - The preview input containing the source URL and MIME type of the zip file. * @returns An injection component config that initializes a {@link DbxZipPreviewComponent} with the given source URL. */ declare const DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_COMPONENT_PRESET: DbxWebFilePreviewServicePreviewComponentFunction; /** * DbxWebFilePreviewServiceEntry for previewing a zip file using a DbxZipPreviewDialogComponent. */ declare const DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_PRESET_ENTRY: DbxWebFilePreviewServiceEntry; /** * Exposes the Angular {@link Injector} and {@link ElementRef} at the host element, enabling child components to inject a reference to a well-placed parent element. * * @example * ```html *
* *
* ``` */ declare class DbxStructureDirective { readonly injector: Injector; readonly element: ElementRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Specialized {@link DbxStructureDirective} intended for the application body element. Provides itself as a `DbxStructureDirective` so child components can inject a reference to the body's injector and element. * * @example * ```html *
* *
* ``` */ declare class DbxBodyDirective extends DbxStructureDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Config supplied by a single DbxWebPageTitleInfoDirective. Each segment contributes its own values to the hierarchical chain; * the active {@link DbxWebPageTitleDelegate} decides how segments combine into the final page title. * * @example * ```ts * const config: DbxWebPageTitleInfoConfig = { title: 'Inbox', description: 'Your messages' }; * ``` */ interface DbxWebPageTitleInfoConfig { /** * Title segment for this level of the hierarchy. */ readonly title?: Maybe; /** * Optional meta description for this level of the hierarchy. The default delegate uses the leaf-most non-empty value. */ readonly description?: Maybe; } /** * Final, fully-resolved page title details emitted by the {@link DbxWebPageTitleDelegate}. Consumed by the service to update * the document title and exposed via {@link DbxWebPageTitleService#titleDetails$} for downstream consumers (e.g., meta tag setters). */ interface DbxWebPageTitleDetails { readonly title: string; readonly description?: Maybe; } /** * Reactive reference contributed by a directive registered with {@link DbxWebPageTitleService}. * * Each registered reference exposes: * - `chain$`: the composed config chain from the root ancestor down to this node, dropping null/undefined configs. * - `isLeaf$`: whether this reference currently has no registered descendants (i.e., it is a leaf candidate). * * The service picks the active leaf reference and feeds its chain into the delegate. */ interface DbxWebPageTitleInfoReference { readonly chain$: Observable; readonly isLeaf$: Observable; } /** * Input handed to {@link DbxWebPageTitleDelegate#buildPageTitleDetails}. * * The directive {@link chain} (root → leaf) and the service-level {@link rootConfig} are kept separate so a delegate can apply different rules * to the app-wide root config than to the directive-supplied chain (e.g., always render the root config last regardless of leaf order, or skip it entirely). */ interface DbxWebPageTitleDelegateInput { /** * Hierarchical chain supplied by `[dbxWebPageTitleInfo]` directives, ordered root → leaf. Excludes the service-level root config. */ readonly chain: readonly DbxWebPageTitleInfoConfig[]; /** * Service-level root config, if one was provided via {@link DbxWebPageTitleServiceConfig#rootConfig}. `undefined` when no root config is set. */ readonly rootConfig?: Maybe; } /** * Combines the directive chain plus the optional service-level root config into the final {@link DbxWebPageTitleDetails}. * Apps may swap in a custom delegate via {@link DbxWebPageTitleService#setDelegate}. */ interface DbxWebPageTitleDelegate { buildPageTitleDetails(input: DbxWebPageTitleDelegateInput): DbxWebPageTitleDetails; } /** * Configuration for {@link dbxWebDefaultPageTitleDelegate}. */ interface DbxWebDefaultPageTitleDelegateConfig { /** * Final fallback title used when the combined chain produces no non-empty title segments. Defaults to ''. */ readonly defaultTitle?: string; /** * Separator between non-empty title segments. Defaults to ' | '. */ readonly separator?: string; /** * If true, segments are joined leaf-first (e.g. 'Page | Section | App'). * If false, root-first (e.g. 'App | Section | Page'). Defaults to true. */ readonly leafFirst?: boolean; /** * If set, appended to the final title using the same separator (e.g. ' | MyApp'). Useful when neither the chain nor the rootConfig carries an app-name segment. */ readonly appNameSuffix?: Maybe; } /** * Builds a {@link DbxWebPageTitleDelegate} that prepends the optional rootConfig to the directive chain, then joins non-empty title segments with a separator. * * - Title: rootConfig (if set) sits at the root; the chain extends from there toward the leaf. Non-empty `title` values are joined using `separator`, * leaf-first by default. When the combined chain has no non-empty segments, `defaultTitle` is used. When `appNameSuffix` is set, it is appended with the same separator. * - Description: the leaf-most non-empty `description` across the combined chain wins. Falls back to `undefined` if no segment provides one. * * @param config - Delegate configuration. * @returns A configured {@link DbxWebPageTitleDelegate}. * * @example * ```ts * const delegate = dbxWebDefaultPageTitleDelegate({ separator: ' · ' }); * delegate.buildPageTitleDetails({ chain: [{ title: 'Inbox' }], rootConfig: { title: 'MyApp' } }); // { title: 'Inbox · MyApp' } * ``` */ declare function dbxWebDefaultPageTitleDelegate(config?: DbxWebDefaultPageTitleDelegateConfig): DbxWebPageTitleDelegate; /** * Configuration for {@link DbxWebPageTitleService}, supplied via {@link DBX_WEB_PAGE_TITLE_SERVICE_CONFIG}. */ interface DbxWebPageTitleServiceConfig { /** * Initial delegate to use. If omitted, the default {@link dbxWebDefaultPageTitleDelegate} is used. */ readonly initialDelegate?: DbxWebPageTitleDelegate; /** * Initial value for `isTitleSyncEnabled$`. Defaults to true. */ readonly initialTitleSyncEnabled?: boolean; /** * Default/root config that the service prepends to every chain handed to the delegate. Lets apps supply app-wide title/description metadata * without requiring a top-level `[dbxWebPageTitleInfo]` directive. Defaults to `{}` (no contribution). */ readonly rootConfig?: DbxWebPageTitleInfoConfig; } /** * Injection token for {@link DbxWebPageTitleServiceConfig}. */ declare const DBX_WEB_PAGE_TITLE_SERVICE_CONFIG: InjectionToken; /** * Tracks all {@link DbxWebPageTitleInfoReference} values registered by `[dbxWebPageTitleInfo]` directives, identifies the active leaf, * composes its hierarchical chain, and feeds the chain through a swappable {@link DbxWebPageTitleDelegate} to produce {@link DbxWebPageTitleDetails}. * * When `isTitleSyncEnabled$` is true, the service applies `titleDetails$.title` to the document via Angular's {@link Title} service. */ declare class DbxWebPageTitleService { private readonly _titleService; private readonly _config; private readonly _references; private readonly _delegate; private readonly _isTitleSyncEnabled; private readonly _rootConfig; /** * Observable of all currently registered references. */ readonly references$: Observable>; /** * Observable of the active delegate. */ readonly delegate$: Observable; /** * Whether the service applies `titleDetails$.title` to the document via {@link Title}. */ readonly isTitleSyncEnabled$: Observable; /** * The default/root config supplied to the delegate alongside the directive chain. `undefined` when no root config is configured. */ readonly rootConfig$: Observable>; /** * The active leaf reference: the most recently registered reference whose `isLeaf$` is currently true. Emits `undefined` when no leaves exist. */ readonly leafReference$: Observable>; /** * The directive-supplied chain (root → leaf) for the active leaf. Empty when there is no active leaf. Excludes the service-level rootConfig (delivered separately to the delegate). */ readonly chain$: Observable; /** * Final page title details produced by feeding `{ chain, rootConfig }` through the active delegate. */ readonly titleDetails$: Observable; constructor(); /** * Replaces the active delegate. * * @param delegate - The new delegate. */ setDelegate(delegate: DbxWebPageTitleDelegate): void; /** * Enables or disables auto-application of the computed title to the document. * * @param enabled - True to enable, false to disable. */ setTitleSyncEnabled(enabled: boolean): void; /** * Replaces (or clears, when `undefined`) the root/default config delivered to the delegate alongside the directive chain. * * @param config - The new root config, or `undefined` to clear it. */ setRootConfig(config: Maybe): void; /** * Registers a reference. Called by {@link DbxWebPageTitleInfoDirective} on construction. * * @param reference - The reference to register. */ register(reference: DbxWebPageTitleInfoReference): void; /** * Unregisters a reference. Called by {@link DbxWebPageTitleInfoDirective} on destroy. * * @param reference - The reference to unregister. */ unregister(reference: DbxWebPageTitleInfoReference): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Registers a hierarchical page title segment with {@link DbxWebPageTitleService}. Multiple directives nested in the host tree * form a chain (root → leaf); the leaf's segment takes priority through the active delegate. * * The directive locates its parent of the same type via element-injector ascent (`{ skipSelf: true, optional: true }`), * mirroring Angular CDK's tree-node hierarchy pattern. Each directive maintains its own `children` set so the service can * compute which directives are leaves at any moment. * * Requires {@link provideDbxWebPageTitleService} to be set up at the application or feature scope. * * @dbxWebComponent * @dbxWebSlug page-title-info * @dbxWebCategory navigation * @dbxWebSkillRefs dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html *
* *
* *
* *
* ``` */ declare class DbxWebPageTitleInfoDirective implements DbxWebPageTitleInfoReference { private readonly _service; private readonly _parent; private readonly _destroyRef; readonly dbxWebPageTitleInfo: _angular_core.InputSignal>; private readonly _children; readonly config$: Observable>; readonly chain$: Observable; readonly isLeaf$: Observable; constructor(); /** * @param child - The descendant directive to register as a child. * * @internal Maintained by descendant directives to keep `isLeaf$` accurate. */ _addChild(child: DbxWebPageTitleInfoDirective): void; /** * @param child - The descendant directive to unregister. * * @internal */ _removeChild(child: DbxWebPageTitleInfoDirective): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Configuration for {@link provideDbxWebPageTitleService}. */ interface ProvideDbxWebPageTitleServiceConfig extends DbxWebPageTitleServiceConfig { } /** * Creates {@link EnvironmentProviders} that wire up {@link DbxWebPageTitleService} (and an optional * {@link DbxWebPageTitleServiceConfig}) for an app or feature scope. * * @param config - Optional service configuration. * @returns Environment providers ready to pass to `bootstrapApplication` or another `provide*` factory. * * @example * ```ts * provideDbxWebPageTitleService({ defaultTitle: 'MyApp' }) * ``` * @__NO_SIDE_EFFECTS__ */ declare function provideDbxWebPageTitleService(config?: ProvideDbxWebPageTitleServiceConfig): EnvironmentProviders; /** * Widget type identifier */ type DbxWidgetType = string; /** * Type and data pair for a DbxWidget. */ type DbxWidgetDataPair = Readonly>; /** * Used for converting the input data into a DbxWidgetDataPair value. */ type DbxWidgetDataPairFactory = MapFunction>; /** * Configuration for {@link DbxWidgetViewComponent} that extends {@link DbxWidgetDataPair} with an optional fallback type. */ interface DbxWidgetViewComponentConfig extends DbxWidgetDataPair { /** * Alternative, default type to use if this type is not known/configured. */ readonly defaultType?: DbxWidgetType; } /** * Maps a widget type identifier to its corresponding Angular component class for rendering by the {@link DbxWidgetService}. */ interface DbxWidgetEntry { /** * Widget type to respond to. */ readonly type: DbxWidgetType; /** * Widget component class to use. */ readonly componentClass: Type; } /** * Registry service for widget components. Components are registered by type identifier and resolved by {@link DbxWidgetViewComponent} to render the appropriate widget for a given type/data pair. * * @example * ```typescript * widgetService.register({ type: 'my-widget', componentClass: MyWidgetComponent }); * ``` */ declare class DbxWidgetService { private readonly _entries; /** * Used to register an entry. If an entry with the same type is already registered, this will override it by default. * * @param entry - The widget entry mapping a type identifier to its component class. * @param override - Whether to replace an existing entry with the same type. Defaults to true. * @returns True if the entry was registered, false if an entry with the same type already exists and override is false. */ register(entry: DbxWidgetEntry, override?: boolean): boolean; getWidgetIdentifiers(): DbxWidgetType[]; getWidgetEntry(type: DbxWidgetType): Maybe; getWidgetEntries(types: Iterable): DbxWidgetEntry[]; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Resolves and renders a widget component based on the input type using the {@link DbxWidgetService}. Falls back to a `defaultType` if the primary type is not registered, and projects `[unknownWidget]` content when no matching widget is found. * * @example * ```html * * Widget not found * * ``` */ declare class DbxWidgetViewComponent { readonly dbxWidgetService: DbxWidgetService; readonly config: _angular_core.InputSignal>>; readonly configSignal: _angular_core.Signal>>; readonly widgetConfigExistsSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Abstract base directive for widget components that automatically injects the widget data from the {@link DBX_INJECTION_COMPONENT_DATA} token. * Subclasses access the typed data through `this.data`. * * @example * ```typescript * @Component({ template: '

{{ data.name }}

' }) * class MyWidget extends AbstractDbxWidgetComponent {} * ``` */ declare abstract class AbstractDbxWidgetComponent { readonly data: T; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, {}, never, never, true, never>; } /** * A {@link DbxWidgetDataPair} wrapped as a list item for use in selection-based list views. */ type DbxWidgetDataPairWithSelection = DbxValueAsListItem; /** * Grid-based list component that renders {@link DbxWidgetDataPair} items as widgets in a responsive grid layout. * * @example * ```html * * ``` */ declare class DbxWidgetListGridComponent extends AbstractDbxListWrapperDirective { constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Grid view component for rendering {@link DbxWidgetDataPair} items. Used internally by {@link DbxWidgetListGridComponent}. */ declare class DbxWidgetListGridViewComponent extends AbstractDbxListGridViewDirective { readonly config: DbxValueListGridViewConfig; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Individual grid item component that renders a single widget via {@link DbxWidgetViewComponent}. */ declare class DbxWidgetListGridViewItemComponent extends AbstractDbxValueListViewItemComponent { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Extends {@link SlashPathDirectoryTreeNodeValue} with MIME type detection and optional blob retrieval for a zip archive entry. */ type DbxZipBlobPreviewEntryNodeValue = SlashPathDirectoryTreeNodeValue & { readonly mimeType: Maybe; readonly getBlob?: Getter>; }; /** * Tree node representing a single entry (file or directory) within a zip archive preview. */ type DbxZipBlobPreviewEntryTreeNode = SlashPathDirectoryTreeNode>; /** * Root node of the directory tree built from zip archive entries. */ type DbxZipBlobPreviewEntryTreeRoot = SlashPathDirectoryTreeRoot>; /** * Builds a directory tree from an array of zip archive entries, enriching each node with MIME type detection and blob retrieval capability. * * @param entries - Array of zip archive entries to build the tree from, or null/undefined for an empty tree. * @returns The root node of the constructed directory tree with MIME types and blob getters attached. * * @example * ```typescript * const root = dbxZipBlobPreviewEntryTreeFromEntries(zipEntries); * // root.children contains the top-level files and directories * ``` */ declare function dbxZipBlobPreviewEntryTreeFromEntries(entries: Maybe): DbxZipBlobPreviewEntryTreeRoot; /** * Renders an anchor element that adapts its presentation based on the type of navigation link provided. * * Supports plain content, clickable actions, router segue references, external hrefs, and disabled states. * * @dbxWebComponent * @dbxWebSlug anchor * @dbxWebCategory router * @dbxWebRelated anchor-list, navbar, sidenav * @dbxWebSkillRefs dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html * Home * ``` * * @example * ```html * * * * ``` */ declare class DbxAnchorComponent extends AbstractDbxAnchorDirective { private readonly _dbNgxRouterWebProviderConfig; readonly block: _angular_core.InputSignal>; readonly clickableElement: _angular_core.Signal>>; readonly childClickTarget: _angular_core.Signal>>; readonly templateRef: _angular_core.Signal>>; readonly templateRef$: rxjs.Observable>>; readonly selectedClassSignal: _angular_core.Signal<"" | "dbx-anchor-selected">; readonly srefAnchorConfig: DbxInjectionComponentConfig; protected readonly _overrideClickElementEffect: _angular_core.EffectRef; clickAnchor(event?: Maybe): void; onMouseEnter(event?: Maybe): void; onMouseLeave(event?: Maybe): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Renders a Material icon button wrapped in a {@link DbxAnchorComponent} for navigation. * * The icon is sourced from the provided {@link ClickableIconAnchorLink}. * * @example * ```html * * ``` */ declare class DbxAnchorIconComponent { readonly anchor: _angular_core.InputSignal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Inline link component that wraps content in a {@link DbxAnchorComponent}. Accepts a router ref, an external href, or a full {@link ClickableAnchor} configuration. * * @example * ```html * Go Home * External * Custom Link * ``` */ declare class DbxLinkComponent { readonly ref: _angular_core.InputSignal>; readonly href: _angular_core.InputSignal>; readonly anchor: _angular_core.InputSignal>; readonly anchorSignal: _angular_core.Signal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Displays the icon and title from a {@link ClickableAnchorLink}, either from an explicit input or inherited from a parent {@link DbxAnchorComponent}. * * Renders a Material icon followed by a title span when available. * * @example * ```html * * * * * * ``` */ declare class DbxAnchorContentComponent { readonly parent: DbxAnchorComponent | null; readonly inputAnchor: _angular_core.InputSignal>>; private readonly _inputAnchor; private readonly _parentAnchor; readonly anchor$: Observable>>; readonly anchorSignal: _angular_core.Signal>>; readonly iconSignal: _angular_core.Signal>; readonly titleSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * All standalone components related to anchors and links. */ declare const DBX_ROUTER_ANCHOR_COMPONENTS: (typeof DbxAnchorComponent | typeof DbxAnchorIconComponent | typeof DbxLinkComponent | typeof DbxAnchorContentComponent)[]; /** * NgModule that re-exports all standalone anchor and link components for backward compatibility. * * Prefer importing individual standalone components directly in new code. */ declare class DbxRouterAnchorModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Abstract base directive for segue anchor implementations that bridges a parent {@link DbxAnchorComponent} * with a router-specific anchor rendering (e.g., Angular Router or UIRouter). * * Provides access to the parent anchor observable, template configuration, and navigation target. */ declare abstract class AbstractDbxSegueAnchorDirective { readonly parent: DbxAnchorComponent; readonly anchor$: Observable<_dereekb_util.Maybe<_dereekb_dbx_core.ClickableAnchor>>; readonly templateConfig$: Observable; readonly anchorSignal: _angular_core.Signal<_dereekb_util.Maybe<_dereekb_dbx_core.ClickableAnchor>>; readonly templateConfigSignal: _angular_core.Signal | undefined>; readonly targetSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * An expanded anchor link tree node with computed CSS classes for depth-based styling. */ interface DbxAnchorListExpandedAnchor extends ExpandedClickableAnchorLinkTree { readonly classes: string; } /** * Displays a hierarchical list of {@link ClickableAnchorLinkTree} items inside a Material navigation list. * * Each anchor is expanded and assigned depth-based CSS classes for nested styling. * * @dbxWebComponent * @dbxWebSlug anchor-list * @dbxWebCategory router * @dbxWebRelated anchor, sidenav * @dbxWebSkillRefs dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxAnchorListComponent { readonly anchors: _angular_core.InputSignalWithTransform>; readonly expandedAnchorsSignal: Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Function that produces a {@link ClickableAnchor} for a given list item value, enabling per-item navigation links. */ type AnchorForValueFunction = (value: T, item: DbxValueListItem) => Maybe; /** * Modifier key used to identify the router anchor modifier on list items. */ declare const DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY = "router_anchor"; /** * Structural directive that attaches a {@link ClickableAnchor} to each item in a {@link DbxValueListView} using a provided mapping function. * * This enables navigation when clicking list items without modifying the list component itself. * * @example * ```html * * ... * * ``` * * ```typescript * anchorForItem: AnchorForValueFunction = (value) => ({ ref: `/items/${value.id}` }); * ``` */ declare class DbxListItemAnchorModifierDirective extends AbstractDbxValueListItemModifierDirective { readonly anchorForItem: _angular_core.InputSignal>>; readonly anchorForItemModifiers$: Observable>>>>; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[dbxListItemAnchorModifier]", never, { "anchorForItem": { "alias": "dbxListItemAnchorModifier"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * A {@link ClickableAnchorLinkSegueRef} used by {@link DbxNavbarComponent} that can also configure the navbar button while the anchor is active. */ interface DbxNavbarClickableAnchorLinkSegueRef extends ClickableAnchorLinkSegueRef { /** * Button style used by the navbar button while this anchor is active. Replaces the navbar's buttonStyle. * * Has no effect on the tab bar. */ readonly activeButton?: Maybe; } /** * Internal representation of a navigation anchor with its selection state. */ interface NavAnchorLink { readonly selected: boolean; readonly anchor: DbxNavbarClickableAnchorLinkSegueRef; } /** * Horizontal alignment for navbar content. */ type NavBarContentAlign = 'center' | 'left' | 'right'; /** * Display mode for the navbar: tab bar, button with dropdown/rotate, or icon-only button. */ type NavbarMode = 'bar' | 'button' | 'icon'; /** * Button behavior when the navbar collapses to button mode: show a dropdown menu or rotate through anchors on click. */ type NavbarButtonMode = 'menu' | 'rotate'; /** * Responsive navigation bar that displays anchor links as Material tabs, collapsing to a button menu or icon on smaller screens. * * Automatically selects the active anchor based on the current route and supports configurable breakpoints. * * @dbxWebComponent * @dbxWebSlug navbar * @dbxWebCategory navigation * @dbxWebRelated anchor, sidenav, pagebar * @dbxWebSkillRefs dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` * * @example * ```html * * ``` */ declare class DbxNavbarComponent extends AbstractTransitionDirective { private readonly _dbxScreenMediaService; private readonly _dbxRouterService; /** * Whether or not to show the dropwdown caret for a menu */ readonly showMenuCaret: _angular_core.InputSignal; /** * Style passed to the button when the navbar renders as a button (the "button" and "icon" modes), such as a flat type and a color. * * The active anchor's activeButton style is used instead, if it has one. Has no effect on the tab bar. */ readonly buttonStyle: _angular_core.InputSignal>; readonly fab: _angular_core.InputSignalWithTransform>; readonly navAlign: _angular_core.InputSignal; readonly icon: _angular_core.InputSignal>; readonly defaultIcon: _angular_core.InputSignal>; readonly defaultText: _angular_core.InputSignal>; readonly mode: _angular_core.InputSignal>; readonly buttonMode: _angular_core.InputSignal; readonly breakpoint: _angular_core.InputSignal; readonly anchors: _angular_core.InputSignal>; readonly isBreakpointActive$: Observable; readonly mode$: Observable<"icon" | "bar" | "button">; readonly anchors$: Observable; readonly selectedAnchor$: Observable>; readonly nextRotateAnchor$: Observable>; readonly hasNoAnchors$: Observable; readonly buttonNavAnchor$: Observable>; /** * The button style for the active anchor, falling back to the buttonStyle input. * * Always based on the active anchor, including in the "rotate" button mode where the button displays the next anchor. */ readonly buttonStyle$: Observable>; readonly buttonDisplay$: Observable; readonly modeSignal: _angular_core.Signal<"icon" | "bar" | "button" | undefined>; readonly isIconModeSignal: _angular_core.Signal; readonly anchorsSignal: _angular_core.Signal; readonly buttonDisplaySignal: _angular_core.Signal; readonly buttonStyleSignal: _angular_core.Signal>; readonly hasNoAnchorsSignal: _angular_core.Signal; readonly nextRotateAnchorSignal: _angular_core.Signal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Display modes for the sidenav based on screen width. * * - `NONE` - Sidenav is hidden. * - `MOBILE` - Sidenav is an overlay drawer, closed by default. * - `ICON` - Sidenav is a persistent narrow rail showing icons only. * - `FULL` - Sidenav is a persistent full-width panel. */ declare enum SideNavDisplayMode { NONE = "none", MOBILE = "mobile", ICON = "icon", FULL = "full" } /** * Ordered list of {@link SideNavDisplayMode} values from lowest to highest. * * Used by {@link resolveSideNavDisplayMode} for rounding down to an allowed mode. */ declare const SIDE_NAV_DISPLAY_MODE_ORDER: readonly SideNavDisplayMode[]; /** * String union type matching the {@link SideNavDisplayMode} enum values. * * Useful for template bindings where string literals are passed directly. */ type SideNavDisplayModeString = `${SideNavDisplayMode}`; /** * Position of the sidenav drawer. * * - `start` - Left side (default, LTR). * - `end` - Right side (LTR). */ type DbxSidenavPosition = 'start' | 'end'; /** * Resolves a {@link SideNavDisplayMode} against a set of allowed modes. * * If the requested mode is allowed, it is returned as-is. Otherwise, the nearest * allowed mode that is lower in the {@link SIDE_NAV_DISPLAY_MODE_ORDER} hierarchy is returned. * Falls back to the lowest allowed mode if no lower mode is available, or {@link SideNavDisplayMode.NONE} * if the allowed set is empty or undefined. * * @param mode - The requested display mode to resolve. * @param allowedModes - Set of modes that are permitted; if null/undefined, all modes are allowed. * @returns The resolved display mode, falling back to the nearest lower allowed mode or NONE. * * @example * ```ts * // ICON not allowed, rounds down to MOBILE * resolveSideNavDisplayMode(SideNavDisplayMode.ICON, new Set([SideNavDisplayMode.MOBILE, SideNavDisplayMode.FULL])); * // => SideNavDisplayMode.MOBILE * ``` */ declare function resolveSideNavDisplayMode(mode: SideNavDisplayMode, allowedModes: Maybe>): SideNavDisplayMode; /** * Describes the current state of the sidenav sidebar, including display mode, Material drawer mode, and open/closed state. */ interface DbxSidenavSidebarState { readonly mode: SideNavDisplayMode; readonly drawer: MatDrawerMode; readonly open?: boolean; } /** * Responsive side navigation component that adapts its display mode based on screen width. * * Renders a Material sidenav with an anchor list and automatically transitions between mobile overlay, icon rail, and full sidebar modes. * Closes automatically on route transitions in mobile mode. * * @dbxWebComponent * @dbxWebSlug sidenav * @dbxWebCategory navigation * @dbxWebRelated sidenav-page, anchor-list * @dbxWebSkillRefs dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxSidenavComponent extends AbstractTransitionWatcherDirective implements OnInit { private readonly _sidenavSub; private readonly _screenMediaService; readonly position: _angular_core.InputSignal; /** * Overrides the responsive display mode. When set, the sidenav ignores screen-width breakpoints and uses this mode instead. * * Set to `'mobile'` to keep the sidenav always hidden as an overlay that only opens when toggled. */ readonly displayMode: _angular_core.InputSignal>; readonly sidenav: _angular_core.Signal; /** * Restricts which {@link SideNavDisplayMode} values are permitted. * * When set, any responsive or overridden mode not in this set is rounded down to the nearest * allowed mode in the {@link SIDE_NAV_DISPLAY_MODE_ORDER} hierarchy. * * @example * ```html * * ``` */ readonly allowedModes: _angular_core.InputSignal>; readonly anchors: _angular_core.InputSignal>; private readonly _allowedModes$; readonly responsiveMode$: Observable; private readonly _displayMode$; readonly mode$: Observable; readonly modeSignal: _angular_core.Signal; readonly disableBackdropSignal: _angular_core.Signal; readonly sizeCssClassSignal: _angular_core.Signal; readonly positionCssClassSignal: _angular_core.Signal<"dbx-sidenav-end" | "dbx-sidenav-start">; readonly cssClassesSignal: _angular_core.Signal; readonly state$: Observable<{ mode: SideNavDisplayMode; drawer: "over" | "side"; open: boolean; }>; readonly stateSignal: _angular_core.Signal<{ mode: SideNavDisplayMode; drawer: "over" | "side"; open: boolean; } | undefined>; readonly drawerSignal: _angular_core.Signal<"over" | "side">; ngOnInit(): void; protected updateForSuccessfulTransition(): void; closeNav(): void; toggleNav(open?: boolean): void; private _toggleNav; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Structural directive that conditionally renders its host element based on the current {@link SideNavDisplayMode} of the parent {@link DbxSidenavComponent}. * * Accepts one or more display modes and shows the content only when the sidenav matches. * * @example * ```html *
Visible only in full mode
*
Visible in mobile or icon mode
* ``` */ declare class DbxIfSidenavDisplayModeDirective extends AbstractIfDirective { readonly dbxSidenavComponent: DbxSidenavComponent; readonly modes: _angular_core.InputSignal>>; readonly modesSetSignal: Signal>; readonly modes$: rxjs.Observable>; readonly show$: rxjs.Observable; readonly showSignal: Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Default icon displayed on the sidenav toggle button. */ declare const DEFAULT_DBX_SIDENAV_MENU_ICON = "view_sidebar"; /** * Icon button that toggles the parent {@link DbxSidenavComponent} open or closed. Only visible when the sidenav is in mobile display mode. * * @example * ```html * * ``` */ declare class DbxSidenavButtonComponent { readonly parent: DbxSidenavComponent; readonly mode$: rxjs.Observable; readonly showMenuButton$: rxjs.Observable; readonly showMenuButtonSignal: _angular_core.Signal; readonly sidenavMenuIcon: _angular_core.InputSignalWithTransform>; toggleNav(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Pagebar component pre-configured with a sidenav toggle button for use inside a {@link DbxSidenavPageComponent}. * * Extends {@link DbxPagebarComponent} and adds the sidenav menu button on the left side. * * @example * ```html * * Left Content * Right Content * * ``` */ declare class DbxSidenavPagebarComponent extends DbxPagebarComponent { /** * The sidenav menu icon */ readonly sidenavMenuIcon: _angular_core.InputSignal>; /** * Whether or not to show the sidenav button. * * Defaults to true. */ readonly showSidenavButton: _angular_core.InputSignal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Page layout component designed for use inside a {@link DbxSidenavComponent}. Includes a sidenav-aware pagebar and a content area. * * When `mobileOnly` is true, the pagebar is hidden on non-mobile screen sizes. * * @dbxWebComponent * @dbxWebSlug sidenav-page * @dbxWebCategory navigation * @dbxWebRelated sidenav, navbar * @dbxWebSkillRefs dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html * Content * ``` * * @example * ```html * * * * ``` */ declare class DbxSidenavPageComponent { readonly parent: DbxSidenavComponent; /** * The sidenav menu icon */ readonly sidenavMenuIcon: _angular_core.InputSignal>; /** * Whether or not to show the sidenav button. * * Defaults to true. */ readonly showSidenavButton: _angular_core.InputSignal>; readonly mobileOnly: _angular_core.InputSignal; readonly mobileOnly$: rxjs.Observable; readonly hidePagebar$: rxjs.Observable; readonly hidePagebarSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * NgModule that re-exports all standalone sidenav-related components and directives for backward compatibility. * * Prefer importing individual standalone components directly in new code. */ declare class DbxRouterSidenavModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Convenience NgModule that re-exports {@link DbxRouterAnchorModule} and {@link DbxRouterSidenavModule}. */ declare class DbxRouterLayoutModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Segue anchor component that renders a `routerLink`-based anchor element for the Angular Router. * * Injected by {@link DbxAnchorComponent} via {@link DbxRouterWebProviderConfig} when the app is configured with {@link provideDbxRouterWebAngularRouterProviderConfig}. */ declare class DbxAngularRouterSegueAnchorComponent extends AbstractDbxSegueAnchorDirective { readonly anchorElement: _angular_core.Signal>; readonly injectionElement: _angular_core.Signal>; readonly anchorDisabledSignal: _angular_core.Signal; protected readonly _overrideClickElementEffect: _angular_core.EffectRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Provides a {@link DbxRouterWebProviderConfig} that configures the application to use Angular Router for rendering segue-ref anchor links. * * @returns Environment providers that configure the Angular Router-based segue anchor component. * * @example * ```typescript * bootstrapApplication(AppComponent, { * providers: [provideDbxRouterWebAngularRouterProviderConfig()] * }); * ``` */ declare function provideDbxRouterWebAngularRouterProviderConfig(): EnvironmentProviders; /** * Segue anchor component that renders a `uiSref`-based anchor element for UIRouter. * * Injected by {@link DbxAnchorComponent} via {@link DbxRouterWebProviderConfig} when the app is configured with {@link provideDbxRouterWebUiRouterProviderConfig}. */ declare class DbxUIRouterSegueAnchorComponent extends AbstractDbxSegueAnchorDirective { private readonly _parentAnchorSignal; readonly anchorElement: _angular_core.Signal>; readonly injectionElement: _angular_core.Signal>; readonly anchorDisabledSignal: _angular_core.Signal; protected readonly _overrideClickElementEffect: _angular_core.EffectRef; readonly uiSrefSignal: _angular_core.Signal; readonly uiParamsSignal: _angular_core.Signal; readonly uiOptionsSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Provides a {@link DbxRouterWebProviderConfig} that configures the application to use UIRouter for rendering segue-ref anchor links. * * @returns Environment providers that configure the UIRouter-based segue anchor component. * * @example * ```typescript * bootstrapApplication(AppComponent, { * providers: [provideDbxRouterWebUiRouterProviderConfig()] * }); * ``` */ declare function provideDbxRouterWebUiRouterProviderConfig(): EnvironmentProviders; /** * Abstract configuration that tells the application which component to use for rendering segue-ref anchor links. * * Use {@link provideDbxRouterWebAngularRouterProviderConfig} for Angular Router or * {@link provideDbxRouterWebUiRouterProviderConfig} for UIRouter. */ declare abstract class DbxRouterWebProviderConfig { /** * Component used by the Anchor component to render a SegueRef link. */ abstract anchorSegueRefComponent: DbxInjectionComponentConfig; } /** * Display mode for the zip blob preview: browsing directories or viewing a specific file entry. */ type DbxZipBlobPreviewMode = 'view_directory' | 'view_entry'; /** * Group classification for zip preview entries: either a directory or a file. */ type DbxZipBlobPreviewGroupValue = 'directory' | 'file'; /** * Group data used for sorting and titling directory/file groups in the zip preview list. */ type DbxZipBlobPreviewGroupData = DbxListTitleGroupData & { sort: number; }; /** * Displays an interactive file browser for a zip archive blob, allowing navigation through directories and previewing/downloading individual files. * * @example * ```html * * ``` */ declare class DbxZipBlobPreviewComponent { readonly blob: _angular_core.InputSignal>; /** * The download file name for the zip file. * * If not defined, then the file cannot be downloaded directly. */ readonly downloadFileName: _angular_core.InputSignal>; readonly hasBlobSignal: Signal; readonly zipReaderSignal: Signal | undefined>; readonly downloadZipFileBlobButtonConfigSignal: Signal; readonly zipReader$: Observable | undefined>; readonly allEntriesLoadingState$: Observable>; readonly allEntries$: Observable>; readonly allEntriesRoot$: Observable<_dereekb_dbx_web.DbxZipBlobPreviewEntryTreeRoot>; readonly allEntriesRootSignal: Signal<_dereekb_dbx_web.DbxZipBlobPreviewEntryTreeRoot | undefined>; readonly selectedNodeSignal: _angular_core.WritableSignal>; readonly listTitleGroupDelegate: DbxListTitleGroupTitleDelegate; readonly modeSignal: Signal; readonly listEntriesSignal: Signal; readonly listEntries$: Observable; readonly listEntriesState$: Observable>; readonly selectedNodeIconSignal: Signal; readonly selectedNodePathSignal: Signal; readonly selectedFileNodeSignal: Signal>>; readonly selectedFileEntry$: Observable>>; readonly selectedFileEntryBlob$: Observable>; readonly selectedFileEntryBlobSignal: Signal>; readonly context: _dereekb_rxjs.MutableLoadingStateContext, _dereekb_rxjs.LoadingContextEvent & LoadingState>; readonly makeEntryAnchor: AnchorForValueFunction; readonly homeClicked: () => void; readonly backClicked: () => void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Previews the contents of a zip archive from either a URL or a blob. Fetches and parses the zip file, then delegates rendering to {@link DbxZipBlobPreviewComponent}. * * @example * ```html * * ``` */ declare class DbxZipPreviewComponent { /** * The URL to download the zip file from, if applicable. */ readonly srcUrl: _angular_core.ModelSignal>; /** * The blob to use for the zip file, if applicable. */ readonly blob: _angular_core.ModelSignal>; /** * The file name to use for the zip file. */ readonly downloadFileName: _angular_core.ModelSignal>; readonly srcUrl$: Observable>; readonly blob$: Observable>; readonly zipFileBlobLoadingState$: Observable>; readonly zipFileBlob$: Observable>; readonly zipFileBlobSignal: _angular_core.Signal>; readonly context: _dereekb_rxjs.MutableLoadingStateContext, _dereekb_rxjs.LoadingContextEvent & LoadingState>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Renders a floating close button positioned in the corner of a dialog. * * @example * ```html * * ``` */ declare class DbxDialogContentCloseComponent { readonly padded: _angular_core.InputSignal; readonly close: _angular_core.OutputEmitterRef; closeClicked(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Configuration for the dialog content footer button appearance. */ interface DbxDialogContentFooterConfig { /** * (Optional) Material theme palette for the close button. * * Only accepts a {@link ThemePalette}; prefer {@link buttonStyle} to paint the button with an arbitrary * {@link DbxColorInput} (including a registered color template). */ readonly buttonColor?: ThemePalette; readonly closeText?: string; /** * (Optional) Style for the close button. * * Defaults to {@link DEFAULT_DIALOG_CONTENT_FOOTER_BUTTON_STYLE}. A `color` set here wins over {@link buttonColor}. */ readonly buttonStyle?: Maybe; } /** * Default style for the dialog content footer's close button. */ declare const DEFAULT_DIALOG_CONTENT_FOOTER_BUTTON_STYLE: DbxButtonStyle; /** * Renders a close button at the bottom of a dialog with customizable text and color. * * @example * ```html * * ``` * * @example * ```html * * ``` */ declare class DbxDialogContentFooterComponent { readonly config: _angular_core.InputSignal>; readonly closeText: _angular_core.InputSignal>; readonly buttonColor: _angular_core.InputSignal>; readonly buttonStyle: _angular_core.InputSignal>; readonly closeTextSignal: _angular_core.Signal; /** * Resolved close button style. The narrower {@link buttonColor} is folded in as the color only when the resolved * style does not already carry one, so a `buttonStyle` color always wins. */ readonly buttonStyleSignal: _angular_core.Signal; readonly close: _angular_core.OutputEmitterRef; closeClicked(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Width mode for dialog content containers. */ type DbxDialogContentContainerWidth = 'normal' | 'wide'; /** * Directive that applies standard dialog content styling and width configuration. * * Can be used as an element, attribute, or CSS class selector. * * @dbxWebComponent * @dbxWebSlug dialog-content * @dbxWebCategory overlay * @dbxWebRelated popover, popup, prompt * @dbxWebSkillRefs dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html *
Body
* ``` * * @example * ```html * *

Confirm

*

Are you sure?

* * ``` */ declare class DbxDialogContentDirective { readonly width: _angular_core.InputSignalWithTransform>; readonly classConfigSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * A function that opens a MatDialog and returns the dialog reference. Used with {@link DbxActionDialogDirective}. */ type DbxActionDialogFunction = () => MatDialogRef>; /** * Action directive that opens a dialog and captures the returned value as the action's value. * * The directive triggers the provided dialog function, waits for the dialog to close, and uses the result as the action value. * * @example * ```html * * ``` */ declare class DbxActionDialogDirective extends AbstractDbxActionValueGetterDirective { readonly elementRef: ElementRef; readonly dbxActionDialog: _angular_core.InputSignal>; readonly dbxActionDialogIsModified: _angular_core.InputSignal>; readonly dbxActionDialogIsEqual: _angular_core.InputSignal>; constructor(); protected _getDataFromDialog(): Observable>; protected _makeDialogRef(): MatDialogRef>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[dbxActionDialog]", ["dbxActionDialog"], { "dbxActionDialog": { "alias": "dbxActionDialog"; "required": true; "isSignal": true; }; "dbxActionDialogIsModified": { "alias": "dbxActionDialogIsModified"; "required": false; "isSignal": true; }; "dbxActionDialogIsEqual": { "alias": "dbxActionDialogIsEqual"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Configuration for opening a dialog with a dynamically injected component. */ interface DbxInjectionDialogComponentConfig extends Omit { readonly contentWidth?: Maybe; readonly showCloseButton?: boolean; readonly componentConfig: DbxInjectionComponentConfig; } /** * Dialog component that renders a dynamically injected component using {@link DbxInjectionComponent}. * * Use the static `openDialog` method to open the dialog with a given component configuration. * * @example * ```ts * DbxInjectionDialogComponent.openDialog(matDialog, { * componentConfig: { componentClass: MyComponent }, * showCloseButton: true, * contentWidth: 'wide' * }); * ``` */ declare class DbxInjectionDialogComponent extends AbstractDialogDirective> { get showCloseButton(): boolean; get contentWidth(): Maybe; get componentConfig(): DbxInjectionComponentConfig; static openDialog(matDialog: MatDialog, config: DbxInjectionDialogComponentConfig): MatDialogRef, void>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "ng-component", never, {}, {}, never, never, true, never>; } /** * Configuration for dialog content, extending MatDialogConfig but omitting internal properties. */ type DbxDialogContentConfig = Omit; /** * Sanitizes a {@link DbxDialogContentConfig} by normalizing the panelClass into an array. * * @param input - The dialog content config to sanitize, or null/undefined. * @returns A new config with panelClass normalized to an array of CSS class strings. * * @example * ```ts * const config = sanitizeDbxDialogContentConfig({ panelClass: 'my-panel my-other-panel' }); * ``` */ declare function sanitizeDbxDialogContentConfig(input: Maybe): DbxDialogContentConfig; declare class DbxDialogModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Configuration for opening a zip preview dialog, extending Material dialog config with zip-specific source options. */ interface DbxZipPreviewDialogConfig extends Omit { readonly srcUrl?: Maybe; readonly blob?: Maybe; readonly downloadFileName?: Maybe; } /** * Opens a dialog with DbxZipPreviewComponent. * * @param matDialog - The MatDialog instance to use. * @param config - The configuration for the dialog. * @returns The MatDialogRef for the dialog. */ declare function openZipPreviewDialog(matDialog: MatDialog, config: DbxZipPreviewDialogConfig): MatDialogRef, void>; /** * Keys used for identifying help topics. */ type DbxHelpContextKey = string; /** * Reference object for tracking help context registrations. * Used internally to track multiple directives with the same context string. */ interface DbxHelpContextReference { /** * Observable of context strings that this reference provides. */ readonly helpContextKeys$: Observable; } /** * Directive that registers one or more help context keys with the {@link DbxHelpContextService}. Automatically unregisters when the host element is destroyed. * * @example * ```html *
* *
* *
* *
* ``` */ declare class DbxHelpContextDirective { /** * The input help context string(s) to add. */ readonly dbxHelpContext: _angular_core.InputSignal>; readonly helpContextKeys$: Observable; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Tracks all active help context keys across the component tree. Directives and components register/unregister their help context references, * and consumers can observe the aggregated set of active keys. */ declare class DbxHelpContextService { private readonly _contextReferences; /** * Observable of all currently active help context strings. */ readonly activeHelpContextKeys$: Observable>; /** * Observable array of all currently active help context key strings. */ readonly activeHelpContextKeysArray$: Observable; /** * Registers a help context reference, adding its keys to the active set. * * @param reference - The help context reference to register. */ register(reference: DbxHelpContextReference): void; /** * Unregisters a help context reference, removing its keys from the active set. * * @param reference - The help context reference to unregister. */ unregister(reference: DbxHelpContextReference): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Registers the given help context keys observable with the {@link DbxHelpContextService}. Must be called within an Angular injection context. * Automatically unregisters on destroy, but also returns a destroy function for manual cleanup. * * @param helpContextKeys - Observable or static array of help context keys to register with the service. * @returns A destroy function that unregisters the help context keys when called. * * @example * ```typescript * // In a component or directive constructor * const destroy = registerHelpContextKeysWithDbxHelpContextService(of(['feature-help', 'general-help'])); * ``` * * @__NO_SIDE_EFFECTS__ */ declare function registerHelpContextKeysWithDbxHelpContextService(helpContextKeys: ObservableOrValue): DestroyFunction; /** * Entry defining a help widget for a specific context */ interface DbxHelpWidgetServiceEntry { /** * Help context string specific to this entry. */ readonly helpContextKey: DbxHelpContextKey; /** * Title/Label for the help topic. */ readonly title: string; /** * Icon for the help topic, if applicable. */ readonly icon?: Maybe; /** * Arbitrary metadata associated with the entry. */ readonly meta?: Maybe; /** * The priority to use when sorting the entities. * * Higher values are displayed first in the list. */ readonly sortPriority?: Maybe; /** * Custom help widget component class to use. * * The component will receive the context string as data. */ readonly widgetComponentClass: GetterOrValue>; /** * Custom header component class to use that shows up on the widget. * * The component will receive the context string as data. */ readonly headerComponentClass?: GetterOrValue>>; } /** * Data injected into help widget components via {@link DBX_HELP_WIDGET_ENTRY_DATA_TOKEN}, providing access to the corresponding widget entry. */ interface DbxHelpWidgetEntryData { /** * Corresponding widget entry. */ readonly helpWidgetEntry: DbxHelpWidgetServiceEntry; } /** * Injection token for DbxHelpWidgetData. */ declare const DBX_HELP_WIDGET_ENTRY_DATA_TOKEN: InjectionToken>; /** * Abstract configuration class for providing initial settings to the {@link DbxHelpWidgetService}, including default entries, icons, and component configs. */ declare abstract class DbxHelpWidgetServiceConfig { /** * All help widget service entries. */ abstract readonly entries?: Maybe; /** * Default icon to use for unknown help topics. */ abstract readonly defaultIcon?: Maybe; /** * Default/Unknown help topic component class. */ abstract readonly defaultWidgetComponentClass?: Maybe>; /** * Optional header component class to use for the list view. */ abstract readonly helpListHeaderComponentConfig?: Maybe; /** * Optional footer component class to use for the list view. */ abstract readonly helpListFooterComponentConfig?: Maybe; /** * Optional header component class to use for the popover view. */ abstract readonly popoverHeaderComponentConfig?: Maybe; } /** * Service used to register help widgets. * * Similar to DbxErrorWidgetService, this maintains a registry of help widgets * that can be displayed for specific help context strings. */ declare class DbxHelpWidgetService { private readonly _entries; private readonly _sortPriorityMap; private _defaultWidgetComponentClass; private _helpListHeaderComponentConfig; private _helpListFooterComponentConfig; private _defaultIcon; private _popoverHeaderComponentConfig; constructor(); /** * Returns the component class used for unrecognized help context keys. * * @returns The default widget component class, or undefined if not set. */ getDefaultWidgetComponentClass(): Maybe>; setDefaultWidgetComponentClass(componentClass: Maybe>): void; /** * Returns the default icon used for help entries without a specific icon. * * @returns The default icon string, or undefined if not set. */ getDefaultIcon(): Maybe; setDefaultIcon(icon: Maybe): void; /** * Returns the component config displayed in the popover header, if set. * * @returns The popover header component config, or undefined if not set. */ getPopoverHeaderComponentConfig(): Maybe; setPopoverHeaderComponentConfig(componentConfig: Maybe): void; /** * Returns the component config displayed at the top of the help list view, if set. * * @returns The help list header component config, or undefined if not set. */ getHelpListHeaderComponentConfig(): Maybe; setHelpListHeaderComponentConfig(componentConfig: Maybe): void; /** * Returns the component config displayed at the bottom of the help list view, if set. * * @returns The help list footer component config, or undefined if not set. */ getHelpListFooterComponentConfig(): Maybe; setHelpListFooterComponentConfig(componentConfig: Maybe): void; /** * Used to register one or more entries. * * If an entry with the same identity is already registered, this will override it by default. * * @param entries - The entries to register. * @param override - Whether to override existing entries (default: true) * @returns Always returns true after registration completes. */ register(entries: ArrayOrValue, override?: boolean): boolean; /** * Returns all currently registered help context keys. * * @returns Array of all registered help context keys. */ getAllRegisteredHelpContextKeys(): DbxHelpContextKey[]; /** * Retrieves the widget entry for a given help context key. Falls back to a default entry if a default widget component class is configured. * * @param helpContextKey - The help context key to look up. * @returns The matching widget entry, a default entry if a default component class is configured, or undefined. */ getHelpWidgetEntry(helpContextKey: DbxHelpContextKey): Maybe; /** * Retrieves widget entries for multiple help context keys, filtering out any unresolvable keys. * * @param helpContextKeys - Array of help context keys to look up. * @returns Array of resolved widget entries, excluding any keys that could not be resolved. */ getHelpWidgetEntriesForHelpContextKeys(helpContextKeys: DbxHelpContextKey[]): DbxHelpWidgetServiceEntry[]; /** * Checks whether a widget entry is registered for the given help context key. * * @param context - The help context key to check. * @returns True if a widget entry exists for the given key. */ hasHelpWidgetEntry(context: DbxHelpContextKey): boolean; /** * Returns a cached map of help context keys to their sort priority values. * * @returns Map of help context keys to their numeric sort priorities. */ getSortPriorityMap(): Map; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Factory for DbxHelpWidgetServiceConfig. */ type DbxHelpWidgetServiceConfigFactory = (injector: Injector) => DbxHelpWidgetServiceConfig; /** * Configuration for provideDbxHelpServices(). */ interface ProvideDbxHelpServicesConfig { /** * Initial help widget entries to register. */ readonly dbxHelpWidgetServiceConfigFactory?: DbxHelpWidgetServiceConfigFactory; } /** * Creates EnvironmentProviders for the help context system. * * @param config - Optional configuration. * @returns EnvironmentProviders. * * @__NO_SIDE_EFFECTS__ */ declare function provideDbxHelpServices(config?: ProvideDbxHelpServicesConfig): EnvironmentProviders; /** * Abstract base directive for help widget components that automatically injects the {@link DbxHelpWidgetEntryData} for the current help context. * Subclasses can access the widget entry and its associated help context key. * * @example * ```typescript * @Directive() * class MyHelpWidget extends AbstractDbxHelpWidgetDirective { * // Access this.helpWidgetData, this.helpWidgetEntry, this.helpContextKey * } * ``` */ declare abstract class AbstractDbxHelpWidgetDirective { readonly helpWidgetData: DbxHelpWidgetEntryData; readonly helpWidgetEntry: _dereekb_dbx_web.DbxHelpWidgetServiceEntry; get helpContextKey(): DbxHelpContextKey; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, {}, never, never, true, never>; } /** * Displays a list of help widget entries in a Material accordion, resolved from the given help context keys. Supports optional header and footer injection, empty state content, and multi-expand mode. * * @example * ```html * * No help topics available. * * ``` */ declare class DbxHelpViewListComponent { readonly helpWidgetService: DbxHelpWidgetService; /** * Whether the accordion should allow multiple expanded panels. */ readonly multi: _angular_core.InputSignal>; /** * Whether or not to show the empty list content. */ readonly allowEmptyListContent: _angular_core.InputSignal; /** * Optional header component config to inject before the list. * * If set null, then will not show any header. */ readonly helpListHeaderComponentConfig: _angular_core.InputSignal>>; /** * Optional header component config to inject before the list. * * If set null, then will not show any header. */ readonly helpListFooterComponentConfig: _angular_core.InputSignal>>; readonly helpContextKeys: _angular_core.InputSignal>>; readonly helpContextKeys$: Observable; readonly helpContextKeysSignal: _angular_core.Signal; readonly helpWidgetEntriesSignal: _angular_core.Signal<_dereekb_dbx_web.DbxHelpWidgetServiceEntry[]>; readonly hasNoHelpWidgetEntriesSignal: _angular_core.Signal; readonly helpListHeaderComponentConfigSignal: _angular_core.Signal>>; readonly helpListFooterComponentConfigSignal: _angular_core.Signal>>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Renders a single help widget entry as a Material expansion panel. Dynamically injects the widget component and optional header component for the given help entry. * * @example * ```html * * ``` */ declare class DbxHelpViewListEntryComponent { readonly helpWidgetEntry: _angular_core.InputSignal>; readonly helpWidgetService: DbxHelpWidgetService; readonly titleSignal: Signal; readonly iconSignal: Signal>; readonly widgetInjectionConfigSignal: Signal; readonly headerInjectionConfigSignal: Signal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Default popover key used when opening the help view popover. */ declare const DEFAULT_DBX_HELP_VIEW_POPOVER_KEY = "help"; /** * Configuration for the {@link DbxHelpViewPopoverComponent}, controlling which help contexts to show, the popover appearance, and sizing. */ interface DbxHelpViewPopoverConfig { /** * Custom icon * * Defaults to "help" */ readonly icon?: string; /** * Custom header text * * Defaults to "Help" */ readonly header?: string; /** * Custom empty text when no help contexts are available. */ readonly emptyText?: string; /** * Origin element to attach the popover to. */ readonly origin: ElementRef; /** * Specific contexts to display. If not provided, shows all active contexts from the DbxHelpContextService. */ readonly helpContextKeys?: Maybe>>; /** * Optional footer component config to inject after the list. */ readonly helpListFooterComponentConfig?: Maybe; /** * Whether the accordion should allow multiple expanded panels. */ readonly multi?: Maybe; /** * Whether to show the empty list content. * * Defaults to true. */ readonly allowEmptyListContent?: Maybe; /** * Overrides the default popover header config. * * If not provided, the default popover header config will be used from DbxHelpWidgetService. */ readonly popoverHeaderConfig?: Maybe; /** * Additional popover configuration. */ readonly popoverSizingConfig?: Maybe; } /** * {@link DbxHelpViewPopoverConfig} without the `origin` property, used when the origin element is provided separately. */ type DbxHelpViewPopoverConfigWithoutOrigin = Omit; /** * Popover that displays a scrollable list of help widget entries for the active or specified help context keys. * Opened via {@link DbxHelpViewPopoverComponent.openPopover} or through the {@link DbxHelpViewPopoverButtonComponent}. * * @example * ```typescript * DbxHelpViewPopoverComponent.openPopover(popoverService, { origin: elementRef, header: 'Help' }); * ``` */ declare class DbxHelpViewPopoverComponent extends AbstractPopoverDirective { private readonly _helpContextService; private readonly _helpWidgetService; readonly helpContextKeys$: string | string[] | rxjs.Observable>; static openPopover(popoverService: DbxPopoverService, config: DbxHelpViewPopoverConfig, popoverKey?: DbxPopoverKey): NgPopoverRef; get config(): DbxHelpViewPopoverConfig; readonly icon: string; readonly header: string; readonly multi: Maybe; readonly emptyText: string; readonly allowEmptyListContent: boolean; readonly helpListFooterComponentConfig: Maybe>; readonly popoverHeaderConfig: Maybe; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Abstract base directive for creating and managing a popover reference lifecycle, including open and close events. * * The open popover is closed when the directive is destroyed, since it is anchored to the directive's element and usually * reads from the directive's injector. This also closes a popover that stays open across route transitions when its page is left. */ declare abstract class AbstractPopoverRefDirective { private _popoverRef?; protected readonly _popoverSub: _dereekb_rxjs.SubscriptionObject; constructor(); showPopover(origin?: ElementRef): void; private _showPopoverRef; protected abstract _makePopoverRef(origin?: ElementRef): NgPopoverRef; protected _afterOpened(_popoverRef: NgPopoverRef): void; protected _afterClosed(_value: NgPopoverCloseEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, {}, never, never, true, never>; } /** * Extension of {@link AbstractPopoverRefDirective} that emits `popoverOpened` and `popoverClosed` output events. */ declare abstract class AbstractPopoverRefWithEventsDirective extends AbstractPopoverRefDirective { readonly popoverOpened: _angular_core.OutputEmitterRef>; readonly popoverClosed: _angular_core.OutputEmitterRef>; protected _afterOpened(popoverRef: NgPopoverRef): void; protected _afterClosed(event: NgPopoverCloseEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, { "popoverOpened": "popoverOpened"; "popoverClosed": "popoverClosed"; }, never, never, true, never>; } /** * Configuration for the {@link DbxHelpViewPopoverButtonComponent}, combining popover settings with button display and style options. */ interface DbxHelpViewPopoverButtonConfig extends DbxHelpViewPopoverConfigWithoutOrigin { /** * The display configuration for the button. */ readonly buttonDisplay?: Maybe; /** * The style configuration for the button. */ readonly buttonStyle?: Maybe; } /** * Button that opens a help popover displaying the currently active help context topics. Defaults to a "help_center" icon button. * * @example * ```html * * ``` */ declare class DbxHelpViewPopoverButtonComponent extends AbstractPopoverRefDirective { private readonly _dbxPopoverService; readonly buttonElement: _angular_core.Signal>; readonly config: _angular_core.InputSignal>; readonly buttonDisplaySignal: _angular_core.Signal; readonly buttonStyleSignal: _angular_core.Signal>; protected _makePopoverRef(origin?: Maybe): NgPopoverRef; showHelpPopover(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Describes whether an image file went through client-side compression. * * - `unchanged` — the original file is returned as-is. * - `resized` — the image was downscaled but its MIME type was preserved. * - `converted` — the image's MIME type was converted (e.g. PNG → JPEG) without resizing. * - `resized_and_converted` — the image was both downscaled and converted. */ type ImageCompressionStatus = 'unchanged' | 'resized' | 'converted' | 'resized_and_converted'; /** * Configures client-side image compression for an image `File`. */ interface DbxImageCompressionConfig { /** * Maximum allowed value for the larger image dimension in pixels. Images larger than this are scaled down so neither width nor height exceeds the limit, preserving aspect ratio. `null`/undefined disables resizing. */ readonly maxDimension?: Maybe; /** * Convert PNG inputs to JPEG. Defaults to `false`. JPEGs that need resizing are always re-encoded as JPEG. */ readonly convertPngToJpeg?: Maybe; /** * JPEG encode quality in [0,1]. Defaults to `0.85`. Used for PNG→JPEG conversion and for resized JPEG re-encoding. */ readonly jpegQuality?: Maybe; /** * Skip compression when the file is already smaller than this many bytes. `null`/undefined applies no minimum. */ readonly minSizeBytes?: Maybe; } /** * Default JPEG quality used when re-encoding images during compression. */ declare const DEFAULT_IMAGE_JPEG_QUALITY = 0.85; /** * Pixel dimensions captured from a decoded image. */ interface CompressImageDimensions { readonly width: number; readonly height: number; } /** * Result of {@link compressImageFile}. Holds the (possibly unchanged) file alongside a status describing what happened. */ interface CompressImageFileResult { /** * Final file. When `compression === 'unchanged'`, this is the same `File` reference passed in. */ readonly file: File; /** * Final MIME type. May differ from the input file's type when conversion occurred. */ readonly mimeType: MimeTypeWithoutParameters; /** * What happened to the file. `'unchanged'` when no compression was applied. */ readonly compression: ImageCompressionStatus; /** * Dimensions of the source image, captured during decoding. Only set when the source was decoded (i.e. compression actually ran). */ readonly originalDimensions?: Maybe; /** * Dimensions of the final image. When the source was decoded but the original file was kept (e.g. recompression grew the file), this equals {@link originalDimensions}. Only set when the source was decoded. */ readonly finalDimensions?: Maybe; } /** * Inputs supplied to an {@link ImageBitmapToBlobEncoder} when {@link compressImageFile} needs to emit a compressed image. */ interface ImageBitmapToBlobEncoderInput { readonly bitmap: ImageBitmap; readonly targetWidth: number; readonly targetHeight: number; readonly mimeType: MimeTypeWithoutParameters; readonly quality: number; } /** * Strategy responsible for turning an {@link ImageBitmap} into a `Blob` of the requested MIME type and quality. The default implementation uses {@link OffscreenCanvas} (or a `HTMLCanvasElement` fallback) — tests can pass a stub to avoid touching real canvas APIs. */ type ImageBitmapToBlobEncoder = (input: ImageBitmapToBlobEncoderInput) => Promise>; /** * Default {@link ImageBitmapToBlobEncoder} that draws the bitmap onto an {@link OffscreenCanvas} (or `HTMLCanvasElement` fallback) and encodes to a blob via `convertToBlob` / `toBlob`. * * @param input - Bitmap and target dimensions to encode. * @returns A blob with the encoded image, or `null` if encoding failed. */ declare const DEFAULT_IMAGE_BITMAP_TO_BLOB_ENCODER: ImageBitmapToBlobEncoder; /** * Compresses an image `File` according to the supplied {@link DbxImageCompressionConfig}. * * Behavior: * - When the file is not a PNG/JPEG, or the config disables every compression path, returns the file unchanged. * - When the file fits inside `maxDimension` and no PNG→JPEG conversion is required, returns the file unchanged. * - Otherwise decodes via `createImageBitmap`, draws onto an {@link OffscreenCanvas} (or HTMLCanvasElement fallback), encodes the result using {@link DEFAULT_IMAGE_JPEG_QUALITY} or the configured `jpegQuality`, and wraps the blob into a new `File` with rewritten extension. * - Safety: if the encoded output is larger than the original, returns the original (compression is reported as `'unchanged'`). * * @param file - Source image file. * @param config - Compression configuration. * @param encoder - Optional injectable encoder used by tests to bypass real canvas APIs. Defaults to {@link DEFAULT_IMAGE_BITMAP_TO_BLOB_ENCODER}. * @returns Result describing the final file plus the {@link ImageCompressionStatus} for it. */ declare function compressImageFile(file: File, config: Maybe, encoder?: ImageBitmapToBlobEncoder): Promise; /** * String used as input for the "accept" attribute of a file input element. */ type FileAcceptString = string; /** * Returns a string that can be used as the "accept" attribute of a file input element. * * @param accept - A file accept string or array of filter type strings to convert. * @returns A comma-separated string suitable for the HTML accept attribute. */ declare function fileAcceptString(accept: FileAcceptString | FileAcceptFilterTypeStringArray): FileAcceptString; /** * Describes a type of file that can be selected. * * Can either be a mime type or a file suffix. */ type FileAcceptFilterTypeString = MimeTypeWildcard | MimeTypeWithoutParameters | MimeTypeWithSubtypeWildcardWithoutParameters | SlashPathTypedFileSuffix; /** * The file accept filter type strings. */ type FileAcceptFilterTypeStringArray = FileAcceptFilterTypeString[]; /** * Converts a comma-separated accept string or array into a {@link FileAcceptFilterTypeStringArray}. * * @param accept - A file accept string or array of filter type strings to normalize. * @returns The individual filter type strings. * * @example * ```ts * const types = fileAcceptFilterTypeStringArray('image/png, .pdf'); * // ['image/png', '.pdf'] * ``` */ declare function fileAcceptFilterTypeStringArray(accept: FileAcceptString | FileAcceptFilterTypeStringArray): FileAcceptFilterTypeStringArray; /** * Configuration for matching an array of files against accept criteria with optional multiple file support. */ interface FileArrayAcceptMatchConfig extends FileArrayAcceptMaxFilesInput { readonly accept: FileAcceptFunction | FileAcceptString | FileAcceptFilterTypeStringArray; } /** * The two values that together decide how many files a selection may accept. */ interface FileArrayAcceptMaxFilesInput { /** * If false, then only the first file will be accepted. * * Defaults to true. */ readonly multiple?: Maybe; /** * The most files that may be accepted at once. * * Files past the limit are REJECTED rather than the whole selection being refused, so a user who picks * more than the limit still gets the first ones instead of nothing at all. * * A limit of 0 accepts nothing — which is how a destination that is already full says so. Ignored while * multiple is false, as that is already a limit of one. */ readonly maxFiles?: Maybe; } /** * Returns how many files a selection may accept, or undefined when there is no limit. * * @param input - The multiple/maxFiles pair to resolve. * @returns The effective limit, or undefined when unlimited. * * @example * ```ts * fileArrayAcceptMaxFiles({ multiple: false }); // 1 * fileArrayAcceptMaxFiles({ multiple: true, maxFiles: 3 }); // 3 * fileArrayAcceptMaxFiles({ multiple: true }); // undefined * ``` * * @__NO_SIDE_EFFECTS__ */ declare function fileArrayAcceptMaxFiles(input: FileArrayAcceptMaxFilesInput): Maybe; /** * Result of matching files against accept criteria, categorizing them into accepted and rejected lists. */ interface FileArrayAcceptMatchResult { /** * If multiple is allowed or not. */ readonly multiple: boolean; /** * The limit that was applied, or undefined when the selection was unlimited. */ readonly maxFiles?: Maybe; /** * 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[]; } /** * Matches an array of files based on the internal configuration. */ type FileArrayAcceptMatchFunction = (input: File[]) => FileArrayAcceptMatchResult; /** * Creates a {@link FileArrayAcceptMatchFunction} that filters and separates files based on accept criteria and multiple file support. * * @param config - Configuration specifying the accept criteria and whether multiple files are allowed. * @returns Accepts an array of files and returns the categorized match result. * * @example * ```ts * const matchFn = fileArrayAcceptMatchFunction({ accept: 'image/*', multiple: false }); * const result = matchFn(fileList); * console.log(result.accepted, result.rejected); * ``` * * @__NO_SIDE_EFFECTS__ */ declare function fileArrayAcceptMatchFunction(config: FileArrayAcceptMatchConfig): FileArrayAcceptMatchFunction; /** * Type of input used for a FileAcceptFunction. * * Isolates the name and type fields from a File. */ type FileAcceptFunctionInput = Pick; /** * Used to determine if a file is an accepted type based on the internal configuration. */ type FileAcceptFunction = DecisionFunction; /** * Creates a {@link FileAcceptFunction} that checks individual files against accept criteria (MIME types, wildcards, or file extensions). * * @param accept - A file accept string or array specifying which MIME types, wildcards, or file extensions to allow. * @returns A decision function that returns true if a file matches any of the accept criteria. * * @example * ```ts * const isAccepted = fileAcceptFunction(['image/*', '.pdf']); * isAccepted({ name: 'photo.png', type: 'image/png' }); // true * isAccepted({ name: 'doc.txt', type: 'text/plain' }); // false * ``` * * @__NO_SIDE_EFFECTS__ */ declare function fileAcceptFunction(accept: FileAcceptString | FileAcceptFilterTypeStringArray): FileAcceptFunction; /** * Identifies which kind of source file a {@link PdfMergeEntry} represents. * * - `pdf` — an existing PDF document whose pages are copied into the merged output. * - `image` — a raster image (PNG/JPEG) embedded as a single page in the merged output. */ type PdfMergeEntryKind = 'pdf' | 'image'; /** * Captured pre-compression metadata for a {@link PdfMergeEntry}. When no compression ran, the values match the post-compression entry fields. */ interface PdfMergeEntryOriginal { readonly name: string; readonly mimeType: MimeTypeWithoutParameters; readonly size: FileSize; /** * Pixel dimensions of the source image. Only set for images that were decoded during compression. */ readonly dimensions?: Maybe<{ readonly width: number; readonly height: number; }>; } /** * Lifecycle status of a {@link PdfMergeEntry} as it is added, validated, and (potentially) merged. * * - `validating` — the entry has been added but its bytes have not yet been verified. * - `ready` — validation succeeded; the entry can participate in a merge. * - `error` — validation failed (corrupt, unsupported, password protected, etc.). */ type PdfMergeEntryStatus = 'validating' | 'ready' | 'error'; /** * Validation result for a single {@link PdfMergeEntry}. */ interface PdfMergeEntryValidationResult { readonly ok: boolean; readonly errorMessage?: Maybe; /** * Whether the file appears to be encrypted (contains a `/Encrypt` dictionary). Reported as a fact independent of `ok` so consumers can decide whether to focus on, ignore, or reject the entry. Validation does not fail an entry purely because it is encrypted. */ readonly encrypted?: Maybe; } /** * Strategy for how the editor reacts when an encrypted PDF is added. * * - `focus` (default) — the encrypted entry stays `ready` and all non-encrypted entries are hidden from the merge (greyed out in the list). The merge output is the encrypted file's bytes passed through unchanged so downstream upload flows still receive a usable blob. This holds with page editing enabled: an encrypted document cannot be opened, so it lists no editable pages and the empty page plan does not gate the output (see `pdfMergeEntriesUseEncryptedPassthrough`). Every {@link DbxPdfMergeEditorFileUploadComponent} slot other than the one holding the encrypted file withdraws its add affordances and waives its `required` check, since nothing put there could reach the output. * - `error` — encrypted entries are marked as `error` with a "Password-protected PDFs cannot be merged." message. Preserves the legacy hard-reject behavior. * - `allow` — encrypted entries stay `ready` and participate in the merge alongside other entries. The client-side `pdf-lib` merge will fail; useful only for consumers that bypass `mergeOutput$` and upload raw entries themselves. */ type DbxPdfMergeEncryptedHandling = 'focus' | 'error' | 'allow'; /** * Default {@link DbxPdfMergeEncryptedHandling} when no consumer or token overrides it. */ declare const DEFAULT_DBX_PDF_MERGE_ENCRYPTED_HANDLING: DbxPdfMergeEncryptedHandling; /** * Error message used when an encrypted entry is projected to the `error` status under {@link DbxPdfMergeEncryptedHandling} `'error'` mode. */ declare const DBX_PDF_MERGE_ENCRYPTED_ERROR_MESSAGE = "Password-protected PDFs cannot be merged."; /** * Default value for {@link DbxPdfMergeEditorConfig.pageEditing}. Off, so the editor's default behavior is unchanged. */ declare const DEFAULT_DBX_PDF_MERGE_PAGE_EDITING = false; /** * Default value for {@link DbxPdfMergeEditorConfig.sidecar}. Off, so merged output bytes are unchanged. */ declare const DEFAULT_DBX_PDF_MERGE_SIDECAR = false; /** * Default value for {@link DbxPdfMergeEditorConfig.restoreImportOnClear}. On, so an editor the app populated programmatically is reset to that document by Clear rather than left empty. */ declare const DEFAULT_DBX_PDF_MERGE_RESTORE_IMPORT_ON_CLEAR = true; /** * Message shown on an encrypted entry's row while page editing is enabled. Encrypted documents cannot be opened by `pdf-lib`, so their pages cannot be listed or edited — the entry stays a single opaque row, and the merge emits the file unchanged. */ declare const DBX_PDF_MERGE_ENCRYPTED_NOT_EDITABLE_MESSAGE = "This file cannot be edited; it will be used as-is."; /** * Message shown on a row the active {@link DbxPdfMergeEncryptedHandling} is ignoring, i.e. a non-focused entry under `focus` mode. Kept in the list (rather than dropped) so a file the user added never disappears without an explanation. */ declare const DBX_PDF_MERGE_IGNORED_ENTRY_MESSAGE = "Ignored since an encrypted file is used instead."; /** * Message shown on a {@link DbxPdfMergeEditorFileUploadComponent} slot whose section cannot contribute to the document because an encrypted PDF elsewhere in the editor is being used as the whole output under `focus` handling. */ declare const DBX_PDF_MERGE_SUPERSEDED_SLOT_MESSAGE = "An encrypted PDF is being used as the whole document."; /** * MIME types accepted by the PDF merge editor by default: PDF documents and PNG/JPEG images. */ declare const DEFAULT_PDF_MERGE_ACCEPT: readonly MimeTypeWithoutParameters[]; /** * MIME type emitted by the merged result blob. */ declare const PDF_MERGE_RESULT_MIME_TYPE: MimeTypeWithoutParameters; /** * A single source file that has been added to the PDF merge editor. */ interface PdfMergeEntry extends Pick { /** * Stable identifier for this entry, generated when the entry is created. */ readonly id: string; /** * Original file selected by the user. Retained for both validation and merging. */ readonly file: File; /** * Display name (the file's `name`). */ readonly name: string; /** * Resolved MIME type. Falls back to extension-based inference when the file did not provide one. */ readonly mimeType: MimeTypeWithoutParameters; /** * File size in bytes. */ readonly size: FileSize; /** * Whether the entry contributes pages from a PDF or from an image. */ readonly kind: PdfMergeEntryKind; /** * Current validation/merge readiness status. */ readonly status: PdfMergeEntryStatus; /** * The validation promise. */ readonly validation: Promise; /** * Optional slot identifier. Set when the entry was added through a {@link DbxPdfMergeEditorFileUploadComponent} slot, used by the store to filter entries per slot and clean them up when the slot component is destroyed. Entries added through the editor's default upload area have no slot id. */ readonly slotId?: Maybe; /** * Metadata captured from the user-supplied file before any client-side compression. When no compression ran, the values match {@link PdfMergeEntry.name}, {@link PdfMergeEntry.mimeType}, {@link PdfMergeEntry.size}. */ readonly original: PdfMergeEntryOriginal; /** * Result of the client-side compression step on upload. `'unchanged'` when no compression ran. */ readonly compression: ImageCompressionStatus; /** * Whether the entry's source file appears to be encrypted (contains a `/Encrypt` dictionary). Set during validation; defaults to `false`. The store decides how to react via {@link DbxPdfMergeEncryptedHandling}. */ readonly encrypted: boolean; } /** * Read-only view of a {@link PdfMergeEntry} enriched with the `ignored` flag derived by the store from the active {@link DbxPdfMergeEncryptedHandling}. When `ignored` is `true`, the entry is still present in the list but is excluded from the merge output and rendered in a greyed-out state. */ interface PdfMergeEntryView extends PdfMergeEntry { /** * Whether the editor is currently ignoring this entry for merge purposes. Only `true` under `focus` mode when at least one encrypted entry exists and this entry is not itself the encrypted focus target. */ readonly ignored: boolean; } /** * Rotation the user has applied to a page, in degrees clockwise. */ type PdfMergePageRotation = 0 | 90 | 180 | 270; /** * Group key used for pages whose source entry has no slot id. */ declare const DEFAULT_PDF_MERGE_PAGE_GROUP_KEY = "_"; /** * Returns the group key a page reorders within — its entry's slot id, or {@link DEFAULT_PDF_MERGE_PAGE_GROUP_KEY} when the entry is unslotted. * * @param slotId - Slot id of the owning entry, if any. * @returns The group key. * @__NO_SIDE_EFFECTS__ */ declare function pdfMergePageGroupKeyForSlotId(slotId: Maybe): string; /** * Separator between the entry id and the page index inside a page id. */ declare const PDF_MERGE_PAGE_ID_SEPARATOR = ":"; /** * Builds the stable identifier for a page within the editor. * * @param entryId - Id of the owning {@link PdfMergeEntry}. * @param sourceIndex - Zero-based page index within that entry's source document. * @returns The page id. * @__NO_SIDE_EFFECTS__ */ declare function makePdfMergePageId(entryId: string, sourceIndex: number): string; /** * Returns the id of the entry a page id belongs to. Used to prune page state when an entry leaves the list. * * @param pageId - Page id produced by {@link makePdfMergePageId}. * @returns The owning entry's id. * @__NO_SIDE_EFFECTS__ */ declare function entryIdForPdfMergePageId(pageId: string): string; /** * Per-page metadata captured when a {@link PdfMergeEntry} is expanded for page editing. Read once per entry by the store's hydration pass and cached for as long as the entry stays in the list. */ interface PdfMergePageMeta { /** * Zero-based index of this page within its source document. */ readonly sourceIndex: number; /** * Page width in PDF points. */ readonly width: number; /** * Page height in PDF points. */ readonly height: number; /** * Rotation already baked into the source page, in degrees. User rotation composes on top of this at merge time rather than replacing it, so rotating an already-sideways scan behaves as the user expects. */ readonly sourceRotation: number; } /** * A user's edits to a single page, held sparsely in {@link PdfMergeEditorState.pageOverrides}. Only pages the user has actually touched appear, so adding or removing an entry needs no page bookkeeping. */ interface PdfMergePageOverride { readonly rotation: PdfMergePageRotation; readonly removed: boolean; } /** * A single page in the editor's page plan, derived by the store from the current entries plus any {@link PdfMergePageOverride}. Only produced while page editing is enabled. */ interface PdfMergePageView { /** * Stable identifier — see {@link makePdfMergePageId}. */ readonly id: string; /** * Id of the {@link PdfMergeEntry} this page came from. */ readonly entryId: string; /** * Slot that owns the source entry, or `null` when unslotted. */ readonly slotId: Maybe; /** * Key of the group this page reorders within — see {@link pdfMergePageGroupKeyForSlotId}. */ readonly groupKey: string; /** * Name of the source file the page came from. */ readonly sourceName: string; /** * Whether the page came from a PDF or from an embedded image. Also determines how {@link PdfMergePageMeta} dimensions should be read — PDF pages are measured in points, image pages in pixels. */ readonly kind: PdfMergeEntryKind; /** * Zero-based index of this page within its source document. */ readonly sourceIndex: number; /** * Total page count of the source document. Drives the "page 2 of 3" label. */ readonly sourcePageCount: number; /** * Metadata read from the source page. */ readonly meta: PdfMergePageMeta; /** * User-applied rotation, composed with {@link PdfMergePageMeta.sourceRotation} at merge time. */ readonly rotation: PdfMergePageRotation; /** * Whether the user marked this page for deletion. Marked pages stay visible in the list (struck through, restorable) but are excluded from the merge output. */ readonly removed: boolean; } /** * A set of pages that reorder together — every page contributed by one slot's entries, or every unslotted page. Pages never move between groups: the page list renders one CDK drop list per group, and unconnected drop lists cannot accept each other's drags, so the rule is enforced by construction rather than by a guard. */ interface PdfMergePageGroup { readonly groupKey: string; /** * Slot the group belongs to, or `null` for the unslotted group. */ readonly slotId: Maybe; readonly pages: readonly PdfMergePageView[]; } /** * Validation delegate registered on the {@link DbxPdfMergeEditorStore}. Receives the live {@link PdfMergeEntry} stream and returns a stream of `boolean` values controlling whether the store may emit a merge result. Emitting `false` causes {@link DbxPdfMergeEditorStore.currentMergeOutput$} to emit `undefined` and prevents {@link DbxPdfMergeEditorStore.mergeOutput$} from emitting. */ type DbxPdfMergeEditorValidator = (entries$: Observable) => Observable; /** * Minimal interface that a slot upload component exposes to {@link DbxPdfMergeEditorFileUploadValidatorDirective}. Implemented by {@link DbxPdfMergeEditorFileUploadComponent}. */ interface DbxPdfMergeEditorFileUploadValidatorSlot { /** * Identifies the slot. Used by the validator directive only for diagnostics — the directive aggregates by reference, not by id. */ readonly slotId: () => string; /** * Stream that emits `true` while this slot is satisfied (per its own config and the validator's required/optional rules) and `false` otherwise. */ readonly isValid$: Observable; } /** * State managed by the PDF merge editor's component store. */ interface PdfMergeEditorState { /** * Ordered list of entries the user has added. Order determines page order in the merged output. */ readonly rawEntries: PdfMergeEntry[]; /** * Sparse per-page edit overrides keyed by {@link PdfMergePageView.id}. Only pages the user has touched appear here. Overrides for pages that no longer resolve are ignored by the derived page stream and pruned when their owning entry leaves the list. Stays empty while page editing is disabled. */ readonly pageOverrides: Record; /** * Explicit page ordering per group key, holding {@link PdfMergePageView.id} values. A group absent from this record uses natural order. Ids that no longer resolve are ignored, and pages missing from a stored list are appended in natural order — so the ordering self-heals as entries come and go. Stays empty while page editing is disabled. */ readonly pageOrder: Record; } /** * Index movement payload used by the editor's reorder updater. */ interface PdfMergeEntryMove { readonly previousIndex: number; readonly currentIndex: number; } /** * Index movement payload used by the editor's page reorder updater. Indices are group-local — the positions the group's CDK drop list sees, not positions in the overall page plan. */ interface PdfMergePageMove { readonly groupKey: string; /** * The group's page ids in the order they were rendered when the drag started. * * Supplied by the caller rather than recomputed by the store: the plan is derived state, so the store cannot see the exact order the user was looking at. Rewriting the array the component rendered keeps the stored order and the visible order in step. */ readonly pageIds: readonly string[]; readonly previousIndex: number; readonly currentIndex: number; } /** * Payload for setting a page's rotation. */ interface PdfMergePageRotationChange { readonly pageId: string; readonly rotation: PdfMergePageRotation; } /** * Payload for marking a page as removed or restoring it. */ interface PdfMergePageRemovedChange { readonly pageId: string; readonly removed: boolean; } /** * Output size limits enforced by {@link DbxPdfMergeEditorComponent} on its merged blob. */ interface DbxPdfMergeOutputSizeLimitsConfig { /** * Soft cap in bytes. Above this the editor surfaces a warning banner but Preview/Download stay enabled. */ readonly warnBytes?: Maybe; /** * Hard cap in bytes. Above this the editor blocks Preview/Download via the store's validity pipeline. */ readonly errorBytes?: Maybe; } /** * Top-level configuration object accepted by {@link DbxPdfMergeEditorComponent} (via input) and by {@link DBX_PDF_MERGE_EDITOR_CONFIG} (via dependency injection). */ interface DbxPdfMergeEditorConfig { /** * Image compression to run on uploads. When omitted, files enter the entry list unchanged. */ readonly imageCompression?: Maybe; /** * Soft/hard output-size limits surfaced via warning/error banners and (for `errorBytes`) the store's validity gate. */ readonly outputSizeLimits?: Maybe; /** * Accept filter for the editor's default "Add files" upload area. Defaults to {@link DEFAULT_PDF_MERGE_ACCEPT}. */ readonly accept?: Maybe; /** * Whether the default upload area accepts multiple files. Defaults to `true`. */ readonly multiple?: Maybe; /** * File name used for the merged output (download + preview). Defaults to `merged.pdf`. */ readonly fileName?: Maybe; /** * Whether to show the embedded download button. Defaults to `false`. */ readonly showDownloadButton?: Maybe; /** * Whether to show the Preview button. Defaults to `true`. */ readonly showPreviewButton?: Maybe; /** * Display/style pair for the embedded download button. */ readonly downloadButton?: Maybe; /** * When `false`, hides the default "Add files" upload area. Use when projecting {@link DbxPdfMergeEditorFileUploadComponent} slots through `` instead of the unscoped uploader. Defaults to `true`. */ readonly showAddFiles?: Maybe; /** * When `false`, hides the shared file list below the slot content. Useful when each slot displays its owned files inline. Defaults to `true`. */ readonly showFileList?: Maybe; /** * Strategy for how encrypted PDFs are handled — see {@link DbxPdfMergeEncryptedHandling}. Defaults to {@link DEFAULT_DBX_PDF_MERGE_ENCRYPTED_HANDLING} (`'focus'`). */ readonly encryptedHandling?: Maybe; /** * Enables page editing mode. When `true`, the editor's list shows the individual pages of each uploaded PDF instead of one row per file, letting the user reorder, rotate, and mark pages for deletion with the merged output updating live. * * Pages reorder only within their own slot — a slot is one logical document, so letting a page cross slots would silently move content between documents. * * Defaults to {@link DEFAULT_DBX_PDF_MERGE_PAGE_EDITING} (`false`), in which case the editor behaves exactly as it does without this option: the page list is never instantiated and no source document is parsed. */ readonly pageEditing?: Maybe; /** * Embeds a sidecar manifest and per-page tags into the merged output, recording which pages came from which slot so downstream code can target them later via `readPdfMergeSidecar`. Independent of {@link pageEditing} — a plain slot merge benefits from the record too. * * Defaults to {@link DEFAULT_DBX_PDF_MERGE_SIDECAR} (`false`), in which case the output bytes are unchanged. */ readonly sidecar?: Maybe; /** * Overrides merged over the default confirmation shown before the editor's footer Clear button empties every entry. Set `autoConfirm: true` to clear without prompting, restoring the pre-confirmation behavior. */ readonly clearConfirm?: Maybe; /** * Whether the footer Clear button resets a programmatically-supplied document to that document rather than discarding it. Defaults to `true`. * * See {@link DbxPdfMergeEditorStore.clearEntries} — the point is that an app that populated the editor via `importMergedPdf` (or `[source]`) never ends up looking at an empty editor it did not ask for. Set `false` for an editor whose Clear should empty everything, baseline included. */ readonly restoreImportOnClear?: Maybe; } /** * Injection token for a workspace-wide default {@link DbxPdfMergeEditorConfig}. Use {@link provideDbxPdfMergeEditorConfig} to register a value. */ declare const DBX_PDF_MERGE_EDITOR_CONFIG: InjectionToken; /** * Helper that returns a {@link Provider} binding {@link DBX_PDF_MERGE_EDITOR_CONFIG} to the given config value. * * @param config - Configuration to register. * @returns Provider entry suitable for inclusion in `providers`. */ declare function provideDbxPdfMergeEditorConfig(config: DbxPdfMergeEditorConfig): Provider; /** * Injection token that, when bound to `true`, makes `` slots skip their default `ngOnDestroy` cleanup (which removes the slot's entries from the shared store). Use when slots are hosted inside an ephemeral container — for example, the PDF merge upload dialog — and the store outlives that container, so the user's selection should survive when the container is torn down. Defaults to `false` (slot destroy removes its entries) which keeps the in-page editor's behavior for the common case where adding/removing a slot via `@if` should drop its entries with it. */ declare const DBX_PDF_MERGE_EDITOR_PRESERVE_ENTRIES_ON_SLOT_DESTROY: InjectionToken; /** * Helper that returns a {@link Provider} binding {@link DBX_PDF_MERGE_EDITOR_PRESERVE_ENTRIES_ON_SLOT_DESTROY}. * * @param preserve - When `true`, descendant `` slots skip the destroy-time entry removal. Defaults to `true` because that is the value callers typically want when they bother to reach for the helper. * @returns Provider entry suitable for inclusion in `providers`. */ declare function provideDbxPdfMergeEditorPreserveEntriesOnSlotDestroy(preserve?: boolean): Provider; /** * Name of the JSON manifest attached to a merged PDF that records which pages came from which slot. */ declare const PDF_MERGE_SIDECAR_FILE_NAME = "dbx-pdf-merge.json"; /** * Key set on each output page's dictionary holding that page's {@link PdfMergeSidecarPage.tag}. * * Custom page-dictionary keys travel with the page: they survive `copyPages` (including subsetting and reordering), a save/load round trip, and further edits. That is what makes tags — rather than the manifest's recorded indices — the authoritative record of which document a page belongs to. */ declare const PDF_MERGE_PAGE_TAG_KEY = "DbxPageTag"; /** * Schema version of the emitted {@link PdfMergeSidecar}. */ declare const PDF_MERGE_SIDECAR_VERSION = 1; /** * Description recorded on the attached manifest. */ declare const PDF_MERGE_SIDECAR_DESCRIPTION = "dbx-pdf-merge page manifest"; /** * Record of a single page in the merged output. */ interface PdfMergeSidecarPage { /** * Identifier written onto the page's own dictionary. Unique within the output document. */ readonly tag: string; /** * Slot the page's source file was uploaded into, or `null` when unslotted. */ readonly slotId: Maybe; /** * Name of the source file the page came from. */ readonly sourceName: string; /** * Zero-based index of the page within its source document. */ readonly sourceIndex: number; /** * Total rotation applied to the page in the output, in degrees. */ readonly rotation: number; /** * Position of the page in the output at the time the manifest was written. * * A hint only. Anything that reorders the document afterwards leaves this stale, so {@link readPdfMergeSidecar} resolves positions from page tags and falls back to this value only when a tag is missing. */ readonly outputIndex: number; } /** * One logical document within the merged output — in practice, one editor slot. */ interface PdfMergeSidecarDocument { /** * Slot id, or `null` for the unslotted group. */ readonly slotId: Maybe; /** * Tags of the pages belonging to this document, in output order at write time. This membership list is authoritative and survives reordering; resolve each tag to a current page index rather than trusting positions. */ readonly pageTags: readonly string[]; } /** * Manifest embedded in a merged PDF describing which pages came from which document. */ interface PdfMergeSidecar { readonly version: number; readonly createdAt: ISO8601DateString; readonly documents: readonly PdfMergeSidecarDocument[]; readonly pages: readonly PdfMergeSidecarPage[]; } /** * A manifest page resolved against the document actually being read. */ interface PdfMergeSidecarResolvedPage extends PdfMergeSidecarPage { /** * Current zero-based index of the page in the document being read. */ readonly pageIndex: number; /** * Whether {@link pageIndex} came from the page's own tag (`true`) or fell back to the manifest's recorded {@link PdfMergeSidecarPage.outputIndex} because the tag was missing (`false`). A `false` here means something stripped the page tags — treat the position as best-effort. */ readonly resolvedByTag: boolean; } /** * A manifest document resolved against the document actually being read. */ interface PdfMergeSidecarResolvedDocument { readonly slotId: Maybe; readonly pages: readonly PdfMergeSidecarResolvedPage[]; } /** * Result of reading a merged PDF's embedded manifest. */ interface PdfMergeSidecarReadResult { /** * The manifest exactly as it was embedded. */ readonly sidecar: PdfMergeSidecar; /** * Documents with each page resolved to its current index in the file that was read. */ readonly documents: readonly PdfMergeSidecarResolvedDocument[]; /** * Tags listed in the manifest that could not be resolved to any page — the page was removed after the manifest was written, or its tag was stripped and no fallback index was usable. */ readonly missingTags: readonly string[]; /** * Number of pages in the document that carry no tag. Non-zero means pages were added outside the merge editor, or a third-party tool dropped the tags. */ readonly untaggedPageCount: number; } /** * Builds the tag written onto an output page. * * @param slotId - Slot the page's source entry belongs to, or `null` when unslotted. * @param ordinal - Zero-based position of the page within its own slot's pages. * @returns A tag unique within the output document. * @__NO_SIDE_EFFECTS__ */ declare function makePdfMergeSidecarPageTag(slotId: Maybe, ordinal: number): string; /** * Writes a page's tag onto its page dictionary so the association survives later reordering. * * @param page - Page in the output document. * @param tag - Tag to record. */ declare function writePdfMergePageTag(page: PDFPage, tag: string): void; /** * Reads the tag previously written onto a page, if any. * * Uses `get` plus an instance check rather than a typed `lookup`, because `PDFDict.lookup(key, PDFString)` throws when the key is absent — which is the normal case for any PDF that did not come out of this editor. * * @param page - Page to inspect. * @returns The tag, or `null` when the page carries none. */ declare function readPdfMergePageTag(page: PDFPage): Maybe; /** * Attaches a manifest to the output document as an embedded JSON file. * * @param document - Output document being saved. * @param sidecar - Manifest to embed. */ declare function attachPdfMergeSidecar(document: PDFDocument, sidecar: PdfMergeSidecar): Promise; /** * Builds a {@link PdfMergeSidecar} from the pages written to an output document. * * @param pages - Page records in output order. * @returns The manifest, with one document per distinct slot in first-appearance order. * @__NO_SIDE_EFFECTS__ */ declare function makePdfMergeSidecar(pages: readonly PdfMergeSidecarPage[]): PdfMergeSidecar; /** * Source bytes accepted by {@link readPdfMergeSidecar}. */ type PdfMergeSidecarReadInput = Blob | ArrayBuffer | Uint8Array; /** * Reads the manifest embedded in a merged PDF and resolves each recorded page to its current position in that file. * * Resolution prefers each page's own tag, which follows the page through reordering. The manifest's {@link PdfMergeSidecarPage.outputIndex} is used only as a fallback for pages whose tag has been stripped, and any index that no longer exists is reported through {@link PdfMergeSidecarReadResult.missingTags} instead. * * @param input - The merged PDF's bytes. * @returns The manifest and its resolved documents, or `null` when the file carries no manifest, is unreadable, or is encrypted. */ declare function readPdfMergeSidecar(input: PdfMergeSidecarReadInput): Promise>; /** * One logical document reconstructed out of a merged PDF as a standalone file. */ interface PdfMergeSidecarDocumentFile { /** * Slot the document belongs to, or `null` for the unslotted group. */ readonly slotId: Maybe; /** * The document's pages extracted into their own PDF, in manifest order. Named after the source file recorded in the manifest so the original file name is restored. */ readonly file: File; readonly pageCount: number; } /** * Result of splitting a merged PDF back into its constituent documents. */ interface SplitPdfMergeSidecarResult { readonly sidecar: PdfMergeSidecar; readonly documents: readonly PdfMergeSidecarDocumentFile[]; readonly missingTags: readonly string[]; readonly untaggedPageCount: number; } /** * Splits a previously-merged PDF back into one file per document, using the embedded manifest to decide which pages belong to which slot. * * This is the inverse of a merge with `sidecar: true`, and is what lets a completed document be re-imported into the editor with its slots repopulated instead of arriving as one opaque file. Page order and any rotation baked in at merge time are preserved, and each document's pages are resolved by tag so a document that was reordered after export still splits correctly. * * @param input - Bytes of a merged PDF. * @returns One file per document plus the manifest, or `null` when the input carries no manifest, is unreadable, or is encrypted. */ declare function splitPdfMergeSidecarDocuments(input: PdfMergeSidecarReadInput): Promise>; /** * Formats a byte count as a short human-readable string (`B` / `KB` / `MB`). Used by the merge editor banner and entry rows. * * @param size - Byte count to format. * @returns Human-readable string. * @__NO_SIDE_EFFECTS__ */ declare function formatPdfMergeEntrySize(size: FileSize): string; /** * Normalizes a {@link Blob} into a {@link File} so it can become a {@link PdfMergeEntry}, which needs a name to display. * * A {@link File} passes through untouched unless an explicit `fileName` overrides it. A bare {@link Blob} is named from `fileName`, else from its MIME type (`document.pdf` / `image.png` / `image.jpg`), else `document.pdf` — the name only has to be plausible and correctly suffixed, since {@link classifyPdfMergeFile} falls back to the extension when a blob carries no type. * * @param input - Blob or File to normalize. * @param fileName - Optional name, overriding a File's own name and naming a bare Blob. * @returns A File carrying the resolved name. */ declare function asPdfMergeFile(input: Blob | File, fileName?: Maybe): File; /** * Returns the {@link PdfMergeEntryKind} for a file based on its MIME type, with a small fallback to file-extension matching when the browser provided no MIME type. * * @param file - File picked from the upload component. * @returns The classified kind, or `null` if the file is not a supported PDF/PNG/JPEG. */ declare function classifyPdfMergeFile(file: File): Maybe; /** * Optional input for {@link buildPdfMergeEntry} / {@link buildPdfMergeEntrySync}. */ interface BuildPdfMergeEntryConfig { /** * Optional slot identifier to attach to the entry. Used by the store to attribute the entry to a {@link DbxPdfMergeEditorFileUploadComponent} slot. */ readonly slotId?: Maybe; /** * Optional id factory override (used by tests for deterministic ids). */ readonly idFactory?: ModelIdFactory; /** * Optional client-side image compression config to apply to image files before the entry is constructed. Ignored for PDFs. */ readonly imageCompression?: Maybe; } /** * Builds a {@link PdfMergeEntry} synchronously from a user-provided file, classifying its kind and assigning a fresh id. Skips image compression — callers that need it must use the async {@link buildPdfMergeEntry}. Returns `null` for unsupported file types so the caller can drop them. * * @param file - File the user added. * @param config - Optional config for slot attribution and id factory override. `imageCompression` is ignored here. * @returns The new entry with `validating` status, or `null` when the file is not a supported PDF/PNG/JPEG. * @__NO_SIDE_EFFECTS__ */ declare function buildPdfMergeEntrySync(file: File, config?: Maybe): Maybe; /** * Builds a {@link PdfMergeEntry} from a user-provided file, classifying its kind and assigning a fresh id. For image files with an `imageCompression` config the source is downscaled and/or PNG→JPEG converted before the entry is constructed; the original file metadata is captured under {@link PdfMergeEntry.original} regardless. Returns `null` for unsupported file types so the caller can drop them. * * @param file - File the user added. * @param config - Optional config for slot attribution, id factory override, and image compression. * @returns The new entry with `validating` status, or `null` when the file is not a supported PDF/PNG/JPEG. */ declare function buildPdfMergeEntry(file: File, config?: Maybe): Promise>; /** * Lightly inspects a file's bytes to confirm the entry can participate in a merge. PDFs are checked for the standard `%PDF-` header and the `%%EOF` marker. Encrypted PDFs (presence of `/Encrypt`) are still reported as `ok: true` with `encrypted: true` so the editor can decide whether to focus, ignore, or reject the entry — see {@link DbxPdfMergeEncryptedHandling}. Images are accepted as-is — the actual decode happens during merge. * * @param entry - Entry to validate. * @returns Result indicating whether the entry can be merged, optional error message when validation fails, and whether the entry is encrypted. */ declare function validatePdfMergeEntry(entry: Omit): Promise; /** * Whether merging these entries will take the encrypted-passthrough branch of {@link mergePdfMergeEntries} — the only `ready` entry is a single encrypted PDF, so the merge emits its original bytes unchanged instead of assembling a document. * * Exported because the passthrough is not merely an implementation detail of the merge: `pdf-lib` cannot open an encrypted document at all, so such an entry can never be expanded into pages and the editor's page plan is necessarily empty for it. Anything that gates the merge on having pages has to consult this, or enabling page editing would silently block every encrypted document. Keeping the condition here is what keeps those gates aligned with what the merge actually does. * * @param entries - Entries about to be merged, already narrowed to the ones participating (ignored entries excluded). * @returns `true` when the merge will pass a single encrypted file through unchanged. * @__NO_SIDE_EFFECTS__ */ declare function pdfMergeEntriesUseEncryptedPassthrough(entries: readonly PdfMergeEntry[]): boolean; /** * Reads per-page metadata from an entry's source document so the editor can list its pages individually. * * Only called while page editing is enabled — the normal upload path never parses the document, it only scans for the PDF header and markers (see {@link validatePdfMergeEntry}). * * @param entry - Entry to inspect. * @returns One {@link PdfMergePageMeta} per source page, or `null` when the entry is encrypted or cannot be parsed. Image entries report a single synthetic page. */ declare function readPdfMergeEntryPageMetas(entry: PdfMergeEntry): Promise>; /** * Why a call to {@link buildPdfMergeEntriesFromSidecar} could not produce entries. * * - `unreadable` — the bytes are not a PDF this library can open (corrupt, or encrypted). * - `no_sidecar` — a readable PDF that carries no manifest, so there is nothing to attribute its pages to. This is the expected outcome for any PDF that did not come out of a merge with `sidecar: true`. * - `no_documents` — a manifest is present but resolved to no pages at all. */ type PdfMergeSidecarImportErrorReason = 'unreadable' | 'no_sidecar' | 'no_documents'; /** * Outcome of importing a previously-exported merged PDF. */ interface PdfMergeSidecarImportResult { /** * Entries reconstructed from the file, one per document, each tagged with the slot recorded in the manifest. */ readonly entries: readonly PdfMergeEntry[]; /** * The manifest that was read, or `null` when the file carried none and was imported through the {@link BuildPdfMergeEntriesFromSidecarConfig.allowWithoutSidecar} fallback. Check {@link fromSidecar} rather than testing this for null when the distinction matters. */ readonly sidecar: Maybe; /** * Whether the entries came from an embedded manifest (`true`) or from the whole-file fallback (`false`). Everything derived from a manifest — per-slot attribution, {@link missingTags}, {@link untaggedPageCount} — is meaningless when this is `false`. */ readonly fromSidecar: boolean; /** * Slot ids present in the imported file, in manifest order. `null` represents the unslotted group. */ readonly slotIds: readonly Maybe[]; /** * Manifest tags that no longer resolve to a page — pages removed from the file after it was exported. */ readonly missingTags: readonly string[]; /** * Pages in the file carrying no tag, i.e. added outside the editor after export. */ readonly untaggedPageCount: number; } /** * Config for {@link buildPdfMergeEntriesFromSidecar}. */ interface BuildPdfMergeEntriesFromSidecarConfig extends BuildPdfMergeEntryConfig { /** * When `true`, a readable PDF carrying no manifest is imported as a single unslotted entry instead of failing with `no_sidecar`. Defaults to `false`. * * Intended for documents stored before the manifest existed: loading one as a whole still lets the user page-edit it (rotate or drop a bad page) rather than being turned away. It cannot recover per-slot attribution — there is nothing recorded to attribute. */ readonly allowWithoutSidecar?: Maybe; /** * File name given to the entry built by the {@link allowWithoutSidecar} fallback when `input` is a bare {@link Blob}. Ignored when `input` is a {@link File} (its own name wins) or when a manifest is present. */ readonly fileName?: Maybe; } /** * Reconstructs editor entries from a PDF previously exported with an embedded manifest. * * Each document recorded in the manifest becomes one entry carrying its original slot id, so dropping the result into the store repopulates the same slots the file was built from. This is the re-import half of the sidecar: without it a completed document can only come back as a single opaque file. * * @param input - Bytes of a merged PDF, typically the file the user just chose. * @param config - Optional entry-building config (id factory override, and the sidecar-less fallback). * @returns The reconstructed entries and manifest, or a reason when the file cannot be imported. */ declare function buildPdfMergeEntriesFromSidecar(input: Blob, config?: Maybe): Promise; /** * Input for {@link buildPdfMergePagePlan}. */ interface BuildPdfMergePagePlanInput { /** * Current entries, already projected by the store's encryption handling. Only `ready`, non-`ignored` entries contribute pages. */ readonly entries: readonly PdfMergeEntryView[]; /** * Hydrated page metadata keyed by entry id. A `null` value means the entry could not be expanded (encrypted, or unparseable) and contributes no pages. */ readonly pageMetas: Record>; /** * Sparse per-page edits keyed by page id. */ readonly pageOverrides: Record; /** * Stored page ordering per group key. */ readonly pageOrder: Record; } /** * Builds the editor's page plan from the current entries plus the user's sparse edits. * * The result is self-healing: stored ordering ids that no longer resolve are dropped, pages the stored ordering does not mention are appended in natural order, and overrides for departed pages are ignored. That means entries can be added and removed without any page-level bookkeeping. * * Entries whose metadata is `null` contribute no pages — they are encrypted (which `pdf-lib` cannot open) or unparseable. Callers should surface those separately rather than letting them disappear silently. * * @param input - Entries, hydrated metadata, and the stored edits. * @returns The ordered page plan across every group. * @__NO_SIDE_EFFECTS__ */ declare function buildPdfMergePagePlan(input: BuildPdfMergePagePlanInput): PdfMergePageView[]; /** * Options for {@link mergePdfMergeEntries}. Both are optional, and omitting them reproduces the original every-page-of-every-entry merge byte for byte. */ interface MergePdfMergeEntriesOptions { /** * Explicit page plan driving the output. When supplied, only the plan's non-removed pages are emitted, in plan order, with each page's rotation composed onto its source rotation. When omitted, every page of every entry is emitted in entry order. */ readonly pages?: Maybe; /** * Whether to tag each output page and embed a manifest recording which pages came from which slot. See `readPdfMergeSidecar`. */ readonly sidecar?: Maybe; } /** * Merges every `ready` entry in the provided array order into a single PDF and returns it as a `Blob`. PDF entries contribute their full set of pages in order; image entries contribute one page sized to the image. * * Supplying {@link MergePdfMergeEntriesOptions.pages} replaces that default with an explicit page plan, so pages can be subsetted, reordered, and rotated. Supplying {@link MergePdfMergeEntriesOptions.sidecar} additionally embeds a manifest of which pages came from which slot. * * Special case: when the only `ready` entry is a single encrypted PDF, returns a passthrough `Blob` of its original bytes — `pdf-lib` cannot read encrypted PDFs even with `ignoreEncryption: true`, and downstream upload flows still need a usable blob. Neither the page plan nor the sidecar applies on that path, since the document cannot be opened. * * Throws if no `ready` entries are provided, if multiple encrypted entries are passed in (the editor only routes here under focus mode where it has narrowed to one), or if the page plan leaves no pages to emit. * * @param entries - Ordered entries to merge. * @param options - Optional page plan and sidecar switch. * @returns A Blob with `application/pdf` MIME type. */ declare function mergePdfMergeEntries(entries: readonly PdfMergeEntry[], options?: Maybe): Promise; /** * Initial state used by {@link DbxPdfMergeEditorStore} — no entries and no page edits. */ declare const DBX_PDF_MERGE_EDITOR_INITIAL_STATE: PdfMergeEditorState; /** * Why a store-level import failed. Extends the parse-level reasons from {@link buildPdfMergeEntriesFromSidecar} with the store's own slot check. * * - `unexpected_slots` — the file's manifest names a section the caller said this editor does not have. The offending ids are on {@link DbxPdfMergeEditorImportState.unexpectedSlotIds}. */ type DbxPdfMergeEditorImportErrorReason = PdfMergeSidecarImportErrorReason | 'unexpected_slots'; /** * Result of a successful store-level import — the sidecar result plus what the caller's expectation did not cover. */ interface DbxPdfMergeEditorImportResult extends PdfMergeSidecarImportResult { /** * Expected sections the imported file did not fill. Always empty when no `expectedSlotIds` was supplied. A non-empty list is informational, not a failure — the import still replaced the store's entries. */ readonly missingSlotIds: readonly string[]; } /** * Who initiated an import. * * - `programmatic` — app code called {@link DbxPdfMergeEditorStore.importMergedPdf} directly, or a blob was bound to `[source]` on {@link DbxPdfMergeEditorStoreDirective}. This is the editor's *baseline*: the document the surrounding app decided the editor should be showing. * - `user` — the person picked a file through {@link DbxPdfMergeImportComponent}. Discardable; the baseline is not. * * The distinction exists for {@link DbxPdfMergeEditorStore.clearEntries}: emptying a programmatically-supplied editor would leave it in a state the app never asked for and cannot easily detect, so a clear restores the baseline instead of destroying it. */ type DbxPdfMergeEditorImportOrigin = 'programmatic' | 'user'; /** * Lifecycle of the most recent {@link DbxPdfMergeEditorStore.importMergedPdf} call, exposed via {@link DbxPdfMergeEditorStore.importState$}. */ interface DbxPdfMergeEditorImportState { readonly status: 'importing' | 'imported' | 'failed'; /** * Who initiated this import. See {@link DbxPdfMergeEditorImportOrigin}. */ readonly origin: DbxPdfMergeEditorImportOrigin; /** * Present with status `imported`. */ readonly result?: Maybe; /** * Present with status `failed`. */ readonly error?: Maybe; /** * Sections the file named that the caller's `expectedSlotIds` did not allow. Present with error `unexpected_slots`; `null` entries represent unsectioned documents. */ readonly unexpectedSlotIds?: readonly Maybe[]; } /** * Input for {@link DbxPdfMergeEditorStore.importMergedPdf}. */ interface DbxPdfMergeEditorImportMergedPdfInput { /** * Bytes of a merged PDF previously exported from the editor. */ readonly source: Blob; /** * Sections the file is allowed to name. **Omit to skip the check entirely** — the default for a programmatic import. * * The check is opt-in here rather than derived from {@link DbxPdfMergeEditorStore.registeredSlotIds$} because a programmatic import routinely runs before any slot exists (a store mounted on an `` whose editor only opens later in a dialog), where the registry is legitimately empty. Entries land in the store regardless and slots pick them up on mount, so importing early is safe; it is the caller who knows whether the document is trusted. {@link DbxPdfMergeImportComponent} passes its own resolved list, preserving the picker's behavior. */ readonly expectedSlotIds?: Maybe; /** * When `true`, a readable PDF with no manifest is imported as one unslotted entry rather than failing with `no_sidecar`. Defaults to `false`. See {@link BuildPdfMergeEntriesFromSidecarConfig.allowWithoutSidecar}. */ readonly allowWithoutSidecar?: Maybe; /** * File name for the entry built by the `allowWithoutSidecar` fallback when `source` is a bare {@link Blob}. */ readonly fileName?: Maybe; /** * Who initiated this import. Defaults to `programmatic` — the picker passes `user` explicitly, so any other caller is app code by construction. * * A successful `programmatic` import becomes the editor's restore point for {@link DbxPdfMergeEditorStore.clearEntries}. */ readonly origin?: Maybe; } /** * Input for {@link DbxPdfMergeEditorStore.clearEntries}. */ interface DbxPdfMergeEditorClearEntriesInput { /** * Whether a programmatic import is restored rather than discarded. Defaults to `true`. * * Bind `false` for an editor whose clear really should empty everything, baseline included. */ readonly restoreImport?: Maybe; } /** * Outcome of {@link DbxPdfMergeEditorStore.clearEntries}. */ interface DbxPdfMergeEditorClearEntriesResult { /** * Whether the editor was reset to its programmatic baseline (`true`) or emptied (`false`). */ readonly restored: boolean; /** * Terminal state of the restoring re-import. Only present when a restore was attempted. */ readonly importState?: Maybe; } /** * Input for {@link DbxPdfMergeEditorStore.addFileToSlot}. */ interface DbxPdfMergeEditorAddFileToSlotInput { /** * The document to add. A bare {@link Blob} is named via {@link fileName}. */ readonly file: Blob | File; /** * Slot to attribute the entry to. Omit for an unslotted entry. */ readonly slotId?: Maybe; /** * Name for a bare {@link Blob}, or an override for a {@link File}'s own name. */ readonly fileName?: Maybe; /** * Image-compression override. Defaults to the store-level config set via {@link DbxPdfMergeEditorStore.setImageCompression}, matching what a slot uploader would apply to the same file. */ readonly imageCompression?: Maybe; } /** * Input accepted by {@link DbxPdfMergeEditorStore.addFiles}: either a bare list of files (treated as unscoped, synchronously wrapped into entries) or `{ files, slotId }` to attribute the new entries to a slot. Callers that need client-side compression should construct entries via the async `buildPdfMergeEntry` and pass `{ entries }` instead. */ type DbxPdfMergeEditorAddFilesInput = readonly File[] | { readonly files: readonly File[]; readonly slotId?: Maybe; } | { readonly entries: readonly PdfMergeEntry[]; }; /** * Component-scoped {@link ComponentStore} that owns the list of files staged for merging in the PDF merge editor. Each {@link PdfMergeEntry} carries its own validation promise from the moment it is built; {@link entries$} composes those promises into a live stream — emitting the entry first in `validating` state and then again as each promise resolves to `ready` or `error`. {@link mergeOutput$} emits the merged PDF blob once every entry has finished validating, at least one is `ready`, and the registered validator delegate (if any) reports `true`. */ declare class DbxPdfMergeEditorStore extends ComponentStore { private readonly _validator$; private readonly _outputSizeLimit$; private readonly _imageCompression$; private readonly _encryptedHandling$; private readonly _pageEditing$; private readonly _sidecar$; /** * Per-entry page metadata, parsed at most once per entry. Keyed by entry id; a resolved `null` means the entry could not be expanded. Only populated while page editing is enabled. */ private readonly _pageMetaCache; /** * Mount count per registered slot id. See {@link registerSlotId} for why this is a count rather than a set. */ private readonly _slotIdCounts; private readonly _registeredSlotIds$; private readonly _importState$; /** * Input of the most recent successful `programmatic` import, replayed by {@link clearEntries} to reset the editor to the document the app supplied. `null` until one succeeds; a user's pick never overwrites it. */ private _restorableImport; constructor(); /** * Live entry list. Each raw entry's {@link PdfMergeEntry.validation} promise is mapped onto its status: while pending, the entry is emitted with status `validating`; once resolved, the entry is mutated to `ready`/`error` and re-emitted. Subsequent emissions of the underlying state pass already-resolved entries through unchanged. */ readonly entries$: Observable; readonly entryCount$: Observable; /** * Emits the active {@link DbxPdfMergeEncryptedHandling} mode (defaults to {@link DEFAULT_DBX_PDF_MERGE_ENCRYPTED_HANDLING}). Pushed onto the store via {@link setEncryptedHandling} by the editor component or {@link DbxPdfMergeEditorStoreDirective}. */ readonly encryptedHandling$: Observable; /** * Entries enriched with the `ignored` flag derived from {@link encryptedHandling$}. Under `focus` mode (the default) the *first* ready encrypted entry is the focus target — every other entry (encrypted or not) is marked `ignored`, so the merge stream always sees a single encrypted entry and routes through the passthrough branch in {@link mergePdfMergeEntries}. Under `error` mode, encrypted entries are demoted to `status: 'error'` with the standard "Password-protected" message. Under `allow` mode, entries pass through unchanged. */ readonly displayEntries$: Observable; /** * Emits `true` while {@link encryptedHandling$} is `'focus'` and at least one ready encrypted entry exists. Drives the editor's focus banner and is the same condition used to mark non-encrypted entries as `ignored` in {@link displayEntries$}. */ readonly focusActive$: Observable; /** * The single entry `focus` handling has narrowed the merge to — the first ready encrypted entry — or `null` whenever focus is not active (another handling mode, or no encrypted entry). * * Consumed by {@link DbxPdfMergeEditorFileUploadComponent} to answer "is my section still part of this document": while this entry exists, the output is that file alone, so every other slot's contents are ignored no matter what is put in them. Slots compare their own id against {@link PdfMergeEntry.slotId} here — a `null`/absent slot id means the focus target came from the editor's own upload area and supersedes every slot. */ readonly encryptedFocusEntry$: Observable>; /** * Emits the encrypted, `ready` entries currently in the list. Useful for consumers that want to surface UI specifically for encrypted files. */ readonly encryptedEntries$: Observable; readonly hasReadyEntries$: Observable; /** * Emits `true` while the merge will take the encrypted-passthrough branch — the only entry participating is a single ready encrypted PDF, whose original bytes become the output unchanged. See {@link pdfMergeEntriesUseEncryptedPassthrough}. * * This is what keeps page editing compatible with encrypted documents. `pdf-lib` cannot open an encrypted file, so it can never be expanded into pages and the page plan is necessarily empty for it — meaning every page-plan gate ({@link hasMergeablePages$} and the merge stream's own check) would otherwise read "the user deleted every page" and disable Preview, Download, and the upload/accept flows for the entire document. The passthrough has no plan to satisfy, so those gates consult this instead. */ readonly encryptedPassthrough$: Observable; /** * Raw {@link DbxPdfMergeEditorConfig.pageEditing} value pushed onto the store, before defaulting. Consumed by the editor as the middle tier of its resolution chain (own `[config]` input → store → {@link DBX_PDF_MERGE_EDITOR_CONFIG} token), so a store-level default does not shadow the token. */ readonly pageEditingSetting$: Observable>; /** * Whether page editing is active, defaulted to {@link DEFAULT_DBX_PDF_MERGE_PAGE_EDITING}. Every page-related stream is inert while this is `false`. */ readonly pageEditing$: Observable; /** * Raw {@link DbxPdfMergeEditorConfig.sidecar} value pushed onto the store, before defaulting. */ readonly sidecarSetting$: Observable>; /** * Whether the merged output should carry an embedded manifest, defaulted to {@link DEFAULT_DBX_PDF_MERGE_SIDECAR}. Independent of {@link pageEditing$}. */ readonly sidecar$: Observable; /** * Hydrated page metadata keyed by entry id. * * Short-circuits to an empty record while page editing is off, so the default configuration never parses a source document — the upload path's cheap header scan stays the only inspection performed. Each entry is parsed at most once thanks to {@link _pageMetaCache}, and metadata for departed entries is pruned on each pass. */ readonly pageMetas$: Observable>>; /** * The editor's ordered page plan, or `null` while page editing is disabled. Passing `null` through to the merge is what makes the default path emit every page of every entry exactly as it did before page editing existed. */ readonly pages$: Observable>; /** * The page plan split into the groups the UI renders, one per slot plus one for unslotted entries. Empty while page editing is disabled. */ readonly pageGroups$: Observable; /** * Entries that are ready but contribute no pages to the plan: encrypted documents (which `pdf-lib` cannot open), anything unparseable, and entries the active {@link DbxPdfMergeEncryptedHandling} is ignoring. Surfaced so the UI can explain why those rows are not expandable instead of letting them silently vanish from the page list. Always empty while page editing is disabled. * * Ignored entries belong here rather than nowhere: the file-granular list greys them out and still offers a remove button, so omitting them under page editing would make a file the user just added disappear with no explanation and no way to take it back out. */ readonly unexpandableEntries$: Observable; /** * Number of pages that will reach the merged output — the plan minus anything marked for removal. Zero while page editing is disabled, where the count is not meaningful. */ readonly mergeablePageCount$: Observable; /** * Whether at least one page survives the user's edits. Emits `true` while page editing is disabled so it never gates the default path, and while {@link encryptedPassthrough$} is active, where the output is the encrypted file itself and there is no plan to satisfy. */ readonly hasMergeablePages$: Observable; /** * Returns the pages belonging to one group, for a slot rendering its own pages inline. * * @param slotId - Slot identifier, or `null` for the unslotted group. * @returns Observable of that group's ordered pages. */ pagesForSlotId$(slotId: Maybe): Observable; /** * Emits `true` while any entry's validation promise has not yet resolved (i.e. one or more entries are still in `validating` status). Reads from {@link entries$} (not {@link displayEntries$}) so validation gating ignores the `ignored`/`error` projection done by encryption handling. */ readonly isValidating$: Observable; /** * Emits the boolean output of the registered {@link DbxPdfMergeEditorValidator} delegate, or a constant `true` when no delegate is registered. Composed with {@link sizeLimitValid$} into {@link isValid$} to gate {@link currentMergeOutput$}. */ readonly validatorValid$: Observable; /** * Internal pre-validity merge stream produced without consulting {@link isValid$}. Drives both {@link outputSize$} and the eventual {@link currentMergeOutput$} so size-based gating can observe the would-be blob without creating a cycle. Consumes {@link displayEntries$} so the merge respects the active {@link DbxPdfMergeEncryptedHandling} (encrypted-focused entries pass through, ignored entries are dropped, `error` mode demotions are honored). */ private readonly _candidateMergeOutput$; /** * Emits the byte size of the most recent candidate merge output, or `undefined` while there is none. */ readonly outputSize$: Observable>; /** * Emits `true` while the candidate merge fits inside the active output-size limit (or when no limit is set). Cleared when the merge has not yet produced a blob — emits `true` in that case to avoid blocking the UI before there is anything to gate on. */ readonly sizeLimitValid$: Observable; /** * Emits `true` while the registered {@link DbxPdfMergeEditorValidator} delegate (if any), the optional output-size limit, and the page plan are all satisfied. {@link currentMergeOutput$} gates merge emissions on this stream. * * The page-plan term is `true` whenever page editing is disabled, so this stream is unchanged on the default path. With page editing on it blocks the merge once the user has marked every page for deletion. */ readonly isValid$: Observable; /** * Emits the merged PDF blob whenever every entry has finished validating (see {@link isValidating$}), at least one is `ready`, and {@link isValid$} reports `true`. Emits `undefined` while validation is in flight, when the list is empty, when the delegate or size limit reports invalid, or when the most recent merge failed. */ readonly currentMergeOutput$: Observable>; readonly mergeOutput$: Observable; /** * Emits the active client-side image-compression config pushed via {@link setImageCompression}, or `undefined` when none is set. Consumed by the editor and its slot uploaders as the middle tier of compression resolution (own `[config]` input → store → {@link DBX_PDF_MERGE_EDITOR_CONFIG} token), letting {@link DbxPdfMergeEditorStoreDirective} supply a store-level default that flows through the upload dialog's bare editor. */ readonly imageCompression$: Observable>; /** * Returns an observable of entries belonging to the given slot id. The result is filtered from {@link displayEntries$} so per-slot rows honor the active {@link DbxPdfMergeEncryptedHandling} (ignored / error projection). * * @param slotId - Slot identifier to filter for. * @returns Observable of entries whose `slotId` matches, enriched with the `ignored` flag. */ entriesForSlotId$(slotId: string): Observable; /** * Slot ids currently mounted against this store, i.e. the sections this editor declares. * * This is what makes `` a zero-configuration drop-in: it derives the set of sections a re-imported file is allowed to name (and whether it renders at all) from the slots actually on screen, rather than from a hand-maintained list duplicating them. * * Emitted **sorted ascending**, which is deterministic but is NOT declaration order. Sorting is what lets the guard below collapse slot churn: a set cycling through `@if` (`['a','b']` → `['b']` → `['b','a']`) ends up equal to the array it started with, where registration order would emit a spuriously different array for an identical set. * * Registered by {@link DbxPdfMergeEditorFileUploadComponent} from its own lifecycle. Kept here rather than on the optional {@link DbxPdfMergeEditorFileUploadValidatorDirective} because it must be available whether or not a validator is present — and because a separately-provided registry could be provided at a different level than the store, letting slots register with one instance while a reader sees another. */ readonly registeredSlotIds$: Observable; /** * Registers a slot id as mounted, adding it to {@link registeredSlotIds$}. * * Reference-counted rather than a set: the same `slotId` can legitimately be mounted twice at once — the PDF merge upload dialog hosts its slots against an ancestor store while inline slots may still exist under {@link DBX_PDF_MERGE_EDITOR_PRESERVE_ENTRIES_ON_SLOT_DESTROY} — and one unmount must not deregister a still-mounted id. * * @param slotId - Slot identifier being mounted. */ registerSlotId(slotId: string): void; /** * Deregisters one mount of a slot id, removing it from {@link registeredSlotIds$} once the last mount is gone. Unknown ids are ignored. * * Callers must pair this with their own {@link registerSlotId} exactly once. The store frequently outlives its slots (a dialog-hosted slot is destroyed on every close while the page-level store lives on), so a missed call leaves the editor permanently claiming a section that is not on screen. * * @param slotId - Slot identifier being unmounted. */ unregisterSlotId(slotId: string): void; private _emitRegisteredSlotIds; /** * Lifecycle of the most recent {@link importMergedPdf} call, or `undefined` before the first. Lets a consumer that triggered a programmatic import observe its outcome — the picker component is not the only entry point. */ readonly importState$: Observable>; /** * The most recent successful import, or `null` while none has succeeded. */ readonly importResult$: Observable>; /** * Why the most recent import failed, or `null` when it did not. */ readonly importError$: Observable>; /** * Emits `true` while an import is in flight. */ readonly isImporting$: Observable; /** * Whether a programmatic baseline exists for {@link clearEntries} to restore. Lets a consumer word its own confirmation honestly — "reset to the imported document" rather than "remove everything". * * @returns `true` once a programmatic import has succeeded. */ hasRestorableImport(): boolean; /** * Imports a previously-exported merged PDF, replacing every entry currently in the store with the per-slot documents recorded in its manifest. * * This is the programmatic equivalent of what {@link DbxPdfMergeImportComponent} does with a picked file, and that component delegates here — so a stored document loaded by an app and a file chosen by a user go through one implementation with one set of error semantics. Progress and outcome are published on {@link importState$} as well as returned. * * @param input - The source blob plus the optional slot check and sidecar-less fallback. * @returns The terminal state of this import. */ importMergedPdf(input: DbxPdfMergeEditorImportMergedPdfInput): Promise; /** * Discards the current import lifecycle, so consumers rendering its notices (the picker's "Imported N section(s)" success line, its missing-section warning, its error) fall back to showing nothing. * * Separate from the entry list — this clears the *record* of an import, not its contents. */ clearImportState(): void; /** * Empties the editor, or resets it to its programmatic baseline when one exists. * * This is the "Clear" affordance's operation, and it deliberately is not a plain {@link clearAll}. When the surrounding app supplied the document (a programmatic {@link importMergedPdf}, or `[source]` on {@link DbxPdfMergeEditorStoreDirective}), emptying the editor would strand it in a state the app never asked for and has no obvious way to notice. Instead the original import is re-run, landing the view exactly where it was when the document first arrived — page edits, section removals, and any user-picked file on top of it all discarded. * * With no baseline — the ordinary case, including an editor whose only import came from {@link DbxPdfMergeImportComponent} — the entries and the import state both go, so no stale success/warning notice outlives the content it described. * * @param input - Optional override for the restore behavior. * @returns Whether the baseline was restored, plus the re-import's terminal state when one ran. */ clearEntries(input?: Maybe): Promise; /** * Adds a single document to a slot, without any sidecar involvement — the programmatic equivalent of a user dropping one file onto a slot uploader. Existing entries are left alone. * * Unlike {@link importMergedPdf} this neither reads nor requires a manifest; it is the plain "put this file in that slot" primitive, for e.g. an admin appending one document to an existing set. The entry can be added before its slot mounts — {@link entriesForSlotId$} picks it up when the slot renders. * * @param input - The blob or file, its target slot, and an optional name for a bare blob. * @returns The entry that was added, or `null` when the file is not a supported PDF/PNG/JPEG (in which case nothing was added). */ addFileToSlot(input: DbxPdfMergeEditorAddFileToSlotInput): Promise>; /** * Registers a {@link DbxPdfMergeEditorValidator} delegate that gates merge emissions. Only one delegate is active at a time — calling this replaces any previously registered delegate. * * @param validator - Delegate to register, or a falsy value to clear. */ setValidator(validator: Maybe): void; /** * Clears any registered validator delegate so {@link validatorValid$} returns to its default `true` stream. */ clearValidator(): void; /** * Sets the maximum allowed output blob size in bytes. When the candidate merge exceeds this limit, {@link sizeLimitValid$} (and therefore {@link isValid$}) emits `false` and {@link currentMergeOutput$} suppresses the blob. Pass `null`/`undefined` to clear the limit. * * @param maxBytes - Output byte ceiling, or a falsy value to remove the limit. */ setOutputSizeLimit(maxBytes: Maybe): void; /** * Sets the store-level client-side image-compression config exposed via {@link imageCompression$}. The editor and its slot uploaders apply it as the middle tier of compression resolution (own `[config]` input → store → {@link DBX_PDF_MERGE_EDITOR_CONFIG} token), so a value pushed here by {@link DbxPdfMergeEditorStoreDirective} reaches the upload dialog's bare editor while a per-input/per-slot override still wins. Pass `null`/`undefined` to clear the store-level default. * * @param config - Image-compression config, or a falsy value to clear the store-level default. */ setImageCompression(config: Maybe): void; /** * Sets the active {@link DbxPdfMergeEncryptedHandling} mode, exposed via {@link encryptedHandling$}. Pass `null`/`undefined` to clear the value and fall back to {@link DEFAULT_DBX_PDF_MERGE_ENCRYPTED_HANDLING}. * * @param handling - Encryption handling mode, or a falsy value to clear. */ setEncryptedHandling(handling: Maybe): void; /** * Enables or disables page editing, exposed via {@link pageEditing$}. Turning it on expands each ready entry into its individual pages; turning it off returns the editor to its file-granular behavior while preserving any page edits in state, so toggling back on restores them. * * @param pageEditing - Whether page editing is active, or a falsy value to clear and fall back to {@link DEFAULT_DBX_PDF_MERGE_PAGE_EDITING}. */ setPageEditing(pageEditing: Maybe): void; /** * Enables or disables the embedded manifest, exposed via {@link sidecar$}. * * @param sidecar - Whether to embed the manifest, or a falsy value to clear and fall back to {@link DEFAULT_DBX_PDF_MERGE_SIDECAR}. */ setSidecar(sidecar: Maybe): void; /** * Appends entries (already constructed) or builds them from raw files and appends them to state. Each entry's validation promise starts when the entry is built; {@link entries$} reflects each result as it resolves. When `input` is an object with `files` and `slotId`, the resulting entries are tagged with that slot id. When `input` is `{ entries }`, the entries are appended as-is — use this shape for entries that went through async client-side compression upstream. */ readonly addFiles: (observableOrValue: DbxPdfMergeEditorAddFilesInput | Observable) => rxjs.Subscription; readonly removeEntry: (observableOrValue: string | Observable) => rxjs.Subscription; /** * Removes every entry whose `slotId` matches the given id. Used by {@link DbxPdfMergeEditorFileUploadComponent} on destroy so a slot's entries leave with it. */ readonly removeEntriesBySlotId: (observableOrValue: string | Observable) => rxjs.Subscription; readonly moveEntry: (observableOrValue: PdfMergeEntryMove | Observable) => rxjs.Subscription; /** * Reorders entries inside a single slot. The `previousIndex`/`currentIndex` are slot-local — the indices a {@link DbxPdfMergeEditorFileUploadComponent} sees in its filtered view of {@link entries$}. The updater translates them to global `rawEntries` positions and applies an in-place {@link moveItemInArray}, leaving entries from other slots untouched. */ readonly moveEntryWithinSlot: (observableOrValue: { readonly slotId: string; readonly previousIndex: number; readonly currentIndex: number; } | Observable<{ readonly slotId: string; readonly previousIndex: number; readonly currentIndex: number; }>) => rxjs.Subscription; readonly clearAll: () => void; /** * Replaces the entire entry list, discarding any page edits. * * Used by the sidecar import path, which reconstructs a fresh set of slot-tagged entries from a previously-exported file. Done as a single state change so subscribers never observe an intermediate empty list. */ readonly replaceEntries: (observableOrValue: readonly PdfMergeEntry[] | Observable) => rxjs.Subscription; /** * Reorders a page inside its own group. Groups never exchange pages — the page list renders one CDK drop list per group, so a cross-group drag is impossible to express. * * The move rewrites the id array the caller rendered rather than recomputing it from state, keeping the stored order aligned with what the user saw. */ readonly movePageWithinGroup: (observableOrValue: PdfMergePageMove | Observable) => rxjs.Subscription; /** * Sets a page's rotation. The value is composed onto the page's own source rotation at merge time, so this is the rotation the user applied rather than the page's absolute orientation. */ readonly setPageRotation: (observableOrValue: PdfMergePageRotationChange | Observable) => rxjs.Subscription; /** * Marks a page for deletion or restores it. Marked pages stay in the list so the choice can be undone, but are excluded from the merged output. */ readonly setPageRemoved: (observableOrValue: PdfMergePageRemovedChange | Observable) => rxjs.Subscription; /** * Discards every page edit, returning the plan to natural order with no rotations or deletions. Leaves the entries themselves untouched. */ readonly clearPageEdits: () => void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Options applied to the blob bound to {@link DbxPdfMergeEditorStoreDirective.source}. Mirrors the tail of {@link DbxPdfMergeEditorImportMergedPdfInput}. */ interface DbxPdfMergeEditorSourceConfig { /** * Sections the source is allowed to name. Omit to skip the check — the default, since a bound source usually arrives before any slot has mounted. */ readonly expectedSlotIds?: Maybe; /** * When `true`, a readable PDF with no manifest loads as one unslotted entry instead of failing. Defaults to `false`. */ readonly allowWithoutSidecar?: Maybe; /** * File name to give a bare {@link Blob} loaded through the sidecar-less fallback. */ readonly fileName?: Maybe; } /** * Provides a {@link DbxPdfMergeEditorStore} on its host element so descendant components (including {@link DbxPdfMergeUploadButtonComponent} and any dialog opened with the host's injector) share the same store instance. Optionally pushes configuration onto the store via inputs. * * The directive only writes to {@link DbxPdfMergeEditorStore.setOutputSizeLimit} when {@link outputSizeLimit} or {@link config}'s `outputSizeLimits.errorBytes` is explicitly bound — leaving the embedded {@link DbxPdfMergeEditorComponent}'s own effect free to handle the case where the editor is configured directly. Falls back to the workspace-wide {@link DBX_PDF_MERGE_EDITOR_CONFIG} token when neither input is set. * * @example * ```html *
* *
* ``` */ declare class DbxPdfMergeEditorStoreDirective { readonly store: DbxPdfMergeEditorStore; private readonly _injectedConfig; readonly config: _angular_core.InputSignal>; readonly outputSizeLimit: _angular_core.InputSignal>; /** * A previously-exported merged PDF to load into the store, for an app that fetches a stored document itself and wants the editor to open already populated — no picker involved. * * Imported once per distinct blob instance: re-emitting the same object does nothing, so a template re-render or an unrelated input change cannot re-import. Emitting a *different* blob imports again and replaces the entries, even if the bytes are identical. * * Watch {@link DbxPdfMergeEditorStore.importState$} for the outcome — a failure surfaces there rather than throwing. */ readonly source: _angular_core.InputSignal>; readonly sourceConfig: _angular_core.InputSignal>; /** * The blob instance most recently handed to the store, so the same one is never imported twice. */ private _importedSource; readonly effectiveErrorBytesSignal: _angular_core.Signal>; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Abstract interface for file upload components that can be controlled by the action system (disabled, working, multiple, accept states). * * Extends {@link DbxActionWorkable} (disabled/working), adding upload-specific multiple/accept controls. */ declare abstract class DbxFileUploadActionCompatable extends DbxActionWorkable { abstract setMultiple(multiple?: Maybe): void; abstract setMaxFiles(maxFiles?: Maybe): void; abstract setAccept(accept?: Maybe): void; } /** * Provides a {@link DbxFileUploadActionCompatable} for dependency injection from the given component type. * * @param sourceType - The concrete component class that implements {@link DbxFileUploadActionCompatable} * @returns The providers that register the given type as the {@link DbxFileUploadActionCompatable} implementation. * * @Component ({ providers: provideDbxFileUploadActionCompatable(MyUploadComponent) }) * ``` * * @example * ```ts */ declare function provideDbxFileUploadActionCompatable(sourceType: Type): Provider[]; /** * Event emitted when files are selected or dropped, containing both the raw file list and accept match results. */ interface DbxFileUploadFilesChangedEvent { readonly allFiles: File[]; readonly matchResult: FileArrayAcceptMatchResult; } /** * Abstract base component for file upload components, managing disabled, working, multiple, and accept states. * * Implements {@link DbxFileUploadActionCompatable} for integration with the action system. */ declare abstract class AbstractDbxFileUploadComponent implements DbxFileUploadActionCompatable { /** * Whether or not multiple files can be uploaded. */ readonly multiple: _angular_core.InputSignalWithTransform, Maybe>; /** * The most files that can be selected at once. * * Ignored while multiple is false, which is already a limit of one. */ readonly maxFiles: _angular_core.InputSignal>; /** * Accepted file types filter. */ readonly accept: _angular_core.InputSignal; /** * This disabled is input-only */ readonly disabled: _angular_core.InputSignal>; /** * This working is input-only */ readonly working: _angular_core.InputSignal>; /** * This signal is set by setMultiple */ private readonly _multipleSignal; /** * This signal is set by setMaxFiles */ private readonly _maxFilesSignal; /** * 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: _angular_core.Signal>; readonly maxFilesSignal: _angular_core.Signal>; readonly acceptSignal: _angular_core.Signal; readonly disabledSignal: _angular_core.Signal; readonly workingSignal: _angular_core.Signal>; readonly isWorkingSignal: _angular_core.Signal; setDisabled(disabled?: Maybe): void; setWorking(working?: Maybe): void; setMultiple(multiple?: Maybe): void; setMaxFiles(maxFiles?: Maybe): void; setAccept(accept?: Maybe): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Editor that lets the user collect PDFs and images, reorder them via drag-and-drop, and produce a single merged PDF for preview/download. Reads from an ancestor-provided {@link DbxPdfMergeEditorStore}. Optionally embeds a {@link DbxDownloadBlobButtonComponent} to offer a download affordance for the most recent merge. * * The parent view (or another directive) is responsible for providing {@link DbxPdfMergeEditorStore} so the editor and its peer components ({@link DbxPdfMergeListComponent}, {@link DbxPdfMergeEntryComponent}) share the same instance. Subscribe to the store's {@link DbxPdfMergeEditorStore.mergeOutput$} directly for downstream merge consumers. * * @example * ```html * * ``` */ /** * High-level state of {@link DbxPdfMergeEditorComponent.outputSizeStateSignal}. * * - `ok` — output size is within or below the configured warning threshold (or no limits are configured). * - `warn` — output size exceeds `warnBytes` but stays under `errorBytes`. * - `error` — output size exceeds `errorBytes`. Preview and Download are blocked via the store's validity gate. */ type DbxPdfMergeEditorOutputSizeState = 'ok' | 'warn' | 'error'; declare class DbxPdfMergeEditorComponent { readonly store: DbxPdfMergeEditorStore; private readonly _matDialog; private readonly _injectedConfig; /** * Single-slot subscription tracker for the deferred Preview path. Replacing the slot cancels any earlier in-flight wait so rapid clicks (or repeated programmatic calls) cannot stack pending dialogs. */ private readonly _pendingPreview; /** * Individual inputs. Each takes precedence over the matching field on {@link config} (and the workspace-wide token), with defaults applied in the corresponding `*Signal` computed. See {@link DbxPdfMergeEditorConfig} for field docs. */ readonly accept: _angular_core.InputSignal>; readonly multiple: _angular_core.InputSignal>; readonly fileName: _angular_core.InputSignal>; readonly showDownloadButton: _angular_core.InputSignal>; readonly showPreviewButton: _angular_core.InputSignal>; readonly downloadButton: _angular_core.InputSignal>; readonly showAddFiles: _angular_core.InputSignal>; readonly showFileList: _angular_core.InputSignal>; readonly pageEditing: _angular_core.InputSignal>; readonly sidecar: _angular_core.InputSignal>; /** * Bundles every editor option into one object (see {@link DbxPdfMergeEditorConfig}). Individual inputs override the matching field here, which in turn overrides the workspace-wide {@link DBX_PDF_MERGE_EDITOR_CONFIG} token. */ readonly config: _angular_core.InputSignal>; readonly entriesChanged: _angular_core.OutputEmitterRef; /** * Store-level image-compression default pushed by {@link DbxPdfMergeEditorStoreDirective}. Resolved between the editor's own `config` input and the workspace-wide token so a store-level default flows through the upload dialog's bare editor. */ readonly storeImageCompressionSignal: _angular_core.Signal>; /** * Store-level encryption handling default pushed by {@link DbxPdfMergeEditorStoreDirective}. Resolved between the editor's own `config` input and the workspace-wide token in {@link effectiveConfigSignal}. */ readonly storeEncryptedHandlingSignal: _angular_core.Signal; /** * Store-level page-editing and sidecar defaults pushed by {@link DbxPdfMergeEditorStoreDirective}. These read the store's raw (undefaulted) settings so an unset store value still falls through to the workspace-wide token in {@link effectiveConfigSignal}. */ readonly storePageEditingSignal: _angular_core.Signal>; readonly storeSidecarSignal: _angular_core.Signal>; /** * Merged config — the editor's own `config` input wins over the store-level default (for `imageCompression`), which in turn wins over the workspace-wide token. The individual inputs are resolved on top of this object in the per-field `*Signal` computeds below. */ readonly effectiveConfigSignal: _angular_core.Signal; readonly restoreImportOnClearSignal: _angular_core.Signal; /** * Whether Clear will reset to a programmatic baseline instead of emptying. Only affects the confirmation's wording — {@link DbxPdfMergeEditorStore.clearEntries} makes the actual decision, and re-reads the store at the moment it runs. */ readonly clearRestoresImportSignal: _angular_core.Signal; /** * Config for the confirmation shown before the footer Clear button empties the editor. `clearConfirm` overrides any field of the default; `autoConfirm: true` restores the pre-confirmation one-click behavior. * * The default copy tells the truth about which of the two things Clear is about to do — reset to the app-supplied document, or remove everything. */ readonly clearConfirmSignal: _angular_core.Signal>; readonly encryptedHandlingSignal: _angular_core.Signal; /** * Whether page editing is active. When `false` the editor renders its original file list and no page machinery is instantiated at all. */ readonly pageEditingSignal: _angular_core.Signal; readonly sidecarSignal: _angular_core.Signal; readonly imageCompressionConfigSignal: _angular_core.Signal>; readonly outputSizeLimitsSignal: _angular_core.Signal>; readonly acceptSignal: _angular_core.Signal; readonly multipleSignal: _angular_core.Signal; readonly fileNameSignal: _angular_core.Signal; readonly showDownloadButtonSignal: _angular_core.Signal; readonly showPreviewButtonSignal: _angular_core.Signal; readonly downloadButtonSignal: _angular_core.Signal; readonly showAddFilesSignal: _angular_core.Signal; readonly showFileListSignal: _angular_core.Signal; readonly warnBytesSignal: _angular_core.Signal>; readonly errorBytesSignal: _angular_core.Signal>; readonly hasReadyEntriesSignal: _angular_core.Signal; readonly entryCountSignal: _angular_core.Signal; /** * Number of pages that will actually reach the output — the page plan minus anything marked for removal. Only surfaced while page editing is enabled. */ readonly mergeablePageCountSignal: _angular_core.Signal; /** * Mirrors {@link DbxPdfMergeEditorStore.focusActive$} — `true` while `encryptedHandling === 'focus'` and at least one ready encrypted entry exists. Drives the encrypted-PDF focus banner. */ readonly focusActiveSignal: _angular_core.Signal; /** * Mirrors {@link DbxPdfMergeEditorStore.encryptedPassthrough$} — `true` while the output is a single encrypted file passed through unchanged. Suppresses the page count, which is not knowable for a document `pdf-lib` cannot open. */ readonly encryptedPassthroughSignal: _angular_core.Signal; /** * Text of the encrypted-focus banner. Page editing gets the longer wording, since the pages of an encrypted document cannot be listed or edited and the user would otherwise be left wondering where they went. */ readonly encryptedBannerMessageSignal: _angular_core.Signal; /** * Mirrors {@link DbxPdfMergeEditorStore.isValid$}. Defaults to `true` when no validator delegate is registered, so the Preview/Download buttons are gated only by the registered validator's output (if any). */ readonly isValidSignal: _angular_core.Signal; /** * Computed gate for the Preview and Download affordances. Disabled while no entry is `ready` or while the registered validator delegate reports invalid. */ readonly canMergeSignal: _angular_core.Signal; /** * Latest merged blob (or `undefined` while validation/merge is in flight or no entries are ready). Sourced from {@link DbxPdfMergeEditorStore.currentMergeOutput$} so the download button always reflects the current merge without needing the user to click Preview first. */ readonly mergeBlobSignal: _angular_core.Signal>; /** * Latest candidate output size in bytes (sourced from {@link DbxPdfMergeEditorStore.outputSize$}). Drives the warning/error banner. */ readonly outputSizeSignal: _angular_core.Signal>; readonly outputSizeStateSignal: _angular_core.Signal; readonly formattedOutputSizeSignal: _angular_core.Signal>; readonly formattedWarnLimitSignal: _angular_core.Signal>; readonly formattedErrorLimitSignal: _angular_core.Signal>; readonly downloadConfigSignal: _angular_core.Signal; constructor(); onFiles(event: DbxFileUploadFilesChangedEvent): Promise; /** * Clears the editor, resetting to a programmatic baseline when there is one. See {@link DbxPdfMergeEditorStore.clearEntries}. * * @returns The clear outcome, so a programmatic caller can tell a reset from an empty. */ onClear(): Promise; /** * Runs as the handler of the footer Clear button's own `dbxAction`, so the `dbxActionConfirm` on that action is what stands between a misclick and the whole entry list. Delegates to {@link onClear} so a programmatic clear and the button share one path. * * @returns An observable the action completes on — a restore re-parses the document, so this is not instantaneous. */ readonly handleClear: WorkUsingObservable; onPreview(): void; private openPreviewDialog; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Event emitted by {@link DbxFileUploadButtonComponent} when files are selected. */ type DbxFileUploadButtonFilesChangedEvent = DbxFileUploadFilesChangedEvent; /** * File upload button that opens a native file picker and emits accepted/rejected file results. * * @example * ```html * * ``` */ declare class DbxFileUploadButtonComponent extends AbstractDbxFileUploadComponent { readonly fileInput: _angular_core.Signal>; readonly text: _angular_core.InputSignal>; readonly icon: _angular_core.InputSignal>; readonly ariaLabel: _angular_core.InputSignal>; readonly buttonStyle: _angular_core.InputSignal>; readonly filesChanged: _angular_core.OutputEmitterRef; readonly buttonAcceptSignal: _angular_core.Signal; readonly buttonMultipleSignal: _angular_core.Signal; /** * The match function the picked files are run through. * * A non-function accept is left to the input's own accept attribute — but the COUNT still has to be * applied here, as the file picker has no concept of a limit and will happily hand back more than the * destination can hold. */ readonly filesAcceptedFunctionSignal: _angular_core.Signal<_dereekb_dbx_web.FileArrayAcceptMatchFunction>; /** * The HTML attribute should not be added if it is false, so we return null. */ readonly multipleAttributeSignal: _angular_core.Signal<"" | null>; /** * NOTE: A Chrome bug can cause "File chooser dialog can only be shown with a user activation" errors * when Chrome's "Restart to Update" banner is visible. Restarting Chrome to apply the update resolves it. * * See https://issues.chromium.org/issues/330663542 (scroll to bottom for details). */ openInput(): void; fileInputChanged(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Event emitted by {@link DbxFileUploadAreaComponent} when files are dropped. */ type DbxFileUploadAreaFilesChangedEvent = DbxFileUploadFilesChangedEvent; /** * Drag-and-drop file upload area that accepts dropped files and emits accepted/rejected results. * * @example * ```html * *

Drop files here

* * ``` */ declare class DbxFileUploadAreaComponent extends AbstractDbxFileUploadComponent { readonly icon: _angular_core.InputSignal>; readonly text: _angular_core.InputSignal>; readonly hint: _angular_core.InputSignal>; readonly show: _angular_core.InputSignal; readonly hintSignal: _angular_core.Signal; readonly filesChanged: _angular_core.OutputEmitterRef; readonly areaClicked: _angular_core.OutputEmitterRef; readonly areaDragActiveChanged: _angular_core.OutputEmitterRef; readonly dragOverStateSignal: _angular_core.WritableSignal; readonly filesAcceptedFunctionSignal: _angular_core.Signal<_dereekb_dbx_web.FileArrayAcceptMatchFunction>; onClick(evt: MouseEvent): void; onDragOver(evt: DragEvent): void; onDragLeave(evt: DragEvent): void; onDrop(evt: DragEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Display mode for the file upload component: area-only, button-only, or both (default). */ type DbxFileUploadMode = 'area' | 'button' | 'default'; /** * Configuration for the combined file upload component, controlling display mode, accept filters, and area/button appearance. */ interface DbxFileUploadComponentConfig { readonly mode?: DbxFileUploadMode; readonly accept?: Maybe; readonly multiple?: Maybe; /** * The most files that can be selected at once. Ignored while multiple is false. */ readonly maxFiles?: Maybe; /** * If true, the area will be clickable to open the file picker. */ readonly clickAreaToUpload?: Maybe; readonly area?: Maybe<{ readonly icon?: Maybe; readonly text?: Maybe; readonly hint?: Maybe; }>; readonly button?: Maybe<{ readonly icon?: Maybe; readonly text?: Maybe; readonly style?: DbxButtonStyle; }>; } /** * Combines a drag-and-drop upload area with a file picker button into a single configurable component. * * Supports area-only, button-only, or combined (default) display modes. * * @example * ```html * * ``` */ declare class DbxFileUploadComponent extends AbstractDbxFileUploadComponent { readonly config: _angular_core.InputSignal>; readonly area: _angular_core.Signal; readonly button: _angular_core.Signal; readonly buttonStyle: _angular_core.InputSignal>; readonly buttonDisplay: _angular_core.InputSignal>; readonly mode: _angular_core.InputSignal>; readonly text: _angular_core.InputSignal>; readonly icon: _angular_core.InputSignal>; readonly hint: _angular_core.InputSignal>; readonly modeSignal: _angular_core.Signal<"default" | "button" | "area">; readonly showButtonSignal: _angular_core.Signal; readonly showAreaSignal: _angular_core.Signal; readonly clickAreaToUpload: _angular_core.InputSignal>; readonly clickAreaToUploadSignal: _angular_core.Signal>; readonly buttonTextSignal: _angular_core.Signal>; readonly buttonIconSignal: _angular_core.Signal>; readonly areaTextSignal: _angular_core.Signal>; readonly areaIconSignal: _angular_core.Signal>; readonly areaHintSignal: _angular_core.Signal>; readonly uploadMultipleSignal: _angular_core.Signal>; readonly uploadMaxFilesSignal: _angular_core.Signal>; readonly uploadAcceptSignal: _angular_core.Signal; readonly filesChanged: _angular_core.OutputEmitterRef; areaClicked(): void; areaFilesChanged(event: DbxFileUploadAreaFilesChangedEvent): void; buttonFilesChanged(event: DbxFileUploadButtonFilesChangedEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Possible high-level UI states for a {@link DbxPdfMergeEditorFileUploadComponent}. * * - `no_file` — the slot owns no entries. * - `valid` — the slot owns entries and they satisfy the slot's `minFiles`/`maxFiles` thresholds with no validation in flight. * - `invalid` — the slot owns entries but they fail validation, are still being checked, or violate the slot's thresholds. */ type DbxPdfMergeEditorFileUploadState = 'no_file' | 'valid' | 'invalid'; /** * Configures a {@link DbxPdfMergeEditorFileUploadComponent} slot — accept filter, multiplicity, validation thresholds, and the appearance passed through to the underlying {@link DbxFileUploadComponent}. */ interface DbxPdfMergeEditorFileUploadConfig { /** * Override for the accept filter. Defaults to {@link DEFAULT_PDF_MERGE_ACCEPT}. */ readonly accept?: Maybe; /** * Whether the slot accepts multiple files. Defaults to `false` — slots are usually single-file. */ readonly multiple?: Maybe; /** * Whether the slot must own a valid file for the validator delegate to report ready. Defaults to `true`. When `false`, the slot reports valid in the `no_file` state and only blocks the merge while `invalid`. */ readonly required?: Maybe; /** * Minimum number of `ready` entries required for the slot to report valid. Defaults to `1`. */ readonly minFiles?: Maybe; /** * Optional cap on the number of files this slot will accept. Drives both visibility of the uploader (hidden once the owned-entry count reaches `maxFiles`) and validity (the slot reports invalid if `readyCount > maxFiles`). For single-file slots (`multiple: false`) the implicit cap is `1` regardless of this value. */ readonly maxFiles?: Maybe; /** * Optional heading shown above the upload area. */ readonly label?: Maybe; /** * Optional hint passed through to the upload area. */ readonly hint?: Maybe; /** * Optional button text passed through to the upload component. */ readonly text?: Maybe; /** * Optional button icon passed through to the upload component. */ readonly icon?: Maybe; /** * Display mode for the underlying {@link DbxFileUploadComponent}. Defaults to `'default'` (area + button). */ readonly mode?: Maybe; /** * Optional per-slot image compression override. When omitted, the slot falls back to the ancestor {@link DbxPdfMergeEditorComponent} input config and finally to the workspace-wide {@link DBX_PDF_MERGE_EDITOR_CONFIG} token. */ readonly imageCompression?: Maybe; /** * Whether the slot header offers an Add button once the slot owns entries and still has room under its capacity. Defaults to `true`. * * While this is enabled the full drop area is the slot's *empty* state only: once the slot owns something, the area collapses and this compact button becomes the way to add more, so the section never shows two competing add affordances. Set `false` to keep the pre-existing behavior, where the drop area stays visible until the slot reaches capacity. */ readonly showAddButton?: Maybe; /** * Whether the slot header offers a Clear button while the slot owns entries. Defaults to `true`. * * Clearing is also the slot's replace path: a single-file slot at capacity has no Add button, so clearing is how its file is swapped. */ readonly showClearButton?: Maybe; /** * Overrides merged over the default confirmation dialog shown before the slot is cleared. Set `autoConfirm: true` to clear without prompting. */ readonly clearConfirm?: Maybe; /** * Text for the header Add button. Defaults to `'Add'`. */ readonly addButtonText?: Maybe; /** * Text for the header Clear button. Defaults to `'Clear'`. */ readonly clearButtonText?: Maybe; } /** * Slot-scoped uploader for use inside a {@link DbxPdfMergeEditorComponent}. Adds files to the shared {@link DbxPdfMergeEditorStore} tagged with this slot's `slotId`, displays the slot's owned entries inline using {@link DbxPdfMergeEntryComponent}, and reports its readiness to the optional ancestor {@link DbxPdfMergeEditorFileUploadValidatorDirective}. On destroy the slot removes its owned entries from the store. * * Projects an `` slot inside its header element so consumers can render state-aware indicators (e.g. via the `dbxPdfMergeEditorFileUploadHasState` structural directive) alongside the optional `label`. * * Once the slot owns entries its header gains an Add button (while the slot is under capacity) and a Clear button, so a section that already has content can still be extended, emptied, or replaced. Clearing runs as its own `dbxAction` behind a `dbxActionConfirm` prompt — a misclick costs a dialog, not the section's files. * * @example * ```html * * check_circle * * ``` */ declare class DbxPdfMergeEditorFileUploadComponent implements OnInit, OnDestroy, DbxPdfMergeEditorFileUploadValidatorSlot { readonly store: DbxPdfMergeEditorStore; private readonly _validator; private readonly _injectedConfig; private readonly _preserveEntriesOnDestroy; /** * The slot id this component registered with the store, captured at registration time so destroy deregisters the same key. `null` before {@link ngOnInit} and after teardown. */ private _registeredSlotId; readonly slotId: _angular_core.InputSignal; readonly config: _angular_core.InputSignal>; readonly acceptSignal: _angular_core.Signal; readonly multipleSignal: _angular_core.Signal; readonly modeSignal: _angular_core.Signal; readonly labelSignal: _angular_core.Signal>; readonly hintSignal: _angular_core.Signal>; readonly textSignal: _angular_core.Signal; readonly iconSignal: _angular_core.Signal; readonly requiredSignal: _angular_core.Signal; readonly minFilesSignal: _angular_core.Signal; readonly maxFilesSignal: _angular_core.Signal>; /** * Effective upper bound on the number of owned entries this slot will accept. Defaults to `maxFiles` when set, `1` for single-file slots (`multiple: false`), and {@link Number.POSITIVE_INFINITY} for multi-file slots without an explicit cap. */ readonly capacitySignal: _angular_core.Signal; /** * Live entries owned by this slot, derived from {@link DbxPdfMergeEditorStore.entriesForSlotId$}. Each entry carries the `ignored` flag set by the store under the active {@link DbxPdfMergeEncryptedHandling}. */ readonly ownedEntries$: Observable; readonly ownedEntriesSignal: _angular_core.Signal; /** * Whether the shared store has page editing enabled. Drives whether this slot lists its own pages or its own files. */ readonly pageEditingSignal: _angular_core.Signal; /** * Pages contributed by this slot's entries. Empty while page editing is disabled. */ readonly ownedPages$: Observable; /** * Whether an encrypted PDF in another section (or in the editor's own upload area) has taken over the whole document under `focus` handling, leaving this section with nothing to contribute. * * Anything added here while that is true would be ignored by the merge, so the slot withdraws its add affordances rather than inviting an upload it will silently drop — and waives its own `required` check in {@link isValid$}, since an untouchable section must not be able to block the merge forever. */ readonly supersededByEncrypted$: Observable; readonly supersededByEncryptedSignal: _angular_core.Signal; readonly supersededMessage = "An encrypted PDF is being used as the whole document."; /** * Whether the slot still has room for more files. Gates every add affordance — once the slot is at capacity, or an encrypted document has superseded the section, neither the drop area nor the header Add button is offered, and the user must clear the slot (or remove an entry) to add another. */ readonly canAddFilesSignal: _angular_core.Signal; readonly showAddButtonConfigSignal: _angular_core.Signal; readonly showClearButtonConfigSignal: _angular_core.Signal; /** * Whether the compact header Add button is rendered. Only meaningful once the slot owns something — while it is empty the drop area is already the add affordance. */ readonly showAddButtonSignal: _angular_core.Signal; readonly showClearButtonSignal: _angular_core.Signal; /** * Whether the full drop area is rendered. It is the slot's empty state while the header Add button is enabled; with the button turned off it falls back to staying visible until the slot reaches capacity. */ readonly showUploadAreaSignal: _angular_core.Signal; readonly addButtonTextSignal: _angular_core.Signal; readonly clearButtonTextSignal: _angular_core.Signal; readonly addButtonAriaLabelSignal: _angular_core.Signal; readonly clearButtonAriaLabelSignal: _angular_core.Signal; /** * Config for the confirmation shown before the slot is cleared. The slot's `label` is folded into the default title so a page of sections says which one is about to be emptied; `clearConfirm` overrides any field of it. */ readonly clearConfirmSignal: _angular_core.Signal>; /** * Clears every entry this slot owns. Runs as the handler of the header's own `dbxAction`, so the `dbxActionConfirm` on that action is what stands between a misclick and the section's files. * * @param _value - Unused. The confirmation supplies no value, only the go-ahead. * @param context - Work context completed as soon as the store drops the entries. */ readonly handleClear: WorkUsingContext; /** * High-level state of the slot — `no_file` when empty, `valid` when owned entries satisfy the slot's thresholds, `invalid` when owned entries fail or are still being validated. */ readonly state$: Observable; readonly stateSignal: _angular_core.Signal; /** * Per-slot validity stream consumed by {@link DbxPdfMergeEditorFileUploadValidatorDirective}. Reports `true` when the slot is `valid` or when the slot is `no_file` and not `required`. An `invalid` state always reports `false`, even on optional slots — bad files block the merge until the user removes them. * * A slot superseded by an encrypted document reports `true` unconditionally: its contents cannot reach the output either way, so holding the merge for a section the user can no longer fill would make an encrypted upload impossible to complete in a slotted editor. */ readonly isValid$: Observable; readonly isValidSignal: _angular_core.Signal; ngOnInit(): void; ngOnDestroy(): void; onDrop(event: CdkDragDrop): void; /** * Store-level image-compression default pushed by {@link DbxPdfMergeEditorStoreDirective}. Resolved between the slot's own override and the workspace-wide token. */ readonly storeImageCompressionSignal: _angular_core.Signal>; /** * Resolves the active image compression config: per-slot override → store-level default → workspace-wide DI token. The store tier lets a {@link DbxPdfMergeEditorStoreDirective} `[config]` supply a shared default (e.g. through the upload dialog) while a slot's own `imageCompression` still wins. */ readonly effectiveImageCompressionSignal: _angular_core.Signal>; onFiles(event: DbxFileUploadFilesChangedEvent): Promise; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Directive that registers as the active {@link DbxPdfMergeEditorValidator} on a {@link DbxPdfMergeEditorStore} and gates merge emissions on the readiness of every registered slot. {@link DbxPdfMergeEditorFileUploadComponent} instances walk the injector tree, find this directive, and call {@link registerSlot}/{@link unregisterSlot} during their own lifecycle. * * This slot set is intentionally separate from {@link DbxPdfMergeEditorStore.registeredSlotIds$}, and the two should not be merged. This one is keyed by object identity because it exists solely to `combineLatest` each slot's `isValid$`; the store's is keyed by slot id, answers "which sections does this editor declare", and must be populated whether or not a validator is present — which is why it cannot live on this optional directive. * * @example * ```html * *
* * *
* * ``` */ declare class DbxPdfMergeEditorFileUploadValidatorDirective implements OnInit, OnDestroy { readonly store: DbxPdfMergeEditorStore; private readonly _slots$; /** * Emits `true` when every registered slot reports valid (or when no slots are registered yet). Multicast via {@link shareReplay}. */ readonly isValid$: Observable; ngOnInit(): void; ngOnDestroy(): void; /** * Adds a slot to the active set. Idempotent — registering the same slot twice has no effect. * * @param slot - Slot component to track. */ registerSlot(slot: DbxPdfMergeEditorFileUploadValidatorSlot): void; /** * Removes a slot from the active set. No-op when the slot is not currently registered. * * @param slot - Slot component to drop. */ unregisterSlot(slot: DbxPdfMergeEditorFileUploadValidatorSlot): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Structural directive that conditionally renders its host element based on the current state of an ancestor {@link DbxPdfMergeEditorFileUploadComponent}. * * Use it inside a slot's projected header content to render state-aware indicators — icons, badges, status text — without subscribing to the slot's `state$` manually. * * @example * ```html * * check_circle * error * radio_button_unchecked * * ``` */ declare class DbxPdfMergeEditorFileUploadHasStateDirective extends AbstractIfDirective { private readonly _slot; readonly targetState: _angular_core.InputSignal>>; readonly targetState$: Observable>>; readonly show$: Observable; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Renders the staged entries inside a CDK drop list. Each row is a {@link DbxPdfMergeEntryComponent} that hosts its own `cdkDrag`, so reordering events bubble up here as `cdkDropListDropped` and forward to the store's `moveEntry` updater. */ declare class DbxPdfMergeListComponent { readonly store: DbxPdfMergeEditorStore; readonly entries$: rxjs.Observable<_dereekb_dbx_web.PdfMergeEntryView[]>; onDrop(event: CdkDragDrop): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Single row inside the {@link DbxPdfMergeListComponent}: shows the file's icon, name, formatted size, status, drag handle, and a remove button. The component's template is itself a `cdkDrag` element so each row can be reordered inside the parent's `cdkDropList`. */ declare class DbxPdfMergeEntryComponent { readonly store: DbxPdfMergeEditorStore; readonly entry: _angular_core.InputSignal; readonly isIgnoredSignal: _angular_core.Signal; readonly isEncryptedSignal: _angular_core.Signal; readonly iconSignal: _angular_core.Signal; readonly sizeSignal: _angular_core.Signal; readonly isValidatingSignal: _angular_core.Signal; readonly isErrorSignal: _angular_core.Signal; readonly statusLabelSignal: _angular_core.Signal; readonly compressionLabelSignal: _angular_core.Signal>; onRemove(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Single page row inside a {@link DbxPdfMergePageListComponent} group: shows which source file and page it came from, its dimensions and rotation, and controls to rotate it, mark it for removal, and drag it to a new position. * * The template's root element is itself a `cdkDrag`, matching {@link DbxPdfMergeEntryComponent}, so rows reorder inside their group's drop list. */ declare class DbxPdfMergePageComponent { readonly store: DbxPdfMergeEditorStore; readonly page: _angular_core.InputSignal; readonly removedSignal: _angular_core.Signal; readonly iconSignal: _angular_core.Signal<"image" | "picture_as_pdf">; readonly removeLabelSignal: _angular_core.Signal<"Restore page" | "Mark page for removal">; readonly positionLabelSignal: _angular_core.Signal; readonly dimensionsLabelSignal: _angular_core.Signal>; readonly rotationLabelSignal: _angular_core.Signal>; onRotate(): void; onToggleRemoved(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Renders the editor's page plan while page editing is enabled, one CDK drop list per group. * * Separate, unconnected drop lists are what confine reordering to a single slot: CDK will not let a drag cross into a list it is not connected to, so the rule needs no guard code. Bind {@link slotId} to render only that slot's group — used by {@link DbxPdfMergeEditorFileUploadComponent} to show its own pages inline. Leave it unbound to render every group. * * Entries that could not be expanded into pages (encrypted, or unparseable) are listed separately below the groups rather than silently omitted. */ declare class DbxPdfMergePageListComponent { readonly store: DbxPdfMergeEditorStore; /** * Renders only this slot's group when bound. Leave unbound to render every group. */ readonly slotId: _angular_core.InputSignal>; /** * Whether to show each group's slot name above its pages. Defaults to `true` when rendering every group and `false` when scoped to one slot, where the slot already has its own heading. */ readonly showGroupLabels: _angular_core.InputSignal>; private readonly _slotId$; readonly groups$: Observable; readonly unexpandable$: Observable; readonly groupsSignal: _angular_core.Signal; readonly unexpandableSignal: _angular_core.Signal; readonly showGroupLabelsSignal: _angular_core.Signal; labelForGroup(group: PdfMergePageGroup): Maybe; /** * Explains why the entry has no pages in the list. The `ignored` check comes first: an ignored encrypted entry is out of the merge because something else is the focus target, which is the more actionable of the two facts. * * @param entry - Entry contributing no pages. * @returns Message for the row. */ messageForUnexpandable(entry: PdfMergeEntryView): string; iconForUnexpandable(entry: PdfMergeEntryView): string; sizeForUnexpandable(entry: PdfMergeEntryView): string; onRemove(entry: PdfMergeEntryView): void; onDrop(group: PdfMergePageGroup, event: CdkDragDrop): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Messages shown for each reason an import can fail. */ declare const DBX_PDF_MERGE_IMPORT_ERROR_MESSAGES: Record; /** * Configures the appearance of a {@link DbxPdfMergeImportComponent}. */ interface DbxPdfMergeImportConfig { readonly label?: Maybe; readonly hint?: Maybe; readonly text?: Maybe; readonly icon?: Maybe; readonly mode?: Maybe; readonly accept?: Maybe; } /** * Loads a PDF that was previously exported from the editor with an embedded manifest, and repopulates the editor's slots from it. * * This is the payoff of the sidecar: a completed single-file document goes back to being the set of per-slot documents it was assembled from, so a user can replace or edit one section in place instead of rebuilding the whole file. Every entry currently in the store is replaced. * * **Zero configuration.** The sections this editor accepts are read from the `` slots mounted against the shared {@link DbxPdfMergeEditorStore} (see {@link DbxPdfMergeEditorStore.registeredSlotIds$}), so the common case needs no bindings at all. A file naming any other section is rejected rather than partially imported — without that check, entries carrying an unrecognized slot id would import and then render nowhere. * * **Renders nothing when no sections are configured.** This component exists to split a document back into slots, so with no slots mounted (and no explicit {@link expectedSlotIds}) it has nothing to import into and collapses to zero size. Bind {@link enforceExpectedSlots} to `false` for the unusual case of an editor that wants the import affordance without declaring slots. * * @example * ```html * * * * * * * ``` */ declare class DbxPdfMergeImportComponent { readonly store: DbxPdfMergeEditorStore; readonly config: _angular_core.InputSignal>; /** * Optional override for the slot ids this editor renders. Leave unbound to derive them from the slots mounted against the store — the zero-configuration default. When set, a file whose manifest names any other slot is rejected rather than partially imported. * * An explicitly bound empty array reads as "this editor deliberately has no sections" and hides the component, the same as having no slots mounted. */ readonly expectedSlotIds: _angular_core.InputSignal>; /** * Whether the imported file's sections must match this editor's. Defaults to `true`. * * Binding `false` is the single escape hatch for an editor with no slots that still wants the import affordance: it both skips the check and keeps the component rendered. */ readonly enforceExpectedSlots: _angular_core.InputSignal; readonly imported: _angular_core.OutputEmitterRef; readonly importFailed: _angular_core.OutputEmitterRef; /** * Emits the expected sections the imported file did not fill, when there are any. The import itself still succeeds — a missing section is a partial state the user can fill in. */ readonly missingSlots: _angular_core.OutputEmitterRef; private readonly _error; private readonly _result; private readonly _missingSlotIds; readonly errorSignal: _angular_core.Signal>; readonly resultSignal: _angular_core.Signal>; readonly missingSlotIdsSignal: _angular_core.Signal; private readonly _registeredSlotIdsSignal; /** * The exact import state the notices below currently describe — the one this component's own picked file produced. Identity, not contents: it is the only reliable way to tell "still my file" from "the store moved on". */ private _displayedState; constructor(); /** * The sections an imported file is allowed to name, or `null` when no check applies. Resolves the explicit {@link expectedSlotIds} binding over the slots registered with the store. */ readonly effectiveExpectedSlotIdsSignal: _angular_core.Signal>; /** * Whether this component has anything to import into. `false` collapses it to nothing — see the class docs. */ readonly activeSignal: _angular_core.Signal; readonly acceptSignal: _angular_core.Signal; readonly modeSignal: _angular_core.Signal; readonly labelSignal: _angular_core.Signal>; readonly hintSignal: _angular_core.Signal; readonly textSignal: _angular_core.Signal; readonly iconSignal: _angular_core.Signal; readonly successLabelSignal: _angular_core.Signal>; /** * Warning shown when the imported file left one or more expected sections empty. The import succeeded — this only explains why a slot is still blank. */ readonly missingLabelSignal: _angular_core.Signal>; onFiles(event: DbxFileUploadFilesChangedEvent): Promise; private messageForFailure; private fail; /** * Drops every notice this component renders, returning it to its pre-import appearance and releasing its claim on the store's import state. */ private resetDisplay; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Display config for the dialog's footer Upload button. * * Each field is optional — omit any field to inherit the dialog's defaults (`text: 'Upload'`, `icon: 'cloud_upload'`, `color: 'primary'`, `raised: true`). Set a boolean variant flag (`flat`, `stroked`, `tonal`, `basic`) together with `raised: false` to switch the Material button variant. */ interface DbxPdfMergeUploadDialogUploadButtonConfig { readonly text?: Maybe; readonly icon?: Maybe; readonly style?: Maybe; readonly color?: Maybe; readonly raised?: Maybe; readonly flat?: Maybe; readonly stroked?: Maybe; readonly tonal?: Maybe; readonly basic?: Maybe; } /** * Configuration for {@link DbxPdfMergeUploadDialogComponent.openDialog}. * * The {@link injector} is required: it is forwarded to {@link MatDialog.open} so the dialog's content shares the caller's element-injector tree and resolves the ancestor-provided {@link DbxPdfMergeEditorStore}. Pass the {@link Injector} obtained at the call site (typically the button's `inject(Injector)`). * * When {@link componentConfig} is supplied, the dialog renders a {@link DbxInjectionComponent} bound to that config in place of the default {@link DbxPdfMergeEditorComponent}. Do NOT set `componentConfig.injector` if you want the injected component to resolve the ancestor store — leaving it undefined lets {@link DbxInjectionComponent} resolve from the dialog's own injector. * * Set {@link showUploadButton} to `false` to hide the footer Upload button — useful when the projected content provides its own confirm affordance (or when the dialog is purely informational and the caller reads from the store on close). */ interface DbxPdfMergeUploadDialogConfig { readonly injector: Injector; readonly componentConfig?: Maybe; readonly showUploadButton?: Maybe; readonly uploadButtonConfig?: Maybe; } /** * Dialog content that hosts the PDF merge editor (or a caller-supplied alternative) inside a {@link MatDialog}. Closes with the merged {@link Blob} when the user clicks the footer Upload button. * * The dialog inherits its caller's injector via {@link MatDialog.open}'s `injector` option, so an ancestor-provided {@link DbxPdfMergeEditorStore} is shared with the embedded editor. The footer Upload button is disabled while the store reports invalid (`isValid$ === false`) or while there are no ready entries, and renders a spinner while validation is in flight. Closing the dialog without uploading leaves the store's entries intact so the user can reopen and resume. * * Use {@link DbxPdfMergeUploadButtonComponent} to open this dialog with the canonical configuration, or call {@link DbxPdfMergeUploadDialogComponent.openDialog} directly. */ declare class DbxPdfMergeUploadDialogComponent extends AbstractDialogDirective { readonly store: DbxPdfMergeEditorStore; readonly componentConfigSignal: _angular_core.Signal>>; readonly showUploadButtonSignal: _angular_core.Signal; readonly uploadIconSignal: _angular_core.Signal>; readonly uploadTextSignal: _angular_core.Signal>; readonly uploadStyleSignal: _angular_core.Signal>; readonly uploadColorSignal: _angular_core.Signal>; readonly uploadRaisedSignal: _angular_core.Signal; readonly uploadFlatSignal: _angular_core.Signal; readonly uploadStrokedSignal: _angular_core.Signal; readonly uploadTonalSignal: _angular_core.Signal; readonly uploadBasicSignal: _angular_core.Signal; readonly uploadWorkingSignal: _angular_core.Signal; private readonly _hasReadyEntriesSignal; private readonly _isValidSignal; readonly uploadDisabledSignal: _angular_core.Signal; confirmUpload(): void; static openDialog(matDialog: MatDialog, config: DbxPdfMergeUploadDialogConfig): MatDialogRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Configuration for {@link DbxPdfMergeUploadButtonDirective}. Carries only dialog-related options — the trigger button's appearance is owned by the host {@link DbxButton} (its own `text`, `icon`, `raised`, `color`, `buttonStyle` inputs). */ interface DbxPdfMergeUploadButtonConfig { /** * Optional component config rendered inside the dialog in place of the default {@link DbxPdfMergeEditorComponent}. Leave {@link DbxInjectionComponentConfig.injector} unset so the injected component inherits the dialog's injector and resolves the ancestor {@link DbxPdfMergeEditorStore}. */ readonly customDialogContent?: Maybe; /** * When `false`, the dialog's footer Upload button is hidden — useful when the projected content provides its own confirm affordance. */ readonly showUploadButton?: Maybe; /** * Display overrides for the dialog's footer Upload button — text, icon, color, raised, variant flags, button style. */ readonly uploadButtonConfig?: Maybe; } /** * Drop-in interceptor for a stock `` that opens {@link DbxPdfMergeUploadDialogComponent} on click. The click is allowed to propagate (so a sibling `dbxActionButton` can call `source.trigger()`) only when the user confirms the upload from inside the dialog — closing the dialog without confirming drops the click. * * Action-blind by design — this directive only links a `` to the merge dialog. To bridge the result into a surrounding `dbxAction`, compose with {@link DbxPdfMergeUploadActionDirective} (`[dbxPdfMergeUploadAction]`), which listens for the action's `triggered$` and supplies `store.mergeOutput$` to `source.readyValue()`. The trio composes on a stock `` alongside `dbxActionButton`: * * - Host `` owns its own appearance (`text`, `icon`, `raised`, `color`, …). * - `dbxActionButton` drives `working`/`disabled` from the action and calls `source.trigger()` on click. * - `dbxPdfMergeUploadButton` (this directive) intercepts the click, opens the dialog, and resolves the interceptor with `true` only when the user confirms. * - `dbxPdfMergeUploadAction` reacts to `source.triggered$` by pulling the latest `store.mergeOutput$` into `source.readyValue(blob)` so the action handler runs with the merged PDF. * * An ancestor-provided {@link DbxPdfMergeEditorStore} is required — supply via {@link DbxPdfMergeEditorStoreDirective} on a wrapping element, or `providers: [DbxPdfMergeEditorStore]` on the parent component. * * @example * ```html *
*
* *
*
* ``` */ declare class DbxPdfMergeUploadButtonDirective { readonly button: DbxButton; readonly store: DbxPdfMergeEditorStore; readonly dbxPdfMergeUploadButton: _angular_core.InputSignalWithTransform, Maybe<"" | DbxPdfMergeUploadButtonConfig>>; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Bridges an ancestor `dbxAction` to an ancestor {@link DbxPdfMergeEditorStore}: when the action's `triggered$` fires, the directive reads the latest `mergeOutput$` from the store and calls `source.readyValue(blob)` so the action handler runs with the merged PDF. * * Action-aware companion to {@link DbxPdfMergeUploadButtonDirective}, which is intentionally action-blind. Together with the stock `dbxActionButton`, all three compose on a single ``: * * - `dbxActionButton` fires `source.trigger()` on click and reflects the action's working/disabled state on the button. * - `dbxPdfMergeUploadButton` opens the merge dialog and only allows the click to propagate if the user confirms. * - `dbxPdfMergeUploadAction` (this directive) listens for `triggered$` and supplies the store's merge output to the action. * * The trigger-then-readyValue ordering matches the canonical {@link DbxActionContextStoreSourceInstance.triggerWithValue} flow — `readyValue` is only honored after `trigger()` has moved the state out of `IDLE`, so listening to `triggered$` is what makes the value actually reach the handler. * * @example * ```html *
*
* *
*
* ``` */ declare class DbxPdfMergeUploadActionDirective { readonly source: DbxActionContextStoreSourceInstance; readonly store: DbxPdfMergeEditorStore; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Renders a PDF in a fixed-height embed container. Accepts either a URL or a `Blob` source. * * @example * ```html * * ``` */ declare class DbxPdfPreviewComponent { readonly blob: _angular_core.ModelSignal>; readonly srcUrl: _angular_core.ModelSignal>; readonly downloadFileName: _angular_core.ModelSignal>; readonly mimeType: string; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Configuration for opening a PDF preview dialog. Extends {@link MatDialogConfig} with PDF-specific source options (blob or URL) and an optional download file name. */ interface DbxPdfPreviewDialogConfig extends Omit { readonly srcUrl?: Maybe; readonly blob?: Maybe; readonly downloadFileName?: Maybe; } /** * Opens a dialog containing a {@link DbxPdfPreviewComponent} for previewing a PDF blob or URL. * * @param matDialog - The {@link MatDialog} instance to use. * @param config - Source (blob or URL) and Material dialog options. * @returns The {@link MatDialogRef} for the opened dialog. */ declare function openPdfPreviewDialog(matDialog: MatDialog, config: DbxPdfPreviewDialogConfig): MatDialogRef, void>; /** * An MCP server that users can connect an AI assistant to. */ interface DbxMcpConnectServer { /** * The MCP server's Streamable HTTP endpoint url, e.g. `https://api.example.com/mcp`. */ readonly url: WebsiteUrl; /** * Local key for the server, used in CLI commands and config files (e.g. `claude mcp add ...`). * * Derived from the url's hostname when not set. See {@link dbxMcpConnectServerName}. */ readonly name?: Maybe; /** * Display name for the server, suggested as the connector name in the clients that ask for one. * * Defaults to the server's name. */ readonly label?: Maybe; /** * The pre-registered OAuth client the app's users sign in to the server with, used when a view is not given its own. * * Anything set here ships with the app, so a client secret here is visible to every user. Pass a per-user client to the view instead when the * secret must stay private. */ readonly oauthClient?: Maybe; } /** * Optional app-level source of the {@link DbxMcpConnectServer} used by `dbx-mcp-connect-view` and `dbx-mcp-connect-button` * when no server is passed to them directly. * * `provideDbxFirebaseOidc()` in `@dereekb/dbx-firebase/oidc` provides this from the app's OIDC config. */ declare const DBX_MCP_CONNECT_SERVER: InjectionToken; /** * Fallback server name used when the url cannot be parsed. */ declare const DEFAULT_DBX_MCP_CONNECT_SERVER_NAME = "mcp"; /** * Returns the local key to use for the server in CLI commands and config files. * * Uses {@link DbxMcpConnectServer.name} when set. Otherwise derives it from the url's hostname by removing a leading `api.`, `www.`, or `mcp.` * and taking the first label, so `https://api.example.com/mcp` becomes `example` and `http://localhost:9901/mcp` becomes `localhost`. * * @param server - The server to name. * @returns The server's local key. */ declare function dbxMcpConnectServerName(server: DbxMcpConnectServer): string; /** * Returns the display name to use for the server. * * @param server - The server to label. * @returns {@link DbxMcpConnectServer.label} When set, otherwise the server's name from {@link dbxMcpConnectServerName}. */ declare function dbxMcpConnectServerLabel(server: DbxMcpConnectServer): string; /** * Id of a pre-registered OAuth client. */ type DbxMcpConnectOAuthClientId = string; /** * Secret of a pre-registered confidential OAuth client. */ type DbxMcpConnectOAuthClientSecret = string; /** * A pre-registered OAuth client that an AI assistant signs in to the MCP server with. * * Needed when the server's authorization server does not offer dynamic client registration, which `@dereekb/firebase-server/oidc` turns off by * default. The client must allow the assistant's OAuth redirect URIs. */ interface DbxMcpConnectOAuthClient { /** * The client id. */ readonly clientId: DbxMcpConnectOAuthClientId; /** * The client secret, when it is known here. Omit for a public client that signs in with PKCE alone, or for a confidential client whose secret * the user already has (set {@link confidential} then). */ readonly clientSecret?: Maybe; /** * Whether the client signs in with a client secret. Defaults to whether {@link clientSecret} is set. * * Set it to true for a client whose secret is not known here, such as one shown only once when the client was created, so the instructions * still ask the user for it instead of telling them to leave it blank. */ readonly confidential?: Maybe; } /** * Text shown in a snippet in place of a confidential client's secret when the secret is not known. */ declare const DBX_MCP_CONNECT_CLIENT_SECRET_PLACEHOLDER = ""; /** * Returns whether the OAuth client signs in with a client secret. * * @param oauthClient - The OAuth client. * @returns {@link DbxMcpConnectOAuthClient.confidential} When set, otherwise whether the client secret is set. */ declare function isConfidentialDbxMcpConnectOAuthClient(oauthClient: DbxMcpConnectOAuthClient): boolean; /** * Unique identifier of a {@link DbxMcpConnectClient}. */ type DbxMcpConnectClientId = string; /** * A copyable command or config file shown with a client's instructions. */ interface DbxMcpConnectClientInstructionsSnippet { /** * Describes what the snippet is and where it goes, e.g. "Run in your terminal". */ readonly label: string; /** * The text to copy. */ readonly text: string; } /** * A link shown with a client's instructions, such as a settings page or an install deeplink. */ interface DbxMcpConnectClientInstructionsAction { /** * Button text. */ readonly text: string; /** * Button icon. */ readonly icon?: Maybe; /** * Url opened in a new tab. May use an app's custom scheme, such as `cursor://` or `vscode:`. */ readonly url: string; } /** * Instructions for connecting one client to an MCP server. * * Shown in order: the steps, the snippet, the injected component, then the action link. */ interface DbxMcpConnectClientInstructions { /** * Short steps shown in order. */ readonly steps?: Maybe; /** * Copyable command or config file. */ readonly snippet?: Maybe; /** * Link to the client's settings, or an install deeplink. */ readonly action?: Maybe; /** * Custom content shown after the steps and snippet, such as a client that needs more than text to set up. * * Pass anything the component needs, such as the server or OAuth client from {@link DbxMcpConnectClientInstructionsParams}, as the config's * `data`, which the component reads with `inject(DBX_INJECTION_COMPONENT_DATA)`. */ readonly injection?: Maybe; } /** * Params for {@link DbxMcpConnectClient.instructions}. */ interface DbxMcpConnectClientInstructionsParams { /** * The server to connect to. */ readonly server: DbxMcpConnectServer; /** * The pre-registered OAuth client to sign in with. When unset, the instructions assume the assistant registers itself. */ readonly oauthClient?: Maybe; } /** * An AI assistant that can connect to an MCP server, along with how to connect it./** * An AI assistant that can connect to an MCP server, along with how to connect it. * * Vendors move menus, so keep the steps short and override a client per instance when its steps go stale. */ interface DbxMcpConnectClient { readonly id: DbxMcpConnectClientId; /** * Display name, e.g. "Claude Code". */ readonly label: string; /** * Optional icon shown next to the label. */ readonly icon?: Maybe; /** * Link to the vendor's documentation for connecting MCP servers. */ readonly docsUrl?: Maybe; /** * Builds the connect instructions for the input server and OAuth client. */ readonly instructions: (params: DbxMcpConnectClientInstructionsParams) => DbxMcpConnectClientInstructions; } /** * Claude on the web, Desktop, and mobile, connected through a custom connector. */ declare const CLAUDE_DBX_MCP_CONNECT_CLIENT: DbxMcpConnectClient; /** * Port Claude Code listens on for the OAuth callback when it signs in with a pre-registered OAuth client. */ declare const DEFAULT_CLAUDE_CODE_DBX_MCP_CONNECT_CALLBACK_PORT: PortNumber; /** * Config for {@link makeClaudeCodeDbxMcpConnectClient}. */ interface ClaudeCodeDbxMcpConnectClientConfig { /** * Port Claude Code listens on for the OAuth callback when it signs in with a pre-registered OAuth client. Claude Code otherwise picks a * random port, which a client registered with an exact `http://localhost:/callback` redirect URI rejects. * * Defaults to {@link DEFAULT_CLAUDE_CODE_DBX_MCP_CONNECT_CALLBACK_PORT}. */ readonly callbackPort?: Maybe; } /** * Creates a Claude Code client, connected with the `claude mcp add` command. * * With a pre-registered OAuth client, the command passes `--client-id`, `--client-secret` (Claude Code then asks for the secret, so it never * appears in the command), and `--callback-port`. The OAuth client must allow `http://localhost:/callback`. * * @param config - Optional config, such as the OAuth callback port. * @returns The Claude Code client. */ declare function makeClaudeCodeDbxMcpConnectClient(config?: Maybe): DbxMcpConnectClient; /** * Claude Code, connected with the `claude mcp add` command. Uses {@link DEFAULT_CLAUDE_CODE_DBX_MCP_CONNECT_CALLBACK_PORT}. */ declare const CLAUDE_CODE_DBX_MCP_CONNECT_CLIENT: DbxMcpConnectClient; /** * ChatGPT on the web, connected as a custom MCP server. */ declare const CHATGPT_DBX_MCP_CONNECT_CLIENT: DbxMcpConnectClient; /** * Returns the Cursor deeplink that installs the server. * * @param server - The server to install. * @returns A `cursor://anysphere.cursor-deeplink/mcp/install` url with the server's name and base64-encoded config. */ declare function cursorDbxMcpConnectInstallUrl(server: DbxMcpConnectServer): string; /** * Cursor, connected with an install deeplink or its `mcp.json` file. * * A pre-registered OAuth client goes in the `mcp.json` file's `auth` object. The deeplink is left out then, since Cursor only documents it for a * server url and a link should not carry a client secret. */ declare const CURSOR_DBX_MCP_CONNECT_CLIENT: DbxMcpConnectClient; /** * Returns the VS Code url that installs the server. * * @param server - The server to install. * @returns A `vscode:mcp/install` url with the server's url-encoded JSON config. */ declare function vscodeDbxMcpConnectInstallUrl(server: DbxMcpConnectServer): string; /** * VS Code (GitHub Copilot agent mode), connected with an install link or a `.vscode/mcp.json` file. * * A pre-registered OAuth client's id goes in the `mcp.json` file's `oauth` object, and VS Code stores its secret through the Set Client Secret * action above the server entry. The install link is left out then. */ declare const VSCODE_DBX_MCP_CONNECT_CLIENT: DbxMcpConnectClient; /** * Grok, connected through a custom connector. Not part of {@link DEFAULT_DBX_MCP_CONNECT_CLIENTS}. * * Grok's connectors do not take a pre-registered OAuth client, so with one configured the steps say that Grok must register itself. */ declare const GROK_DBX_MCP_CONNECT_CLIENT: DbxMcpConnectClient; /** * Clients shown by `dbx-mcp-connect-view` when none are configured. */ declare const DEFAULT_DBX_MCP_CONNECT_CLIENTS: DbxMcpConnectClient[]; /** * App-level config for {@link DbxMcpConnectService}. Provide it with `provideDbxMcpConnectService()`. */ declare abstract class DbxMcpConnectServiceConfig { /** * Clients shown by `dbx-mcp-connect-view` and `dbx-mcp-connect-button` when they are not given their own, in display order. * * Defaults to {@link DEFAULT_DBX_MCP_CONNECT_CLIENTS}. Leave a client out to hide it, or add your own. */ abstract readonly clients?: Maybe; /** * Id of the client selected at first when a view is not given its own. Defaults to the first client. */ abstract readonly defaultClientId?: Maybe; } /** * App-level source of the AI assistants that `dbx-mcp-connect-view` and `dbx-mcp-connect-button` show when they are not given their own. * * Starts from {@link DbxMcpConnectServiceConfig}, and can be changed at runtime, such as by a feature that registers its own client. The view * follows the changes. Provide it with `provideDbxMcpConnectService()`. Without it, the view shows {@link DEFAULT_DBX_MCP_CONNECT_CLIENTS}. */ declare class DbxMcpConnectService { private readonly _config; private readonly _clients; private readonly _defaultClientId; /** * The app's clients, in display order. */ readonly clientsSignal: _angular_core.Signal; /** * Id of the client selected at first, if set. */ readonly defaultClientIdSignal: _angular_core.Signal>; /** * Replaces the app's clients. * * @param clients - The clients to show, in display order. */ setClients(clients: DbxMcpConnectClient[]): void; /** * Adds clients to the end of the list. A client whose id is already registered replaces the existing one in place. * * @param clients - The client or clients to add. */ registerClients(clients: ArrayOrValue): void; /** * Removes clients from the list, hiding them. * * @param clientIds - Id or ids of the clients to remove. */ unregisterClients(clientIds: ArrayOrValue): void; /** * Sets the id of the client selected at first. * * @param clientId - The client id, or undefined to select the first client. */ setDefaultClientId(clientId: Maybe): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Config for {@link provideDbxMcpConnectService}. */ interface ProvideDbxMcpConnectServiceConfig { /** * The app's MCP server, provided as {@link DBX_MCP_CONNECT_SERVER}. * * Leave unset in apps that call `provideDbxFirebaseOidc()`, which provides the server from the app's OIDC config. */ readonly server?: Maybe; /** * The app's clients, in display order. See {@link DbxMcpConnectServiceConfig.clients}. */ readonly clients?: Maybe; /** * Id of the client selected at first. See {@link DbxMcpConnectServiceConfig.defaultClientId}. */ readonly defaultClientId?: Maybe; } /** * Creates EnvironmentProviders for {@link DbxMcpConnectService}, which sets the AI assistants that `dbx-mcp-connect-view` and * `dbx-mcp-connect-button` show across the app. * * @param config - Optional app-level config. * @returns EnvironmentProviders. * * @example * ```ts * provideDbxMcpConnectService({ clients: [...DEFAULT_DBX_MCP_CONNECT_CLIENTS, GROK_DBX_MCP_CONNECT_CLIENT], defaultClientId: 'claude-code' }) * ``` * * @__NO_SIDE_EFFECTS__ */ declare function provideDbxMcpConnectService(config?: ProvideDbxMcpConnectServiceConfig): EnvironmentProviders; /** * Hint shown above the MCP server url by {@link DbxMcpConnectViewComponent} when no hint is configured. */ declare const DEFAULT_DBX_MCP_CONNECT_VIEW_HINT = "Add this server to your AI assistant, then sign in to give it access to your account."; /** * Config for {@link DbxMcpConnectViewComponent}. The component's individual inputs take precedence. */ interface DbxMcpConnectViewConfig { /** * The server to connect to. Defaults to the server provided by {@link DBX_MCP_CONNECT_SERVER}. */ readonly server?: Maybe; /** * The pre-registered OAuth client the assistant signs in with. Its id and secret are shown with the server url and used in each client's * instructions. Defaults to the server's {@link DbxMcpConnectServer.oauthClient}. * * Leave unset when the server offers dynamic client registration and the assistants register themselves. */ readonly oauthClient?: Maybe; /** * Clients to show instructions for, in display order. Defaults to the app's clients from {@link DbxMcpConnectService}, or * {@link DEFAULT_DBX_MCP_CONNECT_CLIENTS} when the app does not provide the service. */ readonly clients?: Maybe; /** * Id of the client selected at first. Defaults to the app's default client from {@link DbxMcpConnectService}, then the first client. */ readonly defaultClientId?: Maybe; /** * Hint shown above the server url. Defaults to {@link DEFAULT_DBX_MCP_CONNECT_VIEW_HINT}. Pass an empty string to hide it. */ readonly hint?: Maybe; } /** * Shows an MCP server's url and short instructions for connecting AI assistants, such as Claude, Claude Code, ChatGPT, Cursor, and VS Code, to it. * * The server comes from the `server` input, then the `config` input, then the app's {@link DBX_MCP_CONNECT_SERVER}. Apps that call * `provideDbxFirebaseOidc()` provide that token, so the view needs no inputs there. * * The clients come from the `clients` input, then the `config` input, then the app's {@link DbxMcpConnectService} from * `provideDbxMcpConnectService()`, then {@link DEFAULT_DBX_MCP_CONNECT_CLIENTS}. * * Pass an `oauthClient` when the assistants must sign in with a pre-registered OAuth client. The view then shows its client id and secret, * hiding the secret until the user reveals it, and each client's instructions say where to enter them. * * @dbxWebComponent * @dbxWebSlug mcp-connect-view * @dbxWebCategory misc * @dbxWebRelated mcp-connect-button, click-to-copy-text * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxMcpConnectViewComponent { private readonly _defaultServer; private readonly _mcpConnectService; readonly config: _angular_core.InputSignal>; readonly server: _angular_core.InputSignal>; readonly oauthClient: _angular_core.InputSignal>; readonly clients: _angular_core.InputSignal>; readonly defaultClientId: _angular_core.InputSignal>; readonly hint: _angular_core.InputSignal>; readonly urlClipboardSnackbarMessagesConfig: CopyToClipboardFunctionWithSnackbarMessageSnackbarConfig; readonly clientIdClipboardSnackbarMessagesConfig: CopyToClipboardFunctionWithSnackbarMessageSnackbarConfig; readonly clientSecretClipboardSnackbarMessagesConfig: CopyToClipboardFunctionWithSnackbarMessageSnackbarConfig; readonly snippetClipboardSnackbarMessagesConfig: CopyToClipboardFunctionWithSnackbarMessageSnackbarConfig; readonly serverSignal: _angular_core.Signal; readonly oauthClientSignal: _angular_core.Signal>; /** * Whether the OAuth client signs in with a client secret, including one that is not known here. */ readonly oauthClientConfidentialSignal: _angular_core.Signal; readonly clientsSignal: _angular_core.Signal; readonly hintSignal: _angular_core.Signal; /** * Whether the client secret is shown, both in its field and inside snippets. Hidden at first, and toggled by the secret field. */ readonly showSecretSignal: _angular_core.WritableSignal; /** * Id of the selected client. Starts from the `defaultClientId` input, the config, or the app's {@link DbxMcpConnectService}, then follows the * toggle. */ readonly selectedClientIdSignal: _angular_core.WritableSignal>; readonly selectedClientSignal: _angular_core.Signal; readonly instructionsSignal: _angular_core.Signal<_dereekb_dbx_web.DbxMcpConnectClientInstructions | undefined>; /** * The snippet as displayed, with the client secret hidden until the user reveals it. Copying the snippet always copies the real text. */ readonly snippetDisplayTextSignal: _angular_core.Signal; readonly actionAnchorSignal: _angular_core.Signal>; onClientChange(event: MatButtonToggleChange): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Header shown by {@link DbxMcpConnectDialogComponent} when no header is configured. */ declare const DEFAULT_DBX_MCP_CONNECT_DIALOG_HEADER = "Connect an AI assistant"; /** * Width {@link DbxMcpConnectDialogComponent} opens at. Material narrows it on small screens. */ declare const DBX_MCP_CONNECT_DIALOG_WIDTH = "600px"; /** * Config for {@link DbxMcpConnectDialogComponent}. */ interface DbxMcpConnectDialogConfig extends DbxMcpConnectViewConfig { /** * Dialog header. Defaults to {@link DEFAULT_DBX_MCP_CONNECT_DIALOG_HEADER}. */ readonly header?: Maybe; } /** * Dialog that shows a {@link DbxMcpConnectViewComponent}: the app's MCP server url and how to connect AI assistants to it. * * Usually opened by `dbx-mcp-connect-button`. */ declare class DbxMcpConnectDialogComponent extends AbstractDialogDirective> { readonly headerSignal: _angular_core.Signal; static openDialog(matDialog: MatDialog, config?: Maybe): MatDialogRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Button display used by {@link DbxMcpConnectButtonComponent} when no display is configured. */ declare const DEFAULT_DBX_MCP_CONNECT_BUTTON_DISPLAY: DbxButtonDisplay; /** * Config for {@link DbxMcpConnectButtonComponent}, combining the dialog config with button display and style options. */ interface DbxMcpConnectButtonConfig extends DbxMcpConnectDialogConfig { /** * The display configuration for the button. Defaults to {@link DEFAULT_DBX_MCP_CONNECT_BUTTON_DISPLAY}. */ readonly buttonDisplay?: Maybe; /** * The style configuration for the button. */ readonly buttonStyle?: Maybe; } /** * Drop-in button that opens a dialog with the app's MCP server url and how to connect AI assistants to it. * * Needs no config in apps that call `provideDbxFirebaseOidc()`, which provides the server url. Otherwise, provide * `DBX_MCP_CONNECT_SERVER` or pass a server in the config. * * @dbxWebComponent * @dbxWebSlug mcp-connect-button * @dbxWebCategory button * @dbxWebRelated mcp-connect-view * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxMcpConnectButtonComponent { private readonly _matDialog; readonly config: _angular_core.InputSignal>; readonly buttonDisplaySignal: _angular_core.Signal; readonly buttonStyleSignal: _angular_core.Signal>; openDialog(): MatDialogRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Unique key used to identify a detach instance. */ type DbxDetachKey = string; /** * Default key used when no key is specified. */ declare const DEFAULT_DBX_DETACH_KEY: DbxDetachKey; /** * Possible display states for a detach instance. */ declare const DbxDetachWindowState: { /** * Content renders at an outlet location in the page. */ readonly ATTACHED: "attached"; /** * Content renders in a floating overlay (via ng-overlay-container). */ readonly DETACHED: "detached"; /** * Content is in the floating overlay but body is hidden (only controls visible). */ readonly MINIMIZED: "minimized"; }; /** * Union type of all possible detach window state values. */ type DbxDetachWindowStateType = (typeof DbxDetachWindowState)[keyof typeof DbxDetachWindowState]; /** * Overlay-specific configuration for a detach instance. */ interface DbxDetachOverlayConfig { readonly width?: string; readonly height?: string; readonly isDraggable?: boolean; } /** * Configuration for initializing a detach instance. * * Extends {@link DbxInjectionComponentConfig} with an optional key and overlay settings. */ interface DbxDetachConfig extends DbxInjectionComponentConfig { readonly key?: DbxDetachKey; readonly overlay?: DbxDetachOverlayConfig; } /** * Tracks a single detached component managed by {@link DbxDetachService}. * * The component is created imperatively and lives in the service. * Outlets and overlays are just display locations — this instance * tracks which location currently hosts the component. */ interface DbxDetachInstance { readonly key: DbxDetachKey; readonly componentRef: ComponentRef; readonly windowState$: Observable; readonly closing$: Observable; /** * Moves content to an outlet in the page (if one exists for this key). */ attach(): void; /** * Moves content to the floating overlay. */ detach(): void; /** * Collapses the floating overlay so only controls are visible. */ minimize(): void; /** * Destroys the detached component entirely. */ close(): void; } /** * Abstract controller that content components can inject to * trigger state changes without being aware of the underlying mechanism. */ declare abstract class DbxDetachController { abstract readonly key: DbxDetachKey; abstract readonly data?: Maybe; abstract readonly windowState$: Observable; abstract readonly closing$: Observable; abstract attach(): void; abstract detach(): void; abstract minimize(): void; abstract close(): void; } /** * Creates Angular providers that register a {@link DbxDetachController} implementation for DI. * * @param sourceType - The concrete class to provide as the controller. * @returns Array of Angular providers that bind the source type to {@link DbxDetachController}. * * @Component ({ * providers: provideDbxDetachController(MyDetachController), * }) * export class MyComponent {} * ``` * * @example * ```typescript */ declare function provideDbxDetachController(sourceType: Type): Provider[]; /** * Wraps detach body content, hiding the body when the panel is minimized while keeping the controls visible. * * @example * ```html * * *

Body content here.

* * ``` */ declare class DbxDetachContentComponent { private readonly _detachController; readonly showContent$: rxjs.Observable; readonly showContentSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Renders state-dependent control buttons for a detach component. * * - ATTACHED: detach (picture_in_picture_alt) + close * - DETACHED: attach (open_in_full) + minimize + close * - MINIMIZED: attach (open_in_full) + restore (maximize) + close */ declare class DbxDetachControlButtonsComponent { private readonly _detachController; readonly windowStateSignal: _angular_core.Signal<_dereekb_dbx_web.DbxDetachWindowStateType>; attachClicked(): void; detachClicked(): void; minimizeClicked(): void; closeClicked(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Renders the detach control bar with a header title and window management buttons (attach, detach, minimize, close). * * @example * ```html * * ``` */ declare class DbxDetachControlsComponent { readonly header: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Directive that ensures a detached component exists in the {@link DbxDetachService} for the given key. * * Place this on any element to declaratively initialize a detached component. * The component is created in the service on init and is NOT destroyed when this directive is destroyed — * it lives in the service until explicitly closed. * * @example * ```html *
* ``` */ declare class DbxDetachInitDirective implements OnInit { private readonly _detachService; readonly config: _angular_core.InputSignal>; readonly key: _angular_core.InputSignal; ngOnInit(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Outlet component that displays a detached component at its DOM location. * * When this component initializes, it tells the {@link DbxDetachService} to move * the component for the given key into this element. * * When destroyed (e.g. navigation away), behavior depends on {@link detachOnDestroy}: * - `true`: the component moves to the floating overlay and remains visible * - `false` (default): the component stays alive in the service but is hidden until a new outlet appears * * @example * ```html * * * * * * ``` */ declare class DbxDetachOutletComponent implements OnInit, OnDestroy { private readonly _detachService; private readonly _elementRef; readonly key: _angular_core.InputSignal; /** * When true, the component automatically moves to the floating overlay * when this outlet is destroyed (e.g. page navigation). Defaults to false. */ readonly detachOnDestroy: _angular_core.InputSignal; private _currentKey?; private _contentElement?; /** * Re-attaches when the key input changes. */ protected readonly _keyEffect: _angular_core.EffectRef; ngOnInit(): void; ngOnDestroy(): void; private _attachToService; private _releaseFromService; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Data passed to the overlay component via {@link NgPopoverRef}. */ interface DbxDetachOverlayData { readonly controller: DbxDetachController; readonly hostElement: HTMLElement; } /** * Component rendered inside the ng-overlay-container overlay. * * Receives the detached component's host element and appends it to the overlay DOM. * The component's lifecycle and change detection are managed by {@link DbxDetachService}, * not the overlay. */ declare class DbxDetachOverlayComponent implements AfterViewInit { private readonly _elementRef; private readonly _popoverRef; private readonly _compactContextStore; constructor(); ngAfterViewInit(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class DbxDetachInteractionModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Root-level service that owns and manages detached components. * * Components are created imperatively via {@link createComponent} and kept alive * via {@link ApplicationRef.attachView}. They are not tied to any template. * * Outlets and overlays are just display locations — the service moves the component's * host element between them based on the current state. * * Multiple simultaneous detached components are supported via unique keys. */ declare class DbxDetachService { private readonly _appRef; private readonly _injector; private readonly _envInjector; private readonly _overlay; private readonly _overlayContainerService; private readonly _entries; private readonly _entries$; /** * Initializes a detached component for the given key. Returns the existing instance if one already exists. * * @param config - The detach configuration including component class, key, and overlay settings. * @returns The new or existing {@link DbxDetachInstance} for the given key. */ init(config: DbxDetachConfig): DbxDetachInstance; /** * Gets the instance for the given key, if it exists. * * @param key - The detach key to look up. Defaults to {@link DEFAULT_DBX_DETACH_KEY}. * @returns The instance if found, otherwise `undefined`. */ get(key?: DbxDetachKey): Maybe>; /** * Observable of whether an entry exists for the given key. * * @param key - The detach key to observe. Defaults to {@link DEFAULT_DBX_DETACH_KEY}. * @returns An observable that emits `true` when an entry exists for the key. */ has$(key?: DbxDetachKey): Observable; /** * Moves the component's host element into the given outlet element. * * If no outlet element is provided, falls back to the last known outlet * (for reattaching from the overlay to the previous location). * * @param key - The detach key identifying the entry. * @param outletElement - The DOM element to move the component into. Falls back to the last known outlet. */ attachToOutlet(key: DbxDetachKey, outletElement?: Element): void; /** * Moves the component to the floating overlay. * * @param key - The detach key identifying the entry. */ detachToOverlay(key: DbxDetachKey): void; /** * Moves the component to the floating overlay in minimized state. * * @param key - The detach key identifying the entry. */ minimizeToOverlay(key: DbxDetachKey): void; /** * Called when an outlet is destroyed. * * @param key - The detach key identifying the entry. * @param outletElement - The outlet element being destroyed. * @param detachToOverlay - When true, the component moves to the floating overlay. * When false, the component's DOM is removed but it stays alive in the service (hidden). */ outletDestroyed(key: DbxDetachKey, outletElement: Element, detachToOverlay: boolean): void; /** * If the last outlet is still in the DOM, reattaches the component there. * Otherwise destroys the component. * * @param key - The detach key identifying the entry. */ closeOrReattach(key: DbxDetachKey): void; /** * Destroys the component and removes it from the service. * * @param key - The detach key identifying the entry to remove. */ remove(key: DbxDetachKey): void; private _openOverlay; private _resizeOverlayForState; private _closeOverlay; private _moveDomTo; private _removeDom; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Configuration for the filter popover component, defining custom and preset filter components along with display options. */ interface DbxFilterComponentConfig = FilterSource, PF extends PresetFilterSource = PresetFilterSource> extends DbxPopoverConfigSizing { /** * Custom icon * * Defaults to "filter_list" */ readonly icon?: string; /** * Custom header text * * Defaults to "Filter" */ readonly header?: string; /** * Custom customize button text. If not defined, defaults to "Customize" */ readonly customizeButtonText?: string; /** * Custom presets button text. If not defined, defaults to "Presets" */ readonly presetsButtonText?: string; /** * Custom close button text. If not defined, defaults to "Close" */ readonly closeButtonText?: string; /** * (Optional) Style for the "Customize"/"Presets" switch buttons in the popover header. * * Defaults to {@link DEFAULT_FILTER_POPOVER_SWITCH_BUTTON_STYLE}. * * Only the style is configurable here; the button text comes from {@link customizeButtonText} / {@link presetsButtonText}. */ readonly switchButtonStyle?: Maybe; /** * (Optional) Whether or not to show the popover's buttons in its header: the "Customize"/"Presets" switch button and the close button. * * True by default. */ readonly showButtonsInHeader?: Maybe; /** * (Optional) Whether or not to also show the popover's buttons below the filter content, such as right under a preset list or a form: * the same switch and close buttons as the header. * * False by default. Can be shown together with the header buttons. To place a switch button elsewhere, the filter content can show a * `dbx-filter-popover-switch-button` itself. */ readonly showButtonsBelowContent?: Maybe; /** * (Optional) Style for the close button in the popover header. * * Defaults to {@link DEFAULT_FILTER_POPOVER_CLOSE_BUTTON_STYLE}. Set a `color` here to paint the close button with an * arbitrary {@link DbxColorInput} (including a registered color template) rather than the default accent palette. * * Only the style is configurable here; the button text comes from {@link closeButtonText}. */ readonly closeButtonStyle?: Maybe; /** * Whether or not to show the close button. * * Defaults to whether the shown filter keeps the popover open on a filter change: {@link closeOnFilterChange} for the preset filter, * {@link closeOnCustomFilterChange} for the custom filter. The close button is the only way to close a popover that stays open, besides * clicking outside of it. */ readonly showCloseButton?: Maybe; /** * Custom filter component to initialize. */ readonly customFilterComponentClass?: Type; /** * Preset filter component to initialize. */ readonly presetFilterComponentClass?: Type; /** * DbxInjectionComponentConfig for the custom filter component to initialize. */ readonly customFilterComponentConfig?: DbxInjectionComponentConfig; /** * DbxInjectionComponentConfig for the preset filter component to initialize. */ readonly presetFilterComponentConfig?: DbxInjectionComponentConfig; /** * The connector to use. */ readonly connector: FilterSourceConnector; /** * (Optional) Initial filter to pass to the filter source. * * Must be independent of the connector's output. Deriving this from the connector's own filter$ (the stream this popover's source feeds) is a cycle: the source waits on the connector and the connector waits on the source, so the popover opens with no value. Pass a snapshot of the currently applied filter instead. */ readonly initialFilterObs?: Observable; /** * (Optional) Whether or not to close the popover when the filter changes. * * True by default. Applies to the preset filter, and to the custom filter unless {@link closeOnCustomFilterChange} is set. */ readonly closeOnFilterChange?: boolean; /** * (Optional) Whether or not to close the popover when the filter changes while the custom filter is shown. * * Defaults to {@link closeOnFilterChange}. Set it to false with a preset filter to have a preset close the popover right away, * while the custom filter applies each change right away and keeps the popover open until its close button is clicked. */ readonly closeOnCustomFilterChange?: Maybe; /** * (Optional) Whether or not to close the popover when a route transition succeeds. * * Defaults to false when a filter in the popover keeps it open across filter changes (see {@link closeOnFilterChange} and * {@link closeOnCustomFilterChange}), and true otherwise. A filter written to the URL (see DbxFilterMapRouteParamsDirective) * causes a transition on every change, so the popover must stay open across both while it is edited. The popover still closes * when the button that opened it is destroyed, such as when navigating to another page. */ readonly closeOnTransition?: Maybe; } /** * Abstract base directive for partial preset filter menus that manages selection state and anchor generation. * * Subclasses render the list of partial preset anchors as either a list or a dropdown menu. */ declare abstract class AbstractDbxPartialPresetFilterMenuDirective { readonly filterSourceDirective: FilterSourceDirective; readonly partialPresets: _angular_core.InputSignalWithTransform[], Maybe[]>>; readonly partialPresets$: Observable[]>; readonly filter$: Observable>; readonly selectedPartialPresets$: Observable[]>; readonly firstSelectedPartialPreset$: Observable>>; readonly presetAnchors$: Observable; readonly presetAnchorsSignal: _angular_core.Signal; selectPartialPreset(preset: ClickablePartialFilterPreset): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, { "partialPresets": { "alias": "partialPresets"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Displays partial filter presets as a clickable anchor list. * * @example * ```html * * ``` */ declare class DbxPartialPresetFilterListComponent extends AbstractDbxPartialPresetFilterMenuDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-preset-partial-filter-list", never, {}, {}, never, never, true, never>; } /** * Configuration for the preset filter menus */ interface DbxPresetFilterMenuConfig { /** * The text to display for the unknown selection. */ readonly unknownSelectionText?: string; /** * The icon to use for the filter, or false if no icon should be shown. */ readonly filterIcon?: Maybe | false; /** * Whether or not to use the preset's icon if one is defined. If filterIcon is false, the icon will only appear when an item is selected. */ readonly usePresetIcon?: boolean; } /** * Creates an observable that emits the button text for a preset filter menu based on the current selection. * * @param config$ - Observable of the preset filter menu configuration. * @param selection$ - Observable of the currently selected preset, used to derive the display title. * @param defaultText - Fallback text when no selection or unknownSelectionText is configured. Defaults to 'Filter'. * @returns An observable emitting the resolved button text string. * * @example * ```ts * const text$ = dbxPresetFilterMenuButtonTextObservable(config$, selectedPreset$); * ``` */ declare function dbxPresetFilterMenuButtonTextObservable(config$: Observable, selection$: Observable>>>, defaultText?: string): Observable; /** * Creates an observable that emits the button icon for a preset filter menu based on the current selection and config. * * @param config$ - Observable of the preset filter menu configuration controlling icon behavior. * @param selection$ - Observable of the currently selected preset, used to derive the display icon. * @param defaultIcon - Fallback icon when no filterIcon is configured. Defaults to 'arrow_drop_down'. * @returns An observable emitting the resolved icon string, or undefined when no icon should be shown. * * @example * ```ts * const icon$ = dbxPresetFilterMenuButtonIconObservable(config$, selectedPreset$); * ``` */ declare function dbxPresetFilterMenuButtonIconObservable(config$: Observable, selection$: Observable>>>, defaultIcon?: string): Observable>; /** * Displays a dropdown button menu for selecting partial filter presets. * * @example * ```html * * ``` */ declare class DbxPartialPresetFilterMenuComponent extends AbstractDbxPartialPresetFilterMenuDirective { readonly config: _angular_core.InputSignal; readonly config$: rxjs.Observable; readonly buttonText$: rxjs.Observable; readonly buttonIcon$: rxjs.Observable<_dereekb_util.Maybe>; readonly buttonTextSignal: _angular_core.Signal; readonly buttonIconSignal: _angular_core.Signal<_dereekb_util.Maybe>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-partial-preset-filter-menu", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * A filter view of a filter popover: its preset filter or its custom filter. */ type DbxFilterPopoverView = 'preset' | 'custom'; /** * Configuration for a {@link DbxFilterPopoverViewService}, set by the filter popover that provides it. */ interface DbxFilterPopoverViewServiceConfig { /** * View shown first. */ readonly initialView: DbxFilterPopoverView; /** * Whether or not the popover has both a preset and a custom filter to switch between. */ readonly canSwitchViews: boolean; /** * Text of the switch button while the preset filter is shown. */ readonly customizeButtonText: string; /** * Text of the switch button while the custom filter is shown. */ readonly presetsButtonText: string; /** * Style of the switch button. */ readonly switchButtonStyle: DbxButtonStyle; /** * Called right before the view changes, while the shown filter still exists. */ readonly beforeViewChange?: Maybe<() => void>; } /** * Shared view state of a filter popover: which of its filters is shown, and switching between its preset and custom filters. * * Provided by DbxFilterPopoverComponent to its header, its footer and its filter content, so any of them can read or switch the view. */ declare class DbxFilterPopoverViewService { private readonly _config; private readonly _view; readonly viewSignal: _angular_core.Signal; readonly showPresetSignal: _angular_core.Signal; readonly canSwitchViewsSignal: _angular_core.Signal; /** * Text of the switch button for the shown view. */ readonly switchButtonTextSignal: _angular_core.Signal; readonly switchButtonStyleSignal: _angular_core.Signal; /** * Configures the service and shows the initial view. * * @param config - Configuration from the filter popover. */ init(config: DbxFilterPopoverViewServiceConfig): void; /** * Shows the given view. Does nothing when it is already shown. * * @param view - View to show. */ setView(view: DbxFilterPopoverView): void; showPresets(): void; showCustom(): void; /** * Switches between the preset and custom views. */ switchView(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Applies a change that filter popover content has not applied yet. Runs synchronously, right before the popover closes and destroys the content. */ type DbxFilterPopoverApplyPendingFunction = () => void; /** * Provided by a filter popover to its filter content, so the content can apply a pending change before the popover closes. * * Inject it optionally; content that is not rendered inside a filter popover gets nothing. */ declare abstract class DbxFilterPopoverPendingChanges { /** * Registers a function that is called before the popover closes on its close button, on a filter change, on a transition or on a click outside. * * @param applyPending - Function that applies the pending change. * @returns Removes the registration when called. */ abstract registerApplyPending(applyPending: DbxFilterPopoverApplyPendingFunction): DestroyFunction; } /** * Registry of {@link DbxFilterPopoverApplyPendingFunction}s used by a filter popover. */ declare class DbxFilterPopoverPendingChangesInstance implements DbxFilterPopoverPendingChanges { readonly handleError?: Maybe<(error: unknown) => void>; private readonly _applyPendingFunctions; /** * @param handleError - Receives an error thrown by a registered function. The remaining functions still run. */ constructor(handleError?: Maybe<(error: unknown) => void>); /** * Whether or not at least one function is registered. * * @returns `true` while at least one function is registered. */ get hasApplyPending(): boolean; registerApplyPending(applyPending: DbxFilterPopoverApplyPendingFunction): DestroyFunction; /** * Runs every registered function. */ applyPending(): void; } /** * Configuration for opening a filter popover, extending the base filter config with origin positioning. */ interface DbxFilterPopoverComponentConfig extends DbxFilterComponentConfig { /** * Origin to add the popover to. */ readonly origin: ElementRef; } /** * Default popover key used by filter popovers to ensure only one filter popover is open at a time. */ declare const DEFAULT_FILTER_POPOVER_KEY = "filter"; /** * Default style for the popover header's "Customize"/"Presets" switch buttons. */ declare const DEFAULT_FILTER_POPOVER_SWITCH_BUTTON_STYLE: DbxButtonStyle; /** * Default style for the popover header's close button. */ declare const DEFAULT_FILTER_POPOVER_CLOSE_BUTTON_STYLE: DbxButtonStyle; /** * Popover component that renders custom and/or preset filter components with toggling support. * * Use the static `openPopover` method to programmatically open the filter popover. * * With both a preset and a custom filter, the header shows a button to switch between them, and each closes the popover on a filter * change as configured: {@link DbxFilterComponentConfig.closeOnFilterChange} for the preset filter, and * {@link DbxFilterComponentConfig.closeOnCustomFilterChange} for the custom filter. The close button shows while the shown filter * keeps the popover open. The view is shared through {@link DbxFilterPopoverViewService}, which the popover provides to its * filter content and switch buttons. The switch and close buttons show in the header and/or below the filter content, as configured * by {@link DbxFilterComponentConfig.showButtonsInHeader} and {@link DbxFilterComponentConfig.showButtonsBelowContent}. * * Provides itself as {@link DbxFilterPopoverPendingChanges} to the filter content. While content has a function registered, * this component owns its popover's `getClosingValueFn`: before closing on the close button, on a filter change, on a transition * or on a click outside, it blurs the focused element inside the popover (committing typed input), runs pending change detection * and effects so that input reaches the content's form value, then calls the registered functions. All of this is synchronous, * so the popover closes right away. * * @example * ```ts * DbxFilterPopoverComponent.openPopover(popoverService, { * origin: elementRef, * connector: filterConnector, * customFilterComponentClass: MyFilterComponent * }); * ``` */ declare class DbxFilterPopoverComponent extends AbstractPopoverDirective> implements DbxFilterPopoverPendingChanges { private readonly _elementRef; private readonly _document; private readonly _appRef; private readonly _errorHandler; private readonly _pendingChanges; readonly viewService: DbxFilterPopoverViewService; readonly config: DbxFilterComponentConfig; readonly icon: string; readonly header: string; readonly closeButtonText: string; readonly customizeButtonText: string; readonly presetsButtonText: string; readonly switchButtonStyle: DbxButtonStyle; readonly closeButtonStyle: DbxButtonStyle; private readonly _hasCustomFilter; private readonly _hasPresetFilter; readonly closeOnPresetFilterChange: boolean; readonly closeOnCustomFilterChange: boolean; /** * Whether or not to display buttons to toggle between custom and preset filters. */ readonly showSwitchButtons: boolean; readonly showButtonsInHeader: boolean; readonly showButtonsBelowContent: boolean; readonly showPresetSignal: _angular_core.Signal; /** * Whether or not the shown filter closes the popover when the filter changes. */ readonly closeOnFilterChangeSignal: _angular_core.Signal; readonly showCloseButtonSignal: _angular_core.Signal; /** * Whether or not there is a switch or close button to show. */ readonly hasButtonsSignal: _angular_core.Signal; readonly config$: Observable>>; readonly configSignal: _angular_core.Signal> | undefined>; static openPopover(popupService: DbxPopoverService, { width, height, isResizable, origin, header, icon, customFilterComponentClass, presetFilterComponentClass, customFilterComponentConfig, presetFilterComponentConfig, connector, initialFilterObs, closeOnFilterChange, closeOnCustomFilterChange, closeOnTransition, customizeButtonText, presetsButtonText, showCloseButton, closeButtonText, switchButtonStyle, showButtonsInHeader, showButtonsBelowContent, closeButtonStyle }: DbxFilterPopoverComponentConfig, popoverKey?: DbxPopoverKey): NgPopoverRef; constructor(); /** * Registers a function that is called before the popover closes. See {@link DbxFilterPopoverPendingChanges}. * * @param applyPending - Function that applies the pending change. * @returns Removes the registration when called. */ registerApplyPending(applyPending: DbxFilterPopoverApplyPendingFunction): DestroyFunction; private readonly _applyPendingBeforeClose; /** * Applies the content's pending changes: blurs the focused element inside the popover (committing typed input), runs pending * change detection and effects, then calls the registered functions. */ private _applyPending; /** * Runs pending change detection and effects, so input committed by the blur reaches the content's form value before the content is asked for it. */ private _runPendingEffects; showPresets(): void; showCustom(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "ng-component", never, {}, {}, never, never, true, never>; } /** * Alias for {@link DbxFilterComponentConfig} used with filter button components. */ type DbxFilterButtonConfig = DbxFilterComponentConfig; /** * Filter button config that only uses a custom filter component (no preset filter). */ type DbxFilterButtonConfigWithCustomFilter = FilterSource> = Omit, 'presetFilter' | 'presetFilterComponentConfig'>; /** * Filter button config that only uses a preset filter component (no custom filter). */ type DbxFilterButtonConfigWithPresetFilter = PresetFilterSource> = Omit, 'customFilter' | 'customFilterComponentConfig'>; /** * Abstract base directive for buttons that open a filter popover. Subclasses provide the origin element. */ declare abstract class AbstractFilterPopoverButtonDirective extends AbstractPopoverRefDirective { private readonly popupService; readonly config: _angular_core.InputSignal>>; protected _makePopoverRef(origin?: ElementRef): NgPopoverRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Renders an icon button that opens a filter popover when clicked. * * The popover closes when the filter changes unless `closeOnFilterChange` is false, and closes on a route transition unless * `closeOnTransition` (which defaults to `closeOnFilterChange`) is false — so a popover editing a filter that is written to the * URL stays open while it is edited. The popover always closes when this button is destroyed, such as when leaving the page. * A `dbx-filter-wrapper` without its own Apply button applies its last change before the popover closes on its close button * or a click outside. * * @dbxWebComponent * @dbxWebSlug filter-popover-button * @dbxWebCategory overlay * @dbxWebRelated popover * @dbxWebSkillRefs dbx__ref__dbx-component-patterns * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * ``` */ declare class DbxFilterPopoverButtonComponent extends AbstractFilterPopoverButtonDirective { readonly buttonElement: _angular_core.Signal>>; readonly disabled: _angular_core.InputSignal>; readonly buttonDisplayStyle: _angular_core.InputSignal>; readonly buttonDisplaySignal: _angular_core.Signal; readonly buttonStyleSignal: _angular_core.Signal>; showFilterPopover(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-filter-popover-button", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "buttonDisplayStyle": { "alias": "buttonDisplayStyle"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Wraps filter form content with apply/reset buttons, integrating with the action system. * * Provides an ActionContextStoreSource and applies the filter value to the nearest FilterSourceDirective on trigger. * * Inside a filter popover, a wrapper whose Apply button is hidden applies its last change before the popover closes (see {@link applyOnClose}), * so a change made right before clicking the popover's close button or outside of it is not lost. * * @example * ```html * * * * ``` */ declare class DbxFilterWrapperComponent extends AbstractDbxActionHandlerDirective { readonly filterSourceDirective: FilterSourceDirective; readonly showButtons: _angular_core.InputSignal; readonly applyRaised: _angular_core.InputSignal; readonly applyIcon: _angular_core.InputSignal; readonly applyText: _angular_core.InputSignal; /** * Whether or not to apply a pending change before the filter popover this wrapper is in closes. * * Defaults to `!showButtons`: a wrapper without its own Apply button applies by itself (such as with dbxActionAutoTrigger), * so its last change is kept. With the Apply button shown, closing without clicking it discards the change. */ readonly applyOnClose: _angular_core.InputSignal>; readonly applyOnCloseSignal: _angular_core.Signal; constructor(); /** * Applies a change the action has not applied yet, synchronously. * * Takes the value a trigger would ready right now from the action's value source (such as dbxActionForm) and sets it on the filter source * when it differs from the current filter. It skips the action's trigger path and its delays, so it works right before the content is destroyed. */ applyPendingFilter(): void; applyFilter(): void; resetFilter(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-filter-wrapper", never, { "showButtons": { "alias": "showButtons"; "required": false; "isSignal": true; }; "applyRaised": { "alias": "applyRaised"; "required": false; "isSignal": true; }; "applyIcon": { "alias": "applyIcon"; "required": false; "isSignal": true; }; "applyText": { "alias": "applyText"; "required": false; "isSignal": true; }; "applyOnClose": { "alias": "applyOnClose"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>; } /** * Abstract base directive for preset filter menus that manages full and partial preset selection state. * * Subclasses render the list of preset anchors as either a list or a dropdown menu. */ declare abstract class AbstractDbxPresetFilterMenuDirective { readonly filterSourceDirective: FilterSourceDirective; readonly presetSelected: _angular_core.OutputEmitterRef>; readonly presets: _angular_core.InputSignal[]>; readonly presets$: Observable[]>; readonly selected$: Observable>; readonly presetsWithPresetStringOnly$: Observable[]>; readonly selectedPresetString$: Observable>; readonly presetAnchorsPairs$: Observable<['preset' | 'partialPreset', ClickableFilterPresetOrPartialPreset, ClickableAnchorLink][]>; readonly presetAnchors$: Observable; readonly firstSelectedAnchorPair$: Observable<["preset" | "partialPreset", ClickableFilterPresetOrPartialPreset, ClickableAnchorLink] | undefined>; readonly selectedPreset$: Observable>>; readonly presetAnchorsSignal: _angular_core.Signal; readonly selectedPresetSignal: _angular_core.Signal>>; selectPreset(preset: ClickableFilterPresetOrPartialPreset): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, { "presets": { "alias": "presets"; "required": false; "isSignal": true; }; }, { "presetSelected": "presetSelected"; }, never, never, true, never>; } /** * Displays filter presets as a clickable anchor list. * * @example * ```html * * ``` */ declare class DbxPresetFilterListComponent extends AbstractDbxPresetFilterMenuDirective { static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-preset-filter-list", never, {}, {}, never, never, true, never>; } /** * Displays a dropdown button menu for selecting filter presets with configurable icon and text. * * @example * ```html * * ``` */ declare class DbxPresetFilterMenuComponent extends AbstractDbxPresetFilterMenuDirective { readonly config: _angular_core.InputSignal; readonly config$: rxjs.Observable; readonly buttonText$: rxjs.Observable; readonly buttonIcon$: rxjs.Observable<_dereekb_util.Maybe>; readonly buttonTextSignal: _angular_core.Signal; readonly buttonIconSignal: _angular_core.Signal<_dereekb_util.Maybe>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "dbx-preset-filter-menu", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } declare class DbxFilterInteractionModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Button that switches a filter popover between its preset and custom filters. Shows the customize text while the presets are shown, and the presets text while the custom filter is shown. * * Renders nothing unless the popover has both a preset and a custom filter. The filter popover shows one in its header and/or below * its filter content (see `DbxFilterComponentConfig.showButtonsInHeader` / `showButtonsBelowContent`); filter content can also * place one itself. * * @example * ```html * * * ``` */ declare class DbxFilterPopoverSwitchButtonComponent { readonly viewService: DbxFilterPopoverViewService; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Renders an iframe element with a dynamically configurable content URL and optional URL sanitization. * * @example * ```html * * ``` */ declare class DbxIframeComponent { readonly sanitizer: DomSanitizer; readonly iframeLocationChanged: _angular_core.OutputEmitterRef>; readonly iframe: _angular_core.Signal | undefined>; readonly scrolling: _angular_core.InputSignalWithTransform<"auto" | "no" | "yes", boolean | "auto" | "no" | "yes">; readonly sanitizeUrl: _angular_core.InputSignal; readonly contentUrl: _angular_core.ModelSignal>; readonly contentUrlSignal: _angular_core.Signal>; readonly iframe$: rxjs.Observable | undefined>; readonly contentUrl$: rxjs.Observable>; readonly retry: Subject; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Configuration for opening an iframe dialog. */ interface DbxIframeDialogConfig extends Omit { readonly contentUrl: WebsiteUrlWithPrefix; } /** * Opens a dialog containing a {@link DbxIframeComponent} to display a URL in an iframe. * * @param matDialog - The Angular Material dialog service used to open the dialog. * @param config - Configuration specifying the content URL and dialog options. * @returns A reference to the opened dialog for controlling or subscribing to its lifecycle. * * @example * ```ts * const ref = openIframeDialog(matDialog, { contentUrl: 'https://example.com' }); * ``` */ declare function openIframeDialog(matDialog: MatDialog, config: DbxIframeDialogConfig): MatDialogRef, void>; /** * The HTML element type used by {@link DbxEmbedComponent} to render content. */ type DbxEmbedComponentElement = 'embed' | 'img'; /** * Embeds external content using an `` or `` element, supporting both URL and Blob sources. * * Automatically determines the embed element based on the MIME type (images use ``, others use ``). * * @example * ```html * * * ``` */ declare class DbxEmbedComponent { private readonly _browserObjectUrlRef; readonly sanitizer: DomSanitizer; readonly root: _angular_core.Signal | undefined>; /** * The element to embed. Can be either embed or img. If not provided, will be determined by the input mimetype. * * If set to 'embed', the embed element will be used. * If set to 'img', the img element will be used. */ readonly embedElement: _angular_core.ModelSignal>; readonly sanitizeUrl: _angular_core.ModelSignal>; readonly srcUrl: _angular_core.ModelSignal>; readonly type: _angular_core.ModelSignal>; /** * The input blob or media source to use. * * If set, the srcUrl will be updated with the browser object URL. */ readonly blob: _angular_core.ModelSignal>; readonly srcUrlFromBlob: _angular_core.WritableSignal>; readonly typeFromBlob: _angular_core.WritableSignal>; readonly blobEffect: _angular_core.EffectRef; readonly srcUrlSignal: _angular_core.Signal>; readonly typeSignal: _angular_core.Signal>; readonly root$: rxjs.Observable | undefined>; readonly srcUrl$: rxjs.Observable>; readonly type$: rxjs.Observable>; readonly embedElementName$: rxjs.Observable>; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Configuration for opening an embed dialog, supporting both URL and Blob content sources. */ interface DbxEmbedDialogConfig extends Omit { readonly srcUrl?: Maybe; readonly blob?: Maybe; readonly embedMimeType?: Maybe; readonly sanitizeUrl?: boolean; } /** * Opens a dialog containing a {@link DbxEmbedComponent} to display embedded content from a URL or Blob. * * @param matDialog - The Angular Material dialog service used to open the dialog. * @param config - Configuration specifying the content source (URL or Blob), MIME type, and dialog options. * @returns A reference to the opened dialog for controlling or subscribing to its lifecycle. * * @example * ```ts * const ref = openEmbedDialog(matDialog, { srcUrl: 'https://example.com/doc.pdf', embedMimeType: 'application/pdf' }); * ``` */ declare function openEmbedDialog(matDialog: MatDialog, config: DbxEmbedDialogConfig): MatDialogRef, void>; /** * Parameters passed to a {@link DbxActionPopoverFunction} when opening a popover. */ interface DbxActionPopoverFunctionParams { readonly origin: ElementRef; } /** * A function that opens a popover and returns its reference. Used with {@link DbxActionPopoverDirective}. */ type DbxActionPopoverFunction = (params: DbxActionPopoverFunctionParams) => NgPopoverRef>; /** * Action directive that opens a popover and captures the returned value as the action's value. * * The directive triggers the provided popover function, waits for the popover to close, and uses the result as the action value. * * @example * ```html * * ``` */ declare class DbxActionPopoverDirective extends AbstractDbxActionValueGetterDirective { readonly elementRef: ElementRef; readonly dbxActionPopover: _angular_core.InputSignal>; readonly dbxActionPopoverIsModified: _angular_core.InputSignal>; readonly dbxActionPopoverIsEqual: _angular_core.InputSignal>; constructor(); protected _getDataFromPopover(): Observable>; protected _makePopoverRef(): NgPopoverRef>; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[dbxActionPopover]", ["dbxActionPopover"], { "dbxActionPopover": { "alias": "dbxActionPopover"; "required": true; "isSignal": true; }; "dbxActionPopoverIsModified": { "alias": "dbxActionPopoverIsModified"; "required": false; "isSignal": true; }; "dbxActionPopoverIsEqual": { "alias": "dbxActionPopoverIsEqual"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>; } /** * Renders a close icon button that closes the parent popover when clicked. * * @example * ```html * * * * ``` */ declare class DbxPopoverCloseButtonComponent { readonly dbxPopoverComponent: DbxPopoverComponent; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Wraps popover body content, providing a resizable container that tracks its height for dynamic sizing. * * Supports a `[controls]` content projection slot for popover control elements. * * @example * ```html * * *

Popover body content here.

* * ``` */ declare class DbxPopoverContentComponent { readonly hasControls: BehaviorSubject; readonly hasHeader: BehaviorSubject; private readonly _height; readonly height$: rxjs.Observable; readonly heightSignal: _angular_core.Signal; onResized(event: ResizedEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Marks an element as the controls section within a popover content container. * * Can be used as an element, attribute, or CSS class selector. Notifies the parent {@link DbxPopoverContentComponent} that controls are present. * * @example * ```html * * * * *

Body content.

* * ``` */ declare class DbxPopoverControlsDirective implements OnInit { readonly appPopoverContentComponent: DbxPopoverContentComponent | null; ngOnInit(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Renders a formatted header bar for a popover with an optional icon and projected action content. * * @example * ```html * * * * ``` */ declare class DbxPopoverHeaderComponent implements OnInit { readonly appPopoverContentComponent: DbxPopoverContentComponent | null; readonly header: _angular_core.InputSignal>; readonly icon: _angular_core.InputSignal>; ngOnInit(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Marks a region as scrollable content within a popover, applying dynamic CSS classes based on whether header and controls are present. * * Can be used as an element, attribute, or CSS class selector. * * @example * ```html * * ... * *

Scrollable content here.

* * * ``` */ declare class DbxPopoverScrollContentDirective { readonly appPopoverContentComponent: DbxPopoverContentComponent; readonly hasControlsSignal: _angular_core.Signal; readonly hasHeaderSignal: _angular_core.Signal; readonly sizingClassesSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Contains all popover content components, allowing other sibling dbx-web modules to use the directives without referencing the full popover module. */ declare class DbxPopoverInteractionContentModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Coordinates popover display by registering with {@link DbxPopoverCoordinatorService} and only rendering content when this popover is the active one for its key. * * @example * ```html * *
Popover content rendered only when active.
* * ``` */ declare class DbxPopoverCoordinatorComponent { private readonly _service; private readonly _popover; readonly isPopoverForKey$: rxjs.Observable; readonly show$: rxjs.Observable; readonly showSignal: _angular_core.Signal; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Root-level service that tracks active popovers by key, ensuring only one popover per key exists at a time. * * When a new popover is added with a key that already exists, the previous popover is closed automatically. */ declare class DbxPopoverCoordinatorService { private readonly _popovers; readonly popovers$: rxjs.Observable>>; get popovers(): Map; addPopover(popover: DbxPopoverController): void; removePopover(key: DbxPopoverKey, popover?: DbxPopoverController): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } declare class DbxPopoverInteractionModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Configuration for creating a popover position strategy. */ interface PopoverPositionStrategyConfig { readonly overlay: Overlay; readonly elementRef: ElementRef; readonly config: NgOverlayContainerConfiguration; } /** * Creates a flexible connected position strategy for popovers with multiple fallback positions. * * @example * ```ts * const strategy = PopoverPositionStrategy.make(overlay, elementRef, overlayConfig); * ``` */ declare class PopoverPositionStrategy { static make(overlay: Overlay, elementRef: ElementRef, config: NgOverlayContainerConfiguration): FlexibleConnectedPositionStrategy; } /** * Predefined screen positions for a popup overlay. */ type PopupPosition = 'center' | 'bottom_left' | 'bottom_right'; /** * X/Y offset for fine-tuning popup positioning. */ interface PopupPositionOffset { readonly x?: string; readonly y?: string; } /** * Global position strategy for popups that supports named positions (center, bottom_left, bottom_right) with optional offsets. * * @example * ```ts * const strategy = new PopupGlobalPositionStrategy('bottom_right', { x: '16px', y: '16px' }); * ``` */ declare class PopupGlobalPositionStrategy extends GlobalPositionStrategy { private _position; private _offset; constructor(position?: PopupPosition, offset?: PopupPositionOffset); setPopupOffset(offset?: PopupPositionOffset): void; setPopupPosition(position: PopupPosition, offset?: PopupPositionOffset): void; private _resetPositions; } /** * Unique key used to identify and coordinate popup instances. */ type DbxPopupKey = string; /** * Possible window states for a popup: normal, minimized, or fullscreen. */ declare const DbxPopupWindowState: { readonly NORMAL: "normal"; readonly MINIMIZED: "minimized"; readonly FULLSCREEN: "fullscreen"; }; /** * Union type of all possible popup window state values. */ type DbxPopupWindowStateType = (typeof DbxPopupWindowState)[keyof typeof DbxPopupWindowState]; /** * Abstract controller for managing a popup's lifecycle, providing close, return, minimize, fullscreen, and normalscreen operations. */ declare abstract class DbxPopupController { abstract readonly key: DbxPopupKey; abstract readonly data?: Maybe; abstract readonly windowState$: Observable; abstract readonly closing$: Observable; /** * Signals for the popup to close. */ abstract close(): void; /** * Closes the popup and returns the input value. */ abstract return(value?: O): void; abstract minimize(): void; abstract normalscreen(): void; abstract fullscreen(): void; } declare const APP_POPUP_NORMAL_WIDTH = "700px"; declare const APP_POPUP_MINIMIZED_WIDTH = "300px"; declare const APP_POPUP_NORMAL_HEIGHT = "auto"; /** * Extended popup controller that supports an optional async closing value function. */ declare abstract class DbxPopupComponentController extends DbxPopupController { readonly getClosingValueFn?: (value?: I) => Promise; } /** * Configuration for opening a popup with dynamically injected content. */ interface DbxPopupComponentConfig { /** * Key used for uniquely identifying a limited instance. * * Only one popup should exist at a time given a certain key. */ readonly key: DbxPopupKey; readonly position?: Maybe; readonly offset?: Maybe; readonly closeOnTransition?: Maybe; readonly componentClass: Type; readonly data?: Maybe; readonly isDraggable?: Maybe; readonly init?: (component: T, controller: DbxPopupController) => void; readonly width?: Maybe; readonly height?: Maybe; } /** * Core popup component that renders injected content with support for minimize, fullscreen, and normal window states. * * Coordinates with {@link DbxPopupCoordinatorService} to ensure only one popup per key is active at a time. * * @dbxWebComponent * @dbxWebSlug popup * @dbxWebCategory overlay * @dbxWebRelated popover * @dbxWebSkillRefs dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * // In a service: this.popupService.open({ content: MyContentComponent }) * ``` */ declare class DbxPopupComponent extends AbstractTransitionWatcherDirective implements DbxPopupController { private readonly popoverRef; private readonly compactContextState; private _position; readonly config: DbxPopupComponentConfig; readonly key: DbxPopupKey; readonly data: Maybe; readonly contentConfig: DbxInjectionComponentConfig; private readonly closing; readonly isClosing$: rxjs.Observable; readonly closing$: rxjs.Observable; private readonly _windowState; readonly windowState$: rxjs.Observable; getClosingValueFn?: (value?: I) => Promise; constructor(); protected updateForSuccessfulTransition(): void; close(): void; return(value?: O): void; minimize(): void; normalscreen(): void; fullscreen(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "ng-component", never, {}, {}, never, never, true, never>; } /** * Abstract base directive for components rendered inside a popup, providing access to the popup's close operation. */ declare abstract class AbstractPopupDirective { readonly popup: DbxPopupComponent; closePopup(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵdir: _angular_core.ɵɵDirectiveDeclaration, never, never, {}, {}, never, never, true, never>; } /** * Wraps popup body content, hiding the body when the popup is minimized while keeping the controls visible. * * @example * ```html * * *

Body content here.

* * ``` */ declare class DbxPopupContentComponent { private readonly appPopupController; readonly showContent$: rxjs.Observable; readonly showContentSignal: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Renders the minimize, fullscreen/restore, and close buttons for controlling a popup's window state. * * @example * ```html * * ``` */ declare class DbxPopupControlButtonsComponent { private readonly _appPopupController; readonly isMinimized$: rxjs.Observable; readonly isFullscreen$: rxjs.Observable; readonly isMinimizedSignal: _angular_core.Signal; readonly isFullscreenSignal: _angular_core.Signal; minimizeClicked(): void; maximizeClicked(): void; fullscreenClicked(): void; normalscreenClicked(): void; closeClicked(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Renders the popup control bar with a header title and window management buttons (minimize, fullscreen, close). * * @example * ```html * * ``` */ declare class DbxPopupControlsComponent { readonly header: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Coordinates popup display by registering with {@link DbxPopupCoordinatorService} and only rendering content when this popup is the active one for its key. * * @example * ```html * *
Popup content rendered only when active.
* * ``` */ declare class DbxPopupCoordinatorComponent { private readonly _service; private readonly _popup; readonly isPopupForKey$: rxjs.Observable; readonly show$: rxjs.Observable; readonly showSignal: _angular_core.Signal; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Root-level service that tracks active popups by key, ensuring only one popup per key exists at a time. * * When a new popup is added with a key that already exists, the previous popup is closed automatically. */ declare class DbxPopupCoordinatorService { private readonly _popups; readonly popups$: rxjs.Observable>>; get popups(): Map; addPopup(popup: DbxPopupController): void; removePopup(key: DbxPopupKey, popup?: DbxPopupController): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } declare class DbxPopupInteractionModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Full configuration for opening a popup via {@link DbxPopupService}, extending the component config with an optional injector. */ interface DbxPopupConfig extends DbxPopupComponentConfig { readonly injector?: Injector; } /** * Root-level service for programmatically opening popup overlays with dynamic component content. * * @example * ```ts * const ref = popupService.open({ * key: 'my-popup', * componentClass: MyPopupContentComponent, * position: 'bottom_right' * }); * ``` */ declare class DbxPopupService { private readonly _overlay; private readonly _injector; private readonly _overlayContainerService; open(config: DbxPopupConfig): NgPopoverRef, O>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Applies prompt box styling with optional elevation to its host element. * * @example * ```html * * * * ``` */ declare class DbxPromptBoxDirective { readonly elevate: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Intercepts button clicks to show a confirmation dialog before proceeding. * * Requires both a {@link DbxButton} and a {@link DbxPromptConfirm} on the host element. * * @example * ```html * * ``` */ declare class DbxPromptConfirmButtonDirective implements OnInit, DbxButtonInterceptor { readonly button: DbxButton; readonly prompt: DbxPromptConfirm; readonly interceptButtonClick: () => Observable; ngOnInit(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Renders a styled prompt section with a header, descriptive text, and a hero content slot. * * @dbxWebComponent * @dbxWebSlug prompt * @dbxWebCategory overlay * @dbxWebRelated prompt-confirm, dialog-content * @dbxWebSkillRefs dbx__ref__dbx-app-structure * @dbxWebMinimalExample ```html * * ``` * * @example * ```html * * * * * ``` */ declare class DbxPromptComponent { readonly header: _angular_core.InputSignal>; readonly prompt: _angular_core.InputSignal>; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Default configuration used when no custom config is provided to the confirm dialog. */ declare const DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG: { title: string; }; /** * Configuration for the confirmation dialog, extending prompt config with an optional injected component. */ interface DbxPromptConfirmDialogConfig extends DbxPromptConfirmConfig { readonly component?: DbxInjectionComponentConfig; } /** * Dialog component that displays a confirmation prompt and returns a boolean result. * * Use the static `openDialog` method to programmatically open the dialog. * * @example * ```ts * const ref = DbxPromptConfirmDialogComponent.openDialog(matDialog, { * title: 'Delete item?', * prompt: 'This action cannot be undone.', * confirmText: 'Delete' * }); * ref.afterClosed().subscribe(confirmed => { ... }); * ``` */ declare class DbxPromptConfirmDialogComponent extends AbstractDialogDirective { get config(): DbxPromptConfirmDialogConfig; get injectionConfig(): Maybe; static openDialog(matDialog: MatDialog, config?: Maybe): MatDialogRef; confirm(): void; cancel(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Full-page prompt layout that centers content within a growing content container. * * @example * ```html * * * * ``` */ declare class DbxPromptPageComponent { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class DbxPromptModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Syncs the disabled and working states from an ActionContextStoreSource to a {@link DbxActionWorkable} target. * * The target is any element that provides {@link DbxActionWorkable} -- a {@link DbxFileUploadActionCompatable} * file upload component, or a {@link DbxButton} (e.g. ``). * * @example * ```html * * ``` * * @example * ```html * * ``` */ declare class DbxFileUploadActionSyncDirective { readonly source: DbxActionContextStoreSourceInstance; readonly workable: DbxActionWorkable; constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Listens for `window:keydown` events and emits matching keyboard events. * * Optionally filters by specific key names and can be disabled at runtime. * * @example * ```html * *
* * *
*
* ``` */ declare class DbxWindowKeyDownListenerDirective { readonly dbxWindowKeyDownListener: _angular_core.OutputEmitterRef; readonly dbxWindowKeyDownEnabled: _angular_core.InputSignal>; readonly dbxWindowKeyDownFilter: _angular_core.InputSignal>; readonly isEnabledSignal: _angular_core.InputSignal>; readonly keysFilterSignal: _angular_core.Signal>>; handleKeyboardEvent(event: KeyboardEvent): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Emits {@link ResizedEvent} values whenever the host element is resized. * * Uses a `ResizeObserver` internally via {@link resizeSignal}. * * @dbxWebComponent * @dbxWebSlug resized * @dbxWebCategory screen * @dbxWebRelated flex-group * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks * @dbxWebMinimalExample ```html *
* ``` * * @example * ```html *
* ``` */ declare class DbxResizedDirective { readonly elementRef: ElementRef; readonly resizedSignal: _angular_core.Signal; readonly dbxResized: _angular_core.OutputEmitterRef; protected _resizeEffect: _angular_core.EffectRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } /** * Abstract configuration class for {@link DbxScreenMediaService} defining responsive breakpoints. * * Provide a concrete instance via {@link provideDbxScreenMediaService} or supply values directly. */ declare abstract class DbxScreenMediaServiceConfig { /** * The maximum size of a micro screen. Any size bigger than this is considered a small screen or larger. */ abstract microScreenWidthMax: number; /** * The maximum size of a small screen. Any size bigger than this is considered a tablet screen or larger. */ abstract smallScreenWidthMax: number; /** * The maximum size of a tablet screen. Any size bigger than this is considered a large screen or larger. */ abstract tabletScreenWidthMax: number; /** * The maximum size of a large screen. Any size bigger than this is considered full. */ abstract largeScreenWidthMax: number; /** * The maximum size of a tiny screen. Any size bigger than this is considered normal. */ abstract tinyScreenHeightMax: number; } /** * Default responsive breakpoint configuration with standard mobile/tablet/desktop thresholds. */ declare const DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG: DbxScreenMediaServiceConfig; /** * Reactive service that tracks the current screen width and height categories using CSS media queries. * * Emits {@link ScreenMediaWidthType} and {@link ScreenMediaHeightType} values that update * as the viewport is resized. Use {@link isBreakpointActive} to reactively check whether * the screen meets a minimum width breakpoint. * * @example * ```ts * readonly screenService = inject(DbxScreenMediaService); * readonly isTabletOrLarger$ = this.screenService.isBreakpointActive('tablet'); * ``` */ declare class DbxScreenMediaService implements Destroyable { private readonly _media; private readonly _microQuery; private readonly _smallQuery; private readonly _tabletQuery; private readonly _largeQuery; private readonly _tinyHeightQuery; private readonly _updateWidth; private readonly _updateHeight; readonly widthType$: Observable; readonly heightType$: Observable; constructor(); destroy(): void; /** * Returns an observable that emits `true` when the current screen width is at least as wide as the given breakpoint. * * @param inputBreakpoint - The minimum width type or an observable of it. * @returns Observable of whether the breakpoint is currently active. */ isBreakpointActive(inputBreakpoint: ObservableOrValue): Observable; private _readWidthType; private _readHeightType; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * Configuration for provideDbxScreenMediaService(). */ interface ProvideDbxScreenMediaServiceConfig { readonly config?: DbxScreenMediaServiceConfig; } /** * Creates Angular environment providers for {@link DbxScreenMediaService} and its configuration. * * @param config - Optional service configuration; uses default breakpoints if omitted. * @returns Environment providers to register in the application bootstrap. * * @example * ```ts * bootstrapApplication(AppComponent, { * providers: [provideDbxScreenMediaService()] * }); * ``` * * @__NO_SIDE_EFFECTS__ */ declare function provideDbxScreenMediaService(config?: ProvideDbxScreenMediaServiceConfig): EnvironmentProviders; declare class DbxWebModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxClipboardDirective, AbstractDbxErrorWidgetComponent, AbstractDbxFileUploadComponent, AbstractDbxHelpWidgetDirective, AbstractDbxListAccordionViewDirective, AbstractDbxListGridViewDirective, AbstractDbxListTitleGroupHeaderComponent, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxPartialPresetFilterMenuDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListViewDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListItemModifierDirective, AbstractDbxValueListViewDirective, AbstractDbxValueListViewItemComponent, AbstractDbxWidgetComponent, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, CHATGPT_DBX_MCP_CONNECT_CLIENT, CLAUDE_CODE_DBX_MCP_CONNECT_CLIENT, CLAUDE_DBX_MCP_CONNECT_CLIENT, CURSOR_DBX_MCP_CONNECT_CLIENT, CompactContextStore, CompactMode, DBX_ACTION_SNACKBAR_DEFAULTS, DBX_ACTION_SNACKBAR_SERVICE_CONFIG, DBX_AVATAR_CONTEXT_DATA_TOKEN, DBX_COLOR_CUSTOM_BG_CSS_CLASS, DBX_COLOR_CUSTOM_TEXT_CSS_CLASS, DBX_CURATED_COLOR_COUNT, DBX_CURATED_COLOR_TEMPLATES, DBX_CURATED_COLOR_TEMPLATE_KEY_PREFIX, DBX_DARK_STYLE_CLASS_SUFFIX, DBX_HELP_WIDGET_ENTRY_DATA_TOKEN, DBX_LIST_ACCORDION_VIEW_COMPONENT_IMPORTS_AND_EXPORTS, DBX_LIST_GRID_VIEW_COMPONENT_IMPORTS_AND_EXPORTS, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_LIST_ITEM_IS_SELECTED_ITEM_MODIFIER_KEY, DBX_LIST_TITLE_GROUP_DATA, DBX_MCP_CONNECT_CLIENT_SECRET_PLACEHOLDER, DBX_MCP_CONNECT_DIALOG_WIDTH, DBX_MCP_CONNECT_SERVER, DBX_MODEL_VIEW_TRACKER_STORAGE_ACCESSOR_TOKEN, DBX_PDF_MERGE_EDITOR_CONFIG, DBX_PDF_MERGE_EDITOR_INITIAL_STATE, DBX_PDF_MERGE_EDITOR_PRESERVE_ENTRIES_ON_SLOT_DESTROY, DBX_PDF_MERGE_ENCRYPTED_ERROR_MESSAGE, DBX_PDF_MERGE_ENCRYPTED_NOT_EDITABLE_MESSAGE, DBX_PDF_MERGE_IGNORED_ENTRY_MESSAGE, DBX_PDF_MERGE_IMPORT_ERROR_MESSAGES, DBX_PDF_MERGE_SUPERSEDED_SLOT_MESSAGE, DBX_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_ANCHOR_COMPONENTS, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_THEME_COLORS, DBX_THEME_COLORS_EXTRA, DBX_THEME_COLORS_EXTRA_SECONDARY, DBX_THEME_COLORS_MAIN, DBX_TRISTATE_CYCLE, DBX_VALUE_LIST_VIEW_ITEM, DBX_VALUE_LIST_VIEW_ITEM_SEPARATOR, DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN, DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_COMPONENT_PRESET, DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_PRESET_ENTRY, DBX_WEB_PAGE_TITLE_SERVICE_CONFIG, DEFAULT_CLAUDE_CODE_DBX_MCP_CONNECT_CALLBACK_PORT, DEFAULT_DBX_BROWSER_AGENT_VIEW_OS_DISPLAY, DEFAULT_DBX_BUTTON_FLOATING_POSITION, DEFAULT_DBX_CHIP_TONE, DEFAULT_DBX_CLICK_TO_COPY_FIELD_HIDDEN_TEXT, DEFAULT_DBX_CLICK_TO_COPY_TEXT_ICON, DEFAULT_DBX_DETACH_KEY, DEFAULT_DBX_ERROR_SNACKBAR_CONFIG, DEFAULT_DBX_FILE_LIST_ITEM_DETAILS_CLASS, DEFAULT_DBX_FILE_LIST_ITEM_DETAILS_DATE_STYLE, DEFAULT_DBX_HELP_VIEW_POPOVER_KEY, DEFAULT_DBX_LINKIFY_STRING_TYPE, DEFAULT_DBX_LIST_ACCORDION_VIEW_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_LIST_GRID_VIEW_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_LIST_ITEM_DISABLE_FUNCTION, DEFAULT_DBX_LIST_ITEM_IS_SELECTED_FUNCTION, DEFAULT_DBX_LIST_SCROLL_DISTANCE, DEFAULT_DBX_LIST_THROTTLE_SCROLL, DEFAULT_DBX_LIST_VIEW_META_ICON, DEFAULT_DBX_MCP_CONNECT_BUTTON_DISPLAY, DEFAULT_DBX_MCP_CONNECT_CLIENTS, DEFAULT_DBX_MCP_CONNECT_DIALOG_HEADER, DEFAULT_DBX_MCP_CONNECT_SERVER_NAME, DEFAULT_DBX_MCP_CONNECT_VIEW_HINT, DEFAULT_DBX_PDF_MERGE_ENCRYPTED_HANDLING, DEFAULT_DBX_PDF_MERGE_PAGE_EDITING, DEFAULT_DBX_PDF_MERGE_RESTORE_IMPORT_ON_CLEAR, DEFAULT_DBX_PDF_MERGE_SIDECAR, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_SIDENAV_MENU_ICON, DEFAULT_DBX_STYLE_CONFIG_TOKEN, DEFAULT_DBX_TRISTATE_OFF_COLOR, DEFAULT_DBX_TRISTATE_OFF_ICON, DEFAULT_DBX_TRISTATE_ON_COLOR, DEFAULT_DBX_TRISTATE_ON_ICON, DEFAULT_DBX_TRISTATE_UNKNOWN_DEFAULT_ICON, DEFAULT_DBX_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_DIALOG_WITH_COMPONENT_FUNCTION, DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_PREVIEW_COMPONENT_FUNCTION, DEFAULT_DIALOG_CONTENT_FOOTER_BUTTON_STYLE, DEFAULT_ERROR_POPOVER_KEY, DEFAULT_ERROR_WIDGET_CODE, DEFAULT_FILTER_POPOVER_CLOSE_BUTTON_STYLE, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_FILTER_POPOVER_SWITCH_BUTTON_STYLE, DEFAULT_IMAGE_BITMAP_TO_BLOB_ENCODER, DEFAULT_IMAGE_JPEG_QUALITY, DEFAULT_INTRO_ACTION_SECTION_BUTTON_STYLE, DEFAULT_LIST_GRID_SIZE_CONFIG, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_LOADING_PROGRESS_DIAMETER, DEFAULT_PDF_MERGE_ACCEPT, DEFAULT_PDF_MERGE_PAGE_GROUP_KEY, DEFAULT_PROMPT_CANCEL_BUTTON_STYLE, DEFAULT_PROMPT_CONFIRM_BUTTON_STYLE, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DEFAULT_SNACKBAR_DIRECTIVE_DURATION, DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH, DEFAULT_VALUE_LIST_VIEW_CONTENT_COMPONENT_TRACK_BY_FUNCTION, DbxAccordionHeaderHeightDirective, DbxActionConfirmDirective, DbxActionDialogDirective, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionLoadingContextDirective, DbxActionModule, DbxActionPopoverDirective, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarErrorDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxAvatarComponent, DbxAvatarViewComponent, DbxAvatarViewService, DbxAvatarViewServiceConfig, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBodyDirective, DbxBrowserAgentService, DbxBrowserAgentViewComponent, DbxBrowserAgentViewContext, DbxBrowserAgentViewOverrideButtonComponent, DbxButtonComponent, DbxButtonFloatingDirective, DbxButtonModule, DbxButtonSpacerDirective, DbxCardBoxComponent, DbxCardBoxContainerDirective, DbxCardBoxLayoutModule, DbxChipDirective, DbxChipListComponent, DbxClickToCopyFieldComponent, DbxClickToCopyTextComponent, DbxClickToCopyTextDirective, DbxColorDirective, DbxColorService, DbxColorServiceConfig, DbxCompactDirective, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxContentPitDirective, DbxDetachContentComponent, DbxDetachControlButtonsComponent, DbxDetachController, DbxDetachControlsComponent, DbxDetachInitDirective, DbxDetachInteractionModule, DbxDetachOutletComponent, DbxDetachOverlayComponent, DbxDetachService, DbxDetachWindowState, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxDialogContentCloseComponent, DbxDialogContentDirective, DbxDialogContentFooterComponent, DbxDialogModule, DbxDownloadBlobButtonComponent, DbxDownloadTextViewComponent, DbxEmbedComponent, DbxErrorComponent, DbxErrorDefaultErrorWidgetComponent, DbxErrorDetailsComponent, DbxErrorPopoverComponent, DbxErrorSnackbarComponent, DbxErrorSnackbarService, DbxErrorViewComponent, DbxErrorWidgetService, DbxErrorWidgetViewComponent, DbxFileListComponent, DbxFileListItemComponent, DbxFileUploadActionCompatable, DbxFileUploadActionSyncDirective, DbxFileUploadAreaComponent, DbxFileUploadButtonComponent, DbxFileUploadComponent, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterPopoverPendingChanges, DbxFilterPopoverPendingChangesInstance, DbxFilterPopoverSwitchButtonComponent, DbxFilterPopoverViewService, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexSizeDirective, DbxHelpContextDirective, DbxHelpContextService, DbxHelpViewListComponent, DbxHelpViewListEntryComponent, DbxHelpViewPopoverButtonComponent, DbxHelpViewPopoverComponent, DbxHelpWidgetService, DbxHelpWidgetServiceConfig, DbxIconButtonComponent, DbxIconItemComponent, DbxIconSpacerDirective, DbxIconTileComponent, DbxIconTileDirective, DbxIfSidenavDisplayModeDirective, DbxIframeComponent, DbxInjectionDialogComponent, DbxIntroActionSectionComponent, DbxLabelBlockComponent, DbxLinkComponent, DbxLinkifyComponent, DbxLinkifyService, DbxLinkifyServiceConfig, DbxListAccordionViewComponentImportsModule, DbxListComponent, DbxListEmptyContentComponent, DbxListGridViewComponentImportsModule, DbxListInternalContentDirective, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListItemIsSelectedModifierDirective, DbxListModifierModule, DbxListModule, DbxListTitleGroupDirective, DbxListTitleGroupHeaderComponent, DbxListView, DbxListViewMetaIconComponent, DbxListViewWrapper, DbxListWrapperComponentImportsModule, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxMcpConnectButtonComponent, DbxMcpConnectDialogComponent, DbxMcpConnectService, DbxMcpConnectServiceConfig, DbxMcpConnectViewComponent, DbxModelObjectStateService, actions_d as DbxModelStateActions, model_actions_d as DbxModelStateModelActions, DbxModelTrackerService, DbxModelTypesService, DbxModelViewTrackerStorage, DbxNavbarComponent, DbxNumberWithLimitComponent, DbxOneColumnComponent, DbxPagebarComponent, DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxPdfMergeEditorComponent, DbxPdfMergeEditorFileUploadComponent, DbxPdfMergeEditorFileUploadHasStateDirective, DbxPdfMergeEditorFileUploadValidatorDirective, DbxPdfMergeEditorStore, DbxPdfMergeEditorStoreDirective, DbxPdfMergeEntryComponent, DbxPdfMergeImportComponent, DbxPdfMergeListComponent, DbxPdfMergePageComponent, DbxPdfMergePageListComponent, DbxPdfMergeUploadActionDirective, DbxPdfMergeUploadButtonDirective, DbxPdfMergeUploadDialogComponent, DbxPdfPreviewComponent, DbxPopoverCloseButtonComponent, DbxPopoverComponent, DbxPopoverComponentController, DbxPopoverContentComponent, DbxPopoverController, DbxPopoverControlsDirective, DbxPopoverCoordinatorComponent, DbxPopoverCoordinatorService, DbxPopoverHeaderComponent, DbxPopoverInteractionContentModule, DbxPopoverInteractionModule, DbxPopoverScrollContentDirective, DbxPopoverService, DbxPopupComponent, DbxPopupComponentController, DbxPopupContentComponent, DbxPopupControlButtonsComponent, DbxPopupController, DbxPopupControlsComponent, DbxPopupCoordinatorComponent, DbxPopupCoordinatorService, DbxPopupInteractionModule, DbxPopupService, DbxPopupWindowState, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent, DbxProgressBarButtonComponent, DbxProgressSpinnerButtonComponent, DbxPromptBoxDirective, DbxPromptComponent, DbxPromptConfirm, DbxPromptConfirmButtonDirective, DbxPromptConfirmComponent, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective, DbxPromptModule, DbxPromptPageComponent, DbxResizedDirective, DbxRotatingButtonDirective, DbxRouterAnchorModule, DbxRouterLayoutModule, DbxRouterSidenavModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListViewComponent, DbxSelectionValueListViewComponentImportsModule, DbxSelectionValueListViewContentComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxStepBlockComponent, DbxStructureDirective, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxTextChipsComponent, DbxTextColorDirective, DbxTextModule, DbxTwoBlockComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadDirective, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxTwoColumnSrefShowRightDirective, DbxUIRouterSegueAnchorComponent, DbxUnitedStatesAddressComponent, DbxValueListAccordionViewComponent, DbxValueListAccordionViewContentComponent, DbxValueListGridSizeDirective, DbxValueListGridViewComponent, DbxValueListGridViewContentComponent, DbxValueListGridViewContentGroupComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListView, DbxValueListViewComponent, DbxValueListViewComponentImportsModule, DbxValueListViewContentComponent, DbxValueListViewContentGroupComponent, DbxValueListViewGroupDelegate, DbxWebFilePreviewComponent, DbxWebFilePreviewService, DbxWebModule, DbxWebPageTitleInfoDirective, DbxWebPageTitleService, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent, DbxWidgetService, DbxWidgetViewComponent, DbxWindowKeyDownListenerDirective, DbxZipBlobPreviewComponent, DbxZipPreviewComponent, GROK_DBX_MCP_CONNECT_CLIENT, PDF_MERGE_PAGE_ID_SEPARATOR, PDF_MERGE_PAGE_TAG_KEY, PDF_MERGE_RESULT_MIME_TYPE, PDF_MERGE_SIDECAR_DESCRIPTION, PDF_MERGE_SIDECAR_FILE_NAME, PDF_MERGE_SIDECAR_VERSION, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SIDE_NAV_DISPLAY_MODE_ORDER, SideNavDisplayMode, TRACK_BY_MODEL_ID, TRACK_BY_MODEL_KEY, TwoColumnsContextStore, UNKNOWN_ERROR_WIDGET_CODE, VSCODE_DBX_MCP_CONNECT_CLIENT, addConfigToValueListItems, allDbxModelViewTrackerEventModelKeys, allDbxModelViewTrackerEventSetModelKeys, asPdfMergeFile, attachPdfMergeSidecar, buildPdfMergeEntriesFromSidecar, buildPdfMergeEntry, buildPdfMergeEntrySync, buildPdfMergePagePlan, catchErrorServerParams, classifyPdfMergeFile, compactModeFromInput, compareScreenMediaWidthTypes, compressImageFile, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, copyToClipboardFunction, cursorDbxMcpConnectInstallUrl, dbxColorBackground, dbxCuratedColorConfigForString, dbxMcpConnectServerLabel, dbxMcpConnectServerName, dbxPresetFilterMenuButtonIconObservable, dbxPresetFilterMenuButtonTextObservable, dbxRotatingButtonAriaLabel, dbxRotatingButtonRotationOrder, dbxRotatingButtonStateIndex, dbxStyleClassCleanSuffix, dbxThemeColorCssToken, dbxThemeColorCssTokenVar, dbxTristateEffectiveValue, dbxTristateRotatingButtonConfig, dbxTristateState, dbxTristateStateLabel, dbxValueListItemDecisionFunction, dbxValueListItemKeyForItemValue, dbxValueListItemSeparatorConfigs, dbxValueListItemSeparatorDecisionFunction, dbxWebDefaultPageTitleDelegate, dbxZipBlobPreviewEntryTreeFromEntries, defaultDbxModelViewTrackerStorageAccessorFactory, defaultDbxValueListViewGroupDelegate, defaultDbxValueListViewGroupValuesFunction, disableRightClickInCdkBackdrop, entryIdForPdfMergePageId, fileAcceptFilterTypeStringArray, fileAcceptFunction, fileAcceptString, fileArrayAcceptMatchFunction, fileArrayAcceptMaxFiles, findDbxBrowserAgentViewEntry, flattenAccordionGroups, formatPdfMergeEntrySize, index_d$1 as fromDbxModel, injectCopyToClipboardFunction, injectCopyToClipboardFunctionWithSnackbarMessage, isConfidentialDbxMcpConnectOAuthClient, isDbxColorConfig, isEqualDbxRotatingButtonValue, listItemModifier, makeClaudeCodeDbxMcpConnectClient, makeDbxActionSnackbarDisplayConfigGeneratorFunction, makeDbxBrowserAgentViewConfigFromOsMap, makeDbxBrowserAgentViewEntryForOs, makePdfMergePageId, makePdfMergeSidecar, makePdfMergeSidecarPageTag, mapCompactModeObs, mapValuesToValuesListItemConfigObs, mergePdfMergeEntries, nextDbxRotatingButtonState, index_d as onDbxModel, openEmbedDialog, openIframeDialog, openPdfPreviewDialog, openZipPreviewDialog, overrideClickElementEffect, pdfMergeEntriesUseEncryptedPassthrough, pdfMergePageGroupKeyForSlotId, provideDbxDetachController, provideDbxFileUploadActionCompatable, provideDbxHelpServices, provideDbxLinkify, provideDbxListView, provideDbxListViewWrapper, provideDbxMcpConnectService, provideDbxModelService, provideDbxPdfMergeEditorConfig, provideDbxPdfMergeEditorPreserveEntriesOnSlotDestroy, provideDbxProgressButtonGlobalConfig, provideDbxPromptConfirm, provideDbxRouterWebAngularRouterProviderConfig, provideDbxRouterWebUiRouterProviderConfig, provideDbxScreenMediaService, provideDbxStyleService, provideDbxValueListView, provideDbxValueListViewGroupDelegate, provideDbxValueListViewModifier, provideDbxWebFilePreviewServiceEntries, provideDbxWebPageTitleService, provideTwoColumnsContext, readPdfMergeEntryPageMetas, readPdfMergePageTag, readPdfMergeSidecar, registerHelpContextKeysWithDbxHelpContextService, resizeSignal, resolveSideNavDisplayMode, sanitizeDbxDialogContentConfig, screenMediaWidthTypeIsActive, splitPdfMergeSidecarDocuments, trackByModelKeyRef, trackByUniqueIdentifier, validatePdfMergeEntry, vscodeDbxMcpConnectInstallUrl, writePdfMergePageTag }; export type { AbstractDbxValueListViewConfig, AnchorForValueFunction, BuildPdfMergeEntriesFromSidecarConfig, BuildPdfMergeEntryConfig, BuildPdfMergePagePlanInput, ClaudeCodeDbxMcpConnectClientConfig, CompactContextState, CompactModeDefaultOptions, CompactModeOption, CompactModeOptions, CompressImageDimensions, CompressImageFileResult, CopyToClipboardContent, CopyToClipboardFunction, CopyToClipboardFunctionConfig, CopyToClipboardFunctionWithSnackbarMessage, CopyToClipboardFunctionWithSnackbarMessageConfig, CopyToClipboardFunctionWithSnackbarMessageSnackbarConfig, CopyToClipboardSuccess, DbxAccordionRenderEntry, DbxAccordionRenderGroupFooterEntry, DbxAccordionRenderGroupHeaderEntry, DbxAccordionRenderItemEntry, DbxAccordionRenderSeparatorEntry, DbxActionConfirmConfig, DbxActionDialogFunction, DbxActionPopoverFunction, DbxActionPopoverFunctionParams, DbxActionSnackbarActionConfig, DbxActionSnackbarDisplayConfig, DbxActionSnackbarDisplayConfigGeneratorFunction, DbxActionSnackbarEvent, DbxActionSnackbarEventMakeConfig, DbxActionSnackbarGeneratorInput, DbxActionSnackbarGeneratorUndoInput, DbxActionSnackbarGeneratorUndoInputConfig, DbxActionSnackbarKnownType, DbxActionSnackbarServiceConfig, DbxActionSnackbarType, DbxActionTransitionSafetyDialogResult, DbxActionTransitionSafetyType, DbxAnchorListExpandedAnchor, DbxAvatarComponentForContextFunction, DbxAvatarContext, DbxAvatarImageFit, DbxAvatarInjectionComponentConfig, DbxAvatarKey, DbxAvatarSelector, DbxAvatarSize, DbxAvatarStyle, DbxBrowserAgentViewConfig, DbxBrowserAgentViewEntry, DbxBrowserAgentViewEntryKey, DbxBrowserAgentViewOsDisplay, DbxBrowserAgentViewOsEntryConfig, DbxBrowserAgentViewOsKey, DbxBrowserAgentViewOsMapConfig, DbxBrowserAgentViewOsMapValue, DbxButtonDisplayStylePair, DbxButtonFloatingConfig, DbxButtonFloatingHorizontalAlignment, DbxButtonFloatingMode, DbxButtonFloatingOffset, DbxButtonFloatingPosition, DbxButtonStyle, DbxButtonType, DbxChipDisplay, DbxClickToCopyFieldComponentConfig, DbxClickToCopyTextComponentConfig, DbxColorConfig, DbxColorConfigTemplate, DbxColorConfigTemplateKey, DbxColorInput, DbxColorTone, DbxContentBorderOpacity, DbxContentContainerPadding, DbxContentContainerWidth, DbxContentPitScrollableHeight, DbxContentPitScrollableHeightSetting, DbxContentPitScrollableInput, DbxDetachConfig, DbxDetachInstance, DbxDetachKey, DbxDetachOverlayConfig, DbxDetachOverlayData, DbxDetachWindowStateType, DbxDialogContentConfig, DbxDialogContentContainerWidth, DbxDialogContentFooterConfig, DbxDownloadBlobButtonConfig, DbxEmbedComponentElement, DbxEmbedDialogConfig, DbxErrorPopoverConfig, DbxErrorSnackbarConfig, DbxErrorSnackbarData, DbxErrorViewButtonEvent, DbxErrorWidgetEntry, DbxErrorWidgetEntryWithPopupComponentClass, DbxFileListComponentConfig, DbxFileListEntry, DbxFileListItemComponentConfig, DbxFileListItemDetailsDateStyle, DbxFileUploadAreaFilesChangedEvent, DbxFileUploadButtonFilesChangedEvent, DbxFileUploadComponentConfig, DbxFileUploadFilesChangedEvent, DbxFileUploadMode, DbxFilterButtonConfig, DbxFilterButtonConfigWithCustomFilter, DbxFilterButtonConfigWithPresetFilter, DbxFilterComponentConfig, DbxFilterPopoverApplyPendingFunction, DbxFilterPopoverComponentConfig, DbxFilterPopoverView, DbxFilterPopoverViewServiceConfig, DbxFlexSize, DbxHelpContextKey, DbxHelpContextReference, DbxHelpViewPopoverButtonConfig, DbxHelpViewPopoverConfig, DbxHelpViewPopoverConfigWithoutOrigin, DbxHelpWidgetEntryData, DbxHelpWidgetServiceConfigFactory, DbxHelpWidgetServiceEntry, DbxIframeDialogConfig, DbxImageCompressionConfig, DbxInjectionDialogComponentConfig, DbxLinkifyConfig, DbxLinkifyServiceConfigFactory, DbxLinkifyServiceDefaultEntry, DbxLinkifyServiceEntry, DbxLinkifyStringOptions, DbxLinkifyStringType, DbxListComponentScrolledEventPosition, DbxListConfig, DbxListLoadMoreHandler, DbxListScrollDirectionTrigger, DbxListSelectionMode, DbxListTitleGroupData, DbxListTitleGroupTitleDelegate, DbxListViewMetaIconConfig, DbxListWrapperConfig, DbxLoadingComponentState, DbxLoadingIsLoadingOrProgress, DbxLoadingProgress, DbxMakeActionSnackbarGeneratorConfiguration, DbxMakeActionSnackbarGeneratorEventConfiguration, DbxMcpConnectButtonConfig, DbxMcpConnectClient, DbxMcpConnectClientId, DbxMcpConnectClientInstructions, DbxMcpConnectClientInstructionsAction, DbxMcpConnectClientInstructionsParams, DbxMcpConnectClientInstructionsSnippet, DbxMcpConnectDialogConfig, DbxMcpConnectOAuthClient, DbxMcpConnectOAuthClientId, DbxMcpConnectOAuthClientSecret, DbxMcpConnectServer, DbxMcpConnectViewConfig, DbxModelFullState, DbxModelIconsMap, DbxModelTypeConfiguration, DbxModelTypeConfigurationMap, DbxModelTypeConfigurationSrefFactory, DbxModelTypeConfigurationSrefFactoryBuilder, DbxModelTypeInfo, DbxModelTypesMap, DbxModelViewTrackerEvent, DbxModelViewTrackerEventSet, DbxNavbarClickableAnchorLinkSegueRef, DbxPdfMergeEditorAddFileToSlotInput, DbxPdfMergeEditorAddFilesInput, DbxPdfMergeEditorClearEntriesInput, DbxPdfMergeEditorClearEntriesResult, DbxPdfMergeEditorConfig, DbxPdfMergeEditorFileUploadConfig, DbxPdfMergeEditorFileUploadState, DbxPdfMergeEditorFileUploadValidatorSlot, DbxPdfMergeEditorImportErrorReason, DbxPdfMergeEditorImportMergedPdfInput, DbxPdfMergeEditorImportOrigin, DbxPdfMergeEditorImportResult, DbxPdfMergeEditorImportState, DbxPdfMergeEditorOutputSizeState, DbxPdfMergeEditorSourceConfig, DbxPdfMergeEditorValidator, DbxPdfMergeEncryptedHandling, DbxPdfMergeImportConfig, DbxPdfMergeOutputSizeLimitsConfig, DbxPdfMergeUploadButtonConfig, DbxPdfMergeUploadDialogConfig, DbxPdfMergeUploadDialogUploadButtonConfig, DbxPdfPreviewDialogConfig, DbxPopoverComponentConfig, DbxPopoverConfig, DbxPopoverConfigSizing, DbxPopoverKey, DbxPopupComponentConfig, DbxPopupConfig, DbxPopupKey, DbxPopupWindowStateType, DbxPresetFilterMenuConfig, DbxProgressButtonConfig, DbxProgressButtonGlobalConfig, DbxProgressButtonIcon, DbxProgressButtonTargetedConfig, DbxPromptConfirmConfig, DbxPromptConfirmDialogConfig, DbxRotatingButtonConfig, DbxRotatingButtonDefaultState, DbxRotatingButtonState, DbxRotatingButtonValueIsEqualFunction, DbxSectionHeaderConfig, DbxSectionHeaderHType, DbxSectionPageScrollLockedMode, DbxSelectionListWrapperConfig, DbxSelectionValueListViewConfig, DbxSetStyleMode, DbxSidenavPosition, DbxSidenavSidebarState, DbxStepBlockComponentConfig, DbxStyleApplication, DbxStyleClass, DbxStyleClassCleanSuffix, DbxStyleClassDashSuffix, DbxStyleClassSuffix, DbxStyleConfig, DbxStyleName, DbxStyleSupplement, DbxThemeColor, DbxThemeColorExtra, DbxThemeColorExtraSecondary, DbxThemeColorMain, DbxThemeColorMainOrExtra, DbxTristateRotatingButtonConfigInput, DbxTristateState, DbxTristateStateDisplayConfig, DbxTristateStateLabelInput, DbxTristateValue, DbxTwoColumnViewState, DbxValueAsListItem, DbxValueListAccordionViewConfig, DbxValueListGridItemViewGridSizeConfig, DbxValueListGridViewConfig, DbxValueListItem, DbxValueListItemConfig, DbxValueListItemDecisionFunction, DbxValueListItemGroup, DbxValueListItemSeparatorContext, DbxValueListItemSeparatorDecisionFunction, DbxValueListViewConfig, DbxValueListViewGroupValuesFunction, DbxValueListViewSeparatorConfig, DbxWebDefaultPageTitleDelegateConfig, DbxWebFilePreviewComponentConfig, DbxWebFilePreviewServiceEntry, DbxWebFilePreviewServicePreviewComponentFunction, DbxWebFilePreviewServicePreviewComponentFunctionInput, DbxWebFilePreviewServicePreviewDialogFunction, DbxWebFilePreviewServicePreviewDialogFunctionInput, DbxWebFilePreviewServicePreviewDialogFunctionInputWithMatDialog, DbxWebFilePreviewServicePreviewDialogWithComponentFunction, DbxWebFilePreviewServicePreviewDialogWithComponentFunctionInput, DbxWebPageTitleDelegate, DbxWebPageTitleDelegateInput, DbxWebPageTitleDetails, DbxWebPageTitleInfoConfig, DbxWebPageTitleInfoReference, DbxWebPageTitleServiceConfig, DbxWidgetDataPair, DbxWidgetDataPairFactory, DbxWidgetDataPairWithSelection, DbxWidgetEntry, DbxWidgetType, DbxWidgetViewComponentConfig, DbxZipBlobPreviewEntryNodeValue, DbxZipBlobPreviewEntryTreeNode, DbxZipBlobPreviewEntryTreeRoot, DbxZipBlobPreviewGroupData, DbxZipBlobPreviewGroupValue, DbxZipBlobPreviewMode, DbxZipPreviewDialogConfig, DownloadTextContent, FileAcceptFilterTypeString, FileAcceptFilterTypeStringArray, FileAcceptFunction, FileAcceptFunctionInput, FileAcceptString, FileArrayAcceptMatchConfig, FileArrayAcceptMatchFunction, FileArrayAcceptMatchResult, FileArrayAcceptMaxFilesInput, FullDbxPopoverComponentConfig, ImageBitmapToBlobEncoder, ImageBitmapToBlobEncoderInput, ImageCompressionStatus, ListItemModifier, ListSelectionState, ListSelectionStateItem, LoadingComponentState, MergePdfMergeEntriesOptions, ModelViewContext, NavBarContentAlign, NavbarButtonMode, NavbarMode, NumberWithLimit, OverrideClickElementEffectConfig, PdfMergeEditorState, PdfMergeEntry, PdfMergeEntryKind, PdfMergeEntryMove, PdfMergeEntryOriginal, PdfMergeEntryStatus, PdfMergeEntryValidationResult, PdfMergeEntryView, PdfMergePageGroup, PdfMergePageMeta, PdfMergePageMove, PdfMergePageOverride, PdfMergePageRemovedChange, PdfMergePageRotation, PdfMergePageRotationChange, PdfMergePageView, PdfMergeSidecar, PdfMergeSidecarDocument, PdfMergeSidecarDocumentFile, PdfMergeSidecarImportErrorReason, PdfMergeSidecarImportResult, PdfMergeSidecarPage, PdfMergeSidecarReadInput, PdfMergeSidecarReadResult, PdfMergeSidecarResolvedDocument, PdfMergeSidecarResolvedPage, PopoverPositionStrategyConfig, PopupPosition, PopupPositionOffset, ProvideDbxHelpServicesConfig, ProvideDbxLinkifyConfig, ProvideDbxMcpConnectServiceConfig, ProvideDbxScreenMediaServiceConfig, ProvideDbxStyleServiceConfig, ProvideDbxWebPageTitleServiceConfig, ResizedEvent, ScreenMediaHeightType, ScreenMediaWidthType, ServerErrorParams, SideNavDisplayModeString, SplitPdfMergeSidecarResult, TextChip, TwoColumnsState };