feat(table): added mode disabling row hover bg-color (#DS-5234)

packages/components-dev/table/module.ts

@@ -2,10 +2,22 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
 import { KbqButtonModule } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
 import { KbqTableModule } from '@koobiq/components/table';
+import { TableDisableHoverExample } from 'packages/docs-examples/components/table';
+
+@Component({
+    selector: 'dev-examples',
+    imports: [TableDisableHoverExample],
+    template: `
+        <table-disable-hover-example />
+        <hr />
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DevDocsExamples {}
 
 @Component({
     selector: 'dev-app',
-    imports: [KbqTableModule, KbqButtonModule],
+    imports: [KbqTableModule, KbqButtonModule, DevDocsExamples],
     templateUrl: './template.html',
     styleUrls: ['./styles.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,

packages/components-dev/table/template.html

@@ -1,3 +1,5 @@
+<dev-examples />
+
 <div>default</div>
 <table kbq-table>
     <thead>

packages/components/table/_table-theme.scss

@@ -16,7 +16,11 @@
                 & > td {
                     color: var(--kbq-foreground-contrast);
                 }
+            }
+        }
 
+        &:not(.kbq-table_disable-hover) > tbody {
+            & > tr {
                 &.kbq-hovered td,
                 &:hover td {
                     background-color: var(--kbq-states-background-transparent-hover);

packages/components/table/e2e.ts

@@ -136,6 +136,28 @@ import { KbqTableModule } from '@koobiq/components/table';
                 </tbody>
             </table>
         </div>
+
+        <!-- disable hover -->
+        <div>
+            <table kbq-table disableHover>
+                <thead>
+                    <tr>
+                        @for (th of [0, 1, 2, 3]; track $index) {
+                            <th>Header</th>
+                        }
+                    </tr>
+                </thead>
+                <tbody>
+                    @for (tr of [0, 1]; track $index) {
+                        <tr [class.kbq-hovered]="$index === 1">
+                            @for (td of [0, 1, 2, 3]; track $index) {
+                                <td>Cell</td>
+                            }
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
     `,
     styles: `
         :host {

packages/components/table/table.component.ts

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, Directive, ViewEncapsulation, contentChild, input } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Directive,
+    ViewEncapsulation,
+    booleanAttribute,
+    contentChild,
+    input
+} from '@angular/core';
 import { KbqButton } from '@koobiq/components/button';
 
 @Component({
@@ -9,12 +17,14 @@ import { KbqButton } from '@koobiq/components/button';
     encapsulation: ViewEncapsulation.None,
     host: {
         class: 'kbq-table',
-        '[class.kbq-table_bordered]': 'border()'
+        '[class.kbq-table_bordered]': 'border()',
+        '[class.kbq-table_disable-hover]': 'disableHover()'
     },
     exportAs: 'kbqTable'
 })
 export class KbqTable {
-    readonly border = input<boolean>(false);
+    readonly border = input(false, { transform: booleanAttribute });
+    readonly disableHover = input(false, { transform: booleanAttribute });
 }
 
 @Directive({

packages/components/table/table.en.md

@@ -13,3 +13,9 @@ In most cases, borders should be avoided, but sometimes they help support the la
 Borders are also useful in tables with complex structures — for example, when rows are grouped or some cells are merged vertically.
 
 <!-- example(table-with-borders) -->
+
+### Disable hover
+
+Use `disableHover` to remove the background color change on row hover. This is useful when rows are not interactive and the hover highlight would be misleading.
+
+<!-- example(table-disable-hover) -->

packages/components/table/table.ru.md

@@ -13,3 +13,9 @@
 Также линейки полезны в таблицах со сложной структурой. Например, когда строки собраны в группы или некоторые ячейки объединены по вертикали.
 
 <!-- example(table-with-borders) -->
+
+### Отключение подсветки при наведении
+
+Если строки не являются интерактивными, подсветка при наведении может вводить в заблуждение. Атрибут `disableHover` позволяет убрать этот эффект.
+
+<!-- example(table-disable-hover) -->

packages/docs-examples/components/table/index.ts

@@ -1,14 +1,16 @@
 import { NgModule } from '@angular/core';
+import { TableDisableHoverExample } from './table-disable-hover/table-disable-hover-example';
 import { TableFullWidthExample } from './table-full-width/table-full-width-example';
 import { TableOverviewExample } from './table-overview/table-overview-example';
 import { TableWithBordersExample } from './table-with-borders/table-with-borders-example';
 
-export { TableFullWidthExample, TableOverviewExample, TableWithBordersExample };
+export { TableDisableHoverExample, TableFullWidthExample, TableOverviewExample, TableWithBordersExample };
 
 const EXAMPLES = [
     TableOverviewExample,
     TableWithBordersExample,
-    TableFullWidthExample
+    TableFullWidthExample,
+    TableDisableHoverExample
 ];
 
 @NgModule({

packages/docs-examples/components/table/table-disable-hover/table-disable-hover-example.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { KbqTableModule } from '@koobiq/components/table';
+
+/**
+ * @title Table without hover
+ */
+@Component({
+    selector: 'table-disable-hover-example',
+    imports: [KbqTableModule],
+    template: `
+        <table kbq-table disableHover>
+            <thead>
+                <tr>
+                    <th>File</th>
+                    <th>Owner</th>
+                    <th>Modified</th>
+                </tr>
+            </thead>
+            <tbody>
+                @for (row of rows; track row.name) {
+                    <tr>
+                        <td>{{ row.name }}</td>
+                        <td>{{ row.owner }}</td>
+                        <td>{{ row.modified }}</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TableDisableHoverExample {
+    protected readonly rows = [
+        { name: 'document.txt', owner: 'User 1', modified: '27 мая 2024' },
+        { name: 'report-2023.pdf', owner: 'User 2', modified: '1 дек 2023' },
+        { name: 'notes.doc', owner: 'User 3', modified: '7 мар 2024' },
+        { name: 'archive.zip', owner: 'User 4', modified: '24 авг 2022' }
+    ];
+}

tools/public_api_guard/components/table.api.md

@@ -12,9 +12,11 @@ import { KbqButton } from '@koobiq/components/button';
 // @public (undocumented)
 export class KbqTable {
     // (undocumented)
-    readonly border: i0.InputSignal<boolean>;
+    readonly border: i0.InputSignalWithTransform<boolean, unknown>;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["kbqTable"], { "border": { "alias": "border"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    readonly disableHover: i0.InputSignalWithTransform<boolean, unknown>;
+    // (undocumented)
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["kbqTable"], { "border": { "alias": "border"; "required": false; "isSignal": true; }; "disableHover": { "alias": "disableHover"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTable, never>;
 }