chore(demo): replaced global b-demo-steps class with tui-setup component

projects/demo/src/modules/charts/arc-chart/arc-chart.module.ts

@@ -2,6 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {TuiSetupComponent} from '@demo/utils';
 import {TuiArcChartModule} from '@taiga-ui/addon-charts';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
@@ -19,6 +20,7 @@ import {TuiArcChartExample2} from './examples/2';
         TuiAmountPipe,
         TuiArcChartModule,
         TuiAddonDocModule,
+        TuiSetupComponent,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiArcChartComponent)),
         TuiInputNumberModule,
     ],

projects/demo/src/modules/charts/arc-chart/arc-chart.template.html

@@ -89,28 +89,9 @@
     </ng-template>
 
     <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiArcChartModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
+        <tui-setup
+            [import]="exampleModule"
+            [template]="exampleHtml"
+        />
     </ng-template>
 </tui-doc-page>

projects/demo/src/modules/charts/axes/axes.module.ts

@@ -1,6 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
+import {TuiSetupComponent} from '@demo/utils';
 import {TuiAxesModule, TuiBarChartModule, TuiBarModule} from '@taiga-ui/addon-charts';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
@@ -25,6 +26,7 @@ import {TuiAxesExample3} from './examples/3';
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiAxesComponent)),
         TuiNotificationModule,
+        TuiSetupComponent,
     ],
     declarations: [
         ExampleTuiAxesComponent,

projects/demo/src/modules/charts/axes/axes.template.html

@@ -173,28 +173,9 @@
     </ng-template>
 
     <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiAxesModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
+        <tui-setup
+            [import]="exampleModule"
+            [template]="exampleHtml"
+        />
     </ng-template>
 </tui-doc-page>

projects/demo/src/modules/charts/bar-chart/bar-chart.module.ts

@@ -2,6 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {TuiSetupComponent} from '@demo/utils';
 import {TuiAxesModule, TuiBarChartModule} from '@taiga-ui/addon-charts';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiHintModule, TuiLinkDirective, TuiNotificationModule} from '@taiga-ui/core';
@@ -24,6 +25,7 @@ import {TuiBarChartExample2} from './examples/2';
         TuiDataListWrapperModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBarChartComponent)),
+        TuiSetupComponent,
     ],
     declarations: [ExampleTuiBarChartComponent, TuiBarChartExample1, TuiBarChartExample2],
     exports: [ExampleTuiBarChartComponent],

projects/demo/src/modules/charts/bar-chart/bar-chart.template.html

@@ -94,28 +94,9 @@
     </ng-template>
 
     <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiBarChartModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
+        <tui-setup
+            [import]="exampleModule"
+            [template]="exampleHtml"
+        />
     </ng-template>
 </tui-doc-page>

projects/demo/src/modules/charts/bar-set/bar-set.module.ts

@@ -1,6 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
+import {TuiSetupComponent} from '@demo/utils';
 import {TuiBarSetModule} from '@taiga-ui/addon-charts';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiFormatNumberPipeModule} from '@taiga-ui/core';
@@ -20,6 +21,7 @@ import {TuiBarSetExample5} from './examples/5';
         TuiFormatNumberPipeModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBarSetComponent)),
+        TuiSetupComponent,
     ],
     declarations: [
         ExampleTuiBarSetComponent,

projects/demo/src/modules/charts/bar-set/bar-set.template.html

@@ -90,28 +90,9 @@
     </ng-template>
 
     <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiBarSetModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
+        <tui-setup
+            [import]="exampleModule"
+            [template]="exampleHtml"
+        />
     </ng-template>
 </tui-doc-page>

projects/demo/src/modules/charts/bar/bar.module.ts

@@ -1,6 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
+import {TuiSetupComponent} from '@demo/utils';
 import {TuiBarModule} from '@taiga-ui/addon-charts';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 
@@ -15,6 +16,7 @@ import {TuiBarExample2} from './examples/2';
         TuiBarModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBarComponent)),
+        TuiSetupComponent,
     ],
     declarations: [ExampleTuiBarComponent, TuiBarExample1, TuiBarExample2],
     exports: [ExampleTuiBarComponent],

projects/demo/src/modules/charts/bar/bar.template.html

@@ -54,28 +54,9 @@
     </ng-template>
 
     <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiBarModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
+        <tui-setup
+            [import]="exampleModule"
+            [template]="exampleHtml"
+        />
     </ng-template>
 </tui-doc-page>

projects/demo/src/modules/charts/legend-item/legend-item.module.ts

@@ -1,6 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
+import {TuiSetupComponent} from '@demo/utils';
 import {TuiLegendItemModule, TuiRingChartModule} from '@taiga-ui/addon-charts';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
@@ -26,6 +27,7 @@ import {ExampleTuiLegendItemComponent} from './legend-item.component';
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiLegendItemComponent)),
         TuiAmountPipe,
         TuiCheckboxComponent,
+        TuiSetupComponent,
     ],
     declarations: [
         ExampleTuiLegendItemComponent,

projects/demo/src/modules/charts/legend-item/legend-item.template.html

@@ -86,28 +86,9 @@
     </ng-template>
 
     <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiBarModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
+        <tui-setup
+            [import]="exampleModule"
+            [template]="exampleHtml"
+        />
     </ng-template>
 </tui-doc-page>

projects/demo/src/modules/charts/line-chart/line-chart.module.ts

@@ -2,6 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {TuiSetupComponent} from '@demo/utils';
 import {TuiAxesModule, TuiLineChartModule} from '@taiga-ui/addon-charts';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiHintModule, TuiLinkDirective, TuiNotificationModule} from '@taiga-ui/core';
@@ -24,6 +25,7 @@ import {ExampleTuiLineChartComponent} from './line-chart.component';
         TuiLineChartModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiLineChartComponent)),
+        TuiSetupComponent,
     ],
     declarations: [
         ExampleTuiLineChartComponent,

projects/demo/src/modules/charts/line-chart/line-chart.template.html

@@ -163,28 +163,9 @@
     </ng-template>
 
     <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiLineChartModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
+        <tui-setup
+            [import]="exampleModule"
+            [template]="exampleHtml"
+        />
     </ng-template>
 </tui-doc-page>

projects/demo/src/modules/charts/line-days-chart/line-days-chart.module.ts

@@ -2,6 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {TuiSetupComponent} from '@demo/utils';
 import {
     TuiAxesModule,
     TuiLineChartModule,
@@ -31,6 +32,7 @@ import {ExampleTuiLineDaysChartComponent} from './line-days-chart.component';
         TuiInputDateRangeModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiLineDaysChartComponent)),
+        TuiSetupComponent,
     ],
     declarations: [
         ExampleTuiLineDaysChartComponent,

projects/demo/src/modules/charts/line-days-chart/line-days-chart.template.html

@@ -120,28 +120,9 @@
     </ng-template>
 
     <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>
-                    Import
-                    <code>TuiLineDaysChartModule</code>
-                    into a module where you want to use our component
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                />
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                />
-            </li>
-        </ol>
+        <tui-setup
+            [import]="exampleModule"
+            [template]="exampleHtml"
+        />
     </ng-template>
 </tui-doc-page>