-
{{ app.name }}
+
@if (app.caption) {
{{ app.caption }}
}
@@ -65,6 +69,8 @@ export class KbqAppSwitcherListItem extends KbqDropdownItem {
// and migrating would break narrowing currently.
@Input() app: KbqAppSwitcherApp;
readonly toggle = input(false, { transform: booleanAttribute });
+ /** Search query to highlight within the app name. */
+ readonly highlightText = input
('');
// TODO: Skipped for migration because:
// Your application code writes to the input. This prevents migration.
@Input({ transform: booleanAttribute }) collapsed: boolean = false;
diff --git a/packages/components/core/highlight/highlight.en.md b/packages/components/core/highlight/highlight.en.md
index f14ceadf09..067a9b9d4e 100644
--- a/packages/components/core/highlight/highlight.en.md
+++ b/packages/components/core/highlight/highlight.en.md
@@ -1,23 +1,29 @@
-mcHighlight is a pipe for highlighting text matches. Highlighting matches helps users quickly understand why a result is relevant and speeds up navigation through lists. Depending on the context, two styles are used.
+Highlighting matches helps users quickly understand why a result is relevant and speeds up navigation through lists. Depending on the context, one of two styles is used.
-The pipe takes a string and a search argument, wrapping the found matches in a tag.
+Koobiq provides two pipes for highlighting text matches — `kbqHighlightBackground` and `mcHighlight`. Both take a string and a search argument, wrapping the found matches in a `` tag — `kbq-highlight-background` for the background-color style and `kbq-highlight` for the bold style.
-#### Bold
+#### Background color
-Used in selects with search and homogeneous lists (for example, choosing a department or a name). This style is unobtrusive and ideal for quickly scanning familiar data: the user immediately sees that the searched word is in the row but is not distracted from the main choice.
+Used in selects and other dropdown pickers with filtering, and to highlight matches in complex content: descriptions, messages, and articles. The solid background remains legible in hover and active states within overlays and makes matches noticeable even in long texts.
-#### Background color
-
-Used in search results over complex content — descriptions, messages, articles. Highlighting also draws attention even inside long texts.
+Matches in text:
-Matches in search results with a complex layout
+Matches in search results with a complex layout:
Matches in a table:
+
+#### Bold
+
+This style is unobtrusive and ideal for quickly scanning familiar data: the user immediately sees that the searched word is in the row but is not distracted from the main choice.
+
+```html
+
+```
diff --git a/packages/components/core/highlight/highlight.ru.md b/packages/components/core/highlight/highlight.ru.md
index f38f667704..0cdcec8b2a 100644
--- a/packages/components/core/highlight/highlight.ru.md
+++ b/packages/components/core/highlight/highlight.ru.md
@@ -1,23 +1,29 @@
-mcHighlight — это pipe для подсветки совпадений текста. Выделение совпадений позволяет пользователю быстро понять, почему результат релевантен, и ускоряет навигацию по спискам. В зависимости от контекста применяются два способа оформления.
+Выделение совпадений позволяет пользователю быстро понять, почему результат релевантен, и ускоряет навигацию по спискам. В зависимости от контекста применяется один из двух способов оформления.
-Pipe принимает строку и аргумент для поиска, оборачивая найденные совпадения в тег ``.
+Koobiq предоставляет два pipe для подсветки совпадений текста — `kbqHighlightBackground` и `mcHighlight`. Оба принимают строку и аргумент для поиска, оборачивая найденные совпадения в тег `` — с классом `kbq-highlight-background` для выделения цветом и `kbq-highlight` для жирного шрифта.
-#### Жирный шрифт
+#### Выделение цветом
-Применяется в селектах с поиском и однородных списках (например, выбор отдела или имени). Этот способ ненавязчив и идеален для быстрого сканирования знакомых данных: пользователь сразу видит, что искомое слово есть в строке, но не отвлекается от основного выбора.
+Применяется в селектах и других выпадающих списках с фильтрацией, а также для выделения совпадений в сложном контенте: описаниях, сообщениях и статьях. Сплошной фон остается читаемым в состояниях hover и active внутри оверлея и делает совпадения заметными даже в длинных текстах.
-#### Выделение цветом
-
-Используется в результатах поиска по сложному контенту — описаниям, сообщениям, статьям. Также выделение привлекает внимание даже внутри длинных текстов.
+Совпадения в тексте:
-Совпадения в результатах поиска со сложной версткой
+Совпадения в результатах поиска со сложной версткой:
Совпадения в таблице:
+
+#### Жирный шрифт
+
+Этот способ ненавязчив и идеален для быстрого сканирования знакомых данных: пользователь сразу видит, что искомое слово есть в строке, но не отвлекается от основного выбора.
+
+```html
+
+```
diff --git a/packages/components/filter-bar/pipes/pipe-multi-tree-select.html b/packages/components/filter-bar/pipes/pipe-multi-tree-select.html
index 023f0b91b8..144590bb79 100644
--- a/packages/components/filter-bar/pipes/pipe-multi-tree-select.html
+++ b/packages/components/filter-bar/pipes/pipe-multi-tree-select.html
@@ -65,16 +65,22 @@
(click)="toggleSelectAllNode()"
>
-
+
-
+
-
+
diff --git a/packages/components/filter-bar/pipes/pipe-tree-select.html b/packages/components/filter-bar/pipes/pipe-tree-select.html
index 72b1afee70..9536fd16d1 100644
--- a/packages/components/filter-bar/pipes/pipe-tree-select.html
+++ b/packages/components/filter-bar/pipes/pipe-tree-select.html
@@ -49,12 +49,16 @@
-
+
-
+
diff --git a/packages/components/timezone/timezone-option.component.html b/packages/components/timezone/timezone-option.component.html
index bec6cdbf28..2bae5f9e84 100644
--- a/packages/components/timezone/timezone-option.component.html
+++ b/packages/components/timezone/timezone-option.component.html
@@ -1,16 +1,25 @@
@for (utcItem of timezone.offset | utcOffset | keyvalue; track utcItem) {
}
diff --git a/packages/components/timezone/timezone-option.component.ts b/packages/components/timezone/timezone-option.component.ts
index deba7a8308..d8ddc4454b 100644
--- a/packages/components/timezone/timezone-option.component.ts
+++ b/packages/components/timezone/timezone-option.component.ts
@@ -9,7 +9,7 @@ import {
viewChild,
ViewEncapsulation
} from '@angular/core';
-import { KbqHighlightPipe, KbqOption } from '@koobiq/components/core';
+import { KbqHighlightBackgroundPipe, KbqOption } from '@koobiq/components/core';
import { CitiesByFilterPipe } from './cities-by-filter.pipe';
import { KbqTimezoneZone } from './timezone.models';
import { offsetFormatter } from './timezone.utils';
@@ -20,7 +20,7 @@ import { UtcOffsetPipe } from './utc-offset.pipe';
imports: [
UtcOffsetPipe,
KeyValuePipe,
- KbqHighlightPipe,
+ KbqHighlightBackgroundPipe,
CitiesByFilterPipe
],
templateUrl: 'timezone-option.component.html',
diff --git a/packages/docs-examples/components/autocomplete/autocomplete-overview/autocomplete-overview-example.ts b/packages/docs-examples/components/autocomplete/autocomplete-overview/autocomplete-overview-example.ts
index 2600ee3648..642ac586d8 100644
--- a/packages/docs-examples/components/autocomplete/autocomplete-overview/autocomplete-overview-example.ts
+++ b/packages/docs-examples/components/autocomplete/autocomplete-overview/autocomplete-overview-example.ts
@@ -2,7 +2,7 @@ import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { KbqAutocompleteModule } from '@koobiq/components/autocomplete';
-import { KbqFormsModule } from '@koobiq/components/core';
+import { KbqFormsModule, KbqHighlightBackgroundPipe } from '@koobiq/components/core';
import { KbqInputModule } from '@koobiq/components/input';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
@@ -17,7 +17,8 @@ import { map, startWith } from 'rxjs/operators';
KbqInputModule,
ReactiveFormsModule,
AsyncPipe,
- KbqFormsModule
+ KbqFormsModule,
+ KbqHighlightBackgroundPipe
],
template: `