58 lines
3.2 KiB
HTML
58 lines
3.2 KiB
HTML
@for (segment of segments(); track $index; let segIndex = $index) {
|
||
@if (segment.kind === 'text') {
|
||
@if (segment.text.trim().length) {
|
||
<p class="tpl-text whitespace-pre-wrap break-words text-sm text-slate-800">{{ segment.text }}</p>
|
||
}
|
||
} @else if (!segment.multiple) {
|
||
<div class="tpl-value-card rounded-lg border border-slate-200 bg-white p-3">
|
||
<div class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ segmentLabel(segment.name) }}</div>
|
||
@if (hasValue(segment.value)) {
|
||
<div class="mt-1 whitespace-pre-wrap break-words font-mono text-sm font-normal text-slate-800">{{ isSingleExpanded(segIndex) ? stringifyValue(segment.value) : truncate(stringifyValue(segment.value)) }}</div>
|
||
@if (isLong(stringifyValue(segment.value))) {
|
||
<button type="button" class="tpl-link mt-1 text-xs font-semibold text-blue-600 hover:underline" (click)="toggleSingle(segIndex)">{{ isSingleExpanded(segIndex) ? 'Show less' : 'Show all' }}</button>
|
||
}
|
||
} @else {
|
||
<div class="mt-1 text-sm font-normal italic text-slate-400">No data available</div>
|
||
}
|
||
</div>
|
||
} @else {
|
||
<div class="tpl-array rounded-lg border border-slate-200 bg-white p-3">
|
||
<div class="flex items-center justify-between gap-2">
|
||
<span class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ segmentLabel(segment.name) }} ({{ itemsFor(segment.value).length }})</span>
|
||
@if (itemsFor(segment.value).length > 1) {
|
||
<button
|
||
type="button"
|
||
class="tpl-link text-xs font-semibold text-blue-600 hover:underline"
|
||
(click)="toggleAllItems(segIndex, itemsFor(segment.value).length, $event)">{{ allItemsExpanded(segIndex, itemsFor(segment.value).length) ? 'Collapse all' : 'Expand all' }}</button>
|
||
}
|
||
</div>
|
||
|
||
@if (!itemsFor(segment.value).length) {
|
||
<div class="mt-1 text-sm font-normal italic text-slate-400">No data available</div>
|
||
} @else {
|
||
<div class="mt-2 grid gap-1">
|
||
@for (item of itemsFor(segment.value); track $index; let itemIndex = $index) {
|
||
<div class="tpl-array-item rounded-md border border-slate-100">
|
||
<button
|
||
type="button"
|
||
class="tpl-array-item-header flex w-full items-center gap-2 px-2 py-1.5 text-left text-sm font-normal text-slate-700 hover:bg-slate-50"
|
||
(click)="toggleItem(segIndex, itemIndex)">
|
||
<span class="tpl-chevron" [class.tpl-chevron-open]="isItemExpanded(segIndex, itemIndex)" aria-hidden="true">›</span>
|
||
<span class="tpl-array-item-label">{{ segmentLabel(segment.name) }} {{ itemIndex + 1 }} of {{ itemsFor(segment.value).length }}</span>
|
||
</button>
|
||
@if (isItemExpanded(segIndex, itemIndex)) {
|
||
<div class="border-t border-slate-100 px-2 py-2">
|
||
<div class="whitespace-pre-wrap break-words font-mono text-sm font-normal text-slate-800">{{ isItemFullyExpanded(segIndex, itemIndex) ? stringifyValue(item) : truncate(stringifyValue(item)) }}</div>
|
||
@if (isLong(stringifyValue(item))) {
|
||
<button type="button" class="tpl-link mt-1 text-xs font-semibold text-blue-600 hover:underline" (click)="toggleItemFull(segIndex, itemIndex, $event)">{{ isItemFullyExpanded(segIndex, itemIndex) ? 'Show less' : 'Show all' }}</button>
|
||
}
|
||
</div>
|
||
}
|
||
</div>
|
||
}
|
||
</div>
|
||
}
|
||
</div>
|
||
}
|
||
}
|