feat(kit): Copy and Password add interactive icons to Textfield (…

…#8833)

Co-authored-by: taiga-family-bot <taiga-family-bot@users.noreply.github.com>

.cspell.json

@@ -27,7 +27,8 @@
         "fortawesome",
         "svgs",
         "contentalign",
-        "sber"
+        "inputpassword",
+        "inputcopy"
     ],
     "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"],
     "overrides": [

projects/cdk/utils/di/create-options.ts

@@ -0,0 +1,11 @@
+import type {InjectionToken, Provider} from '@angular/core';
+import type {TuiHandler} from '@taiga-ui/cdk/types';
+import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';
+
+export function tuiCreateOptions<T>(
+    defaults: T,
+): [token: InjectionToken<T>, provider: TuiHandler<Partial<T>, Provider>] {
+    const token = tuiCreateToken(defaults);
+
+    return [token, (options) => tuiProvideOptions(token, options, defaults)];
+}

projects/cdk/utils/di/index.ts

@@ -0,0 +1,2 @@
+// TODO: Move all DI utils into this entry point in v.5
+export * from './create-options';

projects/cdk/utils/di/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

projects/cdk/utils/index.ts

@@ -1,5 +1,6 @@
 export * from '@taiga-ui/cdk/utils/browser';
 export * from '@taiga-ui/cdk/utils/color';
+export * from '@taiga-ui/cdk/utils/di';
 export * from '@taiga-ui/cdk/utils/dom';
 export * from '@taiga-ui/cdk/utils/focus';
 export * from '@taiga-ui/cdk/utils/math';

projects/core/components/error/error.component.ts

@@ -1,17 +1,17 @@
-import {AsyncPipe, NgIf} from '@angular/common';
+import {NgIf} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
 import {TuiValidationError} from '@taiga-ui/cdk/classes';
-import {TuiLet} from '@taiga-ui/cdk/directives/let';
 import {tuiIsString} from '@taiga-ui/cdk/utils/miscellaneous';
 import {tuiFadeIn, tuiHeightCollapse} from '@taiga-ui/core/animations';
 import {TUI_ANIMATIONS_SPEED, TUI_DEFAULT_ERROR_MESSAGE} from '@taiga-ui/core/tokens';
 import {tuiToAnimationOptions} from '@taiga-ui/core/utils';
-import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
+import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 
 @Component({
     standalone: true,
     selector: 'tui-error',
-    imports: [AsyncPipe, NgIf, PolymorpheusOutlet, PolymorpheusTemplate, TuiLet],
+    imports: [NgIf, PolymorpheusOutlet],
     templateUrl: './error.template.html',
     styleUrls: ['./error.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -25,7 +25,7 @@ export class TuiError {
     protected readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
     protected error: TuiValidationError | null = null;
     protected visible = true;
-    protected readonly defaultErrorMessage$ = inject(TUI_DEFAULT_ERROR_MESSAGE);
+    protected readonly default = toSignal(inject(TUI_DEFAULT_ERROR_MESSAGE));
 
     @Input('error')
     public set errorSetter(error: TuiValidationError | string | null) {

projects/core/components/error/error.style.less

@@ -9,6 +9,11 @@
 }
 
 .t-message-text {
-    margin-top: 0.25rem;
     white-space: pre-line;
+
+    &::before {
+        content: '';
+        line-height: 1.5rem;
+        vertical-align: bottom;
+    }
 }

projects/core/components/error/error.template.html

@@ -1,13 +1,11 @@
-<ng-container *tuiLet="defaultErrorMessage$ | async as defaultErrorMessage">
-    <div
-        *ngIf="error && visible"
-        automation-id="tui-error__text"
-        class="t-message-text"
-        [@tuiFadeIn]="options"
-        [@tuiHeightCollapse]="options"
-    >
-        <ng-container *polymorpheusOutlet="error.message || defaultErrorMessage as text; context: error.context || {}">
-            {{ text }}
-        </ng-container>
-    </div>
-</ng-container>
+<div
+    *ngIf="error && visible"
+    automation-id="tui-error__text"
+    class="t-message-text"
+    [@tuiFadeIn]="options"
+    [@tuiHeightCollapse]="options"
+>
+    <ng-container *polymorpheusOutlet="error.message || default() as text; context: error.context || {}">
+        {{ text }}
+    </ng-container>
+</div>

projects/core/components/textfield/textfield.component.ts

@@ -31,7 +31,6 @@ import {
 } from '@taiga-ui/core/directives/dropdown';
 import {TuiWithIcons} from '@taiga-ui/core/directives/icons';
 import {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';
-import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 
@@ -79,7 +78,6 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
 
     protected side = 0;
 
-    protected readonly options = inject(TUI_TEXTFIELD_OPTIONS);
     protected readonly autoId = tuiInjectId();
     protected readonly icons = inject(TUI_COMMON_ICONS);
     protected readonly cdr = inject(ChangeDetectorRef);
@@ -103,15 +101,12 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
     public content: PolymorpheusContent<TuiContext<T>>;
 
     public readonly focused = computed(() => this.open() || this.focusedIn());
+    public readonly options = inject(TUI_TEXTFIELD_OPTIONS);
 
     public get id(): string {
         return this.el?.nativeElement.id || this.autoId;
     }
 
-    public get size(): TuiSizeL | TuiSizeS {
-        return this.options.size();
-    }
-
     public handleOption(option: T): void {
         this.directive?.setValue(this.stringify(option));
         this.open.set(false);

projects/core/styles/components/textfield.less

@@ -55,7 +55,7 @@ tui-textfield {
         }
 
         &::after {
-            margin: 0 -0.175rem 0 0.25rem;
+            margin: 0 -0.175rem 0 0.575rem;
             font-size: 1rem;
         }
 
@@ -66,6 +66,7 @@ tui-textfield {
 
         .t-content {
             gap: 0;
+            margin-inline-end: -0.325rem;
         }
     }
 
@@ -89,13 +90,17 @@ tui-textfield {
         }
 
         &::after {
-            margin: 0 -0.125rem 0 0.375rem;
+            margin: 0 -0.125rem 0 0.5rem;
         }
 
         input,
         select {
             font: var(--tui-font-text-s);
         }
+
+        .t-content {
+            margin-inline-end: -0.125rem;
+        }
     }
 
     /*
@@ -138,9 +143,11 @@ tui-textfield {
         select {
             padding-top: calc(var(--t-height) / 3);
 
-            &::placeholder,
+            &:not(:-webkit-autofill)::placeholder,
             &._empty {
-                color: transparent;
+                caret-color: var(--tui-text-primary);
+                color: transparent !important;
+                -webkit-text-fill-color: transparent !important;
             }
         }
     }
@@ -152,9 +159,11 @@ tui-textfield {
         select {
             padding-top: calc(var(--t-height) / 3);
 
-            &::placeholder,
+            &:not(:-webkit-autofill)::placeholder,
             &._empty {
-                color: transparent;
+                caret-color: var(--tui-text-primary);
+                color: transparent !important;
+                -webkit-text-fill-color: transparent !important;
             }
         }
     }
@@ -188,7 +197,7 @@ tui-textfield {
             & ~ .t-content {
                 opacity: var(--tui-disabled-opacity);
 
-                [tuiTooltip] {
+                tui-icon {
                     display: none;
                 }
             }
@@ -215,7 +224,9 @@ tui-textfield {
             .appearance-focus({
                 &::placeholder,
                 &._empty {
-                    color: var(--tui-text-tertiary);
+                    caret-color: var(--tui-text-primary);
+                    color: transparent !important;
+                    -webkit-text-fill-color: var(--tui-text-tertiary) !important;
                 }
 
                 & ~ label {
@@ -265,6 +276,10 @@ tui-textfield {
         gap: 0.25rem;
         margin-inline-start: auto;
         isolation: isolate;
+
+        tui-icon {
+            pointer-events: auto;
+        }
     }
 
     .t-clear {

projects/core/styles/theme/appearance/textfield.less

@@ -43,6 +43,10 @@
         border-color: var(--tui-service-autofill-background) !important;
         box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important;
         transition: background-color 600000s 0s;
+
+        &::placeholder {
+            -webkit-text-fill-color: var(--tui-text-secondary);
+        }
     }
 }
 

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

@@ -404,11 +404,6 @@ export const ROUTES: Routes = [
         loadComponent: async () => import('../components/input-card-group'),
         title: 'InputCardGroup',
     }),
-    route({
-        path: DemoRoute.InputCopy,
-        loadComponent: async () => import('../components/input-copy'),
-        title: 'InputCopy',
-    }),
     route({
         path: DemoRoute.InputDateTime,
         loadComponent: async () => import('../components/input-date-time'),
@@ -429,11 +424,6 @@ export const ROUTES: Routes = [
         loadComponent: async () => import('../components/input-number'),
         title: 'InputNumber',
     }),
-    route({
-        path: DemoRoute.InputPassword,
-        loadComponent: async () => import('../components/input-password'),
-        title: 'InputPassword',
-    }),
     route({
         path: DemoRoute.InputPhone,
         loadComponent: async () => import('../components/input-phone'),

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

@@ -77,12 +77,10 @@ export const DemoRoute = {
     InputDateMulti: '/components/input-date-multi',
     InputCard: '/components/input-card',
     InputCardGroup: '/components/input-card-group',
-    InputCopy: '/components/input-copy',
     InputDateTime: '/components/input-date-time',
     InputMonth: '/components/input-month',
     InputMonthRange: '/components/input-month-range',
     InputNumber: '/components/input-number',
-    InputPassword: '/components/input-password',
     InputPhone: '/components/input-phone',
     InputRange: '/components/input-range',
     InputDateRange: '/components/input-date-range',

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

@@ -456,12 +456,6 @@ export const pages: TuiDocRoutePages = [
                     'карта, visa, mastercard, credit, card, срок, expire, код, cvc, cvv',
                 route: DemoRoute.InputCardGroup,
             },
-            {
-                section: 'Components',
-                title: 'InputCopy',
-                keywords: 'поле, инпут, форма, копия, скопировать, ввод, input, copy',
-                route: DemoRoute.InputCopy,
-            },
             {
                 section: 'Components',
                 title: 'InputDate',
@@ -518,12 +512,6 @@ export const pages: TuiDocRoutePages = [
                     'cash, копейки, рубли, доллары, евро, control, контрол',
                 route: DemoRoute.InputNumber,
             },
-            {
-                section: 'Components',
-                title: 'InputPassword',
-                keywords: 'поле, инпут, форма, ввод, input, password, пароль, код, шифр',
-                route: DemoRoute.InputPassword,
-            },
             {
                 section: 'Components',
                 title: 'InputPhone',
@@ -935,7 +923,8 @@ export const pages: TuiDocRoutePages = [
     {
         section: 'Components',
         title: 'Textfield',
-        keywords: 'form, input, select, textarea, combobox, ввод, форма, поле',
+        keywords:
+            'form, input, select, textarea, combobox, ввод, форма, поле, password, inputpassword, пароль, код, шифр, copy, inputcopy',
         route: DemoRoute.Textfield,
     },
     {