feat(experimental): ActionBar add new component

projects/demo/src/modules/app/app.routes.ts

@@ -215,6 +215,15 @@ export const ROUTES: Routes = [
             title: 'Amount ',
         },
     },
+    {
+        path: 'experimental/action-bar',
+        loadChildren: async () =>
+            (await import('../experimental/action-bar/action-bar.module'))
+                .ExampleTuiActionBarModule,
+        data: {
+            title: 'ActionBar',
+        },
+    },
     {
         path: 'experimental/app-bar',
         loadChildren: async () =>

projects/demo/src/modules/app/pages.ts

@@ -872,6 +872,12 @@ export const pages: TuiDocPages = [
         keywords: 'mobile, ios, android, header, bar, navigation',
         route: '/experimental/app-bar',
     },
+    {
+        section: 'Experimental',
+        title: 'ActionBar',
+        keywords: 'bar, action, tablebar, бар, multi',
+        route: '/experimental/action-bar',
+    },
     {
         section: 'Experimental',
         title: 'Avatar ',

projects/demo/src/modules/experimental/action-bar/action-bar.component.ts

@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-tui-action-bar',
+    templateUrl: './action-bar.template.html',
+    changeDetection,
+})
+export class ExampleTuiActionBarComponent {
+    readonly exampleModule = import('./examples/import/import-module.md?raw');
+    readonly exampleHtml = import('./examples/import/insert-template.md?raw');
+
+    readonly example1: TuiDocExample = {
+        HTML: import('./examples/1/index.html?raw'),
+        LESS: import('./examples/1/index.less?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        HTML: import('./examples/2/index.html?raw'),
+        LESS: import('./examples/2/index.less?raw'),
+    };
+}

projects/demo/src/modules/experimental/action-bar/action-bar.module.ts

@@ -0,0 +1,43 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+import {TuiLetModule} from '@taiga-ui/cdk';
+import {
+    TuiDataListModule,
+    TuiLinkModule,
+    TuiModeModule,
+    TuiNotificationModule,
+} from '@taiga-ui/core';
+import {TuiActionBarModule, TuiButtonModule, TuiIconModule} from '@taiga-ui/experimental';
+import {TuiFilterModule} from '@taiga-ui/kit';
+
+import {ExampleTuiActionBarComponent} from './action-bar.component';
+import {TuiActionBarExample1} from './examples/1';
+import {TuiActionBarExample2} from './examples/2';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiButtonModule,
+        TuiNotificationModule,
+        TuiActionBarModule,
+        TuiAddonDocModule,
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiActionBarComponent)),
+        ReactiveFormsModule,
+        TuiFilterModule,
+        TuiIconModule,
+        TuiDataListModule,
+        TuiLetModule,
+        TuiLinkModule,
+        TuiModeModule,
+    ],
+    declarations: [
+        ExampleTuiActionBarComponent,
+        TuiActionBarExample1,
+        TuiActionBarExample2,
+    ],
+    exports: [ExampleTuiActionBarComponent],
+})
+export class ExampleTuiActionBarModule {}

projects/demo/src/modules/experimental/action-bar/action-bar.template.html

@@ -0,0 +1,56 @@
+<tui-doc-page
+    header="ActionBar"
+    package="EXPERIMENTAL"
+    type="components"
+>
+    <ng-template pageTab>
+        <tui-notification status="warning">
+            This code is
+            <strong>experimental</strong>
+            and is a subject to change. Expect final solution to be shipped in the next major version
+        </tui-notification>
+
+        <p>
+            It is an element on the bottom of screen to show actions by multiselect of some items. It works with custom
+            content.
+        </p>
+
+        <tui-doc-example
+            id="base"
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-action-bar-example-1></tui-action-bar-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="customization"
+            heading="Customization"
+            [content]="example2"
+        >
+            <tui-action-bar-example-2></tui-action-bar-example-2>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import into module</p>
+
+                <tui-doc-code
+                    filename="my.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="my.component.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>

projects/demo/src/modules/experimental/action-bar/examples/1/index.html

@@ -0,0 +1,129 @@
+<tui-filter
+    size="s"
+    [formControl]="control"
+    [items]="items"
+></tui-filter>
+
+<ng-container *tuiLet="!!(isMobile$ | async) as isMobile">
+    <tui-action-bar
+        *tuiActionBar="open"
+        [expanded]="isMobile && expanded"
+    >
+        <tui-data-list role="menu">
+            <tui-opt-group>
+                <button
+                    role="menuitem"
+                    tuiOption
+                >
+                    <span>
+                        <tui-icon
+                            icon="tuiIconSendLarge"
+                            class="tui-space_right-3"
+                        ></tui-icon>
+                        Send
+                    </span>
+                </button>
+                <button
+                    role="menuitem"
+                    tuiOption
+                >
+                    <span>
+                        <tui-icon
+                            icon="tuiIconTrashLarge"
+                            class="tui-space_right-3"
+                        ></tui-icon>
+                        Delete
+                    </span>
+                </button>
+            </tui-opt-group>
+            <tui-opt-group>
+                <button
+                    role="menuitem"
+                    tuiOption
+                    [disabled]="selected === items.length"
+                    (click)="control.setValue(items)"
+                >
+                    <span>
+                        <tui-icon
+                            icon="tuiIconGridLarge"
+                            class="tui-space_right-3"
+                        ></tui-icon>
+                        Select all
+                    </span>
+                </button>
+                <button
+                    role="menuitem"
+                    tuiOption
+                    (click)="close()"
+                >
+                    <span>
+                        <tui-icon
+                            icon="tuiIconCloseLarge"
+                            class="tui-space_right-3"
+                        ></tui-icon>
+                        Select none and close
+                    </span>
+                </button>
+            </tui-opt-group>
+        </tui-data-list>
+
+        <div>
+            Selected: {{ selected }} of {{ items.length }}
+
+            <button
+                *ngIf="!isMobile"
+                appearance="icon"
+                tuiLink
+                tuiMode="onDark"
+                class="tui-space_left-3"
+                [pseudo]="true"
+                (click)="toggleSelect()"
+            >
+                {{ selected < items.length ? 'Select all' : 'Select none' }}
+            </button>
+        </div>
+
+        <button
+            appearance="glass"
+            iconLeft="tuiIconSend"
+            size="m"
+            tuiButton
+            [disabled]="expanded"
+        >
+            {{ isMobile ? '' : 'Send' }}
+        </button>
+        <button
+            *ngIf="!isMobile"
+            appearance="glass"
+            iconLeft="tuiIconTrashLarge"
+            size="m"
+            tuiButton
+            [disabled]="expanded"
+            (click)="close()"
+        >
+            Delete
+        </button>
+
+        <button
+            *ngIf="isMobile"
+            appearance="glass"
+            iconLeft="tuiIconMoreHorizontalLarge"
+            size="m"
+            tuiIconButton
+            (click)="expanded = !expanded"
+        >
+            More
+        </button>
+
+        <button
+            *ngIf="!isMobile"
+            appearance="icon"
+            iconLeft="tuiIconClose"
+            size="m"
+            tuiIconButton
+            (click)="close()"
+        >
+            Close
+        </button>
+    </tui-action-bar>
+</ng-container>

projects/demo/src/modules/experimental/action-bar/examples/1/index.less

@@ -0,0 +1,7 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+tui-app-bar {
+    box-shadow: var(--tui-shadow-navigation);
+    width: 20rem;
+    margin-bottom: 1rem;
+}

projects/demo/src/modules/experimental/action-bar/examples/1/index.ts

@@ -0,0 +1,46 @@
+import {Component, Inject} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiBreakpointService} from '@taiga-ui/core';
+import {map} from 'rxjs/operators';
+
+@Component({
+    selector: 'tui-action-bar-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiActionBarExample1 {
+    readonly items = ['one', 'two', 'three'];
+    readonly control = new FormControl([]);
+    expanded = false;
+
+    readonly isMobile$ = this.breakpointService.pipe(map(size => size === 'mobile'));
+
+    constructor(
+        @Inject(TuiBreakpointService) readonly breakpointService: TuiBreakpointService,
+    ) {}
+
+    get value(): string[] {
+        return this.control.value || [];
+    }
+
+    get open(): boolean {
+        return this.value.length > 0;
+    }
+
+    get selected(): number {
+        return this.value.length;
+    }
+
+    close(): void {
+        this.control.setValue([]);
+        this.expanded = false;
+    }
+
+    toggleSelect(): void {
+        this.control.setValue(this.selected < this.items.length ? this.items : []);
+    }
+}

projects/demo/src/modules/experimental/action-bar/examples/2/index.html

@@ -0,0 +1,22 @@
+<button
+    size="m"
+    tuiButton
+    type="button"
+    (click)="open$.next(true)"
+>
+    Show TableBar
+</button>
+
+<tui-action-bar *tuiActionBar="!!(open$ | async)">
+    <span>Table bar opened</span>
+
+    <button
+        appearance="glass"
+        size="m"
+        tuiButton
+        type="button"
+        (click)="open$.next(false)"
+    >
+        Close
+    </button>
+</tui-action-bar>

projects/demo/src/modules/experimental/action-bar/examples/2/index.less

@@ -0,0 +1,5 @@
+tui-action-bar {
+    background: var(--tui-support-13);
+    left: 3rem;
+    right: 3rem;
+}

projects/demo/src/modules/experimental/action-bar/examples/2/index.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {Subject} from 'rxjs';
+
+@Component({
+    selector: 'tui-action-bar-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiActionBarExample2 {
+    open$ = new Subject<boolean>();
+}

projects/demo/src/modules/experimental/action-bar/examples/import/import-module.md

@@ -0,0 +1,14 @@
+```ts
+import {TuiActionBarModule} from '@taiga-ui/experimental';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiActionBarModule,
+  ],
+  // ...
+})
+export class AppModule {}
+```