feat(experimental): Toggle, Checkbox, Radio add new components (#…

…5319)

Co-authored-by: taiga-family-bot <[email protected]>

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

@@ -203,7 +203,32 @@ export const ROUTES: Routes = [
         loadChildren: async () =>
             (await import(`../experimental/avatar/avatar.module`)).ExampleTuiAvatarModule,
         data: {
-            title: `Avatar`,
+            title: `Avatar `,
+        },
+    },
+    {
+        path: `experimental/checkbox`,
+        loadChildren: async () =>
+            (await import(`../experimental/checkbox/checkbox.module`))
+                .ExampleTuiCheckboxModule,
+        data: {
+            title: `Checkbox `,
+        },
+    },
+    {
+        path: `experimental/radio`,
+        loadChildren: async () =>
+            (await import(`../experimental/radio/radio.module`)).ExampleTuiRadioModule,
+        data: {
+            title: `Radio `,
+        },
+    },
+    {
+        path: `experimental/toggle`,
+        loadChildren: async () =>
+            (await import(`../experimental/toggle/toggle.module`)).ExampleTuiToggleModule,
+        data: {
+            title: `Toggle `,
         },
     },
     {

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

@@ -819,7 +819,7 @@ export const pages: TuiDocPages = [
     // Experimental
     {
         section: `Experimental`,
-        title: `Avatar`,
+        title: `Avatar `,
         keywords: `аватар, image, pic, icon, картинка, изображение, avatar, stack`,
         route: `/experimental/avatar`,
     },
@@ -883,6 +883,24 @@ export const pages: TuiDocPages = [
         keywords: `card, container, wrapper, image, blur, overlay`,
         route: `/experimental/surface`,
     },
+    {
+        section: `Experimental`,
+        title: `Checkbox `,
+        keywords: `чек, радио, ввод, форма, form, checkbox, radio, toggle`,
+        route: `/experimental/checkbox`,
+    },
+    {
+        section: `Experimental`,
+        title: `Radio `,
+        keywords: `чек, радио, ввод, форма, form, checkbox, radio, toggle`,
+        route: `/experimental/radio`,
+    },
+    {
+        section: `Experimental`,
+        title: `Toggle `,
+        keywords: `чек, радио, ввод, форма, form, checkbox, radio, toggle`,
+        route: `/experimental/toggle`,
+    },
     // Charts
     {
         section: `Charts`,

projects/demo/src/modules/experimental/avatar/avatar.template.html

@@ -108,11 +108,7 @@
     <ng-template pageTab>
         <ol class="b-demo-steps">
             <li>
-                <p>
-                    Import
-                    <code>TuiAvatarModule</code>
-                    into a module where you want to use our component
-                </p>
+                <p>Import module</p>
 
                 <tui-doc-code
                     filename="myComponent.module.ts"

projects/demo/src/modules/experimental/checkbox/checkbox.component.ts

@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-checkbox',
+    templateUrl: './checkbox.template.html',
+    changeDetection,
+})
+export class ExampleTuiCheckboxComponent {
+    readonly exampleModule: TuiRawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: TuiRawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('./examples/1/index.ts?raw'),
+        HTML: import('./examples/1/index.html?raw'),
+    };
+}

projects/demo/src/modules/experimental/checkbox/checkbox.module.ts

@@ -0,0 +1,25 @@
+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 {}

projects/demo/src/modules/experimental/checkbox/checkbox.template.html

@@ -0,0 +1,50 @@
+<tui-doc-page
+    header="Checkbox"
+    package="EXPERIMENTAL"
+    type="components"
+>
+    <ng-template pageTab>
+        <tui-notification status="warning">
+            This code is
+            <strong>experimental</strong>
+            and is a subject to change. Expect final solution to be shipped in the next major version
+        </tui-notification>
+
+        <p>A checkbox component that is able to imitate native control on mobile platforms.</p>
+
+        <tui-doc-example
+            id="platforms"
+            heading="Platforms"
+            [content]="example1"
+        >
+            <tui-notification class="tui-space_bottom-4">
+                Use
+                <code>--tui-accent</code>
+                CSS variable to customize color of native control emulation
+            </tui-notification>
+            <tui-checkbox-example-1></tui-checkbox-example-1>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import module</p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="myComponent.template.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>

projects/demo/src/modules/experimental/checkbox/examples/1/index.html

@@ -0,0 +1,62 @@
+<div
+    *ngFor="let platform of platforms; let first = first"
+    class="wrapper"
+    [class.wrapper_web]="platform === 'web'"
+    [tuiPlatform]="platform"
+>
+    <!--
+        This allows platform provider time to initialize.
+        Unnecessary for static platform tuiPlatform="whatever"
+    -->
+    <ng-container *ngIf="getSize(first) as size">
+        <input
+            tuiCheckbox
+            type="checkbox"
+            [ngModel]="true"
+            [size]="size"
+        />
+
+        <input
+            tuiCheckbox
+            type="checkbox"
+            [indeterminate]="true"
+            [size]="size"
+        />
+
+        <input
+            tuiCheckbox
+            type="checkbox"
+            [disabled]="true"
+            [ngModel]="true"
+            [size]="size"
+        />
+
+        <input
+            tuiCheckbox
+            type="checkbox"
+            [size]="size"
+        />
+
+        <input
+            tuiCheckbox
+            type="checkbox"
+            [disabled]="true"
+            [ngModel]="false"
+            [size]="size"
+        />
+
+        <input
+            tuiCheckbox
+            type="checkbox"
+            [formControl]="invalidTrue"
+            [size]="size"
+        />
+
+        <input
+            tuiCheckbox
+            type="checkbox"
+            [formControl]="invalidFalse"
+            [size]="size"
+        />
+    </ng-container>
+</div>

projects/demo/src/modules/experimental/checkbox/examples/1/index.less

@@ -0,0 +1,24 @@
+:host {
+    display: flex;
+    --tui-accent: var(--tui-info-fill);
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    flex: 1;
+    gap: 1rem;
+    padding: 1rem;
+
+    &_web {
+        border: 1px solid var(--tui-base-04);
+        border-left-width: 0;
+
+        &:first-child {
+            border-right-width: 0;
+            border-left-width: 1px;
+        }
+    }
+}

projects/demo/src/modules/experimental/checkbox/examples/1/index.ts

@@ -0,0 +1,28 @@
+import {Component, OnInit} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiPlatform} from '@taiga-ui/cdk';
+import {TuiSizeS} from '@taiga-ui/core';
+
+@Component({
+    selector: 'tui-checkbox-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCheckboxExample1 implements OnInit {
+    readonly platforms: readonly TuiPlatform[] = ['web', 'web', 'android', 'ios'];
+    readonly invalidTrue = new FormControl(true, () => ({invalid: true}));
+    readonly invalidFalse = new FormControl(false, () => ({invalid: true}));
+
+    ngOnInit(): void {
+        this.invalidTrue.markAsTouched();
+        this.invalidFalse.markAsTouched();
+    }
+
+    getSize(first: boolean): TuiSizeS {
+        return first ? 'm' : 's';
+    }
+}

projects/demo/src/modules/experimental/checkbox/examples/import/import-module.md

@@ -0,0 +1,13 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiCheckboxModule} from '@taiga-ui/experimental';
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiCheckboxModule,
+  ],
+})
+export class MyModule {}
+```

projects/demo/src/modules/experimental/checkbox/examples/import/insert-template.md

@@ -0,0 +1,7 @@
+```html
+<input
+  tuiCheckbox
+  type="checkbox"
+  [(ngModel)]="value"
+/>
+```

projects/demo/src/modules/experimental/fade/fade.template.html

@@ -89,11 +89,7 @@
     <ng-template pageTab>
         <ol class="b-demo-steps">
             <li>
-                <p>
-                    Import
-                    <code>TuiFadeModule</code>
-                    into a module where you want to use our component
-                </p>
+                <p>Import module</p>
 
                 <tui-doc-code
                     filename="myComponent.module.ts"

projects/demo/src/modules/experimental/radio/examples/1/index.html

@@ -0,0 +1,59 @@
+<div
+    *ngFor="let platform of platforms; let first = first"
+    class="wrapper"
+    [class.wrapper_web]="platform === 'web'"
+    [tuiPlatform]="platform"
+>
+    <!--
+        This allows platform provider time to initialize.
+        Unnecessary for static platform tuiPlatform="whatever"
+    -->
+    <ng-container *ngIf="getSize(first) as size">
+        <input
+            ngModel="checked"
+            tuiRadio
+            type="radio"
+            value="checked"
+            [size]="size"
+        />
+
+        <input
+            ngModel="checked"
+            tuiRadio
+            type="radio"
+            value="checked"
+            [disabled]="true"
+            [size]="size"
+        />
+
+        <input
+            tuiRadio
+            type="radio"
+            [size]="size"
+        />
+
+        <input
+            ngModel="checked"
+            tuiRadio
+            type="radio"
+            [disabled]="true"
+            [size]="size"
+        />
+
+        <input
+            tuiRadio
+            type="radio"
+            [formControl]="invalidTrue"
+            [size]="size"
+            [value]="true"
+        />
+
+        <input
+            tuiRadio
+            type="radio"
+            [formControl]="invalidFalse"
+            [size]="size"
+            [value]="true"
+        />
+    </ng-container>
+</div>