chore(demo): standalone (#7558)

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

@@ -296,42 +296,32 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Expand,
-        loadChildren: async () =>
-            (await import('../components/expand/expand.module')).ExampleTuiExpandModule,
+        loadComponent: async () => import('../components/expand'),
         title: 'Expand',
     }),
     route({
         path: DemoRoute.ElasticContainer,
-        loadChildren: async () =>
-            (await import('../components/elastic-container/elastic-container.module'))
-                .ExampleTuiElasticContainerModule,
+        loadComponent: async () => import('../components/elastic-container'),
         title: 'ElasticContainer',
     }),
     route({
         path: DemoRoute.FieldError,
-        loadChildren: async () =>
-            (await import('../pipes/field-error/field-error.module'))
-                .ExampleTuiFieldErrorModule,
+        loadComponent: async () => import('../pipes/field-error'),
         title: 'FieldError',
     }),
     route({
         path: DemoRoute.InputFiles,
-        loadChildren: async () =>
-            (await import('../components/input-files/input-files.module'))
-                .ExampleTuiFilesModule,
+        loadComponent: async () => import('../components/input-files'),
         title: 'InputFiles',
     }),
     route({
         path: DemoRoute.Group,
-        loadChildren: async () =>
-            (await import('../components/group/group.module')).ExampleTuiGroupModule,
+        loadComponent: async () => import('../components/group'),
         title: 'Group',
     }),
     route({
         path: DemoRoute.HostedDropdown,
-        loadChildren: async () =>
-            (await import('../components/hosted-dropdown/hosted-dropdown.module'))
-                .ExampleTuiHostedDropdownModule,
+        loadComponent: async () => import('../components/hosted-dropdown'),
         title: 'HostedDropdown',
     }),
     route({
@@ -341,36 +331,27 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.DropdownOpen,
-        loadChildren: async () =>
-            (await import('../directives/dropdown-open/dropdown-open.module'))
-                .ExampleTuiDropdownOpenModule,
+        loadComponent: async () => import('../directives/dropdown-open'),
         title: 'DropdownOpen',
     }),
     route({
         path: DemoRoute.DropdownContext,
-        loadChildren: async () =>
-            (await import('../directives/dropdown-context/dropdown-context.module'))
-                .ExampleTuiDropdownContextModule,
+        loadComponent: async () => import('../directives/dropdown-context'),
         title: 'DropdownContext',
     }),
     route({
         path: DemoRoute.DropdownHover,
-        loadChildren: async () =>
-            (await import('../directives/dropdown-hover/dropdown-hover.module'))
-                .ExampleTuiDropdownHoverModule,
+        loadComponent: async () => import('../directives/dropdown-hover'),
         title: 'DropdownHover',
     }),
     route({
         path: DemoRoute.DropdownSelection,
-        loadChildren: async () =>
-            (await import('../directives/dropdown-selection/dropdown-selection.module'))
-                .ExampleTuiDropdownSelectionModule,
+        loadComponent: async () => import('../directives/dropdown-selection'),
         title: 'DropdownSelection',
     }),
     route({
         path: DemoRoute.Fade,
-        loadChildren: async () =>
-            (await import('../directives/fade/fade.module')).ExampleTuiFadeDirective,
+        loadComponent: async () => import('../directives/fade'),
         title: 'Fade',
     }),
     route({
@@ -930,16 +911,12 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.HintPointer,
-        loadChildren: async () =>
-            (await import('../directives/hint-pointer/hint-pointer.module'))
-                .ExampleTuiHintPointerModule,
+        loadComponent: async () => import('../directives/hint-pointer'),
         title: 'HintPointer',
     }),
     route({
         path: DemoRoute.LazyLoading,
-        loadChildren: async () =>
-            (await import('../directives/lazy-loading/lazy-loading.module'))
-                .ExampleTuiLazyLoadingModule,
+        loadComponent: async () => import('../directives/lazy-loading'),
         title: 'LazyLoading',
     }),
     route({
@@ -969,9 +946,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Present,
-        loadChildren: async () =>
-            (await import('../directives/present/present.module'))
-                .ExampleTuiPresentDirective,
+        loadComponent: async () => import('../directives/present'),
         title: 'Present',
     }),
     route({
@@ -1016,9 +991,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Validator,
-        loadChildren: async () =>
-            (await import('../directives/validator/validator.module'))
-                .ExampleTuiValidatorModule,
+        loadComponent: async () => import('../directives/validator'),
         title: 'Validator',
     }),
     route({
@@ -1028,8 +1001,7 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.Media,
-        loadChildren: async () =>
-            (await import('../directives/media/media.module')).ExampleTuiMediaModule,
+        loadComponent: async () => import('../directives/media'),
         title: 'Media',
     }),
     route({
@@ -1039,16 +1011,13 @@ export const ROUTES: Routes = [
     }),
     route({
         path: DemoRoute.AutoFocus,
-        loadChildren: async () =>
-            (await import('../directives/auto-focus/auto-focus.module'))
-                .ExampleTuiAutoFocusModule,
+        loadComponent: async () => import('../directives/auto-focus'),
         title: 'AutoFocus',
     }),
     // PIPES
     route({
         path: DemoRoute.Currency,
-        loadChildren: async () =>
-            (await import('../pipes/currency/currency.module')).ExampleTuiCurrencyModule,
+        loadComponent: async () => import('../pipes/currency'),
         title: 'Currency',
     }),
     route({

projects/demo/src/modules/components/elastic-container/examples/1/index.ts

@@ -1,14 +1,17 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiLinkDirective} from '@taiga-ui/core';
+import {TuiElasticContainerModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-elastic-container-example-1',
+    standalone: true,
+    imports: [TuiElasticContainerModule, TuiLinkDirective],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiElasticContainerExample1 {
+export default class ExampleComponent {
     protected readonly more =
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis ipsum in elit mattis consectetur. Maecenas venenatis ligula libero, lobortis rhoncus eros aliquam a. Vivamus blandit scelerisque urna, eu euismod ipsum ultricies non. Aenean fringilla tincidunt luctus. Phasellus eleifend a enim vel aliquet. Donec accumsan orci ac nunc suscipit posuere in a turpis. Fusce hendrerit in lectus eu egestas. Donec nisl ipsum, faucibus sit amet elit eu, vehicula hendrerit purus. Duis tempus pulvinar pharetra. In volutpat, odio dictum ornare iaculis, arcu turpis blandit quam, sit amet malesuada nisl enim nec tortor. In eleifend arcu diam, ut dignissim risus elementum nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque pellentesque elit ac feugiat posuere. Aliquam diam ante, condimentum eget nisi nec, suscipit efficitur velit. Cras sed dolor eu tortor dapibus condimentum.';
 

projects/demo/src/modules/components/elastic-container/examples/2/index.ts

@@ -1,12 +1,14 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiElasticContainerModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-elastic-container-example-2',
+    standalone: true,
+    imports: [TuiElasticContainerModule],
     templateUrl: './index.html',
     styleUrls: ['index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiElasticContainerExample2 {}
+export default class ExampleComponent {}

projects/demo/src/modules/components/elastic-container/examples/3/index.ts

@@ -1,15 +1,19 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiRepeatTimesDirective} from '@taiga-ui/cdk';
+import {TuiButtonDirective} from '@taiga-ui/core';
+import {TuiElasticContainerModule} from '@taiga-ui/kit';
 
 @Component({
-    selector: 'tui-elastic-container-example-3',
+    standalone: true,
+    imports: [TuiElasticContainerModule, TuiRepeatTimesDirective, TuiButtonDirective],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiElasticContainerExample3 {
+export default class ExampleComponent {
     protected content = 1;
 
     protected add(): void {

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

@@ -1,16 +1,30 @@
+import {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 {tuiArrayRemove} from '@taiga-ui/cdk';
+import {TuiButtonDirective, TuiExpand} from '@taiga-ui/core';
+import {TuiChevronDirective, TuiElasticContainerModule} from '@taiga-ui/kit';
+import {TuiInputModule} from '@taiga-ui/legacy';
 
 @Component({
-    selector: 'tui-elastic-container-example-4',
+    standalone: true,
+    imports: [
+        TuiButtonDirective,
+        TuiElasticContainerModule,
+        NgForOf,
+        TuiChevronDirective,
+        TuiExpand,
+        TuiInputModule,
+        FormsModule,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiElasticContainerExample4 {
+export default class ExampleComponent {
     protected items = [
         {
             expanded: false,

projects/demo/src/modules/components/elastic-container/elastic-container.template.html → projects/demo/src/modules/components/elastic-container/index.html

@@ -9,40 +9,31 @@
         <tui-doc-example
             id="more"
             heading="Show more"
-            [content]="example1"
-        >
-            <tui-elastic-container-example-1 />
-        </tui-doc-example>
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample: 'html,ts'"
+        />
 
         <tui-doc-example
             id="contenteditable"
             heading="contenteditable"
-            [content]="example2"
-        >
-            <tui-elastic-container-example-2 />
-        </tui-doc-example>
+            [component]="2 | tuiComponent"
+            [content]="2 | tuiExample"
+        />
 
         <tui-doc-example
             id="dynamic"
             heading="Add and remove content"
-            [content]="example3"
-        >
-            <tui-elastic-container-example-3 />
-        </tui-doc-example>
+            [component]="3 | tuiComponent"
+            [content]="3 | tuiExample"
+        />
 
         <tui-doc-example
             id="expand"
             heading="With animations inside"
-            [content]="example4"
-        >
-            <tui-elastic-container-example-4 />
-        </tui-doc-example>
-    </ng-template>
-
-    <ng-template pageTab="Setup">
-        <tui-setup
-            [import]="exampleModule"
-            [template]="exampleHtml"
+            [component]="4 | tuiComponent"
+            [content]="4 | tuiExample"
         />
     </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
 </tui-doc-page>

projects/demo/src/modules/components/elastic-container/index.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class PageComponent {}