ngx-json-treeview/index.d.ts

A simple Angular component to display object data in an expandable JSON tree view.

import * as _angular_core from '@angular/core';

/**
 * Represents a segment (node) within the JSON tree structure.
 * Each segment corresponds to a key-value pair in an object, an item in an
 * array, or the root value itself, providing context and state for rendering.
 */
interface Segment {
    /** The key (for objects) or index (for arrays). */
    key: string;
    /** The actual JavaScript value represented by this segment. */
    value: any;
    /** The JavaScript data type of the value. */
    type?: string;
    /** A string representation of the value, used for display purposes. */
    description: string;
    /** Indicates whether the segment is expanded in the UI. */
    expanded: boolean;
    /** A reference to the parent segment in the JSON tree. Undefined for root. */
    parent?: Segment;
    /**
     * A dot/bracket notation path string to this specific segment
     * (e.g., 'settings.notifications.email', 'items[1].value').
     */
    path: string;
}
/**
 * A function that determines whether a given segment's value should be
 * clickable.
 * @param segment The segment to evaluate.
 * @returns `true` if the value is clickable, `false` otherwise.
 */
type IsClickableValueFn = (segment: Segment) => boolean;
/**
 * Represents a handler for value click events, containing both the logic to
 * determine if a value is clickable and the handler function itself.
 *
 * This approach allows for a more modular and self-contained way to define
 * click behaviors. Each handler can specify its own criteria for being active
 * and the action to take, making it easier to manage and extend different
 * click functionalities.
 */
interface ValueClickHandler {
    /**
     * A function that determines whether this handler should be active for a
     * given segment.
     * @param segment The segment to evaluate.
     * @returns `true` if the handler is applicable, `false` otherwise.
     */
    canHandle: IsClickableValueFn;
    /**
     * The function to execute when a clickable value is clicked.
     * @param segment The segment that was clicked.
     */
    handler: (segment: Segment) => void;
}

/**
 * A handler that checks if a segment's value is a string that looks like an
 * HTTP/HTTPS link. If it is, it opens the link in a new tab.
 */
declare const followLinkHandler: ValueClickHandler;
/**
 * A collection of built-in value click handlers.
 * This array can be used to easily apply all default handlers.
 */
declare const VALUE_CLICK_HANDLERS: readonly ValueClickHandler[];
/**
 * A namespace for individual value click handlers.
 * This allows for easy discovery and individual import of handlers.
 */
declare const ValueClickHandlers: {
    followLinkHandler: ValueClickHandler;
};

/**
 * Renders JSON data in an expandable and collapsible tree structure.
 * Allows users to navigate complex data hierarchies visually.
 */
declare class NgxJsonTreeviewComponent {
    /**
     * The JSON object or array to display in the tree view.
     * @required
     */
    json: _angular_core.InputSignal<any>;
    /**
     * Controls the default expansion state for all expandable segments
     * i.e. objects and arrays.
     * - If `true`, nodes are expanded down to the specified `depth`.
     * - If `false`, all nodes start collapsed.
     * @default true
     */
    expanded: _angular_core.InputSignal<boolean>;
    /**
     * Determines the maximum nesting level automatically expanded when `expanded`
     * is `true`.
     * - `-1`: Infinite depth (all levels expanded).
     * - `0`: Only the root node is expanded (if applicable).
     * - `n`: Root and nodes down to `n` levels are expanded.
     * @default -1
     */
    depth: _angular_core.InputSignal<number>;
    /**
     * If `true`, values are clickable when there is a corresponding handler
     * in the `valueClickHandlers` array that can process it.
     *
     * This allows for use cases such as:
     * - Following hyperlinks.
     * - Copying a value to the clipboard.
     * - Triggering custom actions based on the value's content or type.
     * @default false
     */
    enableClickableValues: _angular_core.InputSignal<boolean>;
    /**
     * @deprecated Use `valueClickHandlers` instead. This input will be removed
     * in a future version.
     *
     * A function that determines if a specific value node should be considered
     * clickable. This provides more granular control than the global
     * `enableClickableValues` flag.
     *
     * The function receives the `Segment` object and should return `true` if the
     * value is clickable, `false` otherwise. This check is only performed if
     * `enableClickableValues` is also `true`.
     *
     * @param segment - The segment being evaluated.
     * @returns `true` if the segment's value should be clickable, `false`
     * otherwise.
     */
    isClickableValue: _angular_core.InputSignal<IsClickableValueFn | undefined>;
    /**
     * @deprecated Use `valueClickHandlers` instead. This output will be removed
     * in a future version.
     *
     * If `enableClickableValues` is set to `true`, emits a `Segment` object when
     * a value node is clicked. The emitted `Segment` contains details about the
     * clicked node (key, value, type, path, etc.).
     */
    onValueClick: _angular_core.OutputEmitterRef<Segment>;
    /**
     * An array of handler functions to be executed when a value node is clicked.
     * Only the first handler in the array for which `isClickable` returns `true`
     * will be executed.
     *
     * If `enableClickableValues` is set to true, but `valueClickHandlers` is
     * omitted, the built-in `VALUE_CLICK_HANDLERS` will be used as the default.
     */
    valueClickHandlers: _angular_core.InputSignal<ValueClickHandler[] | undefined>;
    /**
     * *Internal* input representing the parent segment in the tree hierarchy.
     * Primrily used for calculating paths.
     * @internal
     */
    _parent: _angular_core.InputSignal<Segment | undefined>;
    /**
     * *Internal* input representing the current nesting depth. Used in
     * conjunction with the `depth` input to control expansion.
     * @internal
     */
    _currentDepth: _angular_core.InputSignal<number>;
    private internalValueClickHandlers;
    rootType: _angular_core.Signal<string>;
    segments: _angular_core.Signal<Segment[]>;
    isExpanded: _angular_core.Signal<boolean>;
    openingBrace: _angular_core.Signal<string>;
    closingBrace: _angular_core.Signal<string>;
    asString: _angular_core.Signal<string>;
    primitiveSegmentClass: _angular_core.Signal<string>;
    private primitiveSegment;
    isClickablePrimitive: _angular_core.Signal<boolean>;
    isArrayElement: _angular_core.Signal<boolean>;
    private readonly idGenerator;
    readonly id: string;
    isExpandable(segment: Segment): boolean;
    isEmpty(segment: Segment): boolean;
    isClickable(segment: Segment): boolean;
    toggle(segment: Segment): void;
    onPrimitiveClick(): void;
    onValueClickHandler(segment: Segment): void;
    openingBraceForSegment(segment: Segment): "[" | "{" | undefined;
    closingBraceForSegment(segment: Segment): "]" | "}" | undefined;
    private getPath;
    private parseKeyValue;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxJsonTreeviewComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxJsonTreeviewComponent, "ngx-json-treeview", never, { "json": { "alias": "json"; "required": true; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "depth": { "alias": "depth"; "required": false; "isSignal": true; }; "enableClickableValues": { "alias": "enableClickableValues"; "required": false; "isSignal": true; }; "isClickableValue": { "alias": "isClickableValue"; "required": false; "isSignal": true; }; "valueClickHandlers": { "alias": "valueClickHandlers"; "required": false; "isSignal": true; }; "_parent": { "alias": "_parent"; "required": false; "isSignal": true; }; "_currentDepth": { "alias": "_currentDepth"; "required": false; "isSignal": true; }; }, { "onValueClick": "onValueClick"; }, never, never, true, never>;
}

export { NgxJsonTreeviewComponent, VALUE_CLICK_HANDLERS, ValueClickHandlers, followLinkHandler };
export type { IsClickableValueFn, Segment, ValueClickHandler };