ngx-dsxlibrary 2.21.29 → 2.21.30

package/fesm2022/ngx-dsxlibrary-src-lib-components.mjs

@@ -1,14 +1,16 @@
-import { DecimalPipe } from '@angular/common';
+import * as i1$1 from '@angular/common';
+import { DecimalPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component, forwardRef, viewChild, input, signal, effect, EventEmitter, Output, model } from '@angular/core';
+import { Input, Component, forwardRef, viewChild, input, signal, EventEmitter, effect, Output, model } from '@angular/core';
 import * as i1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FileUpload } from 'primeng/fileupload';
-import * as i1$1 from 'primeng/tree';
+import * as i2 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
+import * as i3 from 'primeng/api';
 import { CountUpDirective } from 'ngx-countup';
-import * as i2 from 'primeng/avatar';
+import * as i2$1 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
 import * as i1$2 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
@@ -198,28 +200,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 
 class JsonViewerComponent {
     data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    mode = input('view', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    textKey = input('Texto', ...(ngDevMode ? [{ debugName: "textKey" }] : /* istanbul ignore next */ []));
+    activeKey = input('Activo', ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    itemsKey = input('Items', ...(ngDevMode ? [{ debugName: "itemsKey" }] : /* istanbul ignore next */ []));
+    showStatusAsSymbol = input(true, ...(ngDevMode ? [{ debugName: "showStatusAsSymbol" }] : /* istanbul ignore next */ []));
+    valueChange = new EventEmitter();
     nodes = [];
     selectedNode = null;
+    disabled = false;
     controlValue = null;
+    normalizedValue = {};
+    maxNormalizationDepth = 20;
+    onChange = () => undefined;
+    onTouched = () => undefined;
     constructor() {
         effect(() => {
             if (this.controlValue === null || this.controlValue === undefined) {
-                this.updateNodes(this.data());
+                this.updateNodes(this.data(), false);
             }
         });
     }
     writeValue(value) {
         this.controlValue = value;
-        this.updateNodes(value);
+        this.updateNodes(value, false);
     }
     registerOnChange(fn) {
-        void fn;
+        this.onChange = fn;
     }
     registerOnTouched(fn) {
-        void fn;
+        this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        void isDisabled;
+        this.disabled = isDisabled;
     }
     onNodeSelect(event) {
         const node = event?.node;
@@ -229,57 +242,225 @@ class JsonViewerComponent {
         this.selectedNode = null;
         this.nodes = [...this.nodes];
     }
-    updateNodes(value) {
-        this.nodes = this.buildTree(this.parseIfNeeded(value));
+    isEditMode() {
+        const modeValue = this.mode();
+        const editEnabled = typeof modeValue === 'boolean' ? modeValue : modeValue === 'edit';
+        return editEnabled && !this.disabled;
+    }
+    getNodeMeta(node) {
+        const nodeData = node.data;
+        if (!nodeData || typeof nodeData !== 'object')
+            return null;
+        const kind = nodeData.kind;
+        if (!kind)
+            return null;
+        return nodeData;
+    }
+    onTextEdit(path, value, nodeMeta) {
+        if (!this.isEditMode())
+            return;
+        this.setValueAtPath(path, value);
+        // Actualiza solo el meta del nodo para reflejar el cambio sin reconstruir el árbol.
+        if (nodeMeta.kind === 'compact-item') {
+            nodeMeta.text = value;
+        }
+        else if (nodeMeta.kind === 'text-primitive') {
+            nodeMeta.value = value;
+        }
+        this.emitCurrentValue();
+    }
+    onTextBlur() {
+        this.onTouched();
+    }
+    onActiveToggle(path, checked, nodeMeta) {
+        if (!this.isEditMode())
+            return;
+        this.setValueAtPath(path, checked);
+        // Actualiza el meta del nodo y recalcula el visual del símbolo.
+        nodeMeta.activeBoolean = checked;
+        nodeMeta.activeVisual = checked
+            ? this.showStatusAsSymbol()
+                ? '✓'
+                : 'true'
+            : this.showStatusAsSymbol()
+                ? '✗'
+                : 'false';
+        // Fuerza detección de cambio en el array sin reconstruir el árbol.
+        this.nodes = [...this.nodes];
+        this.emitCurrentValue();
+        this.onTouched();
+    }
+    updateNodes(value, emit) {
+        this.normalizedValue = this.parseIfNeeded(value);
+        this.nodes = this.buildTree(this.normalizedValue);
+        if (emit) {
+            this.emitCurrentValue();
+        }
     }
     parseIfNeeded(data) {
-        if (!data)
+        if (data === null || data === undefined || data === '')
             return {};
+        return this.normalizeData(data, 0);
+    }
+    normalizeData(data, depth) {
+        if (depth > this.maxNormalizationDepth)
+            return data;
         if (typeof data === 'string') {
-            try {
-                return JSON.parse(data);
-            }
-            catch {
-                return {};
+            const parsed = this.tryParseJsonString(data);
+            if (parsed.parsed) {
+                return this.normalizeData(parsed.value, depth + 1);
             }
+            return data;
+        }
+        if (Array.isArray(data)) {
+            return data.map((item) => this.normalizeData(item, depth + 1));
+        }
+        if (typeof data === 'object' && data !== null) {
+            return Object.entries(data).reduce((acc, [key, value]) => {
+                acc[key] = this.normalizeData(value, depth + 1);
+                return acc;
+            }, {});
         }
         return data;
     }
-    buildTree(data, parentKey = '0') {
+    tryParseJsonString(value) {
+        const trimmed = value.trim();
+        // Solo intentamos parsear si parece JSON para evitar costo innecesario
+        // en strings de texto común.
+        const looksLikeJson = (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+            (trimmed.startsWith('[') && trimmed.endsWith(']'));
+        if (!looksLikeJson) {
+            return { parsed: false, value };
+        }
+        try {
+            return { parsed: true, value: JSON.parse(trimmed) };
+        }
+        catch {
+            return { parsed: false, value };
+        }
+    }
+    buildTree(data, parentKey = '0', path = []) {
         if (Array.isArray(data)) {
             return data.map((item, index) => {
                 const key = `${parentKey}-${index}`;
+                const itemPath = [...path, index];
+                const compactItem = this.toCompactTextAndActive(item, itemPath, `[${String(index).padStart(2, '0')}]`);
+                if (compactItem) {
+                    return {
+                        key,
+                        label: `${compactItem.indexLabel} Texto: ${compactItem.text} | ${compactItem.activeVisual}`,
+                        icon: 'pi pi-file',
+                        data: compactItem,
+                    };
+                }
                 if (this.isComplex(item)) {
                     return {
                         key,
                         label: `[${index}]`,
-                        //icon: this.getIcon(item),
-                        children: this.buildTree(item, key),
+                        icon: this.getIcon(item),
+                        children: this.buildTree(item, key, itemPath),
                     };
                 }
                 return {
                     key,
                     label: `[${index}]: ${this.formatPrimitive(item)}`,
-                    //icon: 'pi pi-file',
+                    icon: 'pi pi-file',
                 };
             });
         }
         if (typeof data === 'object' && data !== null) {
-            return Object.keys(data).map((key, index) => {
-                const value = data[key];
+            const objectData = data;
+            return Object.keys(objectData).flatMap((key, index) => {
+                const value = objectData[key];
                 const nodeKey = `${parentKey}-${index}`;
+                const childPath = [...path, key];
+                const activeKeyName = this.activeKey();
+                const itemsKeyName = this.itemsKey();
+                const textKeyName = this.textKey();
+                if (key === itemsKeyName && Array.isArray(value)) {
+                    return this.buildTree(value, nodeKey, childPath);
+                }
+                if (this.isItemsContainer(value)) {
+                    const container = value;
+                    const hasActive = Object.prototype.hasOwnProperty.call(container, activeKeyName);
+                    const label = hasActive
+                        ? `${key} | ${this.formatActiveSymbol(container[activeKeyName])}`
+                        : key;
+                    const itemsChildren = this.buildTree(container[itemsKeyName], `${nodeKey}-0`, [...childPath, itemsKeyName]);
+                    const additionalChildren = Object.keys(container)
+                        .filter((childKey) => childKey !== itemsKeyName && childKey !== activeKeyName)
+                        .flatMap((childKey, childIndex) => {
+                        return this.buildTree({ [childKey]: container[childKey] }, `${nodeKey}-${childIndex + 1}`, childPath);
+                    });
+                    const nodeMeta = hasActive
+                        ? {
+                            kind: 'group-active',
+                            title: key,
+                            activeVisual: this.formatActiveSymbol(container[activeKeyName]),
+                            activeBoolean: this.toBooleanLike(container[activeKeyName]),
+                            activePath: [...childPath, activeKeyName],
+                        }
+                        : undefined;
+                    return {
+                        key: nodeKey,
+                        label,
+                        icon: 'pi pi-folder',
+                        children: [...itemsChildren, ...additionalChildren],
+                        data: nodeMeta,
+                    };
+                }
+                const compactValue = this.toCompactTextAndActive(value, childPath, key);
+                if (compactValue) {
+                    return {
+                        key: nodeKey,
+                        label: `${key}: Texto: ${compactValue.text} | ${compactValue.activeVisual}`,
+                        icon: 'pi pi-file',
+                        data: compactValue,
+                    };
+                }
+                const groupedValue = this.toGroupWithActive(value);
+                if (groupedValue) {
+                    groupedValue.meta.title = key;
+                    groupedValue.meta.activePath = [...childPath, activeKeyName];
+                    return {
+                        key: nodeKey,
+                        label: `${key} | ${groupedValue.activeSymbol}`,
+                        icon: 'pi pi-folder',
+                        children: this.buildTree(groupedValue.children, nodeKey, childPath),
+                        data: groupedValue.meta,
+                    };
+                }
                 if (this.isComplex(value)) {
                     return {
                         key: nodeKey,
                         label: key,
-                        //icon: this.getIcon(value),
-                        children: this.buildTree(value, nodeKey),
+                        icon: this.getIcon(value),
+                        children: this.buildTree(value, nodeKey, childPath),
                     };
                 }
+                const primitiveMeta = key === textKeyName
+                    ? {
+                        kind: 'text-primitive',
+                        key,
+                        value: this.formatPrimitive(value),
+                        path: childPath,
+                    }
+                    : key === activeKeyName
+                        ? {
+                            kind: 'active-primitive',
+                            key,
+                            activeVisual: this.formatActiveSymbol(value),
+                            activeBoolean: this.toBooleanLike(value),
+                            path: childPath,
+                        }
+                        : undefined;
                 return {
                     key: nodeKey,
-                    label: `${key}: ${this.formatPrimitive(value)}`,
+                    label: key === activeKeyName
+                        ? `${key}: ${this.formatActiveSymbol(value)}`
+                        : `${key}: ${this.formatPrimitive(value)}`,
                     icon: 'pi pi-file',
+                    data: primitiveMeta,
                 };
             });
         }
@@ -301,6 +482,87 @@ class JsonViewerComponent {
             return value;
         return String(value);
     }
+    toCompactTextAndActive(value, basePath, indexLabel) {
+        if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+            return null;
+        }
+        const record = value;
+        const textKeyName = this.textKey();
+        const activeKeyName = this.activeKey();
+        const hasText = Object.prototype.hasOwnProperty.call(record, textKeyName);
+        const hasActive = Object.prototype.hasOwnProperty.call(record, activeKeyName);
+        if (!hasText || !hasActive)
+            return null;
+        const activeValue = record[activeKeyName];
+        return {
+            kind: 'compact-item',
+            indexLabel,
+            text: this.formatPrimitive(record[textKeyName]),
+            activeVisual: this.formatActiveSymbol(activeValue),
+            activeBoolean: this.toBooleanLike(activeValue),
+            textPath: [...basePath, textKeyName],
+            activePath: [...basePath, activeKeyName],
+        };
+    }
+    isItemsContainer(value) {
+        if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+            return false;
+        }
+        return Array.isArray(value[this.itemsKey()]);
+    }
+    toGroupWithActive(value) {
+        if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+            return null;
+        }
+        const record = value;
+        const activeKeyName = this.activeKey();
+        const hasActive = Object.prototype.hasOwnProperty.call(record, activeKeyName);
+        if (!hasActive)
+            return null;
+        const childEntries = Object.entries(record).filter(([childKey]) => childKey !== activeKeyName);
+        if (childEntries.length === 0)
+            return null;
+        const hasComplexChildren = childEntries.some(([, childValue]) => this.isComplex(childValue));
+        if (!hasComplexChildren)
+            return null;
+        return {
+            activeSymbol: this.formatActiveSymbol(record[activeKeyName]),
+            children: Object.fromEntries(childEntries),
+            meta: {
+                kind: 'group-active',
+                title: '',
+                activeVisual: this.formatActiveSymbol(record[activeKeyName]),
+                activeBoolean: this.toBooleanLike(record[activeKeyName]),
+            },
+        };
+    }
+    formatActiveSymbol(value) {
+        const boolLike = this.toBooleanLike(value);
+        if (boolLike === true)
+            return this.showStatusAsSymbol() ? '✓' : 'true';
+        if (boolLike === false)
+            return this.showStatusAsSymbol() ? '✗' : 'false';
+        return this.formatPrimitive(value);
+    }
+    toBooleanLike(value) {
+        if (typeof value === 'boolean')
+            return value;
+        if (typeof value === 'number') {
+            if (value === 1)
+                return true;
+            if (value === 0)
+                return false;
+            return null;
+        }
+        if (typeof value === 'string') {
+            const normalized = value.trim().toLowerCase();
+            if (normalized === 'true' || normalized === '1')
+                return true;
+            if (normalized === 'false' || normalized === '0')
+                return false;
+        }
+        return null;
+    }
     getIcon(value) {
         if (Array.isArray(value))
             return 'pi pi-list';
@@ -308,25 +570,64 @@ class JsonViewerComponent {
             return 'pi pi-folder';
         return 'pi pi-file';
     }
+    setValueAtPath(path, value) {
+        if (!path.length ||
+            typeof this.normalizedValue !== 'object' ||
+            this.normalizedValue === null) {
+            return;
+        }
+        let target = this.normalizedValue;
+        for (let index = 0; index < path.length - 1; index += 1) {
+            const segment = path[index];
+            if (target === null || target === undefined)
+                return;
+            target = target[segment];
+        }
+        const lastSegment = path[path.length - 1];
+        if (target !== null && target !== undefined) {
+            target[lastSegment] = value;
+        }
+    }
+    emitUpdatedValue() {
+        this.nodes = this.buildTree(this.normalizedValue);
+        this.emitCurrentValue();
+        this.onTouched();
+    }
+    emitCurrentValue() {
+        const payload = this.cloneValue(this.normalizedValue);
+        this.controlValue = payload;
+        this.onChange(payload);
+        this.valueChange.emit(payload);
+    }
+    cloneValue(value) {
+        try {
+            return JSON.parse(JSON.stringify(value));
+        }
+        catch {
+            return value;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: JsonViewerComponent, isStandalone: true, selector: "app-json-viewer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: JsonViewerComponent, isStandalone: true, selector: "app-json-viewer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, textKey: { classPropertyName: "textKey", publicName: "textKey", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, itemsKey: { classPropertyName: "itemsKey", publicName: "itemsKey", isSignal: true, isRequired: false, transformFunction: null }, showStatusAsSymbol: { classPropertyName: "showStatusAsSymbol", publicName: "showStatusAsSymbol", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => JsonViewerComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<p-tree\r\n\t[value]=\"nodes\"\r\n\tclass=\"json-tree w-full\"\r\n\tselectionMode=\"single\"\r\n\t[(selection)]=\"selectedNode\"\r\n\t[highlightOnSelect]=\"false\"\r\n\t(onNodeSelect)=\"onNodeSelect($event)\"\r\n>\r\n</p-tree>\r\n", styles: [":host ::ng-deep .json-tree .p-tree-node-content,:host ::ng-deep .json-tree .p-treenode-content{padding:.02rem .15rem!important}\n"], dependencies: [{ kind: "ngmodule", type: TreeModule }, { kind: "component", type: i1$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }] });
+        ], ngImport: i0, template: "<p-tree\r\n  [value]=\"nodes\"\r\n  class=\"json-tree w-full\"\r\n  selectionMode=\"single\"\r\n  [(selection)]=\"selectedNode\"\r\n  [highlightOnSelect]=\"false\"\r\n  (onNodeSelect)=\"onNodeSelect($event)\"\r\n>\r\n  <ng-template let-node pTemplate=\"default\">\r\n    <div class=\"json-node\">\r\n      <ng-container *ngIf=\"getNodeMeta(node) as meta; else defaultLabel\">\r\n        <ng-container [ngSwitch]=\"meta.kind\">\r\n          <ng-container *ngSwitchCase=\"'compact-item'\">\r\n            <span class=\"json-prefix\">{{ meta.indexLabel || \"\" }}</span>\r\n            <span class=\"json-key\"> Texto: </span>\r\n            <ng-container *ngIf=\"isEditMode(); else compactTextView\">\r\n              <input\r\n                type=\"text\"\r\n                class=\"json-text-input\"\r\n                [class.json-text-inactive]=\"meta.activeBoolean === false\"\r\n                [value]=\"meta.text || ''\"\r\n                (mousedown)=\"$event.stopPropagation()\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (keydown)=\"$event.stopPropagation()\"\r\n                (input)=\"\r\n                  onTextEdit(\r\n                    $any(meta.textPath),\r\n                    $any($event.target).value,\r\n                    meta\r\n                  )\r\n                \"\r\n                (blur)=\"onTextBlur()\"\r\n              />\r\n            </ng-container>\r\n            <ng-template #compactTextView>\r\n              <span [class.json-text-inactive]=\"meta.activeBoolean === false\">{{\r\n                meta.text || \"\"\r\n              }}</span>\r\n            </ng-template>\r\n            <span class=\"json-separator\"> | </span>\r\n            <span class=\"json-status\">{{ meta.activeVisual || \"\" }}</span>\r\n            <input\r\n              *ngIf=\"isEditMode()\"\r\n              type=\"checkbox\"\r\n              class=\"json-checkbox\"\r\n              [checked]=\"meta.activeBoolean === true\"\r\n              [disabled]=\"meta.activeBoolean === null\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"\r\n                onActiveToggle(\r\n                  $any(meta.activePath),\r\n                  $any($event.target).checked,\r\n                  meta\r\n                )\r\n              \"\r\n            />\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchCase=\"'group-active'\">\r\n            <span>{{ meta.title || \"\" }}</span>\r\n            <span class=\"json-separator\"> | </span>\r\n            <span class=\"json-status\">{{ meta.activeVisual || \"\" }}</span>\r\n            <input\r\n              *ngIf=\"isEditMode() && meta.activePath\"\r\n              type=\"checkbox\"\r\n              class=\"json-checkbox\"\r\n              [checked]=\"meta.activeBoolean === true\"\r\n              [disabled]=\"meta.activeBoolean === null\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"\r\n                onActiveToggle(\r\n                  $any(meta.activePath),\r\n                  $any($event.target).checked,\r\n                  meta\r\n                )\r\n              \"\r\n            />\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchCase=\"'text-primitive'\">\r\n            <span>{{ meta.key || \"\" }}:</span>\r\n            <ng-container *ngIf=\"isEditMode(); else textPrimitiveView\">\r\n              <input\r\n                type=\"text\"\r\n                class=\"json-text-input\"\r\n                [value]=\"meta.value || ''\"\r\n                (mousedown)=\"$event.stopPropagation()\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (keydown)=\"$event.stopPropagation()\"\r\n                (input)=\"\r\n                  onTextEdit($any(meta.path), $any($event.target).value, meta)\r\n                \"\r\n                (blur)=\"onTextBlur()\"\r\n              />\r\n            </ng-container>\r\n            <ng-template #textPrimitiveView>\r\n              <span>{{ meta.value || \"\" }}</span>\r\n            </ng-template>\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchCase=\"'active-primitive'\">\r\n            <span>{{ meta.key || \"\" }}:</span>\r\n            <span class=\"json-status\">{{ meta.activeVisual || \"\" }}</span>\r\n            <input\r\n              *ngIf=\"isEditMode()\"\r\n              type=\"checkbox\"\r\n              class=\"json-checkbox\"\r\n              [checked]=\"meta.activeBoolean === true\"\r\n              [disabled]=\"meta.activeBoolean === null\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"\r\n                onActiveToggle(\r\n                  $any(meta.path),\r\n                  $any($event.target).checked,\r\n                  meta\r\n                )\r\n              \"\r\n            />\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchDefault>\r\n            {{ node.label }}\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-template #defaultLabel>\r\n        {{ node.label }}\r\n      </ng-template>\r\n    </div>\r\n  </ng-template>\r\n</p-tree>\r\n", styles: [":host ::ng-deep .json-tree .p-tree-node-content,:host ::ng-deep .json-tree .p-treenode-content{padding:.02rem .15rem!important;display:flex;align-items:center;width:100%;min-width:0}:host ::ng-deep .json-tree .p-tree-node-label,:host ::ng-deep .json-tree .p-tree-node-label>span{flex:1 1 0;min-width:0;display:flex}:host ::ng-deep .json-tree .json-node{display:flex;align-items:center;gap:.25rem;width:100%;min-width:0}:host ::ng-deep .json-tree .json-prefix,:host ::ng-deep .json-tree .json-key,:host ::ng-deep .json-tree .json-separator,:host ::ng-deep .json-tree .json-status{white-space:nowrap;flex-shrink:0}:host ::ng-deep .json-tree .json-text-input{flex:1 1 0;min-width:0;border:1px solid #cbd5e1;border-radius:.25rem;padding:.15rem .5rem;font-size:.875rem}:host ::ng-deep .json-tree .json-text-inactive{color:#8b5e61}:host ::ng-deep .json-tree input.json-text-input.json-text-inactive{background-color:#f9f2f2;border-color:#e5c8cb}:host ::ng-deep .json-tree .json-checkbox{width:.9rem;height:.9rem;cursor:pointer;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i2.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: JsonViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-json-viewer', standalone: true, imports: [TreeModule], providers: [
+            args: [{ selector: 'app-json-viewer', standalone: true, imports: [CommonModule, TreeModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => JsonViewerComponent),
                             multi: true,
                         },
-                    ], template: "<p-tree\r\n\t[value]=\"nodes\"\r\n\tclass=\"json-tree w-full\"\r\n\tselectionMode=\"single\"\r\n\t[(selection)]=\"selectedNode\"\r\n\t[highlightOnSelect]=\"false\"\r\n\t(onNodeSelect)=\"onNodeSelect($event)\"\r\n>\r\n</p-tree>\r\n", styles: [":host ::ng-deep .json-tree .p-tree-node-content,:host ::ng-deep .json-tree .p-treenode-content{padding:.02rem .15rem!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+                    ], template: "<p-tree\r\n  [value]=\"nodes\"\r\n  class=\"json-tree w-full\"\r\n  selectionMode=\"single\"\r\n  [(selection)]=\"selectedNode\"\r\n  [highlightOnSelect]=\"false\"\r\n  (onNodeSelect)=\"onNodeSelect($event)\"\r\n>\r\n  <ng-template let-node pTemplate=\"default\">\r\n    <div class=\"json-node\">\r\n      <ng-container *ngIf=\"getNodeMeta(node) as meta; else defaultLabel\">\r\n        <ng-container [ngSwitch]=\"meta.kind\">\r\n          <ng-container *ngSwitchCase=\"'compact-item'\">\r\n            <span class=\"json-prefix\">{{ meta.indexLabel || \"\" }}</span>\r\n            <span class=\"json-key\"> Texto: </span>\r\n            <ng-container *ngIf=\"isEditMode(); else compactTextView\">\r\n              <input\r\n                type=\"text\"\r\n                class=\"json-text-input\"\r\n                [class.json-text-inactive]=\"meta.activeBoolean === false\"\r\n                [value]=\"meta.text || ''\"\r\n                (mousedown)=\"$event.stopPropagation()\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (keydown)=\"$event.stopPropagation()\"\r\n                (input)=\"\r\n                  onTextEdit(\r\n                    $any(meta.textPath),\r\n                    $any($event.target).value,\r\n                    meta\r\n                  )\r\n                \"\r\n                (blur)=\"onTextBlur()\"\r\n              />\r\n            </ng-container>\r\n            <ng-template #compactTextView>\r\n              <span [class.json-text-inactive]=\"meta.activeBoolean === false\">{{\r\n                meta.text || \"\"\r\n              }}</span>\r\n            </ng-template>\r\n            <span class=\"json-separator\"> | </span>\r\n            <span class=\"json-status\">{{ meta.activeVisual || \"\" }}</span>\r\n            <input\r\n              *ngIf=\"isEditMode()\"\r\n              type=\"checkbox\"\r\n              class=\"json-checkbox\"\r\n              [checked]=\"meta.activeBoolean === true\"\r\n              [disabled]=\"meta.activeBoolean === null\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"\r\n                onActiveToggle(\r\n                  $any(meta.activePath),\r\n                  $any($event.target).checked,\r\n                  meta\r\n                )\r\n              \"\r\n            />\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchCase=\"'group-active'\">\r\n            <span>{{ meta.title || \"\" }}</span>\r\n            <span class=\"json-separator\"> | </span>\r\n            <span class=\"json-status\">{{ meta.activeVisual || \"\" }}</span>\r\n            <input\r\n              *ngIf=\"isEditMode() && meta.activePath\"\r\n              type=\"checkbox\"\r\n              class=\"json-checkbox\"\r\n              [checked]=\"meta.activeBoolean === true\"\r\n              [disabled]=\"meta.activeBoolean === null\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"\r\n                onActiveToggle(\r\n                  $any(meta.activePath),\r\n                  $any($event.target).checked,\r\n                  meta\r\n                )\r\n              \"\r\n            />\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchCase=\"'text-primitive'\">\r\n            <span>{{ meta.key || \"\" }}:</span>\r\n            <ng-container *ngIf=\"isEditMode(); else textPrimitiveView\">\r\n              <input\r\n                type=\"text\"\r\n                class=\"json-text-input\"\r\n                [value]=\"meta.value || ''\"\r\n                (mousedown)=\"$event.stopPropagation()\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (keydown)=\"$event.stopPropagation()\"\r\n                (input)=\"\r\n                  onTextEdit($any(meta.path), $any($event.target).value, meta)\r\n                \"\r\n                (blur)=\"onTextBlur()\"\r\n              />\r\n            </ng-container>\r\n            <ng-template #textPrimitiveView>\r\n              <span>{{ meta.value || \"\" }}</span>\r\n            </ng-template>\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchCase=\"'active-primitive'\">\r\n            <span>{{ meta.key || \"\" }}:</span>\r\n            <span class=\"json-status\">{{ meta.activeVisual || \"\" }}</span>\r\n            <input\r\n              *ngIf=\"isEditMode()\"\r\n              type=\"checkbox\"\r\n              class=\"json-checkbox\"\r\n              [checked]=\"meta.activeBoolean === true\"\r\n              [disabled]=\"meta.activeBoolean === null\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"\r\n                onActiveToggle(\r\n                  $any(meta.path),\r\n                  $any($event.target).checked,\r\n                  meta\r\n                )\r\n              \"\r\n            />\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchDefault>\r\n            {{ node.label }}\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-template #defaultLabel>\r\n        {{ node.label }}\r\n      </ng-template>\r\n    </div>\r\n  </ng-template>\r\n</p-tree>\r\n", styles: [":host ::ng-deep .json-tree .p-tree-node-content,:host ::ng-deep .json-tree .p-treenode-content{padding:.02rem .15rem!important;display:flex;align-items:center;width:100%;min-width:0}:host ::ng-deep .json-tree .p-tree-node-label,:host ::ng-deep .json-tree .p-tree-node-label>span{flex:1 1 0;min-width:0;display:flex}:host ::ng-deep .json-tree .json-node{display:flex;align-items:center;gap:.25rem;width:100%;min-width:0}:host ::ng-deep .json-tree .json-prefix,:host ::ng-deep .json-tree .json-key,:host ::ng-deep .json-tree .json-separator,:host ::ng-deep .json-tree .json-status{white-space:nowrap;flex-shrink:0}:host ::ng-deep .json-tree .json-text-input{flex:1 1 0;min-width:0;border:1px solid #cbd5e1;border-radius:.25rem;padding:.15rem .5rem;font-size:.875rem}:host ::ng-deep .json-tree .json-text-inactive{color:#8b5e61}:host ::ng-deep .json-tree input.json-text-input.json-text-inactive{background-color:#f9f2f2;border-color:#e5c8cb}:host ::ng-deep .json-tree .json-checkbox{width:.9rem;height:.9rem;cursor:pointer;flex-shrink:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], textKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "textKey", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], itemsKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsKey", required: false }] }], showStatusAsSymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStatusAsSymbol", required: false }] }], valueChange: [{
+                type: Output
+            }] } });
 
 class KpicardComponent {
     //type = input.required<string>();
@@ -464,7 +765,7 @@ class DocxPreviewComponent {
         this.visibleChange.emit(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DocxPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: DocxPreviewComponent, isStandalone: true, selector: "app-docx-preview", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["viewer"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-dialog\r\n  [visible]=\"visible\"\r\n  (onHide)=\"onHide()\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '1199px': '75vw', '575px': '90vw' }\"\r\n  [style]=\"{ width: '80vw' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n>\r\n  <ng-template #header>\r\n    <div class=\"flex justify-content-center align-items-center gap-2 px-2\">\r\n      <p-avatar image=\"icon2/word-2019.png\" />\r\n      <span class=\"font-bold\">Vista preliminar del documento</span>\r\n    </div>\r\n  </ng-template>\r\n  <div #viewer></div>\r\n</p-dialog>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: DocxPreviewComponent, isStandalone: true, selector: "app-docx-preview", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["viewer"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-dialog\r\n  [visible]=\"visible\"\r\n  (onHide)=\"onHide()\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '1199px': '75vw', '575px': '90vw' }\"\r\n  [style]=\"{ width: '80vw' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n>\r\n  <ng-template #header>\r\n    <div class=\"flex justify-content-center align-items-center gap-2 px-2\">\r\n      <p-avatar image=\"icon2/word-2019.png\" />\r\n      <span class=\"font-bold\">Vista preliminar del documento</span>\r\n    </div>\r\n  </ng-template>\r\n  <div #viewer></div>\r\n</p-dialog>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DocxPreviewComponent, decorators: [{
             type: Component,