feat(kit): ButtonSelect add new directive (#8559)

Co-authored-by: taiga-family-bot <[email protected]>

projects/addon-table/components/table/caption/caption.component.ts

@@ -0,0 +1,11 @@
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    standalone: true,
+    selector: 'caption[tuiCaption]',
+    template: '<ng-content/>',
+    styleUrls: ['./caption.style.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TuiTableCaption {}

projects/addon-table/components/table/caption/caption.style.less

@@ -0,0 +1,16 @@
+caption[tuiCaption] {
+    caption-side: bottom;
+    text-align: left;
+    padding: 0.75rem 0;
+    color: var(--tui-text-secondary);
+
+    > *:not(:first-child) {
+        margin-inline-start: 0.5rem;
+    }
+
+    tui-pagination:not(:first-child),
+    tui-pager:not(:first-child) {
+        display: inline-flex;
+        vertical-align: middle;
+    }
+}

projects/addon-table/components/table/directives/table.directive.ts

@@ -14,6 +14,7 @@ import {
 import {WA_INTERSECTION_ROOT_MARGIN} from '@ng-web-apis/intersection-observer';
 import type {TuiComparator} from '@taiga-ui/addon-table/types';
 import {tuiProvide, tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';
+import {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button';
 import type {TuiTextfieldOptions} from '@taiga-ui/core/components/textfield';
 import {TUI_TEXTFIELD_OPTIONS} from '@taiga-ui/core/components/textfield';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
@@ -46,6 +47,7 @@ class TuiTableStyles {}
             useValue: '10000px 10000px 10000px 0px',
         },
         tuiProvide(TUI_TEXTFIELD_OPTIONS, TuiTableDirective),
+        tuiButtonOptionsProvider({size: 's'}),
         tuiBadgeOptionsProvider({size: 'm', appearance: 'neutral'}),
         tuiChipOptionsProvider({size: 'xxs', appearance: 'neutral'}),
         tuiProgressOptionsProvider({size: 's', color: 'var(--tui-text-action)'}),

projects/addon-table/components/table/index.ts

@@ -1,3 +1,4 @@
+export * from './caption/caption.component';
 export * from './directives/cell.directive';
 export * from './directives/direction-order.directive';
 export * from './directives/head.directive';

projects/addon-table/components/table/table.ts

@@ -1,3 +1,4 @@
+import {TuiTableCaption} from './caption/caption.component';
 import {TuiTableCell} from './directives/cell.directive';
 import {TuiTableDirectionOrder} from './directives/direction-order.directive';
 import {TuiTableHead} from './directives/head.directive';
@@ -15,6 +16,7 @@ import {TuiTableTr} from './tr/tr.component';
 
 export const TuiTable = [
     TuiTableDirective,
+    TuiTableCaption,
     TuiTableTbody,
     TuiTableThGroup,
     TuiTableTh,

projects/addon-table/components/table/tbody/tbody.component.ts

@@ -53,11 +53,6 @@ export class TuiTableTbody<T extends Partial<Record<keyof T, any>>> {
     @Output()
     public readonly openChange = new EventEmitter<boolean>();
 
-    protected readonly toContext = (
-        $implicit: T,
-        index: number,
-    ): {$implicit: T; index: number} => ({$implicit, index});
-
     protected onClick(): void {
         this.open = !this.open;
         this.openChange.emit(this.open);

projects/demo/src/modules/components/table/examples/7/index.html

@@ -0,0 +1,38 @@
+<table
+    tuiTable
+    [style.width.rem]="36"
+>
+    <caption tuiCaption>
+        <span>999 rows</span>
+        <button
+            appearance="flat"
+            tuiButton
+            tuiButtonSelect
+            [(ngModel)]="size"
+        >
+            {{ index * size + 1 }}-{{ (index + 1) * size }} rows
+            <tui-data-list-wrapper
+                *tuiTextfieldDropdown
+                [itemContent]="content"
+                [items]="items"
+            />
+        </button>
+        <tui-pagination
+            [length]="length"
+            [style.float]="'right'"
+            [(index)]="index"
+        />
+    </caption>
+    <thead>
+        <tr tuiThGroup>
+            <th tuiTh>Name</th>
+            <th tuiTh>Balance</th>
+        </tr>
+    </thead>
+    <tbody tuiTbody>
+        <tr *ngFor="let item of data">
+            <td tuiTd>{{ item.name }}</td>
+            <td tuiTd>{{ item.balance | tuiFormatNumber | async }}</td>
+        </tr>
+    </tbody>
+</table>

projects/demo/src/modules/components/table/examples/7/index.ts

@@ -0,0 +1,48 @@
+import {AsyncPipe, NgForOf} from '@angular/common';
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiTable} from '@taiga-ui/addon-table';
+import type {TuiContext, TuiStringHandler} from '@taiga-ui/cdk';
+import {TuiButton, TuiFormatNumberPipe, TuiTextfield} from '@taiga-ui/core';
+import {TuiButtonSelect, TuiDataListWrapper, TuiPagination} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [
+        NgForOf,
+        AsyncPipe,
+        FormsModule,
+        TuiTable,
+        TuiFormatNumberPipe,
+        TuiButton,
+        TuiButtonSelect,
+        TuiPagination,
+        TuiDataListWrapper,
+        TuiTextfield,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly data = [
+        {
+            name: 'Alex Inkin',
+            balance: 1323525,
+        },
+        {
+            name: 'Roman Sedov',
+            balance: 423242,
+        },
+    ] as const;
+
+    protected index = 4;
+    protected length = 10;
+    protected size = 10;
+    protected readonly items = [10, 50, 100];
+    protected readonly content: TuiStringHandler<TuiContext<number>> = ({$implicit}) =>
+        `${$implicit} items per page`;
+}

projects/demo/src/modules/components/table/index.ts

@@ -18,5 +18,6 @@ export default class Page {
         'With tuiSortBy directive to work with column titles instead of sorters',
         'Virtual scroll',
         'Dynamic columns',
+        'Footer',
     ];
 }

projects/kit/components/pagination/pagination.component.ts

@@ -267,7 +267,7 @@ export class TuiPagination {
 
     private tryChangeTo(direction: TuiHorizontalDirection): void {
         this.updateIndex(
-            tuiClamp(this.index + (direction === 'right' ? -1 : 1), 0, this.lastIndex),
+            tuiClamp(this.index + (direction === 'right' ? 1 : -1), 0, this.lastIndex),
         );
     }
 

projects/kit/components/pagination/pagination.style.less

@@ -17,6 +17,14 @@
     margin: 0 0.125rem;
     flex-shrink: 0;
 
+    &:first-child {
+        margin-inline-start: 0;
+    }
+
+    &:last-child {
+        margin-inline-end: 0;
+    }
+
     &[data-size='xs'] {
         width: var(--tui-height-xs);
     }
@@ -40,10 +48,16 @@
     line-height: var(--tui-height-s);
     margin: 0 0.125rem;
     flex-shrink: 0;
-    color: var(--tui-text-tertiary);
+    color: var(--tui-text-action);
     text-align: center;
     cursor: default;
 
+    &_small {
+        width: var(--tui-height-xs);
+        height: var(--tui-height-xs);
+        line-height: var(--tui-height-xs);
+    }
+
     &::before {
         content: '\2026';
     }

projects/kit/components/pagination/pagination.template.html

@@ -73,6 +73,7 @@
         <div
             automation-id="tui-pagination__element"
             class="t-dots"
+            [class.t-dots_small]="size === 'm'"
         ></div>
     </ng-template>
 </div>

projects/kit/directives/button-select/button-select.directive.ts

@@ -0,0 +1,35 @@
+import {Directive} from '@angular/core';
+import {TuiControl} from '@taiga-ui/cdk/classes';
+import {tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous';
+import {
+    TUI_DATA_LIST_HOST,
+    type TuiDataListHost,
+} from '@taiga-ui/core/components/data-list';
+import {TuiWithTextfieldDropdown} from '@taiga-ui/core/components/textfield';
+import {
+    TuiDropdownDirective,
+    tuiDropdownOpen,
+    tuiDropdownOptionsProvider,
+    TuiWithDropdownOpen,
+} from '@taiga-ui/core/directives/dropdown';
+
+@Directive({
+    standalone: true,
+    selector: 'button[tuiButtonSelect]',
+    providers: [
+        // TODO: Add checkmark once we properly implement new Select, then add to demo
+        tuiProvide(TUI_DATA_LIST_HOST, TuiButtonSelect),
+        tuiDropdownOptionsProvider({align: 'right'}),
+    ],
+    hostDirectives: [TuiDropdownDirective, TuiWithDropdownOpen, TuiWithTextfieldDropdown],
+})
+export class TuiButtonSelect<T> extends TuiControl<T> implements TuiDataListHost<T> {
+    private readonly open = tuiDropdownOpen();
+
+    public readonly size = 's';
+
+    public handleOption(option: T): void {
+        this.onChange(option);
+        this.open.set(false);
+    }
+}

projects/kit/directives/button-select/index.ts

@@ -0,0 +1 @@
+export * from './button-select.directive';

projects/kit/directives/button-select/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

projects/kit/directives/index.ts

@@ -1,5 +1,6 @@
 export * from '@taiga-ui/kit/directives/button-close';
 export * from '@taiga-ui/kit/directives/button-group';
+export * from '@taiga-ui/kit/directives/button-select';
 export * from '@taiga-ui/kit/directives/chevron';
 export * from '@taiga-ui/kit/directives/connected';
 export * from '@taiga-ui/kit/directives/data-list-dropdown-manager';