diff --git a/projects/addon-doc/components/demo/demo.module.ts b/projects/addon-doc/components/demo/demo.module.ts index f03ed3d6d259..c3b5ed94a7f7 100644 --- a/projects/addon-doc/components/demo/demo.module.ts +++ b/projects/addon-doc/components/demo/demo.module.ts @@ -17,7 +17,7 @@ import { } from '@taiga-ui/core'; import { TuiBlockDirective, - TuiCheckboxLabeledModule, + TuiCheckboxComponent, TuiDataListWrapperModule, TuiSelectModule, } from '@taiga-ui/kit'; @@ -37,7 +37,7 @@ import {TuiDocDemoComponent} from './demo.component'; TuiGroupDirective, TuiTooltipModule, TuiModeModule, - TuiCheckboxLabeledModule, + TuiCheckboxComponent, TuiSvgModule, TuiDataListWrapperModule, TuiDataListModule, diff --git a/projects/addon-doc/components/demo/demo.style.less b/projects/addon-doc/components/demo/demo.style.less index ce2cdf2be821..6b6b70679382 100644 --- a/projects/addon-doc/components/demo/demo.style.less +++ b/projects/addon-doc/components/demo/demo.style.less @@ -181,6 +181,8 @@ .t-group, .t-checkbox { + display: flex; + align-items: center; margin-left: 0.75rem; } diff --git a/projects/addon-doc/components/demo/demo.template.html b/projects/addon-doc/components/demo/demo.template.html index 975bd7b04ff3..c60ce874caa6 100644 --- a/projects/addon-doc/components/demo/demo.template.html +++ b/projects/addon-doc/components/demo/demo.template.html @@ -83,14 +83,19 @@ - + {{ texts[1] }} - +
{ expect(tree.readContent('test/app/test.template.html')).toEqual(TEMPLATE_AFTER); }); - it('should migrate checkbox references in ts files', async () => { + it('should migrate radio references in ts files', async () => { const tree = await runner.runSchematic( 'updateToV4', {'skip-logs': process.env['TUI_CI'] === 'true'} as Partial, diff --git a/projects/core/components/data-list/option/option.component.ts b/projects/core/components/data-list/option/option.component.ts index b51d6076297a..ca3741c2ad4f 100644 --- a/projects/core/components/data-list/option/option.component.ts +++ b/projects/core/components/data-list/option/option.component.ts @@ -18,7 +18,7 @@ import { TUI_DATA_LIST_HOST, TUI_OPTION_CONTENT, } from '@taiga-ui/core/tokens'; -import type {TuiOptionRole, TuiSizeL, TuiSizeXS} from '@taiga-ui/core/types'; +import type {TuiOptionRole} from '@taiga-ui/core/types'; import {shouldCall} from '@tinkoff/ng-event-plugins'; import {TuiDataListComponent} from '../data-list.component'; @@ -50,11 +50,6 @@ export class TuiOptionComponent implements OnDestroy { optional: true, }); - /** @deprecated use size on {@link TuiDataListComponent} instead */ - @Input() - @HostBinding('attr.data-size') - public size: TuiSizeL | TuiSizeXS | null = null; - @Input() @HostBinding('attr.role') public role: TuiOptionRole = 'option'; diff --git a/projects/core/components/index.ts b/projects/core/components/index.ts index 30e085277aef..a9d7596c7765 100644 --- a/projects/core/components/index.ts +++ b/projects/core/components/index.ts @@ -14,7 +14,6 @@ export * from '@taiga-ui/core/components/link'; export * from '@taiga-ui/core/components/loader'; export * from '@taiga-ui/core/components/notification'; export * from '@taiga-ui/core/components/primitive-calendar'; -export * from '@taiga-ui/core/components/primitive-checkbox'; export * from '@taiga-ui/core/components/primitive-spin-button'; export * from '@taiga-ui/core/components/primitive-textfield'; export * from '@taiga-ui/core/components/primitive-year-picker'; diff --git a/projects/core/components/primitive-checkbox/checkbox.options.ts b/projects/core/components/primitive-checkbox/checkbox.options.ts deleted file mode 100644 index 5311ecb0e55b..000000000000 --- a/projects/core/components/primitive-checkbox/checkbox.options.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type {Provider} from '@angular/core'; -import type {TuiContext} from '@taiga-ui/cdk'; -import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk'; -import {TuiAppearance} from '@taiga-ui/core/enums'; -import type {TuiSizeL} from '@taiga-ui/core/types'; -import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; - -export interface TuiCheckboxOptions { - readonly appearances: Readonly<{ - checked: string; - indeterminate: string; - unchecked: string; - }>; - readonly icons: Readonly<{ - checked: PolymorpheusContent>; - indeterminate: PolymorpheusContent>; - }>; - readonly size: TuiSizeL; -} - -/** Default values for the checkbox options. */ -export const TUI_CHECKBOX_DEFAULT_OPTIONS: TuiCheckboxOptions = { - size: 'm', - appearances: { - unchecked: TuiAppearance.Outline, - checked: TuiAppearance.Primary, - indeterminate: TuiAppearance.Primary, - }, - icons: { - checked: ({$implicit}) => - $implicit === 'm' ? 'tuiIconCheck' : 'tuiIconCheckLarge', - indeterminate: ({$implicit}) => - $implicit === 'm' ? 'tuiIconMinus' : 'tuiIconMinusLarge', - }, -}; - -/** - * Default parameters for checkbox component - */ -export const TUI_CHECKBOX_OPTIONS = tuiCreateToken(TUI_CHECKBOX_DEFAULT_OPTIONS); - -export function tuiCheckboxOptionsProvider( - options: Partial, -): Provider { - return tuiProvideOptions(TUI_CHECKBOX_OPTIONS, options, TUI_CHECKBOX_DEFAULT_OPTIONS); -} diff --git a/projects/core/components/primitive-checkbox/index.ts b/projects/core/components/primitive-checkbox/index.ts deleted file mode 100644 index c6a8334f4b54..000000000000 --- a/projects/core/components/primitive-checkbox/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './checkbox.options'; -export * from './primitive-checkbox.component'; -export * from './primitive-checkbox.module'; diff --git a/projects/core/components/primitive-checkbox/ng-package.json b/projects/core/components/primitive-checkbox/ng-package.json deleted file mode 100644 index bebf62dcb5e5..000000000000 --- a/projects/core/components/primitive-checkbox/ng-package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "lib": { - "entryFile": "index.ts" - } -} diff --git a/projects/core/components/primitive-checkbox/primitive-checkbox.component.ts b/projects/core/components/primitive-checkbox/primitive-checkbox.component.ts deleted file mode 100644 index fd133896e609..000000000000 --- a/projects/core/components/primitive-checkbox/primitive-checkbox.component.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { - ChangeDetectionStrategy, - Component, - HostBinding, - inject, - Input, -} from '@angular/core'; -import type {TuiContext} from '@taiga-ui/cdk'; -import type {TuiSizeL} from '@taiga-ui/core/types'; -import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; - -import {TUI_CHECKBOX_OPTIONS} from './checkbox.options'; - -@Component({ - selector: 'tui-primitive-checkbox', - templateUrl: './primitive-checkbox.template.html', - styleUrls: ['./primitive-checkbox.style.less'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class TuiPrimitiveCheckboxComponent { - private readonly options = inject(TUI_CHECKBOX_OPTIONS); - - @Input() - @HostBinding('attr.data-size') - public size: TuiSizeL = this.options.size; - - @Input() - public disabled = false; - - @Input() - public focused = false; - - @Input() - public hovered: boolean | null = false; - - @Input() - public pressed: boolean | null = false; - - @Input() - public invalid = false; - - protected icon: PolymorpheusContent> = - this.options.icons.checked; - - protected value: boolean | null = false; - - @Input('value') - public set valueSetter(value: boolean | null) { - if (value !== false) { - this.setCurrentIcon(value); - } - - this.value = value; - } - - protected get appearance(): string { - switch (this.value) { - case false: - return this.options.appearances.unchecked; - case true: - return this.options.appearances.checked; - default: - return this.options.appearances.indeterminate; - } - } - - protected get empty(): boolean { - return this.value === false; - } - - private setCurrentIcon(value: boolean | null): void { - this.icon = - value === null - ? this.options.icons.indeterminate - : this.options.icons.checked; - } -} diff --git a/projects/core/components/primitive-checkbox/primitive-checkbox.module.ts b/projects/core/components/primitive-checkbox/primitive-checkbox.module.ts deleted file mode 100644 index cafb3483af09..000000000000 --- a/projects/core/components/primitive-checkbox/primitive-checkbox.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {NgModule} from '@angular/core'; -import {TuiSvgModule} from '@taiga-ui/core/components/svg'; -import {TuiWrapperModule} from '@taiga-ui/core/directives/wrapper'; -import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; - -import {TuiPrimitiveCheckboxComponent} from './primitive-checkbox.component'; - -@NgModule({ - imports: [TuiSvgModule, TuiWrapperModule, PolymorpheusModule], - declarations: [TuiPrimitiveCheckboxComponent], - exports: [TuiPrimitiveCheckboxComponent], -}) -export class TuiPrimitiveCheckboxModule {} diff --git a/projects/core/components/primitive-checkbox/primitive-checkbox.style.less b/projects/core/components/primitive-checkbox/primitive-checkbox.style.less deleted file mode 100644 index c35d2bcf527f..000000000000 --- a/projects/core/components/primitive-checkbox/primitive-checkbox.style.less +++ /dev/null @@ -1,35 +0,0 @@ -@import '@taiga-ui/core/styles/taiga-ui-local'; - -@sizeM: 1rem; -@sizeL: 1.5rem; - -:host { - display: block; - font-size: 0; - flex-shrink: 0; - - &[data-size='m'] { - width: @sizeM; - height: @sizeM; - border-radius: var(--tui-radius-xs); - } - - &[data-size='l'] { - width: @sizeL; - height: @sizeL; - border-radius: var(--tui-radius-s); - } -} - -.t-mark { - .transition(transform); - - display: block; - width: 100%; - height: 100%; - transform: scale(0); - - &_on { - transform: scale(1); - } -} diff --git a/projects/core/components/primitive-checkbox/primitive-checkbox.template.html b/projects/core/components/primitive-checkbox/primitive-checkbox.template.html deleted file mode 100644 index 224bf12bcef6..000000000000 --- a/projects/core/components/primitive-checkbox/primitive-checkbox.template.html +++ /dev/null @@ -1,17 +0,0 @@ -
- - -
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 0530febd9779..b05d90e5f820 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -179,15 +179,6 @@ export const ROUTES: Routes = [ title: 'Chip', }, }, - { - path: 'experimental/checkbox', - loadChildren: async () => - (await import('../experimental/checkbox/checkbox.module')) - .ExampleTuiCheckboxModule, - data: { - title: 'Checkbox ', - }, - }, { path: 'experimental/radio', loadChildren: async () => @@ -438,15 +429,11 @@ export const ROUTES: Routes = [ title: 'ThumbnailCard', }, }, - { + route({ path: 'components/checkbox', - loadChildren: async () => - (await import('../components/checkbox/checkbox.module')) - .ExampleTuiCheckboxModule, - data: { - title: 'Checkbox', - }, - }, + title: 'Checkbox', + loadComponent: async () => import('../components/checkbox'), + }), { path: 'components/combo-box', loadChildren: async () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 1782d7a61267..00378e9edc36 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -971,12 +971,6 @@ export const pages: TuiDocPages = [ keywords: 'tooltip, тултип, hint, подсказка, помощь, help', route: '/experimental/tooltip', }, - { - section: 'Experimental', - title: 'Checkbox ', - keywords: 'чек, радио, ввод, форма, form, checkbox, radio, toggle', - route: '/experimental/checkbox', - }, { section: 'Experimental', title: 'Radio ', diff --git a/projects/demo/src/modules/charts/legend-item/legend-item.module.ts b/projects/demo/src/modules/charts/legend-item/legend-item.module.ts index 40dd46d6f9d0..4e9d4bc6b96c 100644 --- a/projects/demo/src/modules/charts/legend-item/legend-item.module.ts +++ b/projects/demo/src/modules/charts/legend-item/legend-item.module.ts @@ -6,7 +6,7 @@ import {TuiAmountPipe} from '@taiga-ui/addon-commerce'; import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; import {TuiHoveredModule} from '@taiga-ui/cdk'; import {TuiNotificationModule, TuiSvgModule} from '@taiga-ui/core'; -import {TuiCheckboxModule} from '@taiga-ui/experimental'; +import {TuiCheckboxComponent} from '@taiga-ui/kit'; import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; import {TuiLegendItemExample1} from './examples/1'; @@ -25,7 +25,7 @@ import {ExampleTuiLegendItemComponent} from './legend-item.component'; TuiAddonDocModule, RouterModule.forChild(tuiGenerateRoutes(ExampleTuiLegendItemComponent)), TuiAmountPipe, - TuiCheckboxModule, + TuiCheckboxComponent, ], declarations: [ ExampleTuiLegendItemComponent, diff --git a/projects/demo/src/modules/components/block/block.module.ts b/projects/demo/src/modules/components/block/block.module.ts index 0b9185b78089..c318248c0608 100644 --- a/projects/demo/src/modules/components/block/block.module.ts +++ b/projects/demo/src/modules/components/block/block.module.ts @@ -9,10 +9,11 @@ import { TuiTitleDirective, TuiTooltipModule, } from '@taiga-ui/core'; -import {TuiCheckboxModule, TuiRadioComponent} from '@taiga-ui/experimental'; +import {TuiRadioComponent} from '@taiga-ui/experimental'; import { TuiAvatarComponent, TuiBlockDirective, + TuiCheckboxComponent, TuiFadeDirective, TuiSwitchComponent, } from '@taiga-ui/kit'; @@ -31,7 +32,7 @@ import {TuiBlockExample3} from './examples/3'; TuiGroupDirective, TuiAvatarComponent, TuiTooltipModule, - TuiCheckboxModule, + TuiCheckboxComponent, TuiRadioComponent, TuiFadeDirective, TuiTitleDirective, diff --git a/projects/demo/src/modules/components/checkbox/checkbox.component.ts b/projects/demo/src/modules/components/checkbox/checkbox.component.ts deleted file mode 100644 index 08cfbfbb2b61..000000000000 --- a/projects/demo/src/modules/components/checkbox/checkbox.component.ts +++ /dev/null @@ -1,46 +0,0 @@ -import {Component, forwardRef} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; -import type {TuiSizeL} 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', - templateUrl: './checkbox.template.html', - changeDetection, - providers: [ - { - provide: ABSTRACT_PROPS_ACCESSOR, - useExisting: forwardRef(() => ExampleTuiCheckboxComponent), - }, - ], -}) -export class ExampleTuiCheckboxComponent extends AbstractExampleTuiControl { - public override readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l']; - - public override size: TuiSizeL = this.sizeVariants[0]; - - public readonly control = new FormGroup({ - testValue1: new FormControl(false), - testValue2: new FormControl(null), - testValue3: new FormControl(true), - }); - - protected readonly exampleForm = import('./examples/import/declare-form.md?raw'); - 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'), - }; - - protected readonly example2: TuiDocExample = { - TypeScript: import('./examples/2/index.ts?raw'), - HTML: import('./examples/2/index.html?raw'), - }; -} diff --git a/projects/demo/src/modules/components/checkbox/checkbox.module.ts b/projects/demo/src/modules/components/checkbox/checkbox.module.ts deleted file mode 100644 index ca1733df55b2..000000000000 --- a/projects/demo/src/modules/components/checkbox/checkbox.module.ts +++ /dev/null @@ -1,29 +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 {TuiLinkModule} from '@taiga-ui/core'; -import {TuiCheckboxModule} from '@taiga-ui/kit'; - -import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module'; -import {ExampleTuiCheckboxComponent} from './checkbox.component'; -import {TuiCheckboxExample1} from './examples/1'; -import {TuiCheckboxExample2} from './examples/2'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - ReactiveFormsModule, - RouterModule, - TuiCheckboxModule, - TuiLinkModule, - TuiAddonDocModule, - InheritedDocumentationModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCheckboxComponent)), - ], - declarations: [ExampleTuiCheckboxComponent, TuiCheckboxExample1, TuiCheckboxExample2], - exports: [ExampleTuiCheckboxComponent], -}) -export class ExampleTuiCheckboxModule {} diff --git a/projects/demo/src/modules/components/checkbox/checkbox.template.html b/projects/demo/src/modules/components/checkbox/checkbox.template.html deleted file mode 100644 index 0b9b4ce31c3c..000000000000 --- a/projects/demo/src/modules/components/checkbox/checkbox.template.html +++ /dev/null @@ -1,163 +0,0 @@ - - -
- Checkbox without a label. For - indeterminate - state, set - null - as value. If you need a labeled checkbox, see - - Label - - . If you need a checkbox inside a button, see - - Block - - . -
- - - - - - - - - - - - - -
- - - - -
- - - - Disabled state (use - formControl.disable() - ) - - - Size - - - - - - -
    -
  1. -

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

    - - -
    2. - -
  2. -

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

    - - -
    3. - -
  3. -

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

    - - -
    4. - -
  4. -

    Add to the template:

    - - -
    5. -
- - diff --git a/projects/demo/src/modules/components/checkbox/examples/1/index.html b/projects/demo/src/modules/components/checkbox/examples/1/index.html index ec1759012958..b142c361119d 100644 --- a/projects/demo/src/modules/components/checkbox/examples/1/index.html +++ b/projects/demo/src/modules/components/checkbox/examples/1/index.html @@ -1,18 +1,56 @@ -
- + - - - - + + + + + + + +
diff --git a/projects/demo/src/modules/experimental/checkbox/examples/1/index.less b/projects/demo/src/modules/components/checkbox/examples/1/index.less similarity index 100% rename from projects/demo/src/modules/experimental/checkbox/examples/1/index.less rename to projects/demo/src/modules/components/checkbox/examples/1/index.less diff --git a/projects/demo/src/modules/components/checkbox/examples/1/index.ts b/projects/demo/src/modules/components/checkbox/examples/1/index.ts index e66802a42206..2758c0103f77 100644 --- a/projects/demo/src/modules/components/checkbox/examples/1/index.ts +++ b/projects/demo/src/modules/components/checkbox/examples/1/index.ts @@ -1,19 +1,45 @@ +import {NgForOf} from '@angular/common'; +import type {OnInit} from '@angular/core'; import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; +import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; +import type {TuiPlatform} from '@taiga-ui/cdk'; +import {TuiPlatformModule} from '@taiga-ui/cdk'; +import type {TuiSizeS} from '@taiga-ui/core'; +import {TuiCheckboxComponent} from '@taiga-ui/kit'; @Component({ - selector: 'tui-checkbox-example-1', + standalone: true, + imports: [ + NgForOf, + FormsModule, + ReactiveFormsModule, + TuiCheckboxComponent, + TuiPlatformModule, + ], templateUrl: './index.html', + styleUrls: ['./index.less'], encapsulation, changeDetection, }) -export class TuiCheckboxExample1 { - protected testForm = new FormGroup({ - testValue1: new FormControl(true), - testValue2: new FormControl(false), - testValue3: new FormControl({value: true, disabled: true}), - testValue4: new FormControl({value: false, disabled: true}), - }); +export default class ExampleComponent implements OnInit { + protected readonly platforms: readonly TuiPlatform[] = [ + 'web', + 'web', + 'android', + 'ios', + ]; + + protected readonly invalidTrue = new FormControl(true, () => ({invalid: true})); + protected readonly invalidFalse = new FormControl(false, () => ({invalid: true})); + + public ngOnInit(): void { + this.invalidTrue.markAsTouched(); + this.invalidFalse.markAsTouched(); + } + + protected getSize(first: boolean): TuiSizeS { + return first ? 'm' : 's'; + } } diff --git a/projects/demo/src/modules/components/checkbox/examples/2/index.html b/projects/demo/src/modules/components/checkbox/examples/2/index.html deleted file mode 100644 index 773e24b9996b..000000000000 --- a/projects/demo/src/modules/components/checkbox/examples/2/index.html +++ /dev/null @@ -1,24 +0,0 @@ -
- - - - - - - - diff --git a/projects/demo/src/modules/components/checkbox/examples/2/index.ts b/projects/demo/src/modules/components/checkbox/examples/2/index.ts deleted file mode 100644 index 368cf3b0da25..000000000000 --- a/projects/demo/src/modules/components/checkbox/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-example-2', - templateUrl: './index.html', - encapsulation, - changeDetection, -}) -export class TuiCheckboxExample2 { - protected testForm = new FormGroup({ - testValue1: new FormControl(true), - testValue2: new FormControl(false), - testValue3: new FormControl({value: true, disabled: true}), - testValue4: new FormControl({value: false, disabled: true}), - }); -} diff --git a/projects/demo/src/modules/components/checkbox/examples/import/declare-form.md b/projects/demo/src/modules/components/checkbox/examples/import/declare-form.md deleted file mode 100644 index 7a41fd9acc22..000000000000 --- a/projects/demo/src/modules/components/checkbox/examples/import/declare-form.md +++ /dev/null @@ -1,13 +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/examples/import/define-options.md b/projects/demo/src/modules/components/checkbox/examples/import/define-options.md deleted file mode 100644 index 9062bca5e5db..000000000000 --- a/projects/demo/src/modules/components/checkbox/examples/import/define-options.md +++ /dev/null @@ -1,17 +0,0 @@ -```ts -import {TUI_CHECKBOX_OPTIONS, TUI_CHECKBOX_DEFAULT_OPTIONS} from '@taiga-ui/core'; -// ... - -@NgModule({ - providers: [ - { - provide: TUI_CHECKBOX_OPTIONS, - useValue: { - ...TUI_CHECKBOX_DEFAULT_OPTIONS, - size: 'l', - }, - }, - ], -}) -export class MyModule {} -``` diff --git a/projects/demo/src/modules/components/checkbox/examples/import/import-module.md b/projects/demo/src/modules/components/checkbox/examples/import/import-module.md deleted file mode 100644 index b177e9a02cfe..000000000000 --- a/projects/demo/src/modules/components/checkbox/examples/import/import-module.md +++ /dev/null @@ -1,16 +0,0 @@ -```ts -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {TuiCheckboxModule} from '@taiga-ui/kit'; - -// ... - -@NgModule({ - imports: [ - //... - FormsModule, - ReactiveFormsModule, - TuiCheckboxModule, - ], -}) -export class MyModule {} -``` diff --git a/projects/demo/src/modules/experimental/checkbox/examples/import/import-module.md b/projects/demo/src/modules/components/checkbox/examples/import/import.md similarity index 61% rename from projects/demo/src/modules/experimental/checkbox/examples/import/import-module.md rename to projects/demo/src/modules/components/checkbox/examples/import/import.md index 8975ebfec1e1..4664fdb01210 100644 --- a/projects/demo/src/modules/experimental/checkbox/examples/import/import-module.md +++ b/projects/demo/src/modules/components/checkbox/examples/import/import.md @@ -1,12 +1,12 @@ ```ts import {NgModule} from '@angular/core'; -import {TuiCheckboxModule} from '@taiga-ui/experimental'; +import {TuiCheckboxComponent} from '@taiga-ui/kit'; // ... @NgModule({ imports: [ // ... - TuiCheckboxModule, + TuiCheckboxComponent, ], }) export class MyModule {} diff --git a/projects/demo/src/modules/components/checkbox/examples/import/insert-template.md b/projects/demo/src/modules/components/checkbox/examples/import/insert-template.md deleted file mode 100644 index b40786031af9..000000000000 --- a/projects/demo/src/modules/components/checkbox/examples/import/insert-template.md +++ /dev/null @@ -1,5 +0,0 @@ -```html -
- -
-``` diff --git a/projects/demo/src/modules/experimental/checkbox/examples/import/insert-template.md b/projects/demo/src/modules/components/checkbox/examples/import/template.md similarity index 100% rename from projects/demo/src/modules/experimental/checkbox/examples/import/insert-template.md rename to projects/demo/src/modules/components/checkbox/examples/import/template.md diff --git a/projects/demo/src/modules/components/checkbox/index.html b/projects/demo/src/modules/components/checkbox/index.html new file mode 100644 index 000000000000..35746b75775c --- /dev/null +++ b/projects/demo/src/modules/components/checkbox/index.html @@ -0,0 +1,24 @@ + + +

A checkbox component that is able to imitate native control on mobile platforms.

+ + + + Use + --tui-accent + CSS variable to customize color of native control emulation + + + + + + diff --git a/projects/demo/src/modules/components/checkbox/index.ts b/projects/demo/src/modules/components/checkbox/index.ts new file mode 100644 index 000000000000..26bab80f5323 --- /dev/null +++ b/projects/demo/src/modules/components/checkbox/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDemoModule} from '@demo/utils'; +import {TuiNotificationModule} from '@taiga-ui/core'; + +@Component({ + standalone: true, + imports: [TuiDemoModule, TuiNotificationModule], + templateUrl: './index.html', + changeDetection, +}) +export default class PageComponent {} diff --git a/projects/demo/src/modules/components/dialog/examples/9/pay-modal/pay-modal.module.ts b/projects/demo/src/modules/components/dialog/examples/9/pay-modal/pay-modal.module.ts index a498764a3eff..e0570c760890 100644 --- a/projects/demo/src/modules/components/dialog/examples/9/pay-modal/pay-modal.module.ts +++ b/projects/demo/src/modules/components/dialog/examples/9/pay-modal/pay-modal.module.ts @@ -11,7 +11,8 @@ import { TuiSvgModule, TuiTextfieldControllerModule, } from '@taiga-ui/core'; -import {TuiCheckboxModule, TuiLabelDirective} from '@taiga-ui/experimental'; +import {TuiLabelDirective} from '@taiga-ui/experimental'; +import {TuiCheckboxComponent} from '@taiga-ui/kit'; import {PayModalComponent} from './pay-modal.component'; @@ -30,7 +31,7 @@ import {PayModalComponent} from './pay-modal.component'; TuiFormatNumberPipeModule, TuiTextfieldControllerModule, TuiLabelDirective, - TuiCheckboxModule, + TuiCheckboxComponent, ], declarations: [PayModalComponent], }) diff --git a/projects/demo/src/modules/components/swipe-action/swipe-actions.module.ts b/projects/demo/src/modules/components/swipe-action/swipe-actions.module.ts index ed964a20aca4..2ca8ed1888fe 100644 --- a/projects/demo/src/modules/components/swipe-action/swipe-actions.module.ts +++ b/projects/demo/src/modules/components/swipe-action/swipe-actions.module.ts @@ -20,13 +20,13 @@ import { TuiButtonModule, TuiCardModule, TuiCellModule, - TuiCheckboxModule, TuiSurfaceModule, } from '@taiga-ui/experimental'; import { TuiAvatarComponent, TuiBadgeComponent, TuiBadgedContentComponent, + TuiCheckboxComponent, TuiSwitchComponent, } from '@taiga-ui/kit'; @@ -57,7 +57,7 @@ import {ExampleTuiSwipeActionsComponent} from './swipe-actions.component'; TuiButtonModule, FormsModule, TuiTitleDirective, - TuiCheckboxModule, + TuiCheckboxComponent, TuiDropdownOpenDirective, TuiDataListModule, TuiDropdownDirective, diff --git a/projects/demo/src/modules/components/tab-bar/tab-bar.module.ts b/projects/demo/src/modules/components/tab-bar/tab-bar.module.ts index 2a4d6bd34da2..3ed4256d03db 100644 --- a/projects/demo/src/modules/components/tab-bar/tab-bar.module.ts +++ b/projects/demo/src/modules/components/tab-bar/tab-bar.module.ts @@ -5,7 +5,8 @@ import {RouterModule} from '@angular/router'; import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; import {TuiTabBarModule} from '@taiga-ui/addon-mobile'; import {TuiButtonModule, TuiDropdownModule, TuiNotificationModule} from '@taiga-ui/core'; -import {TuiCheckboxModule, TuiLabelDirective} from '@taiga-ui/experimental'; +import {TuiLabelDirective} from '@taiga-ui/experimental'; +import {TuiCheckboxComponent} from '@taiga-ui/kit'; import {TuiTabBarExample1} from './examples/1'; import {TuiTabBarExample2} from './examples/2'; @@ -24,7 +25,7 @@ import {ExampleTuiTabBarComponent} from './tab-bar.component'; TuiAddonDocModule, RouterModule.forChild(tuiGenerateRoutes(ExampleTuiTabBarComponent)), TuiLabelDirective, - TuiCheckboxModule, + TuiCheckboxComponent, ], declarations: [ ExampleTuiTabBarComponent, diff --git a/projects/demo/src/modules/components/tree/tree.module.ts b/projects/demo/src/modules/components/tree/tree.module.ts index 9948f312a645..772d02430ca7 100644 --- a/projects/demo/src/modules/components/tree/tree.module.ts +++ b/projects/demo/src/modules/components/tree/tree.module.ts @@ -10,8 +10,8 @@ import { TuiLoaderModule, TuiSvgModule, } from '@taiga-ui/core'; -import {TuiCheckboxModule, TuiLabelDirective} from '@taiga-ui/experimental'; -import {TuiTreeModule} from '@taiga-ui/kit'; +import {TuiLabelDirective} from '@taiga-ui/experimental'; +import {TuiCheckboxComponent, TuiTreeModule} from '@taiga-ui/kit'; import {TuiTreeExample1} from './examples/1'; import {TuiTreeExample2} from './examples/2'; @@ -35,7 +35,7 @@ import {ExampleTuiTreeComponent} from './tree.component'; CommonModule, TuiAddonDocModule, RouterModule.forChild(tuiGenerateRoutes(ExampleTuiTreeComponent)), - TuiCheckboxModule, + TuiCheckboxComponent, TuiLabelDirective, ], declarations: [ diff --git a/projects/demo/src/modules/customization/variables/examples/1/index.ts b/projects/demo/src/modules/customization/variables/examples/1/index.ts index 38426f396d16..e56f5800c267 100644 --- a/projects/demo/src/modules/customization/variables/examples/1/index.ts +++ b/projects/demo/src/modules/customization/variables/examples/1/index.ts @@ -2,8 +2,8 @@ import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiCheckboxModule, TuiLabelDirective} from '@taiga-ui/experimental'; -import {TuiInputModule, TuiIslandModule} from '@taiga-ui/kit'; +import {TuiLabelDirective} from '@taiga-ui/experimental'; +import {TuiCheckboxComponent, TuiInputModule, TuiIslandModule} from '@taiga-ui/kit'; @Component({ standalone: true, @@ -13,7 +13,7 @@ import {TuiInputModule, TuiIslandModule} from '@taiga-ui/kit'; TuiInputModule, FormsModule, TuiLabelDirective, - TuiCheckboxModule, + TuiCheckboxComponent, ], templateUrl: './index.html', styleUrls: ['./index.less'], diff --git a/projects/demo/src/modules/customization/wrapper/examples/1/index.ts b/projects/demo/src/modules/customization/wrapper/examples/1/index.ts index 6f343b23a61f..f16066bac343 100644 --- a/projects/demo/src/modules/customization/wrapper/examples/1/index.ts +++ b/projects/demo/src/modules/customization/wrapper/examples/1/index.ts @@ -1,12 +1,12 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {TUI_TEXTFIELD_APPEARANCE_DIRECTIVE, TuiButtonModule} from '@taiga-ui/core'; +import {TuiLabelDirective} from '@taiga-ui/experimental'; import { - TuiCheckboxModule, + TuiCheckboxComponent, tuiCheckboxOptionsProvider, - TuiLabelDirective, -} from '@taiga-ui/experimental'; -import {TuiInputModule} from '@taiga-ui/kit'; + TuiInputModule, +} from '@taiga-ui/kit'; @Component({ standalone: true, @@ -15,7 +15,7 @@ import {TuiInputModule} from '@taiga-ui/kit'; TuiInputModule, FormsModule, TuiLabelDirective, - TuiCheckboxModule, + TuiCheckboxComponent, TuiButtonModule, ], templateUrl: './index.html', diff --git a/projects/demo/src/modules/experimental/cell/cell.module.ts b/projects/demo/src/modules/experimental/cell/cell.module.ts index bfdba4b7d458..834580d0e44b 100644 --- a/projects/demo/src/modules/experimental/cell/cell.module.ts +++ b/projects/demo/src/modules/experimental/cell/cell.module.ts @@ -18,7 +18,6 @@ import { TuiButtonModule, TuiCardModule, TuiCellModule, - TuiCheckboxModule, TuiSurfaceModule, TuiThumbnailCardModule, } from '@taiga-ui/experimental'; @@ -28,6 +27,7 @@ import { TuiBadgedContentComponent, TuiBadgeDirective, TuiBadgeNotificationComponent, + TuiCheckboxComponent, TuiDataListWrapperModule, TuiFadeDirective, TuiProgressModule, @@ -64,7 +64,7 @@ import {TuiCellExample7} from './examples/7'; TuiTooltipModule, TuiTitleDirective, TuiIconComponent, - TuiCheckboxModule, + TuiCheckboxComponent, TuiLoaderModule, TuiSensitiveDirective, TuiSurfaceModule, diff --git a/projects/demo/src/modules/experimental/checkbox/checkbox.component.ts b/projects/demo/src/modules/experimental/checkbox/checkbox.component.ts deleted file mode 100644 index 1ef8e6e970df..000000000000 --- a/projects/demo/src/modules/experimental/checkbox/checkbox.component.ts +++ /dev/null @@ -1,23 +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-checkbox', - templateUrl: './checkbox.template.html', - changeDetection, -}) -export class ExampleTuiCheckboxComponent { - 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 = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - }; -} diff --git a/projects/demo/src/modules/experimental/checkbox/checkbox.module.ts b/projects/demo/src/modules/experimental/checkbox/checkbox.module.ts deleted file mode 100644 index 22ab9a05b9a5..000000000000 --- a/projects/demo/src/modules/experimental/checkbox/checkbox.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {tuiGetDocModules} from '@taiga-ui/addon-doc'; -import {TuiPlatformModule} from '@taiga-ui/cdk'; -import {TuiNotificationModule} from '@taiga-ui/core'; -import {TuiCheckboxModule} from '@taiga-ui/experimental'; - -import {ExampleTuiCheckboxComponent} from './checkbox.component'; -import {TuiCheckboxExample1} from './examples/1'; - -@NgModule({ - imports: [ - FormsModule, - ReactiveFormsModule, - CommonModule, - TuiCheckboxModule, - TuiNotificationModule, - TuiPlatformModule, - tuiGetDocModules(ExampleTuiCheckboxComponent), - ], - declarations: [ExampleTuiCheckboxComponent, TuiCheckboxExample1], - exports: [ExampleTuiCheckboxComponent], -}) -export class ExampleTuiCheckboxModule {} diff --git a/projects/demo/src/modules/experimental/checkbox/checkbox.template.html b/projects/demo/src/modules/experimental/checkbox/checkbox.template.html deleted file mode 100644 index 699e190184e4..000000000000 --- a/projects/demo/src/modules/experimental/checkbox/checkbox.template.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - This code is - experimental - and is a subject to change. Expect final solution to be shipped in the next major version - - -

A checkbox component that is able to imitate native control on mobile platforms.

- - - - Use - --tui-accent - CSS variable to customize color of native control emulation - - - - - - -
    -
  1. -

    Import module:

    - - -
    2. - -
  2. -

    Add to the template:

    - - -
    3. -
- - diff --git a/projects/demo/src/modules/experimental/checkbox/examples/1/index.html b/projects/demo/src/modules/experimental/checkbox/examples/1/index.html deleted file mode 100644 index b142c361119d..000000000000 --- a/projects/demo/src/modules/experimental/checkbox/examples/1/index.html +++ /dev/null @@ -1,56 +0,0 @@ -
- - - - - - - - - - - - - -
diff --git a/projects/demo/src/modules/experimental/checkbox/examples/1/index.ts b/projects/demo/src/modules/experimental/checkbox/examples/1/index.ts deleted file mode 100644 index 33530d179717..000000000000 --- a/projects/demo/src/modules/experimental/checkbox/examples/1/index.ts +++ /dev/null @@ -1,35 +0,0 @@ -import type {OnInit} from '@angular/core'; -import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; -import type {TuiPlatform} from '@taiga-ui/cdk'; -import type {TuiSizeS} from '@taiga-ui/core'; - -@Component({ - selector: 'tui-checkbox-example-1', - templateUrl: './index.html', - styleUrls: ['./index.less'], - encapsulation, - changeDetection, -}) -export class TuiCheckboxExample1 implements OnInit { - protected readonly platforms: readonly TuiPlatform[] = [ - 'web', - 'web', - 'android', - 'ios', - ]; - - protected readonly invalidTrue = new FormControl(true, () => ({invalid: true})); - protected readonly invalidFalse = new FormControl(false, () => ({invalid: true})); - - public ngOnInit(): void { - this.invalidTrue.markAsTouched(); - this.invalidFalse.markAsTouched(); - } - - protected getSize(first: boolean): TuiSizeS { - return first ? 'm' : 's'; - } -} diff --git a/projects/demo/src/modules/experimental/chip/chip.module.ts b/projects/demo/src/modules/experimental/chip/chip.module.ts index 5442ef650e8a..1e242d8e9b03 100644 --- a/projects/demo/src/modules/experimental/chip/chip.module.ts +++ b/projects/demo/src/modules/experimental/chip/chip.module.ts @@ -5,11 +5,12 @@ import {TuiAmountPipe} from '@taiga-ui/addon-commerce'; import {tuiGetDocModules} from '@taiga-ui/addon-doc'; import {TuiRepeatTimesModule} from '@taiga-ui/cdk'; import {TuiNotificationModule} from '@taiga-ui/core'; -import {TuiButtonModule, TuiCheckboxModule, TuiChipModule} from '@taiga-ui/experimental'; +import {TuiButtonModule, TuiChipModule} from '@taiga-ui/experimental'; import { TuiAvatarComponent, TuiBadgedContentComponent, TuiBadgeNotificationComponent, + TuiCheckboxComponent, TuiFadeDirective, } from '@taiga-ui/kit'; @@ -30,7 +31,7 @@ import {TuiChipExample4} from './examples/4'; TuiNotificationModule, TuiButtonModule, TuiAvatarComponent, - TuiCheckboxModule, + TuiCheckboxComponent, TuiBadgedContentComponent, TuiBadgeNotificationComponent, tuiGetDocModules(ExampleTuiChipComponent), diff --git a/projects/demo/src/modules/experimental/label/examples/1/index.ts b/projects/demo/src/modules/experimental/label/examples/1/index.ts index 57bf9983b06b..c08c3a35fc8a 100644 --- a/projects/demo/src/modules/experimental/label/examples/1/index.ts +++ b/projects/demo/src/modules/experimental/label/examples/1/index.ts @@ -3,14 +3,15 @@ import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiTitleDirective} from '@taiga-ui/core'; -import {TuiCheckboxModule, TuiLabelDirective} from '@taiga-ui/experimental'; +import {TuiLabelDirective} from '@taiga-ui/experimental'; +import {TuiCheckboxComponent} from '@taiga-ui/kit'; @Component({ standalone: true, imports: [ ReactiveFormsModule, TuiLabelDirective, - TuiCheckboxModule, + TuiCheckboxComponent, TuiTitleDirective, ], templateUrl: './index.html', diff --git a/projects/demo/src/modules/experimental/label/examples/import/import.md b/projects/demo/src/modules/experimental/label/examples/import/import.md index 798aa81f959b..a2fdd9fa9508 100644 --- a/projects/demo/src/modules/experimental/label/examples/import/import.md +++ b/projects/demo/src/modules/experimental/label/examples/import/import.md @@ -1,6 +1,7 @@ ```ts import {FormsModule} from '@angular/forms'; -import {TuiCheckboxModule, TuiLabelDirective} from '@taiga-ui/experimental'; +import {TuiLabelDirective} from '@taiga-ui/experimental'; +import {TuiCheckboxComponent} from '@taiga-ui/kit'; // ... @@ -8,7 +9,7 @@ import {TuiCheckboxModule, TuiLabelDirective} from '@taiga-ui/experimental'; imports: [ // ... FormsModule, - TuiCheckboxModule, + TuiCheckboxComponent, TuiLabelDirective, ], // ... diff --git a/projects/demo/src/modules/icons/icons.module.ts b/projects/demo/src/modules/icons/icons.module.ts index b21ed1d0cf26..6a92a6118743 100644 --- a/projects/demo/src/modules/icons/icons.module.ts +++ b/projects/demo/src/modules/icons/icons.module.ts @@ -11,7 +11,6 @@ import { TuiNotificationModule, TuiSvgModule, } from '@taiga-ui/core'; -import {TuiCheckboxLabeledModule} from '@taiga-ui/kit'; import {IconsComponent} from './icons.component'; import {IconsGroupModule} from './icons-group/icons-group.module'; @@ -27,7 +26,6 @@ import {IconsGroupModule} from './icons-group/icons-group.module'; TuiAddonDocModule, IconsGroupModule, RouterModule.forChild(tuiGenerateRoutes(IconsComponent)), - TuiCheckboxLabeledModule, TuiActiveZoneDirective, IntersectionObserverModule, ], diff --git a/projects/demo/src/modules/markup/form/form.module.ts b/projects/demo/src/modules/markup/form/form.module.ts index cad24a1329da..e70dbeb2d48d 100644 --- a/projects/demo/src/modules/markup/form/form.module.ts +++ b/projects/demo/src/modules/markup/form/form.module.ts @@ -11,13 +11,10 @@ import { TuiHintModule, TuiTextfieldControllerModule, } from '@taiga-ui/core'; -import { - TuiCheckboxModule, - TuiLabelDirective, - TuiRadioComponent, -} from '@taiga-ui/experimental'; +import {TuiLabelDirective, TuiRadioComponent} from '@taiga-ui/experimental'; import { TuiBlockDirective, + TuiCheckboxComponent, TuiDataListWrapperModule, TuiFieldErrorPipeModule, TuiInputDateModule, @@ -71,7 +68,7 @@ import {FormComponent} from './form.component'; TuiDataListWrapperModule, TuiRadioComponent, tuiGetDocModules(FormComponent), - TuiCheckboxModule, + TuiCheckboxComponent, TuiLabelDirective, ], declarations: [FormComponent, TuiExample], diff --git a/projects/demo/src/modules/markup/tables/examples/1/index.html b/projects/demo/src/modules/markup/tables/examples/1/index.html index aee086306149..a2b26d19244e 100644 --- a/projects/demo/src/modules/markup/tables/examples/1/index.html +++ b/projects/demo/src/modules/markup/tables/examples/1/index.html @@ -2,7 +2,11 @@ - + Title Author diff --git a/projects/demo/src/modules/markup/tables/tables.module.ts b/projects/demo/src/modules/markup/tables/tables.module.ts index d6b2db970040..effc707d8dc1 100644 --- a/projects/demo/src/modules/markup/tables/tables.module.ts +++ b/projects/demo/src/modules/markup/tables/tables.module.ts @@ -4,7 +4,7 @@ import {ReactiveFormsModule} from '@angular/forms'; import {RouterModule} from '@angular/router'; import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; import {TuiLinkModule, TuiNotificationModule, TuiSvgModule} from '@taiga-ui/core'; -import {TuiCheckboxModule, TuiInputTagModule, TuiTagModule} from '@taiga-ui/kit'; +import {TuiCheckboxComponent, TuiInputTagModule, TuiTagModule} from '@taiga-ui/kit'; import {StylesInfoModule} from '../../app/styles-info/styles-info.module'; import {TuiTablesExample1} from './examples/1'; @@ -14,7 +14,7 @@ import {TablesComponent} from './tables.component'; imports: [ CommonModule, ReactiveFormsModule, - TuiCheckboxModule, + TuiCheckboxComponent, TuiInputTagModule, TuiSvgModule, TuiTagModule, diff --git a/projects/demo/src/modules/pipes/field-error/field-error.module.ts b/projects/demo/src/modules/pipes/field-error/field-error.module.ts index a26b8f7b9293..c7ef1b80615b 100644 --- a/projects/demo/src/modules/pipes/field-error/field-error.module.ts +++ b/projects/demo/src/modules/pipes/field-error/field-error.module.ts @@ -13,8 +13,8 @@ import { TuiLinkModule, TuiTextfieldControllerModule, } from '@taiga-ui/core'; -import {TuiCheckboxModule} from '@taiga-ui/experimental'; import { + TuiCheckboxComponent, TuiFieldErrorPipeModule, TuiInputModule, TuiInputNumberModule, @@ -50,7 +50,7 @@ import {ExampleTuiFieldErrorPipeComponent} from './field-error.component'; TuiInputNumberModule, TuiCurrencyPipeModule, PolymorpheusModule, - TuiCheckboxModule, + TuiCheckboxComponent, RouterModule.forChild(tuiGenerateRoutes(ExampleTuiFieldErrorPipeComponent)), ], declarations: [ diff --git a/projects/experimental/components/checkbox/checkbox.component.ts b/projects/experimental/components/checkbox/checkbox.component.ts deleted file mode 100644 index 583be3427ed9..000000000000 --- a/projects/experimental/components/checkbox/checkbox.component.ts +++ /dev/null @@ -1,84 +0,0 @@ -import type {DoCheck, OnInit} from '@angular/core'; -import { - ChangeDetectionStrategy, - Component, - ElementRef, - inject, - Input, -} from '@angular/core'; -import {NgControl, NgModel} from '@angular/forms'; -import { - tuiControlValue, - TuiDestroyService, - tuiIsString, - TuiNativeValidatorDirective, -} from '@taiga-ui/cdk'; -import type {TuiSizeS} from '@taiga-ui/core'; -import {TUI_ICON_RESOLVER, TuiAppearanceDirective} from '@taiga-ui/core'; -import {takeUntil} from 'rxjs'; - -import {TUI_CHECKBOX_OPTIONS} from './checkbox.options'; - -@Component({ - selector: 'input[type="checkbox"][tuiCheckbox]', - template: '', - styleUrls: ['./checkbox.style.less'], - changeDetection: ChangeDetectionStrategy.OnPush, - providers: [TuiDestroyService], - hostDirectives: [ - { - directive: TuiAppearanceDirective, - inputs: [ - 'tuiAppearance: appearance', - 'tuiAppearanceState', - 'tuiAppearanceFocus', - ], - }, - TuiNativeValidatorDirective, - ], - host: { - '[disabled]': '!control || control.disabled', - '[attr.data-size]': 'size', - '[class._readonly]': '!control', - '[style.--t-checked]': 'getIcon("checked")', - '[style.--t-indeterminate]': 'getIcon("indeterminate")', - }, -}) -export class TuiCheckboxComponent implements OnInit, DoCheck { - private readonly appearance = inject(TuiAppearanceDirective); - private readonly options = inject(TUI_CHECKBOX_OPTIONS); - private readonly resolver = inject(TUI_ICON_RESOLVER); - private readonly destroy$ = inject(TuiDestroyService, {self: true}); - private readonly el: HTMLInputElement = inject(ElementRef).nativeElement; - - @Input() - public size: TuiSizeS = this.options.size; - - protected readonly control: NgControl | null = inject(NgControl, {optional: true}); - - public ngOnInit(): void { - if (!this.control?.valueChanges) { - return; - } - - tuiControlValue(this.control) - .pipe(takeUntil(this.destroy$)) - .subscribe(value => { - // https://github.com/angular/angular/issues/14988 - const fix = this.control instanceof NgModel ? this.control.model : value; - - this.el.indeterminate = fix === null; - }); - } - - public ngDoCheck(): void { - this.appearance.tuiAppearance = this.options.appearance(this.el); - } - - protected getIcon(state: 'checked' | 'indeterminate'): string { - const option = this.options.icons[state]; - const icon = tuiIsString(option) ? option : option(this.size); - - return `url(${this.resolver(icon)})`; - } -} diff --git a/projects/experimental/components/checkbox/checkbox.module.ts b/projects/experimental/components/checkbox/checkbox.module.ts deleted file mode 100644 index 2e5bfd0c0657..000000000000 --- a/projects/experimental/components/checkbox/checkbox.module.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {NgModule} from '@angular/core'; - -import {TuiCheckboxComponent} from './checkbox.component'; - -@NgModule({ - declarations: [TuiCheckboxComponent], - exports: [TuiCheckboxComponent], -}) -export class TuiCheckboxModule {} diff --git a/projects/experimental/components/checkbox/checkbox.style.less b/projects/experimental/components/checkbox/checkbox.style.less deleted file mode 100644 index 56c50923a664..000000000000 --- a/projects/experimental/components/checkbox/checkbox.style.less +++ /dev/null @@ -1,49 +0,0 @@ -@import '@taiga-ui/core/styles/taiga-ui-local'; - -:host { - --t-size: 1.5rem; - --t-radius: var(--tui-radius-s); - - width: var(--t-size); - height: var(--t-size); - border-radius: var(--t-radius); - cursor: pointer; - margin: 0; - flex-shrink: 0; - - &:before { - .fullsize(); - - content: ''; - background: currentColor; - mask: url('data:image/svg+xml,') center/100%; - transform: scale(0); - transition: - transform var(--tui-duration) ease-in-out, - mask 0s var(--tui-duration) ease-in-out; - } - - &:disabled._readonly { - opacity: 1; - } - - &:checked, - &:indeterminate { - &:before { - mask-image: var(--t-checked); - transform: scale(1); - transition: - transform var(--tui-duration) ease-in-out, - mask 0s ease-in-out; - } - } - - &:indeterminate:before { - mask-image: var(--t-indeterminate); - } - - &[data-size='s'] { - --t-size: 1rem; - --t-radius: var(--tui-radius-xs); - } -} diff --git a/projects/experimental/components/checkbox/index.ts b/projects/experimental/components/checkbox/index.ts deleted file mode 100644 index 41366876b271..000000000000 --- a/projects/experimental/components/checkbox/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './checkbox.component'; -export * from './checkbox.module'; -export * from './checkbox.options'; diff --git a/projects/experimental/components/checkbox/ng-package.json b/projects/experimental/components/checkbox/ng-package.json deleted file mode 100644 index bebf62dcb5e5..000000000000 --- a/projects/experimental/components/checkbox/ng-package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "lib": { - "entryFile": "index.ts" - } -} diff --git a/projects/experimental/components/chip/chip.directive.ts b/projects/experimental/components/chip/chip.directive.ts index 47684d31c387..dabd83b142cd 100644 --- a/projects/experimental/components/chip/chip.directive.ts +++ b/projects/experimental/components/chip/chip.directive.ts @@ -7,8 +7,11 @@ import { TuiIconsDirective, } from '@taiga-ui/core'; import {tuiButtonOptionsProvider} from '@taiga-ui/experimental/components/button'; -import {tuiCheckboxOptionsProvider} from '@taiga-ui/experimental/components/checkbox'; -import {tuiAvatarOptionsProvider, tuiSwitchOptionsProvider} from '@taiga-ui/kit'; +import { + tuiAvatarOptionsProvider, + tuiCheckboxOptionsProvider, + tuiSwitchOptionsProvider, +} from '@taiga-ui/kit'; import {TuiChipComponent} from './chip.component'; import {TUI_CHIP_OPTIONS} from './chip.options'; diff --git a/projects/experimental/components/index.ts b/projects/experimental/components/index.ts index 28183356af1d..cf951b3ee967 100644 --- a/projects/experimental/components/index.ts +++ b/projects/experimental/components/index.ts @@ -1,5 +1,4 @@ export * from '@taiga-ui/experimental/components/button'; -export * from '@taiga-ui/experimental/components/checkbox'; export * from '@taiga-ui/experimental/components/chip'; export * from '@taiga-ui/experimental/components/compass'; export * from '@taiga-ui/experimental/components/navigation'; diff --git a/projects/kit/components/checkbox-labeled/checkbox-labeled.component.ts b/projects/kit/components/checkbox-labeled/checkbox-labeled.component.ts deleted file mode 100644 index 6ff42eefee99..000000000000 --- a/projects/kit/components/checkbox-labeled/checkbox-labeled.component.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { - ChangeDetectionStrategy, - Component, - inject, - Input, - ViewChild, -} from '@angular/core'; -import type {TuiFocusableElementAccessor, TuiNativeFocusableElement} from '@taiga-ui/cdk'; -import { - AbstractTuiNullableControl, - tuiAsControl, - tuiAsFocusableItemAccessor, - tuiIsNativeFocused, -} from '@taiga-ui/cdk'; -import type {TuiSizeL} from '@taiga-ui/core'; -import {MODE_PROVIDER, TUI_CHECKBOX_OPTIONS, TUI_MODE} from '@taiga-ui/core'; -import {TuiCheckboxComponent} from '@taiga-ui/kit/components/checkbox'; - -@Component({ - selector: 'tui-checkbox-labeled', - templateUrl: './checkbox-labeled.template.html', - styleUrls: ['./checkbox-labeled.style.less'], - changeDetection: ChangeDetectionStrategy.OnPush, - providers: [ - tuiAsFocusableItemAccessor(TuiCheckboxLabeledComponent), - tuiAsControl(TuiCheckboxLabeledComponent), - MODE_PROVIDER, - ], - host: { - '($.data-mode.attr)': 'mode$', - '[attr.data-size]': 'size', - }, -}) -export class TuiCheckboxLabeledComponent - extends AbstractTuiNullableControl - implements TuiFocusableElementAccessor -{ - @ViewChild(TuiCheckboxComponent) - private readonly checkbox?: TuiCheckboxComponent; - - private readonly options = inject(TUI_CHECKBOX_OPTIONS); - - @Input() - public size: TuiSizeL = this.options.size; - - protected readonly mode$ = inject(TUI_MODE); - - public get focused(): boolean { - return tuiIsNativeFocused(this.nativeFocusableElement); - } - - public get nativeFocusableElement(): TuiNativeFocusableElement | null { - return this.checkbox?.nativeFocusableElement ?? null; - } - - protected onFocused(focused: boolean): void { - this.updateFocused(focused); - } - - /** @deprecated use 'value' setter */ - protected onModelChange(value: boolean): void { - this.value = value; - } -} diff --git a/projects/kit/components/checkbox-labeled/checkbox-labeled.module.ts b/projects/kit/components/checkbox-labeled/checkbox-labeled.module.ts deleted file mode 100644 index fac25f8b25f0..000000000000 --- a/projects/kit/components/checkbox-labeled/checkbox-labeled.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {TuiCheckboxModule} from '@taiga-ui/kit/components/checkbox'; - -import {TuiCheckboxLabeledComponent} from './checkbox-labeled.component'; - -@NgModule({ - imports: [CommonModule, FormsModule, TuiCheckboxModule], - declarations: [TuiCheckboxLabeledComponent], - exports: [TuiCheckboxLabeledComponent], -}) -export class TuiCheckboxLabeledModule {} diff --git a/projects/kit/components/checkbox-labeled/checkbox-labeled.style.less b/projects/kit/components/checkbox-labeled/checkbox-labeled.style.less deleted file mode 100644 index b6f2e53aaef6..000000000000 --- a/projects/kit/components/checkbox-labeled/checkbox-labeled.style.less +++ /dev/null @@ -1,46 +0,0 @@ -@import '@taiga-ui/core/styles/taiga-ui-local'; - -:host { - position: relative; - display: block; - line-height: 0; - - &._disabled, - &._readonly { - pointer-events: none; - } -} - -.t-wrapper { - display: inline-flex; - max-width: 100%; - cursor: pointer; - - :host._disabled & { - cursor: default; - } - - :host[data-mode='onDark'] & { - color: var(--tui-text-01-night); - } -} - -.t-content { - font: var(--tui-font-text-s); - line-height: 1rem; - word-wrap: break-word; - min-width: 0; - - &_disabled { - opacity: var(--tui-disabled-opacity); - } - - :host[data-size='m'] & { - margin-left: 0.5rem; - } - - :host[data-size='l'] & { - font: var(--tui-font-text-m); - margin-left: 0.75rem; - } -} diff --git a/projects/kit/components/checkbox-labeled/checkbox-labeled.template.html b/projects/kit/components/checkbox-labeled/checkbox-labeled.template.html deleted file mode 100644 index 3c6d982dbbf9..000000000000 --- a/projects/kit/components/checkbox-labeled/checkbox-labeled.template.html +++ /dev/null @@ -1,21 +0,0 @@ - diff --git a/projects/kit/components/checkbox-labeled/index.ts b/projects/kit/components/checkbox-labeled/index.ts deleted file mode 100644 index c71869908cfc..000000000000 --- a/projects/kit/components/checkbox-labeled/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './checkbox-labeled.component'; -export * from './checkbox-labeled.module'; diff --git a/projects/kit/components/checkbox-labeled/ng-package.json b/projects/kit/components/checkbox-labeled/ng-package.json deleted file mode 100644 index bebf62dcb5e5..000000000000 --- a/projects/kit/components/checkbox-labeled/ng-package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "lib": { - "entryFile": "index.ts" - } -} diff --git a/projects/kit/components/checkbox/checkbox.component.ts b/projects/kit/components/checkbox/checkbox.component.ts index d86f6b4d46cc..5665a7d4656e 100644 --- a/projects/kit/components/checkbox/checkbox.component.ts +++ b/projects/kit/components/checkbox/checkbox.component.ts @@ -1,69 +1,88 @@ -import type {ElementRef} from '@angular/core'; +import type {DoCheck, OnInit} from '@angular/core'; import { ChangeDetectionStrategy, Component, - HostBinding, + ElementRef, inject, Input, - ViewChild, } from '@angular/core'; -import type {TuiFocusableElementAccessor} from '@taiga-ui/cdk'; +import {NgControl, NgModel} from '@angular/forms'; import { - AbstractTuiNullableControl, - tuiAsControl, - tuiAsFocusableItemAccessor, - tuiIsNativeFocused, + tuiControlValue, + TuiDestroyService, + tuiIsString, + TuiNativeValidatorDirective, } from '@taiga-ui/cdk'; -import type {TuiSizeL} from '@taiga-ui/core'; -import {TUI_CHECKBOX_OPTIONS} from '@taiga-ui/core'; +import type {TuiSizeS} from '@taiga-ui/core'; +import {TUI_ICON_RESOLVER, TuiAppearanceDirective} from '@taiga-ui/core'; +import {takeUntil} from 'rxjs'; + +import {TUI_CHECKBOX_OPTIONS} from './checkbox.options'; @Component({ - selector: 'tui-checkbox', - templateUrl: './checkbox.template.html', + standalone: true, + selector: 'input[type="checkbox"][tuiCheckbox]', + template: '', styleUrls: ['./checkbox.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, - providers: [ - tuiAsFocusableItemAccessor(TuiCheckboxComponent), - tuiAsControl(TuiCheckboxComponent), + providers: [TuiDestroyService], + hostDirectives: [ + { + directive: TuiAppearanceDirective, + inputs: [ + 'tuiAppearance: appearance', + 'tuiAppearanceState', + 'tuiAppearanceFocus', + ], + }, + TuiNativeValidatorDirective, ], + host: { + '[disabled]': '!control || control.disabled', + '[attr.data-size]': 'size', + '[class._readonly]': '!control', + '[style.--t-checked]': 'getIcon("checked")', + '[style.--t-indeterminate]': 'getIcon("indeterminate")', + }, }) -export class TuiCheckboxComponent - extends AbstractTuiNullableControl - implements TuiFocusableElementAccessor -{ - @ViewChild('focusableElement') - private readonly focusableElement?: ElementRef; - +export class TuiCheckboxComponent implements OnInit, DoCheck { + private readonly appearance = inject(TuiAppearanceDirective); private readonly options = inject(TUI_CHECKBOX_OPTIONS); + private readonly resolver = inject(TUI_ICON_RESOLVER); + private readonly destroy$ = inject(TuiDestroyService, {self: true}); + private readonly el: HTMLInputElement = inject(ElementRef).nativeElement; @Input() - @HostBinding('attr.data-size') - public size: TuiSizeL = this.options.size; + public size: TuiSizeS = this.options.size; - public get nativeFocusableElement(): HTMLInputElement | null { - return !this.focusableElement || this.computedDisabled - ? null - : this.focusableElement.nativeElement; - } + protected readonly control: NgControl | null = inject(NgControl, { + optional: true, + self: true, + }); - public get focused(): boolean { - return tuiIsNativeFocused(this.nativeFocusableElement); - } + public ngOnInit(): void { + if (!this.control?.valueChanges) { + return; + } - public override get computedFocusable(): boolean { - return this.interactive && this.focusable; - } + tuiControlValue(this.control) + .pipe(takeUntil(this.destroy$)) + .subscribe(value => { + // https://github.com/angular/angular/issues/14988 + const fix = this.control instanceof NgModel ? this.control.model : value; - /** @deprecated use 'value' setter */ - protected onChecked(checked: boolean): void { - this.value = checked; + this.el.indeterminate = fix === null; + }); } - protected onFocused(focused: boolean): void { - this.updateFocused(focused); + public ngDoCheck(): void { + this.appearance.tuiAppearance = this.options.appearance(this.el); } - protected onFocusVisible(focusVisible: boolean): void { - this.updateFocusVisible(focusVisible); + protected getIcon(state: 'checked' | 'indeterminate'): string { + const option = this.options.icons[state]; + const icon = tuiIsString(option) ? option : option(this.size); + + return `url(${this.resolver(icon)})`; } } diff --git a/projects/kit/components/checkbox/checkbox.module.ts b/projects/kit/components/checkbox/checkbox.module.ts deleted file mode 100644 index aaf8c3e6c402..000000000000 --- a/projects/kit/components/checkbox/checkbox.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import { - TuiCheckedModule, - TuiFocusableModule, - TuiFocusedModule, - TuiFocusVisibleModule, -} from '@taiga-ui/cdk'; -import {TuiPrimitiveCheckboxModule} from '@taiga-ui/core'; - -import {TuiCheckboxComponent} from './checkbox.component'; - -@NgModule({ - imports: [ - CommonModule, - TuiCheckedModule, - TuiFocusableModule, - TuiFocusedModule, - TuiFocusVisibleModule, - TuiPrimitiveCheckboxModule, - ], - declarations: [TuiCheckboxComponent], - exports: [TuiCheckboxComponent], -}) -export class TuiCheckboxModule {} diff --git a/projects/experimental/components/checkbox/checkbox.options.ts b/projects/kit/components/checkbox/checkbox.options.ts similarity index 100% rename from projects/experimental/components/checkbox/checkbox.options.ts rename to projects/kit/components/checkbox/checkbox.options.ts diff --git a/projects/kit/components/checkbox/checkbox.style.less b/projects/kit/components/checkbox/checkbox.style.less index ead169adfa79..56c50923a664 100644 --- a/projects/kit/components/checkbox/checkbox.style.less +++ b/projects/kit/components/checkbox/checkbox.style.less @@ -1,34 +1,49 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; -@sizeM: 1rem; -@sizeL: 1.5rem; - :host { - .text-basic(); + --t-size: 1.5rem; + --t-radius: var(--tui-radius-s); - position: relative; - display: block; + width: var(--t-size); + height: var(--t-size); + border-radius: var(--t-radius); + cursor: pointer; + margin: 0; flex-shrink: 0; - &[data-size='m'] { - width: @sizeM; - height: @sizeM; + &:before { + .fullsize(); + + content: ''; + background: currentColor; + mask: url('data:image/svg+xml,') center/100%; + transform: scale(0); + transition: + transform var(--tui-duration) ease-in-out, + mask 0s var(--tui-duration) ease-in-out; } - &[data-size='l'] { - width: @sizeL; - height: @sizeL; + &:disabled._readonly { + opacity: 1; } - &._readonly tui-primitive-checkbox { - pointer-events: none; + &:checked, + &:indeterminate { + &:before { + mask-image: var(--t-checked); + transform: scale(1); + transition: + transform var(--tui-duration) ease-in-out, + mask 0s ease-in-out; + } } -} -.t-native { - .clearinput(); - .fullsize(); + &:indeterminate:before { + mask-image: var(--t-indeterminate); + } - opacity: 0; - cursor: pointer; + &[data-size='s'] { + --t-size: 1rem; + --t-radius: var(--tui-radius-xs); + } } diff --git a/projects/kit/components/checkbox/checkbox.template.html b/projects/kit/components/checkbox/checkbox.template.html deleted file mode 100644 index 5d3e756b2a89..000000000000 --- a/projects/kit/components/checkbox/checkbox.template.html +++ /dev/null @@ -1,22 +0,0 @@ - - - diff --git a/projects/kit/components/checkbox/index.ts b/projects/kit/components/checkbox/index.ts index 78560364db07..e2aa1ca0283a 100644 --- a/projects/kit/components/checkbox/index.ts +++ b/projects/kit/components/checkbox/index.ts @@ -1,2 +1,2 @@ export * from './checkbox.component'; -export * from './checkbox.module'; +export * from './checkbox.options'; diff --git a/projects/kit/components/index.ts b/projects/kit/components/index.ts index 34b14cc837e3..b7d52dfb42cf 100644 --- a/projects/kit/components/index.ts +++ b/projects/kit/components/index.ts @@ -11,7 +11,6 @@ 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-labeled'; export * from '@taiga-ui/kit/components/combo-box'; export * from '@taiga-ui/kit/components/confirm'; export * from '@taiga-ui/kit/components/data-list-wrapper'; diff --git a/projects/kit/components/multi-select-option/multi-select-option.component.ts b/projects/kit/components/multi-select-option/multi-select-option.component.ts index 34f9b14a3b6e..6bbe0ead332a 100644 --- a/projects/kit/components/multi-select-option/multi-select-option.component.ts +++ b/projects/kit/components/multi-select-option/multi-select-option.component.ts @@ -1,6 +1,6 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; import {tuiIsPresent} from '@taiga-ui/cdk'; -import type {TuiSizeL} from '@taiga-ui/core'; +import type {TuiSizeS} from '@taiga-ui/core'; import {TuiSelectOptionComponent} from '@taiga-ui/kit/components/select-option'; @Component({ @@ -12,11 +12,8 @@ import {TuiSelectOptionComponent} from '@taiga-ui/kit/components/select-option'; export class TuiMultiSelectOptionComponent< T extends any[], > extends TuiSelectOptionComponent { - protected get size(): TuiSizeL { - return this.option.size === 'l' || - (this.dataList?.size === 'l' && !this.option.size) - ? 'l' - : 'm'; + protected get size(): TuiSizeS { + return this.dataList?.size === 'l' ? 'm' : 's'; } protected override get selected(): boolean { diff --git a/projects/kit/components/multi-select-option/multi-select-option.module.ts b/projects/kit/components/multi-select-option/multi-select-option.module.ts index 580cf2050a34..c37c3aea3d35 100644 --- a/projects/kit/components/multi-select-option/multi-select-option.module.ts +++ b/projects/kit/components/multi-select-option/multi-select-option.module.ts @@ -1,11 +1,11 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {TuiPrimitiveCheckboxModule} from '@taiga-ui/core'; +import {TuiCheckboxComponent} from '@taiga-ui/kit/components/checkbox'; import {TuiMultiSelectOptionComponent} from './multi-select-option.component'; @NgModule({ - imports: [CommonModule, TuiPrimitiveCheckboxModule], + imports: [CommonModule, TuiCheckboxComponent], declarations: [TuiMultiSelectOptionComponent], exports: [TuiMultiSelectOptionComponent], }) diff --git a/projects/kit/components/multi-select-option/multi-select-option.template.html b/projects/kit/components/multi-select-option/multi-select-option.template.html index aa21aaca7e1f..409cc08a86eb 100644 --- a/projects/kit/components/multi-select-option/multi-select-option.template.html +++ b/projects/kit/components/multi-select-option/multi-select-option.template.html @@ -1,6 +1,8 @@ - diff --git a/projects/kit/components/multi-select/multi-select-group/multi-select-group.component.ts b/projects/kit/components/multi-select/multi-select-group/multi-select-group.component.ts index fe322519ba06..8a05509053af 100644 --- a/projects/kit/components/multi-select/multi-select-group/multi-select-group.component.ts +++ b/projects/kit/components/multi-select/multi-select-group/multi-select-group.component.ts @@ -18,7 +18,7 @@ import { tuiPure, tuiQueryListChanges, } from '@taiga-ui/cdk'; -import type {TuiDataListHost, TuiSizeL, TuiSizeXS} from '@taiga-ui/core'; +import type {TuiDataListHost} from '@taiga-ui/core'; import {TUI_DATA_LIST_HOST, TuiOptionComponent} from '@taiga-ui/core'; import {TUI_MULTI_SELECT_TEXTS} from '@taiga-ui/kit/tokens'; import type {Observable} from 'rxjs'; @@ -78,10 +78,6 @@ export class TuiMultiSelectGroupComponent { ); } - protected get size(): TuiSizeL | TuiSizeXS { - return this.options.first?.size || 'm'; - } - protected onClick(checked: boolean | null): void { if (!this.control.control) { return;