aril 1.2.12 → 1.2.13

package/fesm2022/aril-ui-business-ref-value.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, EventEmitter, Component, ChangeDetectionStrategy, Output } from '@angular/core';
+import { RouterLink } from '@angular/router';
 import * as i1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 import { DetailedOverlayPanelComponent } from 'aril/ui-business/detailed-overlay-panel';
@@ -20,21 +21,19 @@ class RefValueComponent {
             'text-decoration': 'underline'
         };
     }
-    get url() {
-        return `${globalThis.location.host}/#/`;
-    }
     getDisplayValue() {
         return this.valueDesc() ?? this.assetId().toString();
     }
-    getFullUrl() {
-        return 'http://' + this.url + this.detailPageUrl() + '/' + this.assetId();
+    getRouterLink() {
+        const path = this.detailPageUrl() ?? '';
+        return path.startsWith('/') ? `${path}/${this.assetId()}` : `/${path}/${this.assetId()}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: RefValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: RefValueComponent, isStandalone: true, selector: "aril-ref-value", inputs: { overlayPanelShow: { classPropertyName: "overlayPanelShow", publicName: "overlayPanelShow", isSignal: true, isRequired: false, transformFunction: null }, assetId: { classPropertyName: "assetId", publicName: "assetId", isSignal: true, isRequired: true, transformFunction: null }, valueDesc: { classPropertyName: "valueDesc", publicName: "valueDesc", isSignal: true, isRequired: true, transformFunction: null }, detailPageUrl: { classPropertyName: "detailPageUrl", publicName: "detailPageUrl", isSignal: true, isRequired: true, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "@if (detailPageUrl() && valueDesc() && assetId()) {\r\n\t@if (overlayPanelShow()) {\r\n\t\t<aril-detailed-oveylay-panel [assetId]=\"assetId()\">\r\n\t\t\t<a [href]=\"getFullUrl()\" [target]=\"target()\">\r\n\t\t\t\t<p-tag [value]=\"getDisplayValue()\" [style]=\"tagStyle\" />\r\n\t\t\t</a>\r\n\t\t</aril-detailed-oveylay-panel>\r\n\t} @else {\r\n\t\t<a [href]=\"getFullUrl()\" [target]=\"target()\">\r\n\t\t\t<p-tag [value]=\"getDisplayValue()\" [style]=\"tagStyle\" />\r\n\t\t</a>\r\n\t}\r\n} @else if (valueDesc() || assetId()) {\r\n\t@if (overlayPanelShow()) {\r\n\t\t<aril-detailed-oveylay-panel [assetId]=\"assetId()\">\r\n\t\t\t<p-tag\r\n\t\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\t\t[style]=\"tagStyle\"\r\n\t\t\t\t(click)=\"clickEvent.emit({ assetId: assetId(), valueDesc: valueDesc() })\" />\r\n\t\t</aril-detailed-oveylay-panel>\r\n\t} @else {\r\n\t\t<p-tag\r\n\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\t[style]=\"tagStyle\"\r\n\t\t\t(click)=\"clickEvent.emit({ assetId: assetId(), valueDesc: valueDesc() })\" />\r\n\t}\r\n} @else {\r\n\t<aril-value type=\"text\" [model]=\"null\" />\r\n}\r\n", dependencies: [{ kind: "component", type: ValueComponent, selector: "aril-value", inputs: ["model", "type", "format", "isClickable", "groupName", "parentSelectionKey", "isTextClamp", "textClampCharacters", "style", "copyable", "shouldShowCopyForClampedText", "arrayTypeDisplayName", "arrayTypeMaxBadgeCount", "bigDecimalRoundingMode", "bigDecimalScale"] }, { kind: "component", type: DetailedOverlayPanelComponent, selector: "aril-detailed-oveylay-panel", inputs: ["assetId", "style", "styleClass", "columns"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: RefValueComponent, isStandalone: true, selector: "aril-ref-value", inputs: { overlayPanelShow: { classPropertyName: "overlayPanelShow", publicName: "overlayPanelShow", isSignal: true, isRequired: false, transformFunction: null }, assetId: { classPropertyName: "assetId", publicName: "assetId", isSignal: true, isRequired: true, transformFunction: null }, valueDesc: { classPropertyName: "valueDesc", publicName: "valueDesc", isSignal: true, isRequired: true, transformFunction: null }, detailPageUrl: { classPropertyName: "detailPageUrl", publicName: "detailPageUrl", isSignal: true, isRequired: true, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "@if (detailPageUrl() && valueDesc() && assetId()) {\r\n\t@if (overlayPanelShow()) {\r\n\t\t<aril-detailed-oveylay-panel [assetId]=\"assetId()\">\r\n\t\t\t<a [routerLink]=\"getRouterLink()\" [target]=\"target()\">\r\n\t\t\t\t<p-tag [value]=\"getDisplayValue()\" [style]=\"tagStyle\" />\r\n\t\t\t</a>\r\n\t\t</aril-detailed-oveylay-panel>\r\n\t} @else {\r\n\t\t<a [routerLink]=\"getRouterLink()\" [target]=\"target()\">\r\n\t\t\t<p-tag [value]=\"getDisplayValue()\" [style]=\"tagStyle\" />\r\n\t\t</a>\r\n\t}\r\n} @else if (valueDesc() || assetId()) {\r\n\t@if (overlayPanelShow()) {\r\n\t\t<aril-detailed-oveylay-panel [assetId]=\"assetId()\">\r\n\t\t\t<p-tag\r\n\t\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\t\t[style]=\"tagStyle\"\r\n\t\t\t\t(click)=\"clickEvent.emit({ assetId: assetId(), valueDesc: valueDesc() })\" />\r\n\t\t</aril-detailed-oveylay-panel>\r\n\t} @else {\r\n\t\t<p-tag\r\n\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\t[style]=\"tagStyle\"\r\n\t\t\t(click)=\"clickEvent.emit({ assetId: assetId(), valueDesc: valueDesc() })\" />\r\n\t}\r\n} @else {\r\n\t<aril-value type=\"text\" [model]=\"null\" />\r\n}\r\n", dependencies: [{ kind: "component", type: ValueComponent, selector: "aril-value", inputs: ["model", "type", "format", "isClickable", "groupName", "parentSelectionKey", "isTextClamp", "textClampCharacters", "style", "copyable", "shouldShowCopyForClampedText", "arrayTypeDisplayName", "arrayTypeMaxBadgeCount", "bigDecimalRoundingMode", "bigDecimalScale"] }, { kind: "component", type: DetailedOverlayPanelComponent, selector: "aril-detailed-oveylay-panel", inputs: ["assetId", "style", "styleClass", "columns"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: RefValueComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'aril-ref-value', imports: [ValueComponent, DetailedOverlayPanelComponent, TagModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (detailPageUrl() && valueDesc() && assetId()) {\r\n\t@if (overlayPanelShow()) {\r\n\t\t<aril-detailed-oveylay-panel [assetId]=\"assetId()\">\r\n\t\t\t<a [href]=\"getFullUrl()\" [target]=\"target()\">\r\n\t\t\t\t<p-tag [value]=\"getDisplayValue()\" [style]=\"tagStyle\" />\r\n\t\t\t</a>\r\n\t\t</aril-detailed-oveylay-panel>\r\n\t} @else {\r\n\t\t<a [href]=\"getFullUrl()\" [target]=\"target()\">\r\n\t\t\t<p-tag [value]=\"getDisplayValue()\" [style]=\"tagStyle\" />\r\n\t\t</a>\r\n\t}\r\n} @else if (valueDesc() || assetId()) {\r\n\t@if (overlayPanelShow()) {\r\n\t\t<aril-detailed-oveylay-panel [assetId]=\"assetId()\">\r\n\t\t\t<p-tag\r\n\t\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\t\t[style]=\"tagStyle\"\r\n\t\t\t\t(click)=\"clickEvent.emit({ assetId: assetId(), valueDesc: valueDesc() })\" />\r\n\t\t</aril-detailed-oveylay-panel>\r\n\t} @else {\r\n\t\t<p-tag\r\n\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\t[style]=\"tagStyle\"\r\n\t\t\t(click)=\"clickEvent.emit({ assetId: assetId(), valueDesc: valueDesc() })\" />\r\n\t}\r\n} @else {\r\n\t<aril-value type=\"text\" [model]=\"null\" />\r\n}\r\n" }]
+            args: [{ standalone: true, selector: 'aril-ref-value', imports: [ValueComponent, DetailedOverlayPanelComponent, TagModule, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (detailPageUrl() && valueDesc() && assetId()) {\r\n\t@if (overlayPanelShow()) {\r\n\t\t<aril-detailed-oveylay-panel [assetId]=\"assetId()\">\r\n\t\t\t<a [routerLink]=\"getRouterLink()\" [target]=\"target()\">\r\n\t\t\t\t<p-tag [value]=\"getDisplayValue()\" [style]=\"tagStyle\" />\r\n\t\t\t</a>\r\n\t\t</aril-detailed-oveylay-panel>\r\n\t} @else {\r\n\t\t<a [routerLink]=\"getRouterLink()\" [target]=\"target()\">\r\n\t\t\t<p-tag [value]=\"getDisplayValue()\" [style]=\"tagStyle\" />\r\n\t\t</a>\r\n\t}\r\n} @else if (valueDesc() || assetId()) {\r\n\t@if (overlayPanelShow()) {\r\n\t\t<aril-detailed-oveylay-panel [assetId]=\"assetId()\">\r\n\t\t\t<p-tag\r\n\t\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\t\t[style]=\"tagStyle\"\r\n\t\t\t\t(click)=\"clickEvent.emit({ assetId: assetId(), valueDesc: valueDesc() })\" />\r\n\t\t</aril-detailed-oveylay-panel>\r\n\t} @else {\r\n\t\t<p-tag\r\n\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\t[style]=\"tagStyle\"\r\n\t\t\t(click)=\"clickEvent.emit({ assetId: assetId(), valueDesc: valueDesc() })\" />\r\n\t}\r\n} @else {\r\n\t<aril-value type=\"text\" [model]=\"null\" />\r\n}\r\n" }]
         }], propDecorators: { clickEvent: [{
                 type: Output
             }] } });

package/fesm2022/aril-ui-business-ref-value.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"aril-ui-business-ref-value.mjs","sources":["../../projects/aril/ui-business/ref-value/src/ref-value.component.ts","../../projects/aril/ui-business/ref-value/src/ref-value.component.html","../../projects/aril/ui-business/ref-value/aril-ui-business-ref-value.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Output, input } from '@angular/core';\r\n\r\nimport { TagModule } from 'primeng/tag';\r\n\r\nimport { DetailedOverlayPanelComponent } from 'aril/ui-business/detailed-overlay-panel';\r\nimport { ValueComponent } from 'aril/ui/value';\r\n\r\n@Component({\r\n\tstandalone: true,\r\n\tselector: 'aril-ref-value',\r\n\ttemplateUrl: './ref-value.component.html',\r\n\timports: [ValueComponent, DetailedOverlayPanelComponent, TagModule],\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class RefValueComponent {\r\n\toverlayPanelShow = input<boolean>(true);\r\n\tassetId = input.required<number>();\r\n\tvalueDesc = input.required<string>();\r\n\tdetailPageUrl = input.required<string | undefined>();\r\n\ttarget = input<string>('_self');\r\n\r\n\t@Output() clickEvent = new EventEmitter();\r\n\r\n\tprotected readonly tagStyle = {\r\n\t\tbackground: '#f0f0f0',\r\n\t\tcolor: '-webkit-link',\r\n\t\t'font-size': '0.9rem',\r\n\t\t'text-decoration': 'underline'\r\n\t};\r\n\r\n\tget url(): string {\r\n\t\treturn `${globalThis.location.host}/#/`;\r\n\t}\r\n\r\n\tprotected getDisplayValue(): string {\r\n\t\treturn this.valueDesc() ?? this.assetId().toString();\r\n\t}\r\n\r\n\tprotected getFullUrl(): string {\r\n\t\treturn 'http://' + this.url + this.detailPageUrl() + '/' + this.assetId();\r\n\t}\r\n}\r\n","@if (detailPageUrl() && valueDesc() && assetId()) {\r\n\t@if (overlayPanelShow()) {\r\n\t\t<aril-detailed-oveylay-panel [assetId]=\"assetId()\">\r\n\t\t\t<a [href]=\"getFullUrl()\" [target]=\"target()\">\r\n\t\t\t\t<p-tag [value]=\"getDisplayValue()\" [style]=\"tagStyle\" />\r\n\t\t\t</a>\r\n\t\t</aril-detailed-oveylay-panel>\r\n\t} @else {\r\n\t\t<a [href]=\"getFullUrl()\" [target]=\"target()\">\r\n\t\t\t<p-tag [value]=\"getDisplayValue()\" [style]=\"tagStyle\" />\r\n\t\t</a>\r\n\t}\r\n} @else if (valueDesc() || assetId()) {\r\n\t@if (overlayPanelShow()) {\r\n\t\t<aril-detailed-oveylay-panel [assetId]=\"assetId()\">\r\n\t\t\t<p-tag\r\n\t\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\t\t[style]=\"tagStyle\"\r\n\t\t\t\t(click)=\"clickEvent.emit({ assetId: assetId(), valueDesc: valueDesc() })\" />\r\n\t\t</aril-detailed-oveylay-panel>\r\n\t} @else {\r\n\t\t<p-tag\r\n\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\t[style]=\"tagStyle\"\r\n\t\t\t(click)=\"clickEvent.emit({ assetId: assetId(), valueDesc: valueDesc() })\" />\r\n\t}\r\n} @else {\r\n\t<aril-value type=\"text\" [model]=\"null\" />\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAca,iBAAiB,CAAA;AAP9B,IAAA,WAAA,GAAA;AAQC,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAU,IAAI,CAAC,CAAC;AACxC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAU,CAAC;AACnC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,EAAU,CAAC;AACrC,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAC,QAAQ,EAAsB,CAAC;AACrD,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAS,OAAO,CAAC,CAAC;AAEtB,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAE,CAAC;AAEvB,QAAA,IAAA,CAAA,QAAQ,GAAG;AAC7B,YAAA,UAAU,EAAE,SAAS;AACrB,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,WAAW,EAAE,QAAQ;AACrB,YAAA,iBAAiB,EAAE,WAAW;SAC9B,CAAC;AAaF,KAAA;AAXA,IAAA,IAAI,GAAG,GAAA;AACN,QAAA,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC;KACxC;IAES,eAAe,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC;KACrD;IAES,UAAU,GAAA;AACnB,QAAA,OAAO,SAAS,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;KAC1E;8GA1BW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,gyBCd9B,qlCA6BA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDlBW,cAAc,EAAE,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,aAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,8BAAA,EAAA,sBAAA,EAAA,wBAAA,EAAA,wBAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,6BAA6B,8HAAE,SAAS,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,GAAA,EAAA,QAAA,EAAA,OAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,YAAA,EAAA,UAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAGtD,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;AACG,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACN,QAAA,EAAA,gBAAgB,EAEjB,OAAA,EAAA,CAAC,cAAc,EAAE,6BAA6B,EAAE,SAAS,CAAC,EAClD,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,qlCAAA,EAAA,CAAA;8BASrC,UAAU,EAAA,CAAA;sBAAnB,MAAM;;;AErBR;;AAEG;;;;"}
+{"version":3,"file":"aril-ui-business-ref-value.mjs","sources":["../../projects/aril/ui-business/ref-value/src/ref-value.component.ts","../../projects/aril/ui-business/ref-value/src/ref-value.component.html","../../projects/aril/ui-business/ref-value/aril-ui-business-ref-value.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Output, input } from '@angular/core';\r\nimport { RouterLink } from '@angular/router';\r\n\r\nimport { TagModule } from 'primeng/tag';\r\n\r\nimport { DetailedOverlayPanelComponent } from 'aril/ui-business/detailed-overlay-panel';\r\nimport { ValueComponent } from 'aril/ui/value';\r\n\r\n@Component({\r\n\tstandalone: true,\r\n\tselector: 'aril-ref-value',\r\n\ttemplateUrl: './ref-value.component.html',\r\n\timports: [ValueComponent, DetailedOverlayPanelComponent, TagModule, RouterLink],\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class RefValueComponent {\r\n\toverlayPanelShow = input<boolean>(true);\r\n\tassetId = input.required<number>();\r\n\tvalueDesc = input.required<string>();\r\n\tdetailPageUrl = input.required<string | undefined>();\r\n\ttarget = input<string>('_self');\r\n\r\n\t@Output() clickEvent = new EventEmitter();\r\n\r\n\tprotected readonly tagStyle = {\r\n\t\tbackground: '#f0f0f0',\r\n\t\tcolor: '-webkit-link',\r\n\t\t'font-size': '0.9rem',\r\n\t\t'text-decoration': 'underline'\r\n\t};\r\n\r\n\tprotected getDisplayValue(): string {\r\n\t\treturn this.valueDesc() ?? this.assetId().toString();\r\n\t}\r\n\r\n\tprotected getRouterLink(): string {\r\n\t\tconst path = this.detailPageUrl() ?? '';\r\n\t\treturn path.startsWith('/') ? `${path}/${this.assetId()}` : `/${path}/${this.assetId()}`;\r\n\t}\r\n}\r\n","@if (detailPageUrl() && valueDesc() && assetId()) {\r\n\t@if (overlayPanelShow()) {\r\n\t\t<aril-detailed-oveylay-panel [assetId]=\"assetId()\">\r\n\t\t\t<a [routerLink]=\"getRouterLink()\" [target]=\"target()\">\r\n\t\t\t\t<p-tag [value]=\"getDisplayValue()\" [style]=\"tagStyle\" />\r\n\t\t\t</a>\r\n\t\t</aril-detailed-oveylay-panel>\r\n\t} @else {\r\n\t\t<a [routerLink]=\"getRouterLink()\" [target]=\"target()\">\r\n\t\t\t<p-tag [value]=\"getDisplayValue()\" [style]=\"tagStyle\" />\r\n\t\t</a>\r\n\t}\r\n} @else if (valueDesc() || assetId()) {\r\n\t@if (overlayPanelShow()) {\r\n\t\t<aril-detailed-oveylay-panel [assetId]=\"assetId()\">\r\n\t\t\t<p-tag\r\n\t\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\t\t[style]=\"tagStyle\"\r\n\t\t\t\t(click)=\"clickEvent.emit({ assetId: assetId(), valueDesc: valueDesc() })\" />\r\n\t\t</aril-detailed-oveylay-panel>\r\n\t} @else {\r\n\t\t<p-tag\r\n\t\t\t[value]=\"getDisplayValue()\"\r\n\t\t\t[style]=\"tagStyle\"\r\n\t\t\t(click)=\"clickEvent.emit({ assetId: assetId(), valueDesc: valueDesc() })\" />\r\n\t}\r\n} @else {\r\n\t<aril-value type=\"text\" [model]=\"null\" />\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;MAea,iBAAiB,CAAA;AAP9B,IAAA,WAAA,GAAA;AAQC,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAU,IAAI,CAAC,CAAC;AACxC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAU,CAAC;AACnC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,EAAU,CAAC;AACrC,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAC,QAAQ,EAAsB,CAAC;AACrD,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAS,OAAO,CAAC,CAAC;AAEtB,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAE,CAAC;AAEvB,QAAA,IAAA,CAAA,QAAQ,GAAG;AAC7B,YAAA,UAAU,EAAE,SAAS;AACrB,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,WAAW,EAAE,QAAQ;AACrB,YAAA,iBAAiB,EAAE,WAAW;SAC9B,CAAC;AAUF,KAAA;IARU,eAAe,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC;KACrD;IAES,aAAa,GAAA;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE,CAAC;AACxC,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,EAAE,CAAE,CAAA,GAAG,CAAI,CAAA,EAAA,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE,CAAC;KACzF;8GAvBW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECf9B,umCA6BA,EDjBW,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,cAAc,wUAAE,6BAA6B,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,EAAA,YAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,SAAS,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,GAAA,EAAA,QAAA,EAAA,OAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,YAAA,EAAA,UAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAGlE,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;AACG,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACN,QAAA,EAAA,gBAAgB,EAEjB,OAAA,EAAA,CAAC,cAAc,EAAE,6BAA6B,EAAE,SAAS,EAAE,UAAU,CAAC,EAC9D,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,umCAAA,EAAA,CAAA;8BASrC,UAAU,EAAA,CAAA;sBAAnB,MAAM;;;AEtBR;;AAEG;;;;"}

package/fesm2022/aril-ui-business-trace-drawer.mjs

@@ -29,16 +29,22 @@ class AppLogService extends RestClient {
     searchByTraceId(req) {
         return new Observable();
     }
+    getRefValues(req) {
+        return new Observable();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppLogService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppLogService, providedIn: 'root' }); }
 }
 __decorate([
     ServiceCall(HTTPMethods.POST, ProxyTypes.ClientSide, 'application-logs/filter', {}, Apps.MW)
 ], AppLogService.prototype, "searchByTraceId", null);
+__decorate([
+    ServiceCall(HTTPMethods.GETBYPARAMS, ProxyTypes.ClientSide, 'application-logs/ref-values', {}, Apps.MW)
+], AppLogService.prototype, "getRefValues", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppLogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], propDecorators: { searchByTraceId: [] } });
+        }], propDecorators: { searchByTraceId: [], getRefValues: [] } });
 
 class TraceLogService extends RestClient {
     constructor() {
@@ -85,10 +91,13 @@ class TraceDrawerComponent {
         this.appLogsLoadingMore = signal(false);
         this.appLogsTotal = signal(0);
         this.appLogsPage = signal(1);
+        this.refValues = signal({});
+        this.refValueEntries = computed(() => Object.entries(this.refValues()).filter(([, values]) => values?.length));
         this.hasMore = computed(() => this.apisixHits().length < this.totalItem());
         this.appLogsHasMore = computed(() => this.appLogs().length < this.appLogsTotal());
         this.request = new Subject();
         this.appLogsRequest = new Subject();
+        this.refValuesRequest = new Subject();
         this.response = toSignal(this.request.pipe(switchMap((req) => this.traceLogService
             .searchByTraceId({
             traceId: req.traceId,
@@ -113,6 +122,7 @@ class TraceDrawerComponent {
             this.appLogsLoadingMore.set(false);
             return EMPTY;
         })))));
+        this.refValuesResponse = toSignal(this.refValuesRequest.pipe(switchMap((traceId) => this.appLogService.getRefValues({ traceId }).pipe(catchError(() => EMPTY)))));
         effect(() => {
             if (this.visible() && this.traceId()) {
                 this.fetch(this.traceId());
@@ -140,6 +150,12 @@ class TraceDrawerComponent {
             this.appLogsTotal.set(total);
             this.appLogsLoadingMore.set(false);
         }, { allowSignalWrites: true });
+        effect(() => {
+            const wrapped = this.refValuesResponse();
+            if (!wrapped)
+                return;
+            this.refValues.set(wrapped.response ?? {});
+        }, { allowSignalWrites: true });
     }
     loadMore() {
         const id = this.traceId();
@@ -218,8 +234,10 @@ class TraceDrawerComponent {
         this.appLogs.set([]);
         this.appLogsTotal.set(0);
         this.appLogsPage.set(1);
+        this.refValues.set({});
         this.request.next({ traceId, pageNumber: 1, append: false });
         this.appLogsRequest.next({ traceId, pageNumber: 1, append: false });
+        this.refValuesRequest.next(traceId);
     }
     statusSeverity(status) {
         if (status >= 500)
@@ -305,11 +323,11 @@ class TraceDrawerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TraceDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: TraceDrawerComponent, isStandalone: true, selector: "aril-trace-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, traceId: { classPropertyName: "traceId", publicName: "traceId", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, startTime: { classPropertyName: "startTime", publicName: "startTime", isSignal: true, isRequired: false, transformFunction: null }, endTime: { classPropertyName: "endTime", publicName: "endTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n\t<p-sidebar\r\n\t\t[visible]=\"visible()\"\r\n\t\t(visibleChange)=\"onVisibleChange($event)\"\r\n\t\t[position]=\"position()\"\r\n\t\t[style]=\"{ width: width() }\"\r\n\t\t[modal]=\"modal()\"\r\n\t\t[dismissible]=\"true\"\r\n\t\t[showCloseIcon]=\"true\"\r\n\t\tstyleClass=\"aril-trace-drawer\">\r\n\t\t<ng-template pTemplate=\"header\">\r\n\t\t\t<div class=\"aril-trace-drawer__header\">\r\n\t\t\t\t<i class=\"pi pi-sitemap\"></i>\r\n\t\t\t\t<span class=\"aril-trace-drawer__title\">{{ t('traceDrawer.title') }}</span>\r\n\t\t\t\t<code class=\"aril-trace-drawer__chip\">{{ traceId() }}</code>\r\n\t\t\t\t<i\r\n\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\tclass=\"pi pi-share-alt aril-trace-drawer__share\"\r\n\t\t\t\t\t[pTooltip]=\"t('traceDrawer.shareLink')\"\r\n\t\t\t\t\ttooltipPosition=\"bottom\"\r\n\t\t\t\t\t(click)=\"shareLink()\"></i>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\r\n\t\t<div class=\"aril-trace-drawer__body\">\r\n\t\t\t@if (loading()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t<p-progressSpinner strokeWidth=\"3\" styleClass=\"w-3rem h-3rem\"></p-progressSpinner>\r\n\t\t\t\t\t<span>{{ t('traceDrawer.loading') }}</span>\r\n\t\t\t\t</div>\r\n\t\t\t} @else if (errorMessage()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state aril-trace-drawer__state--error\">\r\n\t\t\t\t\t<i class=\"pi pi-exclamation-triangle\"></i>\r\n\t\t\t\t\t<p>{{ errorMessage() }}</p>\r\n\t\t\t\t\t<aril-button [label]=\"t('traceDrawer.retry')\" icon=\"REFRESH\" color=\"primary\" (clickEvent)=\"retry()\" />\r\n\t\t\t\t</div>\r\n\t\t\t} @else {\r\n\t\t\t\t@if (apisixHits().length) {\r\n\t\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t\t<i class=\"pi pi-globe\"></i>\r\n\t\t\t\t\t\t\t{{ t('traceDrawer.apisixHeader') }}\r\n\t\t\t\t\t\t\t<aril-badge [value]=\"apisixHits().length + ' / ' + totalItem()\" [rounded]=\"true\" />\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t@for (hit of apisixHits(); track hit.id) {\r\n\t\t\t\t\t\t\t<details class=\"trace-row trace-row--{{ statusSeverity(hit.status) }}\">\r\n\t\t\t\t\t\t\t\t<summary class=\"trace-row__summary\">\r\n\t\t\t\t\t\t\t\t\t<i class=\"pi pi-chevron-right trace-row__chevron\"></i>\r\n\t\t\t\t\t\t\t\t\t<aril-badge [value]=\"hit.status.toString()\" [severity]=\"statusSeverity(hit.status)\" />\r\n\t\t\t\t\t\t\t\t\t<span class=\"trace-row__tag\">{{ hit.requestMethod }}</span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"trace-row__main\">{{ hit.requestUri }}</span>\r\n\t\t\t\t\t\t\t\t\t<aril-badge\r\n\t\t\t\t\t\t\t\t\t\t[value]=\"formatDuration(hit.responseTime)\"\r\n\t\t\t\t\t\t\t\t\t\t[severity]=\"durationSeverity(hit.responseTime)\" />\r\n\t\t\t\t\t\t\t\t\t@if (hit.timestamp) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"trace-row__time\">{{ formatTimestamp(hit.timestamp) }}</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"pi pi-code trace-row__action\"\r\n\t\t\t\t\t\t\t\t\t\t[pTooltip]=\"t('traceDrawer.copyCurl')\"\r\n\t\t\t\t\t\t\t\t\t\ttooltipPosition=\"left\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"$event.preventDefault(); $event.stopPropagation(); copyAsCurl(hit)\"></i>\r\n\t\t\t\t\t\t\t\t</summary>\r\n\t\t\t\t\t\t\t\t<div class=\"trace-row__body\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"trace-row__meta\">\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.routeName) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.route') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ hit.routeName }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.sourceApp || hit.sourceModule) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.source') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ hit.sourceApp }}{{ hit.sourceModule ? ' / ' + hit.sourceModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.targetApp || hit.targetModule) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.target') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ hit.targetApp }}{{ hit.targetModule ? ' / ' + hit.targetModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.upstreamHost) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.upstream') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ hit.upstreamHost }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.username) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.user') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ hit.username }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.requestSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.requestSize') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ formatBytes(hit.requestSize) }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.responseSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.responseSize') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ formatBytes(hit.responseSize) }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t@if (hit.requestBody) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\">\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.requestBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.requestBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.requestBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (hit.responseBody) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\">\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.responseBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.responseBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.responseBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (hasMore()) {\r\n\t\t\t\t\t\t\t<div class=\"aril-trace-drawer__load-more\">\r\n\t\t\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t\t\t[label]=\"t('traceDrawer.loadMore')\"\r\n\t\t\t\t\t\t\t\t\ticon=\"CHEVRON_DOWN\"\r\n\t\t\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t\t\t[outlined]=\"true\"\r\n\t\t\t\t\t\t\t\t\t[loading]=\"loadingMore()\"\r\n\t\t\t\t\t\t\t\t\t[disabled]=\"loadingMore()\"\r\n\t\t\t\t\t\t\t\t\t(clickEvent)=\"loadMore()\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</section>\r\n\t\t\t\t}\r\n\t\t\t\t@if (appLogs().length) {\r\n\t\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t\t<i class=\"pi pi-list\"></i>\r\n\t\t\t\t\t\t\t{{ t('traceDrawer.appLogsHeader') }}\r\n\t\t\t\t\t\t\t<aril-badge [value]=\"appLogs().length + ' / ' + appLogsTotal()\" [rounded]=\"true\" />\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t@for (log of appLogs(); track log.id) {\r\n\t\t\t\t\t\t\t<details class=\"trace-row trace-row--{{ levelSeverity(log.level) }}\">\r\n\t\t\t\t\t\t\t\t<summary class=\"trace-row__summary\">\r\n\t\t\t\t\t\t\t\t\t<i class=\"pi pi-chevron-right trace-row__chevron\"></i>\r\n\t\t\t\t\t\t\t\t\t@if (log.level) {\r\n\t\t\t\t\t\t\t\t\t\t<aril-badge [value]=\"log.level\" [severity]=\"levelSeverity(log.level)\" />\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.module) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"trace-row__tag\">{{ log.module }}</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t<span class=\"trace-row__main\">{{ log.message }}</span>\r\n\t\t\t\t\t\t\t\t\t@if (log.timestamp) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"trace-row__time\">{{ formatTimestamp(log.timestamp) }}</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</summary>\r\n\t\t\t\t\t\t\t\t<div class=\"trace-row__body\">\r\n\t\t\t\t\t\t\t\t\t@if (log.message) {\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"trace-row__message\">{{ log.message }}</div>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.username || log.app) {\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"trace-row__meta\">\r\n\t\t\t\t\t\t\t\t\t\t\t@if (log.app) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.target') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ log.app }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t@if (log.username) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.user') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ log.username }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.errorDetail) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\" open>\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.appLogErrorDetail') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t<pre>{{ log.errorDetail }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.referenceFields?.length) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\">\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.appLogRefFields') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"trace-row__meta\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t@for (rf of log.referenceFields; track rf.field) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ rf.field }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ rf.value }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (appLogsHasMore()) {\r\n\t\t\t\t\t\t\t<div class=\"aril-trace-drawer__load-more\">\r\n\t\t\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t\t\t[label]=\"t('traceDrawer.loadMore')\"\r\n\t\t\t\t\t\t\t\t\ticon=\"CHEVRON_DOWN\"\r\n\t\t\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t\t\t[outlined]=\"true\"\r\n\t\t\t\t\t\t\t\t\t[loading]=\"appLogsLoadingMore()\"\r\n\t\t\t\t\t\t\t\t\t[disabled]=\"appLogsLoadingMore()\"\r\n\t\t\t\t\t\t\t\t\t(clickEvent)=\"loadMoreAppLogs()\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</section>\r\n\t\t\t\t}\r\n\t\t\t\t@if (!apisixHits().length && !appLogs().length) {\r\n\t\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t\t<i class=\"pi pi-inbox\"></i>\r\n\t\t\t\t\t\t<p>{{ t('traceDrawer.empty') }}</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t</div>\r\n\t</p-sidebar>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .aril-trace-drawer{display:flex;flex-direction:column;height:100%}:host ::ng-deep .aril-trace-drawer .p-sidebar-header{padding:1rem 1.25rem;border-bottom:1px solid var(--surface-border, #e5e7eb);flex:0 0 auto}:host ::ng-deep .aril-trace-drawer .p-sidebar-content{padding:0;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.aril-trace-drawer__header{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.aril-trace-drawer__header .pi-sitemap{font-size:1.25rem;color:var(--primary-color, #1890ff)}.aril-trace-drawer__title{font-weight:600;font-size:1.1rem}.aril-trace-drawer__chip{font-size:.875rem;padding:.2rem .55rem;border-radius:4px;background:var(--surface-100, #f3f4f6);color:var(--text-color-secondary, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.aril-trace-drawer__share{cursor:pointer;font-size:1rem;padding:.4rem;border-radius:4px;color:var(--primary-color, #1890ff);transition:background .15s ease}.aril-trace-drawer__share:hover{background:var(--surface-100, #f3f4f6)}.aril-trace-drawer__body{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:1.5rem;min-height:min-content}.aril-trace-drawer__state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1rem;color:var(--text-color-secondary, #6b7280);text-align:center;font-size:.95rem}.aril-trace-drawer__state .pi{font-size:2rem}.aril-trace-drawer__state--error .pi{color:var(--red-500, #ef4444)}.aril-trace-drawer__section-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:1rem;font-weight:600}.aril-trace-drawer__section-title .pi{color:var(--primary-color, #1890ff)}.trace-row{display:block;border:1px solid var(--surface-border, #e5e7eb);border-left:3px solid var(--surface-border, #e5e7eb);background:var(--surface-card, #ffffff);border-radius:4px;overflow:hidden;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}.trace-row+.trace-row{margin-top:.4rem}.trace-row:hover{border-top-color:var(--surface-300, #d1d5db);border-right-color:var(--surface-300, #d1d5db);border-bottom-color:var(--surface-300, #d1d5db);box-shadow:0 1px 3px #0000000a}.trace-row[open]{background:var(--surface-50, #fafafa);border-top-color:var(--surface-300, #d1d5db);border-right-color:var(--surface-300, #d1d5db);border-bottom-color:var(--surface-300, #d1d5db);box-shadow:0 1px 4px #0000000d}.trace-row--success{border-left-color:var(--green-500, #22c55e)}.trace-row--info{border-left-color:var(--blue-500, #3b82f6)}.trace-row--warning{border-left-color:var(--orange-500, #f97316)}.trace-row--danger{border-left-color:var(--red-500, #ef4444)}.trace-row--secondary{border-left-color:var(--gray-400, #9ca3af)}.trace-row__summary{cursor:pointer;-webkit-user-select:none;user-select:none;list-style:none;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem}.trace-row__summary::-webkit-details-marker{display:none}.trace-row__summary:hover{background:var(--surface-50, #fafafa)}.trace-row[open] .trace-row__summary:hover{background:var(--surface-100, #f3f4f6)}.trace-row__chevron{color:var(--text-color-secondary, #6b7280);font-size:.7rem;transition:transform .15s ease;flex-shrink:0}.trace-row[open] .trace-row__chevron{transform:rotate(90deg)}.trace-row__tag{font-weight:600;color:var(--primary-color, #1890ff);font-size:.8rem;white-space:nowrap;flex-shrink:0;letter-spacing:.02em}.trace-row__main{font-size:.85rem;color:var(--text-color, #111827);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trace-row__time{font-size:.75rem;color:var(--text-color-secondary, #6b7280);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.trace-row__action{cursor:pointer;padding:.25rem;border-radius:4px;color:var(--text-color-secondary, #6b7280);flex-shrink:0;transition:background .15s ease,color .15s ease}.trace-row__action:hover{background:var(--surface-100, #f3f4f6);color:var(--primary-color, #1890ff)}.trace-row__body{padding:.5rem .75rem .75rem;border-top:1px solid var(--surface-border, #e5e7eb);display:flex;flex-direction:column;gap:.5rem;background:var(--surface-0, #ffffff)}.trace-row__message{font-size:.85rem;color:var(--text-color, #111827);line-height:1.5;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;background:var(--surface-100, #f3f4f6);border-radius:4px;padding:.5rem .65rem}.trace-row__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.25rem .75rem;font-size:.8rem}.trace-row__meta>div{display:grid;grid-template-columns:max-content 1fr;column-gap:.4rem;align-items:baseline;min-width:0}.trace-row__meta .meta-label{color:var(--text-color-secondary, #6b7280);font-weight:500}.trace-row__meta .meta-label:after{content:\":\"}.trace-row__meta span:not(.meta-label){color:var(--text-color, #111827);word-break:break-word}.trace-row__sub{margin:0}.trace-row__sub summary{cursor:pointer;font-size:.8rem;color:var(--primary-color, #1890ff);padding:.15rem 0;-webkit-user-select:none;user-select:none}.trace-row__sub summary:hover{text-decoration:underline}.trace-row__sub pre{margin:.25rem 0 0;padding:.5rem .75rem;background:var(--surface-100, #f3f4f6);border-radius:4px;font-size:.78rem;line-height:1.45;max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-word}.aril-trace-drawer__load-more{display:flex;justify-content:center;margin-top:.5rem}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i2.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: BadgeComponent, selector: "aril-badge", inputs: ["icon", "value", "severity", "rounded", "background", "styleClass", "textColor", "borderColor", "textClampCharacters"] }, { kind: "component", type: ButtonComponent, selector: "aril-button:not([click])", inputs: ["label", "loading", "disabled", "raised", "rounded", "text", "outlined", "badge", "size", "icon", "iconPos", "color"], outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: TraceDrawerComponent, isStandalone: true, selector: "aril-trace-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, traceId: { classPropertyName: "traceId", publicName: "traceId", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, startTime: { classPropertyName: "startTime", publicName: "startTime", isSignal: true, isRequired: false, transformFunction: null }, endTime: { classPropertyName: "endTime", publicName: "endTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n\t<p-sidebar\r\n\t\t[visible]=\"visible()\"\r\n\t\t(visibleChange)=\"onVisibleChange($event)\"\r\n\t\t[position]=\"position()\"\r\n\t\t[style]=\"{ width: width() }\"\r\n\t\t[modal]=\"modal()\"\r\n\t\t[dismissible]=\"true\"\r\n\t\t[showCloseIcon]=\"true\"\r\n\t\tstyleClass=\"aril-trace-drawer\">\r\n\t\t<ng-template pTemplate=\"header\">\r\n\t\t\t<div class=\"aril-trace-drawer__header\">\r\n\t\t\t\t<i class=\"pi pi-sitemap\"></i>\r\n\t\t\t\t<span class=\"aril-trace-drawer__title\">{{ t('traceDrawer.title') }}</span>\r\n\t\t\t\t<code class=\"aril-trace-drawer__chip\">{{ traceId() }}</code>\r\n\t\t\t\t<i\r\n\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\tclass=\"pi pi-share-alt aril-trace-drawer__share\"\r\n\t\t\t\t\t[pTooltip]=\"t('traceDrawer.shareLink')\"\r\n\t\t\t\t\ttooltipPosition=\"bottom\"\r\n\t\t\t\t\t(click)=\"shareLink()\"></i>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\r\n\t\t<div class=\"aril-trace-drawer__body\">\r\n\t\t\t@if (loading()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t<p-progressSpinner strokeWidth=\"3\" styleClass=\"w-3rem h-3rem\"></p-progressSpinner>\r\n\t\t\t\t\t<span>{{ t('traceDrawer.loading') }}</span>\r\n\t\t\t\t</div>\r\n\t\t\t} @else if (errorMessage()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state aril-trace-drawer__state--error\">\r\n\t\t\t\t\t<i class=\"pi pi-exclamation-triangle\"></i>\r\n\t\t\t\t\t<p>{{ errorMessage() }}</p>\r\n\t\t\t\t\t<aril-button [label]=\"t('traceDrawer.retry')\" icon=\"REFRESH\" color=\"primary\" (clickEvent)=\"retry()\" />\r\n\t\t\t\t</div>\r\n\t\t\t} @else {\r\n\t\t\t\t@if (refValueEntries().length) {\r\n\t\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t\t<i class=\"pi pi-tags\"></i>\r\n\t\t\t\t\t\t\t{{ t('traceDrawer.refValuesHeader') }}\r\n\t\t\t\t\t\t\t<aril-badge [value]=\"refValueEntries().length.toString()\" [rounded]=\"true\" />\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t<div class=\"ref-values\">\r\n\t\t\t\t\t\t\t@for (entry of refValueEntries(); track entry[0]) {\r\n\t\t\t\t\t\t\t\t<div class=\"ref-values__row\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"ref-values__key\">{{ entry[0] }}</span>\r\n\t\t\t\t\t\t\t\t\t<div class=\"ref-values__chips\">\r\n\t\t\t\t\t\t\t\t\t\t@for (val of entry[1]; track val) {\r\n\t\t\t\t\t\t\t\t\t\t\t<code class=\"ref-values__chip\">{{ val }}</code>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</section>\r\n\t\t\t\t}\r\n\t\t\t\t@if (apisixHits().length) {\r\n\t\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t\t<i class=\"pi pi-globe\"></i>\r\n\t\t\t\t\t\t\t{{ t('traceDrawer.apisixHeader') }}\r\n\t\t\t\t\t\t\t<aril-badge [value]=\"apisixHits().length + ' / ' + totalItem()\" [rounded]=\"true\" />\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t@for (hit of apisixHits(); track hit.id) {\r\n\t\t\t\t\t\t\t<details class=\"trace-row trace-row--{{ statusSeverity(hit.status) }}\">\r\n\t\t\t\t\t\t\t\t<summary class=\"trace-row__summary\">\r\n\t\t\t\t\t\t\t\t\t<i class=\"pi pi-chevron-right trace-row__chevron\"></i>\r\n\t\t\t\t\t\t\t\t\t<aril-badge [value]=\"hit.status.toString()\" [severity]=\"statusSeverity(hit.status)\" />\r\n\t\t\t\t\t\t\t\t\t<span class=\"trace-row__tag\">{{ hit.requestMethod }}</span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"trace-row__main\">{{ hit.requestUri }}</span>\r\n\t\t\t\t\t\t\t\t\t<aril-badge\r\n\t\t\t\t\t\t\t\t\t\t[value]=\"formatDuration(hit.responseTime)\"\r\n\t\t\t\t\t\t\t\t\t\t[severity]=\"durationSeverity(hit.responseTime)\" />\r\n\t\t\t\t\t\t\t\t\t@if (hit.timestamp) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"trace-row__time\">{{ formatTimestamp(hit.timestamp) }}</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"pi pi-code trace-row__action\"\r\n\t\t\t\t\t\t\t\t\t\t[pTooltip]=\"t('traceDrawer.copyCurl')\"\r\n\t\t\t\t\t\t\t\t\t\ttooltipPosition=\"left\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"$event.preventDefault(); $event.stopPropagation(); copyAsCurl(hit)\"></i>\r\n\t\t\t\t\t\t\t\t</summary>\r\n\t\t\t\t\t\t\t\t<div class=\"trace-row__body\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"trace-row__meta\">\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.routeName) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.route') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ hit.routeName }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.sourceApp || hit.sourceModule) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.source') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ hit.sourceApp }}{{ hit.sourceModule ? ' / ' + hit.sourceModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.targetApp || hit.targetModule) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.target') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ hit.targetApp }}{{ hit.targetModule ? ' / ' + hit.targetModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.upstreamHost) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.upstream') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ hit.upstreamHost }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.username) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.user') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ hit.username }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.requestSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.requestSize') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ formatBytes(hit.requestSize) }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.responseSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.responseSize') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ formatBytes(hit.responseSize) }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t@if (hit.requestBody) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\">\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.requestBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.requestBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.requestBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (hit.responseBody) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\">\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.responseBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.responseBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.responseBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (hasMore()) {\r\n\t\t\t\t\t\t\t<div class=\"aril-trace-drawer__load-more\">\r\n\t\t\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t\t\t[label]=\"t('traceDrawer.loadMore')\"\r\n\t\t\t\t\t\t\t\t\ticon=\"CHEVRON_DOWN\"\r\n\t\t\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t\t\t[outlined]=\"true\"\r\n\t\t\t\t\t\t\t\t\t[loading]=\"loadingMore()\"\r\n\t\t\t\t\t\t\t\t\t[disabled]=\"loadingMore()\"\r\n\t\t\t\t\t\t\t\t\t(clickEvent)=\"loadMore()\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</section>\r\n\t\t\t\t}\r\n\t\t\t\t@if (appLogs().length) {\r\n\t\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t\t<i class=\"pi pi-list\"></i>\r\n\t\t\t\t\t\t\t{{ t('traceDrawer.appLogsHeader') }}\r\n\t\t\t\t\t\t\t<aril-badge [value]=\"appLogs().length + ' / ' + appLogsTotal()\" [rounded]=\"true\" />\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t@for (log of appLogs(); track log.id) {\r\n\t\t\t\t\t\t\t<details class=\"trace-row trace-row--{{ levelSeverity(log.level) }}\">\r\n\t\t\t\t\t\t\t\t<summary class=\"trace-row__summary\">\r\n\t\t\t\t\t\t\t\t\t<i class=\"pi pi-chevron-right trace-row__chevron\"></i>\r\n\t\t\t\t\t\t\t\t\t@if (log.level) {\r\n\t\t\t\t\t\t\t\t\t\t<aril-badge [value]=\"log.level\" [severity]=\"levelSeverity(log.level)\" />\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.module) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"trace-row__tag\">{{ log.module }}</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t<span class=\"trace-row__main\">{{ log.message }}</span>\r\n\t\t\t\t\t\t\t\t\t@if (log.timestamp) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"trace-row__time\">{{ formatTimestamp(log.timestamp) }}</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</summary>\r\n\t\t\t\t\t\t\t\t<div class=\"trace-row__body\">\r\n\t\t\t\t\t\t\t\t\t@if (log.message) {\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"trace-row__message\">{{ log.message }}</div>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.username || log.app) {\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"trace-row__meta\">\r\n\t\t\t\t\t\t\t\t\t\t\t@if (log.app) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.target') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ log.app }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t@if (log.username) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.user') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ log.username }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.errorDetail) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\" open>\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.appLogErrorDetail') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t<pre>{{ log.errorDetail }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.referenceFields?.length) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\">\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.appLogRefFields') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"trace-row__meta\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t@for (rf of log.referenceFields; track rf.field) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ rf.field }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ rf.value }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (appLogsHasMore()) {\r\n\t\t\t\t\t\t\t<div class=\"aril-trace-drawer__load-more\">\r\n\t\t\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t\t\t[label]=\"t('traceDrawer.loadMore')\"\r\n\t\t\t\t\t\t\t\t\ticon=\"CHEVRON_DOWN\"\r\n\t\t\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t\t\t[outlined]=\"true\"\r\n\t\t\t\t\t\t\t\t\t[loading]=\"appLogsLoadingMore()\"\r\n\t\t\t\t\t\t\t\t\t[disabled]=\"appLogsLoadingMore()\"\r\n\t\t\t\t\t\t\t\t\t(clickEvent)=\"loadMoreAppLogs()\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</section>\r\n\t\t\t\t}\r\n\t\t\t\t@if (!apisixHits().length && !appLogs().length && !refValueEntries().length) {\r\n\t\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t\t<i class=\"pi pi-inbox\"></i>\r\n\t\t\t\t\t\t<p>{{ t('traceDrawer.empty') }}</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t</div>\r\n\t</p-sidebar>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .aril-trace-drawer{display:flex;flex-direction:column;height:100%}:host ::ng-deep .aril-trace-drawer .p-sidebar-header{padding:1rem 1.25rem;border-bottom:1px solid var(--surface-border, #e5e7eb);flex:0 0 auto}:host ::ng-deep .aril-trace-drawer .p-sidebar-content{padding:0;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.aril-trace-drawer__header{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.aril-trace-drawer__header .pi-sitemap{font-size:1.25rem;color:var(--primary-color, #1890ff)}.aril-trace-drawer__title{font-weight:600;font-size:1.1rem}.aril-trace-drawer__chip{font-size:.875rem;padding:.2rem .55rem;border-radius:4px;background:var(--surface-100, #f3f4f6);color:var(--text-color-secondary, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.aril-trace-drawer__share{cursor:pointer;font-size:1rem;padding:.4rem;border-radius:4px;color:var(--primary-color, #1890ff);transition:background .15s ease}.aril-trace-drawer__share:hover{background:var(--surface-100, #f3f4f6)}.aril-trace-drawer__body{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:1.5rem;min-height:min-content}.aril-trace-drawer__state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1rem;color:var(--text-color-secondary, #6b7280);text-align:center;font-size:.95rem}.aril-trace-drawer__state .pi{font-size:2rem}.aril-trace-drawer__state--error .pi{color:var(--red-500, #ef4444)}.aril-trace-drawer__section-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:1rem;font-weight:600}.aril-trace-drawer__section-title .pi{color:var(--primary-color, #1890ff)}.trace-row{display:block;border:1px solid var(--surface-border, #e5e7eb);border-left:3px solid var(--surface-border, #e5e7eb);background:var(--surface-card, #ffffff);border-radius:4px;overflow:hidden;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}.trace-row+.trace-row{margin-top:.4rem}.trace-row:hover{border-top-color:var(--surface-300, #d1d5db);border-right-color:var(--surface-300, #d1d5db);border-bottom-color:var(--surface-300, #d1d5db);box-shadow:0 1px 3px #0000000a}.trace-row[open]{background:var(--surface-50, #fafafa);border-top-color:var(--surface-300, #d1d5db);border-right-color:var(--surface-300, #d1d5db);border-bottom-color:var(--surface-300, #d1d5db);box-shadow:0 1px 4px #0000000d}.trace-row--success{border-left-color:var(--green-500, #22c55e)}.trace-row--info{border-left-color:var(--blue-500, #3b82f6)}.trace-row--warning{border-left-color:var(--orange-500, #f97316)}.trace-row--danger{border-left-color:var(--red-500, #ef4444)}.trace-row--secondary{border-left-color:var(--gray-400, #9ca3af)}.trace-row__summary{cursor:pointer;-webkit-user-select:none;user-select:none;list-style:none;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem}.trace-row__summary::-webkit-details-marker{display:none}.trace-row__summary:hover{background:var(--surface-50, #fafafa)}.trace-row[open] .trace-row__summary:hover{background:var(--surface-100, #f3f4f6)}.trace-row__chevron{color:var(--text-color-secondary, #6b7280);font-size:.7rem;transition:transform .15s ease;flex-shrink:0}.trace-row[open] .trace-row__chevron{transform:rotate(90deg)}.trace-row__tag{font-weight:600;color:var(--primary-color, #1890ff);font-size:.8rem;white-space:nowrap;flex-shrink:0;letter-spacing:.02em}.trace-row__main{font-size:.85rem;color:var(--text-color, #111827);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trace-row__time{font-size:.75rem;color:var(--text-color-secondary, #6b7280);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.trace-row__action{cursor:pointer;padding:.25rem;border-radius:4px;color:var(--text-color-secondary, #6b7280);flex-shrink:0;transition:background .15s ease,color .15s ease}.trace-row__action:hover{background:var(--surface-100, #f3f4f6);color:var(--primary-color, #1890ff)}.trace-row__body{padding:.5rem .75rem .75rem;border-top:1px solid var(--surface-border, #e5e7eb);display:flex;flex-direction:column;gap:.5rem;background:var(--surface-0, #ffffff)}.trace-row__message{font-size:.85rem;color:var(--text-color, #111827);line-height:1.5;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;background:var(--surface-100, #f3f4f6);border-radius:4px;padding:.5rem .65rem}.trace-row__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.25rem .75rem;font-size:.8rem}.trace-row__meta>div{display:grid;grid-template-columns:max-content 1fr;column-gap:.4rem;align-items:baseline;min-width:0}.trace-row__meta .meta-label{color:var(--text-color-secondary, #6b7280);font-weight:500}.trace-row__meta .meta-label:after{content:\":\"}.trace-row__meta span:not(.meta-label){color:var(--text-color, #111827);word-break:break-word}.trace-row__sub{margin:0}.trace-row__sub summary{cursor:pointer;font-size:.8rem;color:var(--primary-color, #1890ff);padding:.15rem 0;-webkit-user-select:none;user-select:none}.trace-row__sub summary:hover{text-decoration:underline}.trace-row__sub pre{margin:.25rem 0 0;padding:.5rem .75rem;background:var(--surface-100, #f3f4f6);border-radius:4px;font-size:.78rem;line-height:1.45;max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-word}.aril-trace-drawer__load-more{display:flex;justify-content:center;margin-top:.5rem}.ref-values{display:flex;flex-direction:column;gap:.4rem;border:1px solid var(--surface-border, #e5e7eb);border-radius:4px;background:var(--surface-card, #ffffff);padding:.6rem .75rem}.ref-values__row{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;column-gap:.75rem;row-gap:.25rem;align-items:baseline}.ref-values__key{font-size:.8rem;font-weight:600;color:var(--text-color-secondary, #6b7280);letter-spacing:.02em;overflow-wrap:anywhere}.ref-values__key:after{content:\":\"}.ref-values__chips{display:flex;flex-wrap:wrap;gap:.3rem;min-width:0}.ref-values__chip{font-size:.78rem;padding:.15rem .5rem;border-radius:4px;background:var(--surface-100, #f3f4f6);color:var(--text-color, #111827);border:1px solid var(--surface-border, #e5e7eb);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i2.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: BadgeComponent, selector: "aril-badge", inputs: ["icon", "value", "severity", "rounded", "background", "styleClass", "textColor", "borderColor", "textClampCharacters"] }, { kind: "component", type: ButtonComponent, selector: "aril-button:not([click])", inputs: ["label", "loading", "disabled", "raised", "rounded", "text", "outlined", "badge", "size", "icon", "iconPos", "color"], outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TraceDrawerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'aril-trace-drawer', imports: [JsonPipe, TranslocoModule, SidebarModule, ProgressSpinnerModule, TooltipModule, BadgeComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n\t<p-sidebar\r\n\t\t[visible]=\"visible()\"\r\n\t\t(visibleChange)=\"onVisibleChange($event)\"\r\n\t\t[position]=\"position()\"\r\n\t\t[style]=\"{ width: width() }\"\r\n\t\t[modal]=\"modal()\"\r\n\t\t[dismissible]=\"true\"\r\n\t\t[showCloseIcon]=\"true\"\r\n\t\tstyleClass=\"aril-trace-drawer\">\r\n\t\t<ng-template pTemplate=\"header\">\r\n\t\t\t<div class=\"aril-trace-drawer__header\">\r\n\t\t\t\t<i class=\"pi pi-sitemap\"></i>\r\n\t\t\t\t<span class=\"aril-trace-drawer__title\">{{ t('traceDrawer.title') }}</span>\r\n\t\t\t\t<code class=\"aril-trace-drawer__chip\">{{ traceId() }}</code>\r\n\t\t\t\t<i\r\n\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\tclass=\"pi pi-share-alt aril-trace-drawer__share\"\r\n\t\t\t\t\t[pTooltip]=\"t('traceDrawer.shareLink')\"\r\n\t\t\t\t\ttooltipPosition=\"bottom\"\r\n\t\t\t\t\t(click)=\"shareLink()\"></i>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\r\n\t\t<div class=\"aril-trace-drawer__body\">\r\n\t\t\t@if (loading()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t<p-progressSpinner strokeWidth=\"3\" styleClass=\"w-3rem h-3rem\"></p-progressSpinner>\r\n\t\t\t\t\t<span>{{ t('traceDrawer.loading') }}</span>\r\n\t\t\t\t</div>\r\n\t\t\t} @else if (errorMessage()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state aril-trace-drawer__state--error\">\r\n\t\t\t\t\t<i class=\"pi pi-exclamation-triangle\"></i>\r\n\t\t\t\t\t<p>{{ errorMessage() }}</p>\r\n\t\t\t\t\t<aril-button [label]=\"t('traceDrawer.retry')\" icon=\"REFRESH\" color=\"primary\" (clickEvent)=\"retry()\" />\r\n\t\t\t\t</div>\r\n\t\t\t} @else {\r\n\t\t\t\t@if (apisixHits().length) {\r\n\t\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t\t<i class=\"pi pi-globe\"></i>\r\n\t\t\t\t\t\t\t{{ t('traceDrawer.apisixHeader') }}\r\n\t\t\t\t\t\t\t<aril-badge [value]=\"apisixHits().length + ' / ' + totalItem()\" [rounded]=\"true\" />\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t@for (hit of apisixHits(); track hit.id) {\r\n\t\t\t\t\t\t\t<details class=\"trace-row trace-row--{{ statusSeverity(hit.status) }}\">\r\n\t\t\t\t\t\t\t\t<summary class=\"trace-row__summary\">\r\n\t\t\t\t\t\t\t\t\t<i class=\"pi pi-chevron-right trace-row__chevron\"></i>\r\n\t\t\t\t\t\t\t\t\t<aril-badge [value]=\"hit.status.toString()\" [severity]=\"statusSeverity(hit.status)\" />\r\n\t\t\t\t\t\t\t\t\t<span class=\"trace-row__tag\">{{ hit.requestMethod }}</span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"trace-row__main\">{{ hit.requestUri }}</span>\r\n\t\t\t\t\t\t\t\t\t<aril-badge\r\n\t\t\t\t\t\t\t\t\t\t[value]=\"formatDuration(hit.responseTime)\"\r\n\t\t\t\t\t\t\t\t\t\t[severity]=\"durationSeverity(hit.responseTime)\" />\r\n\t\t\t\t\t\t\t\t\t@if (hit.timestamp) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"trace-row__time\">{{ formatTimestamp(hit.timestamp) }}</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"pi pi-code trace-row__action\"\r\n\t\t\t\t\t\t\t\t\t\t[pTooltip]=\"t('traceDrawer.copyCurl')\"\r\n\t\t\t\t\t\t\t\t\t\ttooltipPosition=\"left\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"$event.preventDefault(); $event.stopPropagation(); copyAsCurl(hit)\"></i>\r\n\t\t\t\t\t\t\t\t</summary>\r\n\t\t\t\t\t\t\t\t<div class=\"trace-row__body\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"trace-row__meta\">\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.routeName) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.route') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ hit.routeName }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.sourceApp || hit.sourceModule) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.source') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ hit.sourceApp }}{{ hit.sourceModule ? ' / ' + hit.sourceModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.targetApp || hit.targetModule) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.target') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ hit.targetApp }}{{ hit.targetModule ? ' / ' + hit.targetModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.upstreamHost) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.upstream') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ hit.upstreamHost }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.username) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.user') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ hit.username }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.requestSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.requestSize') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ formatBytes(hit.requestSize) }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.responseSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.responseSize') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ formatBytes(hit.responseSize) }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t@if (hit.requestBody) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\">\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.requestBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.requestBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.requestBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (hit.responseBody) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\">\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.responseBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.responseBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.responseBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (hasMore()) {\r\n\t\t\t\t\t\t\t<div class=\"aril-trace-drawer__load-more\">\r\n\t\t\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t\t\t[label]=\"t('traceDrawer.loadMore')\"\r\n\t\t\t\t\t\t\t\t\ticon=\"CHEVRON_DOWN\"\r\n\t\t\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t\t\t[outlined]=\"true\"\r\n\t\t\t\t\t\t\t\t\t[loading]=\"loadingMore()\"\r\n\t\t\t\t\t\t\t\t\t[disabled]=\"loadingMore()\"\r\n\t\t\t\t\t\t\t\t\t(clickEvent)=\"loadMore()\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</section>\r\n\t\t\t\t}\r\n\t\t\t\t@if (appLogs().length) {\r\n\t\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t\t<i class=\"pi pi-list\"></i>\r\n\t\t\t\t\t\t\t{{ t('traceDrawer.appLogsHeader') }}\r\n\t\t\t\t\t\t\t<aril-badge [value]=\"appLogs().length + ' / ' + appLogsTotal()\" [rounded]=\"true\" />\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t@for (log of appLogs(); track log.id) {\r\n\t\t\t\t\t\t\t<details class=\"trace-row trace-row--{{ levelSeverity(log.level) }}\">\r\n\t\t\t\t\t\t\t\t<summary class=\"trace-row__summary\">\r\n\t\t\t\t\t\t\t\t\t<i class=\"pi pi-chevron-right trace-row__chevron\"></i>\r\n\t\t\t\t\t\t\t\t\t@if (log.level) {\r\n\t\t\t\t\t\t\t\t\t\t<aril-badge [value]=\"log.level\" [severity]=\"levelSeverity(log.level)\" />\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.module) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"trace-row__tag\">{{ log.module }}</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t<span class=\"trace-row__main\">{{ log.message }}</span>\r\n\t\t\t\t\t\t\t\t\t@if (log.timestamp) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"trace-row__time\">{{ formatTimestamp(log.timestamp) }}</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</summary>\r\n\t\t\t\t\t\t\t\t<div class=\"trace-row__body\">\r\n\t\t\t\t\t\t\t\t\t@if (log.message) {\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"trace-row__message\">{{ log.message }}</div>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.username || log.app) {\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"trace-row__meta\">\r\n\t\t\t\t\t\t\t\t\t\t\t@if (log.app) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.target') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ log.app }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t@if (log.username) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.user') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ log.username }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.errorDetail) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\" open>\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.appLogErrorDetail') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t<pre>{{ log.errorDetail }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.referenceFields?.length) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\">\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.appLogRefFields') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"trace-row__meta\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t@for (rf of log.referenceFields; track rf.field) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ rf.field }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ rf.value }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (appLogsHasMore()) {\r\n\t\t\t\t\t\t\t<div class=\"aril-trace-drawer__load-more\">\r\n\t\t\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t\t\t[label]=\"t('traceDrawer.loadMore')\"\r\n\t\t\t\t\t\t\t\t\ticon=\"CHEVRON_DOWN\"\r\n\t\t\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t\t\t[outlined]=\"true\"\r\n\t\t\t\t\t\t\t\t\t[loading]=\"appLogsLoadingMore()\"\r\n\t\t\t\t\t\t\t\t\t[disabled]=\"appLogsLoadingMore()\"\r\n\t\t\t\t\t\t\t\t\t(clickEvent)=\"loadMoreAppLogs()\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</section>\r\n\t\t\t\t}\r\n\t\t\t\t@if (!apisixHits().length && !appLogs().length) {\r\n\t\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t\t<i class=\"pi pi-inbox\"></i>\r\n\t\t\t\t\t\t<p>{{ t('traceDrawer.empty') }}</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t</div>\r\n\t</p-sidebar>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .aril-trace-drawer{display:flex;flex-direction:column;height:100%}:host ::ng-deep .aril-trace-drawer .p-sidebar-header{padding:1rem 1.25rem;border-bottom:1px solid var(--surface-border, #e5e7eb);flex:0 0 auto}:host ::ng-deep .aril-trace-drawer .p-sidebar-content{padding:0;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.aril-trace-drawer__header{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.aril-trace-drawer__header .pi-sitemap{font-size:1.25rem;color:var(--primary-color, #1890ff)}.aril-trace-drawer__title{font-weight:600;font-size:1.1rem}.aril-trace-drawer__chip{font-size:.875rem;padding:.2rem .55rem;border-radius:4px;background:var(--surface-100, #f3f4f6);color:var(--text-color-secondary, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.aril-trace-drawer__share{cursor:pointer;font-size:1rem;padding:.4rem;border-radius:4px;color:var(--primary-color, #1890ff);transition:background .15s ease}.aril-trace-drawer__share:hover{background:var(--surface-100, #f3f4f6)}.aril-trace-drawer__body{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:1.5rem;min-height:min-content}.aril-trace-drawer__state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1rem;color:var(--text-color-secondary, #6b7280);text-align:center;font-size:.95rem}.aril-trace-drawer__state .pi{font-size:2rem}.aril-trace-drawer__state--error .pi{color:var(--red-500, #ef4444)}.aril-trace-drawer__section-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:1rem;font-weight:600}.aril-trace-drawer__section-title .pi{color:var(--primary-color, #1890ff)}.trace-row{display:block;border:1px solid var(--surface-border, #e5e7eb);border-left:3px solid var(--surface-border, #e5e7eb);background:var(--surface-card, #ffffff);border-radius:4px;overflow:hidden;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}.trace-row+.trace-row{margin-top:.4rem}.trace-row:hover{border-top-color:var(--surface-300, #d1d5db);border-right-color:var(--surface-300, #d1d5db);border-bottom-color:var(--surface-300, #d1d5db);box-shadow:0 1px 3px #0000000a}.trace-row[open]{background:var(--surface-50, #fafafa);border-top-color:var(--surface-300, #d1d5db);border-right-color:var(--surface-300, #d1d5db);border-bottom-color:var(--surface-300, #d1d5db);box-shadow:0 1px 4px #0000000d}.trace-row--success{border-left-color:var(--green-500, #22c55e)}.trace-row--info{border-left-color:var(--blue-500, #3b82f6)}.trace-row--warning{border-left-color:var(--orange-500, #f97316)}.trace-row--danger{border-left-color:var(--red-500, #ef4444)}.trace-row--secondary{border-left-color:var(--gray-400, #9ca3af)}.trace-row__summary{cursor:pointer;-webkit-user-select:none;user-select:none;list-style:none;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem}.trace-row__summary::-webkit-details-marker{display:none}.trace-row__summary:hover{background:var(--surface-50, #fafafa)}.trace-row[open] .trace-row__summary:hover{background:var(--surface-100, #f3f4f6)}.trace-row__chevron{color:var(--text-color-secondary, #6b7280);font-size:.7rem;transition:transform .15s ease;flex-shrink:0}.trace-row[open] .trace-row__chevron{transform:rotate(90deg)}.trace-row__tag{font-weight:600;color:var(--primary-color, #1890ff);font-size:.8rem;white-space:nowrap;flex-shrink:0;letter-spacing:.02em}.trace-row__main{font-size:.85rem;color:var(--text-color, #111827);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trace-row__time{font-size:.75rem;color:var(--text-color-secondary, #6b7280);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.trace-row__action{cursor:pointer;padding:.25rem;border-radius:4px;color:var(--text-color-secondary, #6b7280);flex-shrink:0;transition:background .15s ease,color .15s ease}.trace-row__action:hover{background:var(--surface-100, #f3f4f6);color:var(--primary-color, #1890ff)}.trace-row__body{padding:.5rem .75rem .75rem;border-top:1px solid var(--surface-border, #e5e7eb);display:flex;flex-direction:column;gap:.5rem;background:var(--surface-0, #ffffff)}.trace-row__message{font-size:.85rem;color:var(--text-color, #111827);line-height:1.5;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;background:var(--surface-100, #f3f4f6);border-radius:4px;padding:.5rem .65rem}.trace-row__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.25rem .75rem;font-size:.8rem}.trace-row__meta>div{display:grid;grid-template-columns:max-content 1fr;column-gap:.4rem;align-items:baseline;min-width:0}.trace-row__meta .meta-label{color:var(--text-color-secondary, #6b7280);font-weight:500}.trace-row__meta .meta-label:after{content:\":\"}.trace-row__meta span:not(.meta-label){color:var(--text-color, #111827);word-break:break-word}.trace-row__sub{margin:0}.trace-row__sub summary{cursor:pointer;font-size:.8rem;color:var(--primary-color, #1890ff);padding:.15rem 0;-webkit-user-select:none;user-select:none}.trace-row__sub summary:hover{text-decoration:underline}.trace-row__sub pre{margin:.25rem 0 0;padding:.5rem .75rem;background:var(--surface-100, #f3f4f6);border-radius:4px;font-size:.78rem;line-height:1.45;max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-word}.aril-trace-drawer__load-more{display:flex;justify-content:center;margin-top:.5rem}\n"] }]
+            args: [{ standalone: true, selector: 'aril-trace-drawer', imports: [JsonPipe, TranslocoModule, SidebarModule, ProgressSpinnerModule, TooltipModule, BadgeComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n\t<p-sidebar\r\n\t\t[visible]=\"visible()\"\r\n\t\t(visibleChange)=\"onVisibleChange($event)\"\r\n\t\t[position]=\"position()\"\r\n\t\t[style]=\"{ width: width() }\"\r\n\t\t[modal]=\"modal()\"\r\n\t\t[dismissible]=\"true\"\r\n\t\t[showCloseIcon]=\"true\"\r\n\t\tstyleClass=\"aril-trace-drawer\">\r\n\t\t<ng-template pTemplate=\"header\">\r\n\t\t\t<div class=\"aril-trace-drawer__header\">\r\n\t\t\t\t<i class=\"pi pi-sitemap\"></i>\r\n\t\t\t\t<span class=\"aril-trace-drawer__title\">{{ t('traceDrawer.title') }}</span>\r\n\t\t\t\t<code class=\"aril-trace-drawer__chip\">{{ traceId() }}</code>\r\n\t\t\t\t<i\r\n\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\tclass=\"pi pi-share-alt aril-trace-drawer__share\"\r\n\t\t\t\t\t[pTooltip]=\"t('traceDrawer.shareLink')\"\r\n\t\t\t\t\ttooltipPosition=\"bottom\"\r\n\t\t\t\t\t(click)=\"shareLink()\"></i>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\r\n\t\t<div class=\"aril-trace-drawer__body\">\r\n\t\t\t@if (loading()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t<p-progressSpinner strokeWidth=\"3\" styleClass=\"w-3rem h-3rem\"></p-progressSpinner>\r\n\t\t\t\t\t<span>{{ t('traceDrawer.loading') }}</span>\r\n\t\t\t\t</div>\r\n\t\t\t} @else if (errorMessage()) {\r\n\t\t\t\t<div class=\"aril-trace-drawer__state aril-trace-drawer__state--error\">\r\n\t\t\t\t\t<i class=\"pi pi-exclamation-triangle\"></i>\r\n\t\t\t\t\t<p>{{ errorMessage() }}</p>\r\n\t\t\t\t\t<aril-button [label]=\"t('traceDrawer.retry')\" icon=\"REFRESH\" color=\"primary\" (clickEvent)=\"retry()\" />\r\n\t\t\t\t</div>\r\n\t\t\t} @else {\r\n\t\t\t\t@if (refValueEntries().length) {\r\n\t\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t\t<i class=\"pi pi-tags\"></i>\r\n\t\t\t\t\t\t\t{{ t('traceDrawer.refValuesHeader') }}\r\n\t\t\t\t\t\t\t<aril-badge [value]=\"refValueEntries().length.toString()\" [rounded]=\"true\" />\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t<div class=\"ref-values\">\r\n\t\t\t\t\t\t\t@for (entry of refValueEntries(); track entry[0]) {\r\n\t\t\t\t\t\t\t\t<div class=\"ref-values__row\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"ref-values__key\">{{ entry[0] }}</span>\r\n\t\t\t\t\t\t\t\t\t<div class=\"ref-values__chips\">\r\n\t\t\t\t\t\t\t\t\t\t@for (val of entry[1]; track val) {\r\n\t\t\t\t\t\t\t\t\t\t\t<code class=\"ref-values__chip\">{{ val }}</code>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</section>\r\n\t\t\t\t}\r\n\t\t\t\t@if (apisixHits().length) {\r\n\t\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t\t<i class=\"pi pi-globe\"></i>\r\n\t\t\t\t\t\t\t{{ t('traceDrawer.apisixHeader') }}\r\n\t\t\t\t\t\t\t<aril-badge [value]=\"apisixHits().length + ' / ' + totalItem()\" [rounded]=\"true\" />\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t@for (hit of apisixHits(); track hit.id) {\r\n\t\t\t\t\t\t\t<details class=\"trace-row trace-row--{{ statusSeverity(hit.status) }}\">\r\n\t\t\t\t\t\t\t\t<summary class=\"trace-row__summary\">\r\n\t\t\t\t\t\t\t\t\t<i class=\"pi pi-chevron-right trace-row__chevron\"></i>\r\n\t\t\t\t\t\t\t\t\t<aril-badge [value]=\"hit.status.toString()\" [severity]=\"statusSeverity(hit.status)\" />\r\n\t\t\t\t\t\t\t\t\t<span class=\"trace-row__tag\">{{ hit.requestMethod }}</span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"trace-row__main\">{{ hit.requestUri }}</span>\r\n\t\t\t\t\t\t\t\t\t<aril-badge\r\n\t\t\t\t\t\t\t\t\t\t[value]=\"formatDuration(hit.responseTime)\"\r\n\t\t\t\t\t\t\t\t\t\t[severity]=\"durationSeverity(hit.responseTime)\" />\r\n\t\t\t\t\t\t\t\t\t@if (hit.timestamp) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"trace-row__time\">{{ formatTimestamp(hit.timestamp) }}</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"pi pi-code trace-row__action\"\r\n\t\t\t\t\t\t\t\t\t\t[pTooltip]=\"t('traceDrawer.copyCurl')\"\r\n\t\t\t\t\t\t\t\t\t\ttooltipPosition=\"left\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"$event.preventDefault(); $event.stopPropagation(); copyAsCurl(hit)\"></i>\r\n\t\t\t\t\t\t\t\t</summary>\r\n\t\t\t\t\t\t\t\t<div class=\"trace-row__body\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"trace-row__meta\">\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.routeName) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.route') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ hit.routeName }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.sourceApp || hit.sourceModule) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.source') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ hit.sourceApp }}{{ hit.sourceModule ? ' / ' + hit.sourceModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.targetApp || hit.targetModule) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.target') }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ hit.targetApp }}{{ hit.targetModule ? ' / ' + hit.targetModule : '' }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.upstreamHost) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.upstream') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ hit.upstreamHost }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.username) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.user') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ hit.username }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.requestSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.requestSize') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ formatBytes(hit.requestSize) }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t@if (hit.responseSize !== undefined) {\r\n\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.responseSize') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ formatBytes(hit.responseSize) }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t@if (hit.requestBody) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\">\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.requestBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.requestBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.requestBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (hit.responseBody) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\">\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.responseBody') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t@if (tryParseJson(hit.responseBody); as parsed) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ parsed | json }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<pre>{{ hit.responseBody }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (hasMore()) {\r\n\t\t\t\t\t\t\t<div class=\"aril-trace-drawer__load-more\">\r\n\t\t\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t\t\t[label]=\"t('traceDrawer.loadMore')\"\r\n\t\t\t\t\t\t\t\t\ticon=\"CHEVRON_DOWN\"\r\n\t\t\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t\t\t[outlined]=\"true\"\r\n\t\t\t\t\t\t\t\t\t[loading]=\"loadingMore()\"\r\n\t\t\t\t\t\t\t\t\t[disabled]=\"loadingMore()\"\r\n\t\t\t\t\t\t\t\t\t(clickEvent)=\"loadMore()\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</section>\r\n\t\t\t\t}\r\n\t\t\t\t@if (appLogs().length) {\r\n\t\t\t\t\t<section class=\"aril-trace-drawer__section\">\r\n\t\t\t\t\t\t<h3 class=\"aril-trace-drawer__section-title\">\r\n\t\t\t\t\t\t\t<i class=\"pi pi-list\"></i>\r\n\t\t\t\t\t\t\t{{ t('traceDrawer.appLogsHeader') }}\r\n\t\t\t\t\t\t\t<aril-badge [value]=\"appLogs().length + ' / ' + appLogsTotal()\" [rounded]=\"true\" />\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t@for (log of appLogs(); track log.id) {\r\n\t\t\t\t\t\t\t<details class=\"trace-row trace-row--{{ levelSeverity(log.level) }}\">\r\n\t\t\t\t\t\t\t\t<summary class=\"trace-row__summary\">\r\n\t\t\t\t\t\t\t\t\t<i class=\"pi pi-chevron-right trace-row__chevron\"></i>\r\n\t\t\t\t\t\t\t\t\t@if (log.level) {\r\n\t\t\t\t\t\t\t\t\t\t<aril-badge [value]=\"log.level\" [severity]=\"levelSeverity(log.level)\" />\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.module) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"trace-row__tag\">{{ log.module }}</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t<span class=\"trace-row__main\">{{ log.message }}</span>\r\n\t\t\t\t\t\t\t\t\t@if (log.timestamp) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"trace-row__time\">{{ formatTimestamp(log.timestamp) }}</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</summary>\r\n\t\t\t\t\t\t\t\t<div class=\"trace-row__body\">\r\n\t\t\t\t\t\t\t\t\t@if (log.message) {\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"trace-row__message\">{{ log.message }}</div>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.username || log.app) {\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"trace-row__meta\">\r\n\t\t\t\t\t\t\t\t\t\t\t@if (log.app) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.target') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ log.app }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t@if (log.username) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ t('traceDrawer.user') }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ log.username }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.errorDetail) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\" open>\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.appLogErrorDetail') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t<pre>{{ log.errorDetail }}</pre>\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t@if (log.referenceFields?.length) {\r\n\t\t\t\t\t\t\t\t\t\t<details class=\"trace-row__sub\">\r\n\t\t\t\t\t\t\t\t\t\t\t<summary>{{ t('traceDrawer.appLogRefFields') }}</summary>\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"trace-row__meta\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t@for (rf of log.referenceFields; track rf.field) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"meta-label\">{{ rf.field }}</span\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t><span>{{ rf.value }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</details>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (appLogsHasMore()) {\r\n\t\t\t\t\t\t\t<div class=\"aril-trace-drawer__load-more\">\r\n\t\t\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t\t\t[label]=\"t('traceDrawer.loadMore')\"\r\n\t\t\t\t\t\t\t\t\ticon=\"CHEVRON_DOWN\"\r\n\t\t\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t\t\t[outlined]=\"true\"\r\n\t\t\t\t\t\t\t\t\t[loading]=\"appLogsLoadingMore()\"\r\n\t\t\t\t\t\t\t\t\t[disabled]=\"appLogsLoadingMore()\"\r\n\t\t\t\t\t\t\t\t\t(clickEvent)=\"loadMoreAppLogs()\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</section>\r\n\t\t\t\t}\r\n\t\t\t\t@if (!apisixHits().length && !appLogs().length && !refValueEntries().length) {\r\n\t\t\t\t\t<div class=\"aril-trace-drawer__state\">\r\n\t\t\t\t\t\t<i class=\"pi pi-inbox\"></i>\r\n\t\t\t\t\t\t<p>{{ t('traceDrawer.empty') }}</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t</div>\r\n\t</p-sidebar>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .aril-trace-drawer{display:flex;flex-direction:column;height:100%}:host ::ng-deep .aril-trace-drawer .p-sidebar-header{padding:1rem 1.25rem;border-bottom:1px solid var(--surface-border, #e5e7eb);flex:0 0 auto}:host ::ng-deep .aril-trace-drawer .p-sidebar-content{padding:0;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.aril-trace-drawer__header{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.aril-trace-drawer__header .pi-sitemap{font-size:1.25rem;color:var(--primary-color, #1890ff)}.aril-trace-drawer__title{font-weight:600;font-size:1.1rem}.aril-trace-drawer__chip{font-size:.875rem;padding:.2rem .55rem;border-radius:4px;background:var(--surface-100, #f3f4f6);color:var(--text-color-secondary, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.aril-trace-drawer__share{cursor:pointer;font-size:1rem;padding:.4rem;border-radius:4px;color:var(--primary-color, #1890ff);transition:background .15s ease}.aril-trace-drawer__share:hover{background:var(--surface-100, #f3f4f6)}.aril-trace-drawer__body{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:1.5rem;min-height:min-content}.aril-trace-drawer__state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1rem;color:var(--text-color-secondary, #6b7280);text-align:center;font-size:.95rem}.aril-trace-drawer__state .pi{font-size:2rem}.aril-trace-drawer__state--error .pi{color:var(--red-500, #ef4444)}.aril-trace-drawer__section-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:1rem;font-weight:600}.aril-trace-drawer__section-title .pi{color:var(--primary-color, #1890ff)}.trace-row{display:block;border:1px solid var(--surface-border, #e5e7eb);border-left:3px solid var(--surface-border, #e5e7eb);background:var(--surface-card, #ffffff);border-radius:4px;overflow:hidden;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}.trace-row+.trace-row{margin-top:.4rem}.trace-row:hover{border-top-color:var(--surface-300, #d1d5db);border-right-color:var(--surface-300, #d1d5db);border-bottom-color:var(--surface-300, #d1d5db);box-shadow:0 1px 3px #0000000a}.trace-row[open]{background:var(--surface-50, #fafafa);border-top-color:var(--surface-300, #d1d5db);border-right-color:var(--surface-300, #d1d5db);border-bottom-color:var(--surface-300, #d1d5db);box-shadow:0 1px 4px #0000000d}.trace-row--success{border-left-color:var(--green-500, #22c55e)}.trace-row--info{border-left-color:var(--blue-500, #3b82f6)}.trace-row--warning{border-left-color:var(--orange-500, #f97316)}.trace-row--danger{border-left-color:var(--red-500, #ef4444)}.trace-row--secondary{border-left-color:var(--gray-400, #9ca3af)}.trace-row__summary{cursor:pointer;-webkit-user-select:none;user-select:none;list-style:none;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem}.trace-row__summary::-webkit-details-marker{display:none}.trace-row__summary:hover{background:var(--surface-50, #fafafa)}.trace-row[open] .trace-row__summary:hover{background:var(--surface-100, #f3f4f6)}.trace-row__chevron{color:var(--text-color-secondary, #6b7280);font-size:.7rem;transition:transform .15s ease;flex-shrink:0}.trace-row[open] .trace-row__chevron{transform:rotate(90deg)}.trace-row__tag{font-weight:600;color:var(--primary-color, #1890ff);font-size:.8rem;white-space:nowrap;flex-shrink:0;letter-spacing:.02em}.trace-row__main{font-size:.85rem;color:var(--text-color, #111827);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trace-row__time{font-size:.75rem;color:var(--text-color-secondary, #6b7280);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.trace-row__action{cursor:pointer;padding:.25rem;border-radius:4px;color:var(--text-color-secondary, #6b7280);flex-shrink:0;transition:background .15s ease,color .15s ease}.trace-row__action:hover{background:var(--surface-100, #f3f4f6);color:var(--primary-color, #1890ff)}.trace-row__body{padding:.5rem .75rem .75rem;border-top:1px solid var(--surface-border, #e5e7eb);display:flex;flex-direction:column;gap:.5rem;background:var(--surface-0, #ffffff)}.trace-row__message{font-size:.85rem;color:var(--text-color, #111827);line-height:1.5;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;background:var(--surface-100, #f3f4f6);border-radius:4px;padding:.5rem .65rem}.trace-row__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.25rem .75rem;font-size:.8rem}.trace-row__meta>div{display:grid;grid-template-columns:max-content 1fr;column-gap:.4rem;align-items:baseline;min-width:0}.trace-row__meta .meta-label{color:var(--text-color-secondary, #6b7280);font-weight:500}.trace-row__meta .meta-label:after{content:\":\"}.trace-row__meta span:not(.meta-label){color:var(--text-color, #111827);word-break:break-word}.trace-row__sub{margin:0}.trace-row__sub summary{cursor:pointer;font-size:.8rem;color:var(--primary-color, #1890ff);padding:.15rem 0;-webkit-user-select:none;user-select:none}.trace-row__sub summary:hover{text-decoration:underline}.trace-row__sub pre{margin:.25rem 0 0;padding:.5rem .75rem;background:var(--surface-100, #f3f4f6);border-radius:4px;font-size:.78rem;line-height:1.45;max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-word}.aril-trace-drawer__load-more{display:flex;justify-content:center;margin-top:.5rem}.ref-values{display:flex;flex-direction:column;gap:.4rem;border:1px solid var(--surface-border, #e5e7eb);border-radius:4px;background:var(--surface-card, #ffffff);padding:.6rem .75rem}.ref-values__row{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;column-gap:.75rem;row-gap:.25rem;align-items:baseline}.ref-values__key{font-size:.8rem;font-weight:600;color:var(--text-color-secondary, #6b7280);letter-spacing:.02em;overflow-wrap:anywhere}.ref-values__key:after{content:\":\"}.ref-values__chips{display:flex;flex-wrap:wrap;gap:.3rem;min-width:0}.ref-values__chip{font-size:.78rem;padding:.15rem .5rem;border-radius:4px;background:var(--surface-100, #f3f4f6);color:var(--text-color, #111827);border:1px solid var(--surface-border, #e5e7eb);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}\n"] }]
         }], ctorParameters: () => [], propDecorators: { visibleChange: [{
                 type: Output
             }] } });