@m1z23r/ngx-ui 1.1.54 → 1.1.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6883,10 +6883,12 @@ class TreeComponent {
|
|
|
6883
6883
|
_dropPosition = signal(null, ...(ngDevMode ? [{ debugName: "_dropPosition" }] : []));
|
|
6884
6884
|
/** @internal */
|
|
6885
6885
|
_flashNode = signal(null, ...(ngDevMode ? [{ debugName: "_flashNode" }] : []));
|
|
6886
|
-
/** @internal context-menu target — node and its path (root → node, inclusive) */
|
|
6887
6886
|
_menuNode = signal(null, ...(ngDevMode ? [{ debugName: "_menuNode" }] : []));
|
|
6888
|
-
/** @internal */
|
|
6889
6887
|
_menuPath = signal([], ...(ngDevMode ? [{ debugName: "_menuPath" }] : []));
|
|
6888
|
+
/** Node currently targeted by the context menu (null when the menu is closed). */
|
|
6889
|
+
menuNode = this._menuNode.asReadonly();
|
|
6890
|
+
/** Path from root to the targeted node, inclusive. Empty when the menu is closed. */
|
|
6891
|
+
menuPath = this._menuPath.asReadonly();
|
|
6890
6892
|
/** @internal whether the targeted node has children (drives expand/collapse-all visibility) */
|
|
6891
6893
|
_menuHasChildren = computed(() => {
|
|
6892
6894
|
const n = this._menuNode();
|
|
@@ -7055,11 +7057,11 @@ class TreeComponent {
|
|
|
7055
7057
|
}
|
|
7056
7058
|
}
|
|
7057
7059
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7058
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeComponent, isStandalone: true, selector: "ui-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, expandOnClick: { classPropertyName: "expandOnClick", publicName: "expandOnClick", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, pathSeparator: { classPropertyName: "pathSeparator", publicName: "pathSeparator", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, pathFormatter: { classPropertyName: "pathFormatter", publicName: "pathFormatter", isSignal: true, isRequired: false, transformFunction: null }, objectFormatter: { classPropertyName: "objectFormatter", publicName: "objectFormatter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", nodeDrop: "nodeDrop", nodeContextAction: "nodeContextAction" }, providers: [{ provide: TREE_HOST, useExisting: TreeComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["treeMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-tree\">\n @for (node of nodes(); track node) {\n <ui-tree-node\n [node]=\"node\"\n [level]=\"0\"\n [indent]=\"indent()\"\n [parentPath]=\"[]\"\n (nodeClick)=\"_onNodeClick($event)\"\n (nodeExpand)=\"_onNodeExpand($event)\"\n (nodeCollapse)=\"_onNodeCollapse($event)\"\n />\n }\n</div>\n\n@if (contextMenu()) {\n <ui-dropdown #treeMenu>\n <ui-dropdown-item (clicked)=\"_runAction('copyValue')\">Copy value</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('copyPath')\">Copy path</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('copyObject')\">Copy object</ui-dropdown-item>\n @if (_menuHasChildren()) {\n <ui-dropdown-divider />\n <ui-dropdown-item (clicked)=\"_runAction('expandAll')\">Expand all</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('collapseAll')\">Collapse all</ui-dropdown-item>\n }\n @if (_menuHasParent()) {\n <ui-dropdown-divider />\n <ui-dropdown-item (clicked)=\"_runAction('goToParent')\">Go to parent</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('collapseParent')\">Collapse parent</ui-dropdown-item>\n }\n </ui-dropdown>\n}\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent", "parentPath"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }, { kind: "component", type: DropdownComponent, selector: "ui-dropdown", inputs: ["position", "closeOnSelect", "matchTriggerWidth"] }, { kind: "component", type: DropdownItemComponent, selector: "ui-dropdown-item", inputs: ["disabled", "icon"], outputs: ["clicked"] }, { kind: "component", type: DropdownDividerComponent, selector: "ui-dropdown-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7060
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeComponent, isStandalone: true, selector: "ui-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, expandOnClick: { classPropertyName: "expandOnClick", publicName: "expandOnClick", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, pathSeparator: { classPropertyName: "pathSeparator", publicName: "pathSeparator", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, pathFormatter: { classPropertyName: "pathFormatter", publicName: "pathFormatter", isSignal: true, isRequired: false, transformFunction: null }, objectFormatter: { classPropertyName: "objectFormatter", publicName: "objectFormatter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", nodeDrop: "nodeDrop", nodeContextAction: "nodeContextAction" }, providers: [{ provide: TREE_HOST, useExisting: TreeComponent }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["treeMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-tree\">\n @for (node of nodes(); track node) {\n <ui-tree-node\n [node]=\"node\"\n [level]=\"0\"\n [indent]=\"indent()\"\n [parentPath]=\"[]\"\n (nodeClick)=\"_onNodeClick($event)\"\n (nodeExpand)=\"_onNodeExpand($event)\"\n (nodeCollapse)=\"_onNodeCollapse($event)\"\n />\n }\n</div>\n\n@if (contextMenu()) {\n <ui-dropdown #treeMenu>\n <ui-dropdown-item (clicked)=\"_runAction('copyValue')\">Copy value</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('copyPath')\">Copy path</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('copyObject')\">Copy object</ui-dropdown-item>\n @if (_menuHasChildren()) {\n <ui-dropdown-divider />\n <ui-dropdown-item (clicked)=\"_runAction('expandAll')\">Expand all</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('collapseAll')\">Collapse all</ui-dropdown-item>\n }\n @if (_menuHasParent()) {\n <ui-dropdown-divider />\n <ui-dropdown-item (clicked)=\"_runAction('goToParent')\">Go to parent</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('collapseParent')\">Collapse parent</ui-dropdown-item>\n }\n <ng-content select=\"[slot=context-menu]\" />\n </ui-dropdown>\n}\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent", "parentPath"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }, { kind: "component", type: DropdownComponent, selector: "ui-dropdown", inputs: ["position", "closeOnSelect", "matchTriggerWidth"] }, { kind: "component", type: DropdownItemComponent, selector: "ui-dropdown-item", inputs: ["disabled", "icon"], outputs: ["clicked"] }, { kind: "component", type: DropdownDividerComponent, selector: "ui-dropdown-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7059
7061
|
}
|
|
7060
7062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeComponent, decorators: [{
|
|
7061
7063
|
type: Component,
|
|
7062
|
-
args: [{ selector: 'ui-tree', standalone: true, imports: [TreeNodeComponent, DropdownComponent, DropdownItemComponent, DropdownDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: TREE_HOST, useExisting: TreeComponent }], template: "<div class=\"ui-tree\">\n @for (node of nodes(); track node) {\n <ui-tree-node\n [node]=\"node\"\n [level]=\"0\"\n [indent]=\"indent()\"\n [parentPath]=\"[]\"\n (nodeClick)=\"_onNodeClick($event)\"\n (nodeExpand)=\"_onNodeExpand($event)\"\n (nodeCollapse)=\"_onNodeCollapse($event)\"\n />\n }\n</div>\n\n@if (contextMenu()) {\n <ui-dropdown #treeMenu>\n <ui-dropdown-item (clicked)=\"_runAction('copyValue')\">Copy value</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('copyPath')\">Copy path</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('copyObject')\">Copy object</ui-dropdown-item>\n @if (_menuHasChildren()) {\n <ui-dropdown-divider />\n <ui-dropdown-item (clicked)=\"_runAction('expandAll')\">Expand all</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('collapseAll')\">Collapse all</ui-dropdown-item>\n }\n @if (_menuHasParent()) {\n <ui-dropdown-divider />\n <ui-dropdown-item (clicked)=\"_runAction('goToParent')\">Go to parent</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('collapseParent')\">Collapse parent</ui-dropdown-item>\n }\n </ui-dropdown>\n}\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"] }]
|
|
7064
|
+
args: [{ selector: 'ui-tree', standalone: true, imports: [TreeNodeComponent, DropdownComponent, DropdownItemComponent, DropdownDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: TREE_HOST, useExisting: TreeComponent }], template: "<div class=\"ui-tree\">\n @for (node of nodes(); track node) {\n <ui-tree-node\n [node]=\"node\"\n [level]=\"0\"\n [indent]=\"indent()\"\n [parentPath]=\"[]\"\n (nodeClick)=\"_onNodeClick($event)\"\n (nodeExpand)=\"_onNodeExpand($event)\"\n (nodeCollapse)=\"_onNodeCollapse($event)\"\n />\n }\n</div>\n\n@if (contextMenu()) {\n <ui-dropdown #treeMenu>\n <ui-dropdown-item (clicked)=\"_runAction('copyValue')\">Copy value</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('copyPath')\">Copy path</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('copyObject')\">Copy object</ui-dropdown-item>\n @if (_menuHasChildren()) {\n <ui-dropdown-divider />\n <ui-dropdown-item (clicked)=\"_runAction('expandAll')\">Expand all</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('collapseAll')\">Collapse all</ui-dropdown-item>\n }\n @if (_menuHasParent()) {\n <ui-dropdown-divider />\n <ui-dropdown-item (clicked)=\"_runAction('goToParent')\">Go to parent</ui-dropdown-item>\n <ui-dropdown-item (clicked)=\"_runAction('collapseParent')\">Collapse parent</ui-dropdown-item>\n }\n <ng-content select=\"[slot=context-menu]\" />\n </ui-dropdown>\n}\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"] }]
|
|
7063
7065
|
}], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], expandOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnClick", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], pathSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathSeparator", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], pathFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathFormatter", required: false }] }], objectFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectFormatter", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], nodeContextAction: [{ type: i0.Output, args: ["nodeContextAction"] }], menu: [{ type: i0.ViewChild, args: ['treeMenu', { isSignal: true }] }] } });
|
|
7064
7066
|
|
|
7065
7067
|
const IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
|
|
@@ -7237,6 +7239,13 @@ class JsonTreeComponent {
|
|
|
7237
7239
|
contextMenu = input(true, ...(ngDevMode ? [{ debugName: "contextMenu" }] : []));
|
|
7238
7240
|
nodeClick = output();
|
|
7239
7241
|
nodeContextAction = output();
|
|
7242
|
+
tree = viewChild(TreeComponent, ...(ngDevMode ? [{ debugName: "tree" }] : []));
|
|
7243
|
+
/** Node currently targeted by the context menu (null when the menu is closed). */
|
|
7244
|
+
menuNode = computed(() => this.tree()?.menuNode() ?? null, ...(ngDevMode ? [{ debugName: "menuNode" }] : []));
|
|
7245
|
+
/** Path from root to the targeted node, inclusive. Empty when the menu is closed. */
|
|
7246
|
+
menuPath = computed(() => this.tree()?.menuPath() ?? [], ...(ngDevMode ? [{ debugName: "menuPath" }] : []));
|
|
7247
|
+
/** JsonNodeMeta of the targeted node — value/kind/jsonPath, etc. */
|
|
7248
|
+
menuMeta = computed(() => this.menuNode()?.data ?? null, ...(ngDevMode ? [{ debugName: "menuMeta" }] : []));
|
|
7240
7249
|
nodes = computed(() => jsonToTreeNodes(this.json(), {
|
|
7241
7250
|
rootLabel: this.rootLabel(),
|
|
7242
7251
|
pathRoot: this.pathRoot(),
|
|
@@ -7278,7 +7287,7 @@ class JsonTreeComponent {
|
|
|
7278
7287
|
return safeStringify([meta.value]);
|
|
7279
7288
|
};
|
|
7280
7289
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: JsonTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7281
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
7290
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: JsonTreeComponent, isStandalone: true, selector: "ui-json-tree", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: false, transformFunction: null }, rootLabel: { classPropertyName: "rootLabel", publicName: "rootLabel", isSignal: true, isRequired: false, transformFunction: null }, pathRoot: { classPropertyName: "pathRoot", publicName: "pathRoot", isSignal: true, isRequired: false, transformFunction: null }, expandDepth: { classPropertyName: "expandDepth", publicName: "expandDepth", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, expandOnClick: { classPropertyName: "expandOnClick", publicName: "expandOnClick", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeContextAction: "nodeContextAction" }, viewQueries: [{ propertyName: "tree", first: true, predicate: TreeComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
7282
7291
|
<ui-tree
|
|
7283
7292
|
[nodes]="nodes()"
|
|
7284
7293
|
[indent]="indent()"
|
|
@@ -7290,7 +7299,9 @@ class JsonTreeComponent {
|
|
|
7290
7299
|
[objectFormatter]="objectFmt"
|
|
7291
7300
|
(nodeClick)="nodeClick.emit($event)"
|
|
7292
7301
|
(nodeContextAction)="nodeContextAction.emit($event)"
|
|
7293
|
-
|
|
7302
|
+
>
|
|
7303
|
+
<ng-content select="[slot=context-menu]" />
|
|
7304
|
+
</ui-tree>
|
|
7294
7305
|
`, isInline: true, dependencies: [{ kind: "component", type: TreeComponent, selector: "ui-tree", inputs: ["nodes", "indent", "draggable", "expandOnClick", "contextMenu", "pathSeparator", "valueFormatter", "pathFormatter", "objectFormatter"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse", "nodeDrop", "nodeContextAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7295
7306
|
}
|
|
7296
7307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: JsonTreeComponent, decorators: [{
|
|
@@ -7311,11 +7322,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
7311
7322
|
[objectFormatter]="objectFmt"
|
|
7312
7323
|
(nodeClick)="nodeClick.emit($event)"
|
|
7313
7324
|
(nodeContextAction)="nodeContextAction.emit($event)"
|
|
7314
|
-
|
|
7325
|
+
>
|
|
7326
|
+
<ng-content select="[slot=context-menu]" />
|
|
7327
|
+
</ui-tree>
|
|
7315
7328
|
`,
|
|
7316
7329
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
7317
7330
|
}]
|
|
7318
|
-
}], propDecorators: { json: [{ type: i0.Input, args: [{ isSignal: true, alias: "json", required: false }] }], rootLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootLabel", required: false }] }], pathRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathRoot", required: false }] }], expandDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandDepth", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], expandOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnClick", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeContextAction: [{ type: i0.Output, args: ["nodeContextAction"] }] } });
|
|
7331
|
+
}], propDecorators: { json: [{ type: i0.Input, args: [{ isSignal: true, alias: "json", required: false }] }], rootLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootLabel", required: false }] }], pathRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathRoot", required: false }] }], expandDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandDepth", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], expandOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnClick", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeContextAction: [{ type: i0.Output, args: ["nodeContextAction"] }], tree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TreeComponent), { isSignal: true }] }] } });
|
|
7319
7332
|
|
|
7320
7333
|
/** Directive to mark a custom variable popover template */
|
|
7321
7334
|
class VariablePopoverDirective {
|