feat(toggle): allow configuration of default options

taiga-family · Aug 20, 2021 · 52eec97 · 52eec97
1 parent b5af611
commit 52eec97
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 35 deletions.
diff --git a/projects/demo/src/modules/components/toggle/examples/2/index.html b/projects/demo/src/modules/components/toggle/examples/2/index.html
@@ -0,0 +1,13 @@
+<form [formGroup]="testForm">
+    <div>
+        <tui-toggle formControlName="testValue1" size="m" [showIcons]="true">
+        </tui-toggle>
+        <tui-toggle
+            class="tui-space_left-1"
+            formControlName="testValue2"
+            size="l"
+            [showIcons]="true"
+        >
+        </tui-toggle>
+    </div>
+</form>
diff --git a/projects/demo/src/modules/components/toggle/examples/2/index.ts b/projects/demo/src/modules/components/toggle/examples/2/index.ts
@@ -0,0 +1,40 @@
+import {Component} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+import {
+    ToggleOptions,
+    TUI_TOGGLE_DEFAULT_OPTIONS,
+    TUI_TOGGLE_OPTIONS,
+} from '@taiga-ui/kit';
+import {changeDetection} from '../../../../../change-detection-strategy';
+import {encapsulation} from '../../../../../view-encapsulation';
+
+const options: ToggleOptions = {
+    icons: {
+        toggleOff: ({$implicit}) =>
+            $implicit === 'm' ? 'tuiIconChevronRight' : 'tuiIconChevronRightLarge',
+        toggleOn: ({$implicit}) =>
+            $implicit === 'm' ? 'tuiIconChevronLeft' : 'tuiIconChevronLeftLarge',
+    },
+};
+
+@Component({
+    selector: 'tui-toggle-example-2',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+    providers: [
+        {
+            provide: TUI_TOGGLE_OPTIONS,
+            useValue: {
+                ...TUI_TOGGLE_DEFAULT_OPTIONS,
+                ...options,
+            },
+        },
+    ],
+})
+export class TuiToggleExample2 {
+    testForm = new FormGroup({
+        testValue1: new FormControl(true),
+        testValue2: new FormControl(false),
+    });
+}
diff --git a/projects/demo/src/modules/components/toggle/examples/import/define-options.txt b/projects/demo/src/modules/components/toggle/examples/import/define-options.txt
@@ -0,0 +1,25 @@
+import {
+    ToggleOptions,
+    TUI_TOGGLE_DEFAULT_OPTIONS,
+    TUI_TOGGLE_OPTIONS,
+} from '@taiga-ui/kit';
+
+...
+const options: ToggleOptions = {
+    icons: {
+        toggleOff: ({$implicit}) =>
+            $implicit === 'm' ? 'tuiIconChevronRight' : 'tuiIconChevronRightLarge',
+        toggleOn: ({$implicit}) =>
+            $implicit === 'm' ? 'tuiIconChevronLeft' : 'tuiIconChevronLeftLarge',
+    },
+};
+
+@NgModule({
+    providers: [{
+        provide: TUI_TOGGLE_OPTIONS,
+        useValue: {
+            ...TUI_TOGGLE_DEFAULT_OPTIONS,
+            ...options,
+        }
+    }],
+...
diff --git a/projects/demo/src/modules/components/toggle/toggle.component.ts b/projects/demo/src/modules/components/toggle/toggle.component.ts
@@ -1,7 +1,10 @@
 import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
 import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
+import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
+import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
 
 import {default as exampleDeclareForm} from '!!raw-loader!./examples/import/declare-form.txt';
+import {default as exampleDefineOptions} from '!!raw-loader!./examples/import/define-options.txt';
 import {default as exampleImportModule} from '!!raw-loader!./examples/import/import-module.txt';
 import {default as exampleInsertTemplate} from '!!raw-loader!./examples/import/insert-template.txt';
 
@@ -28,12 +31,18 @@ export class ExampleTuiToggleComponent extends AbstractExampleTuiInteractive {
     readonly exampleDeclareForm = exampleDeclareForm;
     readonly exampleImportModule = exampleImportModule;
     readonly exampleInsertTemplate = exampleInsertTemplate;
+    readonly exampleDefineOptions = exampleDefineOptions;
 
     readonly example1: FrontEndExample = {
         TypeScript: example1Ts,
         HTML: example1Html,
     };
 
+    readonly example2: FrontEndExample = {
+        TypeScript: example2Ts,
+        HTML: example2Html,
+    };
+
     showIcons = false;
 
     showLoader = false;

diff --git a/projects/demo/src/modules/components/toggle/toggle.module.ts b/projects/demo/src/modules/components/toggle/toggle.module.ts
@@ -6,6 +6,7 @@ import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiToggleModule} from '@taiga-ui/kit';
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 import {TuiToggleExample1} from './examples/1';
+import {TuiToggleExample2} from './examples/2';
 import {ExampleTuiToggleComponent} from './toggle.component';
 
 @NgModule({
@@ -18,7 +19,7 @@ import {ExampleTuiToggleComponent} from './toggle.component';
         CommonModule,
         RouterModule.forChild(generateRoutes(ExampleTuiToggleComponent)),
     ],
-    declarations: [ExampleTuiToggleComponent, TuiToggleExample1],
+    declarations: [ExampleTuiToggleComponent, TuiToggleExample1, TuiToggleExample2],
     exports: [ExampleTuiToggleComponent],
 })
 export class ExampleTuiToggleModule {}
diff --git a/projects/demo/src/modules/components/toggle/toggle.template.html b/projects/demo/src/modules/components/toggle/toggle.template.html
@@ -13,6 +13,15 @@
         >
             <tui-toggle-example-1></tui-toggle-example-1>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="options"
+            i18n-heading
+            heading="options"
+            [content]="example2"
+        >
+            <tui-toggle-example-2></tui-toggle-example-2>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>
@@ -112,6 +121,19 @@
                     [code]="exampleInsertTemplate"
                 ></tui-doc-code>
             </li>
+
+            <li>
+                <p i18n>
+                    Optionally use the
+                    <code>TUI_TOGGLE_OPTIONS</code> injection token to override
+                    the default options for the component.
+                </p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleDefineOptions"
+                ></tui-doc-code>
+            </li>
         </ol>
     </ng-template>
 </tui-doc-page>
diff --git a/projects/kit/components/toggle/index.ts b/projects/kit/components/toggle/index.ts
@@ -1,2 +1,3 @@
 export * from './toggle.component';
 export * from './toggle.module';
+export * from './toggle-options';
diff --git a/projects/kit/components/toggle/toggle-options.ts b/projects/kit/components/toggle/toggle-options.ts
@@ -0,0 +1,28 @@
+import {InjectionToken} from '@angular/core';
+import {TuiContextWithImplicit} from '@taiga-ui/cdk';
+import {TuiSizeL} from '@taiga-ui/core';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+
+export interface ToggleOptions {
+    readonly icons: Readonly<{
+        toggleOff: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>;
+        toggleOn: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>;
+    }>;
+}
+
+/** Default values for the toggle options. */
+export const TUI_TOGGLE_DEFAULT_OPTIONS: ToggleOptions = {
+    icons: {
+        toggleOff: ({$implicit}) =>
+            $implicit === 'm' ? 'tuiIconToggleOff' : 'tuiIconToggleOffLarge',
+        toggleOn: ({$implicit}) =>
+            $implicit === 'm' ? 'tuiIconToggleOn' : 'tuiIconToggleOnLarge',
+    },
+};
+
+export const TUI_TOGGLE_OPTIONS = new InjectionToken<ToggleOptions>(
+    'Default parameters for toggle component',
+    {
+        factory: () => TUI_TOGGLE_DEFAULT_OPTIONS,
+    },
+);
diff --git a/projects/kit/components/toggle/toggle.component.ts b/projects/kit/components/toggle/toggle.component.ts
@@ -16,9 +16,11 @@ import {
     AbstractTuiControl,
     isNativeFocused,
     TUI_FOCUSABLE_ITEM_ACCESSOR,
+    TuiContextWithImplicit,
     tuiDefaultProp,
     TuiFocusableElementAccessor,
     TuiNativeFocusableElement,
+    tuiPure,
 } from '@taiga-ui/cdk';
 import {
     TuiAppearance,
@@ -27,6 +29,8 @@ import {
     TuiSizeL,
     TuiSizeXS,
 } from '@taiga-ui/core';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {ToggleOptions, TUI_TOGGLE_OPTIONS} from './toggle-options';
 
 @Component({
     selector: 'tui-toggle',
@@ -72,10 +76,29 @@ export class TuiToggleComponent
         @Optional()
         @Inject(TuiModeDirective)
         private readonly modeDirective: TuiModeDirective | null,
+        @Inject(TUI_TOGGLE_OPTIONS)
+        public readonly options: ToggleOptions,
     ) {
         super(control, changeDetectorRef);
     }
 
+    get iconOn(): PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>> {
+        return this.options.icons.toggleOn;
+    }
+
+    get iconOff(): PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>> {
+        return this.options.icons.toggleOff;
+    }
+
+    get context(): TuiContextWithImplicit<TuiSizeL> {
+        return this.getContext(this.size);
+    }
+
+    @tuiPure
+    private getContext($implicit: TuiSizeL): TuiContextWithImplicit<TuiSizeL> {
+        return {$implicit};
+    }
+
     get nativeFocusableElement(): TuiNativeFocusableElement | null {
         return this.focusableElement ? this.focusableElement.nativeElement : null;
     }
@@ -99,14 +122,6 @@ export class TuiToggleComponent
         return this.value;
     }
 
-    get iconOn(): string {
-        return this.sizeM ? 'tuiIconToggleOn' : 'tuiIconToggleOnLarge';
-    }
-
-    get iconOff(): string {
-        return this.sizeM ? 'tuiIconToggleOff' : 'tuiIconToggleOffLarge';
-    }
-
     get loaderSize(): TuiSizeXS {
         return this.sizeM ? 'xs' : 's';
     }

diff --git a/projects/kit/components/toggle/toggle.module.ts b/projects/kit/components/toggle/toggle.module.ts
@@ -9,6 +9,7 @@ import {
     TuiPressedModule,
 } from '@taiga-ui/cdk';
 import {TuiLoaderModule, TuiSvgModule, TuiWrapperModule} from '@taiga-ui/core';
+import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 import {TuiToggleComponent} from './toggle.component';
 
 @NgModule({
@@ -23,6 +24,7 @@ import {TuiToggleComponent} from './toggle.component';
         TuiWrapperModule,
         TuiSvgModule,
         TuiLoaderModule,
+        PolymorpheusModule,
     ],
     declarations: [TuiToggleComponent],
     exports: [TuiToggleComponent],

diff --git a/projects/kit/components/toggle/toggle.style.less b/projects/kit/components/toggle/toggle.style.less
@@ -128,6 +128,10 @@
     }
 }
 
+.icon-wrapper {
+    display: flex;
+}
+
 .icon {
     opacity: 0.8;
 

diff --git a/projects/kit/components/toggle/toggle.template.html b/projects/kit/components/toggle/toggle.template.html
@@ -7,33 +7,52 @@
     [invalid]="computedInvalid"
 >
     <div class="toggle">
-        <tui-loader
-            *ngIf="showLoader"
-            class="loader"
-            [size]="loaderSize"
-            [inheritColor]="true"
-            [showLoader]="checked"
-        ></tui-loader>
-        <tui-svg
-            *ngIf="showIcons && !showLoader"
-            class="icon"
-            automation-id="tui-toggle__check-icon"
-            [src]="iconOn"
-        ></tui-svg>
+        <span
+            polymorpheus-outlet
+            class="icon-wrapper"
+            [content]="iconOn"
+            [context]="context"
+        >
+            <ng-template let-icon>
+                <tui-loader
+                    *ngIf="showLoader"
+                    class="loader"
+                    [size]="loaderSize"
+                    [inheritColor]="true"
+                    [showLoader]="checked"
+                ></tui-loader>
+
+                <tui-svg
+                    *ngIf="showIcons && !showLoader"
+                    class="icon"
+                    automation-id="tui-toggle__check-icon"
+                    [src]="icon"
+                ></tui-svg>
+            </ng-template>
+        </span>
         <div class="circle"></div>
-        <tui-loader
-            *ngIf="showLoader"
-            class="loader"
-            [size]="loaderSize"
-            [inheritColor]="true"
-            [showLoader]="!checked"
-        ></tui-loader>
-        <tui-svg
-            *ngIf="showIcons && !showLoader"
-            class="icon icon_off"
-            automation-id="tui-toggle__cancel-icon"
-            [src]="iconOff"
-        ></tui-svg>
+        <span
+            polymorpheus-outlet
+            class="icon-wrapper"
+            [content]="iconOff"
+            [context]="context"
+        >
+            <ng-template let-icon>
+                <tui-loader
+                    *ngIf="showLoader"
+                    class="loader"
+                    [size]="loaderSize"
+                    [inheritColor]="true"
+                    [showLoader]="!checked"
+                ></tui-loader>
+                <tui-svg
+                    *ngIf="showIcons && !showLoader"
+                    class="icon icon_off"
+                    automation-id="tui-toggle__cancel-icon"
+                    [src]="icon"
+                ></tui-svg>
+            </ng-template>
+        </span>
     </div>
 </tui-wrapper>
 <input
-Original file line number
+Diff line change
@@ Expand Up / @@ -128,6 +128,10 @@ @@
         }
     }
+    .icon-wrapper {
+        display: flex;
+    }
     .icon {
         opacity: 0.8;
@@ Expand Down @@