feat(kit): InputPassword add new version, deprecate legacy

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

@@ -31,7 +31,8 @@
         outline-color: var(--tui-status-negative);
     }
 
-    &[data-mode='readonly'] {
+    &[data-mode='readonly'],
+    input&:read-only:not([data-mode]) {
         box-shadow: none;
         outline-color: var(--tui-border-normal) !important;
     }

projects/demo/src/modules/components/input-password/examples/1/index.html

@@ -1,34 +1,29 @@
-<form [formGroup]="testForm">
-    <tui-input-password
-        formControlName="testValue"
-        tuiTextfieldSize="s"
-    >
-        Type a password
-        <input
-            placeholder="Make it secure!"
-            tuiTextfieldLegacy
-        />
-    </tui-input-password>
-    <tui-input-password
-        formControlName="testValue"
-        tuiTextfieldSize="m"
-        class="tui-space_top-2"
-        [tuiTextfieldLabelOutside]="true"
-    >
-        Type a password
-        <input
-            placeholder="Make it secure!"
-            tuiTextfieldLegacy
-        />
-    </tui-input-password>
-    <tui-input-password
-        formControlName="testValue"
-        class="tui-space_top-2"
-    >
-        Type a password
-        <input
-            placeholder="Make it secure!"
-            tuiTextfieldLegacy
-        />
-    </tui-input-password>
-</form>
+<tui-textfield
+    #textfield
+    tuiTextfieldSize="s"
+>
+    <input
+        tuiInputPassword
+        [placeholder]="textfield.focused() ? 'Make it secure!' : 'Type a password'"
+        [(ngModel)]="password"
+    />
+</tui-textfield>
+<tui-textfield
+    tuiTextfieldSize="m"
+    class="tui-space_vertical-4"
+>
+    <label tuiLabel>Type a password</label>
+    <input
+        placeholder="Make it secure!"
+        tuiInputPassword
+        [(ngModel)]="password"
+    />
+</tui-textfield>
+<tui-textfield>
+    <label tuiLabel>Type a password</label>
+    <input
+        placeholder="Make it secure!"
+        tuiInputPassword
+        [(ngModel)]="password"
+    />
+</tui-textfield>

projects/demo/src/modules/components/input-password/examples/1/index.ts

@@ -1,18 +1,17 @@
 import {Component} from '@angular/core';
-import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiInputPasswordModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
+import {TuiTextfield} from '@taiga-ui/core';
+import {TuiInputPassword} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [ReactiveFormsModule, TuiInputPasswordModule, TuiTextfieldControllerModule],
+    imports: [FormsModule, TuiInputPassword, TuiTextfield],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
 export default class Example {
-    protected testForm = new FormGroup({
-        testValue: new FormControl('password', Validators.required),
-    });
+    protected password = '';
 }

projects/demo/src/modules/components/input-password/examples/2/index.html

@@ -1,10 +1,9 @@
 <form [formGroup]="testForm">
-    <tui-input-password
-        formControlName="testValue"
-        tuiHintAppearance="dark"
-        tuiHintContent
-        tuiHintDirection="right"
-    >
-        Type a password
-    </tui-input-password>
+    <tui-textfield>
+        <label tuiLabel>Type a password</label>
+        <input
+            formControlName="testValue"
+            tuiInputPassword
+        />
+    </tui-textfield>
 </form>

projects/demo/src/modules/components/input-password/examples/2/index.ts

@@ -2,27 +2,30 @@ import {Component} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiHint} from '@taiga-ui/core';
-import {TUI_PASSWORD_TEXTS} from '@taiga-ui/kit';
-import {TuiInputPasswordModule, tuiInputPasswordOptionsProvider} from '@taiga-ui/legacy';
+import {TuiTextfield} from '@taiga-ui/core';
+import {
+    TUI_PASSWORD_TEXTS,
+    TuiInputPassword,
+    tuiInputPasswordOptionsProvider,
+} from '@taiga-ui/kit';
 import {of} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [ReactiveFormsModule, TuiInputPasswordModule, TuiHint],
+    imports: [ReactiveFormsModule, TuiTextfield, TuiInputPassword],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
     providers: [
         tuiInputPasswordOptionsProvider({
             icons: {
                 hide: '@tui.lock',
-                show: '@tui.unlock',
+                show: '@tui.lock-open',
             },
         }),
         {
             provide: TUI_PASSWORD_TEXTS,
-            useValue: of(['']),
+            useValue: of(['', '']),
         },
     ],
 })

projects/demo/src/modules/components/input-password/examples/import/import.md

@@ -1,33 +1,20 @@
 ```ts
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiInputPasswordModule} from '@taiga-ui/legacy';
+import {ReactiveFormsModule} from '@angular/forms';
+import {TuiInputPassword} from '@taiga-ui/kit';
 
 // ...
 
 @Component({
   standalone: true,
   imports: [
     // ...
-    FormsModule,
     ReactiveFormsModule,
-    TuiInputPasswordModule,
-  ],
-  providers: [
-    {
-      provide: TUI_INPUT_PASSWORD_OPTIONS,
-      useValue: {
-        ...TUI_INPUT_PASSWORD_DEFAULT_OPTIONS,
-        icons: {
-          hide: '@tui.eye-off',
-          show: '@tui.eye',
-        },
-      },
-    },
+    TuiInputPassword,
   ],
 })
 export class Example {
-  testForm = new FormGroup({
-    testValue: new FormControl(''),
+  readonly form = new FormGroup({
+    value: new FormControl(''),
   });
 }
 ```

projects/demo/src/modules/components/input-password/examples/import/template.md

@@ -1,5 +1,11 @@
 ```html
-<form [formGroup]="testForm">
-  <tui-input-password formControlName="testValue">Type a password</tui-input-password>
+<form [formGroup]="form">
+  <tui-textfield>
+    <label tuiLabel>Type a password</label>
+    <input
+      formControlName="value"
+      tuiInputPassword
+    />
+  </tui-textfield>
 </form>
 ```

projects/demo/src/modules/components/input-password/index.html

@@ -1,80 +1,17 @@
 <tui-doc-page
     header="InputPassword"
-    package="LEGACY"
+    package="KIT"
     type="components"
 >
     <ng-template pageTab>
         <tui-doc-example
-            id="sizes"
-            heading="sizes"
-            [component]="1 | tuiComponent"
-            [content]="1 | tuiExample: 'html,ts'"
-        >
-            <tui-notification class="tui-space_bottom-4">
-                <div>
-                    If you need to set some attributes or listen to events on native
-                    <code>input</code>
-                    , you can put it inside with
-                    <code>Textfield</code>
-                    directive as shown below
-                </div>
-            </tui-notification>
-        </tui-doc-example>
-        <tui-doc-example
-            id="options"
-            heading="options"
-            [component]="2 | tuiComponent"
-            [content]="2 | tuiExample: 'html,ts'"
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample: 'html,ts'"
+            [heading]="example"
+            [id]="example | tuiKebab"
         />
     </ng-template>
 
-    <ng-template pageTab>
-        <tui-doc-demo [control]="control">
-            <ng-template>
-                <tui-input-password
-                    [focusable]="focusable"
-                    [formControl]="control"
-                    [pseudoFocus]="pseudoFocused"
-                    [pseudoHover]="pseudoHovered"
-                    [pseudoInvalid]="pseudoInvalid"
-                    [readOnly]="readOnly"
-                    [style.text-align]="textAlign"
-                    [tuiHintAppearance]="hintAppearance"
-                    [tuiHintContent]="hintContent"
-                    [tuiHintDirection]="hintDirection"
-                    [tuiTextfieldCleaner]="cleaner"
-                    [tuiTextfieldIconLeft]="iconStart"
-                    [tuiTextfieldLabelOutside]="labelOutside"
-                    [tuiTextfieldSize]="size"
-                >
-                    Type a password
-                </tui-input-password>
-            </ng-template>
-        </tui-doc-demo>
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyName="disabled"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="disabled"
-            >
-                Disabled state (use
-                <code>formControl.disable()</code>
-                )
-            </ng-template>
-        </tui-doc-documentation>
-        <inherited-documentation />
-        <tui-doc-documentation heading="CSS customization">
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="style.text-align"
-                documentationPropertyType="string"
-                [documentationPropertyValues]="textAlignVariants"
-                [(documentationPropertyValue)]="textAlign"
-            >
-                Custom align content by text-align
-            </ng-template>
-        </tui-doc-documentation>
-    </ng-template>
-
-    <tui-setup *pageTab />
+    <tui-setup *pageTab="'Setup'" />
 </tui-doc-page>

projects/demo/src/modules/components/input-password/index.ts

@@ -1,33 +1,13 @@
 import {Component} from '@angular/core';
-import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
-import {tuiProvide} from '@taiga-ui/cdk';
-import {TuiHint} from '@taiga-ui/core';
-import {TuiInputPasswordModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
-
-import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
-import {AbstractExampleTuiControl} from '../abstract/control';
-import {InheritedDocumentation} from '../abstract/inherited-documentation';
 
 @Component({
     standalone: true,
-    imports: [
-        TuiDemo,
-        TuiInputPasswordModule,
-        ReactiveFormsModule,
-        TuiHint,
-        TuiTextfieldControllerModule,
-        InheritedDocumentation,
-    ],
+    imports: [TuiDemo],
     templateUrl: './index.html',
     changeDetection,
-    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
 })
-export default class PageComponent extends AbstractExampleTuiControl {
-    public override readonly maxLengthVariants: readonly number[] = [10];
-
-    public override maxLength = null;
-
-    public control = new FormControl('', Validators.required);
+export default class PageComponent {
+    protected readonly examples = ['Sizes', 'Options'];
 }

projects/demo/used-icons.ts

@@ -60,8 +60,7 @@ export const TUI_USED_ICONS = [
     '@tui.droplet',
     '@tui.cloud-upload',
     '@tui.pencil',
-    '@tui.unlock',
-    '@tui.eye-off',
+    '@tui.lock-open',
     '@tui.volume-x',
     '@tui.volume',
     '@tui.thumbs-down',
@@ -71,6 +70,7 @@ export const TUI_USED_ICONS = [
     '@tui.gitlab',
     '@tui.alarm-clock',
     '@tui.download',
+    '@tui.eye-off',
     '@tui.video',
     '@tui.arrow-up',
     '@tui.frown',

projects/kit/components/index.ts

@@ -20,6 +20,7 @@ export * from '@taiga-ui/kit/components/elastic-container';
 export * from '@taiga-ui/kit/components/files';
 export * from '@taiga-ui/kit/components/filter';
 export * from '@taiga-ui/kit/components/input-inline';
+export * from '@taiga-ui/kit/components/input-password';
 export * from '@taiga-ui/kit/components/input-phone-international';
 export * from '@taiga-ui/kit/components/items-with-more';
 export * from '@taiga-ui/kit/components/line-clamp';

projects/kit/components/input-password/index.ts

@@ -0,0 +1,2 @@
+export * from './input-password.component';
+export * from './input-password.options';