@m1z23r/ngx-ui 1.1.52 → 1.1.54

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.
@@ -2584,11 +2584,11 @@ class TextareaComponent {
2584
2584
  return max !== null && this.value().length >= max;
2585
2585
  }, ...(ngDevMode ? [{ debugName: "isAtLimit" }] : []));
2586
2586
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2587
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TextareaComponent, isStandalone: true, selector: "ui-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"ui-textarea-wrapper\" [class.ui-textarea-wrapper--error]=\"error()\" [class.ui-textarea-wrapper--disabled]=\"disabled()\">\n @if (label()) {\n <label class=\"ui-textarea__label\" [attr.for]=\"textareaId()\">\n {{ label() }}\n @if (required()) {\n <span class=\"ui-textarea__required\">*</span>\n }\n </label>\n }\n <div class=\"ui-textarea__container\">\n <textarea\n [class]=\"textareaClass()\"\n [id]=\"textareaId()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [attr.maxlength]=\"maxlength()\"\n [(ngModel)]=\"value\"\n ></textarea>\n </div>\n <div class=\"ui-textarea__footer\">\n @if (error()) {\n <span class=\"ui-textarea__error\">{{ error() }}</span>\n } @else if (hint()) {\n <span class=\"ui-textarea__hint\">{{ hint() }}</span>\n } @else {\n <span></span>\n }\n @if (maxlength()) {\n <span class=\"ui-textarea__counter\" [class.ui-textarea__counter--limit]=\"isAtLimit()\">\n {{ value().toString().length }} / {{ maxlength() }}\n </span>\n }\n </div>\n</div>\n", styles: [":host{display:block}.ui-textarea-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-textarea__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-textarea__required{color:var(--ui-danger);margin-left:2px}.ui-textarea__container{position:relative}.ui-textarea{width:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:var(--ui-text);background-color:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);min-height:80px}.ui-textarea::placeholder{color:var(--ui-text-muted)}.ui-textarea:hover:not(:disabled):not(:read-only){border-color:var(--ui-border-hover)}.ui-textarea:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-textarea:disabled{background-color:var(--ui-bg-secondary);color:var(--ui-text-disabled);cursor:not-allowed}.ui-textarea:read-only{background-color:var(--ui-bg-secondary)}.ui-textarea--resize-none{resize:none}.ui-textarea--resize-vertical{resize:vertical}.ui-textarea--resize-horizontal{resize:horizontal}.ui-textarea--resize-both{resize:both}.ui-textarea-wrapper--error .ui-textarea{border-color:var(--ui-danger)}.ui-textarea-wrapper--error .ui-textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-textarea__footer{display:flex;justify-content:space-between;align-items:center;min-height:1.25rem}.ui-textarea__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-textarea__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-textarea__counter{font-size:var(--ui-font-sm);color:var(--ui-text-muted);margin-left:auto}.ui-textarea__counter--limit{color:var(--ui-danger)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2587
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TextareaComponent, isStandalone: true, selector: "ui-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"ui-textarea-wrapper\" [class.ui-textarea-wrapper--error]=\"error()\" [class.ui-textarea-wrapper--disabled]=\"disabled()\">\n @if (label()) {\n <label class=\"ui-textarea__label\" [attr.for]=\"textareaId()\">\n {{ label() }}\n @if (required()) {\n <span class=\"ui-textarea__required\">*</span>\n }\n </label>\n }\n <div class=\"ui-textarea__container\">\n <textarea\n [class]=\"textareaClass()\"\n [id]=\"textareaId()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [attr.maxlength]=\"maxlength()\"\n [(ngModel)]=\"value\"\n ></textarea>\n </div>\n @if (error() || hint() || maxlength()) {\n <div class=\"ui-textarea__footer\">\n @if (error()) {\n <span class=\"ui-textarea__error\">{{ error() }}</span>\n } @else if (hint()) {\n <span class=\"ui-textarea__hint\">{{ hint() }}</span>\n } @else {\n <span></span>\n }\n @if (maxlength()) {\n <span class=\"ui-textarea__counter\" [class.ui-textarea__counter--limit]=\"isAtLimit()\">\n {{ value().toString().length }} / {{ maxlength() }}\n </span>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.ui-textarea-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-textarea__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-textarea__required{color:var(--ui-danger);margin-left:2px}.ui-textarea__container{position:relative}.ui-textarea{width:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:var(--ui-text);background-color:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);min-height:80px}.ui-textarea::placeholder{color:var(--ui-text-muted)}.ui-textarea:hover:not(:disabled):not(:read-only){border-color:var(--ui-border-hover)}.ui-textarea:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-textarea:disabled{background-color:var(--ui-bg-secondary);color:var(--ui-text-disabled);cursor:not-allowed}.ui-textarea:read-only{background-color:var(--ui-bg-secondary)}.ui-textarea--resize-none{resize:none}.ui-textarea--resize-vertical{resize:vertical}.ui-textarea--resize-horizontal{resize:horizontal}.ui-textarea--resize-both{resize:both}.ui-textarea-wrapper--error .ui-textarea{border-color:var(--ui-danger)}.ui-textarea-wrapper--error .ui-textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-textarea__footer{display:flex;justify-content:space-between;align-items:center;min-height:1.25rem}.ui-textarea__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-textarea__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-textarea__counter{font-size:var(--ui-font-sm);color:var(--ui-text-muted);margin-left:auto}.ui-textarea__counter--limit{color:var(--ui-danger)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2588
2588
  }
2589
2589
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TextareaComponent, decorators: [{
2590
2590
  type: Component,
2591
- args: [{ selector: 'ui-textarea', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-textarea-wrapper\" [class.ui-textarea-wrapper--error]=\"error()\" [class.ui-textarea-wrapper--disabled]=\"disabled()\">\n @if (label()) {\n <label class=\"ui-textarea__label\" [attr.for]=\"textareaId()\">\n {{ label() }}\n @if (required()) {\n <span class=\"ui-textarea__required\">*</span>\n }\n </label>\n }\n <div class=\"ui-textarea__container\">\n <textarea\n [class]=\"textareaClass()\"\n [id]=\"textareaId()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [attr.maxlength]=\"maxlength()\"\n [(ngModel)]=\"value\"\n ></textarea>\n </div>\n <div class=\"ui-textarea__footer\">\n @if (error()) {\n <span class=\"ui-textarea__error\">{{ error() }}</span>\n } @else if (hint()) {\n <span class=\"ui-textarea__hint\">{{ hint() }}</span>\n } @else {\n <span></span>\n }\n @if (maxlength()) {\n <span class=\"ui-textarea__counter\" [class.ui-textarea__counter--limit]=\"isAtLimit()\">\n {{ value().toString().length }} / {{ maxlength() }}\n </span>\n }\n </div>\n</div>\n", styles: [":host{display:block}.ui-textarea-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-textarea__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-textarea__required{color:var(--ui-danger);margin-left:2px}.ui-textarea__container{position:relative}.ui-textarea{width:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:var(--ui-text);background-color:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);min-height:80px}.ui-textarea::placeholder{color:var(--ui-text-muted)}.ui-textarea:hover:not(:disabled):not(:read-only){border-color:var(--ui-border-hover)}.ui-textarea:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-textarea:disabled{background-color:var(--ui-bg-secondary);color:var(--ui-text-disabled);cursor:not-allowed}.ui-textarea:read-only{background-color:var(--ui-bg-secondary)}.ui-textarea--resize-none{resize:none}.ui-textarea--resize-vertical{resize:vertical}.ui-textarea--resize-horizontal{resize:horizontal}.ui-textarea--resize-both{resize:both}.ui-textarea-wrapper--error .ui-textarea{border-color:var(--ui-danger)}.ui-textarea-wrapper--error .ui-textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-textarea__footer{display:flex;justify-content:space-between;align-items:center;min-height:1.25rem}.ui-textarea__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-textarea__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-textarea__counter{font-size:var(--ui-font-sm);color:var(--ui-text-muted);margin-left:auto}.ui-textarea__counter--limit{color:var(--ui-danger)}\n"] }]
2591
+ args: [{ selector: 'ui-textarea', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-textarea-wrapper\" [class.ui-textarea-wrapper--error]=\"error()\" [class.ui-textarea-wrapper--disabled]=\"disabled()\">\n @if (label()) {\n <label class=\"ui-textarea__label\" [attr.for]=\"textareaId()\">\n {{ label() }}\n @if (required()) {\n <span class=\"ui-textarea__required\">*</span>\n }\n </label>\n }\n <div class=\"ui-textarea__container\">\n <textarea\n [class]=\"textareaClass()\"\n [id]=\"textareaId()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [attr.maxlength]=\"maxlength()\"\n [(ngModel)]=\"value\"\n ></textarea>\n </div>\n @if (error() || hint() || maxlength()) {\n <div class=\"ui-textarea__footer\">\n @if (error()) {\n <span class=\"ui-textarea__error\">{{ error() }}</span>\n } @else if (hint()) {\n <span class=\"ui-textarea__hint\">{{ hint() }}</span>\n } @else {\n <span></span>\n }\n @if (maxlength()) {\n <span class=\"ui-textarea__counter\" [class.ui-textarea__counter--limit]=\"isAtLimit()\">\n {{ value().toString().length }} / {{ maxlength() }}\n </span>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.ui-textarea-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-textarea__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-textarea__required{color:var(--ui-danger);margin-left:2px}.ui-textarea__container{position:relative}.ui-textarea{width:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:var(--ui-text);background-color:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);min-height:80px}.ui-textarea::placeholder{color:var(--ui-text-muted)}.ui-textarea:hover:not(:disabled):not(:read-only){border-color:var(--ui-border-hover)}.ui-textarea:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-textarea:disabled{background-color:var(--ui-bg-secondary);color:var(--ui-text-disabled);cursor:not-allowed}.ui-textarea:read-only{background-color:var(--ui-bg-secondary)}.ui-textarea--resize-none{resize:none}.ui-textarea--resize-vertical{resize:vertical}.ui-textarea--resize-horizontal{resize:horizontal}.ui-textarea--resize-both{resize:both}.ui-textarea-wrapper--error .ui-textarea{border-color:var(--ui-danger)}.ui-textarea-wrapper--error .ui-textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-textarea__footer{display:flex;justify-content:space-between;align-items:center;min-height:1.25rem}.ui-textarea__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-textarea__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-textarea__counter{font-size:var(--ui-font-sm);color:var(--ui-text-muted);margin-left:auto}.ui-textarea__counter--limit{color:var(--ui-danger)}\n"] }]
2592
2592
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
2593
2593
 
2594
2594
  class ProgressComponent {
@@ -6852,11 +6852,11 @@ class TreeNodeComponent {
6852
6852
  this.nodeCollapse.emit(node);
6853
6853
  }
6854
6854
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6855
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeNodeComponent, isStandalone: true, selector: "ui-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null }, parentPath: { classPropertyName: "parentPath", publicName: "parentPath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ui-tree-node\"\n [class.ui-tree-node--dragging]=\"isDragging()\"\n [attr.draggable]=\"isDraggable()\"\n (dragstart)=\"onDragStart($event)\"\n (dragend)=\"onDragEnd()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n>\n <div class=\"ui-tree-node__guides\">\n @for (guide of indentGuides(); track guide) {\n <span class=\"ui-tree-node__guide\" [style.width.px]=\"indent()\"></span>\n }\n </div>\n <div\n #contentRef\n class=\"ui-tree-node__content\"\n [class.ui-tree-node__content--selected]=\"false\"\n [class.ui-tree-node__content--flash]=\"isFlashing()\"\n [class.ui-tree-node__content--drop-before]=\"dropPosition() === 'before'\"\n [class.ui-tree-node__content--drop-after]=\"dropPosition() === 'after'\"\n [class.ui-tree-node__content--drop-inside]=\"dropPosition() === 'inside'\"\n [style.padding-left.px]=\"level() * indent() + 8\"\n (click)=\"onClick($event)\"\n (dblclick)=\"onDoubleClick($event)\"\n (contextmenu)=\"onContextMenu($event)\"\n >\n @if (hasChildren()) {\n <button\n type=\"button\"\n class=\"ui-tree-node__toggle\"\n [class.ui-tree-node__toggle--expanded]=\"isExpanded()\"\n (click)=\"toggle($event)\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-label]=\"isExpanded() ? 'Collapse' : 'Expand'\"\n >\n <svg\n class=\"ui-tree-node__chevron\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n }\n @if (node().icon) {\n <span class=\"ui-tree-node__icon\">{{ node().icon }}</span>\n }\n <span class=\"ui-tree-node__label\">{{ node().label }}</span>\n </div>\n</div>\n@if (isExpanded() && hasChildren()) {\n @for (child of node().children; track child) {\n <ui-tree-node\n [node]=\"child\"\n [level]=\"level() + 1\"\n [indent]=\"indent()\"\n [parentPath]=\"path()\"\n (nodeClick)=\"_onChildNodeClick($event)\"\n (nodeExpand)=\"_onChildNodeExpand($event)\"\n (nodeCollapse)=\"_onChildNodeCollapse($event)\"\n />\n }\n}\n", styles: [":host{display:block}.ui-tree-node{position:relative}.ui-tree-node__guides{position:absolute;top:0;bottom:0;left:0;display:flex;pointer-events:none}.ui-tree-node__guide{position:relative;flex-shrink:0}.ui-tree-node__guide:after{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--ui-border-hover)}.ui-tree-node__content{display:flex;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm) var(--ui-spacing-xs) 0;border-radius:var(--ui-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-tree-node__content:hover{background-color:var(--ui-bg-hover)}.ui-tree-node__content--selected{background-color:var(--ui-option-selected-bg);color:var(--ui-option-selected-text)}.ui-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-tree-node__toggle:hover{background-color:var(--ui-bg-hover);color:var(--ui-text)}.ui-tree-node__toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-tree-node__chevron{transition:transform var(--ui-transition-fast)}.ui-tree-node__toggle--expanded .ui-tree-node__chevron{transform:rotate(90deg)}.ui-tree-node__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tree-node__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ui-tree-node--dragging{opacity:.4}.ui-tree-node__content--drop-before{position:relative}.ui-tree-node__content--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-after{position:relative}.ui-tree-node__content--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-inside{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent);outline:1px solid var(--ui-primary);outline-offset:-1px;border-radius:var(--ui-radius-sm)}.ui-tree-node__content--flash{animation:ui-tree-node-flash 1s ease-out}@keyframes ui-tree-node-flash{0%{background-color:color-mix(in srgb,var(--ui-primary) 40%,transparent)}to{background-color:transparent}}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent", "parentPath"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6855
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeNodeComponent, isStandalone: true, selector: "ui-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null }, parentPath: { classPropertyName: "parentPath", publicName: "parentPath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ui-tree-node\"\n [class.ui-tree-node--dragging]=\"isDragging()\"\n [attr.draggable]=\"isDraggable()\"\n (dragstart)=\"onDragStart($event)\"\n (dragend)=\"onDragEnd()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n>\n <div class=\"ui-tree-node__guides\">\n @for (guide of indentGuides(); track guide) {\n <span class=\"ui-tree-node__guide\" [style.width.px]=\"indent()\"></span>\n }\n </div>\n <div\n #contentRef\n class=\"ui-tree-node__content\"\n [class.ui-tree-node__content--selected]=\"false\"\n [class.ui-tree-node__content--flash]=\"isFlashing()\"\n [class.ui-tree-node__content--drop-before]=\"dropPosition() === 'before'\"\n [class.ui-tree-node__content--drop-after]=\"dropPosition() === 'after'\"\n [class.ui-tree-node__content--drop-inside]=\"dropPosition() === 'inside'\"\n [style.padding-left.px]=\"level() * indent() + 8\"\n (click)=\"onClick($event)\"\n (dblclick)=\"onDoubleClick($event)\"\n (contextmenu)=\"onContextMenu($event)\"\n >\n @if (hasChildren()) {\n <button\n type=\"button\"\n class=\"ui-tree-node__toggle\"\n [class.ui-tree-node__toggle--expanded]=\"isExpanded()\"\n (click)=\"toggle($event)\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-label]=\"isExpanded() ? 'Collapse' : 'Expand'\"\n >\n <svg\n class=\"ui-tree-node__chevron\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n }\n @if (node().icon) {\n <span class=\"ui-tree-node__icon\">{{ node().icon }}</span>\n }\n <span class=\"ui-tree-node__label\">\n @if (node().labelTokens; as tokens) {\n @for (t of tokens; track $index) {\n <span [class]=\"t.class\">{{ t.text }}</span>\n }\n } @else {\n {{ node().label }}\n }\n </span>\n </div>\n</div>\n@if (isExpanded() && hasChildren()) {\n @for (child of node().children; track child) {\n <ui-tree-node\n [node]=\"child\"\n [level]=\"level() + 1\"\n [indent]=\"indent()\"\n [parentPath]=\"path()\"\n (nodeClick)=\"_onChildNodeClick($event)\"\n (nodeExpand)=\"_onChildNodeExpand($event)\"\n (nodeCollapse)=\"_onChildNodeCollapse($event)\"\n />\n }\n}\n", styles: [":host{display:block}.ui-tree-node{position:relative}.ui-tree-node__guides{position:absolute;top:0;bottom:0;left:0;display:flex;pointer-events:none}.ui-tree-node__guide{position:relative;flex-shrink:0}.ui-tree-node__guide:after{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--ui-border-hover)}.ui-tree-node__content{display:flex;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm) var(--ui-spacing-xs) 0;border-radius:var(--ui-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-tree-node__content:hover{background-color:var(--ui-bg-hover)}.ui-tree-node__content--selected{background-color:var(--ui-option-selected-bg);color:var(--ui-option-selected-text)}.ui-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-tree-node__toggle:hover{background-color:var(--ui-bg-hover);color:var(--ui-text)}.ui-tree-node__toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-tree-node__chevron{transition:transform var(--ui-transition-fast)}.ui-tree-node__toggle--expanded .ui-tree-node__chevron{transform:rotate(90deg)}.ui-tree-node__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tree-node__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ui-tree-node__label span{white-space:pre}.ui-json-string{color:var(--ui-json-string)}.ui-json-number{color:var(--ui-json-number)}.ui-json-boolean{color:var(--ui-json-boolean)}.ui-json-bigint{color:var(--ui-json-bigint)}.ui-json-null{color:var(--ui-json-null);font-style:italic}.ui-json-size{color:var(--ui-json-size)}.ui-json-punct{color:var(--ui-json-punct)}.ui-tree-node--dragging{opacity:.4}.ui-tree-node__content--drop-before{position:relative}.ui-tree-node__content--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-after{position:relative}.ui-tree-node__content--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-inside{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent);outline:1px solid var(--ui-primary);outline-offset:-1px;border-radius:var(--ui-radius-sm)}.ui-tree-node__content--flash{animation:ui-tree-node-flash 1s ease-out}@keyframes ui-tree-node-flash{0%{background-color:color-mix(in srgb,var(--ui-primary) 40%,transparent)}to{background-color:transparent}}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent", "parentPath"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6856
6856
  }
6857
6857
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeNodeComponent, decorators: [{
6858
6858
  type: Component,
6859
- args: [{ selector: 'ui-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ui-tree-node\"\n [class.ui-tree-node--dragging]=\"isDragging()\"\n [attr.draggable]=\"isDraggable()\"\n (dragstart)=\"onDragStart($event)\"\n (dragend)=\"onDragEnd()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n>\n <div class=\"ui-tree-node__guides\">\n @for (guide of indentGuides(); track guide) {\n <span class=\"ui-tree-node__guide\" [style.width.px]=\"indent()\"></span>\n }\n </div>\n <div\n #contentRef\n class=\"ui-tree-node__content\"\n [class.ui-tree-node__content--selected]=\"false\"\n [class.ui-tree-node__content--flash]=\"isFlashing()\"\n [class.ui-tree-node__content--drop-before]=\"dropPosition() === 'before'\"\n [class.ui-tree-node__content--drop-after]=\"dropPosition() === 'after'\"\n [class.ui-tree-node__content--drop-inside]=\"dropPosition() === 'inside'\"\n [style.padding-left.px]=\"level() * indent() + 8\"\n (click)=\"onClick($event)\"\n (dblclick)=\"onDoubleClick($event)\"\n (contextmenu)=\"onContextMenu($event)\"\n >\n @if (hasChildren()) {\n <button\n type=\"button\"\n class=\"ui-tree-node__toggle\"\n [class.ui-tree-node__toggle--expanded]=\"isExpanded()\"\n (click)=\"toggle($event)\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-label]=\"isExpanded() ? 'Collapse' : 'Expand'\"\n >\n <svg\n class=\"ui-tree-node__chevron\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n }\n @if (node().icon) {\n <span class=\"ui-tree-node__icon\">{{ node().icon }}</span>\n }\n <span class=\"ui-tree-node__label\">{{ node().label }}</span>\n </div>\n</div>\n@if (isExpanded() && hasChildren()) {\n @for (child of node().children; track child) {\n <ui-tree-node\n [node]=\"child\"\n [level]=\"level() + 1\"\n [indent]=\"indent()\"\n [parentPath]=\"path()\"\n (nodeClick)=\"_onChildNodeClick($event)\"\n (nodeExpand)=\"_onChildNodeExpand($event)\"\n (nodeCollapse)=\"_onChildNodeCollapse($event)\"\n />\n }\n}\n", styles: [":host{display:block}.ui-tree-node{position:relative}.ui-tree-node__guides{position:absolute;top:0;bottom:0;left:0;display:flex;pointer-events:none}.ui-tree-node__guide{position:relative;flex-shrink:0}.ui-tree-node__guide:after{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--ui-border-hover)}.ui-tree-node__content{display:flex;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm) var(--ui-spacing-xs) 0;border-radius:var(--ui-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-tree-node__content:hover{background-color:var(--ui-bg-hover)}.ui-tree-node__content--selected{background-color:var(--ui-option-selected-bg);color:var(--ui-option-selected-text)}.ui-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-tree-node__toggle:hover{background-color:var(--ui-bg-hover);color:var(--ui-text)}.ui-tree-node__toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-tree-node__chevron{transition:transform var(--ui-transition-fast)}.ui-tree-node__toggle--expanded .ui-tree-node__chevron{transform:rotate(90deg)}.ui-tree-node__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tree-node__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ui-tree-node--dragging{opacity:.4}.ui-tree-node__content--drop-before{position:relative}.ui-tree-node__content--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-after{position:relative}.ui-tree-node__content--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-inside{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent);outline:1px solid var(--ui-primary);outline-offset:-1px;border-radius:var(--ui-radius-sm)}.ui-tree-node__content--flash{animation:ui-tree-node-flash 1s ease-out}@keyframes ui-tree-node-flash{0%{background-color:color-mix(in srgb,var(--ui-primary) 40%,transparent)}to{background-color:transparent}}\n"] }]
6859
+ args: [{ selector: 'ui-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ui-tree-node\"\n [class.ui-tree-node--dragging]=\"isDragging()\"\n [attr.draggable]=\"isDraggable()\"\n (dragstart)=\"onDragStart($event)\"\n (dragend)=\"onDragEnd()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n>\n <div class=\"ui-tree-node__guides\">\n @for (guide of indentGuides(); track guide) {\n <span class=\"ui-tree-node__guide\" [style.width.px]=\"indent()\"></span>\n }\n </div>\n <div\n #contentRef\n class=\"ui-tree-node__content\"\n [class.ui-tree-node__content--selected]=\"false\"\n [class.ui-tree-node__content--flash]=\"isFlashing()\"\n [class.ui-tree-node__content--drop-before]=\"dropPosition() === 'before'\"\n [class.ui-tree-node__content--drop-after]=\"dropPosition() === 'after'\"\n [class.ui-tree-node__content--drop-inside]=\"dropPosition() === 'inside'\"\n [style.padding-left.px]=\"level() * indent() + 8\"\n (click)=\"onClick($event)\"\n (dblclick)=\"onDoubleClick($event)\"\n (contextmenu)=\"onContextMenu($event)\"\n >\n @if (hasChildren()) {\n <button\n type=\"button\"\n class=\"ui-tree-node__toggle\"\n [class.ui-tree-node__toggle--expanded]=\"isExpanded()\"\n (click)=\"toggle($event)\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-label]=\"isExpanded() ? 'Collapse' : 'Expand'\"\n >\n <svg\n class=\"ui-tree-node__chevron\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n }\n @if (node().icon) {\n <span class=\"ui-tree-node__icon\">{{ node().icon }}</span>\n }\n <span class=\"ui-tree-node__label\">\n @if (node().labelTokens; as tokens) {\n @for (t of tokens; track $index) {\n <span [class]=\"t.class\">{{ t.text }}</span>\n }\n } @else {\n {{ node().label }}\n }\n </span>\n </div>\n</div>\n@if (isExpanded() && hasChildren()) {\n @for (child of node().children; track child) {\n <ui-tree-node\n [node]=\"child\"\n [level]=\"level() + 1\"\n [indent]=\"indent()\"\n [parentPath]=\"path()\"\n (nodeClick)=\"_onChildNodeClick($event)\"\n (nodeExpand)=\"_onChildNodeExpand($event)\"\n (nodeCollapse)=\"_onChildNodeCollapse($event)\"\n />\n }\n}\n", styles: [":host{display:block}.ui-tree-node{position:relative}.ui-tree-node__guides{position:absolute;top:0;bottom:0;left:0;display:flex;pointer-events:none}.ui-tree-node__guide{position:relative;flex-shrink:0}.ui-tree-node__guide:after{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--ui-border-hover)}.ui-tree-node__content{display:flex;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm) var(--ui-spacing-xs) 0;border-radius:var(--ui-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-tree-node__content:hover{background-color:var(--ui-bg-hover)}.ui-tree-node__content--selected{background-color:var(--ui-option-selected-bg);color:var(--ui-option-selected-text)}.ui-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-tree-node__toggle:hover{background-color:var(--ui-bg-hover);color:var(--ui-text)}.ui-tree-node__toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-tree-node__chevron{transition:transform var(--ui-transition-fast)}.ui-tree-node__toggle--expanded .ui-tree-node__chevron{transform:rotate(90deg)}.ui-tree-node__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tree-node__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ui-tree-node__label span{white-space:pre}.ui-json-string{color:var(--ui-json-string)}.ui-json-number{color:var(--ui-json-number)}.ui-json-boolean{color:var(--ui-json-boolean)}.ui-json-bigint{color:var(--ui-json-bigint)}.ui-json-null{color:var(--ui-json-null);font-style:italic}.ui-json-size{color:var(--ui-json-size)}.ui-json-punct{color:var(--ui-json-punct)}.ui-tree-node--dragging{opacity:.4}.ui-tree-node__content--drop-before{position:relative}.ui-tree-node__content--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-after{position:relative}.ui-tree-node__content--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-inside{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent);outline:1px solid var(--ui-primary);outline-offset:-1px;border-radius:var(--ui-radius-sm)}.ui-tree-node__content--flash{animation:ui-tree-node-flash 1s ease-out}@keyframes ui-tree-node-flash{0%{background-color:color-mix(in srgb,var(--ui-primary) 40%,transparent)}to{background-color:transparent}}\n"] }]
6860
6860
  }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], parentPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentPath", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], contentRef: [{ type: i0.ViewChild, args: ['contentRef', { isSignal: true }] }] } });
6861
6861
 
6862
6862
  const TREE_HOST = new InjectionToken('TREE_HOST');
@@ -7120,15 +7120,47 @@ function sizeLabel(kind, value) {
7120
7120
  return `{${Object.keys(value).length}}`;
7121
7121
  return prettyPrimitive(value);
7122
7122
  }
7123
- function makeLabel(keyPart, kind, value, isRoot) {
7124
- const size = sizeLabel(kind, value);
7123
+ function primitiveValueToken(v) {
7124
+ if (v === null)
7125
+ return { text: 'null', class: 'ui-json-null' };
7126
+ if (v === undefined)
7127
+ return { text: 'undefined', class: 'ui-json-null' };
7128
+ if (typeof v === 'string')
7129
+ return { text: JSON.stringify(v), class: 'ui-json-string' };
7130
+ if (typeof v === 'number')
7131
+ return { text: String(v), class: 'ui-json-number' };
7132
+ if (typeof v === 'boolean')
7133
+ return { text: String(v), class: 'ui-json-boolean' };
7134
+ if (typeof v === 'bigint')
7135
+ return { text: String(v), class: 'ui-json-bigint' };
7136
+ if (v instanceof Date)
7137
+ return { text: JSON.stringify(v.toISOString()), class: 'ui-json-string' };
7138
+ return { text: String(v) };
7139
+ }
7140
+ function makeLabelTokens(keyPart, kind, value) {
7141
+ const tokens = [];
7125
7142
  if (kind === 'primitive') {
7126
- if (isRoot)
7127
- return keyPart ? `${keyPart}: ${size}` : size;
7128
- return keyPart ? `${keyPart}: ${size}` : size;
7143
+ if (keyPart) {
7144
+ tokens.push({ text: keyPart });
7145
+ tokens.push({ text: ': ', class: 'ui-json-punct' });
7146
+ }
7147
+ tokens.push(primitiveValueToken(value));
7148
+ return tokens;
7129
7149
  }
7130
7150
  // object / array
7131
- return keyPart ? `${keyPart} ${size}` : size;
7151
+ const size = sizeLabel(kind, value);
7152
+ if (keyPart) {
7153
+ tokens.push({ text: keyPart });
7154
+ tokens.push({ text: ' ', class: 'ui-json-punct' });
7155
+ }
7156
+ tokens.push({ text: size, class: 'ui-json-size' });
7157
+ return tokens;
7158
+ }
7159
+ function joinTokens(tokens) {
7160
+ let out = '';
7161
+ for (const t of tokens)
7162
+ out += t.text;
7163
+ return out;
7132
7164
  }
7133
7165
  /**
7134
7166
  * Convert an arbitrary JSON-shaped value into a TreeNode array suitable for
@@ -7148,8 +7180,15 @@ function build(value, key, keyPart, path, depth, expandDepth, ancestors, isRoot)
7148
7180
  // Detect cycles: only if `value` is one of our ancestors in this DFS path.
7149
7181
  if (value !== null && typeof value === 'object' && ancestors.has(value)) {
7150
7182
  const placeholder = '[Circular]';
7183
+ const tokens = [];
7184
+ if (keyPart) {
7185
+ tokens.push({ text: keyPart });
7186
+ tokens.push({ text: ': ', class: 'ui-json-punct' });
7187
+ }
7188
+ tokens.push({ text: `"${placeholder}"`, class: 'ui-json-null' });
7151
7189
  return {
7152
- label: keyPart ? `${keyPart}: "${placeholder}"` : `"${placeholder}"`,
7190
+ label: joinTokens(tokens),
7191
+ labelTokens: tokens,
7153
7192
  data: {
7154
7193
  key,
7155
7194
  value: placeholder,
@@ -7159,10 +7198,11 @@ function build(value, key, keyPart, path, depth, expandDepth, ancestors, isRoot)
7159
7198
  };
7160
7199
  }
7161
7200
  const kind = kindOf(value);
7162
- const label = makeLabel(keyPart, kind, value, isRoot);
7201
+ const tokens = makeLabelTokens(keyPart, kind, value);
7163
7202
  const expanded = isRoot ? true : depth <= expandDepth;
7164
7203
  const node = {
7165
- label,
7204
+ label: joinTokens(tokens),
7205
+ labelTokens: tokens,
7166
7206
  expanded,
7167
7207
  data: { key, value, kind, jsonPath: path },
7168
7208
  };