From 1381b41125b35e320fc9435cb1245254523ffb95 Mon Sep 17 00:00:00 2001 From: waterplea Date: Tue, 27 Feb 2024 15:16:20 +0400 Subject: [PATCH 1/7] feat(kit): `Block` add new component --- .../addon-doc/components/demo/demo.module.ts | 4 +- .../components/demo/demo.template.html | 57 ++--- .../core/components/group/group.style.less | 4 + .../styles/theme/appearance/secondary.less | 12 ++ projects/demo/src/modules/app/app.routes.ts | 26 +-- projects/demo/src/modules/app/pages.ts | 18 +- .../components/block/block.component.ts | 12 ++ .../modules/components/block/block.module.ts | 48 +++++ .../components/block/block.template.html | 58 +++++ .../components/block/examples/1/index.html | 37 ++++ .../components/block/examples/1/index.less | 6 + .../examples/1/index.ts | 9 +- .../components/block/examples/2/index.html | 115 ++++++++++ .../examples/2/index.less | 0 .../examples/1 => block/examples/2}/index.ts | 5 +- .../components/block/examples/3/index.html | 106 +++++++++ .../examples/3/index.less | 7 + .../examples/3/index.ts | 2 +- .../examples/import/import-module.md | 6 +- .../block/examples/import/insert-template.md | 19 ++ .../checkbox-block.component.ts | 73 ------- .../checkbox-block/checkbox-block.module.ts | 43 ---- .../checkbox-block/checkbox-block.style.less | 5 - .../checkbox-block.template.html | 173 --------------- .../checkbox-block/examples/1/index.html | 38 ---- .../checkbox-block/examples/2/index.html | 100 --------- .../checkbox-block/examples/2/index.ts | 19 -- .../checkbox-block/examples/3/index.html | 70 ------ .../examples/import/declare-form.md | 14 -- .../examples/import/import-module.md | 17 -- .../examples/import/insert-template.md | 5 - .../components/group/examples/3/index.html | 47 ++-- .../components/group/examples/4/index.html | 48 +++-- .../modules/components/group/group.module.ts | 14 +- .../components/group/group.template.html | 6 +- .../items-with-more/examples/2/index.html | 19 +- .../items-with-more/examples/2/index.less | 5 - .../items-with-more/examples/2/index.ts | 4 - .../items-with-more/items-with-more.module.ts | 12 +- .../items-with-more.template.html | 10 +- .../radio-block/examples/1/index.html | 42 ---- .../radio-block/examples/2/index.html | 92 -------- .../radio-block/examples/2/index.less | 11 - .../radio-block/examples/2/index.ts | 19 -- .../radio-block/examples/3/index.html | 74 ------- .../radio-block/examples/3/index.less | 33 --- .../radio-block/examples/3/index.ts | 17 -- .../radio-block/examples/4/index.html | 24 --- .../radio-block/examples/4/index.less | 11 - .../radio-block/examples/4/index.ts | 18 -- .../examples/import/declare-form.md | 14 -- .../examples/import/insert-template.md | 22 -- .../radio-block/radio-block.component.ts | 75 ------- .../radio-block/radio-block.module.ts | 40 ---- .../radio-block/radio-block.template.html | 203 ------------------ .../modules/markup/form/example/index.html | 32 +-- .../src/modules/markup/form/form.module.ts | 12 +- .../components/checkbox/checkbox.style.less | 1 + .../components/radio/radio.style.less | 1 + .../kit/components/block/block.component.ts | 13 ++ .../kit/components/block/block.directive.ts | 51 +++++ .../kit/components/block/block.options.ts | 18 ++ .../kit/components/block/block.style.less | 95 ++++++++ projects/kit/components/block/index.ts | 3 + .../{checkbox-block => block}/ng-package.json | 0 .../checkbox-block.component.ts | 96 --------- .../checkbox-block/checkbox-block.module.ts | 22 -- .../checkbox-block/checkbox-block.style.less | 124 ----------- .../checkbox-block.template.html | 31 --- .../kit/components/checkbox-block/index.ts | 2 - .../kit/components/filter/filter.module.ts | 4 +- .../kit/components/filter/filter.style.less | 30 +-- .../components/filter/filter.template.html | 47 ++-- .../filter/test/filter.component.spec.ts | 61 ++---- projects/kit/components/index.ts | 3 +- .../items-with-more/items-with-more.module.ts | 3 +- .../items-with-more.template.html | 2 - projects/kit/components/radio-block/index.ts | 2 - .../components/radio-block/ng-package.json | 5 - .../radio-block/radio-block.component.ts | 111 ---------- .../radio-block/radio-block.module.ts | 14 -- .../radio-block/radio-block.template.html | 35 --- 82 files changed, 818 insertions(+), 1968 deletions(-) create mode 100644 projects/demo/src/modules/components/block/block.component.ts create mode 100644 projects/demo/src/modules/components/block/block.module.ts create mode 100644 projects/demo/src/modules/components/block/block.template.html create mode 100644 projects/demo/src/modules/components/block/examples/1/index.html create mode 100644 projects/demo/src/modules/components/block/examples/1/index.less rename projects/demo/src/modules/components/{checkbox-block => block}/examples/1/index.ts (64%) create mode 100644 projects/demo/src/modules/components/block/examples/2/index.html rename projects/demo/src/modules/components/{checkbox-block => block}/examples/2/index.less (100%) rename projects/demo/src/modules/components/{radio-block/examples/1 => block/examples/2}/index.ts (78%) create mode 100644 projects/demo/src/modules/components/block/examples/3/index.html rename projects/demo/src/modules/components/{checkbox-block => block}/examples/3/index.less (82%) rename projects/demo/src/modules/components/{checkbox-block => block}/examples/3/index.ts (93%) rename projects/demo/src/modules/components/{radio-block => block}/examples/import/import-module.md (59%) create mode 100644 projects/demo/src/modules/components/block/examples/import/insert-template.md delete mode 100644 projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts delete mode 100644 projects/demo/src/modules/components/checkbox-block/checkbox-block.module.ts delete mode 100644 projects/demo/src/modules/components/checkbox-block/checkbox-block.style.less delete mode 100644 projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html delete mode 100644 projects/demo/src/modules/components/checkbox-block/examples/1/index.html delete mode 100644 projects/demo/src/modules/components/checkbox-block/examples/2/index.html delete mode 100644 projects/demo/src/modules/components/checkbox-block/examples/2/index.ts delete mode 100644 projects/demo/src/modules/components/checkbox-block/examples/3/index.html delete mode 100644 projects/demo/src/modules/components/checkbox-block/examples/import/declare-form.md delete mode 100644 projects/demo/src/modules/components/checkbox-block/examples/import/import-module.md delete mode 100644 projects/demo/src/modules/components/checkbox-block/examples/import/insert-template.md delete mode 100644 projects/demo/src/modules/components/radio-block/examples/1/index.html delete mode 100644 projects/demo/src/modules/components/radio-block/examples/2/index.html delete mode 100644 projects/demo/src/modules/components/radio-block/examples/2/index.less delete mode 100644 projects/demo/src/modules/components/radio-block/examples/2/index.ts delete mode 100644 projects/demo/src/modules/components/radio-block/examples/3/index.html delete mode 100644 projects/demo/src/modules/components/radio-block/examples/3/index.less delete mode 100644 projects/demo/src/modules/components/radio-block/examples/3/index.ts delete mode 100644 projects/demo/src/modules/components/radio-block/examples/4/index.html delete mode 100644 projects/demo/src/modules/components/radio-block/examples/4/index.less delete mode 100644 projects/demo/src/modules/components/radio-block/examples/4/index.ts delete mode 100644 projects/demo/src/modules/components/radio-block/examples/import/declare-form.md delete mode 100644 projects/demo/src/modules/components/radio-block/examples/import/insert-template.md delete mode 100644 projects/demo/src/modules/components/radio-block/radio-block.component.ts delete mode 100644 projects/demo/src/modules/components/radio-block/radio-block.module.ts delete mode 100644 projects/demo/src/modules/components/radio-block/radio-block.template.html create mode 100644 projects/kit/components/block/block.component.ts create mode 100644 projects/kit/components/block/block.directive.ts create mode 100644 projects/kit/components/block/block.options.ts create mode 100644 projects/kit/components/block/block.style.less create mode 100644 projects/kit/components/block/index.ts rename projects/kit/components/{checkbox-block => block}/ng-package.json (100%) delete mode 100644 projects/kit/components/checkbox-block/checkbox-block.component.ts delete mode 100644 projects/kit/components/checkbox-block/checkbox-block.module.ts delete mode 100644 projects/kit/components/checkbox-block/checkbox-block.style.less delete mode 100644 projects/kit/components/checkbox-block/checkbox-block.template.html delete mode 100644 projects/kit/components/checkbox-block/index.ts delete mode 100644 projects/kit/components/radio-block/index.ts delete mode 100644 projects/kit/components/radio-block/ng-package.json delete mode 100644 projects/kit/components/radio-block/radio-block.component.ts delete mode 100644 projects/kit/components/radio-block/radio-block.module.ts delete mode 100644 projects/kit/components/radio-block/radio-block.template.html diff --git a/projects/addon-doc/components/demo/demo.module.ts b/projects/addon-doc/components/demo/demo.module.ts index 61ade27750ff..f03ed3d6d259 100644 --- a/projects/addon-doc/components/demo/demo.module.ts +++ b/projects/addon-doc/components/demo/demo.module.ts @@ -16,9 +16,9 @@ import { TuiTooltipModule, } from '@taiga-ui/core'; import { + TuiBlockDirective, TuiCheckboxLabeledModule, TuiDataListWrapperModule, - TuiRadioBlockModule, TuiSelectModule, } from '@taiga-ui/kit'; @@ -37,7 +37,6 @@ import {TuiDocDemoComponent} from './demo.component'; TuiGroupDirective, TuiTooltipModule, TuiModeModule, - TuiRadioBlockModule, TuiCheckboxLabeledModule, TuiSvgModule, TuiDataListWrapperModule, @@ -45,6 +44,7 @@ import {TuiDocDemoComponent} from './demo.component'; TuiTextfieldControllerModule, TuiHintModule, TuiResizerModule, + TuiBlockDirective, ], declarations: [TuiDocDemoComponent], exports: [TuiDocDemoComponent], diff --git a/projects/addon-doc/components/demo/demo.template.html b/projects/addon-doc/components/demo/demo.template.html index 5956b03aad7d..f092e72cf51c 100644 --- a/projects/addon-doc/components/demo/demo.template.html +++ b/projects/addon-doc/components/demo/demo.template.html @@ -39,39 +39,48 @@ class="t-group" [collapsed]="true" > - null - - + + - + + + + + (await import('../components/block/block.module')).ExampleTuiBlockModule, + data: { + title: 'Block', + }, + }, { path: 'layout/block-status', loadChildren: async () => @@ -505,15 +513,6 @@ export const ROUTES: Routes = [ title: 'Checkbox', }, }, - { - path: 'components/checkbox-block', - loadChildren: async () => - (await import('../components/checkbox-block/checkbox-block.module')) - .ExampleTuiCheckboxBlockModule, - data: { - title: 'CheckboxBlock', - }, - }, { path: 'components/checkbox-labeled', loadChildren: async () => @@ -993,15 +992,6 @@ export const ROUTES: Routes = [ title: 'Radio', }, }, - { - path: 'components/radio-block', - loadChildren: async () => - (await import('../components/radio-block/radio-block.module')) - .ExampleTuiRadioBlockModule, - data: { - title: 'RadioBlock', - }, - }, { path: 'components/radio-labeled', loadChildren: async () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index ebffe826e91a..fa50f90d3fff 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -181,6 +181,12 @@ export const pages: TuiDocPages = [ }, ], }, + { + section: 'Components', + title: 'Block', + keywords: 'кнопка, чек, форма, form, ввод, checkbox, radio, радио, лейбл, label', + route: '/components/block', + }, { section: 'Layout', title: 'BlockStatus', @@ -243,12 +249,6 @@ export const pages: TuiDocPages = [ keywords: 'чек, ввод, форма, form, checkbox', route: '/components/checkbox', }, - { - section: 'Components', - title: 'CheckboxBlock', - keywords: 'кнопка, чек, форма, form, ввод, checkbox, CheckboxBlock', - route: '/components/checkbox-block', - }, { section: 'Components', title: 'CheckboxLabeled', @@ -678,12 +678,6 @@ export const pages: TuiDocPages = [ keywords: 'инпут, форма, ввод, radio, радио', route: '/components/radio', }, - { - section: 'Components', - title: 'RadioBlock', - keywords: 'инпут, кнопка, форма, ввод, radio, радио, radio-boxed', - route: '/components/radio-block', - }, { section: 'Components', title: 'RadioLabeled', diff --git a/projects/demo/src/modules/components/block/block.component.ts b/projects/demo/src/modules/components/block/block.component.ts new file mode 100644 index 000000000000..faead0058f8f --- /dev/null +++ b/projects/demo/src/modules/components/block/block.component.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; + +@Component({ + selector: 'example-tui-block', + templateUrl: './block.template.html', + changeDetection, +}) +export class ExampleTuiBlockComponent { + readonly exampleModule = import('./examples/import/import-module.md?raw'); + readonly exampleHtml = import('./examples/import/insert-template.md?raw'); +} diff --git a/projects/demo/src/modules/components/block/block.module.ts b/projects/demo/src/modules/components/block/block.module.ts new file mode 100644 index 000000000000..0bcd9aad1311 --- /dev/null +++ b/projects/demo/src/modules/components/block/block.module.ts @@ -0,0 +1,48 @@ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {TuiExamplePipe} from '@demo/utils'; +import {tuiGetDocModules} from '@taiga-ui/addon-doc'; +import {TuiGroupDirective, TuiTooltipModule} from '@taiga-ui/core'; +import { + TuiCheckboxModule, + TuiFadeModule, + TuiIconModule, + TuiRadioModule, + TuiTitleModule, + TuiToggleModule, +} from '@taiga-ui/experimental'; +import {TuiAvatarComponent, TuiBlockDirective} from '@taiga-ui/kit'; + +import {ExampleTuiBlockComponent} from './block.component'; +import {TuiBlockExample1} from './examples/1'; +import {TuiBlockExample2} from './examples/2'; +import {TuiBlockExample3} from './examples/3'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule, + TuiBlockDirective, + TuiGroupDirective, + TuiAvatarComponent, + TuiTooltipModule, + TuiCheckboxModule, + TuiRadioModule, + TuiFadeModule, + TuiTitleModule, + TuiToggleModule, + TuiIconModule, + TuiExamplePipe, + tuiGetDocModules(ExampleTuiBlockComponent), + ], + declarations: [ + TuiBlockExample1, + TuiBlockExample2, + TuiBlockExample3, + ExampleTuiBlockComponent, + ], + exports: [ExampleTuiBlockComponent], +}) +export class ExampleTuiBlockModule {} diff --git a/projects/demo/src/modules/components/block/block.template.html b/projects/demo/src/modules/components/block/block.template.html new file mode 100644 index 000000000000..55a9b8fdf4f1 --- /dev/null +++ b/projects/demo/src/modules/components/block/block.template.html @@ -0,0 +1,58 @@ + + +

+ Block + is a special presentation of a checkbox/radiobutton which can display actual control or be a control itself +

+ + + + + + + + + + + + + + + +
    +
  1. +

    Add an import:

    + + +
    2. + +
  2. +

    Add to the template:

    + + +
    3. +
+ + diff --git a/projects/demo/src/modules/components/block/examples/1/index.html b/projects/demo/src/modules/components/block/examples/1/index.html new file mode 100644 index 000000000000..a67ce18d3489 --- /dev/null +++ b/projects/demo/src/modules/components/block/examples/1/index.html @@ -0,0 +1,37 @@ +
+ + + + +
diff --git a/projects/demo/src/modules/components/block/examples/1/index.less b/projects/demo/src/modules/components/block/examples/1/index.less new file mode 100644 index 000000000000..a074a4106e19 --- /dev/null +++ b/projects/demo/src/modules/components/block/examples/1/index.less @@ -0,0 +1,6 @@ +form { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; +} diff --git a/projects/demo/src/modules/components/checkbox-block/examples/1/index.ts b/projects/demo/src/modules/components/block/examples/1/index.ts similarity index 64% rename from projects/demo/src/modules/components/checkbox-block/examples/1/index.ts rename to projects/demo/src/modules/components/block/examples/1/index.ts index ad20b9a43938..20475a7a032d 100644 --- a/projects/demo/src/modules/components/checkbox-block/examples/1/index.ts +++ b/projects/demo/src/modules/components/block/examples/1/index.ts @@ -6,14 +6,15 @@ import {encapsulation} from '@demo/emulate/encapsulation'; @Component({ selector: 'tui-checkbox-block-example-1', templateUrl: './index.html', + styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiCheckboxBlockExample1 { +export class TuiBlockExample1 { protected testForm = new FormGroup({ - testValue1: new FormControl(false), - testValue2: new FormControl(false), - testValue3: new FormControl(false), + testValue1: new FormControl(true), + testValue2: new FormControl({value: false, disabled: true}), + testValue3: new FormControl({value: true, disabled: true}), testValue4: new FormControl(false), }); } diff --git a/projects/demo/src/modules/components/block/examples/2/index.html b/projects/demo/src/modules/components/block/examples/2/index.html new file mode 100644 index 000000000000..6fb8268d2e5f --- /dev/null +++ b/projects/demo/src/modules/components/block/examples/2/index.html @@ -0,0 +1,115 @@ +

Horizontal group

+
+ + + +
+

Vertical group

+
+ + + +
+

Without checkbox indicators

+
+ + + +
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/2/index.less b/projects/demo/src/modules/components/block/examples/2/index.less similarity index 100% rename from projects/demo/src/modules/components/checkbox-block/examples/2/index.less rename to projects/demo/src/modules/components/block/examples/2/index.less diff --git a/projects/demo/src/modules/components/radio-block/examples/1/index.ts b/projects/demo/src/modules/components/block/examples/2/index.ts similarity index 78% rename from projects/demo/src/modules/components/radio-block/examples/1/index.ts rename to projects/demo/src/modules/components/block/examples/2/index.ts index 34fc78f45367..ba8b96a9353b 100644 --- a/projects/demo/src/modules/components/radio-block/examples/1/index.ts +++ b/projects/demo/src/modules/components/block/examples/2/index.ts @@ -4,12 +4,13 @@ import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; @Component({ - selector: 'tui-radio-block-example-1', + selector: 'tui-checkbox-block-example-2', templateUrl: './index.html', + styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiRadioBlockExample1 { +export class TuiBlockExample2 { protected readonly testForm = new FormGroup({ testValue: new FormControl('orange'), }); diff --git a/projects/demo/src/modules/components/block/examples/3/index.html b/projects/demo/src/modules/components/block/examples/3/index.html new file mode 100644 index 000000000000..01846b2059d1 --- /dev/null +++ b/projects/demo/src/modules/components/block/examples/3/index.html @@ -0,0 +1,106 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/3/index.less b/projects/demo/src/modules/components/block/examples/3/index.less similarity index 82% rename from projects/demo/src/modules/components/checkbox-block/examples/3/index.less rename to projects/demo/src/modules/components/block/examples/3/index.less index 15b395e7de98..d6953bcb6835 100644 --- a/projects/demo/src/modules/components/checkbox-block/examples/3/index.less +++ b/projects/demo/src/modules/components/block/examples/3/index.less @@ -1,5 +1,12 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; +form { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; +} + .content { display: flex; align-items: center; diff --git a/projects/demo/src/modules/components/checkbox-block/examples/3/index.ts b/projects/demo/src/modules/components/block/examples/3/index.ts similarity index 93% rename from projects/demo/src/modules/components/checkbox-block/examples/3/index.ts rename to projects/demo/src/modules/components/block/examples/3/index.ts index fc562bd8ef62..5cf7a607d74e 100644 --- a/projects/demo/src/modules/components/checkbox-block/examples/3/index.ts +++ b/projects/demo/src/modules/components/block/examples/3/index.ts @@ -10,7 +10,7 @@ import {encapsulation} from '@demo/emulate/encapsulation'; encapsulation, changeDetection, }) -export class TuiCheckboxBlockExample3 { +export class TuiBlockExample3 { protected testForm = new FormGroup({ testValue1: new FormControl(false), testValue2: new FormControl(false), diff --git a/projects/demo/src/modules/components/radio-block/examples/import/import-module.md b/projects/demo/src/modules/components/block/examples/import/import-module.md similarity index 59% rename from projects/demo/src/modules/components/radio-block/examples/import/import-module.md rename to projects/demo/src/modules/components/block/examples/import/import-module.md index 7196886f0111..a163fcc4d05b 100644 --- a/projects/demo/src/modules/components/radio-block/examples/import/import-module.md +++ b/projects/demo/src/modules/components/block/examples/import/import-module.md @@ -1,6 +1,6 @@ ```ts import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {TuiRadioBlockModule} from '@taiga-ui/kit'; +import {TuiBlockDirective, TuiCheckboxComponent} from '@taiga-ui/kit'; // ... @@ -8,8 +8,8 @@ import {TuiRadioBlockModule} from '@taiga-ui/kit'; imports: [ // ... FormsModule, - ReactiveFormsModule, - TuiRadioBlockModule, + TuiBlockDirective, + TuiCheckboxComponent, ], // ... }) diff --git a/projects/demo/src/modules/components/block/examples/import/insert-template.md b/projects/demo/src/modules/components/block/examples/import/insert-template.md new file mode 100644 index 000000000000..c865d567b1c2 --- /dev/null +++ b/projects/demo/src/modules/components/block/examples/import/insert-template.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts b/projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts deleted file mode 100644 index 0f68aa2acd5d..000000000000 --- a/projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts +++ /dev/null @@ -1,73 +0,0 @@ -import {Component, forwardRef} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {TuiDocExample} from '@taiga-ui/addon-doc'; -import {TuiHorizontalDirection, TuiSizeL, TuiSizeXS} from '@taiga-ui/core'; - -import {AbstractExampleTuiControl} from '../abstract/control'; -import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor'; - -@Component({ - selector: 'example-tui-checkbox-block', - templateUrl: './checkbox-block.template.html', - styleUrls: ['./checkbox-block.style.less'], - changeDetection, - providers: [ - { - provide: ABSTRACT_PROPS_ACCESSOR, - useExisting: forwardRef(() => ExampleTuiCheckboxBlockComponent), - }, - ], -}) -export class ExampleTuiCheckboxBlockComponent extends AbstractExampleTuiControl { - 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 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'), - LESS: import('./examples/3/index.less?raw'), - }; - - protected readonly contentAlignVariants: readonly TuiHorizontalDirection[] = [ - 'left', - 'right', - ]; - - protected contentAlign: TuiHorizontalDirection = this.contentAlignVariants[1]; - - protected hideCheckbox = false; - - protected readonly sizes: ReadonlyArray = ['xs', 's', 'm', 'l']; - - protected currentSize = this.sizes[3]; - - public readonly control = new FormGroup({ - testValue1: new FormControl(false), - testValue2: new FormControl(null), - testValue3: new FormControl(true), - }); - - public override get disabled(): boolean { - return this.control.disabled; - } - - public override set disabled(value: boolean) { - if (value) { - this.control.disable(); - } else { - this.control.enable(); - } - } -} diff --git a/projects/demo/src/modules/components/checkbox-block/checkbox-block.module.ts b/projects/demo/src/modules/components/checkbox-block/checkbox-block.module.ts deleted file mode 100644 index 9d0aa0ec155f..000000000000 --- a/projects/demo/src/modules/components/checkbox-block/checkbox-block.module.ts +++ /dev/null @@ -1,43 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiButtonModule, TuiGroupDirective, TuiTooltipModule} from '@taiga-ui/core'; -import { - TuiAvatarComponent, - TuiCheckboxBlockModule, - TuiRadioListModule, -} from '@taiga-ui/kit'; - -import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module'; -import {ExampleTuiCheckboxBlockComponent} from './checkbox-block.component'; -import {TuiCheckboxBlockExample1} from './examples/1'; -import {TuiCheckboxBlockExample2} from './examples/2'; -import {TuiCheckboxBlockExample3} from './examples/3'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - TuiCheckboxBlockModule, - TuiGroupDirective, - TuiAddonDocModule, - InheritedDocumentationModule, - ReactiveFormsModule, - CommonModule, - TuiAvatarComponent, - TuiRadioListModule, - TuiButtonModule, - TuiTooltipModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCheckboxBlockComponent)), - ], - declarations: [ - TuiCheckboxBlockExample1, - TuiCheckboxBlockExample2, - TuiCheckboxBlockExample3, - ExampleTuiCheckboxBlockComponent, - ], - exports: [ExampleTuiCheckboxBlockComponent], -}) -export class ExampleTuiCheckboxBlockModule {} diff --git a/projects/demo/src/modules/components/checkbox-block/checkbox-block.style.less b/projects/demo/src/modules/components/checkbox-block/checkbox-block.style.less deleted file mode 100644 index 01f67c652de2..000000000000 --- a/projects/demo/src/modules/components/checkbox-block/checkbox-block.style.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '@taiga-ui/core/styles/taiga-ui-local'; - -.wrapper { - margin-top: 1.875rem; -} diff --git a/projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html b/projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html deleted file mode 100644 index 976341360341..000000000000 --- a/projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html +++ /dev/null @@ -1,173 +0,0 @@ - - -

- CheckboxBlock - can be used in forms where selected option does not change or update content (e.g. does not work like a - filter). It may be grouped in horizontal row only except the mobile view -

- - - - - - - - - - - - - - - - - -
- - One option - - - An alternative one - - - Other - -
- - - - - Disabled state (use - formControl.disable() - ) - - - Left/right content align - - - Hide checkbox - - - Size - - - - - - -
    -
  1. -

    - Import an Angular module for forms and - TuiCheckboxBlockModule - 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/checkbox-block/examples/1/index.html b/projects/demo/src/modules/components/checkbox-block/examples/1/index.html deleted file mode 100644 index 27931d1bbbb9..000000000000 --- a/projects/demo/src/modules/components/checkbox-block/examples/1/index.html +++ /dev/null @@ -1,38 +0,0 @@ -
-
- - Grapes - -
-
- - Qiwi - -
-
- - Oranges - -
-
- - Watermelons - -
-
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/2/index.html b/projects/demo/src/modules/components/checkbox-block/examples/2/index.html deleted file mode 100644 index c5a8b8d300e5..000000000000 --- a/projects/demo/src/modules/components/checkbox-block/examples/2/index.html +++ /dev/null @@ -1,100 +0,0 @@ -

Horizontal group

-
-
- - Oranges - - - Apples - - - Pineapples - -
-
-

Vertical group

-
-
- - Oranges - - - Apples - - - Pineapples - -
-
-

Without checkbox indicators

-
-
- - Oranges - - - Apples - - - Pineapples - -
-
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/2/index.ts b/projects/demo/src/modules/components/checkbox-block/examples/2/index.ts deleted file mode 100644 index ff61a16a596a..000000000000 --- a/projects/demo/src/modules/components/checkbox-block/examples/2/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; - -@Component({ - selector: 'tui-checkbox-block-example-2', - templateUrl: './index.html', - styleUrls: ['./index.less'], - encapsulation, - changeDetection, -}) -export class TuiCheckboxBlockExample2 { - protected testForm = new FormGroup({ - testValue1: new FormControl(false), - testValue2: new FormControl(false), - testValue3: new FormControl(false), - }); -} diff --git a/projects/demo/src/modules/components/checkbox-block/examples/3/index.html b/projects/demo/src/modules/components/checkbox-block/examples/3/index.html deleted file mode 100644 index 0ff12f04a5e5..000000000000 --- a/projects/demo/src/modules/components/checkbox-block/examples/3/index.html +++ /dev/null @@ -1,70 +0,0 @@ -
-
- -
- - H - - Heading -
- -
-
- -
- - P - -
-
Label
- Placeholder -
-
- -
-
- -
- Heading -
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi atque incidunt itaque iusto natus - quaerat quia similique veniam? -
-
- -
-
- -
- Some heading - -
- -
-
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/import/declare-form.md b/projects/demo/src/modules/components/checkbox-block/examples/import/declare-form.md deleted file mode 100644 index 0e736be06367..000000000000 --- a/projects/demo/src/modules/components/checkbox-block/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/checkbox-block/examples/import/import-module.md b/projects/demo/src/modules/components/checkbox-block/examples/import/import-module.md deleted file mode 100644 index 2b04fbd47c26..000000000000 --- a/projects/demo/src/modules/components/checkbox-block/examples/import/import-module.md +++ /dev/null @@ -1,17 +0,0 @@ -```ts -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {TuiCheckboxBlockModule} from '@taiga-ui/kit'; - -// ... - -@NgModule({ - imports: [ - // ... - FormsModule, - ReactiveFormsModule, - TuiCheckboxBlockModule, - ], - // ... -}) -export class MyModule {} -``` diff --git a/projects/demo/src/modules/components/checkbox-block/examples/import/insert-template.md b/projects/demo/src/modules/components/checkbox-block/examples/import/insert-template.md deleted file mode 100644 index f938e8ba1fe7..000000000000 --- a/projects/demo/src/modules/components/checkbox-block/examples/import/insert-template.md +++ /dev/null @@ -1,5 +0,0 @@ -```html -
- Content -
-``` diff --git a/projects/demo/src/modules/components/group/examples/3/index.html b/projects/demo/src/modules/components/group/examples/3/index.html index e194754b8478..aa54f4830d8c 100644 --- a/projects/demo/src/modules/components/group/examples/3/index.html +++ b/projects/demo/src/modules/components/group/examples/3/index.html @@ -5,28 +5,35 @@ [collapsed]="true" [formGroup]="testForm" > - Oranges - - + + + - + + + + + diff --git a/projects/demo/src/modules/components/group/examples/4/index.html b/projects/demo/src/modules/components/group/examples/4/index.html index 2b3535a5f586..2b674cc33638 100644 --- a/projects/demo/src/modules/components/group/examples/4/index.html +++ b/projects/demo/src/modules/components/group/examples/4/index.html @@ -5,31 +5,33 @@ [collapsed]="true" [formGroup]="testForm" > - -
- Oranges -
An orange is a fruit of various citrus species in the family Rutaceae
-
- - -
- Pineapples -
+ +
-
- + + + + diff --git a/projects/demo/src/modules/components/group/group.module.ts b/projects/demo/src/modules/components/group/group.module.ts index 9699e5eba7e9..77b21fcce59b 100644 --- a/projects/demo/src/modules/components/group/group.module.ts +++ b/projects/demo/src/modules/components/group/group.module.ts @@ -1,9 +1,8 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; import {TuiCurrencyPipeModule} from '@taiga-ui/addon-commerce'; -import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; +import {tuiGetDocModules} from '@taiga-ui/addon-doc'; import { TuiDataListModule, TuiErrorModule, @@ -13,9 +12,10 @@ import { TuiModeModule, TuiTextfieldControllerModule, } from '@taiga-ui/core'; -import {TuiButtonModule} from '@taiga-ui/experimental'; +import {TuiButtonModule, TuiRadioModule, TuiTitleModule} from '@taiga-ui/experimental'; import { TuiBadgeDirective, + TuiBlockDirective, TuiComboBoxModule, TuiDataListWrapperModule, TuiFieldErrorPipeModule, @@ -23,7 +23,6 @@ import { TuiInputNumberModule, TuiMultiSelectModule, TuiProjectClassModule, - TuiRadioBlockModule, TuiSelectModule, } from '@taiga-ui/kit'; @@ -36,7 +35,6 @@ import {ExampleTuiGroupComponent} from './group.component'; @NgModule({ imports: [ TuiProjectClassModule, - TuiRadioBlockModule, TuiLinkModule, TuiBadgeDirective, TuiButtonModule, @@ -56,9 +54,11 @@ import {ExampleTuiGroupComponent} from './group.component'; ReactiveFormsModule, TuiTextfieldControllerModule, TuiHintModule, - TuiAddonDocModule, TuiMultiSelectModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiGroupComponent)), + TuiBlockDirective, + TuiRadioModule, + tuiGetDocModules(ExampleTuiGroupComponent), + TuiTitleModule, ], declarations: [ ExampleTuiGroupComponent, diff --git a/projects/demo/src/modules/components/group/group.template.html b/projects/demo/src/modules/components/group/group.template.html index c25d4cb9854b..b35ab74d4d3e 100644 --- a/projects/demo/src/modules/components/group/group.template.html +++ b/projects/demo/src/modules/components/group/group.template.html @@ -156,11 +156,7 @@
  1. -

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

    +

    Add an import:

    - {{ item }} - + + {{ item }} @@ -21,7 +21,7 @@ @@ -79,11 +79,7 @@
    1. -

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

      +

      Add an import:

      -
      - - Grapes - -
      -
      - - Qiwi - -
      -
      - - Oranges - -
      -
      - - Watermelons - -
      - diff --git a/projects/demo/src/modules/components/radio-block/examples/2/index.html b/projects/demo/src/modules/components/radio-block/examples/2/index.html deleted file mode 100644 index 3c2192bc7298..000000000000 --- a/projects/demo/src/modules/components/radio-block/examples/2/index.html +++ /dev/null @@ -1,92 +0,0 @@ -

      Horizontal group

      -
      -
      - - Oranges - - - Apples - - - Pineapples - -
      -
      -

      Vertical group

      -
      -
      - - Oranges - - - Apples - - - Pineapples - -
      -
      -

      Group without radio indicators

      -
      -
      - - {{ fruit }} - -
      -
      diff --git a/projects/demo/src/modules/components/radio-block/examples/2/index.less b/projects/demo/src/modules/components/radio-block/examples/2/index.less deleted file mode 100644 index 8f443997c87f..000000000000 --- a/projects/demo/src/modules/components/radio-block/examples/2/index.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '@taiga-ui/core/styles/taiga-ui-local'; - -.group { - max-width: 33rem; - margin-bottom: 1.5rem; -} - -.title { - font: var(--tui-font-heading-5); - margin: 0 0 1rem; -} diff --git a/projects/demo/src/modules/components/radio-block/examples/2/index.ts b/projects/demo/src/modules/components/radio-block/examples/2/index.ts deleted file mode 100644 index e0d9e3d26c9f..000000000000 --- a/projects/demo/src/modules/components/radio-block/examples/2/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; - -@Component({ - selector: 'tui-radio-block-example-2', - templateUrl: './index.html', - styleUrls: ['./index.less'], - encapsulation, - changeDetection, -}) -export class TuiRadioBlockExample2 { - protected readonly testForm = new FormGroup({ - testValue: new FormControl('orange'), - }); - - protected readonly fruits = ['apple', 'orange', 'pineapple']; -} diff --git a/projects/demo/src/modules/components/radio-block/examples/3/index.html b/projects/demo/src/modules/components/radio-block/examples/3/index.html deleted file mode 100644 index ecf6559248ce..000000000000 --- a/projects/demo/src/modules/components/radio-block/examples/3/index.html +++ /dev/null @@ -1,74 +0,0 @@ -
      -
      - -
      - - H - - Heading -
      -       -
      -
      - -
      - - H - -
      -
      Label
      - Placeholder -
      -
      -       -
      -
      - -
      - Heading -
      - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi atque incidunt itaque iusto natus - quaerat quia similique veniam? -
      -
      -       -
      -
      - -
      - Some content - -
      -       -
      -
      diff --git a/projects/demo/src/modules/components/radio-block/examples/3/index.less b/projects/demo/src/modules/components/radio-block/examples/3/index.less deleted file mode 100644 index ad1f8881dcc6..000000000000 --- a/projects/demo/src/modules/components/radio-block/examples/3/index.less +++ /dev/null @@ -1,33 +0,0 @@ -@import '@taiga-ui/core/styles/taiga-ui-local'; - -.control { - max-width: 17rem; -} - -.content { - display: flex; - align-items: center; -} - -.label { - font: var(--tui-font-text-s); - color: var(--tui-text-03); -} - -.text { - font: var(--tui-font-text-s); - margin-top: @space; - color: var(--tui-text-02); -} - -.inner { - margin: 1rem 0; - white-space: normal; - - &_flex { - display: flex; - justify-content: space-between; - margin: 0; - width: 14rem; - } -} diff --git a/projects/demo/src/modules/components/radio-block/examples/3/index.ts b/projects/demo/src/modules/components/radio-block/examples/3/index.ts deleted file mode 100644 index 07cba3bf67f2..000000000000 --- a/projects/demo/src/modules/components/radio-block/examples/3/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; - -@Component({ - selector: 'tui-radio-block-example-3', - templateUrl: './index.html', - styleUrls: ['./index.less'], - encapsulation, - changeDetection, -}) -export class TuiRadioBlockExample3 { - protected readonly testForm = new FormGroup({ - testValue: new FormControl('example1'), - }); -} diff --git a/projects/demo/src/modules/components/radio-block/examples/4/index.html b/projects/demo/src/modules/components/radio-block/examples/4/index.html deleted file mode 100644 index ecb054c88029..000000000000 --- a/projects/demo/src/modules/components/radio-block/examples/4/index.html +++ /dev/null @@ -1,24 +0,0 @@ -
      - - {{ item }} - - -
      -
      {{ form.value | json }}
      diff --git a/projects/demo/src/modules/components/radio-block/examples/4/index.less b/projects/demo/src/modules/components/radio-block/examples/4/index.less deleted file mode 100644 index cde52d5312d6..000000000000 --- a/projects/demo/src/modules/components/radio-block/examples/4/index.less +++ /dev/null @@ -1,11 +0,0 @@ -.control { - flex: initial; - - &._active .button { - display: inline-block; - } -} - -.button { - display: none; -} diff --git a/projects/demo/src/modules/components/radio-block/examples/4/index.ts b/projects/demo/src/modules/components/radio-block/examples/4/index.ts deleted file mode 100644 index 409cf86cbc4a..000000000000 --- a/projects/demo/src/modules/components/radio-block/examples/4/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; - -@Component({ - selector: 'tui-radio-block-example-4', - templateUrl: './index.html', - styleUrls: ['./index.less'], - encapsulation, - changeDetection, -}) -export class TuiRadioBlockExample4 { - protected readonly items = ['Kiwi', 'Orange', 'Apple']; - protected readonly form = new FormGroup({ - control: new FormControl(this.items[1]), - }); -} diff --git a/projects/demo/src/modules/components/radio-block/examples/import/declare-form.md b/projects/demo/src/modules/components/radio-block/examples/import/declare-form.md deleted file mode 100644 index dc7b6cc6040c..000000000000 --- a/projects/demo/src/modules/components/radio-block/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('orange'), - }); -} -``` diff --git a/projects/demo/src/modules/components/radio-block/examples/import/insert-template.md b/projects/demo/src/modules/components/radio-block/examples/import/insert-template.md deleted file mode 100644 index d9e09e4862d0..000000000000 --- a/projects/demo/src/modules/components/radio-block/examples/import/insert-template.md +++ /dev/null @@ -1,22 +0,0 @@ -```html -
      - - Oranges - - - Apples - - - Pineapples - -
      -``` diff --git a/projects/demo/src/modules/components/radio-block/radio-block.component.ts b/projects/demo/src/modules/components/radio-block/radio-block.component.ts deleted file mode 100644 index 18c646aedd93..000000000000 --- a/projects/demo/src/modules/components/radio-block/radio-block.component.ts +++ /dev/null @@ -1,75 +0,0 @@ -import {Component, forwardRef} from '@angular/core'; -import {FormControl} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {TuiDocExample} from '@taiga-ui/addon-doc'; -import {TuiHorizontalDirection, TuiSizeL, TuiSizeXS} from '@taiga-ui/core'; - -import {AbstractExampleTuiControl} from '../abstract/control'; -import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor'; - -@Component({ - selector: 'example-tui-radio-block', - templateUrl: './radio-block.template.html', - changeDetection, - providers: [ - { - provide: ABSTRACT_PROPS_ACCESSOR, - useExisting: forwardRef(() => ExampleTuiRadioBlockComponent), - }, - ], -}) -export class ExampleTuiRadioBlockComponent extends AbstractExampleTuiControl { - 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'), - }; - - 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'), - }; - - protected readonly contentAlignVariants: readonly TuiHorizontalDirection[] = [ - 'left', - 'right', - ]; - - protected contentAlign: TuiHorizontalDirection = this.contentAlignVariants[1]; - - protected hideRadio = false; - - protected readonly sizes: ReadonlyArray = ['xs', 's', 'm', 'l']; - - protected currentSize = this.sizes[3]; - - protected pseudoDisabled = false; - - public readonly control = new FormControl('orange'); - - public override get disabled(): boolean { - return this.control.disabled; - } - - public override set disabled(value: boolean) { - if (value) { - this.control.disable(); - } else { - this.control.enable(); - } - } -} diff --git a/projects/demo/src/modules/components/radio-block/radio-block.module.ts b/projects/demo/src/modules/components/radio-block/radio-block.module.ts deleted file mode 100644 index b4c23a226568..000000000000 --- a/projects/demo/src/modules/components/radio-block/radio-block.module.ts +++ /dev/null @@ -1,40 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import {TuiButtonModule, TuiGroupDirective, TuiTooltipModule} from '@taiga-ui/core'; -import {TuiAvatarComponent, TuiRadioBlockModule, TuiRadioListModule} from '@taiga-ui/kit'; - -import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module'; -import {TuiRadioBlockExample1} from './examples/1'; -import {TuiRadioBlockExample2} from './examples/2'; -import {TuiRadioBlockExample3} from './examples/3'; -import {TuiRadioBlockExample4} from './examples/4'; -import {ExampleTuiRadioBlockComponent} from './radio-block.component'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - TuiRadioBlockModule, - ReactiveFormsModule, - TuiAvatarComponent, - TuiRadioListModule, - TuiButtonModule, - TuiGroupDirective, - TuiTooltipModule, - InheritedDocumentationModule, - TuiAddonDocModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiRadioBlockComponent)), - ], - declarations: [ - TuiRadioBlockExample1, - TuiRadioBlockExample2, - TuiRadioBlockExample3, - TuiRadioBlockExample4, - ExampleTuiRadioBlockComponent, - ], - exports: [ExampleTuiRadioBlockComponent], -}) -export class ExampleTuiRadioBlockModule {} diff --git a/projects/demo/src/modules/components/radio-block/radio-block.template.html b/projects/demo/src/modules/components/radio-block/radio-block.template.html deleted file mode 100644 index 21a67a9842af..000000000000 --- a/projects/demo/src/modules/components/radio-block/radio-block.template.html +++ /dev/null @@ -1,203 +0,0 @@ - - -

      Radio inside button with custom content

      - - - - - - - - - - - - - - - - -       - - - - -
      - - Oranges - - - Apples - - - Pinapples - -
      -       -       - - - Disabled state (use - formControl.disable() - ) - - - Radio and content position - - - Hide radio button - - - Function that matches value and items, e.g. if objects are copied. Uses - === - by default. - - Must be a pure function - - - Emulates disabled state without disabling a form - - - Size - - - -       - - -
        -
      1. -

        - Import an Angular module for forms and - TuiRadioBlockModule - 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/markup/form/example/index.html b/projects/demo/src/modules/markup/form/example/index.html index bcc74457d6ff..3a40fa641708 100644 --- a/projects/demo/src/modules/markup/form/example/index.html +++ b/projects/demo/src/modules/markup/form/example/index.html @@ -135,22 +135,26 @@

      Header

      class="tui-form__row" [collapsed]="true" > - + - + + + + +
      Input time diff --git a/projects/demo/src/modules/markup/form/form.module.ts b/projects/demo/src/modules/markup/form/form.module.ts index b742ee9c5b83..c7ab06ab9d68 100644 --- a/projects/demo/src/modules/markup/form/form.module.ts +++ b/projects/demo/src/modules/markup/form/form.module.ts @@ -1,9 +1,8 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; import {TuiAmountPipe, TuiCurrencyPipeModule} from '@taiga-ui/addon-commerce'; -import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; +import {tuiGetDocModules} from '@taiga-ui/addon-doc'; import { TuiButtonModule, TuiDataListModule, @@ -13,7 +12,9 @@ import { TuiLabelModule, TuiTextfieldControllerModule, } from '@taiga-ui/core'; +import {TuiRadioModule} from '@taiga-ui/experimental'; import { + TuiBlockDirective, TuiCheckboxLabeledModule, TuiDataListWrapperModule, TuiFieldErrorPipeModule, @@ -26,7 +27,6 @@ import { TuiInputSliderModule, TuiInputTagModule, TuiInputTimeModule, - TuiRadioBlockModule, TuiRadioListModule, TuiSelectModule, TuiStepperModule, @@ -63,14 +63,14 @@ import {FormComponent} from './form.component'; TuiInputTagModule, TuiSelectModule, TuiGroupDirective, - TuiRadioBlockModule, + TuiBlockDirective, TuiTextfieldControllerModule, TuiHintModule, TuiDataListModule, TuiDataListWrapperModule, TuiLabelModule, - TuiAddonDocModule, - RouterModule.forChild(tuiGenerateRoutes(FormComponent)), + TuiRadioModule, + tuiGetDocModules(FormComponent), ], declarations: [FormComponent, TuiExample], exports: [FormComponent], diff --git a/projects/experimental/components/checkbox/checkbox.style.less b/projects/experimental/components/checkbox/checkbox.style.less index faacd64c17fa..966b94ddb083 100644 --- a/projects/experimental/components/checkbox/checkbox.style.less +++ b/projects/experimental/components/checkbox/checkbox.style.less @@ -8,6 +8,7 @@ border-radius: var(--tui-radius-s); cursor: pointer; margin: 0; + flex-shrink: 0; &:before { .fullsize(); diff --git a/projects/experimental/components/radio/radio.style.less b/projects/experimental/components/radio/radio.style.less index 18c0a15751ea..6de1505aae07 100644 --- a/projects/experimental/components/radio/radio.style.less +++ b/projects/experimental/components/radio/radio.style.less @@ -9,6 +9,7 @@ height: var(--t-size); cursor: pointer; margin: 0; + flex-shrink: 0; border-radius: 100%; color: var(--tui-primary-text); diff --git a/projects/kit/components/block/block.component.ts b/projects/kit/components/block/block.component.ts new file mode 100644 index 000000000000..cdeb0affff64 --- /dev/null +++ b/projects/kit/components/block/block.component.ts @@ -0,0 +1,13 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + standalone: true, + template: '', + styleUrls: ['./block.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'tui-block', + }, +}) +export class TuiBlockComponent {} diff --git a/projects/kit/components/block/block.directive.ts b/projects/kit/components/block/block.directive.ts new file mode 100644 index 000000000000..ecc0393a6004 --- /dev/null +++ b/projects/kit/components/block/block.directive.ts @@ -0,0 +1,51 @@ +import {ContentChild, Directive, HostBinding, inject, Input} from '@angular/core'; +import {NgControl} from '@angular/forms'; +import {TuiNativeValidatorDirective, tuiWithStyles} from '@taiga-ui/cdk'; +import { + TuiAppearanceDirective, + tuiAppearanceOptionsProvider, + TuiSizeL, + TuiSizeXS, +} from '@taiga-ui/core'; +import {tuiAvatarOptionsProvider} from '@taiga-ui/kit/components/avatar'; + +import {TuiBlockComponent} from './block.component'; +import {TUI_BLOCK_OPTIONS} from './block.options'; + +@Directive({ + standalone: true, + selector: 'label[tuiBlock],input[tuiBlock]', + providers: [ + tuiAppearanceOptionsProvider(TUI_BLOCK_OPTIONS), + tuiAvatarOptionsProvider({size: 's'}), + ], + host: {tuiBlock: ''}, + hostDirectives: [ + TuiNativeValidatorDirective, + { + directive: TuiAppearanceDirective, + inputs: [ + 'tuiAppearance: appearance', + 'tuiAppearanceState', + 'tuiAppearanceFocus', + ], + }, + ], +}) +export class TuiBlockDirective { + @ContentChild(NgControl) + private readonly control?: NgControl; + + private readonly options = inject(TUI_BLOCK_OPTIONS); + + protected readonly nothing = tuiWithStyles(TuiBlockComponent); + + @Input('tuiBlock') + @HostBinding('attr.data-size') + size: TuiSizeL | TuiSizeXS | '' = this.options.size; + + @HostBinding('class._disabled') + get disabled(): boolean { + return !!this.control?.disabled; + } +} diff --git a/projects/kit/components/block/block.options.ts b/projects/kit/components/block/block.options.ts new file mode 100644 index 000000000000..e0b36be04f54 --- /dev/null +++ b/projects/kit/components/block/block.options.ts @@ -0,0 +1,18 @@ +import {Provider} from '@angular/core'; +import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk'; +import {TuiAppearanceOptions, TuiSizeL, TuiSizeXS} from '@taiga-ui/core'; + +export interface TuiBlockOptions extends TuiAppearanceOptions { + readonly size: TuiSizeL | TuiSizeXS; +} + +export const TUI_BLOCK_DEFAULT_OPTIONS: TuiBlockOptions = { + appearance: 'whiteblock', + size: 'l', +}; + +export const TUI_BLOCK_OPTIONS = tuiCreateToken(TUI_BLOCK_DEFAULT_OPTIONS); + +export function tuiBlockOptionsProvider(options: Partial): Provider { + return tuiProvideOptions(TUI_BLOCK_OPTIONS, options, TUI_BLOCK_DEFAULT_OPTIONS); +} diff --git a/projects/kit/components/block/block.style.less b/projects/kit/components/block/block.style.less new file mode 100644 index 000000000000..a58c23f2d02f --- /dev/null +++ b/projects/kit/components/block/block.style.less @@ -0,0 +1,95 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +[tuiBlock] { + position: relative; + display: inline-flex; + align-items: center; + gap: 1rem; + color: var(--tui-text-01); + border-radius: var(--t-radius); + font: var(--tui-font-text-m); + min-height: var(--t-height); + padding: 0 var(--tui-padding-l); + cursor: pointer; + overflow: hidden; + + --t-height: var(--tui-height-l); + --t-margin: 1rem 0; + --t-radius: var(--tui-radius-l); + + &[data-size='xs'] { + gap: 0.25rem; + font: var(--tui-font-text-xs); + padding: 0 0.5rem; + + --t-height: var(--tui-height-xs); + --t-margin: 0.25rem -0.125rem; + --t-radius: var(--tui-radius-m); + + input:not([tuiBlock]) { + transform: scale(0.75); + } + } + + &[data-size='s'] { + gap: 0.75rem; + font: var(--tui-font-text-s); + padding: 0 var(--tui-padding-s); + + --t-height: var(--tui-height-s); + --t-margin: 0.5rem -0.25rem; + --t-radius: var(--tui-radius-m); + } + + &[data-size='m'] { + gap: 0.5rem; + font: var(--tui-font-text-m); + padding: 0 var(--tui-padding-m); + + --t-height: var(--tui-height-m); + --t-margin: 0.875rem 0.125rem; + --t-radius: var(--tui-radius-m); + } + + &._disabled { + pointer-events: none; + opacity: var(--tui-disabled-opacity); + + :focus { + visibility: hidden; + } + } + + &[data-appearance=''] { + justify-content: center; + } + + input:not([tuiBlock]) { + align-self: flex-start; + margin: var(--t-margin); + flex-shrink: 0; + } + + input[tuiBlock] { + .fullsize(); + + min-height: 0; + border-radius: inherit; + } + + tui-avatar { + margin: -0.25rem; + } + + [tuiTitle] { + flex: 1; + min-height: inherit; + justify-content: center; + align-self: flex-start; + margin: 0.75rem 0; + } + + [tuiSubtitle] { + color: var(--tui-text-02); + } +} diff --git a/projects/kit/components/block/index.ts b/projects/kit/components/block/index.ts new file mode 100644 index 000000000000..3b0e602290c2 --- /dev/null +++ b/projects/kit/components/block/index.ts @@ -0,0 +1,3 @@ +export * from './block.component'; +export * from './block.directive'; +export * from './block.options'; diff --git a/projects/kit/components/checkbox-block/ng-package.json b/projects/kit/components/block/ng-package.json similarity index 100% rename from projects/kit/components/checkbox-block/ng-package.json rename to projects/kit/components/block/ng-package.json diff --git a/projects/kit/components/checkbox-block/checkbox-block.component.ts b/projects/kit/components/checkbox-block/checkbox-block.component.ts deleted file mode 100644 index 04a4854bab03..000000000000 --- a/projects/kit/components/checkbox-block/checkbox-block.component.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { - ChangeDetectionStrategy, - Component, - HostBinding, - inject, - Input, - ViewChild, -} from '@angular/core'; -import { - AbstractTuiNullableControl, - tuiAsControl, - tuiAsFocusableItemAccessor, - TuiFocusableElementAccessor, - tuiIsNativeFocused, - TuiNativeFocusableElement, -} from '@taiga-ui/cdk'; -import { - TuiAppearance, - TuiHorizontalDirection, - TuiModeDirective, - TuiSizeL, - TuiSizeXS, -} from '@taiga-ui/core'; -import {TuiCheckboxComponent} from '@taiga-ui/kit/components/checkbox'; - -@Component({ - selector: 'tui-checkbox-block', - templateUrl: './checkbox-block.template.html', - styleUrls: ['./checkbox-block.style.less'], - changeDetection: ChangeDetectionStrategy.OnPush, - providers: [ - tuiAsFocusableItemAccessor(TuiCheckboxBlockComponent), - tuiAsControl(TuiCheckboxBlockComponent), - ], -}) -export class TuiCheckboxBlockComponent - extends AbstractTuiNullableControl - implements TuiFocusableElementAccessor -{ - @ViewChild(TuiCheckboxComponent) - private readonly checkbox?: TuiCheckboxComponent; - - @Input() - @HostBinding('attr.data-align') - public contentAlign: TuiHorizontalDirection = 'right'; - - @Input() - @HostBinding('class._hidden_input') - public hideCheckbox = false; - - @Input() - @HostBinding('attr.data-size') - public size: TuiSizeL | TuiSizeXS = 'l'; - - protected readonly modeDirective = inject(TuiModeDirective, {optional: true}); - - public get nativeFocusableElement(): TuiNativeFocusableElement | null { - return this.checkbox?.nativeFocusableElement ?? null; - } - - @HostBinding('class._active') - protected get checked(): boolean { - return this.value !== false && this.hideCheckbox; - } - - protected get checkboxSize(): TuiSizeL { - return this.size === 'l' ? 'l' : 'm'; - } - - public get focused(): boolean { - return tuiIsNativeFocused(this.nativeFocusableElement); - } - - protected get appearance(): TuiAppearance { - if (!this.modeDirective?.mode) { - return this.checked - ? TuiAppearance.WhiteblockActive - : TuiAppearance.Whiteblock; - } - - return this.checked ? TuiAppearance.Primary : TuiAppearance.Secondary; - } - - protected onFocused(focused: boolean): void { - this.updateFocused(focused); - } - - protected onFocusVisible(focusVisible: boolean): void { - this.updateFocusVisible(focusVisible); - } - - /** @deprecated use 'value' setter */ - protected onModelChange(value: boolean): void { - this.value = value; - } -} diff --git a/projects/kit/components/checkbox-block/checkbox-block.module.ts b/projects/kit/components/checkbox-block/checkbox-block.module.ts deleted file mode 100644 index f9d1b8c5d5b3..000000000000 --- a/projects/kit/components/checkbox-block/checkbox-block.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {TuiHoveredModule, TuiPressedModule} from '@taiga-ui/cdk'; -import {TuiWrapperModule} from '@taiga-ui/core'; -import {TuiCheckboxModule} from '@taiga-ui/kit/components/checkbox'; - -import {TuiCheckboxBlockComponent} from './checkbox-block.component'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - TuiHoveredModule, - TuiPressedModule, - TuiCheckboxModule, - TuiWrapperModule, - ], - declarations: [TuiCheckboxBlockComponent], - exports: [TuiCheckboxBlockComponent], -}) -export class TuiCheckboxBlockModule {} diff --git a/projects/kit/components/checkbox-block/checkbox-block.style.less b/projects/kit/components/checkbox-block/checkbox-block.style.less deleted file mode 100644 index 4cb4edb1ab38..000000000000 --- a/projects/kit/components/checkbox-block/checkbox-block.style.less +++ /dev/null @@ -1,124 +0,0 @@ -@import '@taiga-ui/core/styles/taiga-ui-local'; - -:host { - .text-basic(); - - display: inline-block; - vertical-align: top; - align-items: flex-start; - border-radius: var(--tui-radius-m); - - &[data-size='xs'] { - font: var(--tui-font-text-xs); - } - - &[data-size='m'], - &[data-size='l'] { - font: var(--tui-font-text-m); - } - - &._disabled, - &._readonly { - pointer-events: none; - } -} - -.t-wrapper { - position: relative; - display: flex; - align-items: inherit; - box-sizing: border-box; - border-radius: inherit; - cursor: pointer; - user-select: none; - padding: 0 1rem 0 0; - - :host[data-size='xs'] & { - padding-right: 0.5rem; - } - - :host[data-align='right'] & { - flex-direction: row-reverse; - padding: 0 0 0 1rem; - } - - :host[data-align='right'][data-size='xs'] & { - padding-left: 0.5rem; - } - - :host[data-size='xs']._hidden_input & { - padding: 0 0.5rem; - - &:not(._focused):after { - border-width: 1px; - } - } - - :host[data-size='s']._hidden_input & { - padding: 0 1rem; - } - - :host[data-size='m']._hidden_input & { - padding: 0 1.5rem; - } - - :host[data-size='l']._hidden_input & { - padding: 0 2.25rem; - } -} - -.t-view { - :host[data-size='xs'] & { - margin: calc(var(--tui-height-xs) / 2 - 0.5rem) 0.25rem; - transform: scale(0.75); - } - - :host[data-size='s'] & { - margin: calc(var(--tui-height-s) / 2 - 0.5rem) 0.5rem; - } - - :host[data-size='m'] & { - margin: calc(var(--tui-height-m) / 2 - 0.5rem) 0.75rem; - } - - :host[data-size='l'] & { - margin: calc(var(--tui-height-l) / 2 - 0.75rem) 1rem; - } - - :host._hidden_input & { - .visually-hidden(); - } -} - -.t-label { - display: flex; - flex-grow: 1; - align-self: flex-start; - align-items: center; - overflow: hidden; - - :host[data-size='xs'] & { - min-height: var(--tui-height-xs); - } - - :host[data-size='s'] & { - min-height: var(--tui-height-s); - } - - :host[data-size='m'] & { - min-height: var(--tui-height-m); - } - - :host[data-size='l'] & { - min-height: var(--tui-height-l); - } - - :host._hidden_input & { - text-align: center; - justify-content: center; - } -} - -.t-content { - .text-overflow(); -} diff --git a/projects/kit/components/checkbox-block/checkbox-block.template.html b/projects/kit/components/checkbox-block/checkbox-block.template.html deleted file mode 100644 index 6e32cb7f82ff..000000000000 --- a/projects/kit/components/checkbox-block/checkbox-block.template.html +++ /dev/null @@ -1,31 +0,0 @@ - - diff --git a/projects/kit/components/checkbox-block/index.ts b/projects/kit/components/checkbox-block/index.ts deleted file mode 100644 index 815406abe046..000000000000 --- a/projects/kit/components/checkbox-block/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './checkbox-block.component'; -export * from './checkbox-block.module'; diff --git a/projects/kit/components/filter/filter.module.ts b/projects/kit/components/filter/filter.module.ts index 367fffef41b4..a212a61f80c5 100644 --- a/projects/kit/components/filter/filter.module.ts +++ b/projects/kit/components/filter/filter.module.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {TuiModeModule} from '@taiga-ui/core'; import {TuiBadgeDirective} from '@taiga-ui/kit/components/badge'; -import {TuiCheckboxBlockModule} from '@taiga-ui/kit/components/checkbox-block'; +import {TuiBlockDirective} from '@taiga-ui/kit/components/block'; import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; import {TuiFilterComponent} from './filter.component'; @@ -13,9 +13,9 @@ import {TuiFilterComponent} from './filter.component'; CommonModule, FormsModule, PolymorpheusModule, - TuiCheckboxBlockModule, TuiBadgeDirective, TuiModeModule, + TuiBlockDirective, ], declarations: [TuiFilterComponent], exports: [TuiFilterComponent], diff --git a/projects/kit/components/filter/filter.style.less b/projects/kit/components/filter/filter.style.less index 5990241cc140..6e1795421712 100644 --- a/projects/kit/components/filter/filter.style.less +++ b/projects/kit/components/filter/filter.style.less @@ -1,32 +1,18 @@ :host { display: block; - margin-bottom: -0.25rem; -} + margin-bottom: calc(-1 * var(--t-gap)); -.t-content { - display: flex; - align-items: center; -} + --t-gap: 0.25rem; -.t-item { - margin-right: 0.25rem; - margin-bottom: 0.25rem; - - &:last-child, - :host[data-size='l'] &:last-child { - margin-right: 0; - } - - :host[data-size='l'] & { - margin-right: 0.5rem; - margin-bottom: 0.5rem; + &[data-size='l'] { + --t-gap: 0.5rem; } } -.t-badge { - margin-left: 0.25rem; +.t-item { + margin: 0 var(--t-gap) var(--t-gap) 0; - &_disabled { - opacity: var(--tui-disabled-opacity); + &:last-child { + margin-right: 0; } } diff --git a/projects/kit/components/filter/filter.template.html b/projects/kit/components/filter/filter.template.html index 69f478767ff7..e1b6930ad72b 100644 --- a/projects/kit/components/filter/filter.template.html +++ b/projects/kit/components/filter/filter.template.html @@ -1,30 +1,25 @@ - -
      + {{ text }} + + - - {{ text }} - - - {{ badgeValue }} - -
      -       + {{ badgeValue }} + + + diff --git a/projects/kit/components/filter/test/filter.component.spec.ts b/projects/kit/components/filter/test/filter.component.spec.ts index 1e640ae17830..a34b6a2dabb8 100644 --- a/projects/kit/components/filter/test/filter.component.spec.ts +++ b/projects/kit/components/filter/test/filter.component.spec.ts @@ -1,11 +1,10 @@ -import {Component, DebugElement, ViewChild} from '@angular/core'; +import {Component, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {ALWAYS_FALSE_HANDLER, TuiBooleanHandler, TuiHandler} from '@taiga-ui/cdk'; import {TuiSizeS} from '@taiga-ui/core'; import {TuiFilterComponent, TuiFilterModule} from '@taiga-ui/kit'; -import {TuiPageObject} from '@taiga-ui/testing'; const BADGE_VALUE = 10; @@ -48,7 +47,7 @@ describe('Filter', () => { protected disabledItemHandler: TuiBooleanHandler = ALWAYS_FALSE_HANDLER; - protected control = new FormControl([]); + protected control = new FormControl([]); protected items: readonly ItemWithBadge[] | readonly string[] = ARR_STRING; @@ -60,12 +59,6 @@ describe('Filter', () => { let fixture: ComponentFixture; let testComponent: TestComponent; let component: TuiFilterComponent; - let pageObject: TuiPageObject; - const testContext = { - get prefix() { - return 'tui-filter__'; - }, - }; beforeEach(async () => { TestBed.configureTestingModule({ @@ -74,27 +67,26 @@ describe('Filter', () => { }); await TestBed.compileComponents(); fixture = TestBed.createComponent(TestComponent); - pageObject = new TuiPageObject(fixture); testComponent = fixture.componentInstance; component = testComponent.component; fixture.detectChanges(); }); - function getCheckbox(): DebugElement { - return pageObject.getByAutomationId(`${testContext.prefix}checkbox`)!; + function getCheckbox(): HTMLInputElement { + return getContent().querySelector('input')!; } - function getContent(): DebugElement { - return pageObject.getByAutomationId(`${testContext.prefix}content`)!; + function getContent(): HTMLElement { + return fixture.nativeElement; } - function getBadge(): DebugElement { - return pageObject.getByAutomationId(`${testContext.prefix}badge`)!; + function getBadge(): HTMLElement { + return getContent().querySelector('tui-badge')!; } describe('value', () => { it('default absent', () => { - expect(testComponent.control.value.length).toBe(0); + expect(testComponent.control.value?.length).toBe(0); }); it('set from checked items', () => { @@ -114,17 +106,13 @@ describe('Filter', () => { describe('content items', () => { it('passed correctly if items is an array of strings', () => { - expect(getContent().nativeElement.textContent.trim()).toBe( - 'Clothes and footwear', - ); + expect(getContent().textContent?.trim()).toBe('Clothes and footwear'); }); it('passed correctly if items is an array of objects with toString', () => { testComponent.items = ARR_OBJECT; fixture.detectChanges(); - expect(getContent().nativeElement.textContent.trim()).toBe( - 'Focused Zone 10', - ); + expect(getContent().textContent?.trim()).toBe('Focused Zone 10'); }); }); @@ -151,40 +139,19 @@ describe('Filter', () => { testComponent.items = ARR_OBJECT; fixture.detectChanges(); - expect(Number(getBadge().nativeElement.textContent)).toBe(BADGE_VALUE); + expect(Number(getBadge().textContent)).toBe(BADGE_VALUE); }); }); describe('disabled element', () => { it('false by default', () => { - expect(getCheckbox().nativeElement.classList.contains('_disabled')).toBe( - false, - ); + expect(getCheckbox().disabled).toBe(false); }); it('present if disabledHandler returned true', () => { testComponent.disabledItemHandler = item => item.indexOf('footwear') > -1; fixture.detectChanges(); - expect(getCheckbox().componentInstance.ngControl.isDisabled).toBe(true); - }); - }); - - describe('size', () => { - it('if m, then CheckboxBlock have m and badge have l', () => { - testComponent.items = ARR_OBJECT; - fixture.detectChanges(); - - expect(getCheckbox().attributes['data-size']).toBe('m'); - expect(getBadge().attributes['data-size']).toBe('l'); - }); - - it('if s, then CheckboxBlock have s and badge have m', () => { - testComponent.items = ARR_OBJECT; - testComponent.size = 's'; - fixture.detectChanges(); - - expect(getCheckbox().attributes['data-size']).toBe('s'); - expect(getBadge().attributes['data-size']).toBe('m'); + expect(getCheckbox().disabled).toBe(true); }); }); }); diff --git a/projects/kit/components/index.ts b/projects/kit/components/index.ts index 8a8c53bbb450..627e8147d04d 100644 --- a/projects/kit/components/index.ts +++ b/projects/kit/components/index.ts @@ -6,12 +6,12 @@ export * from '@taiga-ui/kit/components/avatar-labeled'; export * from '@taiga-ui/kit/components/avatar-stack'; export * from '@taiga-ui/kit/components/badge'; export * from '@taiga-ui/kit/components/badged-content'; +export * from '@taiga-ui/kit/components/block'; export * from '@taiga-ui/kit/components/breadcrumbs'; export * from '@taiga-ui/kit/components/calendar-month'; export * from '@taiga-ui/kit/components/calendar-range'; export * from '@taiga-ui/kit/components/carousel'; export * from '@taiga-ui/kit/components/checkbox'; -export * from '@taiga-ui/kit/components/checkbox-block'; export * from '@taiga-ui/kit/components/checkbox-labeled'; export * from '@taiga-ui/kit/components/combo-box'; export * from '@taiga-ui/kit/components/data-list-wrapper'; @@ -48,7 +48,6 @@ export * from '@taiga-ui/kit/components/progress'; export * from '@taiga-ui/kit/components/prompt'; export * from '@taiga-ui/kit/components/push'; export * from '@taiga-ui/kit/components/radio'; -export * from '@taiga-ui/kit/components/radio-block'; export * from '@taiga-ui/kit/components/radio-group'; export * from '@taiga-ui/kit/components/radio-labeled'; export * from '@taiga-ui/kit/components/radio-list'; diff --git a/projects/kit/components/items-with-more/items-with-more.module.ts b/projects/kit/components/items-with-more/items-with-more.module.ts index 9d40628a4c8f..de8c9202643c 100644 --- a/projects/kit/components/items-with-more/items-with-more.module.ts +++ b/projects/kit/components/items-with-more/items-with-more.module.ts @@ -1,14 +1,13 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {TuiItemDirective, TuiItemModule, TuiLetModule} from '@taiga-ui/cdk'; -import {TuiProjectClassModule} from '@taiga-ui/kit/directives'; import {TuiItemsWithMoreComponent} from './items-with-more.component'; import {TuiItemsWithMoreDirective} from './items-with-more.directive'; import {TuiMoreDirective} from './more.directive'; @NgModule({ - imports: [CommonModule, TuiItemModule, TuiLetModule, TuiProjectClassModule], + imports: [CommonModule, TuiItemModule, TuiLetModule], declarations: [ TuiItemsWithMoreComponent, TuiItemsWithMoreDirective, diff --git a/projects/kit/components/items-with-more/items-with-more.template.html b/projects/kit/components/items-with-more/items-with-more.template.html index dfb058dc79ae..77eda0daed84 100644 --- a/projects/kit/components/items-with-more/items-with-more.template.html +++ b/projects/kit/components/items-with-more/items-with-more.template.html @@ -4,7 +4,6 @@ *ngFor="let item of items; let index = index" class="t-item" [class.t-item_hidden]="index > lastIndex && index !== directive.required" - [tuiProjectClass]="['_active']" >
      @@ -12,7 +11,6 @@ *ngIf="more && lastIndex < items.length - 1" class="t-item" [class.t-item_hidden]="lastIndex >= items.length - 1" - [tuiProjectClass]="['_active']" > - extends AbstractTuiNullableControl - implements TuiFocusableElementAccessor -{ - @ViewChild(TuiRadioComponent) - private readonly radio?: TuiRadioComponent; - - @Input() - public item?: T; - - @Input() - public identityMatcher: TuiIdentityMatcher = TUI_DEFAULT_IDENTITY_MATCHER; - - @Input() - @HostBinding('attr.data-align') - public contentAlign: TuiHorizontalDirection = 'right'; - - @Input() - @HostBinding('attr.data-size') - public size: TuiSizeL | TuiSizeXS = 'l'; - - @Input() - @HostBinding('class._hidden_input') - public hideRadio = false; - - @Input() - public pseudoDisabled = false; - - protected readonly modeDirective = inject(TuiModeDirective, {optional: true}); - - public get nativeFocusableElement(): TuiNativeFocusableElement | null { - return this.radio?.nativeFocusableElement ?? null; - } - - public get focused(): boolean { - return !!this.radio && this.radio.focused; - } - - @HostBinding('class._disabled') - public override get computedDisabled(): boolean { - return this.disabled || this.pseudoDisabled; - } - - @HostBinding('class._active') - protected get checked(): boolean { - return !!this.radio?.checked && this.hideRadio; - } - - protected get checkboxSize(): TuiSizeL { - return this.size === 'l' ? 'l' : 'm'; - } - - protected get appearance(): TuiAppearance { - if (!this.modeDirective?.mode) { - return this.checked - ? TuiAppearance.WhiteblockActive - : TuiAppearance.Whiteblock; - } - - return this.checked ? TuiAppearance.Primary : TuiAppearance.Secondary; - } - - protected onFocused(focused: boolean): void { - this.updateFocused(focused); - } - - protected onFocusVisible(focusVisible: boolean): void { - this.updateFocusVisible(focusVisible); - } - - /** @deprecated use 'value' setter */ - protected onModelChange(value: T): void { - this.value = value; - } -} diff --git a/projects/kit/components/radio-block/radio-block.module.ts b/projects/kit/components/radio-block/radio-block.module.ts deleted file mode 100644 index f7fa1dbe46c9..000000000000 --- a/projects/kit/components/radio-block/radio-block.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {TuiWrapperModule} from '@taiga-ui/core'; -import {TuiRadioModule} from '@taiga-ui/kit/components/radio'; - -import {TuiRadioBlockComponent} from './radio-block.component'; - -@NgModule({ - imports: [CommonModule, FormsModule, TuiRadioModule, TuiWrapperModule], - declarations: [TuiRadioBlockComponent], - exports: [TuiRadioBlockComponent], -}) -export class TuiRadioBlockModule {} diff --git a/projects/kit/components/radio-block/radio-block.template.html b/projects/kit/components/radio-block/radio-block.template.html deleted file mode 100644 index c102511d2fed..000000000000 --- a/projects/kit/components/radio-block/radio-block.template.html +++ /dev/null @@ -1,35 +0,0 @@ - - From 71fbdcc738ab885ffbe1a59e3cedbb151c0940c2 Mon Sep 17 00:00:00 2001 From: taiga-family-bot Date: Tue, 27 Feb 2024 11:19:45 +0000 Subject: [PATCH 2/7] chore: icons have changed [bot] --- projects/demo/used-icons.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts index 1a2ba6aeccd1..2de437937a23 100644 --- a/projects/demo/used-icons.ts +++ b/projects/demo/used-icons.ts @@ -31,10 +31,10 @@ export const TUI_USED_ICONS = [ 'tuiIconBox', 'tuiIconLock', 'tuiIconStar', + 'tuiIconHeartLarge', 'tuiIconMoreHorizontal', 'tuiIconArrowRight', 'tuiIconEyeOff', - 'tuiIconHeartLarge', 'tuiIconSearch', 'tuiIconSettings', 'tuiIconChevronLeftLarge', From 3edd69ef187239af4c754da7c26864b143a95ecc Mon Sep 17 00:00:00 2001 From: waterplea Date: Tue, 27 Feb 2024 17:11:21 +0400 Subject: [PATCH 3/7] chore: fix screenshot --- .../modules/components/items-with-more/examples/2/index.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/projects/demo/src/modules/components/items-with-more/examples/2/index.less b/projects/demo/src/modules/components/items-with-more/examples/2/index.less index 458e715e5793..33803cee56ad 100644 --- a/projects/demo/src/modules/components/items-with-more/examples/2/index.less +++ b/projects/demo/src/modules/components/items-with-more/examples/2/index.less @@ -1,3 +1,8 @@ +.item { + border-radius: inherit; + font-weight: normal; +} + ._hidden { visibility: hidden; } From 13624cfb1d2b67c950b994e3f1c65209381684d9 Mon Sep 17 00:00:00 2001 From: waterplea Date: Tue, 27 Feb 2024 17:24:20 +0400 Subject: [PATCH 4/7] chore: fix screenshot --- .../demo/src/modules/components/block/block.template.html | 6 +++--- .../demo/src/modules/components/block/examples/1/index.ts | 4 ++-- .../demo/src/modules/components/block/examples/2/index.ts | 2 +- .../demo/src/modules/components/block/examples/3/index.ts | 4 ++-- projects/kit/components/block/block.directive.ts | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/projects/demo/src/modules/components/block/block.template.html b/projects/demo/src/modules/components/block/block.template.html index 55a9b8fdf4f1..65d04257f1ad 100644 --- a/projects/demo/src/modules/components/block/block.template.html +++ b/projects/demo/src/modules/components/block/block.template.html @@ -14,7 +14,7 @@ heading="Sizes" [content]="1 | tuiExample: 'html'" > - + - + - + diff --git a/projects/demo/src/modules/components/block/examples/1/index.ts b/projects/demo/src/modules/components/block/examples/1/index.ts index 20475a7a032d..4a8d45dff07e 100644 --- a/projects/demo/src/modules/components/block/examples/1/index.ts +++ b/projects/demo/src/modules/components/block/examples/1/index.ts @@ -4,14 +4,14 @@ import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; @Component({ - selector: 'tui-checkbox-block-example-1', + selector: 'tui-block-example-1', templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) export class TuiBlockExample1 { - protected testForm = new FormGroup({ + protected readonly testForm = new FormGroup({ testValue1: new FormControl(true), testValue2: new FormControl({value: false, disabled: true}), testValue3: new FormControl({value: true, disabled: true}), diff --git a/projects/demo/src/modules/components/block/examples/2/index.ts b/projects/demo/src/modules/components/block/examples/2/index.ts index ba8b96a9353b..17f0695f0c92 100644 --- a/projects/demo/src/modules/components/block/examples/2/index.ts +++ b/projects/demo/src/modules/components/block/examples/2/index.ts @@ -4,7 +4,7 @@ import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; @Component({ - selector: 'tui-checkbox-block-example-2', + selector: 'tui-block-example-2', templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, diff --git a/projects/demo/src/modules/components/block/examples/3/index.ts b/projects/demo/src/modules/components/block/examples/3/index.ts index 5cf7a607d74e..fe26fd3185d3 100644 --- a/projects/demo/src/modules/components/block/examples/3/index.ts +++ b/projects/demo/src/modules/components/block/examples/3/index.ts @@ -4,14 +4,14 @@ import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; @Component({ - selector: 'tui-checkbox-block-example-3', + selector: 'tui-block-example-3', templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) export class TuiBlockExample3 { - protected testForm = new FormGroup({ + protected readonly testForm = new FormGroup({ testValue1: new FormControl(false), testValue2: new FormControl(false), testValue3: new FormControl(false), diff --git a/projects/kit/components/block/block.directive.ts b/projects/kit/components/block/block.directive.ts index ecc0393a6004..d709248a999a 100644 --- a/projects/kit/components/block/block.directive.ts +++ b/projects/kit/components/block/block.directive.ts @@ -42,10 +42,10 @@ export class TuiBlockDirective { @Input('tuiBlock') @HostBinding('attr.data-size') - size: TuiSizeL | TuiSizeXS | '' = this.options.size; + public size: TuiSizeL | TuiSizeXS | '' = this.options.size; @HostBinding('class._disabled') - get disabled(): boolean { + protected get disabled(): boolean { return !!this.control?.disabled; } } From 9469d2451b8d063f140b1895445c93250a620784 Mon Sep 17 00:00:00 2001 From: waterplea Date: Tue, 27 Feb 2024 17:43:08 +0400 Subject: [PATCH 5/7] chore: fix screenshot --- projects/demo/src/modules/app/pages.ts | 2 +- .../filter/test/filter.component.spec.ts | 16 +++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index fa50f90d3fff..ab797e86d2bd 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -184,7 +184,7 @@ export const pages: TuiDocPages = [ { section: 'Components', title: 'Block', - keywords: 'кнопка, чек, форма, form, ввод, checkbox, radio, радио, лейбл, label', + keywords: 'кнопка, чек, форма, form, ввод, checkbox, radio, радио, label', route: '/components/block', }, { diff --git a/projects/kit/components/filter/test/filter.component.spec.ts b/projects/kit/components/filter/test/filter.component.spec.ts index a34b6a2dabb8..82c6ec49678f 100644 --- a/projects/kit/components/filter/test/filter.component.spec.ts +++ b/projects/kit/components/filter/test/filter.component.spec.ts @@ -43,17 +43,17 @@ describe('Filter', () => { }) class TestComponent { @ViewChild(TuiFilterComponent, {static: true}) - protected component!: TuiFilterComponent; + public component!: TuiFilterComponent; - protected disabledItemHandler: TuiBooleanHandler = ALWAYS_FALSE_HANDLER; + public disabledItemHandler: TuiBooleanHandler = ALWAYS_FALSE_HANDLER; - protected control = new FormControl([]); + public control = new FormControl([]); - protected items: readonly ItemWithBadge[] | readonly string[] = ARR_STRING; + public items: readonly ItemWithBadge[] | readonly string[] = ARR_STRING; - protected size: TuiSizeS = 'm'; + public size: TuiSizeS = 'm'; - protected badgeHandler: TuiHandler = item => Number(item); + public badgeHandler: TuiHandler = item => Number(item); } let fixture: ComponentFixture; @@ -148,9 +148,11 @@ describe('Filter', () => { expect(getCheckbox().disabled).toBe(false); }); - it('present if disabledHandler returned true', () => { + it('present if disabledHandler returned true', async () => { testComponent.disabledItemHandler = item => item.indexOf('footwear') > -1; fixture.detectChanges(); + await fixture.whenStable(); + expect(getCheckbox().disabled).toBe(true); }); }); From 068ed9113f62af7f0479a7d30595189715f4e63e Mon Sep 17 00:00:00 2001 From: waterplea Date: Tue, 27 Feb 2024 17:53:27 +0400 Subject: [PATCH 6/7] chore: fix build --- projects/demo/src/modules/components/block/block.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/demo/src/modules/components/block/block.component.ts b/projects/demo/src/modules/components/block/block.component.ts index faead0058f8f..2595ff88d435 100644 --- a/projects/demo/src/modules/components/block/block.component.ts +++ b/projects/demo/src/modules/components/block/block.component.ts @@ -7,6 +7,6 @@ import {changeDetection} from '@demo/emulate/change-detection'; changeDetection, }) export class ExampleTuiBlockComponent { - readonly exampleModule = import('./examples/import/import-module.md?raw'); - readonly exampleHtml = import('./examples/import/insert-template.md?raw'); + protected readonly exampleModule = import('./examples/import/import-module.md?raw'); + protected readonly exampleHtml = import('./examples/import/insert-template.md?raw'); } From 8c750b224269b7489af4e23987f4fb67bcd5f2c2 Mon Sep 17 00:00:00 2001 From: waterplea Date: Tue, 27 Feb 2024 18:22:59 +0400 Subject: [PATCH 7/7] chore: comments --- .../components/block/examples/3/index.html | 43 ------------------- .../block/examples/import/import-module.md | 2 +- .../block/examples/import/insert-template.md | 2 + .../kit/components/block/block.directive.ts | 10 +++-- 4 files changed, 9 insertions(+), 48 deletions(-) diff --git a/projects/demo/src/modules/components/block/examples/3/index.html b/projects/demo/src/modules/components/block/examples/3/index.html index 01846b2059d1..5298584211d8 100644 --- a/projects/demo/src/modules/components/block/examples/3/index.html +++ b/projects/demo/src/modules/components/block/examples/3/index.html @@ -60,47 +60,4 @@ [style.margin-left]="'auto'" > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/projects/demo/src/modules/components/block/examples/import/import-module.md b/projects/demo/src/modules/components/block/examples/import/import-module.md index a163fcc4d05b..f1aa5a1c1c39 100644 --- a/projects/demo/src/modules/components/block/examples/import/import-module.md +++ b/projects/demo/src/modules/components/block/examples/import/import-module.md @@ -9,7 +9,7 @@ import {TuiBlockDirective, TuiCheckboxComponent} from '@taiga-ui/kit'; // ... FormsModule, TuiBlockDirective, - TuiCheckboxComponent, + TuiCheckboxComponent, // or TuiRadioComponent ], // ... }) diff --git a/projects/demo/src/modules/components/block/examples/import/insert-template.md b/projects/demo/src/modules/components/block/examples/import/insert-template.md index c865d567b1c2..0bd48d47e81b 100644 --- a/projects/demo/src/modules/components/block/examples/import/insert-template.md +++ b/projects/demo/src/modules/components/block/examples/import/insert-template.md @@ -1,4 +1,5 @@ ```html +