feat: support passing a fn to determine if value is clickable (#5)

for example, match only hyperlinks

Author: MichaelDoyle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-json-treeview",
-  "version": "19.1.0",
+  "version": "19.2.0",
   "license": "Apache-2.0",
   "author": {
     "name": "Michael J Doyle",

projects/demo/src/app/app.component.html

@@ -21,6 +21,7 @@ <h3>Clickable Nodes</h3>
     <ngx-json-treeview
       [json]="json"
       [expanded]="false"
+      [isClickableValue]="isClickableValue"
       [enableClickableValues]="true"
       (onValueClick)="onValueClick($event)" />
   </div>

projects/demo/src/app/app.component.ts

@@ -42,6 +42,10 @@ export class AppComponent {
     },
   };
 
+  isClickableValue(segment: Segment) {
+    return ['object', 'array', 'string'].includes(segment.type ?? '');
+  }
+
   onValueClick(segment: Segment) {
     this.currentSegment.set(segment);
   }

projects/ngx-json-treeview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-json-treeview",
-  "version": "19.1.0",
+  "version": "19.2.0",
   "license": "Apache-2.0",
   "author": {
     "name": "Michael J Doyle",

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html

@@ -19,8 +19,14 @@
         @if (!expandable || !segment.expanded) {
           <span
             [class]="expandable ? 'segment-label' : 'segment-value'"
-            [class.clickable]="enableClickableValues()"
-            (click)="onValueClickHandler(segment)">
+            [class.clickable]="
+              enableClickableValues() && isClickableValue()(segment)
+            "
+            (click)="
+              isClickableValue()(segment)
+                ? onValueClickHandler(segment)
+                : undefined
+            ">
             {{ segment.description }}
           </span>
         } @else if (expandable && segment.expanded) {
@@ -39,6 +45,7 @@
             [json]="segment.value"
             [expanded]="expanded()"
             [depth]="depth()"
+            [isClickableValue]="isClickableValue()"
             [enableClickableValues]="enableClickableValues()"
             [_parent]="segment"
             [_currentDepth]="_currentDepth() + 1"

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts

@@ -27,6 +27,8 @@ export interface Segment {
   path: string;
 }
 
+export type IsClickableValueFn = (segment: Segment) => boolean;
+
 /**
  * Renders JSON data in an expandable and collapsible tree structure.
  * Allows users to navigate complex data hierarchies visually.
@@ -73,6 +75,23 @@ export class NgxJsonTreeviewComponent {
    */
   enableClickableValues = input<boolean>(false);
 
+  /**
+   * 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.
+   * @default () => true - By default, all values are considered clickable if
+   *   `enableClickableValues` is true.
+   */
+  isClickableValue = input<IsClickableValueFn>(() => true);
+
   /**
    * If `enableClickableValues` is set to `true`, emits a `Segment` object when
    * a value node is clicked. The emitted `Segment` contains details about the