@dereekb/dbx-web 12.6.11 → 12.6.13

package/lib/extension/_extension.scss

@@ -3,16 +3,19 @@
 @use './calendar/calendar';
 @use './table/table';
 @use './zip/zip';
+@use './help/help';
 
 @mixin all-extension-core($theme-config) {
   $calendar-enabled: 1;
   $table-enabled: 1;
   $zip-enabled: 1;
+  $help-enabled: 1;
 
   @if ($theme-config != null) {
     $calendar-enabled: config.get-dbx-extension-calendar-enabled($theme-config);
     $table-enabled: config.get-dbx-extension-table-enabled($theme-config);
     $zip-enabled: config.get-dbx-extension-zip-enabled($theme-config);
+    $help-enabled: config.get-dbx-extension-help-enabled($theme-config);
   }
 
   @if ($calendar-enabled == 1) {
@@ -26,12 +29,17 @@
   @if ($zip-enabled == 1) {
     @include zip.core();
   }
+
+  @if ($help-enabled == 1) {
+    @include help.core();
+  }
 }
 
 @mixin all-extension-typography($theme-config-or-typography-config) {
   $calendar-enabled: 1;
   $table-enabled: 1;
   $zip-enabled: 1;
+  $help-enabled: 1;
 
   @if ($theme-config-or-typography-config != null) {
     @if (theming.private-is-theme-object($theme-config-or-typography-config)) {
@@ -40,6 +48,7 @@
       $calendar-enabled: config.get-dbx-extension-calendar-enabled($theme-config);
       $table-enabled: config.get-dbx-extension-table-enabled($theme-config);
       $zip-enabled: config.get-dbx-extension-zip-enabled($theme-config);
+      $help-enabled: config.get-dbx-extension-help-enabled($theme-config);
     }
 
     @if ($calendar-enabled == 1) {
@@ -53,6 +62,10 @@
     @if ($zip-enabled == 1) {
       @include zip.typography($theme-config-or-typography-config);
     }
+
+    @if ($help-enabled == 1) {
+      @include help.typography($theme-config-or-typography-config);
+    }
   }
 }
 
@@ -60,11 +73,13 @@
   $calendar-enabled: 1;
   $table-enabled: 1;
   $zip-enabled: 1;
+  $help-enabled: 1;
 
   @if ($theme-config != null) {
     $calendar-enabled: config.get-dbx-extension-calendar-enabled($theme-config);
     $table-enabled: config.get-dbx-extension-table-enabled($theme-config);
     $zip-enabled: config.get-dbx-extension-zip-enabled($theme-config);
+    $help-enabled: config.get-dbx-extension-help-enabled($theme-config);
   }
 
   @if ($calendar-enabled == 1) {
@@ -78,4 +93,8 @@
   @if ($zip-enabled == 1) {
     @include zip.theme($theme-config);
   }
+
+  @if ($help-enabled == 1) {
+    @include help.theme($theme-config);
+  }
 }

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

@@ -3,15 +3,13 @@ import { WorkUsingObservable, LoadingState, MaybeObservableOrValue } from '@dere
 import { type Maybe } from '@dereekb/util';
 import { Observable } from 'rxjs';
 import { DownloadTextContent } from './download.text';
-import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { DbxDownloadBlobButtonConfig } from '../blob/download.blob.button.component';
+import { AbstractDbxClipboardDirective } from '../../../util/clipboard.directive';
 import * as i0 from "@angular/core";
 /**
  * View for previewing and downloading arbitrary text content.
  */
-export declare class DbxDownloadTextViewComponent extends AbstractSubscriptionDirective implements OnDestroy {
-    private readonly _clipboard;
-    private readonly _matSnackbar;
+export declare class DbxDownloadTextViewComponent extends AbstractDbxClipboardDirective implements OnDestroy {
     private readonly _browserObjectUrl;
     readonly downloadButton: import("@angular/core").Signal<Maybe<ElementRef<any>>>;
     readonly loadingText: import("@angular/core").InputSignal<Maybe<string>>;

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

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./download.text.component";
 /**
- * @deprecated import DbxDownloadtextVie
+ * @deprecated import DbxDownloadTextViewComponent directly instead.
  */
 export declare class DbxDownloadTextModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxDownloadTextModule, never>;

package/lib/extension/help/_help.scss

@@ -0,0 +1,27 @@
+@use '../../style/theming';
+
+@mixin core() {
+}
+
+@mixin color($theme-config) {
+}
+
+@mixin typography($theme-config-or-typography-config) {
+  // Add typography styles if needed
+}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-help') {
+    $color: theming.m2-get-color-config($theme-config);
+    $density: theming.m2-get-density-config($theme-config);
+    $typography: theming.m2-get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($theme-config);
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import { DbxHelpContextString } from './help';
+import * as i0 from "@angular/core";
+/**
+ * Abstract help widget directive that injects the help widget data.
+ */
+export declare abstract class DbxAbstractHelpWidgetDirective {
+    readonly helpWidgetData: import("./help.widget").DbxHelpWidgetEntryData;
+    readonly helpWidgetEntry: import("./help.widget").DbxHelpWidgetServiceEntry;
+    get helpContextString(): DbxHelpContextString;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAbstractHelpWidgetDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxAbstractHelpWidgetDirective, never, never, {}, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,11 @@
+import { type ObservableOrValue } from '@dereekb/rxjs';
+import { type DbxHelpContextString } from './help';
+import { type DestroyFunction } from '@dereekb/util';
+/**
+ * Registers the input observable with the DbxHelpContextService.
+ *
+ * Must be run in an injectable context.
+ *
+ * Automatically cleans up, but returns a destroy function for manual cleanup.
+ */
+export declare function registerHelpContextStringsWithDbxHelpContextService(helpContextStrings: ObservableOrValue<DbxHelpContextString[]>): DestroyFunction;

package/lib/extension/help/help.context.directive.d.ts

@@ -0,0 +1,17 @@
+import { DbxHelpContextString } from './help';
+import { ArrayOrValue } from '@dereekb/util';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * Directive that registers one or more help contexts to the current context.
+ */
+export declare class DbxHelpContextDirective {
+    /**
+     * The input help context string(s) to add.
+     */
+    readonly dbxHelpContext: import("@angular/core").InputSignal<ArrayOrValue<string>>;
+    readonly helpContextStrings$: Observable<DbxHelpContextString[]>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxHelpContextDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxHelpContextDirective, "[dbxHelpContext]", never, { "dbxHelpContext": { "alias": "dbxHelpContext"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,20 @@
+import { OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DbxHelpContextString, DbxHelpContextReference } from './help';
+import * as i0 from "@angular/core";
+/**
+ * Service that tracks all active help context strings in the current context.
+ */
+export declare class DbxHelpContextService implements OnDestroy {
+    private readonly _contextReferences;
+    /**
+     * Observable of all currently active help context strings.
+     */
+    readonly activeHelpContextStrings$: Observable<Set<DbxHelpContextString>>;
+    readonly activeHelpContextStringsArray$: Observable<string[]>;
+    register(reference: DbxHelpContextReference): void;
+    unregister(reference: DbxHelpContextReference): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxHelpContextService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DbxHelpContextService>;
+}

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

@@ -0,0 +1,15 @@
+import { type Observable } from 'rxjs';
+/**
+ * String type for identifying help topics
+ */
+export type DbxHelpContextString = string;
+/**
+ * Reference object for tracking help context registrations.
+ * Used internally to track multiple directives with the same context string.
+ */
+export interface DbxHelpContextReference {
+    /**
+     * Observable of context strings that this reference provides.
+     */
+    readonly helpContextStrings$: Observable<DbxHelpContextString[]>;
+}

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

@@ -0,0 +1,22 @@
+import { type EnvironmentProviders, type Injector } from '@angular/core';
+import { DbxHelpWidgetServiceConfig } from './help.widget.service';
+/**
+ * Factory for DbxHelpWidgetServiceConfig.
+ */
+export type DbxHelpWidgetServiceConfigFactory = (injector: Injector) => DbxHelpWidgetServiceConfig;
+/**
+ * Configuration for provideDbxHelpServices().
+ */
+export interface ProvideDbxHelpServicesConfig {
+    /**
+     * Initial help widget entries to register.
+     */
+    readonly dbxHelpWidgetServiceConfigFactory?: DbxHelpWidgetServiceConfigFactory;
+}
+/**
+ * Creates EnvironmentProviders for the help context system.
+ *
+ * @param config Optional configuration
+ * @returns EnvironmentProviders
+ */
+export declare function provideDbxHelpServices(config?: ProvideDbxHelpServicesConfig): EnvironmentProviders;

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

@@ -0,0 +1,20 @@
+import { DbxHelpContextString } from './help';
+import { ObservableOrValue } from '@dereekb/rxjs';
+import { Observable } from 'rxjs';
+import { DbxHelpWidgetService } from './help.widget.service';
+import { ArrayOrValue } from '@dereekb/util';
+import * as i0 from "@angular/core";
+export declare class DbxHelpViewListComponent {
+    readonly helpWidgetService: DbxHelpWidgetService;
+    /**
+     * Whether the accordion should allow multiple expanded panels.
+     */
+    readonly multi: import("@angular/core").InputSignal<boolean>;
+    readonly helpContextStrings: import("@angular/core").InputSignal<ObservableOrValue<ArrayOrValue<string>>>;
+    readonly helpContextStrings$: Observable<DbxHelpContextString[]>;
+    readonly helpContextStringsSignal: import("@angular/core").Signal<string[]>;
+    readonly helpWidgetEntriesSignal: import("@angular/core").Signal<import("@dereekb/dbx-web").DbxHelpWidgetServiceEntry[]>;
+    readonly hasNoHelpWidgetEntriesSignal: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxHelpViewListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxHelpViewListComponent, "dbx-help-view-list", never, { "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "helpContextStrings": { "alias": "helpContextStrings"; "required": true; "isSignal": true; }; }, {}, never, ["[empty]"], true, never>;
+}

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

@@ -0,0 +1,16 @@
+import { Signal } from '@angular/core';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
+import { DbxHelpWidgetServiceEntry } from './help.widget';
+import { Maybe } from '@dereekb/util';
+import { DbxHelpWidgetService } from './help.widget.service';
+import * as i0 from "@angular/core";
+export declare class DbxHelpViewListEntryComponent {
+    readonly helpWidgetEntry: import("@angular/core").InputSignal<DbxHelpWidgetServiceEntry>;
+    readonly helpWidgetService: DbxHelpWidgetService;
+    readonly titleSignal: Signal<string>;
+    readonly iconSignal: Signal<Maybe<string>>;
+    readonly widgetInjectionConfigSignal: Signal<DbxInjectionComponentConfig>;
+    readonly headerInjectionConfigSignal: Signal<Maybe<DbxInjectionComponentConfig>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxHelpViewListEntryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxHelpViewListEntryComponent, "dbx-help-view-list-entry", never, { "helpWidgetEntry": { "alias": "helpWidgetEntry"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,19 @@
+import { ElementRef } from '@angular/core';
+import { Maybe } from '@dereekb/util';
+import { AbstractPopoverRefDirective } from '../../interaction/popover/abstract.popover.ref.directive';
+import { NgPopoverRef } from 'ng-overlay-container';
+import { DbxHelpViewPopoverConfigWithoutOrigin } from './help.view.popover.component';
+import * as i0 from "@angular/core";
+export type DbxHelpViewPopoverButtonConfig = DbxHelpViewPopoverConfigWithoutOrigin;
+/**
+ * Button component that opens a help popover showing active help contexts.
+ */
+export declare class DbxHelpViewPopoverButtonComponent extends AbstractPopoverRefDirective<unknown, unknown> {
+    private readonly _dbxPopoverService;
+    readonly buttonElement: import("@angular/core").Signal<ElementRef<any>>;
+    readonly config: import("@angular/core").InputSignal<Maybe<DbxHelpViewPopoverConfigWithoutOrigin>>;
+    protected _makePopoverRef(origin?: Maybe<ElementRef>): NgPopoverRef<unknown, unknown>;
+    showHelpPopover(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxHelpViewPopoverButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxHelpViewPopoverButtonComponent, "dbx-help-view-popover-button", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,60 @@
+import { ElementRef } from '@angular/core';
+import { ArrayOrValue, Maybe } from '@dereekb/util';
+import { AbstractPopoverDirective } from '../../interaction/popover/abstract.popover.directive';
+import { DbxPopoverKey } from '../../interaction/popover/popover';
+import { DbxPopoverService } from '../../interaction/popover/popover.service';
+import { DbxHelpContextString } from './help';
+import { NgPopoverRef } from 'ng-overlay-container';
+import { ObservableOrValue } from '@dereekb/rxjs';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
+import * as i0 from "@angular/core";
+export declare const DEFAULT_DBX_HELP_VIEW_POPOVER_KEY = "help";
+export 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 helpContextStrings?: Maybe<ObservableOrValue<ArrayOrValue<DbxHelpContextString>>>;
+    /**
+     * Overrides the default popover header config.
+     *
+     * If not provided, the default popover header config will be used from DbxHelpWidgetService.
+     */
+    readonly popoverHeaderConfig?: Maybe<DbxInjectionComponentConfig>;
+}
+export type DbxHelpViewPopoverConfigWithoutOrigin = Omit<DbxHelpViewPopoverConfig, 'origin'>;
+/**
+ * Popover component for displaying help contexts.
+ */
+export declare class DbxHelpViewPopoverComponent extends AbstractPopoverDirective<unknown, DbxHelpViewPopoverConfig> {
+    private readonly _helpContextService;
+    private readonly _helpWidgetService;
+    readonly helpContextStrings$: string | string[] | import("rxjs").Observable<ArrayOrValue<string>>;
+    static openPopover(popoverService: DbxPopoverService, config: DbxHelpViewPopoverConfig, popoverKey?: DbxPopoverKey): NgPopoverRef;
+    get config(): DbxHelpViewPopoverConfig;
+    readonly icon: string;
+    readonly header: string;
+    readonly emptyText: string;
+    readonly popoverHeaderConfig: Maybe<DbxInjectionComponentConfig>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxHelpViewPopoverComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxHelpViewPopoverComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,42 @@
+import { InjectionToken, type Type } from '@angular/core';
+import { type Maybe } from '@dereekb/util';
+import { type DbxHelpContextString } from './help';
+/**
+ * Entry defining a help widget for a specific context
+ */
+export interface DbxHelpWidgetServiceEntry {
+    /**
+     * Help context string specific to this entry.
+     */
+    readonly helpContextString: DbxHelpContextString;
+    /**
+     * Title/Label for the help topic.
+     */
+    readonly title: string;
+    /**
+     * Icon for the help topic, if applicable.
+     */
+    readonly icon?: Maybe<string>;
+    /**
+     * Custom help widget component class to use.
+     *
+     * The component will receive the context string as data.
+     */
+    readonly widgetComponentClass: Type<unknown>;
+    /**
+     * Custom header component class to use that shows up on the widget.
+     *
+     * The component will receive the context string as data.
+     */
+    readonly headerComponentClass?: Maybe<Type<unknown>>;
+}
+export interface DbxHelpWidgetEntryData {
+    /**
+     * Corresponding widget entry.
+     */
+    readonly helpWidgetEntry: DbxHelpWidgetServiceEntry;
+}
+/**
+ * Injection token for DbxHelpWidgetData.
+ */
+export declare const DBX_HELP_WIDGET_ENTRY_DATA_TOKEN: InjectionToken<DbxHelpWidgetEntryData>;

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

@@ -0,0 +1,55 @@
+import { Type } from '@angular/core';
+import { ArrayOrValue, Maybe } from '@dereekb/util';
+import { DbxHelpContextString } from './help';
+import { DbxHelpWidgetServiceEntry } from './help.widget';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
+import * as i0 from "@angular/core";
+export declare abstract class DbxHelpWidgetServiceConfig {
+    abstract readonly entries?: Maybe<DbxHelpWidgetServiceEntry[]>;
+    /**
+     * Default icon to use for unknown help topics.
+     */
+    abstract readonly defaultIcon?: Maybe<string>;
+    /**
+     * Default/Unknown help topic component class.
+     */
+    abstract readonly defaultWidgetComponentClass?: Maybe<Type<unknown>>;
+    /**
+     * Optional header component class to use for the list view.
+     */
+    abstract readonly popoverHeaderComponentConfig?: Maybe<DbxInjectionComponentConfig>;
+}
+/**
+ * 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.
+ */
+export declare class DbxHelpWidgetService {
+    private readonly _entries;
+    private _defaultWidgetComponentClass;
+    private _defaultIcon?;
+    private _popoverHeaderComponentConfig;
+    constructor(initialConfig?: DbxHelpWidgetServiceConfig);
+    getDefaultWidgetComponentClass(): Maybe<Type<unknown>>;
+    setDefaultWidgetComponentClass(componentClass: Maybe<Type<unknown>>): void;
+    getDefaultIcon(): Maybe<string>;
+    setDefaultIcon(icon: Maybe<string>): void;
+    getPopoverHeaderComponentConfig(): Maybe<DbxInjectionComponentConfig>;
+    setPopoverHeaderComponentConfig(componentConfig: Maybe<DbxInjectionComponentConfig>): 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)
+     */
+    register(entries: ArrayOrValue<DbxHelpWidgetServiceEntry>, override?: boolean): boolean;
+    getAllRegisteredHelpContextStrings(): DbxHelpContextString[];
+    getHelpWidgetEntry(helpContextString: DbxHelpContextString): Maybe<DbxHelpWidgetServiceEntry>;
+    getHelpWidgetEntriesForHelpContextStrings(helpContextStrings: DbxHelpContextString[]): DbxHelpWidgetServiceEntry[];
+    hasHelpWidgetEntry(context: DbxHelpContextString): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxHelpWidgetService, [{ optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DbxHelpWidgetService>;
+}

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

@@ -0,0 +1,12 @@
+export * from './help.context.directive';
+export * from './help.context.service';
+export * from './help.context';
+export * from './help.providers';
+export * from './absract.help.widget.directive';
+export * from './help';
+export * from './help.view.list.component';
+export * from './help.view.list.entry.component';
+export * from './help.view.popover.component';
+export * from './help.view.popover.button.component';
+export * from './help.widget.service';
+export * from './help.widget';

package/lib/extension/index.d.ts

@@ -4,3 +4,4 @@ export * from './preview';
 export * from './structure';
 export * from './widget';
 export * from './zip';
+export * from './help';

package/lib/layout/content/_content.scss

@@ -48,6 +48,10 @@ $scroll-content-bottom-padding: 42px;
     padding: $pit-padding;
   }
 
+  .dbx-content-pit-rounded {
+    border-radius: theming.$dbx-content-pit-rounded-border-radius;
+  }
+
   .dbx-content-pit > .dbx-label-block > .dbx-label {
     opacity: 0.66; // increase opacity slightly to make it easier to read against background
   }

package/lib/layout/content/content.pit.directive.d.ts

@@ -8,7 +8,8 @@ export type DbxContentPitScrollableHeightSetting = 'small' | 'medium' | 'large';
  */
 export declare class DbxContentPitDirective {
     readonly scrollable: import("@angular/core").InputSignal<Maybe<DbxContentPitScrollableInput>>;
+    readonly rounded: import("@angular/core").InputSignal<boolean>;
     readonly scrollableHeightSignal: import("@angular/core").Signal<string | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentPitDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentPitDirective, "dbx-content-pit, [dbxContentPit]", never, { "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentPitDirective, "dbx-content-pit, [dbxContentPit]", never, { "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/layout/text/_text.scss

@@ -12,6 +12,7 @@ $mat-hint-opacity: 0.54; // Opacity to mirror mat-hint
 $dbx-label-padded-padding: 6px;
 $dbx-detail-block-bottom-padding: 12px;
 $dbx-detail-block-content-offset: 30px;
+$click-to-copy-icon-size: 18px;
 
 // MARK: Mixin
 @mixin core() {
@@ -108,6 +109,12 @@ $dbx-detail-block-content-offset: 30px;
     padding-bottom: $dbx-detail-block-bottom-padding;
   }
 
+  .dbx-detail-block.dbx-detail-block-big-header {
+    .dbx-detail-block-header {
+      font-size: 1.18em;
+    }
+  }
+
   .dbx-text-no-overflow {
     white-space: pre-wrap !important;
     overflow: visible !important;
@@ -168,6 +175,10 @@ $dbx-detail-block-content-offset: 30px;
     margin: 4px;
   }
 
+  .dbx-chip-sublabel {
+    margin-left: $icon-spacing;
+  }
+
   .dbx-us-address {
     white-space: pre-wrap !important;
     line-height: 1.4;
@@ -245,6 +256,10 @@ $dbx-detail-block-content-offset: 30px;
   .dbx-number-with-limit-rounded {
     border-radius: 12px;
   }
+
+  .dbx-click-to-copy-text-highlighted {
+    text-decoration: underline;
+  }
 }
 
 @mixin typography($theme-config-or-typography-config) {
@@ -256,8 +271,11 @@ $dbx-detail-block-content-offset: 30px;
     font-size: theming.m2-font-size($typography-config, 'caption');
   }
 
-  .dbx-chip-sublabel {
-    margin-left: $icon-spacing;
+  .dbx-click-to-copy-text-icon.mat-icon {
+    width: $click-to-copy-icon-size;
+    height: $click-to-copy-icon-size;
+    font-size: $click-to-copy-icon-size;
+    padding-left: 4px;
   }
 }
 

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

@@ -0,0 +1,17 @@
+import { ElementRef } from '@angular/core';
+import { DbxClickToCopyTextDirective } from './copy.text.directive';
+import { Maybe } from '@dereekb/util';
+import { CopyToClipboardFunctionWithSnackbarMessageSnackbarConfig } from '../../util';
+import * as i0 from "@angular/core";
+export declare class DbxClickToCopyTextComponent {
+    readonly contentElementRef: import("@angular/core").Signal<ElementRef<HTMLElement> | undefined>;
+    readonly dbxClickToCopyText: import("@angular/core").Signal<DbxClickToCopyTextDirective | undefined>;
+    readonly copyText: import("@angular/core").InputSignal<Maybe<string | null>>;
+    readonly highlighted: import("@angular/core").InputSignal<boolean>;
+    readonly clipboardSnackbarMessagesConfig: import("@angular/core").InputSignal<Maybe<CopyToClipboardFunctionWithSnackbarMessageSnackbarConfig>>;
+    readonly clipboardSnackbarMessagesEnabled: import("@angular/core").InputSignal<boolean>;
+    readonly clickToCopyIcon: import("@angular/core").InputSignal<string>;
+    readonly clickIconToCopyOnly: import("@angular/core").InputSignal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxClickToCopyTextComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxClickToCopyTextComponent, "dbx-click-to-copy-text", never, { "copyText": { "alias": "copyText"; "required": false; "isSignal": true; }; "highlighted": { "alias": "highlighted"; "required": false; "isSignal": true; }; "clipboardSnackbarMessagesConfig": { "alias": "clipboardSnackbarMessagesConfig"; "required": false; "isSignal": true; }; "clipboardSnackbarMessagesEnabled": { "alias": "clipboardSnackbarMessagesEnabled"; "required": false; "isSignal": true; }; "clickToCopyIcon": { "alias": "clickToCopyIcon"; "required": false; "isSignal": true; }; "clickIconToCopyOnly": { "alias": "clickIconToCopyOnly"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/lib/layout/text/copy.text.directive.d.ts

@@ -0,0 +1,23 @@
+import { ElementRef } from '@angular/core';
+import { Maybe } from '@dereekb/util';
+import { AbstractDbxClipboardDirective } from '../../util/clipboard.directive';
+import * as i0 from "@angular/core";
+export declare class DbxClickToCopyTextDirective extends AbstractDbxClipboardDirective {
+    readonly copyTextFromElement: import("@angular/core").ModelSignal<ElementRef<HTMLElement> | undefined>;
+    /**
+     * If the input is null, then copy from the element's text content.
+     */
+    readonly copyText: import("@angular/core").InputSignal<Maybe<string | null>>;
+    /**
+     * If true, the click events will be ignored.
+     */
+    readonly disableCopy: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Highlight the text visually.
+     */
+    readonly highlighted: import("@angular/core").InputSignal<boolean>;
+    handleClick(event: MouseEvent): void;
+    _copyText(eventElement?: Maybe<HTMLElement>): Maybe<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxClickToCopyTextDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxClickToCopyTextDirective, "[dbxClickToCopyText]", never, { "copyTextFromElement": { "alias": "copyTextFromElement"; "required": false; "isSignal": true; }; "copyText": { "alias": "dbxClickToCopyText"; "required": false; "isSignal": true; }; "disableCopy": { "alias": "disableCopy"; "required": false; "isSignal": true; }; "highlighted": { "alias": "highlighted"; "required": false; "isSignal": true; }; }, { "copyTextFromElement": "copyTextFromElementChange"; }, never, never, true, never>;
+}

package/lib/layout/text/detail.block.component.d.ts

@@ -7,6 +7,7 @@ export declare class DbxDetailBlockComponent {
     readonly icon: import("@angular/core").InputSignal<Maybe<string>>;
     readonly header: import("@angular/core").InputSignal<Maybe<string>>;
     readonly alignHeader: import("@angular/core").InputSignal<boolean>;
+    readonly bigHeader: import("@angular/core").InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxDetailBlockComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDetailBlockComponent, "dbx-detail-block", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "alignHeader": { "alias": "alignHeader"; "required": false; "isSignal": true; }; }, {}, never, ["[header]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDetailBlockComponent, "dbx-detail-block", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "alignHeader": { "alias": "alignHeader"; "required": false; "isSignal": true; }; "bigHeader": { "alias": "bigHeader"; "required": false; "isSignal": true; }; }, {}, never, ["[header]", "*"], true, never>;
 }

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

@@ -7,4 +7,6 @@ export * from './linkify.component';
 export * from './text.chip.directive';
 export * from './text.chips.component';
 export * from './number.limit.component';
+export * from './copy.text.directive';
+export * from './copy.text.component';
 export * from './text.module';