30775d5a01
TipTap-powered rich text editing library with WYSIWYG editor, markdown editor, template editor, collaboration support (Yjs), mentions, track changes, comments, code blocks, and table insertion. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
44 lines
1.4 KiB
HTML
44 lines
1.4 KiB
HTML
<div class="rt-variable-picker">
|
|
<div class="rt-variable-picker__header">
|
|
<ui-input
|
|
size="sm"
|
|
placeholder="Search variables..."
|
|
[ngModel]="searchQuery()"
|
|
(ngModelChange)="searchQuery.set($event)"
|
|
/>
|
|
<ui-button variant="ghost" size="sm" [iconOnly]="true" (click)="onClose()">
|
|
<ui-icon name="close" [size]="14" />
|
|
</ui-button>
|
|
</div>
|
|
|
|
<div class="rt-variable-picker__list">
|
|
@for (group of groupedVariables(); track group[0]) {
|
|
<div class="rt-variable-picker__category">
|
|
<div class="rt-variable-picker__category-label">{{ group[0] }}</div>
|
|
@for (variable of group[1]; track variable.key) {
|
|
<button
|
|
type="button"
|
|
class="rt-variable-picker__item"
|
|
[title]="variable.description || variable.key"
|
|
(click)="onSelect(variable)"
|
|
>
|
|
<div class="rt-variable-picker__item-content">
|
|
<span class="rt-variable-picker__item-label">{{ variable.label }}</span>
|
|
<span class="rt-variable-picker__item-key">{{ variable.key }}</span>
|
|
</div>
|
|
<ui-badge [variant]="getTypeBadgeVariant(variable.type)" size="sm">
|
|
{{ variable.type }}
|
|
</ui-badge>
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
@if (filteredVariables().length === 0) {
|
|
<div class="rt-variable-picker__empty">
|
|
No variables found
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|