chore(demo): remove b-form global class (#6915)

(cherry picked from commit 63ed8a3)

projects/demo/src/modules/charts/arc-chart/examples/1/index.html

@@ -1,11 +1,12 @@
 <tui-input-number
     decimal="never"
-    class="b-form"
+    class="index-controller"
     [step]="1"
     [(ngModel)]="activeItemIndex"
 >
     activeItemIndex
 </tui-input-number>
+
 <div class="wrapper">
     <tui-arc-chart
         size="m"

projects/demo/src/modules/charts/arc-chart/examples/1/index.less

@@ -8,3 +8,7 @@
     --tui-chart-2: var(--tui-support-03);
     --tui-chart-3: var(--tui-support-09);
 }
+
+.index-controller {
+    max-width: 20rem;
+}

projects/demo/src/modules/charts/bar-chart/examples/2/index.html

@@ -28,7 +28,7 @@
 </div>
 
 <tui-select
-    class="b-form"
+    class="select"
     [(ngModel)]="appearance"
 >
     Hint appearance

projects/demo/src/modules/charts/bar-chart/examples/2/index.less

@@ -17,3 +17,7 @@
     display: flex;
     min-width: 31.25rem;
 }
+
+.select {
+    max-width: 20rem;
+}

projects/demo/src/modules/charts/line-days-chart/examples/1/index.html

@@ -1,4 +1,4 @@
-<p class="b-form">
+<p>
     <tui-input-date-range
         [maxLength]="maxLength"
         [(ngModel)]="range"

projects/demo/src/modules/charts/line-days-chart/examples/2/index.html

@@ -4,15 +4,14 @@
 </tui-notification>
 <p class="controls">
     <tui-input-date-range
-        class="b-form"
         [maxLength]="maxLength"
         [(ngModel)]="data"
         (ngModelChange)="onDataChange($event)"
     >
         Data
     </tui-input-date-range>
     <tui-input-date-range
-        class="b-form tui-space_left-4"
+        class="tui-space_left-4"
         [maxLength]="maxLength"
         [(ngModel)]="show"
     >

projects/demo/src/modules/charts/line-days-chart/examples/2/index.less

@@ -19,7 +19,7 @@
 .controls {
     display: flex;
 
-    .b-form {
+    tui-input-date-range {
         flex: 1;
     }
 }

projects/demo/src/modules/components/badge/examples/3/index.ts

@@ -2,13 +2,13 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiPlatformModule} from '@taiga-ui/cdk';
-import {TuiIconModule} from '@taiga-ui/experimental';
+import {TuiIconComponent} from '@taiga-ui/core';
 import {TuiBadgeDirective} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
     selector: 'tui-badge-example-3',
-    imports: [TuiBadgeDirective, TuiPlatformModule, TuiIconModule],
+    imports: [TuiBadgeDirective, TuiPlatformModule, TuiIconComponent],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

projects/demo/src/modules/components/block/examples/3/index.html

@@ -1,7 +1,4 @@
-<form
-    class="b-form"
-    [formGroup]="testForm"
->
+<form [formGroup]="testForm">
     <label tuiBlock>
         <tui-avatar src="https://avatars.githubusercontent.com/u/11832552"></tui-avatar>
         Heading

projects/demo/src/modules/components/breadcrumbs/examples/2/index.html

@@ -34,7 +34,6 @@
 </tui-breadcrumbs>
 <p>
     <tui-input-number
-        class="b-form"
         [max]="4"
         [min]="2"
         [step]="1"

projects/demo/src/modules/components/combo-box/combo-box.template.html

@@ -15,7 +15,7 @@
             heading="Async data loading"
             [content]="example1"
         >
-            <tui-notification class="tui-space_bottom-4 b-form">
+            <tui-notification class="tui-space_bottom-4">
                 If you need to set some attributes or listen to events on native
                 <code>input</code>
                 , you can put it inside with
@@ -38,7 +38,7 @@
             heading="ID only"
             [content]="example8"
         >
-            <tui-notification class="tui-space_bottom-4 b-form">
+            <tui-notification class="tui-space_bottom-4">
                 If you receive your id to text mapping from the server, you would need to recreate
                 <code>items</code>
                 and

projects/demo/src/modules/components/combo-box/examples/1/index.html

@@ -1,6 +1,5 @@
 <form
     *tuiLet="items$ | async as items"
-    class="b-form"
     [tuiTextfieldCleaner]="true"
 >
     <tui-combo-box

projects/demo/src/modules/components/combo-box/examples/2/index.html

@@ -3,7 +3,6 @@
 
     <tui-combo-box
         *tuiLet="service.request(search) | async as filtered"
-        class="b-form"
         [formControl]="control"
         [tuiTextfieldLabelOutside]="true"
         [valueContent]="value"

projects/demo/src/modules/components/combo-box/examples/3/index.html

@@ -1,7 +1,4 @@
-<tui-combo-box
-    class="b-form"
-    [(ngModel)]="value"
->
+<tui-combo-box [(ngModel)]="value">
     Find the best employees
     <input
         placeholder="Type a name"

projects/demo/src/modules/components/combo-box/examples/4/index.html

@@ -1,5 +1,4 @@
 <tui-combo-box
-    class="b-form"
     [stringify]="stringify"
     [(ngModel)]="value"
 >

projects/demo/src/modules/components/combo-box/examples/5/index.html

@@ -1,7 +1,4 @@
-<tui-combo-box
-    class="b-form"
-    [(ngModel)]="value"
->
+<tui-combo-box [(ngModel)]="value">
     Country
     <ng-container *tuiDataList>
         <cdk-virtual-scroll-viewport

projects/demo/src/modules/components/combo-box/examples/6/index.html

@@ -1,4 +1,4 @@
-<form class="b-form">
+<form>
     <tui-combo-box
         tuiTextfieldSize="m"
         [formControl]="testValue"

projects/demo/src/modules/components/elastic-container/examples/4/index.html

@@ -5,7 +5,7 @@
 >
     Add item
 </button>
-<tui-elastic-container class="b-form tui-space_top-4">
+<tui-elastic-container class="tui-space_top-4">
     <div
         *ngFor="let item of items; let index = index"
         class="wrapper"

projects/demo/src/modules/components/input-copy/examples/1/index.html

@@ -1,7 +1,4 @@
-<form
-    class="b-form"
-    [formGroup]="testForm"
->
+<form [formGroup]="testForm">
     <tui-input-copy
         formControlName="testValue"
         tuiTextfieldSize="s"

projects/demo/src/modules/components/input-copy/input-copy.template.html

@@ -11,7 +11,7 @@
             heading="sizes"
             [content]="example1"
         >
-            <tui-notification class="tui-space_bottom-4 b-form">
+            <tui-notification class="tui-space_bottom-4">
                 If you need to set some attributes or listen to events on native
                 <code>input</code>
                 , you can put it inside with

projects/demo/src/modules/components/input-date-range/examples/1/index.html

@@ -1,7 +1,4 @@
-<form
-    class="b-form"
-    [formGroup]="testForm"
->
+<form [formGroup]="testForm">
     <p>
         If a field is optional, but unfinished field should be marked as invalid, use
         <code>tuiUnfinishedValidator</code>

projects/demo/src/modules/components/input-date-range/examples/2/index.html

@@ -1,6 +1 @@
-<tui-input-date-range
-    class="b-form"
-    [formControl]="control"
->
-    Choose dates
-</tui-input-date-range>
+<tui-input-date-range [formControl]="control">Choose dates</tui-input-date-range>

projects/demo/src/modules/components/input-date-range/examples/3/index.html

@@ -1,6 +1 @@
-<tui-input-date-range
-    class="b-form"
-    [formControl]="control"
->
-    Choose dates
-</tui-input-date-range>
+<tui-input-date-range [formControl]="control">Choose dates</tui-input-date-range>

projects/demo/src/modules/components/input-date-range/examples/4/index.html

@@ -1,9 +1,4 @@
-<tui-input-date-range
-    class="b-form"
-    [formControl]="control"
->
-    Choose dates
-</tui-input-date-range>
+<tui-input-date-range [formControl]="control">Choose dates</tui-input-date-range>
 
 <p>Stringified control value:</p>
 <p>

projects/demo/src/modules/components/input-date-range/examples/5/index.html

@@ -1,5 +1,4 @@
 <tui-input-date-range
-    class="b-form"
     [formControl]="control"
     [items]="items"
 >

projects/demo/src/modules/components/input-date-range/input-date-range.template.html

@@ -82,7 +82,7 @@ <h3>DI-tokens for input-configurations:</h3>
             heading="Basic"
             [content]="example1"
         >
-            <tui-notification class="tui-space_bottom-4 b-form">
+            <tui-notification class="tui-space_bottom-4">
                 If you need to set some attributes or listen to events on native
                 <code>input</code>
                 , you can put it inside with

projects/demo/src/modules/components/input-date-time/examples/1/index.html

@@ -1,7 +1,4 @@
-<form
-    class="b-form"
-    [formGroup]="testForm"
->
+<form [formGroup]="testForm">
     <tui-input-date-time formControlName="testValue">
         Choose date and time
         <input

projects/demo/src/modules/components/input-date-time/examples/2/index.html

@@ -1,7 +1,4 @@
-<form
-    class="b-form"
-    [formGroup]="testForm"
->
+<form [formGroup]="testForm">
     <p>Default:</p>
 
     <tui-input-date-time

projects/demo/src/modules/components/input-date-time/examples/3/index.html

@@ -1,6 +1 @@
-<tui-input-date-time
-    class="b-form"
-    [formControl]="control"
->
-    Choose date and time
-</tui-input-date-time>
+<tui-input-date-time [formControl]="control">Choose date and time</tui-input-date-time>

projects/demo/src/modules/components/input-date-time/examples/4/index.html

@@ -1,9 +1,4 @@
-<tui-input-date-time
-    class="b-form"
-    [formControl]="control"
->
-    Choose date and time
-</tui-input-date-time>
+<tui-input-date-time [formControl]="control">Choose date and time</tui-input-date-time>
 
 <p>Stringified control value:</p>
 <p>

projects/demo/src/modules/components/input-date-time/examples/5/index.html

@@ -1,7 +1,4 @@
-<form
-    class="b-form"
-    [formGroup]="testForm"
->
+<form [formGroup]="testForm">
     <tui-input-date-time
         formControlName="testValue"
         [tuiTextfieldCleaner]="true"

projects/demo/src/modules/components/input-date-time/input-date-time.template.html

@@ -62,7 +62,7 @@ <h3>DI-tokens for input-configurations:</h3>
             heading="Basic"
             [content]="example1"
         >
-            <tui-notification class="tui-space_bottom-4 b-form">
+            <tui-notification class="tui-space_bottom-4">
                 If you need to set some attributes or listen to events on native
                 <code>input</code>
                 , you can put it inside with

projects/demo/src/modules/components/input-date/examples/1/index.html

@@ -1,5 +1,4 @@
 <form
-    class="b-form"
     [formGroup]="testForm"
     [tuiTextfieldCleaner]="true"
 >

projects/demo/src/modules/components/input-date/examples/2/index.html

@@ -1,7 +1,4 @@
-<form
-    class="b-form"
-    [formGroup]="testForm"
->
+<form [formGroup]="testForm">
     <tui-input-date
         formControlName="testValue"
         tuiTextfieldSize="s"

projects/demo/src/modules/components/input-date/examples/3/index.html

@@ -1,5 +1,5 @@
 <h2 class="tui-text_h4">Taiga UI usage experience</h2>
-<p class="b-form">
+<p>
     <tui-input-date
         [max]="max"
         [min]="min"
@@ -8,7 +8,7 @@ <h2 class="tui-text_h4">Taiga UI usage experience</h2>
         Start
     </tui-input-date>
 </p>
-<p class="b-form">
+<p>
     <tui-input-date
         [items]="items"
         [min]="from || min"

projects/demo/src/modules/components/input-date/examples/4/index.html

@@ -1,14 +1,11 @@
-<tui-notification class="tui-space_bottom-4 b-form">
+<tui-notification class="tui-space_bottom-4">
     If you need to set some attributes or listen to events on native
     <code>input</code>
     , you can put it inside with
     <code>Textfield</code>
     directive as shown below
 </tui-notification>
-<tui-input-date
-    class="b-form"
-    [formControl]="control"
->
+<tui-input-date [formControl]="control">
     Choose a date
     <input
         autocomplete="bday"

projects/demo/src/modules/components/input-date/examples/5/index.html

@@ -1,10 +1,5 @@
 <h3>Control's output as TuiDay (default)</h3>
-<tui-input-date
-    class="b-form"
-    [formControl]="defaultControl"
->
-    Choose a date
-</tui-input-date>
+<tui-input-date [formControl]="defaultControl">Choose a date</tui-input-date>
 <p>Stringified control value:</p>
 <p>
     <code>{{ defaultControl.value }}</code>
@@ -20,7 +15,6 @@ <h3>Control's output as native Date</h3>
 </p>
 <tui-input-date
     toNativeDate
-    class="b-form"
     [formControl]="nativeDateControl"
 >
     Choose a date

projects/demo/src/modules/components/input-date/examples/6/index.html

@@ -1,5 +1,4 @@
 <form
-    class="b-form"
     [formGroup]="testForm"
     [tuiTextfieldCleaner]="true"
 >

projects/demo/src/modules/components/input-month-range/examples/1/index.html

@@ -1,5 +1,4 @@
 <tui-input-month-range
-    class="b-form"
     [formControl]="control"
     [tuiTextfieldCleaner]="true"
 >

projects/demo/src/modules/components/input-month-range/examples/2/index.html

@@ -1,7 +1,4 @@
-<form
-    class="b-form"
-    [formGroup]="testForm"
->
+<form [formGroup]="testForm">
     <tui-input-month-range
         formControlName="testValue"
         tuiTextfieldSize="s"