feat(kit): Block add new component

projects/addon-doc/components/demo/demo.module.ts

@@ -16,9 +16,9 @@ import {
     TuiTooltipModule,
 } from '@taiga-ui/core';
 import {
+    TuiBlockDirective,
     TuiCheckboxLabeledModule,
     TuiDataListWrapperModule,
-    TuiRadioBlockModule,
     TuiSelectModule,
 } from '@taiga-ui/kit';
 
@@ -37,14 +37,14 @@ import {TuiDocDemoComponent} from './demo.component';
         TuiGroupDirective,
         TuiTooltipModule,
         TuiModeModule,
-        TuiRadioBlockModule,
         TuiCheckboxLabeledModule,
         TuiSvgModule,
         TuiDataListWrapperModule,
         TuiDataListModule,
         TuiTextfieldControllerModule,
         TuiHintModule,
         TuiResizerModule,
+        TuiBlockDirective,
     ],
     declarations: [TuiDocDemoComponent],
     exports: [TuiDocDemoComponent],

projects/addon-doc/components/demo/demo.template.html

@@ -39,39 +39,48 @@
             class="t-group"
             [collapsed]="true"
         >
-            <tui-radio-block
-                nativeId="form"
-                size="s"
+            <label
+                appearance=""
+                tuiBlock="s"
                 class="tui-group__auto-width-item"
-                [hideRadio]="true"
-                [item]="null"
-                [ngModel]="mode"
-                (ngModelChange)="onModeChange($event)"
             >
                 null
-            </tui-radio-block>
-            <tui-radio-block
-                item="onDark"
-                nativeId="form"
-                size="s"
+                <input
+                    tuiBlock
+                    type="radio"
+                    [ngModel]="mode"
+                    [value]="null"
+                    (ngModelChange)="onModeChange($event)"
+                />
+            </label>
+            <label
+                appearance=""
+                tuiBlock="s"
                 class="tui-group__auto-width-item"
-                [hideRadio]="true"
-                [ngModel]="mode"
-                (ngModelChange)="onModeChange($event)"
             >
                 onDark
-            </tui-radio-block>
-            <tui-radio-block
-                item="onLight"
-                nativeId="form"
-                size="s"
+                <input
+                    tuiBlock
+                    type="radio"
+                    value="onDark"
+                    [ngModel]="mode"
+                    (ngModelChange)="onModeChange($event)"
+                />
+            </label>
+            <label
+                appearance=""
+                tuiBlock="s"
                 class="tui-group__auto-width-item"
-                [hideRadio]="true"
-                [ngModel]="mode"
-                (ngModelChange)="onModeChange($event)"
             >
                 onLight
-            </tui-radio-block>
+                <input
+                    tuiBlock
+                    type="radio"
+                    value="onLight"
+                    [ngModel]="mode"
+                    (ngModelChange)="onModeChange($event)"
+                />
+            </label>
         </div>
     </ng-template>
     <tui-checkbox-labeled

projects/core/components/group/group.style.less

@@ -68,6 +68,10 @@
                 z-index: 6;
             }
 
+            &:has([tuiBlock]:checked) {
+                z-index: 6;
+            }
+
             &._focus-visible {
                 &._focused,
                 &._active,

projects/core/styles/theme/appearance/secondary.less

@@ -33,6 +33,18 @@
     background: transparent;
 }
 
+[tuiAppearance][data-appearance='flat']:checked {
+    background: var(--tui-secondary);
+
+    .appearance-hover({
+        background: var(--tui-secondary-hover);
+    });
+
+    .appearance-active({
+        background: var(--tui-secondary-active);
+    });
+}
+
 [tuiAppearance][data-appearance='destructive'] {
     color: var(--tui-negative);
 }

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

@@ -185,6 +185,14 @@ export const ROUTES: Routes = [
             title: 'BadgedContent',
         },
     },
+    {
+        path: 'components/block',
+        loadChildren: async () =>
+            (await import('../components/block/block.module')).ExampleTuiBlockModule,
+        data: {
+            title: 'Block',
+        },
+    },
     {
         path: 'layout/block-status',
         loadChildren: async () =>
@@ -505,15 +513,6 @@ export const ROUTES: Routes = [
             title: 'Checkbox',
         },
     },
-    {
-        path: 'components/checkbox-block',
-        loadChildren: async () =>
-            (await import('../components/checkbox-block/checkbox-block.module'))
-                .ExampleTuiCheckboxBlockModule,
-        data: {
-            title: 'CheckboxBlock',
-        },
-    },
     {
         path: 'components/checkbox-labeled',
         loadChildren: async () =>
@@ -993,15 +992,6 @@ export const ROUTES: Routes = [
             title: 'Radio',
         },
     },
-    {
-        path: 'components/radio-block',
-        loadChildren: async () =>
-            (await import('../components/radio-block/radio-block.module'))
-                .ExampleTuiRadioBlockModule,
-        data: {
-            title: 'RadioBlock',
-        },
-    },
     {
         path: 'components/radio-labeled',
         loadChildren: async () =>

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

@@ -181,6 +181,12 @@ export const pages: TuiDocPages = [
             },
         ],
     },
+    {
+        section: 'Components',
+        title: 'Block',
+        keywords: 'кнопка, чек, форма, form, ввод, checkbox, radio, радио, label',
+        route: '/components/block',
+    },
     {
         section: 'Layout',
         title: 'BlockStatus',
@@ -243,12 +249,6 @@ export const pages: TuiDocPages = [
                 keywords: 'чек, ввод, форма, form, checkbox',
                 route: '/components/checkbox',
             },
-            {
-                section: 'Components',
-                title: 'CheckboxBlock',
-                keywords: 'кнопка, чек, форма, form, ввод, checkbox, CheckboxBlock',
-                route: '/components/checkbox-block',
-            },
             {
                 section: 'Components',
                 title: 'CheckboxLabeled',
@@ -678,12 +678,6 @@ export const pages: TuiDocPages = [
                 keywords: 'инпут, форма, ввод, radio, радио',
                 route: '/components/radio',
             },
-            {
-                section: 'Components',
-                title: 'RadioBlock',
-                keywords: 'инпут, кнопка, форма, ввод, radio, радио, radio-boxed',
-                route: '/components/radio-block',
-            },
             {
                 section: 'Components',
                 title: 'RadioLabeled',

projects/demo/src/modules/components/block/block.component.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+
+@Component({
+    selector: 'example-tui-block',
+    templateUrl: './block.template.html',
+    changeDetection,
+})
+export class ExampleTuiBlockComponent {
+    protected readonly exampleModule = import('./examples/import/import-module.md?raw');
+    protected readonly exampleHtml = import('./examples/import/insert-template.md?raw');
+}

projects/demo/src/modules/components/block/block.module.ts

@@ -0,0 +1,48 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiExamplePipe} from '@demo/utils';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {TuiGroupDirective, TuiTooltipModule} from '@taiga-ui/core';
+import {
+    TuiCheckboxModule,
+    TuiFadeModule,
+    TuiIconModule,
+    TuiRadioModule,
+    TuiTitleModule,
+    TuiToggleModule,
+} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiBlockDirective} from '@taiga-ui/kit';
+
+import {ExampleTuiBlockComponent} from './block.component';
+import {TuiBlockExample1} from './examples/1';
+import {TuiBlockExample2} from './examples/2';
+import {TuiBlockExample3} from './examples/3';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiBlockDirective,
+        TuiGroupDirective,
+        TuiAvatarComponent,
+        TuiTooltipModule,
+        TuiCheckboxModule,
+        TuiRadioModule,
+        TuiFadeModule,
+        TuiTitleModule,
+        TuiToggleModule,
+        TuiIconModule,
+        TuiExamplePipe,
+        tuiGetDocModules(ExampleTuiBlockComponent),
+    ],
+    declarations: [
+        TuiBlockExample1,
+        TuiBlockExample2,
+        TuiBlockExample3,
+        ExampleTuiBlockComponent,
+    ],
+    exports: [ExampleTuiBlockComponent],
+})
+export class ExampleTuiBlockModule {}

projects/demo/src/modules/components/block/block.template.html

@@ -0,0 +1,58 @@
+<tui-doc-page
+    header="Block"
+    package="KIT"
+    type="components"
+>
+    <ng-template pageTab>
+        <p>
+            <code>Block</code>
+            is a special presentation of a checkbox/radiobutton which can display actual control or be a control itself
+        </p>
+
+        <tui-doc-example
+            id="sizes"
+            heading="Sizes"
+            [content]="1 | tuiExample: 'html'"
+        >
+            <tui-block-example-1></tui-block-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="groups"
+            heading="Groups"
+            [content]="2 | tuiExample: 'html'"
+        >
+            <tui-block-example-2></tui-block-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="custom"
+            heading="Custom"
+            [content]="3 | tuiExample: 'html'"
+        >
+            <tui-block-example-3></tui-block-example-3>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Add an import:</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/components/block/examples/1/index.html

@@ -0,0 +1,37 @@
+<form [formGroup]="testForm">
+    <label tuiBlock="xs">
+        Grapes
+        <input
+            formControlName="testValue1"
+            size="s"
+            tuiCheckbox
+            type="checkbox"
+        />
+    </label>
+    <label tuiBlock="s">
+        Qiwi
+        <input
+            formControlName="testValue2"
+            size="s"
+            tuiCheckbox
+            type="checkbox"
+        />
+    </label>
+    <label tuiBlock="m">
+        Oranges
+        <input
+            formControlName="testValue3"
+            size="s"
+            tuiCheckbox
+            type="checkbox"
+        />
+    </label>
+    <label tuiBlock>
+        Watermelons
+        <input
+            formControlName="testValue4"
+            tuiCheckbox
+            type="checkbox"
+        />
+    </label>
+</form>

projects/demo/src/modules/components/block/examples/1/index.less

@@ -0,0 +1,6 @@
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+}