diff --git a/.cspell.json b/.cspell.json index 9b04e9e5b156..0bf5e6c6c89e 100644 --- a/.cspell.json +++ b/.cspell.json @@ -21,7 +21,7 @@ "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"], "overrides": [ { - "filename": ["**/components/loader/loader.template.html"], + "filename": ["**/components/loader/index.html"], "ignoreWords": ["protestin", "spittin", "callin", "yellin"] }, { diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 4414f05f2adb..21038bbd4387 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -356,16 +356,12 @@ export const ROUTES: Routes = [ }), route({ path: DemoRoute.Sensitive, - loadChildren: async () => - (await import('../directives/sensitive/sensitive.module')) - .ExampleTuiSensitiveModule, + loadComponent: async () => import('../directives/sensitive'), title: 'Sensitive', }), route({ path: DemoRoute.Skeleton, - loadChildren: async () => - (await import('../directives/skeleton/skeleton.module')) - .ExampleTuiSkeletonModule, + loadComponent: async () => import('../directives/skeleton'), title: 'Skeleton', }), route({ @@ -385,9 +381,7 @@ export const ROUTES: Routes = [ }), route({ path: DemoRoute.InputDateMulti, - loadChildren: async () => - (await import('../components/input-date-multi/input-date-multi.module')) - .ExampleTuiInputDateMultiModule, + loadComponent: async () => import('../components/input-date-multi'), title: 'InputDateMulti', }), route({ @@ -402,9 +396,7 @@ export const ROUTES: Routes = [ }), route({ path: DemoRoute.InputCopy, - loadChildren: async () => - (await import('../components/input-copy/input-copy.module')) - .ExampleTuiInputCopyModule, + loadComponent: async () => import('../components/input-copy'), title: 'InputCopy', }), route({ @@ -522,8 +514,7 @@ export const ROUTES: Routes = [ }), route({ path: DemoRoute.Loader, - loadChildren: async () => - (await import('../components/loader/loader.module')).ExampleTuiLoaderModule, + loadComponent: async () => import('../components/loader'), title: 'Loader', }), route({ @@ -533,8 +524,7 @@ export const ROUTES: Routes = [ }), route({ path: DemoRoute.Push, - loadChildren: async () => - (await import('../components/push/push.module')).ExampleTuiPushModule, + loadComponent: async () => import('../components/push'), title: 'Push', }), route({ @@ -559,16 +549,12 @@ export const ROUTES: Routes = [ }), route({ path: DemoRoute.MultiSelect, - loadChildren: async () => - (await import('../components/multi-select/multi-select.module')) - .ExampleTuiMultiSelectModule, + loadComponent: async () => import('../components/multi-select'), title: 'MultiSelect', }), route({ path: DemoRoute.Pagination, - loadChildren: async () => - (await import('../components/pagination/pagination.module')) - .ExampleTuiPaginationModule, + loadComponent: async () => import('../components/pagination'), title: 'Pagination', }), route({ @@ -588,8 +574,7 @@ export const ROUTES: Routes = [ }), route({ path: DemoRoute.Range, - loadChildren: async () => - (await import('../components/range/range.module')).ExampleTuiRangeModule, + loadComponent: async () => import('../components/range'), title: 'Range', }), route({ @@ -599,15 +584,12 @@ export const ROUTES: Routes = [ }), route({ path: DemoRoute.Select, - loadChildren: async () => - (await import('../components/select/select.module')).ExampleTuiSelectModule, + loadComponent: async () => import('../components/select'), title: 'Select', }), route({ path: DemoRoute.Scrollbar, - loadChildren: async () => - (await import('../components/scrollbar/scrollbar.module')) - .ExampleTuiScrollbarModule, + loadComponent: async () => import('../components/scrollbar'), title: 'Scrollbar', }), route({ @@ -622,8 +604,7 @@ export const ROUTES: Routes = [ }), route({ path: DemoRoute.Slider, - loadChildren: async () => - (await import('../components/slider/slider.module')).ExampleTuiSliderModule, + loadComponent: async () => import('../components/slider'), title: 'Slider', }), route({ diff --git a/projects/demo/src/modules/components/input-copy/examples/1/index.ts b/projects/demo/src/modules/components/input-copy/examples/1/index.ts index a19737c44db8..8304dc00702f 100644 --- a/projects/demo/src/modules/components/input-copy/examples/1/index.ts +++ b/projects/demo/src/modules/components/input-copy/examples/1/index.ts @@ -1,15 +1,18 @@ import {Component} from '@angular/core'; -import {FormControl, FormGroup, Validators} from '@angular/forms'; +import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiInputCopyModule} from '@taiga-ui/legacy'; @Component({ - selector: 'tui-input-copy-example-1', + standalone: true, + imports: [ReactiveFormsModule, TuiInputCopyModule, TuiTextfieldControllerModule], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiInputCopyExample1 { +export default class ExampleComponent { protected readonly testForm = new FormGroup({ testValue: new FormControl('', Validators.required), }); diff --git a/projects/demo/src/modules/components/input-copy/examples/import/declare-form.md b/projects/demo/src/modules/components/input-copy/examples/import/declare-form.md deleted file mode 100644 index ff16e7e27671..000000000000 --- a/projects/demo/src/modules/components/input-copy/examples/import/declare-form.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import {FormControl, FormGroup} from '@angular/forms'; - -// ... - -@Component({ - // ... -}) -export class MyComponent { - testForm = new FormGroup({ - testValue: new FormControl(''), - }); -} -``` diff --git a/projects/demo/src/modules/components/input-copy/examples/import/import-module.md b/projects/demo/src/modules/components/input-copy/examples/import/import.md similarity index 73% rename from projects/demo/src/modules/components/input-copy/examples/import/import-module.md rename to projects/demo/src/modules/components/input-copy/examples/import/import.md index 15c66aa29442..7396340a12e0 100644 --- a/projects/demo/src/modules/components/input-copy/examples/import/import-module.md +++ b/projects/demo/src/modules/components/input-copy/examples/import/import.md @@ -14,5 +14,9 @@ import {TuiInputCopyModule} from '@taiga-ui/legacy'; ], // ... }) -export class MyComponent {} +export class MyComponent { + testForm = new FormGroup({ + testValue: new FormControl(''), + }); +} ``` diff --git a/projects/demo/src/modules/components/input-copy/examples/import/insert-template.md b/projects/demo/src/modules/components/input-copy/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/input-copy/examples/import/insert-template.md rename to projects/demo/src/modules/components/input-copy/examples/import/template.md diff --git a/projects/demo/src/modules/components/input-copy/input-copy.template.html b/projects/demo/src/modules/components/input-copy/index.html similarity index 75% rename from projects/demo/src/modules/components/input-copy/input-copy.template.html rename to projects/demo/src/modules/components/input-copy/index.html index e95b0d2c60c2..5de204e44cf6 100644 --- a/projects/demo/src/modules/components/input-copy/input-copy.template.html +++ b/projects/demo/src/modules/components/input-copy/index.html @@ -9,7 +9,8 @@ If you need to set some attributes or listen to events on native @@ -18,7 +19,6 @@ Textfield directive as shown below - @@ -101,44 +101,5 @@ , that says that content is copied - -
    -
  1. -

    - Import - TuiInputCopyModule - into a module where you want to use our component -

    - - -
    2. - -
  2. -

    - Declare a form ( - FormGroup - ) or a control ( - FormControl - ) in your component: -

    - - -
    3. - -
  3. -

    Add to the template:

    - - -
    4. -
- + diff --git a/projects/demo/src/modules/components/input-copy/input-copy.component.ts b/projects/demo/src/modules/components/input-copy/index.ts similarity index 62% rename from projects/demo/src/modules/components/input-copy/input-copy.component.ts rename to projects/demo/src/modules/components/input-copy/index.ts index d93dff43cf2d..847524399c80 100644 --- a/projects/demo/src/modules/components/input-copy/input-copy.component.ts +++ b/projects/demo/src/modules/components/input-copy/index.ts @@ -1,24 +1,35 @@ import {Component, ViewChild} from '@angular/core'; -import {FormControl, Validators} from '@angular/forms'; +import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; +import {TuiDemo} from '@demo/utils'; import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc'; import {tuiProvide} from '@taiga-ui/cdk'; +import {TuiNotificationComponent, TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiInputCopyModule} from '@taiga-ui/legacy'; import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor'; import {AbstractExampleTuiControl} from '../abstract/control'; +import {InheritedDocumentationComponent} from '../abstract/inherited-documentation'; @Component({ - selector: 'example-input-copy', - templateUrl: './input-copy.template.html', + standalone: true, + imports: [ + TuiDemo, + TuiNotificationComponent, + TuiInputCopyModule, + ReactiveFormsModule, + TuiTextfieldControllerModule, + InheritedDocumentationComponent, + ], + templateUrl: './index.html', changeDetection, providers: [ - tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputCopyComponent), + tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent), tuiDocExcludeProperties(['tuiTextfieldPrefix', 'tuiTextfieldPostfix']), ], }) -export class ExampleTuiInputCopyComponent extends AbstractExampleTuiControl { +export default class PageComponent extends AbstractExampleTuiControl { public readonly control = new FormControl('', Validators.required); public override readonly maxLengthVariants: readonly number[] = [10]; @@ -28,15 +39,6 @@ export class ExampleTuiInputCopyComponent extends AbstractExampleTuiControl { @ViewChild('customTemplate') protected customTemplate: PolymorpheusContent; - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - }; - - protected readonly exampleModule = import('./examples/import/import-module.md?raw'); - protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - protected readonly exampleForm = import('./examples/import/declare-form.md?raw'); - protected readonly successMessageVariants = ['Copied', 'Template']; protected successMessage = this.successMessageVariants[0]; diff --git a/projects/demo/src/modules/components/input-copy/input-copy.module.ts b/projects/demo/src/modules/components/input-copy/input-copy.module.ts deleted file mode 100644 index d9b7a1ddba21..000000000000 --- a/projects/demo/src/modules/components/input-copy/input-copy.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiNotificationComponent, TuiTextfieldControllerModule} from '@taiga-ui/core'; -import {TuiInputCopyModule} from '@taiga-ui/legacy'; -import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; - -import {InheritedDocumentationComponent} from '../abstract/inherited-documentation'; -import {TuiInputCopyExample1} from './examples/1'; -import {ExampleTuiInputCopyComponent} from './input-copy.component'; - -@NgModule({ - imports: [ - CommonModule, - ReactiveFormsModule, - TuiInputCopyModule, - InheritedDocumentationComponent, - PolymorpheusModule, - TuiTextfieldControllerModule, - TuiNotificationComponent, - TuiAddonDoc, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputCopyComponent)), - ], - declarations: [ExampleTuiInputCopyComponent, TuiInputCopyExample1], - exports: [ExampleTuiInputCopyComponent], -}) -export class ExampleTuiInputCopyModule {} diff --git a/projects/demo/src/modules/components/input-date-multi/examples/1/index.ts b/projects/demo/src/modules/components/input-date-multi/examples/1/index.ts index 6f6ba1968201..b6cbcebcda78 100644 --- a/projects/demo/src/modules/components/input-date-multi/examples/1/index.ts +++ b/projects/demo/src/modules/components/input-date-multi/examples/1/index.ts @@ -1,16 +1,19 @@ import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; +import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiDay} from '@taiga-ui/cdk'; +import {TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiInputDateMultiModule} from '@taiga-ui/legacy'; @Component({ - selector: 'tui-input-date-multi-example-1', + standalone: true, + imports: [ReactiveFormsModule, TuiInputDateMultiModule, TuiTextfieldControllerModule], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiInputDateMultiExample1 { +export default class ExampleComponent { protected readonly testForm = new FormGroup({ testValue: new FormControl([ new TuiDay(2017, 0, 7), diff --git a/projects/demo/src/modules/components/input-date-multi/examples/import/declare-form.md b/projects/demo/src/modules/components/input-date-multi/examples/import/declare-form.md deleted file mode 100644 index d5bd0c688757..000000000000 --- a/projects/demo/src/modules/components/input-date-multi/examples/import/declare-form.md +++ /dev/null @@ -1,12 +0,0 @@ -```ts -import {FormControl, FormGroup} from '@angular/forms'; - -@Component({ - // ... -}) -export class MyComponent { - testForm = new FormGroup({ - testValue: new FormControl([]), - }); -} -``` diff --git a/projects/demo/src/modules/components/input-date-multi/examples/import/import-module.md b/projects/demo/src/modules/components/input-date-multi/examples/import/import.md similarity index 71% rename from projects/demo/src/modules/components/input-date-multi/examples/import/import-module.md rename to projects/demo/src/modules/components/input-date-multi/examples/import/import.md index ec8ad8994017..44ccfd3fe556 100644 --- a/projects/demo/src/modules/components/input-date-multi/examples/import/import-module.md +++ b/projects/demo/src/modules/components/input-date-multi/examples/import/import.md @@ -11,5 +11,9 @@ import {TuiInputDateMultiModule} from '@taiga-ui/legacy'; ], // ... }) -export class MyComponent {} +export class MyComponent { + testForm = new FormGroup({ + testValue: new FormControl([]), + }); +} ``` diff --git a/projects/demo/src/modules/components/input-date-multi/examples/import/insert-template.md b/projects/demo/src/modules/components/input-date-multi/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/input-date-multi/examples/import/insert-template.md rename to projects/demo/src/modules/components/input-date-multi/examples/import/template.md diff --git a/projects/demo/src/modules/components/input-date-multi/input-date-multi.template.html b/projects/demo/src/modules/components/input-date-multi/index.html similarity index 70% rename from projects/demo/src/modules/components/input-date-multi/input-date-multi.template.html rename to projects/demo/src/modules/components/input-date-multi/index.html index a439f212ab11..8bfa2b0cab48 100644 --- a/projects/demo/src/modules/components/input-date-multi/input-date-multi.template.html +++ b/projects/demo/src/modules/components/input-date-multi/index.html @@ -7,10 +7,9 @@ - - + [component]="1 | tuiComponent" + [content]="1 | tuiExample: 'html,ts'" + /> @@ -104,59 +103,5 @@ - -

- If you want to use - - MobileCalendar - - with your controls add - tuiProvideMobileCalendar() - to the providers -

- -
    -
  1. -

    - Import an Angular module for forms and - TuiInputDateMultiModule - in the same module where you want to use our component: -

    - - -
    2. - -
  2. -

    - Declare a form ( - FormGroup - ) or a control ( - FormControl - ) in your component: -

    - - -
    3. - -
  3. - Use - tui-input-date[multiple] - in template: - - -
    4. -
- + diff --git a/projects/demo/src/modules/components/input-date-multi/input-date-multi.component.ts b/projects/demo/src/modules/components/input-date-multi/index.ts similarity index 61% rename from projects/demo/src/modules/components/input-date-multi/input-date-multi.component.ts rename to projects/demo/src/modules/components/input-date-multi/index.ts index 5e5c6177f22c..e10c1de1e935 100644 --- a/projects/demo/src/modules/components/input-date-multi/input-date-multi.component.ts +++ b/projects/demo/src/modules/components/input-date-multi/index.ts @@ -1,7 +1,11 @@ import {Component} from '@angular/core'; -import {FormControl, Validators} from '@angular/forms'; +import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; +import {TuiDemo} from '@demo/utils'; +import { + TuiMobileCalendarComponent, + tuiProvideMobileCalendar, +} from '@taiga-ui/addon-mobile'; import type {TuiBooleanHandler} from '@taiga-ui/cdk'; import { TUI_FALSE_HANDLER, @@ -11,28 +15,40 @@ import { tuiProvide, } from '@taiga-ui/cdk'; import type {TuiMarkerHandler} from '@taiga-ui/core'; +import { + TuiDropdownOpenDirective, + TuiHintOptionsDirective, + TuiTextfieldControllerModule, +} from '@taiga-ui/core'; +import {TuiInputDateMultiModule} from '@taiga-ui/legacy'; import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor'; import {AbstractExampleTuiControl} from '../abstract/control'; +import {InheritedDocumentationComponent} from '../abstract/inherited-documentation'; @Component({ - selector: 'example-tui-input-date-multi', - templateUrl: './input-date-multi.template.html', + standalone: true, + imports: [ + TuiDemo, + TuiInputDateMultiModule, + ReactiveFormsModule, + TuiDropdownOpenDirective, + TuiHintOptionsDirective, + TuiTextfieldControllerModule, + TuiMobileCalendarComponent, + InheritedDocumentationComponent, + ], + + templateUrl: './index.html', changeDetection, - providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiInputDateMultiComponent)], + providers: [ + tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent), + tuiProvideMobileCalendar(), + ], }) -export class ExampleTuiInputDateMultiComponent extends AbstractExampleTuiControl { +export default class PageComponent extends AbstractExampleTuiControl { public control = new FormControl([], Validators.required); - protected readonly exampleForm = import('./examples/import/declare-form.md?raw'); - protected readonly exampleModule = import('./examples/import/import-module.md?raw'); - protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - }; - protected minVariants = [ TUI_FIRST_DAY, new TuiDay(2017, 2, 5), diff --git a/projects/demo/src/modules/components/input-date-multi/input-date-multi.module.ts b/projects/demo/src/modules/components/input-date-multi/input-date-multi.module.ts deleted file mode 100644 index 223fa21ed13f..000000000000 --- a/projects/demo/src/modules/components/input-date-multi/input-date-multi.module.ts +++ /dev/null @@ -1,35 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {TuiAddonDoc, tuiGetDocModules} from '@taiga-ui/addon-doc'; -import {tuiProvideMobileCalendar} from '@taiga-ui/addon-mobile'; -import { - TuiDropdownModule, - TuiHint, - TuiLinkDirective, - TuiTextfieldControllerModule, -} from '@taiga-ui/core'; -import {TuiInputDateMultiModule} from '@taiga-ui/legacy'; - -import {InheritedDocumentationComponent} from '../abstract/inherited-documentation'; -import {TuiInputDateMultiExample1} from './examples/1'; -import {ExampleTuiInputDateMultiComponent} from './input-date-multi.component'; - -@NgModule({ - imports: [ - CommonModule, - TuiLinkDirective, - TuiHint, - TuiDropdownModule, - TuiAddonDoc, - ReactiveFormsModule, - TuiInputDateMultiModule, - TuiTextfieldControllerModule, - InheritedDocumentationComponent, - tuiGetDocModules(ExampleTuiInputDateMultiComponent), - ], - declarations: [ExampleTuiInputDateMultiComponent, TuiInputDateMultiExample1], - providers: [tuiProvideMobileCalendar()], - exports: [ExampleTuiInputDateMultiComponent], -}) -export class ExampleTuiInputDateMultiModule {} diff --git a/projects/demo/src/modules/components/loader/examples/1/index.ts b/projects/demo/src/modules/components/loader/examples/1/index.ts index d36238fceaf2..b41b8c15ce92 100644 --- a/projects/demo/src/modules/components/loader/examples/1/index.ts +++ b/projects/demo/src/modules/components/loader/examples/1/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 {TuiButtonDirective, TuiLoaderComponent} from '@taiga-ui/core'; @Component({ - selector: 'tui-loader-example-1', + standalone: true, + imports: [TuiButtonDirective, TuiLoaderComponent], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiLoaderExample1 {} +export default class ExampleComponent {} diff --git a/projects/demo/src/modules/components/loader/examples/2/index.ts b/projects/demo/src/modules/components/loader/examples/2/index.ts index dcd8e288dd41..10dde939dc2b 100644 --- a/projects/demo/src/modules/components/loader/examples/2/index.ts +++ b/projects/demo/src/modules/components/loader/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 {TuiLoaderComponent} from '@taiga-ui/core'; @Component({ - selector: 'tui-loader-example-2', + standalone: true, + imports: [TuiLoaderComponent], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiLoaderExample2 {} +export default class ExampleComponent {} diff --git a/projects/demo/src/modules/components/loader/examples/3/index.ts b/projects/demo/src/modules/components/loader/examples/3/index.ts index d60891f9e173..10dde939dc2b 100644 --- a/projects/demo/src/modules/components/loader/examples/3/index.ts +++ b/projects/demo/src/modules/components/loader/examples/3/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 {TuiLoaderComponent} from '@taiga-ui/core'; @Component({ - selector: 'tui-loader-example-3', + standalone: true, + imports: [TuiLoaderComponent], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiLoaderExample3 {} +export default class ExampleComponent {} diff --git a/projects/demo/src/modules/components/loader/examples/4/index.ts b/projects/demo/src/modules/components/loader/examples/4/index.ts index 50697199530c..ae38576df0ff 100644 --- a/projects/demo/src/modules/components/loader/examples/4/index.ts +++ b/projects/demo/src/modules/components/loader/examples/4/index.ts @@ -1,10 +1,15 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {tuiLoaderOptionsProvider} from '@taiga-ui/core'; +import { + TuiButtonDirective, + TuiLoaderComponent, + tuiLoaderOptionsProvider, +} from '@taiga-ui/core'; @Component({ - selector: 'tui-loader-example-4', + standalone: true, + imports: [TuiLoaderComponent, TuiButtonDirective], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, @@ -17,4 +22,4 @@ import {tuiLoaderOptionsProvider} from '@taiga-ui/core'; }), ], }) -export class TuiLoaderExample4 {} +export default class ExampleComponent {} diff --git a/projects/demo/src/modules/components/loader/examples/5/index.ts b/projects/demo/src/modules/components/loader/examples/5/index.ts index 4743ff16f9f9..d7d6d43197bf 100644 --- a/projects/demo/src/modules/components/loader/examples/5/index.ts +++ b/projects/demo/src/modules/components/loader/examples/5/index.ts @@ -1,14 +1,15 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {tuiLoaderOptionsProvider} from '@taiga-ui/core'; +import {TuiLoaderComponent, tuiLoaderOptionsProvider} from '@taiga-ui/core'; @Component({ - selector: 'tui-loader-example-5', + standalone: true, + imports: [TuiLoaderComponent], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, providers: [tuiLoaderOptionsProvider({size: 'xl'})], }) -export class TuiLoaderExample5 {} +export default class ExampleComponent {} diff --git a/projects/demo/src/modules/components/loader/examples/import/import-module.md b/projects/demo/src/modules/components/loader/examples/import/import-module.md deleted file mode 100644 index 81734873690d..000000000000 --- a/projects/demo/src/modules/components/loader/examples/import/import-module.md +++ /dev/null @@ -1,12 +0,0 @@ -```ts -import {TuiLoaderComponent} from '@taiga-ui/core'; - -@Component({ - standalone: true, - imports: [ - // ... - TuiLoaderComponent, - ], -}) -export class MyComponent {} -``` diff --git a/projects/demo/src/modules/components/loader/examples/import/define-options.md b/projects/demo/src/modules/components/loader/examples/import/import.md similarity index 65% rename from projects/demo/src/modules/components/loader/examples/import/define-options.md rename to projects/demo/src/modules/components/loader/examples/import/import.md index 78e1213bfd59..4474b8ca2478 100644 --- a/projects/demo/src/modules/components/loader/examples/import/define-options.md +++ b/projects/demo/src/modules/components/loader/examples/import/import.md @@ -1,9 +1,12 @@ ```ts -import {tuiLoaderOptionsProvider} from '@taiga-ui/core'; -// ... +import {TuiLoaderComponent} from '@taiga-ui/core'; @Component({ standalone: true, + imports: [ + // ... + TuiLoaderComponent, + ], providers: [ tuiLoaderOptionsProvider({ size: 'l', diff --git a/projects/demo/src/modules/components/loader/examples/import/insert-template.md b/projects/demo/src/modules/components/loader/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/loader/examples/import/insert-template.md rename to projects/demo/src/modules/components/loader/examples/import/template.md diff --git a/projects/demo/src/modules/components/loader/loader.template.html b/projects/demo/src/modules/components/loader/index.html similarity index 73% rename from projects/demo/src/modules/components/loader/loader.template.html rename to projects/demo/src/modules/components/loader/index.html index 564eed9007e1..e33f76a84953 100644 --- a/projects/demo/src/modules/components/loader/loader.template.html +++ b/projects/demo/src/modules/components/loader/index.html @@ -7,39 +7,36 @@ - - + [component]="1 | tuiComponent" + [content]="1 | tuiExample" + /> - - + [component]="2 | tuiComponent" + [content]="2 | tuiExample" + /> - - + [component]="3 | tuiComponent" + [content]="3 | tuiExample" + /> - - + [component]="4 | tuiComponent" + [content]="4 | tuiExample" + /> @@ -47,7 +44,6 @@ --tui-thickness to customize width of the circle stroke. By default, it is 1/12 of diameter. - @@ -135,42 +131,5 @@ - -
    -
  1. -

    - Import - TuiLoaderComponent - into a module where you want to use our component -

    - - -
    2. - -
  2. -

    Add to the template:

    - - -
    3. - -
  3. -

    - Optionally use the - TUI_LOADER_OPTIONS - injection token to override the default options for the component. -

    - - -
    4. -
- + diff --git a/projects/demo/src/modules/components/loader/loader.style.less b/projects/demo/src/modules/components/loader/index.less similarity index 100% rename from projects/demo/src/modules/components/loader/loader.style.less rename to projects/demo/src/modules/components/loader/index.less diff --git a/projects/demo/src/modules/components/loader/index.ts b/projects/demo/src/modules/components/loader/index.ts new file mode 100644 index 000000000000..8f217dc5db58 --- /dev/null +++ b/projects/demo/src/modules/components/loader/index.ts @@ -0,0 +1,54 @@ +import {Component, ViewChild} from '@angular/core'; +import {RouterLink} from '@angular/router'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDemo} from '@demo/utils'; +import type {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core'; +import {TuiLinkDirective, TuiLoaderComponent} from '@taiga-ui/core'; +import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; + +@Component({ + standalone: true, + imports: [TuiDemo, TuiLoaderComponent, TuiLinkDirective, RouterLink], + templateUrl: './index.html', + styleUrls: ['./index.less'], + changeDetection, +}) +export default class PageComponent { + @ViewChild('textTemplate') + protected readonly textTemplate: PolymorpheusContent; + + protected showLoader = true; + + protected inheritColor = false; + + protected overlay = false; + + protected readonly sizeVariants: ReadonlyArray = [ + 'xs', + 's', + 'm', + 'l', + 'xl', + 'xxl', + ]; + + protected size = this.sizeVariants[2]; + + protected selectedTemplate = ''; + + protected readonly textVariants: string[] = ['', 'template', 'string']; + + protected get template(): PolymorpheusContent { + switch (this.selectedTemplate) { + case 'template': { + return this.textTemplate || ''; + } + case 'string': { + return 'string'; + } + default: { + return ''; + } + } + } +} diff --git a/projects/demo/src/modules/components/loader/loader.component.ts b/projects/demo/src/modules/components/loader/loader.component.ts deleted file mode 100644 index e3d7531d9a5c..000000000000 --- a/projects/demo/src/modules/components/loader/loader.component.ts +++ /dev/null @@ -1,82 +0,0 @@ -import {Component, ViewChild} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; -import type {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core'; -import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; - -@Component({ - selector: 'example-tui-loader', - templateUrl: './loader.template.html', - styleUrls: ['./loader.style.less'], - changeDetection, -}) -export class ExampleTuiLoaderComponent { - @ViewChild('textTemplate') - protected readonly textTemplate: PolymorpheusContent; - - protected readonly exampleOptions = import('./examples/import/define-options.md?raw'); - protected readonly exampleModule = import('./examples/import/import-module.md?raw'); - protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - LESS: import('./examples/1/index.less?raw'), - }; - - protected readonly example2: TuiDocExample = { - TypeScript: import('./examples/2/index.ts?raw'), - HTML: import('./examples/2/index.html?raw'), - }; - - protected readonly example3: TuiDocExample = { - TypeScript: import('./examples/3/index.ts?raw'), - HTML: import('./examples/3/index.html?raw'), - }; - - protected readonly example4: TuiDocExample = { - TypeScript: import('./examples/4/index.ts?raw'), - HTML: import('./examples/4/index.html?raw'), - }; - - protected readonly example5: TuiDocExample = { - HTML: import('./examples/5/index.html?raw'), - LESS: import('./examples/5/index.less?raw'), - TypeScript: import('./examples/5/index.ts?raw'), - }; - - protected showLoader = true; - - protected inheritColor = false; - - protected overlay = false; - - protected readonly sizeVariants: ReadonlyArray = [ - 'xs', - 's', - 'm', - 'l', - 'xl', - 'xxl', - ]; - - protected size = this.sizeVariants[2]; - - protected selectedTemplate = ''; - - protected readonly textVariants: string[] = ['', 'template', 'string']; - - protected get template(): PolymorpheusContent { - switch (this.selectedTemplate) { - case 'template': { - return this.textTemplate || ''; - } - case 'string': { - return 'string'; - } - default: { - return ''; - } - } - } -} diff --git a/projects/demo/src/modules/components/loader/loader.module.ts b/projects/demo/src/modules/components/loader/loader.module.ts deleted file mode 100644 index 366a0d852d4b..000000000000 --- a/projects/demo/src/modules/components/loader/loader.module.ts +++ /dev/null @@ -1,40 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiButtonDirective, TuiLinkDirective, TuiLoaderComponent} from '@taiga-ui/core'; -import {TuiRadioListComponent} from '@taiga-ui/kit'; -import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; - -import {TuiLoaderExample1} from './examples/1'; -import {TuiLoaderExample2} from './examples/2'; -import {TuiLoaderExample3} from './examples/3'; -import {TuiLoaderExample4} from './examples/4'; -import {TuiLoaderExample5} from './examples/5'; -import {ExampleTuiLoaderComponent} from './loader.component'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - PolymorpheusModule, - TuiLoaderComponent, - TuiRadioListComponent, - TuiButtonDirective, - TuiLinkDirective, - RouterModule, - TuiAddonDoc, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiLoaderComponent)), - ], - declarations: [ - ExampleTuiLoaderComponent, - TuiLoaderExample1, - TuiLoaderExample2, - TuiLoaderExample3, - TuiLoaderExample4, - TuiLoaderExample5, - ], - exports: [ExampleTuiLoaderComponent], -}) -export class ExampleTuiLoaderModule {} diff --git a/projects/demo/src/modules/components/multi-select/examples/1/index.ts b/projects/demo/src/modules/components/multi-select/examples/1/index.ts index f0f6cccefe3c..d8ab1ed4b8a2 100644 --- a/projects/demo/src/modules/components/multi-select/examples/1/index.ts +++ b/projects/demo/src/modules/components/multi-select/examples/1/index.ts @@ -1,9 +1,12 @@ import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import type {TuiBooleanHandler} from '@taiga-ui/cdk'; import {TUI_DEFAULT_MATCHER, tuiPure} from '@taiga-ui/cdk'; +import {TuiDataListDirective, TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiDataListWrapperComponent} from '@taiga-ui/kit'; +import {TuiMultiSelectModule} from '@taiga-ui/legacy'; const ITEMS: readonly string[] = [ 'Luke Skywalker', @@ -15,12 +18,19 @@ const ITEMS: readonly string[] = [ ]; @Component({ - selector: 'tui-multi-select-example-1', + standalone: true, + imports: [ + TuiMultiSelectModule, + ReactiveFormsModule, + TuiTextfieldControllerModule, + TuiDataListWrapperComponent, + TuiDataListDirective, + ], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiMultiSelectExample1 { +export default class ExampleComponent { protected search: string | null = ''; protected readonly control = new FormControl([ITEMS[0]]); diff --git a/projects/demo/src/modules/components/multi-select/examples/10/index.ts b/projects/demo/src/modules/components/multi-select/examples/10/index.ts index 8e8531d7b0ca..79d39166a95c 100644 --- a/projects/demo/src/modules/components/multi-select/examples/10/index.ts +++ b/projects/demo/src/modules/components/multi-select/examples/10/index.ts @@ -1,20 +1,28 @@ import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import type {TuiBooleanHandler, TuiStringHandler} from '@taiga-ui/cdk'; +import {TuiHintOptionsDirective, TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiMultiSelectModule} from '@taiga-ui/legacy'; interface Item { readonly id: number; readonly name: string; } @Component({ - selector: 'tui-multi-select-example-10', + standalone: true, + imports: [ + TuiMultiSelectModule, + ReactiveFormsModule, + TuiHintOptionsDirective, + TuiTextfieldControllerModule, + ], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiMultiSelectExample10 { +export default class ExampleComponent { protected itemStringControl = new FormControl([]); protected itemControl = new FormControl([]); protected itemStringGroupControl = new FormControl([]); diff --git a/projects/demo/src/modules/components/multi-select/examples/11/index.ts b/projects/demo/src/modules/components/multi-select/examples/11/index.ts index ce6da2c35b1f..2dbc8eaf0a16 100644 --- a/projects/demo/src/modules/components/multi-select/examples/11/index.ts +++ b/projects/demo/src/modules/components/multi-select/examples/11/index.ts @@ -1,17 +1,31 @@ +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 type {TuiContext} from '@taiga-ui/cdk'; +import {TuiDataListDirective, TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiDataListWrapperComponent} from '@taiga-ui/kit'; +import {TuiMultiSelectModule, TuiTagModule} from '@taiga-ui/legacy'; import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; @Component({ - selector: 'tui-multi-select-example-11', + standalone: true, + imports: [ + TuiMultiSelectModule, + TuiTextfieldControllerModule, + FormsModule, + TuiDataListWrapperComponent, + TuiDataListDirective, + NgForOf, + TuiTagModule, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiMultiSelectExample11 { +export default class ExampleComponent { protected readonly items = [ 'Luke Skywalker', 'Leia Organa Solo', diff --git a/projects/demo/src/modules/components/multi-select/examples/2/index.ts b/projects/demo/src/modules/components/multi-select/examples/2/index.ts index 0981ac2b95fe..2eb7c5a654af 100644 --- a/projects/demo/src/modules/components/multi-select/examples/2/index.ts +++ b/projects/demo/src/modules/components/multi-select/examples/2/index.ts @@ -1,9 +1,17 @@ +import {AsyncPipe} from '@angular/common'; import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {assets} from '@demo/utils'; -import {TUI_DEFAULT_MATCHER} from '@taiga-ui/cdk'; +import {TUI_DEFAULT_MATCHER, TuiLetDirective} from '@taiga-ui/cdk'; +import { + TuiDataListDirective, + TuiInitialsPipe, + TuiTextfieldControllerModule, +} from '@taiga-ui/core'; +import {TuiAvatarComponent, TuiDataListWrapperComponent} from '@taiga-ui/kit'; +import {TuiMultiSelectModule} from '@taiga-ui/legacy'; import type {Observable} from 'rxjs'; import {delay, filter, of, startWith, Subject, switchMap} from 'rxjs'; @@ -30,13 +38,24 @@ const databaseMockData: readonly User[] = [ ]; @Component({ - selector: 'tui-multi-select-example-2', + standalone: true, + imports: [ + TuiMultiSelectModule, + TuiLetDirective, + AsyncPipe, + ReactiveFormsModule, + TuiTextfieldControllerModule, + TuiDataListWrapperComponent, + TuiDataListDirective, + TuiAvatarComponent, + TuiInitialsPipe, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiMultiSelectExample2 { +export default class ExampleComponent { protected readonly search$ = new Subject(); protected readonly items$: Observable = this.search$.pipe( diff --git a/projects/demo/src/modules/components/multi-select/examples/3/index.ts b/projects/demo/src/modules/components/multi-select/examples/3/index.ts index ee16498fee67..3550d6d722e6 100644 --- a/projects/demo/src/modules/components/multi-select/examples/3/index.ts +++ b/projects/demo/src/modules/components/multi-select/examples/3/index.ts @@ -1,8 +1,17 @@ +import {NgForOf} from '@angular/common'; import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import type {TuiContext, TuiIdentityMatcher, TuiStringHandler} from '@taiga-ui/cdk'; +import { + TuiDataListComponent, + TuiDataListDirective, + TuiOptionComponent, + TuiTextfieldControllerModule, +} from '@taiga-ui/core'; +import {TuiDataListWrapperComponent} from '@taiga-ui/kit'; +import {TuiMultiSelectModule} from '@taiga-ui/legacy'; interface Hero { readonly id: number; @@ -10,12 +19,22 @@ interface Hero { } @Component({ - selector: 'tui-multi-select-example-3', + standalone: true, + imports: [ + TuiMultiSelectModule, + TuiTextfieldControllerModule, + ReactiveFormsModule, + TuiDataListComponent, + TuiDataListDirective, + TuiOptionComponent, + NgForOf, + TuiDataListWrapperComponent, + ], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiMultiSelectExample3 { +export default class ExampleComponent { protected readonly items: readonly Hero[] = [ {id: 1, name: 'Luke Skywalker'}, {id: 2, name: 'Leia Organa Solo'}, diff --git a/projects/demo/src/modules/components/multi-select/examples/4/index.ts b/projects/demo/src/modules/components/multi-select/examples/4/index.ts index 15ab443520ca..0f9829d56272 100644 --- a/projects/demo/src/modules/components/multi-select/examples/4/index.ts +++ b/projects/demo/src/modules/components/multi-select/examples/4/index.ts @@ -1,8 +1,12 @@ +import {AsyncPipe} from '@angular/common'; import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import type {TuiContext, TuiHandler} from '@taiga-ui/cdk'; -import {TUI_DEFAULT_MATCHER, tuiIsNumber} from '@taiga-ui/cdk'; +import {TUI_DEFAULT_MATCHER, tuiIsNumber, TuiLetDirective} from '@taiga-ui/cdk'; +import {TuiDataListDirective, TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiDataListWrapperComponent} from '@taiga-ui/kit'; +import {TuiMultiSelectModule} from '@taiga-ui/legacy'; import type {Observable} from 'rxjs'; import {map, shareReplay, startWith, Subject, switchMap, timer} from 'rxjs'; @@ -16,11 +20,20 @@ const DICTIONARY = [ ]; @Component({ - selector: 'tui-multi-select-example-4', + standalone: true, + imports: [ + TuiMultiSelectModule, + TuiLetDirective, + AsyncPipe, + ReactiveFormsModule, + TuiTextfieldControllerModule, + TuiDataListWrapperComponent, + TuiDataListDirective, + ], templateUrl: './index.html', changeDetection, }) -export class TuiMultiSelectExample4 { +export default class ExampleComponent { // Server request emulation private readonly server$ = timer(5000).pipe( map(() => DICTIONARY), diff --git a/projects/demo/src/modules/components/multi-select/examples/5/index.html b/projects/demo/src/modules/components/multi-select/examples/5/index.html index d2088e6f4480..67c60fc49843 100644 --- a/projects/demo/src/modules/components/multi-select/examples/5/index.html +++ b/projects/demo/src/modules/components/multi-select/examples/5/index.html @@ -1,5 +1,4 @@ ([]); protected readonly items: readonly Employee[] = [ diff --git a/projects/demo/src/modules/components/multi-select/examples/9/index.ts b/projects/demo/src/modules/components/multi-select/examples/9/index.ts index ae9ea41f1b17..b9c6c47891ae 100644 --- a/projects/demo/src/modules/components/multi-select/examples/9/index.ts +++ b/projects/demo/src/modules/components/multi-select/examples/9/index.ts @@ -1,18 +1,33 @@ import {Component, inject} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import type {TuiDialogContext, TuiSizeL, TuiSizeS} from '@taiga-ui/core'; -import {TuiDialogService} from '@taiga-ui/core'; +import { + TuiButtonDirective, + TuiDataListDirective, + TuiDialogService, + TuiTextfieldControllerModule, +} from '@taiga-ui/core'; +import {TuiDataListWrapperComponent} from '@taiga-ui/kit'; +import {TuiMultiSelectModule} from '@taiga-ui/legacy'; import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; @Component({ - selector: 'tui-multi-select-example-9', + standalone: true, + imports: [ + TuiButtonDirective, + TuiMultiSelectModule, + ReactiveFormsModule, + TuiTextfieldControllerModule, + TuiDataListWrapperComponent, + TuiDataListDirective, + ], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiMultiSelectExample9 { +export default class ExampleComponent { private readonly dialogs = inject(TuiDialogService); protected readonly testValue = new FormControl([]); diff --git a/projects/demo/src/modules/components/multi-select/examples/import/declare-form.md b/projects/demo/src/modules/components/multi-select/examples/import/declare-form.md deleted file mode 100644 index 0e736be06367..000000000000 --- a/projects/demo/src/modules/components/multi-select/examples/import/declare-form.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import {FormControl, FormGroup} from '@angular/forms'; - -// ... - -@Component({ - // ... -}) -export class MyComponent { - testForm = new FormGroup({ - testValue: new FormControl(), - }); -} -``` diff --git a/projects/demo/src/modules/components/multi-select/examples/import/import-module.md b/projects/demo/src/modules/components/multi-select/examples/import/import.md similarity index 79% rename from projects/demo/src/modules/components/multi-select/examples/import/import-module.md rename to projects/demo/src/modules/components/multi-select/examples/import/import.md index b5f4be298d72..de010f695055 100644 --- a/projects/demo/src/modules/components/multi-select/examples/import/import-module.md +++ b/projects/demo/src/modules/components/multi-select/examples/import/import.md @@ -17,5 +17,9 @@ import {TuiDataListWrapper, TuiMultiSelectModule} from '@taiga-ui/kit'; ], // ... }) -export class MyComponent {} +export class MyComponent { + testForm = new FormGroup({ + testValue: new FormControl(), + }); +} ``` diff --git a/projects/demo/src/modules/components/multi-select/examples/import/insert-template.md b/projects/demo/src/modules/components/multi-select/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/multi-select/examples/import/insert-template.md rename to projects/demo/src/modules/components/multi-select/examples/import/template.md diff --git a/projects/demo/src/modules/components/multi-select/multi-select.template.html b/projects/demo/src/modules/components/multi-select/index.html similarity index 77% rename from projects/demo/src/modules/components/multi-select/multi-select.template.html rename to projects/demo/src/modules/components/multi-select/index.html index ac2bdc0bbc5b..b2300391d6b2 100644 --- a/projects/demo/src/modules/components/multi-select/multi-select.template.html +++ b/projects/demo/src/modules/components/multi-select/index.html @@ -12,55 +12,50 @@ - - + [component]="1 | tuiComponent" + [content]="1 | tuiExample: 'html,ts'" + /> - - + [component]="2 | tuiComponent" + [content]="2 | tuiExample" + /> - - + [component]="3 | tuiComponent" + [content]="3 | tuiExample: 'html,ts'" + /> - - + [component]="4 | tuiComponent" + [content]="4 | tuiExample: 'html,ts'" + /> - - + [component]="5 | tuiComponent" + [content]="5 | tuiExample: 'html,ts'" + /> - - + [component]="6 | tuiComponent" + [content]="6 | tuiExample" + /> @@ -79,40 +74,35 @@ . - - - + [component]="8 | tuiComponent" + [content]="8 | tuiExample: 'html,ts'" + /> - - + [component]="9 | tuiComponent" + [content]="9 | tuiExample: 'html,ts'" + /> - - + [component]="10 | tuiComponent" + [content]="10 | tuiExample: 'html,ts'" + /> - - + [component]="11 | tuiComponent" + [content]="11 | tuiExample" + /> @@ -275,50 +265,5 @@ - -
    -
  1. -

    - Import an Angular module for forms and - TuiMultiSelectModule - in the same module where you want to use our component: -

    - - - -

    - See samples to learn more about working with - tui-data-list-wrapper - or without them -

    -
    2. - -
  2. -

    - Declare a form ( - FormGroup - ) or a control ( - FormControl - ) in your component: -

    - - -
    3. - -
  3. -

    Add to the template:

    - - -
    4. -
- + diff --git a/projects/demo/src/modules/components/multi-select/multi-select.style.less b/projects/demo/src/modules/components/multi-select/index.less similarity index 100% rename from projects/demo/src/modules/components/multi-select/multi-select.style.less rename to projects/demo/src/modules/components/multi-select/index.less diff --git a/projects/demo/src/modules/components/multi-select/multi-select.component.ts b/projects/demo/src/modules/components/multi-select/index.ts similarity index 55% rename from projects/demo/src/modules/components/multi-select/multi-select.component.ts rename to projects/demo/src/modules/components/multi-select/index.ts index 4ee047c7982a..b2acd665438b 100644 --- a/projects/demo/src/modules/components/multi-select/multi-select.component.ts +++ b/projects/demo/src/modules/components/multi-select/index.ts @@ -1,7 +1,7 @@ import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; +import {TuiDemo} from '@demo/utils'; import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc'; import type { TuiBooleanHandler, @@ -11,10 +11,22 @@ import type { } from '@taiga-ui/cdk'; import {TUI_FALSE_HANDLER, TUI_TRUE_HANDLER, tuiProvide} from '@taiga-ui/cdk'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; +import { + TuiButtonDirective, + TuiDataListDirective, + TuiDropdownOpenDirective, + TuiDropdownOptionsDirective, + TuiHintOptionsDirective, + TuiLinkDirective, + TuiTextfieldControllerModule, +} from '@taiga-ui/core'; +import {TuiDataListWrapperComponent} from '@taiga-ui/kit'; +import {TuiMultiSelectModule} from '@taiga-ui/legacy'; import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor'; import {AbstractExampleTuiControl} from '../abstract/control'; +import {InheritedDocumentationComponent} from '../abstract/inherited-documentation'; class Account { constructor( @@ -28,12 +40,26 @@ class Account { } @Component({ - selector: 'example-tui-multi-select', - templateUrl: './multi-select.template.html', - styleUrls: ['./multi-select.style.less'], + standalone: true, + imports: [ + TuiDemo, + TuiLinkDirective, + TuiMultiSelectModule, + ReactiveFormsModule, + TuiDropdownOptionsDirective, + TuiDropdownOpenDirective, + TuiHintOptionsDirective, + TuiTextfieldControllerModule, + TuiDataListWrapperComponent, + TuiDataListDirective, + TuiButtonDirective, + InheritedDocumentationComponent, + ], + templateUrl: './index.html', + styleUrls: ['./index.less'], changeDetection, providers: [ - tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiMultiSelectComponent), + tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent), tuiDocExcludeProperties([ 'tuiTextfieldPrefix', 'tuiTextfieldPostfix', @@ -42,7 +68,7 @@ class Account { ]), ], }) -export class ExampleTuiMultiSelectComponent extends AbstractExampleTuiControl { +export default class PageComponent extends AbstractExampleTuiControl { public control = new FormControl(null); public override iconLeft = ''; @@ -62,68 +88,6 @@ export class ExampleTuiMultiSelectComponent extends AbstractExampleTuiControl { public override labelOutside = true; - protected readonly exampleModule = import('./examples/import/import-module.md?raw'); - protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - protected readonly exampleForm = import('./examples/import/declare-form.md?raw'); - - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - }; - - protected readonly example2: TuiDocExample = { - TypeScript: import('./examples/2/index.ts?raw'), - HTML: import('./examples/2/index.html?raw'), - LESS: import('./examples/2/index.less?raw'), - }; - - protected readonly example3: TuiDocExample = { - TypeScript: import('./examples/3/index.ts?raw'), - HTML: import('./examples/3/index.html?raw'), - }; - - protected readonly example4: TuiDocExample = { - TypeScript: import('./examples/4/index.ts?raw'), - HTML: import('./examples/4/index.html?raw'), - }; - - protected readonly example5: TuiDocExample = { - TypeScript: import('./examples/5/index.ts?raw'), - HTML: import('./examples/5/index.html?raw'), - }; - - protected readonly example6: TuiDocExample = { - TypeScript: import('./examples/6/index.ts?raw'), - HTML: import('./examples/6/index.html?raw'), - LESS: import('./examples/6/index.less?raw'), - }; - - protected readonly example7: TuiDocExample = { - TypeScript: import('./examples/7/index.ts?raw'), - HTML: import('./examples/7/index.html?raw'), - LESS: import('./examples/7/index.less?raw'), - }; - - protected readonly example8: TuiDocExample = { - TypeScript: import('./examples/8/index.ts?raw'), - HTML: import('./examples/8/index.html?raw'), - }; - - protected readonly example9: TuiDocExample = { - TypeScript: import('./examples/9/index.ts?raw'), - HTML: import('./examples/9/index.html?raw'), - }; - - protected readonly example10: TuiDocExample = { - TypeScript: import('./examples/10/index.ts?raw'), - HTML: import('./examples/10/index.html?raw'), - }; - - protected readonly example11: TuiDocExample = { - TypeScript: import('./examples/11/index.ts?raw'), - HTML: import('./examples/11/index.html?raw'), - }; - protected readonly items = [ new Account('Ruble', 500), new Account('Dollar', 500), diff --git a/projects/demo/src/modules/components/multi-select/multi-select.module.ts b/projects/demo/src/modules/components/multi-select/multi-select.module.ts deleted file mode 100644 index 963ec487e075..000000000000 --- a/projects/demo/src/modules/components/multi-select/multi-select.module.ts +++ /dev/null @@ -1,83 +0,0 @@ -import {ScrollingModule} from '@angular/cdk/scrolling'; -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiLetDirective} from '@taiga-ui/cdk'; -import { - TuiButtonDirective, - TuiDataList, - TuiDropdownModule, - TuiHint, - TuiInitialsPipe, - TuiLinkDirective, - TuiScrollableDirective, - TuiScrollbarComponent, - TuiTextfieldControllerModule, -} from '@taiga-ui/core'; -import { - TuiAvatarComponent, - TuiDataListWrapper, - TuiRadioListComponent, -} from '@taiga-ui/kit'; -import {TuiMultiSelectModule, TuiTagModule} from '@taiga-ui/legacy'; -import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; - -import {InheritedDocumentationComponent} from '../abstract/inherited-documentation'; -import {TuiMultiSelectExample1} from './examples/1'; -import {TuiMultiSelectExample2} from './examples/2'; -import {TuiMultiSelectExample3} from './examples/3'; -import {TuiMultiSelectExample4} from './examples/4'; -import {TuiMultiSelectExample5} from './examples/5'; -import {TuiMultiSelectExample6} from './examples/6'; -import {TuiMultiSelectExample7} from './examples/7'; -import {TuiMultiSelectExample8} from './examples/8'; -import {TuiMultiSelectExample9} from './examples/9'; -import {TuiMultiSelectExample10} from './examples/10'; -import {TuiMultiSelectExample11} from './examples/11'; -import {ExampleTuiMultiSelectComponent} from './multi-select.component'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - ReactiveFormsModule, - ScrollingModule, - TuiScrollbarComponent, - TuiMultiSelectModule, - TuiRadioListComponent, - TuiButtonDirective, - TuiLinkDirective, - TuiAvatarComponent, - TuiDataList, - TuiDataListWrapper, - TuiLetDirective, - TuiDropdownModule, - TuiHint, - TuiTagModule, - TuiTextfieldControllerModule, - InheritedDocumentationComponent, - TuiAddonDoc, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiMultiSelectComponent)), - PolymorpheusModule, - TuiScrollableDirective, - TuiInitialsPipe, - ], - declarations: [ - ExampleTuiMultiSelectComponent, - TuiMultiSelectExample1, - TuiMultiSelectExample2, - TuiMultiSelectExample3, - TuiMultiSelectExample4, - TuiMultiSelectExample5, - TuiMultiSelectExample6, - TuiMultiSelectExample7, - TuiMultiSelectExample8, - TuiMultiSelectExample9, - TuiMultiSelectExample10, - TuiMultiSelectExample11, - ], - exports: [ExampleTuiMultiSelectComponent], -}) -export class ExampleTuiMultiSelectModule {} diff --git a/projects/demo/src/modules/components/pagination/examples/1/index.ts b/projects/demo/src/modules/components/pagination/examples/1/index.ts index 20140c47fd01..1db105227ba9 100644 --- a/projects/demo/src/modules/components/pagination/examples/1/index.ts +++ b/projects/demo/src/modules/components/pagination/examples/1/index.ts @@ -1,15 +1,25 @@ import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiPaginationModule} from '@taiga-ui/kit'; +import {TuiInputSliderModule} from '@taiga-ui/legacy'; @Component({ - selector: 'tui-pagination-example-1', + standalone: true, + imports: [ + TuiInputSliderModule, + TuiTextfieldControllerModule, + FormsModule, + TuiPaginationModule, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiPaginationExample1 { +export default class PageComponent { protected length = 64; protected index = 10; diff --git a/projects/demo/src/modules/components/pagination/examples/2/index.ts b/projects/demo/src/modules/components/pagination/examples/2/index.ts index df3cbc607b4d..7a88bc44f98a 100644 --- a/projects/demo/src/modules/components/pagination/examples/2/index.ts +++ b/projects/demo/src/modules/components/pagination/examples/2/index.ts @@ -1,14 +1,24 @@ import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiPaginationModule} from '@taiga-ui/kit'; +import {TuiInputSliderModule} from '@taiga-ui/legacy'; @Component({ - selector: 'tui-pagination-example-2', + standalone: true, + imports: [ + TuiInputSliderModule, + TuiTextfieldControllerModule, + FormsModule, + TuiPaginationModule, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiPaginationExample2 { +export default class PageComponent { protected activePadding = 2; } diff --git a/projects/demo/src/modules/components/pagination/examples/3/index.ts b/projects/demo/src/modules/components/pagination/examples/3/index.ts index 9940a1505162..db2c7c8f932d 100644 --- a/projects/demo/src/modules/components/pagination/examples/3/index.ts +++ b/projects/demo/src/modules/components/pagination/examples/3/index.ts @@ -1,14 +1,24 @@ import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiPaginationModule} from '@taiga-ui/kit'; +import {TuiInputSliderModule} from '@taiga-ui/legacy'; @Component({ - selector: 'tui-pagination-example-3', + standalone: true, + imports: [ + TuiInputSliderModule, + TuiTextfieldControllerModule, + FormsModule, + TuiPaginationModule, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiPaginationExample3 { +export default class PageComponent { protected sidePadding = 3; } diff --git a/projects/demo/src/modules/components/pagination/examples/4/index.ts b/projects/demo/src/modules/components/pagination/examples/4/index.ts index 6096c6201cfc..a6ff78806996 100644 --- a/projects/demo/src/modules/components/pagination/examples/4/index.ts +++ b/projects/demo/src/modules/components/pagination/examples/4/index.ts @@ -1,13 +1,15 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiPaginationModule} from '@taiga-ui/kit'; @Component({ - selector: 'tui-pagination-example-4', + standalone: true, + imports: [TuiPaginationModule], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiPaginationExample4 { +export default class PageComponent { protected readonly days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; } diff --git a/projects/demo/src/modules/components/pagination/examples/import/import-module.md b/projects/demo/src/modules/components/pagination/examples/import/import.md similarity index 100% rename from projects/demo/src/modules/components/pagination/examples/import/import-module.md rename to projects/demo/src/modules/components/pagination/examples/import/import.md diff --git a/projects/demo/src/modules/components/pagination/examples/import/insert-template.md b/projects/demo/src/modules/components/pagination/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/pagination/examples/import/insert-template.md rename to projects/demo/src/modules/components/pagination/examples/import/template.md diff --git a/projects/demo/src/modules/components/pagination/pagination.template.html b/projects/demo/src/modules/components/pagination/index.html similarity index 83% rename from projects/demo/src/modules/components/pagination/pagination.template.html rename to projects/demo/src/modules/components/pagination/index.html index 7333fc4c78b5..f22e99357c8a 100644 --- a/projects/demo/src/modules/components/pagination/pagination.template.html +++ b/projects/demo/src/modules/components/pagination/index.html @@ -9,34 +9,30 @@ - - + [component]="1 | tuiComponent" + [content]="1 | tuiExample" + /> - - + [component]="2 | tuiComponent" + [content]="2 | tuiExample" + /> - - + [component]="3 | tuiComponent" + [content]="3 | tuiExample" + /> - - + [component]="4 | tuiComponent" + [content]="4 | tuiExample: 'html,ts'" + /> @@ -102,10 +98,6 @@ - - - + + diff --git a/projects/demo/src/modules/components/pagination/index.ts b/projects/demo/src/modules/components/pagination/index.ts new file mode 100644 index 000000000000..17af9100afa1 --- /dev/null +++ b/projects/demo/src/modules/components/pagination/index.ts @@ -0,0 +1,21 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDemo} from '@demo/utils'; +import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; +import {TuiPaginationModule} from '@taiga-ui/kit'; + +@Component({ + standalone: true, + imports: [TuiDemo, TuiPaginationModule], + templateUrl: './index.html', + changeDetection, +}) +export default class PageComponent { + protected focusable = true; + protected index = 0; + protected length = 8; + protected readonly sizeVariants: ReadonlyArray = ['s', 'm', 'l']; + protected size = this.sizeVariants[2]; + protected activePadding = 1; + protected sidePadding = 1; +} diff --git a/projects/demo/src/modules/components/pagination/pagination.component.ts b/projects/demo/src/modules/components/pagination/pagination.component.ts deleted file mode 100644 index 855cdf162095..000000000000 --- a/projects/demo/src/modules/components/pagination/pagination.component.ts +++ /dev/null @@ -1,45 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; -import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; - -@Component({ - selector: 'example-tui-pagination', - templateUrl: './pagination.template.html', - changeDetection, -}) -export class ExampleTuiPaginationComponent { - protected readonly exampleModule = import('./examples/import/import-module.md?raw'); - protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - LESS: import('./examples/1/index.less?raw'), - }; - - protected readonly example2: TuiDocExample = { - TypeScript: import('./examples/2/index.ts?raw'), - HTML: import('./examples/2/index.html?raw'), - LESS: import('./examples/1/index.less?raw'), - }; - - protected readonly example3: TuiDocExample = { - TypeScript: import('./examples/3/index.ts?raw'), - HTML: import('./examples/3/index.html?raw'), - LESS: import('./examples/1/index.less?raw'), - }; - - protected readonly example4: TuiDocExample = { - TypeScript: import('./examples/4/index.ts?raw'), - HTML: import('./examples/4/index.html?raw'), - }; - - protected focusable = true; - protected index = 0; - protected length = 8; - protected readonly sizeVariants: ReadonlyArray = ['s', 'm', 'l']; - protected size = this.sizeVariants[2]; - protected activePadding = 1; - protected sidePadding = 1; -} diff --git a/projects/demo/src/modules/components/pagination/pagination.module.ts b/projects/demo/src/modules/components/pagination/pagination.module.ts deleted file mode 100644 index f0e0617a7b22..000000000000 --- a/projects/demo/src/modules/components/pagination/pagination.module.ts +++ /dev/null @@ -1,46 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {TuiSetupComponent} from '@demo/utils'; -import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiTextfieldControllerModule} from '@taiga-ui/core'; -import { - TuiBadgeDirective, - TuiPaginationModule, - TuiRadioListComponent, -} from '@taiga-ui/kit'; -import {TuiInputSliderModule} from '@taiga-ui/legacy'; -import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; - -import {TuiPaginationExample1} from './examples/1'; -import {TuiPaginationExample2} from './examples/2'; -import {TuiPaginationExample3} from './examples/3'; -import {TuiPaginationExample4} from './examples/4'; -import {ExampleTuiPaginationComponent} from './pagination.component'; - -@NgModule({ - imports: [ - TuiBadgeDirective, - TuiPaginationModule, - TuiInputSliderModule, - CommonModule, - TuiRadioListComponent, - FormsModule, - ReactiveFormsModule, - TuiAddonDoc, - TuiTextfieldControllerModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiPaginationComponent)), - PolymorpheusModule, - TuiSetupComponent, - ], - declarations: [ - ExampleTuiPaginationComponent, - TuiPaginationExample1, - TuiPaginationExample2, - TuiPaginationExample3, - TuiPaginationExample4, - ], - exports: [ExampleTuiPaginationComponent], -}) -export class ExampleTuiPaginationModule {} diff --git a/projects/demo/src/modules/components/push/examples/1/index.ts b/projects/demo/src/modules/components/push/examples/1/index.ts index 7c1716f36c97..3ee92da0c4c5 100644 --- a/projects/demo/src/modules/components/push/examples/1/index.ts +++ b/projects/demo/src/modules/components/push/examples/1/index.ts @@ -1,16 +1,18 @@ import {Component, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiAlertService} from '@taiga-ui/core'; +import {TuiAlertService, TuiButtonDirective, TuiSvgComponent} from '@taiga-ui/core'; +import {TuiPushComponent} from '@taiga-ui/kit'; @Component({ - selector: 'tui-push-example-1', + standalone: true, + imports: [TuiPushComponent, TuiSvgComponent, TuiButtonDirective], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiPushExample1 { +export default class ExampleComponent { private readonly alert = inject(TuiAlertService); protected onClose(): void { diff --git a/projects/demo/src/modules/components/push/examples/2/index.ts b/projects/demo/src/modules/components/push/examples/2/index.ts index 029a210a46a9..55bed5cc932e 100644 --- a/projects/demo/src/modules/components/push/examples/2/index.ts +++ b/projects/demo/src/modules/components/push/examples/2/index.ts @@ -1,17 +1,18 @@ import {Component, inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiAlertService} from '@taiga-ui/core'; +import {TuiAlertService, TuiButtonDirective} from '@taiga-ui/core'; import {TuiPushService} from '@taiga-ui/kit'; import {switchMap, take} from 'rxjs'; @Component({ - selector: 'tui-push-example-2', + standalone: true, + imports: [TuiButtonDirective], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiPushExample2 { +export default class ExampleComponent { protected readonly push = inject(TuiPushService); protected readonly alert = inject(TuiAlertService); diff --git a/projects/demo/src/modules/components/push/examples/3/index.ts b/projects/demo/src/modules/components/push/examples/3/index.ts index 1885b5bef09a..79042d5ec299 100644 --- a/projects/demo/src/modules/components/push/examples/3/index.ts +++ b/projects/demo/src/modules/components/push/examples/3/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 {TuiButtonDirective, TuiSvgComponent} from '@taiga-ui/core'; +import {TuiPushComponent, TuiPushDirective} from '@taiga-ui/kit'; @Component({ - selector: 'tui-push-example-3', + standalone: true, + imports: [TuiButtonDirective, TuiPushComponent, TuiPushDirective, TuiSvgComponent], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiPushExample3 { +export default class ExampleComponent { protected open = false; protected toggle(open: boolean): void { diff --git a/projects/demo/src/modules/components/push/examples/import/import-module.md b/projects/demo/src/modules/components/push/examples/import/import.md similarity index 100% rename from projects/demo/src/modules/components/push/examples/import/import-module.md rename to projects/demo/src/modules/components/push/examples/import/import.md diff --git a/projects/demo/src/modules/components/push/examples/import/insert-template.md b/projects/demo/src/modules/components/push/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/push/examples/import/insert-template.md rename to projects/demo/src/modules/components/push/examples/import/template.md diff --git a/projects/demo/src/modules/components/push/push.template.html b/projects/demo/src/modules/components/push/index.html similarity index 80% rename from projects/demo/src/modules/components/push/push.template.html rename to projects/demo/src/modules/components/push/index.html index 31644a7ec0b3..7cb950300992 100644 --- a/projects/demo/src/modules/components/push/push.template.html +++ b/projects/demo/src/modules/components/push/index.html @@ -1,6 +1,7 @@

Notifications in style of native browser push

@@ -8,26 +9,23 @@ - - + [component]="1 | tuiComponent" + [content]="1 | tuiExample" + /> - - + [component]="2 | tuiComponent" + [content]="2 | tuiExample: 'html,ts'" + /> - - + [component]="3 | tuiComponent" + [content]="3 | tuiExample: 'html,ts'" + /> @@ -138,29 +136,5 @@ - -
    -
  1. - Add - TuiPushComponent - into your app.module: - - -
    2. - -
  2. -

    Add to the template:

    - - -
    3. - -
  3. See examples to explore display options.
    4. -
- + diff --git a/projects/demo/src/modules/components/push/index.ts b/projects/demo/src/modules/components/push/index.ts new file mode 100644 index 000000000000..f4002f2c8e44 --- /dev/null +++ b/projects/demo/src/modules/components/push/index.ts @@ -0,0 +1,22 @@ +import {Component} from '@angular/core'; +import {RouterLink} from '@angular/router'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiDemo} from '@demo/utils'; +import {TuiLinkDirective, TuiSvgComponent} from '@taiga-ui/core'; +import {TuiPushComponent} from '@taiga-ui/kit'; + +@Component({ + standalone: true, + imports: [TuiDemo, TuiPushComponent, TuiLinkDirective, RouterLink, TuiSvgComponent], + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export default class PageComponent { + protected heading = ''; + protected type = ''; + + protected readonly timestampVars = ['', 'A moment ago', 123456789]; + protected timestamp = this.timestampVars[0]; +} diff --git a/projects/demo/src/modules/components/push/push.component.ts b/projects/demo/src/modules/components/push/push.component.ts deleted file mode 100644 index 9fe53d0f1543..000000000000 --- a/projects/demo/src/modules/components/push/push.component.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; - -@Component({ - selector: 'example-tui-push', - templateUrl: './push.template.html', - encapsulation, - changeDetection, -}) -export class ExampleTuiPushComponent { - protected readonly exampleImportModule = import( - './examples/import/import-module.md?raw' - ); - - protected readonly exampleInsertTemplate = import( - './examples/import/insert-template.md?raw' - ); - - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - LESS: import('./examples/1/index.less?raw'), - }; - - protected readonly example2: TuiDocExample = { - TypeScript: import('./examples/2/index.ts?raw'), - HTML: import('./examples/2/index.html?raw'), - }; - - protected readonly example3: TuiDocExample = { - TypeScript: import('./examples/3/index.ts?raw'), - HTML: import('./examples/3/index.html?raw'), - }; - - protected heading = ''; - protected type = ''; - - protected readonly timestampVars = ['', 'A moment ago', 123456789]; - protected timestamp = this.timestampVars[0]; -} diff --git a/projects/demo/src/modules/components/push/push.module.ts b/projects/demo/src/modules/components/push/push.module.ts deleted file mode 100644 index 969730bfa062..000000000000 --- a/projects/demo/src/modules/components/push/push.module.ts +++ /dev/null @@ -1,32 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {RouterModule} from '@angular/router'; -import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiButtonDirective, TuiLinkDirective, TuiSvgComponent} from '@taiga-ui/core'; -import {TuiPushComponent, TuiPushDirective} from '@taiga-ui/kit'; - -import {TuiPushExample1} from './examples/1'; -import {TuiPushExample2} from './examples/2'; -import {TuiPushExample3} from './examples/3'; -import {ExampleTuiPushComponent} from './push.component'; - -@NgModule({ - imports: [ - CommonModule, - TuiPushComponent, - TuiPushDirective, - TuiButtonDirective, - TuiLinkDirective, - TuiSvgComponent, - TuiAddonDoc, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiPushComponent)), - ], - declarations: [ - ExampleTuiPushComponent, - TuiPushExample1, - TuiPushExample2, - TuiPushExample3, - ], - exports: [ExampleTuiPushComponent], -}) -export class ExampleTuiPushModule {} diff --git a/projects/demo/src/modules/components/range/examples/1/index.ts b/projects/demo/src/modules/components/range/examples/1/index.ts index c50a5f2a0ddf..6059e06822e7 100644 --- a/projects/demo/src/modules/components/range/examples/1/index.ts +++ b/projects/demo/src/modules/components/range/examples/1/index.ts @@ -1,14 +1,16 @@ import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiRangeComponent} from '@taiga-ui/kit'; @Component({ - selector: 'tui-range-example-1', + standalone: true, + imports: [TuiRangeComponent, ReactiveFormsModule], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiRangeExample1 { +export default class ExampleComponent { protected readonly control = new FormControl([4, 6]); } diff --git a/projects/demo/src/modules/components/range/examples/2/index.ts b/projects/demo/src/modules/components/range/examples/2/index.ts index 531e3385ed95..1d4c6b11ac2a 100644 --- a/projects/demo/src/modules/components/range/examples/2/index.ts +++ b/projects/demo/src/modules/components/range/examples/2/index.ts @@ -1,16 +1,28 @@ +import {JsonPipe} from '@angular/common'; import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiSurfaceDirective} from '@taiga-ui/core'; +import {TuiRangeComponent} from '@taiga-ui/kit'; +import {TuiCardLargeDirective} from '@taiga-ui/layout'; @Component({ - selector: 'tui-range-example-2', + standalone: true, + imports: [ + TuiCardLargeDirective, + TuiSurfaceDirective, + TuiRangeComponent, + FormsModule, + JsonPipe, + ReactiveFormsModule, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiRangeExample2 { +export default class ExampleComponent { protected smallRangeValue = [0, 40]; protected readonly bigRangeControl = new FormControl([40, 60]); diff --git a/projects/demo/src/modules/components/range/examples/3/index.ts b/projects/demo/src/modules/components/range/examples/3/index.ts index 1bcb6346f874..5d20c1f8879c 100644 --- a/projects/demo/src/modules/components/range/examples/3/index.ts +++ b/projects/demo/src/modules/components/range/examples/3/index.ts @@ -1,15 +1,28 @@ +import {I18nPluralPipe, JsonPipe, NgForOf, NgIf} 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 {TuiSvgComponent} from '@taiga-ui/core'; +import {TuiRangeComponent} from '@taiga-ui/kit'; @Component({ - selector: 'tui-range-example-3', + standalone: true, + imports: [ + TuiRangeComponent, + FormsModule, + NgForOf, + NgIf, + I18nPluralPipe, + TuiSvgComponent, + JsonPipe, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiRangeExample3 { +export default class ExampleComponent { protected readonly min = 0; protected readonly max = 1000; protected readonly step = 250; diff --git a/projects/demo/src/modules/components/range/examples/4/index.ts b/projects/demo/src/modules/components/range/examples/4/index.ts index aa6f03b42519..249fe36f0062 100644 --- a/projects/demo/src/modules/components/range/examples/4/index.ts +++ b/projects/demo/src/modules/components/range/examples/4/index.ts @@ -1,16 +1,20 @@ +import {JsonPipe, 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 type {TuiKeySteps} from '@taiga-ui/kit'; +import {TuiRangeComponent} from '@taiga-ui/kit'; @Component({ - selector: 'tui-range-example-4', + standalone: true, + imports: [TuiRangeComponent, FormsModule, NgForOf, JsonPipe], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiRangeExample4 { +export default class ExampleComponent { protected readonly ticksLabels = ['0', '10K', '100K', '500k', '1000K']; protected readonly segments = this.ticksLabels.length - 1; diff --git a/projects/demo/src/modules/components/range/examples/import/declare-form.md b/projects/demo/src/modules/components/range/examples/import/declare-form.md deleted file mode 100644 index 6c2b1dbc4d8d..000000000000 --- a/projects/demo/src/modules/components/range/examples/import/declare-form.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import {FormControl, FormGroup} from '@angular/forms'; - -// ... - -@Component({ - // ... -}) -export class MyComponent { - testForm = new FormGroup({ - testValue: new FormControl(0), - }); -} -``` diff --git a/projects/demo/src/modules/components/range/examples/import/import-module.md b/projects/demo/src/modules/components/range/examples/import/import.md similarity index 73% rename from projects/demo/src/modules/components/range/examples/import/import-module.md rename to projects/demo/src/modules/components/range/examples/import/import.md index 873d1e7c9d3c..37d22da6dcbd 100644 --- a/projects/demo/src/modules/components/range/examples/import/import-module.md +++ b/projects/demo/src/modules/components/range/examples/import/import.md @@ -13,5 +13,9 @@ import {TuiRangeComponent} from '@taiga-ui/kit'; TuiRangeComponent, ], }) -class ExampleModule {} +class ExampleModule { + testForm = new FormGroup({ + testValue: new FormControl(0), + }); +} ``` diff --git a/projects/demo/src/modules/components/range/examples/import/insert-template.md b/projects/demo/src/modules/components/range/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/range/examples/import/insert-template.md rename to projects/demo/src/modules/components/range/examples/import/template.md diff --git a/projects/demo/src/modules/components/range/range.template.html b/projects/demo/src/modules/components/range/index.html similarity index 76% rename from projects/demo/src/modules/components/range/range.template.html rename to projects/demo/src/modules/components/range/index.html index 6bf62029f2b3..60100cbbe870 100644 --- a/projects/demo/src/modules/components/range/range.template.html +++ b/projects/demo/src/modules/components/range/index.html @@ -9,24 +9,23 @@ - - + [component]="1 | tuiComponent" + [content]="1 | tuiExample: 'html,ts'" + /> - - + />

@@ -42,16 +41,14 @@ ).

- - - + [component]="4 | tuiComponent" + [content]="4 | tuiExample" + /> @@ -167,42 +164,5 @@ - -
    -
  1. - Import an Angular module for forms and - TuiRangeComponent - in the same module where you want to use our component: - - -
    2. - -
  2. -

    - Declare a form ( - FormGroup - ) or a control ( - FormControl - ) in your component: -

    - - -
    3. - -
  3. -

    Add to the template:

    - - -
    4. -
- + diff --git a/projects/demo/src/modules/components/range/index.ts b/projects/demo/src/modules/components/range/index.ts new file mode 100644 index 000000000000..2a3364bba1ac --- /dev/null +++ b/projects/demo/src/modules/components/range/index.ts @@ -0,0 +1,54 @@ +import {Component} from '@angular/core'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDemo} from '@demo/utils'; +import type {TuiSizeS} from '@taiga-ui/core'; +import {TuiNotificationComponent} from '@taiga-ui/core'; +import type {TuiKeySteps} from '@taiga-ui/kit'; +import {TuiRangeComponent} from '@taiga-ui/kit'; + +@Component({ + standalone: true, + imports: [TuiDemo, TuiNotificationComponent, TuiRangeComponent, ReactiveFormsModule], + templateUrl: './index.html', + changeDetection, +}) +export default class PageComponent { + protected readonly control = new FormControl([0, 0]); + + protected readonly sizeVariants: readonly TuiSizeS[] = ['s', 'm']; + + protected size: TuiSizeS = this.sizeVariants[1]; + + protected min = 0; + + protected max = 100; + + protected step = 1; + + protected segments = 1; + + protected readonly keyStepsVariants: readonly TuiKeySteps[] = [ + [ + [0, 0], + [50, 1_000], + [100, 10_000], + ], + ]; + + protected keySteps: TuiKeySteps | null = null; + + protected get disabled(): boolean { + return this.control.disabled; + } + + protected set disabled(value: boolean) { + if (value) { + this.control.disable(); + + return; + } + + this.control.enable(); + } +} diff --git a/projects/demo/src/modules/components/range/range.component.ts b/projects/demo/src/modules/components/range/range.component.ts deleted file mode 100644 index 34295024d292..000000000000 --- a/projects/demo/src/modules/components/range/range.component.ts +++ /dev/null @@ -1,78 +0,0 @@ -import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; -import type {TuiSizeS} from '@taiga-ui/core'; -import type {TuiKeySteps} from '@taiga-ui/kit'; - -@Component({ - selector: 'example-range', - templateUrl: './range.template.html', - changeDetection, -}) -export class ExampleTuiRangeComponent { - protected readonly exampleModule = import('./examples/import/import-module.md?raw'); - protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - protected readonly exampleForm = import('./examples/import/declare-form.md?raw'); - - protected readonly example1: TuiDocExample = { - HTML: import('./examples/1/index.html?raw'), - TypeScript: import('./examples/1/index.ts?raw'), - }; - - protected readonly example2: TuiDocExample = { - HTML: import('./examples/2/index.html?raw'), - TypeScript: import('./examples/2/index.ts?raw'), - LESS: import('./examples/2/index.less?raw'), - }; - - protected readonly example3: TuiDocExample = { - HTML: import('./examples/3/index.html?raw'), - LESS: import('./examples/3/index.less?raw'), - TypeScript: import('./examples/3/index.ts?raw'), - }; - - protected readonly example4: TuiDocExample = { - HTML: import('./examples/4/index.html?raw'), - TypeScript: import('./examples/4/index.ts?raw'), - LESS: import('./examples/4/index.less?raw'), - }; - - protected readonly control = new FormControl([0, 0]); - - protected readonly sizeVariants: readonly TuiSizeS[] = ['s', 'm']; - - protected size: TuiSizeS = this.sizeVariants[1]; - - protected min = 0; - - protected max = 100; - - protected step = 1; - - protected segments = 1; - - protected readonly keyStepsVariants: readonly TuiKeySteps[] = [ - [ - [0, 0], - [50, 1_000], - [100, 10_000], - ], - ]; - - protected keySteps: TuiKeySteps | null = null; - - protected get disabled(): boolean { - return this.control.disabled; - } - - protected set disabled(value: boolean) { - if (value) { - this.control.disable(); - - return; - } - - this.control.enable(); - } -} diff --git a/projects/demo/src/modules/components/range/range.module.ts b/projects/demo/src/modules/components/range/range.module.ts deleted file mode 100644 index de6d848dc60e..000000000000 --- a/projects/demo/src/modules/components/range/range.module.ts +++ /dev/null @@ -1,45 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import { - TuiLinkDirective, - TuiNotificationComponent, - TuiSurfaceDirective, - TuiSvgComponent, -} from '@taiga-ui/core'; -import {TuiRadioListComponent, TuiRangeComponent} from '@taiga-ui/kit'; -import {TuiCardLargeDirective} from '@taiga-ui/layout'; - -import {TuiRangeExample1} from './examples/1'; -import {TuiRangeExample2} from './examples/2'; -import {TuiRangeExample3} from './examples/3'; -import {TuiRangeExample4} from './examples/4'; -import {ExampleTuiRangeComponent} from './range.component'; - -@NgModule({ - imports: [ - TuiRadioListComponent, - TuiRangeComponent, - CommonModule, - FormsModule, - ReactiveFormsModule, - TuiLinkDirective, - TuiAddonDoc, - TuiNotificationComponent, - TuiSvgComponent, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiRangeComponent)), - TuiCardLargeDirective, - TuiSurfaceDirective, - ], - declarations: [ - ExampleTuiRangeComponent, - TuiRangeExample1, - TuiRangeExample2, - TuiRangeExample3, - TuiRangeExample4, - ], - exports: [ExampleTuiRangeComponent], -}) -export class ExampleTuiRangeModule {} diff --git a/projects/demo/src/modules/components/scrollbar/examples/1/template.html b/projects/demo/src/modules/components/scrollbar/examples/1/index.html similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/1/template.html rename to projects/demo/src/modules/components/scrollbar/examples/1/index.html diff --git a/projects/demo/src/modules/components/scrollbar/examples/1/style.less b/projects/demo/src/modules/components/scrollbar/examples/1/index.less similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/1/style.less rename to projects/demo/src/modules/components/scrollbar/examples/1/index.less diff --git a/projects/demo/src/modules/components/scrollbar/examples/1/component.ts b/projects/demo/src/modules/components/scrollbar/examples/1/index.ts similarity index 50% rename from projects/demo/src/modules/components/scrollbar/examples/1/component.ts rename to projects/demo/src/modules/components/scrollbar/examples/1/index.ts index 08cbc2f88f91..1665655adccb 100644 --- a/projects/demo/src/modules/components/scrollbar/examples/1/component.ts +++ b/projects/demo/src/modules/components/scrollbar/examples/1/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 {TuiScrollbarComponent} from '@taiga-ui/core'; @Component({ - selector: 'tui-scrollbar-example-1', - templateUrl: './template.html', - styleUrls: ['./style.less'], + standalone: true, + imports: [TuiScrollbarComponent], + templateUrl: './index.html', + styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiScrollbarExample1Component {} +export default class ExampleComponent {} diff --git a/projects/demo/src/modules/components/scrollbar/examples/2/template.html b/projects/demo/src/modules/components/scrollbar/examples/2/index.html similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/2/template.html rename to projects/demo/src/modules/components/scrollbar/examples/2/index.html diff --git a/projects/demo/src/modules/components/scrollbar/examples/2/style.less b/projects/demo/src/modules/components/scrollbar/examples/2/index.less similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/2/style.less rename to projects/demo/src/modules/components/scrollbar/examples/2/index.less diff --git a/projects/demo/src/modules/components/scrollbar/examples/2/component.ts b/projects/demo/src/modules/components/scrollbar/examples/2/index.ts similarity index 50% rename from projects/demo/src/modules/components/scrollbar/examples/2/component.ts rename to projects/demo/src/modules/components/scrollbar/examples/2/index.ts index 0c4c4e631523..1665655adccb 100644 --- a/projects/demo/src/modules/components/scrollbar/examples/2/component.ts +++ b/projects/demo/src/modules/components/scrollbar/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 {TuiScrollbarComponent} from '@taiga-ui/core'; @Component({ - selector: 'tui-scrollbar-example-2', - templateUrl: './template.html', - styleUrls: ['./style.less'], + standalone: true, + imports: [TuiScrollbarComponent], + templateUrl: './index.html', + styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiScrollbarExample2Component {} +export default class ExampleComponent {} diff --git a/projects/demo/src/modules/components/scrollbar/examples/3/template.html b/projects/demo/src/modules/components/scrollbar/examples/3/index.html similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/3/template.html rename to projects/demo/src/modules/components/scrollbar/examples/3/index.html diff --git a/projects/demo/src/modules/components/scrollbar/examples/3/style.less b/projects/demo/src/modules/components/scrollbar/examples/3/index.less similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/3/style.less rename to projects/demo/src/modules/components/scrollbar/examples/3/index.less diff --git a/projects/demo/src/modules/components/scrollbar/examples/3/component.ts b/projects/demo/src/modules/components/scrollbar/examples/3/index.ts similarity index 78% rename from projects/demo/src/modules/components/scrollbar/examples/3/component.ts rename to projects/demo/src/modules/components/scrollbar/examples/3/index.ts index ed3abef9c64f..148795bcb04d 100644 --- a/projects/demo/src/modules/components/scrollbar/examples/3/component.ts +++ b/projects/demo/src/modules/components/scrollbar/examples/3/index.ts @@ -1,18 +1,19 @@ import {Component, ElementRef, ViewChild} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiScrollbarComponent} from '@taiga-ui/core'; +import {TuiButtonDirective, TuiScrollbarComponent} from '@taiga-ui/core'; const SOME_OFFSET_CONST = 20; @Component({ - selector: 'tui-scrollbar-example-3', - templateUrl: './template.html', - styleUrls: ['./style.less'], + standalone: true, + imports: [TuiButtonDirective, TuiScrollbarComponent], + templateUrl: './index.html', + styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiScrollbarExample3Component { +export default class ExampleComponent { @ViewChild(TuiScrollbarComponent, {read: ElementRef}) private readonly scrollBar?: ElementRef; diff --git a/projects/demo/src/modules/components/scrollbar/examples/4/template.html b/projects/demo/src/modules/components/scrollbar/examples/4/index.html similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/4/template.html rename to projects/demo/src/modules/components/scrollbar/examples/4/index.html diff --git a/projects/demo/src/modules/components/scrollbar/examples/4/style.less b/projects/demo/src/modules/components/scrollbar/examples/4/index.less similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/4/style.less rename to projects/demo/src/modules/components/scrollbar/examples/4/index.less diff --git a/projects/demo/src/modules/components/scrollbar/examples/4/component.ts b/projects/demo/src/modules/components/scrollbar/examples/4/index.ts similarity index 50% rename from projects/demo/src/modules/components/scrollbar/examples/4/component.ts rename to projects/demo/src/modules/components/scrollbar/examples/4/index.ts index b01c6c44e368..1665655adccb 100644 --- a/projects/demo/src/modules/components/scrollbar/examples/4/component.ts +++ b/projects/demo/src/modules/components/scrollbar/examples/4/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 {TuiScrollbarComponent} from '@taiga-ui/core'; @Component({ - selector: 'tui-scrollbar-example-4', - templateUrl: './template.html', - styleUrls: ['./style.less'], + standalone: true, + imports: [TuiScrollbarComponent], + templateUrl: './index.html', + styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiScrollbarExample4Component {} +export default class ExampleComponent {} diff --git a/projects/demo/src/modules/components/scrollbar/examples/5/template.html b/projects/demo/src/modules/components/scrollbar/examples/5/index.html similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/5/template.html rename to projects/demo/src/modules/components/scrollbar/examples/5/index.html diff --git a/projects/demo/src/modules/components/scrollbar/examples/5/style.less b/projects/demo/src/modules/components/scrollbar/examples/5/index.less similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/5/style.less rename to projects/demo/src/modules/components/scrollbar/examples/5/index.less diff --git a/projects/demo/src/modules/components/scrollbar/examples/5/component.ts b/projects/demo/src/modules/components/scrollbar/examples/5/index.ts similarity index 50% rename from projects/demo/src/modules/components/scrollbar/examples/5/component.ts rename to projects/demo/src/modules/components/scrollbar/examples/5/index.ts index 9e47f2b8de47..1665655adccb 100644 --- a/projects/demo/src/modules/components/scrollbar/examples/5/component.ts +++ b/projects/demo/src/modules/components/scrollbar/examples/5/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 {TuiScrollbarComponent} from '@taiga-ui/core'; @Component({ - selector: 'tui-scrollbar-example-5', - templateUrl: './template.html', - styleUrls: ['./style.less'], + standalone: true, + imports: [TuiScrollbarComponent], + templateUrl: './index.html', + styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiScrollbarExample5Component {} +export default class ExampleComponent {} diff --git a/projects/demo/src/modules/components/scrollbar/examples/6/component.ts b/projects/demo/src/modules/components/scrollbar/examples/6/component.ts deleted file mode 100644 index 16a42d12cb3e..000000000000 --- a/projects/demo/src/modules/components/scrollbar/examples/6/component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; - -@Component({ - selector: 'tui-scrollbar-example-6', - templateUrl: './template.html', - styleUrls: ['./style.less'], - encapsulation, - changeDetection, -}) -export class TuiScrollbarExample6Component { - protected items = Array.from({length: 10000}).map((_, i) => `Item #${i}`); - - protected add(): void { - this.items = [...this.items, `Item #${this.items.length}`]; - } -} diff --git a/projects/demo/src/modules/components/scrollbar/examples/6/template.html b/projects/demo/src/modules/components/scrollbar/examples/6/index.html similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/6/template.html rename to projects/demo/src/modules/components/scrollbar/examples/6/index.html diff --git a/projects/demo/src/modules/components/scrollbar/examples/6/style.less b/projects/demo/src/modules/components/scrollbar/examples/6/index.less similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/6/style.less rename to projects/demo/src/modules/components/scrollbar/examples/6/index.less diff --git a/projects/demo/src/modules/components/scrollbar/examples/6/index.ts b/projects/demo/src/modules/components/scrollbar/examples/6/index.ts new file mode 100644 index 000000000000..33180ea42d4c --- /dev/null +++ b/projects/demo/src/modules/components/scrollbar/examples/6/index.ts @@ -0,0 +1,31 @@ +import { + CdkFixedSizeVirtualScroll, + CdkVirtualForOf, + CdkVirtualScrollViewport, +} from '@angular/cdk/scrolling'; +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiScrollableDirective, TuiScrollbarComponent} from '@taiga-ui/core'; + +@Component({ + standalone: true, + imports: [ + TuiScrollbarComponent, + TuiScrollableDirective, + CdkVirtualScrollViewport, + CdkFixedSizeVirtualScroll, + CdkVirtualForOf, + ], + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export default class ExampleComponent { + protected items = Array.from({length: 10000}).map((_, i) => `Item #${i}`); + + protected add(): void { + this.items = [...this.items, `Item #${this.items.length}`]; + } +} diff --git a/projects/demo/src/modules/components/scrollbar/examples/import/import-module.md b/projects/demo/src/modules/components/scrollbar/examples/import/import.md similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/import/import-module.md rename to projects/demo/src/modules/components/scrollbar/examples/import/import.md diff --git a/projects/demo/src/modules/components/scrollbar/examples/import/insert-template.md b/projects/demo/src/modules/components/scrollbar/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/scrollbar/examples/import/insert-template.md rename to projects/demo/src/modules/components/scrollbar/examples/import/template.md diff --git a/projects/demo/src/modules/components/scrollbar/scrollbar.template.html b/projects/demo/src/modules/components/scrollbar/index.html similarity index 64% rename from projects/demo/src/modules/components/scrollbar/scrollbar.template.html rename to projects/demo/src/modules/components/scrollbar/index.html index 8aba74623598..6924b39dfd73 100644 --- a/projects/demo/src/modules/components/scrollbar/scrollbar.template.html +++ b/projects/demo/src/modules/components/scrollbar/index.html @@ -20,47 +20,43 @@ - - + [component]="1 | tuiComponent" + [content]="1 | tuiExample" + /> - - + [component]="2 | tuiComponent" + [content]="2 | tuiExample" + /> - - + [component]="3 | tuiComponent" + [content]="3 | tuiExample" + /> - - + [component]="4 | tuiComponent" + [content]="4 | tuiExample" + /> - - + [component]="5 | tuiComponent" + [content]="5 | tuiExample" + />

Use @@ -69,14 +65,8 @@ @angular/cdk .

- - - - + diff --git a/projects/demo/src/modules/components/scrollbar/index.ts b/projects/demo/src/modules/components/scrollbar/index.ts new file mode 100644 index 000000000000..4ce3b26d133a --- /dev/null +++ b/projects/demo/src/modules/components/scrollbar/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDemo} from '@demo/utils'; +import {TuiNotificationComponent} from '@taiga-ui/core'; + +@Component({ + standalone: true, + imports: [TuiDemo, TuiNotificationComponent], + templateUrl: './index.html', + changeDetection, +}) +export default class PageComponent {} diff --git a/projects/demo/src/modules/components/scrollbar/scrollbar.component.ts b/projects/demo/src/modules/components/scrollbar/scrollbar.component.ts deleted file mode 100644 index d91116ca7b69..000000000000 --- a/projects/demo/src/modules/components/scrollbar/scrollbar.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; - -@Component({ - selector: 'example-tui-scrollbar', - templateUrl: './scrollbar.template.html', - changeDetection, -}) -export class ExampleTuiScrollbarComponent { - protected readonly exampleModule = import('./examples/import/import-module.md?raw'); - protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/component.ts?raw'), - HTML: import('./examples/1/template.html?raw'), - LESS: import('./examples/1/style.less?raw'), - }; - - protected readonly example2: TuiDocExample = { - TypeScript: import('./examples/2/component.ts?raw'), - HTML: import('./examples/2/template.html?raw'), - LESS: import('./examples/2/style.less?raw'), - }; - - protected readonly example3: TuiDocExample = { - TypeScript: import('./examples/3/component.ts?raw'), - HTML: import('./examples/3/template.html?raw'), - LESS: import('./examples/3/style.less?raw'), - }; - - protected readonly example4: TuiDocExample = { - TypeScript: import('./examples/4/component.ts?raw'), - HTML: import('./examples/4/template.html?raw'), - }; - - protected readonly example5: TuiDocExample = { - TypeScript: import('./examples/5/component.ts?raw'), - HTML: import('./examples/5/template.html?raw'), - }; - - protected readonly example6: TuiDocExample = { - TypeScript: import('./examples/6/component.ts?raw'), - HTML: import('./examples/6/template.html?raw'), - LESS: import('./examples/6/style.less?raw'), - }; -} diff --git a/projects/demo/src/modules/components/scrollbar/scrollbar.module.ts b/projects/demo/src/modules/components/scrollbar/scrollbar.module.ts deleted file mode 100644 index f3574d2372a2..000000000000 --- a/projects/demo/src/modules/components/scrollbar/scrollbar.module.ts +++ /dev/null @@ -1,45 +0,0 @@ -import {ScrollingModule} from '@angular/cdk/scrolling'; -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {RouterModule} from '@angular/router'; -import {TuiSetupComponent} from '@demo/utils'; -import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import { - TuiButtonDirective, - TuiNotificationComponent, - TuiScrollableDirective, - TuiScrollbarComponent, -} from '@taiga-ui/core'; - -import {TuiScrollbarExample1Component} from './examples/1/component'; -import {TuiScrollbarExample2Component} from './examples/2/component'; -import {TuiScrollbarExample3Component} from './examples/3/component'; -import {TuiScrollbarExample4Component} from './examples/4/component'; -import {TuiScrollbarExample5Component} from './examples/5/component'; -import {TuiScrollbarExample6Component} from './examples/6/component'; -import {ExampleTuiScrollbarComponent} from './scrollbar.component'; - -@NgModule({ - imports: [ - CommonModule, - ScrollingModule, - TuiButtonDirective, - TuiScrollbarComponent, - TuiNotificationComponent, - TuiAddonDoc, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiScrollbarComponent)), - TuiScrollableDirective, - TuiSetupComponent, - ], - declarations: [ - ExampleTuiScrollbarComponent, - TuiScrollbarExample1Component, - TuiScrollbarExample2Component, - TuiScrollbarExample3Component, - TuiScrollbarExample4Component, - TuiScrollbarExample5Component, - TuiScrollbarExample6Component, - ], - exports: [ExampleTuiScrollbarComponent], -}) -export class ExampleTuiScrollbarModule {} diff --git a/projects/demo/src/modules/components/select/examples/1/index.ts b/projects/demo/src/modules/components/select/examples/1/index.ts index b4446f672d10..0a636593fa52 100644 --- a/projects/demo/src/modules/components/select/examples/1/index.ts +++ b/projects/demo/src/modules/components/select/examples/1/index.ts @@ -1,15 +1,25 @@ import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiDataListDirective, TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiDataListWrapperComponent} from '@taiga-ui/kit'; +import {TuiSelectModule} from '@taiga-ui/legacy'; @Component({ - selector: 'tui-select-example-1', + standalone: true, + imports: [ + TuiSelectModule, + TuiTextfieldControllerModule, + ReactiveFormsModule, + TuiDataListWrapperComponent, + TuiDataListDirective, + ], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiSelectExample1 { +export default class ExampleComponent { protected items = [ 'Luke Skywalker', 'Leia Organa Solo', diff --git a/projects/demo/src/modules/components/select/examples/10/index.ts b/projects/demo/src/modules/components/select/examples/10/index.ts index 22e110bd0689..44b6a6c554ef 100644 --- a/projects/demo/src/modules/components/select/examples/10/index.ts +++ b/projects/demo/src/modules/components/select/examples/10/index.ts @@ -1,8 +1,10 @@ import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {tuiItemsHandlersProvider} from '@taiga-ui/kit'; +import {TuiDataListDirective, TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiDataListWrapperComponent, tuiItemsHandlersProvider} from '@taiga-ui/kit'; +import {TuiSelectModule} from '@taiga-ui/legacy'; interface Employee { readonly dept: { @@ -14,7 +16,14 @@ interface Employee { } @Component({ - selector: 'tui-select-example-10', + standalone: true, + imports: [ + TuiSelectModule, + TuiTextfieldControllerModule, + ReactiveFormsModule, + TuiDataListWrapperComponent, + TuiDataListDirective, + ], templateUrl: './index.html', encapsulation, changeDetection, @@ -24,7 +33,7 @@ interface Employee { }), ], }) -export class TuiSelectExample10 { +export default class ExampleComponent { protected readonly testValue = new FormControl(null); protected readonly items: readonly Employee[] = [ diff --git a/projects/demo/src/modules/components/select/examples/11/index.ts b/projects/demo/src/modules/components/select/examples/11/index.ts index 81acb3b7d696..433238566e15 100644 --- a/projects/demo/src/modules/components/select/examples/11/index.ts +++ b/projects/demo/src/modules/components/select/examples/11/index.ts @@ -1,8 +1,10 @@ import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import type {TuiBooleanHandler, TuiStringHandler} from '@taiga-ui/cdk'; +import {TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiSelectModule} from '@taiga-ui/legacy'; interface Item { id: number; @@ -10,12 +12,13 @@ interface Item { } @Component({ - selector: 'tui-select-example-11', + standalone: true, + imports: [TuiSelectModule, ReactiveFormsModule, TuiTextfieldControllerModule], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiSelectExample11 { +export default class ExampleComponent { protected itemStringControl = new FormControl(null); protected itemGroupControl = new FormControl(null); protected itemControl = new FormControl(null); diff --git a/projects/demo/src/modules/components/select/examples/2/index.ts b/projects/demo/src/modules/components/select/examples/2/index.ts index 71e1f405ed89..92686efe6c73 100644 --- a/projects/demo/src/modules/components/select/examples/2/index.ts +++ b/projects/demo/src/modules/components/select/examples/2/index.ts @@ -1,8 +1,16 @@ +import {AsyncPipe} from '@angular/common'; import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; +import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiCurrency} from '@taiga-ui/addon-commerce'; +import { + TuiAmountPipe, + TuiCurrency, + TuiThumbnailCardComponent, +} from '@taiga-ui/addon-commerce'; +import {TuiDataListDirective, TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiDataListWrapperComponent} from '@taiga-ui/kit'; +import {TuiSelectModule} from '@taiga-ui/legacy'; class Card { constructor( @@ -21,13 +29,23 @@ class Account { } @Component({ - selector: 'tui-select-example-2', + standalone: true, + imports: [ + ReactiveFormsModule, + TuiSelectModule, + TuiDataListWrapperComponent, + TuiDataListDirective, + TuiTextfieldControllerModule, + TuiThumbnailCardComponent, + TuiAmountPipe, + AsyncPipe, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSelectExample2 { +export default class ExampleComponent { protected cards = [ new Card('Bitcoin', '*6713'), new Card('Money', '*4562'), diff --git a/projects/demo/src/modules/components/select/examples/3/index.ts b/projects/demo/src/modules/components/select/examples/3/index.ts index 29ad73e8b582..f0217dbff469 100644 --- a/projects/demo/src/modules/components/select/examples/3/index.ts +++ b/projects/demo/src/modules/components/select/examples/3/index.ts @@ -1,16 +1,41 @@ +import {NgForOf, NgIf} from '@angular/common'; import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; +import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiAutoFocusDirective} from '@taiga-ui/cdk'; +import { + TuiButtonDirective, + TuiDataListComponent, + TuiDataListDirective, + TuiOptionComponent, + TuiSvgComponent, + TuiTextfieldControllerModule, +} from '@taiga-ui/core'; +import {TuiSelectModule, TuiTextareaModule} from '@taiga-ui/legacy'; @Component({ - selector: 'tui-select-example-3', + standalone: true, + imports: [ + ReactiveFormsModule, + TuiSelectModule, + TuiTextfieldControllerModule, + TuiDataListComponent, + TuiDataListDirective, + NgIf, + TuiOptionComponent, + TuiSvgComponent, + NgForOf, + TuiTextareaModule, + TuiAutoFocusDirective, + TuiButtonDirective, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSelectExample3 { +export default class ExampleComponent { protected readonly items = [ 'https://twitter.com/marsibarsi', 'https://twitter.com/waterplea', diff --git a/projects/demo/src/modules/components/select/examples/4/index.ts b/projects/demo/src/modules/components/select/examples/4/index.ts index 5c1b5c034c42..6724b7bbfdcf 100644 --- a/projects/demo/src/modules/components/select/examples/4/index.ts +++ b/projects/demo/src/modules/components/select/examples/4/index.ts @@ -1,17 +1,37 @@ +import {NgForOf} from '@angular/common'; import {Component, inject} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiAlertService} from '@taiga-ui/core'; +import { + TuiAlertService, + TuiDataListComponent, + TuiDataListDirective, + TuiOptGroupDirective, + TuiOptionComponent, + TuiSvgComponent, +} from '@taiga-ui/core'; import type {TuiSelectComponent} from '@taiga-ui/legacy'; +import {TuiSelectModule} from '@taiga-ui/legacy'; @Component({ - selector: 'tui-select-example-4', + standalone: true, + imports: [ + TuiSelectModule, + FormsModule, + TuiDataListComponent, + TuiDataListDirective, + TuiOptGroupDirective, + NgForOf, + TuiOptionComponent, + TuiSvgComponent, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSelectExample4 { +export default class ExampleComponent { private readonly alerts = inject(TuiAlertService); protected readonly pythons = [ diff --git a/projects/demo/src/modules/components/select/examples/5/index.ts b/projects/demo/src/modules/components/select/examples/5/index.ts index 51dcfd1eaf85..f46c86d658bb 100644 --- a/projects/demo/src/modules/components/select/examples/5/index.ts +++ b/projects/demo/src/modules/components/select/examples/5/index.ts @@ -1,8 +1,18 @@ +import {AsyncPipe, NgForOf, NgIf} 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 type {TuiContext, TuiStringHandler} from '@taiga-ui/cdk'; -import {tuiPure} from '@taiga-ui/cdk'; +import {TuiLetDirective, tuiPure} from '@taiga-ui/cdk'; +import { + TuiDataListComponent, + TuiDataListDirective, + TuiLoaderComponent, + TuiOptionComponent, + TuiTextfieldControllerModule, +} from '@taiga-ui/core'; +import {TuiSelectModule} from '@taiga-ui/legacy'; import {delay, of} from 'rxjs'; interface Python { @@ -20,13 +30,26 @@ const ITEMS: readonly Python[] = [ ]; @Component({ - selector: 'tui-select-example-5', + standalone: true, + imports: [ + TuiSelectModule, + TuiLetDirective, + TuiTextfieldControllerModule, + FormsModule, + AsyncPipe, + TuiDataListDirective, + TuiDataListComponent, + NgIf, + TuiOptionComponent, + NgForOf, + TuiLoaderComponent, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSelectExample5 { +export default class ExampleComponent { protected value = 42; // Server request for items imitation diff --git a/projects/demo/src/modules/components/select/examples/6/index.ts b/projects/demo/src/modules/components/select/examples/6/index.ts index 3ebb78f65da7..183278ae5c78 100644 --- a/projects/demo/src/modules/components/select/examples/6/index.ts +++ b/projects/demo/src/modules/components/select/examples/6/index.ts @@ -1,8 +1,14 @@ +import {AsyncPipe} 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 {assets} from '@demo/utils'; import type {TuiBooleanHandler} from '@taiga-ui/cdk'; +import {TuiLetDirective} from '@taiga-ui/cdk'; +import {TuiDataListDirective, TuiInitialsPipe} from '@taiga-ui/core'; +import {TuiAvatarComponent, TuiDataListWrapperComponent} from '@taiga-ui/kit'; +import {TuiSelectModule} from '@taiga-ui/legacy'; import {delay, of} from 'rxjs'; class User { @@ -28,13 +34,23 @@ const databaseMockData: readonly User[] = [ ]; @Component({ - selector: 'tui-select-example-6', + standalone: true, + imports: [ + TuiSelectModule, + TuiLetDirective, + AsyncPipe, + FormsModule, + TuiDataListWrapperComponent, + TuiDataListDirective, + TuiAvatarComponent, + TuiInitialsPipe, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSelectExample6 { +export default class ExampleComponent { protected value = null; protected readonly items$ = of(databaseMockData).pipe(delay(5000)); diff --git a/projects/demo/src/modules/components/select/examples/7/index.ts b/projects/demo/src/modules/components/select/examples/7/index.ts index 166ec5de1a62..79d163dbfc99 100644 --- a/projects/demo/src/modules/components/select/examples/7/index.ts +++ b/projects/demo/src/modules/components/select/examples/7/index.ts @@ -1,9 +1,19 @@ +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 type {TuiStringHandler} from '@taiga-ui/cdk'; import {EMPTY_ARRAY} from '@taiga-ui/cdk'; import type {TuiValueContentContext} from '@taiga-ui/core'; +import { + TuiDataListComponent, + TuiDataListDirective, + TuiOptGroupDirective, + TuiOptionComponent, + TuiTitleDirective, +} from '@taiga-ui/core'; +import {TuiMultiSelectModule, TuiSelectModule} from '@taiga-ui/legacy'; interface Account { readonly account: string; @@ -42,13 +52,24 @@ const CASH: Account = { }; @Component({ - selector: 'tui-select-example-7', + standalone: true, + imports: [ + TuiSelectModule, + FormsModule, + TuiDataListDirective, + TuiDataListComponent, + TuiOptGroupDirective, + TuiOptionComponent, + TuiMultiSelectModule, + NgForOf, + TuiTitleDirective, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSelectExample7 { +export default class ExampleComponent { protected value = EMPTY_ARRAY; protected readonly all = EMPTY_ARRAY; diff --git a/projects/demo/src/modules/components/select/examples/8/index.ts b/projects/demo/src/modules/components/select/examples/8/index.ts index beabc3308624..a9086d21367e 100644 --- a/projects/demo/src/modules/components/select/examples/8/index.ts +++ b/projects/demo/src/modules/components/select/examples/8/index.ts @@ -1,15 +1,39 @@ +import { + CdkFixedSizeVirtualScroll, + CdkVirtualForOf, + CdkVirtualScrollViewport, +} from '@angular/cdk/scrolling'; import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import { + TuiDataListComponent, + TuiDataListDirective, + TuiOptionComponent, + TuiScrollableDirective, +} from '@taiga-ui/core'; +import {TuiSelectModule} from '@taiga-ui/legacy'; @Component({ - selector: 'tui-select-example-8', + standalone: true, + imports: [ + TuiSelectModule, + FormsModule, + CdkVirtualScrollViewport, + TuiDataListDirective, + TuiScrollableDirective, + CdkFixedSizeVirtualScroll, + TuiDataListComponent, + CdkVirtualForOf, + TuiOptionComponent, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSelectExample8 { +export default class ExampleComponent { protected value = null; protected readonly countries = [ diff --git a/projects/demo/src/modules/components/select/examples/9/account/my-account.component.html b/projects/demo/src/modules/components/select/examples/9/account/index.html similarity index 100% rename from projects/demo/src/modules/components/select/examples/9/account/my-account.component.html rename to projects/demo/src/modules/components/select/examples/9/account/index.html diff --git a/projects/demo/src/modules/components/select/examples/9/account/my-account.component.less b/projects/demo/src/modules/components/select/examples/9/account/index.less similarity index 100% rename from projects/demo/src/modules/components/select/examples/9/account/my-account.component.less rename to projects/demo/src/modules/components/select/examples/9/account/index.less diff --git a/projects/demo/src/modules/components/select/examples/9/account/my-account.component.ts b/projects/demo/src/modules/components/select/examples/9/account/index.ts similarity index 51% rename from projects/demo/src/modules/components/select/examples/9/account/my-account.component.ts rename to projects/demo/src/modules/components/select/examples/9/account/index.ts index 2e18fa6310ce..9b4fb1199c95 100644 --- a/projects/demo/src/modules/components/select/examples/9/account/my-account.component.ts +++ b/projects/demo/src/modules/components/select/examples/9/account/index.ts @@ -1,6 +1,10 @@ +import {AsyncPipe} from '@angular/common'; import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; import type {TuiCurrencyVariants} from '@taiga-ui/addon-commerce'; +import {TuiAmountPipe} from '@taiga-ui/addon-commerce'; +import {TuiNumberFormatDirective, TuiSvgComponent} from '@taiga-ui/core'; import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; +import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; export interface MyAccount { amount: number; @@ -10,12 +14,20 @@ export interface MyAccount { } @Component({ + standalone: true, selector: 'my-account', - templateUrl: './my-account.component.html', - styleUrls: ['./my-account.component.less'], + imports: [ + TuiSvgComponent, + PolymorpheusModule, + TuiNumberFormatDirective, + TuiAmountPipe, + AsyncPipe, + ], + templateUrl: './index.html', + styleUrls: ['./index.less'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExampleMyAccountComponent { - @Input() + @Input({required: true}) public account!: MyAccount; } diff --git a/projects/demo/src/modules/components/select/examples/9/index.ts b/projects/demo/src/modules/components/select/examples/9/index.ts index 84513d61f91a..496241b60a72 100644 --- a/projects/demo/src/modules/components/select/examples/9/index.ts +++ b/projects/demo/src/modules/components/select/examples/9/index.ts @@ -1,19 +1,38 @@ +import {NgForOf} from '@angular/common'; import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiCurrency} from '@taiga-ui/addon-commerce'; +import { + TuiDataListComponent, + TuiDataListDirective, + TuiOptionComponent, + TuiTextfieldControllerModule, +} from '@taiga-ui/core'; +import {TuiSelectModule} from '@taiga-ui/legacy'; -import type {MyAccount} from './account/my-account.component'; +import type {MyAccount} from './account'; +import {ExampleMyAccountComponent} from './account'; @Component({ - selector: 'tui-select-example-9', + standalone: true, + imports: [ + TuiSelectModule, + TuiTextfieldControllerModule, + ReactiveFormsModule, + TuiDataListDirective, + TuiDataListComponent, + NgForOf, + TuiOptionComponent, + ExampleMyAccountComponent, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSelectExample9 { +export default class ExampleComponent { protected readonly accounts: MyAccount[] = [ { name: 'Dollar deposit', diff --git a/projects/demo/src/modules/components/select/examples/import/declare-form.md b/projects/demo/src/modules/components/select/examples/import/declare-form.md deleted file mode 100644 index 0e736be06367..000000000000 --- a/projects/demo/src/modules/components/select/examples/import/declare-form.md +++ /dev/null @@ -1,14 +0,0 @@ -```ts -import {FormControl, FormGroup} from '@angular/forms'; - -// ... - -@Component({ - // ... -}) -export class MyComponent { - testForm = new FormGroup({ - testValue: new FormControl(), - }); -} -``` diff --git a/projects/demo/src/modules/components/select/examples/import/import-module.md b/projects/demo/src/modules/components/select/examples/import/import.md similarity index 80% rename from projects/demo/src/modules/components/select/examples/import/import-module.md rename to projects/demo/src/modules/components/select/examples/import/import.md index 1c60c29aaa60..8ffd1b6a65ba 100644 --- a/projects/demo/src/modules/components/select/examples/import/import-module.md +++ b/projects/demo/src/modules/components/select/examples/import/import.md @@ -18,5 +18,9 @@ import {TuiSelectModule} from '@taiga-ui/legacy'; ], // ... }) -export class MyComponent {} +export class MyComponent { + testForm = new FormGroup({ + testValue: new FormControl(), + }); +} ``` diff --git a/projects/demo/src/modules/components/select/examples/import/insert-template.md b/projects/demo/src/modules/components/select/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/select/examples/import/insert-template.md rename to projects/demo/src/modules/components/select/examples/import/template.md diff --git a/projects/demo/src/modules/components/select/select.template.html b/projects/demo/src/modules/components/select/index.html similarity index 73% rename from projects/demo/src/modules/components/select/select.template.html rename to projects/demo/src/modules/components/select/index.html index 6efdb31f7410..2fc5ff4a9de9 100644 --- a/projects/demo/src/modules/components/select/select.template.html +++ b/projects/demo/src/modules/components/select/index.html @@ -12,7 +12,8 @@ If you need to set some attributes or listen to events on native @@ -21,61 +22,55 @@ Textfield directive as shown below - - - + [component]="2 | tuiComponent" + [content]="2 | tuiExample" + /> - - + [component]="3 | tuiComponent" + [content]="3 | tuiExample" + /> - - + [component]="4 | tuiComponent" + [content]="4 | tuiExample" + /> - - + [component]="5 | tuiComponent" + [content]="5 | tuiExample" + /> - - + [component]="6 | tuiComponent" + [content]="6 | tuiExample" + /> - - + [component]="7 | tuiComponent" + [content]="7 | tuiExample" + /> @@ -94,29 +89,27 @@ . - - - + /> - - + [component]="10 | tuiComponent" + [content]="10 | tuiExample: 'html,ts'" + /> You can enable native select on mobile devices by putting @@ -125,7 +118,6 @@ tuiSelect directive as shown below - @@ -232,50 +224,5 @@ - -
    -
  1. -

    - Import an Angular module for forms and - TuiSelectModule - in the same module where you want to use our component: -

    - - - -

    - See samples to learn more about working with - tui-data-list-wrapper - or without them -

    -
    2. - -
  2. -

    - Declare a form ( - FormGroup - ) or a control ( - FormControl - ) in your component: -

    - - -
    3. - -
  3. -

    Add to the template:

    - - -
    4. -
- + diff --git a/projects/demo/src/modules/components/select/select.style.less b/projects/demo/src/modules/components/select/index.less similarity index 100% rename from projects/demo/src/modules/components/select/select.style.less rename to projects/demo/src/modules/components/select/index.less diff --git a/projects/demo/src/modules/components/select/index.ts b/projects/demo/src/modules/components/select/index.ts new file mode 100644 index 000000000000..3ef98d669962 --- /dev/null +++ b/projects/demo/src/modules/components/select/index.ts @@ -0,0 +1,115 @@ +import {Component, ViewChild} from '@angular/core'; +import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDemo} from '@demo/utils'; +import type {TuiDocExample} from '@taiga-ui/addon-doc'; +import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc'; +import type {TuiBooleanHandler, TuiIdentityMatcher} from '@taiga-ui/cdk'; +import {TUI_FALSE_HANDLER, tuiProvide} from '@taiga-ui/cdk'; +import type {TuiValueContentContext} from '@taiga-ui/core'; +import { + TuiButtonDirective, + TuiDataListDirective, + TuiDropdownOpenDirective, + TuiDropdownOptionsDirective, + TuiHintOptionsDirective, + TuiLinkDirective, + TuiNotificationComponent, + TuiSvgComponent, + TuiTextfieldControllerModule, +} from '@taiga-ui/core'; +import {TuiDataListWrapperComponent} from '@taiga-ui/kit'; +import {TuiSelectModule} from '@taiga-ui/legacy'; +import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; + +import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor'; +import {AbstractExampleTuiControl} from '../abstract/control'; +import {InheritedDocumentationComponent} from '../abstract/inherited-documentation'; + +class Account { + constructor( + public readonly name: string, + public readonly balance: number, + ) {} + + protected toString(): string { + return `${this.name} (${this.balance})`; + } +} + +@Component({ + standalone: true, + imports: [ + TuiDemo, + TuiNotificationComponent, + TuiLinkDirective, + TuiSelectModule, + ReactiveFormsModule, + TuiDropdownOptionsDirective, + TuiDropdownOpenDirective, + TuiHintOptionsDirective, + TuiTextfieldControllerModule, + TuiDataListWrapperComponent, + TuiDataListDirective, + TuiSvgComponent, + TuiButtonDirective, + InheritedDocumentationComponent, + ], + templateUrl: './index.html', + styleUrls: ['./index.less'], + changeDetection, + providers: [ + tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent), + tuiDocExcludeProperties(['tuiTextfieldPrefix', 'tuiTextfieldPostfix']), + ], +}) +export default class PageComponent extends AbstractExampleTuiControl { + @ViewChild('valueTemplateContent') + private readonly valueTemplateRef: PolymorpheusContent< + TuiValueContentContext + >; + + public readonly iconVariants = ['', 'tuiIconPieChartLarge', 'tuiIconCreditCardLarge']; + + public override iconLeft = this.iconVariants[0]; + + public control = new FormControl(null, Validators.required); + + protected readonly example9: TuiDocExample = { + TypeScript: import('./examples/9/index.ts?raw'), + HTML: import('./examples/9/index.html?raw'), + LESS: import('./examples/9/index.less?raw'), + './account/index.ts': import('./examples/9/account/index.ts?raw'), + './account/index.less': import('./examples/9/account/index.less?raw'), + './account/index.html': import('./examples/9/account/index.html?raw'), + }; + + protected readonly items = [new Account('Ruble', 500), new Account('Dollar', 237)]; + + protected readonly valueTemplateVariants = ['', 'Template']; + + protected selectedValueTemplate = this.valueTemplateVariants[0]; + + protected readonly identityMatcherVariants: ReadonlyArray< + TuiIdentityMatcher + > = [ + (item1, item2) => item1 === item2, + (item1, item2) => item1.balance === item2.balance, + ]; + + protected identityMatcher = this.identityMatcherVariants[0]; + + protected readonly disabledItemHandlerVariants: ReadonlyArray< + TuiBooleanHandler + > = [TUI_FALSE_HANDLER, (item: Account) => item.balance < 300]; + + protected get valueContent(): PolymorpheusContent> { + return this.valueTemplateRef && this.selectedValueTemplate + ? this.valueTemplateRef + : ''; + } + + protected setValue(): void { + this.control.setValue(new Account('Dollar', 237)); + } +} diff --git a/projects/demo/src/modules/components/select/select.component.ts b/projects/demo/src/modules/components/select/select.component.ts deleted file mode 100644 index 8b04aa35c9f1..000000000000 --- a/projects/demo/src/modules/components/select/select.component.ts +++ /dev/null @@ -1,151 +0,0 @@ -import {Component, ViewChild} from '@angular/core'; -import {FormControl, Validators} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; -import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc'; -import type {TuiBooleanHandler, TuiIdentityMatcher} from '@taiga-ui/cdk'; -import {TUI_FALSE_HANDLER, tuiProvide} from '@taiga-ui/cdk'; -import type {TuiValueContentContext} from '@taiga-ui/core'; -import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; - -import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor'; -import {AbstractExampleTuiControl} from '../abstract/control'; - -class Account { - constructor( - public readonly name: string, - public readonly balance: number, - ) {} - - protected toString(): string { - return `${this.name} (${this.balance})`; - } -} - -@Component({ - selector: 'example-tui-select', - templateUrl: './select.template.html', - styleUrls: ['./select.style.less'], - changeDetection, - providers: [ - tuiProvide(ABSTRACT_PROPS_ACCESSOR, ExampleTuiSelectComponent), - tuiDocExcludeProperties(['tuiTextfieldPrefix', 'tuiTextfieldPostfix']), - ], -}) -export class ExampleTuiSelectComponent extends AbstractExampleTuiControl { - @ViewChild('valueTemplateContent') - private readonly valueTemplateRef: PolymorpheusContent< - TuiValueContentContext - >; - - public readonly iconVariants = ['', 'tuiIconPieChartLarge', 'tuiIconCreditCardLarge']; - - public override iconLeft = this.iconVariants[0]; - - public control = new FormControl(null, Validators.required); - - protected readonly exampleModule = import('./examples/import/import-module.md?raw'); - protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); - protected readonly exampleForm = import('./examples/import/declare-form.md?raw'); - - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - }; - - protected readonly example2: TuiDocExample = { - TypeScript: import('./examples/2/index.ts?raw'), - HTML: import('./examples/2/index.html?raw'), - LESS: import('./examples/2/index.less?raw'), - }; - - protected readonly example3: TuiDocExample = { - TypeScript: import('./examples/3/index.ts?raw'), - HTML: import('./examples/3/index.html?raw'), - LESS: import('./examples/3/index.less?raw'), - }; - - protected readonly example4: TuiDocExample = { - TypeScript: import('./examples/4/index.ts?raw'), - HTML: import('./examples/4/index.html?raw'), - LESS: import('./examples/4/index.less?raw'), - }; - - protected readonly example5: TuiDocExample = { - TypeScript: import('./examples/5/index.ts?raw'), - HTML: import('./examples/5/index.html?raw'), - LESS: import('./examples/5/index.less?raw'), - }; - - protected readonly example6: TuiDocExample = { - TypeScript: import('./examples/6/index.ts?raw'), - HTML: import('./examples/6/index.html?raw'), - LESS: import('./examples/6/index.less?raw'), - }; - - protected readonly example7: TuiDocExample = { - TypeScript: import('./examples/7/index.ts?raw'), - HTML: import('./examples/7/index.html?raw'), - LESS: import('./examples/7/index.less?raw'), - }; - - protected readonly example8: TuiDocExample = { - TypeScript: import('./examples/8/index.ts?raw'), - HTML: import('./examples/8/index.html?raw'), - LESS: import('./examples/8/index.less?raw'), - }; - - protected readonly example9: TuiDocExample = { - TypeScript: import('./examples/9/index.ts?raw'), - HTML: import('./examples/9/index.html?raw'), - LESS: import('./examples/9/index.less?raw'), - './account/my-account.component.ts': import( - './examples/9/account/my-account.component.ts?raw' - ), - './account/my-account.component.less': import( - './examples/9/account/my-account.component.less?raw' - ), - './account/my-account.component.html': import( - './examples/9/account/my-account.component.html?raw' - ), - }; - - protected readonly example10: TuiDocExample = { - TypeScript: import('./examples/10/index.ts?raw'), - HTML: import('./examples/10/index.html?raw'), - }; - - protected readonly example11: TuiDocExample = { - TypeScript: import('./examples/11/index.ts?raw'), - HTML: import('./examples/11/index.html?raw'), - }; - - protected readonly items = [new Account('Ruble', 500), new Account('Dollar', 237)]; - - protected readonly valueTemplateVariants = ['', 'Template']; - - protected selectedValueTemplate = this.valueTemplateVariants[0]; - - protected readonly identityMatcherVariants: ReadonlyArray< - TuiIdentityMatcher - > = [ - (item1, item2) => item1 === item2, - (item1, item2) => item1.balance === item2.balance, - ]; - - protected identityMatcher = this.identityMatcherVariants[0]; - - protected readonly disabledItemHandlerVariants: ReadonlyArray< - TuiBooleanHandler - > = [TUI_FALSE_HANDLER, (item: Account) => item.balance < 300]; - - protected get valueContent(): PolymorpheusContent> { - return this.valueTemplateRef && this.selectedValueTemplate - ? this.valueTemplateRef - : ''; - } - - protected setValue(): void { - this.control.setValue(new Account('Dollar', 237)); - } -} diff --git a/projects/demo/src/modules/components/select/select.module.ts b/projects/demo/src/modules/components/select/select.module.ts deleted file mode 100644 index 7a4e36d81a07..000000000000 --- a/projects/demo/src/modules/components/select/select.module.ts +++ /dev/null @@ -1,101 +0,0 @@ -import {ScrollingModule} from '@angular/cdk/scrolling'; -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {TuiAmountPipe, TuiThumbnailCardComponent} from '@taiga-ui/addon-commerce'; -import {TuiAddonDoc, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiAutoFocusDirective, TuiLetDirective, TuiMapperPipe} from '@taiga-ui/cdk'; -import { - TuiButtonDirective, - TuiDataList, - TuiDropdownModule, - TuiHint, - TuiInitialsPipe, - TuiLinkDirective, - TuiLoaderComponent, - TuiNotificationComponent, - TuiNumberFormatDirective, - TuiScrollableDirective, - TuiScrollbarComponent, - TuiSvgComponent, - TuiTextfieldControllerModule, - TuiTitleDirective, -} from '@taiga-ui/core'; -import { - TuiAvatarComponent, - TuiDataListWrapper, - TuiRadioListComponent, -} from '@taiga-ui/kit'; -import {TuiMultiSelectModule, TuiSelectModule, TuiTextareaModule} from '@taiga-ui/legacy'; -import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; - -import {InheritedDocumentationComponent} from '../abstract/inherited-documentation'; -import {TuiSelectExample1} from './examples/1'; -import {TuiSelectExample2} from './examples/2'; -import {TuiSelectExample3} from './examples/3'; -import {TuiSelectExample4} from './examples/4'; -import {TuiSelectExample5} from './examples/5'; -import {TuiSelectExample6} from './examples/6'; -import {TuiSelectExample7} from './examples/7'; -import {TuiSelectExample8} from './examples/8'; -import {TuiSelectExample9} from './examples/9'; -import {ExampleMyAccountComponent} from './examples/9/account/my-account.component'; -import {TuiSelectExample10} from './examples/10'; -import {TuiSelectExample11} from './examples/11'; -import {ExampleTuiSelectComponent} from './select.component'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - ReactiveFormsModule, - PolymorpheusModule, - ScrollingModule, - TuiScrollbarComponent, - TuiDataList, - TuiTextareaModule, - TuiSelectModule, - TuiThumbnailCardComponent, - TuiRadioListComponent, - TuiButtonDirective, - TuiLinkDirective, - TuiAvatarComponent, - TuiSvgComponent, - TuiDropdownModule, - TuiTextfieldControllerModule, - TuiHint, - TuiAutoFocusDirective, - TuiLetDirective, - TuiLoaderComponent, - TuiDataListWrapper, - TuiMultiSelectModule, - TuiNotificationComponent, - InheritedDocumentationComponent, - TuiAddonDoc, - TuiMapperPipe, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSelectComponent)), - TuiAmountPipe, - TuiNumberFormatDirective, - TuiScrollableDirective, - TuiInitialsPipe, - TuiTitleDirective, - ], - declarations: [ - ExampleTuiSelectComponent, - ExampleMyAccountComponent, - TuiSelectExample1, - TuiSelectExample2, - TuiSelectExample3, - TuiSelectExample4, - TuiSelectExample5, - TuiSelectExample6, - TuiSelectExample7, - TuiSelectExample8, - TuiSelectExample9, - TuiSelectExample10, - TuiSelectExample11, - ], - exports: [ExampleTuiSelectComponent], -}) -export class ExampleTuiSelectModule {} diff --git a/projects/demo/src/modules/components/slider/examples/1/index.ts b/projects/demo/src/modules/components/slider/examples/1/index.ts index 0ec81eab9fbd..72f547b12fb8 100644 --- a/projects/demo/src/modules/components/slider/examples/1/index.ts +++ b/projects/demo/src/modules/components/slider/examples/1/index.ts @@ -1,15 +1,17 @@ import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiSliderComponent} from '@taiga-ui/kit'; @Component({ - selector: 'tui-slider-example-1', + standalone: true, + imports: [TuiSliderComponent, FormsModule, ReactiveFormsModule], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiSliderExample1 { +export default class ExampleComponent { protected value = 4; protected formControl = new FormControl(60); } diff --git a/projects/demo/src/modules/components/slider/examples/2/index.ts b/projects/demo/src/modules/components/slider/examples/2/index.ts index ca3110d3ae42..571abe2802bd 100644 --- a/projects/demo/src/modules/components/slider/examples/2/index.ts +++ b/projects/demo/src/modules/components/slider/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 {TuiSliderComponent} from '@taiga-ui/kit'; @Component({ - selector: 'tui-slider-example-2', + standalone: true, + imports: [TuiSliderComponent], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSliderExample2 {} +export default class ExampleComponent {} diff --git a/projects/demo/src/modules/components/slider/examples/3/index.ts b/projects/demo/src/modules/components/slider/examples/3/index.ts index 611a0b21b8b8..8cb8028c25f2 100644 --- a/projects/demo/src/modules/components/slider/examples/3/index.ts +++ b/projects/demo/src/modules/components/slider/examples/3/index.ts @@ -1,16 +1,19 @@ +import {NgForOf} from '@angular/common'; import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiSliderComponent} from '@taiga-ui/kit'; @Component({ - selector: 'tui-slider-example-3', + standalone: true, + imports: [TuiSliderComponent, ReactiveFormsModule, NgForOf], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSliderExample3 { +export default class ExampleComponent { protected readonly labels: number[] = [0, 250, 500, 750, 1000]; protected readonly formControl = new FormControl(250); diff --git a/projects/demo/src/modules/components/slider/examples/4/index.ts b/projects/demo/src/modules/components/slider/examples/4/index.ts index d69cce504270..da8eaf76b7e7 100644 --- a/projects/demo/src/modules/components/slider/examples/4/index.ts +++ b/projects/demo/src/modules/components/slider/examples/4/index.ts @@ -1,11 +1,13 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiSliderComponent} from '@taiga-ui/kit'; @Component({ - selector: 'tui-slider-example-4', + standalone: true, + imports: [TuiSliderComponent], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiSliderExample4 {} +export default class ExampleComponent {} diff --git a/projects/demo/src/modules/components/slider/examples/5/index.ts b/projects/demo/src/modules/components/slider/examples/5/index.ts index 9a63a96feb0c..416d476ce7d1 100644 --- a/projects/demo/src/modules/components/slider/examples/5/index.ts +++ b/projects/demo/src/modules/components/slider/examples/5/index.ts @@ -1,17 +1,26 @@ +import {DecimalPipe, NgForOf} from '@angular/common'; import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import type {TuiKeySteps} from '@taiga-ui/kit'; +import {TuiSliderComponent, TuiSliderKeyStepsDirective} from '@taiga-ui/kit'; @Component({ - selector: 'tui-slider-example-5', + standalone: true, + imports: [ + TuiSliderKeyStepsDirective, + ReactiveFormsModule, + TuiSliderComponent, + NgForOf, + DecimalPipe, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSliderExample5 { +export default class ExampleComponent { protected readonly labels: string[] = ['5 000', '100 000', '300 000', '1 000 000']; protected readonly formControl = new FormControl(720_000); protected readonly segments = this.labels.length - 1; diff --git a/projects/demo/src/modules/components/slider/examples/6/index.ts b/projects/demo/src/modules/components/slider/examples/6/index.ts index 6e45b8306db9..4dc7deabb6e7 100644 --- a/projects/demo/src/modules/components/slider/examples/6/index.ts +++ b/projects/demo/src/modules/components/slider/examples/6/index.ts @@ -1,17 +1,30 @@ +import {AsyncPipe, PercentPipe} from '@angular/common'; import {Component, HostListener} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TUI_FALSE_HANDLER, tuiClamp} from '@taiga-ui/cdk'; +import {TuiButtonDirective, TuiHint} from '@taiga-ui/core'; +import {TuiSliderComponent, TuiSliderThumbLabelComponent} from '@taiga-ui/kit'; import {BehaviorSubject, distinctUntilChanged, map, of, switchMap, timer} from 'rxjs'; @Component({ - selector: 'tui-slider-example-6', + standalone: true, + imports: [ + TuiButtonDirective, + TuiSliderThumbLabelComponent, + TuiHint, + PercentPipe, + AsyncPipe, + TuiSliderComponent, + FormsModule, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSliderExample6 { +export default class ExampleComponent { protected min = 0.5; protected max = 2; protected value = 1; diff --git a/projects/demo/src/modules/components/slider/examples/import/declare-form.md b/projects/demo/src/modules/components/slider/examples/import/declare-form.md deleted file mode 100644 index 590caf960ac6..000000000000 --- a/projects/demo/src/modules/components/slider/examples/import/declare-form.md +++ /dev/null @@ -1,12 +0,0 @@ -```ts -import {FormControl} from '@angular/forms'; - -// ... - -@Component({ - // ... -}) -export class MyComponent { - readonly control = new FormControl(1); -} -``` diff --git a/projects/demo/src/modules/components/slider/examples/import/import-module.md b/projects/demo/src/modules/components/slider/examples/import/import.md similarity index 78% rename from projects/demo/src/modules/components/slider/examples/import/import-module.md rename to projects/demo/src/modules/components/slider/examples/import/import.md index 210718fbb1ab..91db5d7cd0ac 100644 --- a/projects/demo/src/modules/components/slider/examples/import/import-module.md +++ b/projects/demo/src/modules/components/slider/examples/import/import.md @@ -14,5 +14,7 @@ import {TuiSlider} from '@taiga-ui/kit'; ], // ... }) -export class MyComponent {} +export class MyComponent { + readonly control = new FormControl(1); +} ``` diff --git a/projects/demo/src/modules/components/slider/examples/import/insert-template.md b/projects/demo/src/modules/components/slider/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/components/slider/examples/import/insert-template.md rename to projects/demo/src/modules/components/slider/examples/import/template.md diff --git a/projects/demo/src/modules/components/slider/slider.component.html b/projects/demo/src/modules/components/slider/index.html similarity index 78% rename from projects/demo/src/modules/components/slider/slider.component.html rename to projects/demo/src/modules/components/slider/index.html index fc3f7f46797d..07066a804d74 100644 --- a/projects/demo/src/modules/components/slider/slider.component.html +++ b/projects/demo/src/modules/components/slider/index.html @@ -35,23 +35,22 @@ - - + [component]="1 | tuiComponent" + [content]="1 | tuiExample: 'html,ts'" + /> - - + [component]="2 | tuiComponent" + [content]="2 | tuiExample" + />

@@ -67,21 +66,20 @@ ).

- - - + [component]="4 | tuiComponent" + [content]="4 | tuiExample: 'html,ts'" + />
@@ -89,13 +87,13 @@
anchor points of non-uniform format between value and position
- @@ -103,7 +101,6 @@ tuiSliderThumbLabel for positioning any content so it slides alongside the thumb. - @@ -209,42 +206,5 @@ - -
    -
  1. - Import an Angular module for forms and - TuiSlider - in the same module where you want to use our component: - - -
    2. - -
  2. -

    - Declare a form ( - FormGroup - ) or a control ( - FormControl - ) in your component: -

    - - -
    3. - -
  3. -

    Add to the template:

    - - -
    4. -
- + diff --git a/projects/demo/src/modules/components/slider/index.ts b/projects/demo/src/modules/components/slider/index.ts new file mode 100644 index 000000000000..46d54cd9837f --- /dev/null +++ b/projects/demo/src/modules/components/slider/index.ts @@ -0,0 +1,43 @@ +import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; +import {TuiDemo} from '@demo/utils'; +import type {TuiSizeS} from '@taiga-ui/core'; +import {TuiLinkDirective, TuiNotificationComponent} from '@taiga-ui/core'; +import {TuiSliderComponent} from '@taiga-ui/kit'; + +@Component({ + standalone: true, + imports: [ + TuiDemo, + TuiLinkDirective, + TuiNotificationComponent, + TuiSliderComponent, + ReactiveFormsModule, + ], + templateUrl: './index.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export default class PageComponent { + protected readonly sizeVariants: readonly TuiSizeS[] = ['s', 'm']; + protected readonly control = new FormControl(1); + + protected max = 5; + protected min = 0; + protected step = 1; + protected size: TuiSizeS = this.sizeVariants[1]; + protected segments = this.max; + + protected get disabled(): boolean { + return this.control.disabled; + } + + protected set disabled(value: boolean) { + if (value) { + this.control.disable(); + + return; + } + + this.control.enable(); + } +} diff --git a/projects/demo/src/modules/components/slider/slider.component.ts b/projects/demo/src/modules/components/slider/slider.component.ts deleted file mode 100644 index 4c2450103316..000000000000 --- a/projects/demo/src/modules/components/slider/slider.component.ts +++ /dev/null @@ -1,80 +0,0 @@ -import {ChangeDetectionStrategy, Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; -import type {TuiSizeS} from '@taiga-ui/core'; - -@Component({ - selector: 'example-slider', - templateUrl: './slider.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class ExampleTuiSliderComponent { - protected readonly sizeVariants: readonly TuiSizeS[] = ['s', 'm']; - protected readonly control = new FormControl(1); - - protected max = 5; - protected min = 0; - protected step = 1; - protected size: TuiSizeS = this.sizeVariants[1]; - protected segments = this.max; - - protected readonly exampleImportModule = import( - './examples/import/import-module.md?raw' - ); - - protected readonly exampleDeclareForm = import( - './examples/import/declare-form.md?raw' - ); - - protected readonly exampleInsertTemplate = import( - './examples/import/insert-template.md?raw' - ); - - protected readonly example1: TuiDocExample = { - HTML: import('./examples/1/index.html?raw'), - TypeScript: import('./examples/1/index.ts?raw'), - }; - - protected readonly example2: TuiDocExample = { - HTML: import('./examples/2/index.html?raw'), - LESS: import('./examples/2/index.less?raw'), - TypeScript: import('./examples/2/index.ts?raw'), - }; - - protected readonly example3: TuiDocExample = { - HTML: import('./examples/3/index.html?raw'), - LESS: import('./examples/3/index.less?raw'), - TypeScript: import('./examples/3/index.ts?raw'), - }; - - protected readonly example4: TuiDocExample = { - HTML: import('./examples/4/index.html?raw'), - TypeScript: import('./examples/4/index.ts?raw'), - }; - - protected readonly example5: TuiDocExample = { - HTML: import('./examples/5/index.html?raw'), - TypeScript: import('./examples/5/index.ts?raw'), - LESS: import('./examples/5/index.less?raw'), - }; - - protected readonly example6: TuiDocExample = { - HTML: import('./examples/6/index.html?raw'), - LESS: import('./examples/6/index.less?raw'), - TypeScript: import('./examples/6/index.ts?raw'), - }; - - protected get disabled(): boolean { - return this.control.disabled; - } - - protected set disabled(value: boolean) { - if (value) { - this.control.disable(); - - return; - } - - this.control.enable(); - } -} diff --git a/projects/demo/src/modules/components/slider/slider.module.ts b/projects/demo/src/modules/components/slider/slider.module.ts deleted file mode 100644 index 3d9f6945c8ab..000000000000 --- a/projects/demo/src/modules/components/slider/slider.module.ts +++ /dev/null @@ -1,46 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {TuiAddonDoc, tuiGenerateRoutes, TuiTextCodeDirective} from '@taiga-ui/addon-doc'; -import { - TuiButtonDirective, - TuiHint, - TuiLinkDirective, - TuiNotificationComponent, -} from '@taiga-ui/core'; -import {TuiSlider} from '@taiga-ui/kit'; - -import {TuiSliderExample1} from './examples/1'; -import {TuiSliderExample2} from './examples/2'; -import {TuiSliderExample3} from './examples/3'; -import {TuiSliderExample4} from './examples/4'; -import {TuiSliderExample5} from './examples/5'; -import {TuiSliderExample6} from './examples/6'; -import {ExampleTuiSliderComponent} from './slider.component'; - -@NgModule({ - imports: [ - CommonModule, - TuiAddonDoc, - TuiSlider, - FormsModule, - ReactiveFormsModule, - TuiLinkDirective, - TuiNotificationComponent, - TuiButtonDirective, - TuiHint, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSliderComponent)), - TuiTextCodeDirective, - ], - declarations: [ - ExampleTuiSliderComponent, - TuiSliderExample1, - TuiSliderExample2, - TuiSliderExample3, - TuiSliderExample4, - TuiSliderExample5, - TuiSliderExample6, - ], -}) -export class ExampleTuiSliderModule {} diff --git a/projects/demo/src/modules/directives/sensitive/examples/1/index.ts b/projects/demo/src/modules/directives/sensitive/examples/1/index.ts index 8feef38df4e8..7341b3392c48 100644 --- a/projects/demo/src/modules/directives/sensitive/examples/1/index.ts +++ b/projects/demo/src/modules/directives/sensitive/examples/1/index.ts @@ -1,14 +1,18 @@ import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiLabelDirective} from '@taiga-ui/core'; +import {TuiSensitiveDirective, TuiSwitchComponent} from '@taiga-ui/kit'; @Component({ - selector: 'tui-sensitive-example-1', + standalone: true, + imports: [TuiSensitiveDirective, TuiLabelDirective, TuiSwitchComponent, FormsModule], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSensitiveExample1 { +export default class ExampleComponent { protected sensitive = true; } diff --git a/projects/demo/src/modules/directives/sensitive/examples/2/index.ts b/projects/demo/src/modules/directives/sensitive/examples/2/index.ts index 05bb60535c1e..6508d54991e0 100644 --- a/projects/demo/src/modules/directives/sensitive/examples/2/index.ts +++ b/projects/demo/src/modules/directives/sensitive/examples/2/index.ts @@ -1,13 +1,28 @@ import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiButtonDirective, TuiLabelDirective} from '@taiga-ui/core'; +import { + TuiBadgeDirective, + TuiSensitiveDirective, + TuiSwitchComponent, +} from '@taiga-ui/kit'; @Component({ - selector: 'tui-sensitive-example-2', + standalone: true, + imports: [ + TuiSensitiveDirective, + TuiButtonDirective, + TuiBadgeDirective, + TuiLabelDirective, + TuiSwitchComponent, + FormsModule, + ], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiSensitiveExample2 { +export default class ExampleComponent { protected sensitive = true; } diff --git a/projects/demo/src/modules/directives/sensitive/examples/import/import-module.md b/projects/demo/src/modules/directives/sensitive/examples/import/import.md similarity index 100% rename from projects/demo/src/modules/directives/sensitive/examples/import/import-module.md rename to projects/demo/src/modules/directives/sensitive/examples/import/import.md diff --git a/projects/demo/src/modules/directives/sensitive/examples/import/insert-template.md b/projects/demo/src/modules/directives/sensitive/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/directives/sensitive/examples/import/insert-template.md rename to projects/demo/src/modules/directives/sensitive/examples/import/template.md diff --git a/projects/demo/src/modules/directives/sensitive/sensitive.template.html b/projects/demo/src/modules/directives/sensitive/index.html similarity index 83% rename from projects/demo/src/modules/directives/sensitive/sensitive.template.html rename to projects/demo/src/modules/directives/sensitive/index.html index ff1a2da20d0e..55cfd5a2f1fb 100644 --- a/projects/demo/src/modules/directives/sensitive/sensitive.template.html +++ b/projects/demo/src/modules/directives/sensitive/index.html @@ -18,15 +18,15 @@ - - + [component]="1 | tuiComponent" + [content]="1 | tuiExample" + /> Buttons have @@ -35,7 +35,6 @@ span so it does not affect you. - @@ -55,10 +54,5 @@ - - - + diff --git a/projects/demo/src/modules/directives/sensitive/index.ts b/projects/demo/src/modules/directives/sensitive/index.ts new file mode 100644 index 000000000000..9f3e20365611 --- /dev/null +++ b/projects/demo/src/modules/directives/sensitive/index.ts @@ -0,0 +1,15 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDemo} from '@demo/utils'; +import {TuiNotificationComponent} from '@taiga-ui/core'; +import {TuiSensitiveDirective} from '@taiga-ui/kit'; + +@Component({ + standalone: true, + imports: [TuiDemo, TuiNotificationComponent, TuiSensitiveDirective], + templateUrl: './index.html', + changeDetection, +}) +export default class PageComponent { + protected sensitive = true; +} diff --git a/projects/demo/src/modules/directives/sensitive/sensitive.component.ts b/projects/demo/src/modules/directives/sensitive/sensitive.component.ts deleted file mode 100644 index 911d8c6ed3a3..000000000000 --- a/projects/demo/src/modules/directives/sensitive/sensitive.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc'; - -@Component({ - selector: 'example-sensitive', - templateUrl: './sensitive.template.html', - changeDetection, -}) -export class ExampleTuiSensitiveComponent { - protected readonly exampleModule: TuiRawLoaderContent = import( - './examples/import/import-module.md?raw' - ); - - protected readonly exampleHtml: TuiRawLoaderContent = import( - './examples/import/insert-template.md?raw' - ); - - protected readonly example1: TuiDocExample = { - HTML: import('./examples/1/index.html?raw'), - LESS: import('./examples/1/index.less?raw'), - }; - - protected readonly example2: TuiDocExample = { - HTML: import('./examples/2/index.html?raw'), - }; - - protected sensitive = true; -} diff --git a/projects/demo/src/modules/directives/sensitive/sensitive.module.ts b/projects/demo/src/modules/directives/sensitive/sensitive.module.ts deleted file mode 100644 index 86734b3af873..000000000000 --- a/projects/demo/src/modules/directives/sensitive/sensitive.module.ts +++ /dev/null @@ -1,41 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {TuiSetupComponent} from '@demo/utils'; -import {tuiGetDocModules} from '@taiga-ui/addon-doc'; -import { - TuiButtonDirective, - TuiLabelDirective, - TuiNotificationComponent, -} from '@taiga-ui/core'; -import { - TuiBadgeDirective, - TuiSensitiveDirective, - TuiSwitchComponent, -} from '@taiga-ui/kit'; - -import {TuiSensitiveExample1} from './examples/1'; -import {TuiSensitiveExample2} from './examples/2'; -import {ExampleTuiSensitiveComponent} from './sensitive.component'; - -@NgModule({ - imports: [ - FormsModule, - CommonModule, - TuiSensitiveDirective, - TuiNotificationComponent, - TuiSwitchComponent, - TuiLabelDirective, - TuiBadgeDirective, - TuiButtonDirective, - tuiGetDocModules(ExampleTuiSensitiveComponent), - TuiSetupComponent, - ], - declarations: [ - ExampleTuiSensitiveComponent, - TuiSensitiveExample1, - TuiSensitiveExample2, - ], - exports: [ExampleTuiSensitiveComponent], -}) -export class ExampleTuiSensitiveModule {} diff --git a/projects/demo/src/modules/directives/skeleton/examples/1/index.ts b/projects/demo/src/modules/directives/skeleton/examples/1/index.ts index 6410cc34e2ff..4b61a74ede33 100644 --- a/projects/demo/src/modules/directives/skeleton/examples/1/index.ts +++ b/projects/demo/src/modules/directives/skeleton/examples/1/index.ts @@ -1,14 +1,43 @@ import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import { + TuiButtonDirective, + TuiLabelDirective, + TuiSurfaceDirective, + TuiTitleDirective, +} from '@taiga-ui/core'; +import { + TuiAvatarComponent, + TuiBadgeDirective, + TuiChipDirective, + TuiSkeletonDirective, + TuiSwitchComponent, +} from '@taiga-ui/kit'; +import {TuiCardLargeDirective, TuiHeaderDirective} from '@taiga-ui/layout'; @Component({ - selector: 'tui-skeleton-example-1', + standalone: true, + imports: [ + TuiLabelDirective, + TuiSwitchComponent, + FormsModule, + TuiAvatarComponent, + TuiSkeletonDirective, + TuiButtonDirective, + TuiChipDirective, + TuiBadgeDirective, + TuiCardLargeDirective, + TuiSurfaceDirective, + TuiHeaderDirective, + TuiTitleDirective, + ], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiSkeletonExample1 { +export default class ExampleComponent { protected skeleton = false; } diff --git a/projects/demo/src/modules/directives/skeleton/examples/2/index.ts b/projects/demo/src/modules/directives/skeleton/examples/2/index.ts index b5962586415f..1aa2910bbb34 100644 --- a/projects/demo/src/modules/directives/skeleton/examples/2/index.ts +++ b/projects/demo/src/modules/directives/skeleton/examples/2/index.ts @@ -1,13 +1,17 @@ import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiLabelDirective} from '@taiga-ui/core'; +import {TuiSkeletonDirective, TuiSwitchComponent} from '@taiga-ui/kit'; @Component({ - selector: 'tui-skeleton-example-2', + standalone: true, + imports: [TuiLabelDirective, TuiSwitchComponent, FormsModule, TuiSkeletonDirective], templateUrl: './index.html', encapsulation, changeDetection, }) -export class TuiSkeletonExample2 { +export default class ExampleComponent { protected skeleton = false; } diff --git a/projects/demo/src/modules/directives/skeleton/examples/import/insert.md b/projects/demo/src/modules/directives/skeleton/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/directives/skeleton/examples/import/insert.md rename to projects/demo/src/modules/directives/skeleton/examples/import/template.md diff --git a/projects/demo/src/modules/directives/skeleton/skeleton.template.html b/projects/demo/src/modules/directives/skeleton/index.html similarity index 80% rename from projects/demo/src/modules/directives/skeleton/skeleton.template.html rename to projects/demo/src/modules/directives/skeleton/index.html index 4dbd211f51d5..6cf8c9b07954 100644 --- a/projects/demo/src/modules/directives/skeleton/skeleton.template.html +++ b/projects/demo/src/modules/directives/skeleton/index.html @@ -7,14 +7,14 @@ - - + /> @@ -27,13 +27,8 @@ number to generate this many random sized words, while your actual text is loading - - + diff --git a/projects/demo/src/modules/directives/skeleton/index.ts b/projects/demo/src/modules/directives/skeleton/index.ts new file mode 100644 index 000000000000..926e795dfdb3 --- /dev/null +++ b/projects/demo/src/modules/directives/skeleton/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 {} diff --git a/projects/demo/src/modules/directives/skeleton/skeleton.component.ts b/projects/demo/src/modules/directives/skeleton/skeleton.component.ts deleted file mode 100644 index 1eb9b1453ced..000000000000 --- a/projects/demo/src/modules/directives/skeleton/skeleton.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; - -@Component({ - selector: 'skeleton', - templateUrl: './skeleton.template.html', - changeDetection, -}) -export class ExampleTuiSkeletonComponent { - protected readonly import = import('./examples/import/import.md?raw'); - protected readonly template = import('./examples/import/insert.md?raw'); -} diff --git a/projects/demo/src/modules/directives/skeleton/skeleton.module.ts b/projects/demo/src/modules/directives/skeleton/skeleton.module.ts deleted file mode 100644 index 79f044b6a5aa..000000000000 --- a/projects/demo/src/modules/directives/skeleton/skeleton.module.ts +++ /dev/null @@ -1,49 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {TuiExamplePipe, TuiSetupComponent} from '@demo/utils'; -import {tuiGetDocModules} from '@taiga-ui/addon-doc'; -import { - TuiButtonDirective, - TuiLabelDirective, - TuiNotificationComponent, - TuiSurfaceDirective, - TuiTitleDirective, -} from '@taiga-ui/core'; -import { - TuiAvatarComponent, - TuiBadgeDirective, - TuiChipDirective, - TuiSkeletonDirective, - TuiSwitchComponent, -} from '@taiga-ui/kit'; -import {TuiCardLargeDirective, TuiHeaderDirective} from '@taiga-ui/layout'; - -import {TuiSkeletonExample1} from './examples/1'; -import {TuiSkeletonExample2} from './examples/2'; -import {ExampleTuiSkeletonComponent} from './skeleton.component'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - tuiGetDocModules(ExampleTuiSkeletonComponent), - TuiSetupComponent, - TuiExamplePipe, - TuiLabelDirective, - TuiSwitchComponent, - TuiAvatarComponent, - TuiCardLargeDirective, - TuiTitleDirective, - TuiSurfaceDirective, - TuiHeaderDirective, - TuiButtonDirective, - TuiChipDirective, - TuiBadgeDirective, - TuiSkeletonDirective, - TuiNotificationComponent, - ], - declarations: [ExampleTuiSkeletonComponent, TuiSkeletonExample1, TuiSkeletonExample2], - exports: [ExampleTuiSkeletonComponent], -}) -export class ExampleTuiSkeletonModule {}