fix(overflow-items): debounceTime attribute default value (#DS-3788) (#801)

Author: artembelik

packages/components/overflow-items/overflow-items.en.md

@@ -9,8 +9,13 @@ Configurable via the `reverseOverflowOrder` attribute.
 
 <!-- example(overflow-items-overview) -->
 
-### Order of Hiding
+### Order of hiding
 
 The order in which elements are hidden is determined using the `order` attribute for the `KbqOverflowItem` directive.
 
 <!-- example(overflow-items-with-order) -->
+
+### Delay when hiding/showing
+
+The delay for hiding/showing elements is set using the `debounceTime` attribute. Enabling this option positively
+affects performance when there are many elements or when the container size changes frequently.

packages/components/overflow-items/overflow-items.ru.md

@@ -14,3 +14,8 @@
 Порядок скрываемых элементов задается с помощью атрибута `order` для директивы `KbqOverflowItem`.
 
 <!-- example(overflow-items-with-order) -->
+
+### Задержка при скрытии/отображении
+
+Задержка скрытия/отображения элементов задается с помощью атрибута `debounceTime`. Включение этой опции позитивно
+сказывается на производительности при большом количестве элементов, либо при частых изменениях размера контейнера.

packages/components/overflow-items/overflow-items.ts

@@ -137,9 +137,9 @@ export class KbqOverflowItems {
     /**
      * Debounce time for recalculating items visibility.
      *
-     * @default 100
+     * @default 0
      */
-    readonly debounceTime = input(100, { transform: numberAttribute });
+    readonly debounceTime = input(0, { transform: numberAttribute });
 
     /**
      * Emits when the set of hidden items changes.

packages/docs-examples/components/overflow-items/overflow-items-overview/overflow-items-overview-example.ts

@@ -25,12 +25,7 @@ import { KbqToggleModule } from '@koobiq/components/toggle';
             Reverse overflow order
         </kbq-toggle>
 
-        <div
-            #kbqOverflowItems="kbqOverflowItems"
-            [reverseOverflowOrder]="reverseOverflowOrder()"
-            [debounceTime]="0"
-            kbqOverflowItems
-        >
+        <div #kbqOverflowItems="kbqOverflowItems" [reverseOverflowOrder]="reverseOverflowOrder()" kbqOverflowItems>
             @if (reverseOverflowOrder()) {
                 <div class="layout-margin-right-xs" kbqOverflowItemsResult>
                     and {{ kbqOverflowItems.hiddenItemIDs().size }} more

packages/docs-examples/components/overflow-items/overflow-items-with-order/overflow-items-with-order-example.ts

@@ -15,7 +15,7 @@ import { KbqOverflowItemsModule } from '@koobiq/components/overflow-items';
     ],
     selector: 'overflow-items-with-order-example',
     template: `
-        <div #kbqOverflowItemsReverse="kbqOverflowItems" [debounceTime]="0" reverseOverflowOrder kbqOverflowItems>
+        <div #kbqOverflowItemsReverse="kbqOverflowItems" reverseOverflowOrder kbqOverflowItems>
             <kbq-badge class="layout-margin-right-xs" [kbqOverflowItem]="items[0]" [order]="items.length">
                 {{ items[0] }}
             </kbq-badge>

packages/docs-examples/components/top-bar/top-bar-breadcrumbs-adaptive/top-bar-breadcrumbs-adaptive-example.ts

@@ -25,11 +25,11 @@ const ExampleLocalizedData = new InjectionToken<Record<string | 'default', Examp
         factory: () => ({
             'ru-RU': {
                 breadcrumbShortening:
-                    'За основу берется автоматическое сокращение хлебных крошек, когда средние пункты скрываются при отсутсвии свободного пространства.',
+                    'За основу берется автоматическое сокращение хлебных крошек, когда средние пункты скрываются при отсутствии свободного пространства.',
                 leftmostHidden:
-                    'Если пространство становится еще уже, то скрывается и левый крайний уровень 
у хлебных крошек, оставляя видимым только крайний правый уровень.',
+                    'Если пространство становится еще уже, то скрывается и левый крайний уровень у хлебных крошек, оставляя видимым только крайний правый уровень.',
                 currentItemTruncation:
-                    'Минимальная ширина левой стороны зависит от заголовка текущего пункта, 
который может быть обрезан до 3 символов с добавлением трех точек (…).',
+                    'Минимальная ширина левой стороны зависит от заголовка текущего пункта, который может быть обрезан до 3 символов с добавлением трех точек (…).',
                 rightSideCompression:
                     'После достижения минимальной ширины у левой стороны можно приступить к сжатию правой стороны с действиями. '
             } satisfies ExampleLocalizedText,
@@ -91,13 +91,7 @@ const ExampleLocalizedData = new InjectionToken<Record<string | 'default', Examp
                 </nav>
             </div>
             <div kbqTopBarSpacer></div>
-            <div
-                #kbqOverflowItems="kbqOverflowItems"
-                [debounceTime]="0"
-                kbqOverflowItems
-                kbqTopBarContainer
-                placement="end"
-            >
+            <div #kbqOverflowItems="kbqOverflowItems" kbqOverflowItems kbqTopBarContainer placement="end">
                 <button
                     [kbqStyle]="KbqButtonStyles.Transparent"
                     [color]="KbqComponentColors.Contrast"