From c8bdaf03ce8d1df76870d13a342681299312225c Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Tue, 10 Sep 2024 18:55:30 +0400 Subject: [PATCH] feat(kit): `Copy` and `Password` add interactive icons to `Textfield` (#8833) Co-authored-by: taiga-family-bot --- .cspell.json | 3 +- projects/cdk/utils/di/create-options.ts | 11 ++ projects/cdk/utils/di/index.ts | 2 + projects/cdk/utils/di/ng-package.json | 5 + projects/cdk/utils/index.ts | 1 + .../core/components/error/error.component.ts | 10 +- .../core/components/error/error.style.less | 7 +- .../core/components/error/error.template.html | 24 ++-- .../textfield/textfield.component.ts | 7 +- .../core/styles/components/textfield.less | 31 +++-- .../styles/theme/appearance/textfield.less | 4 + projects/demo/src/modules/app/app.routes.ts | 10 -- projects/demo/src/modules/app/demo-routes.ts | 2 - projects/demo/src/modules/app/pages.ts | 15 +-- .../input-copy/examples/1/index.html | 22 ---- .../components/input-copy/examples/1/index.ts | 18 --- .../input-copy/examples/import/import.md | 22 ---- .../input-copy/examples/import/template.md | 5 - .../modules/components/input-copy/index.html | 107 ------------------ .../modules/components/input-copy/index.ts | 52 --------- .../input-password/examples/1/index.html | 29 ----- .../input-password/examples/2/index.html | 9 -- .../input-password/examples/2/index.ts | 36 ------ .../input-password/examples/import/import.md | 20 ---- .../examples/import/template.md | 11 -- .../components/input-password/index.html | 17 --- .../components/input-password/index.ts | 13 --- .../src/modules/components/input/index.html | 9 -- .../components/primitive-textfield/index.html | 11 -- .../textfield/examples/4/index.html | 23 ++++ .../textfield/examples/4/index.less | 5 + .../1 => textfield/examples/4}/index.ts | 9 +- .../src/modules/components/textfield/index.ts | 2 +- projects/demo/used-icons.ts | 3 +- .../input-password.component.ts | 7 +- .../input-password/input-password.options.ts | 12 ++ .../kit/directives/copy/copy.directive.ts | 89 +++++++++++++++ projects/kit/directives/copy/copy.options.ts | 12 ++ projects/kit/directives/copy/index.ts | 2 + projects/kit/directives/copy/ng-package.json | 5 + projects/kit/directives/index.ts | 2 + projects/kit/directives/password/index.ts | 1 + .../kit/directives/password/ng-package.json | 5 + .../directives/password/password.directive.ts | 76 +++++++++++++ .../directives/password/password.options.ts | 18 +++ .../input-copy/input-copy.component.ts | 3 + .../input-copy/input-copy.directive.ts | 3 + .../input-copy/input-copy.module.ts | 3 + .../input-copy/input-copy.options.ts | 12 ++ .../input-password.component.ts | 2 +- .../input-password.directive.ts | 2 +- .../input-password/input-password.module.ts | 2 +- .../input-password/input-password.options.ts | 8 +- 53 files changed, 363 insertions(+), 456 deletions(-) create mode 100644 projects/cdk/utils/di/create-options.ts create mode 100644 projects/cdk/utils/di/index.ts create mode 100644 projects/cdk/utils/di/ng-package.json delete mode 100644 projects/demo/src/modules/components/input-copy/examples/1/index.html delete mode 100644 projects/demo/src/modules/components/input-copy/examples/1/index.ts delete mode 100644 projects/demo/src/modules/components/input-copy/examples/import/import.md delete mode 100644 projects/demo/src/modules/components/input-copy/examples/import/template.md delete mode 100644 projects/demo/src/modules/components/input-copy/index.html delete mode 100644 projects/demo/src/modules/components/input-copy/index.ts delete mode 100644 projects/demo/src/modules/components/input-password/examples/1/index.html delete mode 100644 projects/demo/src/modules/components/input-password/examples/2/index.html delete mode 100644 projects/demo/src/modules/components/input-password/examples/2/index.ts delete mode 100644 projects/demo/src/modules/components/input-password/examples/import/import.md delete mode 100644 projects/demo/src/modules/components/input-password/examples/import/template.md delete mode 100644 projects/demo/src/modules/components/input-password/index.html delete mode 100644 projects/demo/src/modules/components/input-password/index.ts create mode 100644 projects/demo/src/modules/components/textfield/examples/4/index.html create mode 100644 projects/demo/src/modules/components/textfield/examples/4/index.less rename projects/demo/src/modules/components/{input-password/examples/1 => textfield/examples/4}/index.ts (59%) create mode 100644 projects/kit/directives/copy/copy.directive.ts create mode 100644 projects/kit/directives/copy/copy.options.ts create mode 100644 projects/kit/directives/copy/index.ts create mode 100644 projects/kit/directives/copy/ng-package.json create mode 100644 projects/kit/directives/password/index.ts create mode 100644 projects/kit/directives/password/ng-package.json create mode 100644 projects/kit/directives/password/password.directive.ts create mode 100644 projects/kit/directives/password/password.options.ts diff --git a/.cspell.json b/.cspell.json index 601d85ca04c3..1820fbe032f2 100644 --- a/.cspell.json +++ b/.cspell.json @@ -27,7 +27,8 @@ "fortawesome", "svgs", "contentalign", - "sber" + "inputpassword", + "inputcopy" ], "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"], "overrides": [ diff --git a/projects/cdk/utils/di/create-options.ts b/projects/cdk/utils/di/create-options.ts new file mode 100644 index 000000000000..70e3863527b5 --- /dev/null +++ b/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( + defaults: T, +): [token: InjectionToken, provider: TuiHandler, Provider>] { + const token = tuiCreateToken(defaults); + + return [token, (options) => tuiProvideOptions(token, options, defaults)]; +} diff --git a/projects/cdk/utils/di/index.ts b/projects/cdk/utils/di/index.ts new file mode 100644 index 000000000000..458bcefdc3ed --- /dev/null +++ b/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'; diff --git a/projects/cdk/utils/di/ng-package.json b/projects/cdk/utils/di/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/cdk/utils/di/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/cdk/utils/index.ts b/projects/cdk/utils/index.ts index e18d9206335d..1396d7cc8d91 100644 --- a/projects/cdk/utils/index.ts +++ b/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'; diff --git a/projects/core/components/error/error.component.ts b/projects/core/components/error/error.component.ts index 02729b926387..57c14a3787ae 100644 --- a/projects/core/components/error/error.component.ts +++ b/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) { diff --git a/projects/core/components/error/error.style.less b/projects/core/components/error/error.style.less index 1c59369fde66..d9702ed88239 100644 --- a/projects/core/components/error/error.style.less +++ b/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; + } } diff --git a/projects/core/components/error/error.template.html b/projects/core/components/error/error.template.html index 84f3e594ee5e..b1a6de792579 100644 --- a/projects/core/components/error/error.template.html +++ b/projects/core/components/error/error.template.html @@ -1,13 +1,11 @@ - -
- - {{ text }} - -
- +
+ + {{ text }} + +
diff --git a/projects/core/components/textfield/textfield.component.ts b/projects/core/components/textfield/textfield.component.ts index f8313807912e..1efe512d4f3f 100644 --- a/projects/core/components/textfield/textfield.component.ts +++ b/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 implements TuiDataListHost { 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 implements TuiDataListHost { public content: PolymorpheusContent>; 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); diff --git a/projects/core/styles/components/textfield.less b/projects/core/styles/components/textfield.less index 0bb739a69836..882c28b676bb 100644 --- a/projects/core/styles/components/textfield.less +++ b/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 { diff --git a/projects/core/styles/theme/appearance/textfield.less b/projects/core/styles/theme/appearance/textfield.less index 970736cdf250..cdc014651ed0 100644 --- a/projects/core/styles/theme/appearance/textfield.less +++ b/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); + } } } diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index a4e0f7d314d0..c92b2bbd5e7e 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/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'), diff --git a/projects/demo/src/modules/app/demo-routes.ts b/projects/demo/src/modules/app/demo-routes.ts index f66d35033796..97d819ed51ea 100644 --- a/projects/demo/src/modules/app/demo-routes.ts +++ b/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', diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index fec36a0b2bb7..9d38332969bf 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/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, }, { diff --git a/projects/demo/src/modules/components/input-copy/examples/1/index.html b/projects/demo/src/modules/components/input-copy/examples/1/index.html deleted file mode 100644 index e7696b9145e7..000000000000 --- a/projects/demo/src/modules/components/input-copy/examples/1/index.html +++ /dev/null @@ -1,22 +0,0 @@ -
- - Value - - - - - Value - - - Value -
diff --git a/projects/demo/src/modules/components/input-copy/examples/1/index.ts b/projects/demo/src/modules/components/input-copy/examples/1/index.ts deleted file mode 100644 index d50ec045cae7..000000000000 --- a/projects/demo/src/modules/components/input-copy/examples/1/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -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 {TuiInputCopyModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'; - -@Component({ - standalone: true, - imports: [ReactiveFormsModule, TuiInputCopyModule, TuiTextfieldControllerModule], - templateUrl: './index.html', - encapsulation, - changeDetection, -}) -export default class Example { - protected readonly testForm = new FormGroup({ - testValue: new FormControl('', Validators.required), - }); -} diff --git a/projects/demo/src/modules/components/input-copy/examples/import/import.md b/projects/demo/src/modules/components/input-copy/examples/import/import.md deleted file mode 100644 index a6b591ee7ff0..000000000000 --- a/projects/demo/src/modules/components/input-copy/examples/import/import.md +++ /dev/null @@ -1,22 +0,0 @@ -```ts -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {TuiInputCopyModule} from '@taiga-ui/legacy'; - -// ... - -@Component({ - standalone: true, - imports: [ - // ... - FormsModule, - ReactiveFormsModule, - TuiInputCopyModule, - ], - // ... -}) -export class Example { - testForm = new FormGroup({ - testValue: new FormControl(''), - }); -} -``` diff --git a/projects/demo/src/modules/components/input-copy/examples/import/template.md b/projects/demo/src/modules/components/input-copy/examples/import/template.md deleted file mode 100644 index 4b1949c75c55..000000000000 --- a/projects/demo/src/modules/components/input-copy/examples/import/template.md +++ /dev/null @@ -1,5 +0,0 @@ -```html -
- Type a value -
-``` diff --git a/projects/demo/src/modules/components/input-copy/index.html b/projects/demo/src/modules/components/input-copy/index.html deleted file mode 100644 index f8d29cd03f98..000000000000 --- a/projects/demo/src/modules/components/input-copy/index.html +++ /dev/null @@ -1,107 +0,0 @@ - - -

InputCopy allows user to copy a text of textfield

- - - -
- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
- - - - - - - - Type a text - - - - - Disabled state (use - formControl.disable() - ) - - - Tooltip message after successful copy - - - Message tooltip direction - - - Message tooltip mode - - - - - - Custom align content by text-align - - - - - Some custom content - , that says that content is copied - - - - diff --git a/projects/demo/src/modules/components/input-copy/index.ts b/projects/demo/src/modules/components/input-copy/index.ts deleted file mode 100644 index 89ca409523fb..000000000000 --- a/projects/demo/src/modules/components/input-copy/index.ts +++ /dev/null @@ -1,52 +0,0 @@ -import {Component, ViewChild} from '@angular/core'; -import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {TuiDemo} from '@demo/utils'; -import {tuiDocExcludeProperties} from '@taiga-ui/addon-doc'; -import {tuiProvide} from '@taiga-ui/cdk'; -import {TuiInputCopyModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'; -import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; - -import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor'; -import {AbstractExampleTuiControl} from '../abstract/control'; -import {InheritedDocumentation} from '../abstract/inherited-documentation'; - -@Component({ - standalone: true, - imports: [ - InheritedDocumentation, - ReactiveFormsModule, - TuiDemo, - TuiInputCopyModule, - TuiTextfieldControllerModule, - ], - templateUrl: './index.html', - changeDetection, - providers: [ - tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent), - tuiDocExcludeProperties(['tuiTextfieldPrefix', 'tuiTextfieldPostfix']), - ], -}) -export default class PageComponent extends AbstractExampleTuiControl { - @ViewChild('customTemplate') - protected customTemplate: PolymorpheusContent; - - protected readonly successMessageVariants = ['Copied', 'Template']; - - protected successMessage = this.successMessageVariants[0]!; - - protected messageDirection = this.hintDirectionVariants[0]!; - protected messageMode = this.hintAppearanceVariants[0]!; - - public readonly control = new FormControl('', Validators.required); - - public override readonly maxLengthVariants: readonly number[] = [10]; - - public override readonly maxLength = null; - - protected get notificationTemplate(): PolymorpheusContent { - return this.successMessage === 'Template' - ? this.customTemplate - : this.successMessage; - } -} diff --git a/projects/demo/src/modules/components/input-password/examples/1/index.html b/projects/demo/src/modules/components/input-password/examples/1/index.html deleted file mode 100644 index eeddf938df62..000000000000 --- a/projects/demo/src/modules/components/input-password/examples/1/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - diff --git a/projects/demo/src/modules/components/input-password/examples/2/index.html b/projects/demo/src/modules/components/input-password/examples/2/index.html deleted file mode 100644 index 2dfaef476412..000000000000 --- a/projects/demo/src/modules/components/input-password/examples/2/index.html +++ /dev/null @@ -1,9 +0,0 @@ -
- - - - -
diff --git a/projects/demo/src/modules/components/input-password/examples/2/index.ts b/projects/demo/src/modules/components/input-password/examples/2/index.ts deleted file mode 100644 index 9443ef63bd5d..000000000000 --- a/projects/demo/src/modules/components/input-password/examples/2/index.ts +++ /dev/null @@ -1,36 +0,0 @@ -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 {TuiTextfield} from '@taiga-ui/core'; -import { - TUI_PASSWORD_TEXTS, - TuiInputPassword, - tuiInputPasswordOptionsProvider, -} from '@taiga-ui/kit'; -import {of} from 'rxjs'; - -@Component({ - standalone: true, - imports: [ReactiveFormsModule, TuiInputPassword, TuiTextfield], - templateUrl: './index.html', - encapsulation, - changeDetection, - providers: [ - tuiInputPasswordOptionsProvider({ - icons: { - hide: '@tui.lock', - show: '@tui.lock-open', - }, - }), - { - provide: TUI_PASSWORD_TEXTS, - useValue: of(['', '']), - }, - ], -}) -export default class Example { - protected testForm = new FormGroup({ - testValue: new FormControl('password', Validators.required), - }); -} diff --git a/projects/demo/src/modules/components/input-password/examples/import/import.md b/projects/demo/src/modules/components/input-password/examples/import/import.md deleted file mode 100644 index 00b8ac67de4c..000000000000 --- a/projects/demo/src/modules/components/input-password/examples/import/import.md +++ /dev/null @@ -1,20 +0,0 @@ -```ts -import {ReactiveFormsModule} from '@angular/forms'; -import {TuiInputPassword} from '@taiga-ui/kit'; - -// ... - -@Component({ - standalone: true, - imports: [ - // ... - ReactiveFormsModule, - TuiInputPassword, - ], -}) -export class Example { - readonly form = new FormGroup({ - value: new FormControl(''), - }); -} -``` diff --git a/projects/demo/src/modules/components/input-password/examples/import/template.md b/projects/demo/src/modules/components/input-password/examples/import/template.md deleted file mode 100644 index c89814d6b3fd..000000000000 --- a/projects/demo/src/modules/components/input-password/examples/import/template.md +++ /dev/null @@ -1,11 +0,0 @@ -```html -
- - - - -
-``` diff --git a/projects/demo/src/modules/components/input-password/index.html b/projects/demo/src/modules/components/input-password/index.html deleted file mode 100644 index 367da50892df..000000000000 --- a/projects/demo/src/modules/components/input-password/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - diff --git a/projects/demo/src/modules/components/input-password/index.ts b/projects/demo/src/modules/components/input-password/index.ts deleted file mode 100644 index e96bf0f22445..000000000000 --- a/projects/demo/src/modules/components/input-password/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {TuiDemo} from '@demo/utils'; - -@Component({ - standalone: true, - imports: [TuiDemo], - templateUrl: './index.html', - changeDetection, -}) -export default class PageComponent { - protected readonly examples = ['Sizes', 'Options']; -} diff --git a/projects/demo/src/modules/components/input/index.html b/projects/demo/src/modules/components/input/index.html index 52f0782e157a..e46d53f7e9fb 100644 --- a/projects/demo/src/modules/components/input/index.html +++ b/projects/demo/src/modules/components/input/index.html @@ -49,15 +49,6 @@ — for number (with measurement postfix) -
  • - - InputPassword - - — for passwords -
  • - - - Type a password diff --git a/projects/demo/src/modules/components/textfield/examples/4/index.html b/projects/demo/src/modules/components/textfield/examples/4/index.html new file mode 100644 index 000000000000..7e62f7195ec0 --- /dev/null +++ b/projects/demo/src/modules/components/textfield/examples/4/index.html @@ -0,0 +1,23 @@ + + + + + + + + + + + diff --git a/projects/demo/src/modules/components/textfield/examples/4/index.less b/projects/demo/src/modules/components/textfield/examples/4/index.less new file mode 100644 index 000000000000..23d25a3bb0a1 --- /dev/null +++ b/projects/demo/src/modules/components/textfield/examples/4/index.less @@ -0,0 +1,5 @@ +:host { + display: flex; + flex-direction: column; + gap: 1rem; +} diff --git a/projects/demo/src/modules/components/input-password/examples/1/index.ts b/projects/demo/src/modules/components/textfield/examples/4/index.ts similarity index 59% rename from projects/demo/src/modules/components/input-password/examples/1/index.ts rename to projects/demo/src/modules/components/textfield/examples/4/index.ts index 0872cd50a581..e8b9b033e5df 100644 --- a/projects/demo/src/modules/components/input-password/examples/1/index.ts +++ b/projects/demo/src/modules/components/textfield/examples/4/index.ts @@ -2,16 +2,17 @@ import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiTextfield} from '@taiga-ui/core'; -import {TuiInputPassword} from '@taiga-ui/kit'; +import {TuiIcon, TuiTextfield} from '@taiga-ui/core'; +import {TuiCopy, TuiPassword} from '@taiga-ui/kit'; @Component({ standalone: true, - imports: [FormsModule, TuiInputPassword, TuiTextfield], + imports: [FormsModule, TuiCopy, TuiIcon, TuiPassword, TuiTextfield], templateUrl: './index.html', + styleUrls: ['./index.less'], encapsulation, changeDetection, }) export default class Example { - protected password = ''; + protected value = ''; } diff --git a/projects/demo/src/modules/components/textfield/index.ts b/projects/demo/src/modules/components/textfield/index.ts index 373e9c47ade7..e8177576f78d 100644 --- a/projects/demo/src/modules/components/textfield/index.ts +++ b/projects/demo/src/modules/components/textfield/index.ts @@ -9,5 +9,5 @@ import {TuiDemo} from '@demo/utils'; changeDetection, }) export default class Page { - protected readonly examples = ['Size', 'States', 'Dropdown']; + protected readonly examples = ['Size', 'States', 'Dropdown', 'Interactive icons']; } diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts index 8f71c52c5218..3422af438ac7 100644 --- a/projects/demo/used-icons.ts +++ b/projects/demo/used-icons.ts @@ -60,7 +60,6 @@ export const TUI_USED_ICONS = [ '@tui.droplet', '@tui.cloud-upload', '@tui.pencil', - '@tui.lock-open', '@tui.volume-x', '@tui.volume', '@tui.thumbs-down', @@ -90,11 +89,11 @@ export const TUI_USED_ICONS = [ '@tui.image', '@tui.map-pin', '@tui.circle-alert', + '@tui.copy', '@tui.cloud', '@tui.grip-vertical', '@tui.camera', '@tui.folder', - '@tui.copy', '@tui.chevron-up', '@tui.play', '@tui.pause', diff --git a/projects/kit/components/input-password/input-password.component.ts b/projects/kit/components/input-password/input-password.component.ts index 775a23afb42c..39c81a9b7876 100644 --- a/projects/kit/components/input-password/input-password.component.ts +++ b/projects/kit/components/input-password/input-password.component.ts @@ -20,6 +20,9 @@ import {TUI_PASSWORD_TEXTS} from '@taiga-ui/kit/tokens'; import {TUI_INPUT_PASSWORD_OPTIONS} from './input-password.options'; +/** + * @deprecated use {@link TuiPassword} with {@link TuiTextfield} + */ @Component({ standalone: true, selector: 'input[tuiInputPassword]', @@ -54,9 +57,9 @@ export class TuiInputPassword { this.hidden() ? this.texts()[0] : this.texts()[1], ); - protected readonly icon = computed(() => { + protected readonly icon = computed((size = this.size()) => { const icon = this.hidden() ? this.options.icons.show : this.options.icons.hide; - return tuiIsString(icon) ? icon : icon(this.size()); + return tuiIsString(icon) ? icon : icon(size); }); } diff --git a/projects/kit/components/input-password/input-password.options.ts b/projects/kit/components/input-password/input-password.options.ts index 9f8bd662b59f..879d902b9fab 100644 --- a/projects/kit/components/input-password/input-password.options.ts +++ b/projects/kit/components/input-password/input-password.options.ts @@ -3,6 +3,9 @@ import type {TuiStringHandler} from '@taiga-ui/cdk/types'; import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; +/** + * @deprecated use {@link TuiPassword} with {@link TuiTextfield} + */ export interface TuiInputPasswordOptions { readonly icons: Readonly<{ hide: TuiStringHandler | string; @@ -10,6 +13,9 @@ export interface TuiInputPasswordOptions { }>; } +/** + * @deprecated use {@link TuiPassword} with {@link TuiTextfield} + */ export const TUI_INPUT_PASSWORD_DEFAULT_OPTIONS: TuiInputPasswordOptions = { icons: { hide: '@tui.eye-off', @@ -17,10 +23,16 @@ export const TUI_INPUT_PASSWORD_DEFAULT_OPTIONS: TuiInputPasswordOptions = { }, }; +/** + * @deprecated use {@link TuiPassword} with {@link TuiTextfield} + */ export const TUI_INPUT_PASSWORD_OPTIONS = tuiCreateToken( TUI_INPUT_PASSWORD_DEFAULT_OPTIONS, ); +/** + * @deprecated use {@link TuiPassword} with {@link TuiTextfield} + */ export function tuiInputPasswordOptionsProvider( options: Partial, ): Provider { diff --git a/projects/kit/directives/copy/copy.directive.ts b/projects/kit/directives/copy/copy.directive.ts new file mode 100644 index 000000000000..203ac953cde6 --- /dev/null +++ b/projects/kit/directives/copy/copy.directive.ts @@ -0,0 +1,89 @@ +import {DOCUMENT} from '@angular/common'; +import {computed, Directive, inject, Input} from '@angular/core'; +import {toSignal} from '@angular/core/rxjs-interop'; +import {tuiDirectiveBinding, tuiIsString} from '@taiga-ui/cdk/utils/miscellaneous'; +import {TuiIcon} from '@taiga-ui/core/components/icon'; +import {TuiTextfieldComponent} from '@taiga-ui/core/components/textfield'; +import { + TUI_APPEARANCE_OPTIONS, + TuiWithAppearance, +} from '@taiga-ui/core/directives/appearance'; +import {TuiHintDirective} from '@taiga-ui/core/directives/hint'; +import {TUI_COPY_TEXTS} from '@taiga-ui/kit/tokens'; +import {map, startWith, Subject, switchMap, timer} from 'rxjs'; + +import {TUI_COPY_OPTIONS} from './copy.options'; + +@Directive({ + standalone: true, + selector: 'tui-icon[tuiCopy]', + providers: [ + { + provide: TUI_APPEARANCE_OPTIONS, + useValue: {appearance: 'icon'}, + }, + ], + hostDirectives: [ + TuiWithAppearance, + { + directive: TuiHintDirective, + inputs: ['tuiHintAppearance', 'tuiHintContext'], + }, + ], + host: { + style: 'cursor: pointer', + '(click)': 'copy()', + '[style.pointer-events]': 'disabled ? "none" : null', + '[style.opacity]': 'disabled ? "var(--tui-disabled-opacity)" : null', + '[style.border]': + 'textfield.options.size() === "s" ? "0.25rem solid transparent" : null', + }, +}) +export class TuiCopy { + private readonly options = inject(TUI_COPY_OPTIONS); + private readonly copied$ = new Subject(); + private readonly doc = inject(DOCUMENT); + + protected readonly textfield = inject(TuiTextfieldComponent); + protected readonly hint = tuiDirectiveBinding( + TuiHintDirective, + 'tuiHint', + toSignal( + inject(TUI_COPY_TEXTS).pipe( + switchMap(([copy, copied]) => + this.copied$.pipe( + switchMap(() => + timer(3000).pipe( + map(() => copy), + startWith(copied), + ), + ), + startWith(copy), + ), + ), + ), + {initialValue: ''}, + ), + ); + + protected readonly icons = tuiDirectiveBinding( + TuiIcon, + 'icon', + computed((size = this.textfield.options.size()) => + tuiIsString(this.options.icon) ? this.options.icon : this.options.icon(size), + ), + ); + + @Input() + public tuiCopy: string | '' = ''; + + protected get disabled(): boolean { + return !this.textfield.el?.nativeElement.value; + } + + protected copy(): void { + this.textfield.el?.nativeElement.select(); + this.doc.execCommand('copy'); + this.copied$.next(); + } +} diff --git a/projects/kit/directives/copy/copy.options.ts b/projects/kit/directives/copy/copy.options.ts new file mode 100644 index 000000000000..4f92900207bf --- /dev/null +++ b/projects/kit/directives/copy/copy.options.ts @@ -0,0 +1,12 @@ +import type {TuiStringHandler} from '@taiga-ui/cdk/types'; +import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di'; +import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; + +export interface TuiCopyOptions { + readonly icon: TuiStringHandler | string; +} + +export const [TUI_COPY_OPTIONS, tuiCopyOptionsProvider] = + tuiCreateOptions({ + icon: '@tui.copy', + }); diff --git a/projects/kit/directives/copy/index.ts b/projects/kit/directives/copy/index.ts new file mode 100644 index 000000000000..2f1bba65c401 --- /dev/null +++ b/projects/kit/directives/copy/index.ts @@ -0,0 +1,2 @@ +export * from './copy.directive'; +export * from './copy.options'; diff --git a/projects/kit/directives/copy/ng-package.json b/projects/kit/directives/copy/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/kit/directives/copy/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/kit/directives/index.ts b/projects/kit/directives/index.ts index b2e9d001b7bd..4c6a702ada3e 100644 --- a/projects/kit/directives/index.ts +++ b/projects/kit/directives/index.ts @@ -3,12 +3,14 @@ export * from '@taiga-ui/kit/directives/button-group'; export * from '@taiga-ui/kit/directives/button-select'; export * from '@taiga-ui/kit/directives/chevron'; export * from '@taiga-ui/kit/directives/connected'; +export * from '@taiga-ui/kit/directives/copy'; export * from '@taiga-ui/kit/directives/data-list-dropdown-manager'; export * from '@taiga-ui/kit/directives/fade'; export * from '@taiga-ui/kit/directives/fluid-typography'; export * from '@taiga-ui/kit/directives/highlight'; export * from '@taiga-ui/kit/directives/icon-badge'; export * from '@taiga-ui/kit/directives/lazy-loading'; +export * from '@taiga-ui/kit/directives/password'; export * from '@taiga-ui/kit/directives/present'; export * from '@taiga-ui/kit/directives/sensitive'; export * from '@taiga-ui/kit/directives/skeleton'; diff --git a/projects/kit/directives/password/index.ts b/projects/kit/directives/password/index.ts new file mode 100644 index 000000000000..3cfc1fc2880b --- /dev/null +++ b/projects/kit/directives/password/index.ts @@ -0,0 +1 @@ +export * from './password.directive'; diff --git a/projects/kit/directives/password/ng-package.json b/projects/kit/directives/password/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/kit/directives/password/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/kit/directives/password/password.directive.ts b/projects/kit/directives/password/password.directive.ts new file mode 100644 index 000000000000..b82229d92664 --- /dev/null +++ b/projects/kit/directives/password/password.directive.ts @@ -0,0 +1,76 @@ +import {computed, Directive, inject, signal} from '@angular/core'; +import {toSignal} from '@angular/core/rxjs-interop'; +import {tuiDirectiveBinding, tuiIsString} from '@taiga-ui/cdk/utils/miscellaneous'; +import {TuiIcon} from '@taiga-ui/core/components/icon'; +import {TuiTextfieldComponent} from '@taiga-ui/core/components/textfield'; +import { + TUI_APPEARANCE_OPTIONS, + TuiWithAppearance, +} from '@taiga-ui/core/directives/appearance'; +import {TuiHintDirective} from '@taiga-ui/core/directives/hint'; +import {TUI_PASSWORD_TEXTS} from '@taiga-ui/kit/tokens'; + +import {TUI_PASSWORD_OPTIONS} from './password.options'; + +@Directive({ + standalone: true, + selector: 'tui-icon[tuiPassword]', + providers: [ + { + provide: TUI_APPEARANCE_OPTIONS, + useValue: {appearance: 'icon'}, + }, + ], + hostDirectives: [ + TuiWithAppearance, + { + directive: TuiHintDirective, + inputs: ['tuiHintAppearance', 'tuiHintContext'], + }, + ], + host: { + style: 'cursor: pointer', + '(click)': 'toggle()', + '[style.pointer-events]': 'disabled ? "none" : null', + '[style.border]': + 'textfield.options.size() === "s" ? "0.25rem solid transparent" : null', + }, +}) +export class TuiPassword { + private readonly options = inject(TUI_PASSWORD_OPTIONS); + private readonly texts = toSignal(inject(TUI_PASSWORD_TEXTS), { + initialValue: ['', ''] as const, + }); + + protected readonly textfield = inject(TuiTextfieldComponent); + protected readonly hidden = signal(true); + protected readonly icon = tuiDirectiveBinding( + TuiIcon, + 'icon', + computed((size = this.textfield.options.size()) => { + const icon = this.hidden() + ? this.options.icons.show + : this.options.icons.hide; + + return tuiIsString(icon) ? icon : icon(size); + }), + ); + + protected readonly hint = tuiDirectiveBinding( + TuiHintDirective, + 'tuiHint', + computed(() => (this.hidden() ? this.texts()[0] : this.texts()[1])), + ); + + protected get disabled(): boolean { + return !this.textfield.el?.nativeElement.value; + } + + protected toggle(): void { + this.hidden.set(!this.hidden()); + this.textfield.el?.nativeElement.setAttribute( + 'type', + this.hidden() ? 'password' : 'text', + ); + } +} diff --git a/projects/kit/directives/password/password.options.ts b/projects/kit/directives/password/password.options.ts new file mode 100644 index 000000000000..8ef6df8e47f4 --- /dev/null +++ b/projects/kit/directives/password/password.options.ts @@ -0,0 +1,18 @@ +import type {TuiStringHandler} from '@taiga-ui/cdk/types'; +import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di'; +import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; + +export interface TuiPasswordOptions { + readonly icons: Readonly<{ + hide: TuiStringHandler | string; + show: TuiStringHandler | string; + }>; +} + +export const [TUI_PASSWORD_OPTIONS, tuiPasswordOptionsProvider] = + tuiCreateOptions({ + icons: { + hide: '@tui.eye-off', + show: '@tui.eye', + }, + }); diff --git a/projects/legacy/components/input-copy/input-copy.component.ts b/projects/legacy/components/input-copy/input-copy.component.ts index f037b8b90d89..cb1f12b57d80 100644 --- a/projects/legacy/components/input-copy/input-copy.component.ts +++ b/projects/legacy/components/input-copy/input-copy.component.ts @@ -28,6 +28,9 @@ import {BehaviorSubject, map, merge, of, switchMap, timer} from 'rxjs'; import type {TuiInputCopyOptions} from './input-copy.options'; import {TUI_INPUT_COPY_OPTIONS} from './input-copy.options'; +/** + * @deprecated use {@link TuiCopy} with {@link TuiTextfield} + */ @Component({ standalone: false, selector: 'tui-input-copy', diff --git a/projects/legacy/components/input-copy/input-copy.directive.ts b/projects/legacy/components/input-copy/input-copy.directive.ts index f75bb77d4b58..30692eccae4c 100644 --- a/projects/legacy/components/input-copy/input-copy.directive.ts +++ b/projects/legacy/components/input-copy/input-copy.directive.ts @@ -4,6 +4,9 @@ import {tuiAsTextfieldHost} from '@taiga-ui/legacy/tokens'; import type {TuiInputCopyComponent} from './input-copy.component'; +/** + * @deprecated use {@link TuiCopy} with {@link TuiTextfield} + */ @Directive({ standalone: false, selector: 'tui-input-copy', diff --git a/projects/legacy/components/input-copy/input-copy.module.ts b/projects/legacy/components/input-copy/input-copy.module.ts index 4b63577a6caa..aa694dadeba7 100644 --- a/projects/legacy/components/input-copy/input-copy.module.ts +++ b/projects/legacy/components/input-copy/input-copy.module.ts @@ -13,6 +13,9 @@ import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus'; import {TuiInputCopyComponent} from './input-copy.component'; import {TuiInputCopyDirective} from './input-copy.directive'; +/** + * @deprecated use {@link TuiCopy} with {@link TuiTextfield} + */ @NgModule({ imports: [ CommonModule, diff --git a/projects/legacy/components/input-copy/input-copy.options.ts b/projects/legacy/components/input-copy/input-copy.options.ts index b9808174c33e..c998f63ccf89 100644 --- a/projects/legacy/components/input-copy/input-copy.options.ts +++ b/projects/legacy/components/input-copy/input-copy.options.ts @@ -5,6 +5,9 @@ import type {TuiHintDirection} from '@taiga-ui/core/directives/hint'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; +/** + * @deprecated use {@link TuiCopy} with {@link TuiTextfield} + */ export interface TuiInputCopyOptions { readonly icon: PolymorpheusContent>; readonly messageAppearance: string; @@ -12,6 +15,9 @@ export interface TuiInputCopyOptions { readonly successMessage: PolymorpheusContent; } +/** + * @deprecated use {@link TuiCopy} with {@link TuiTextfield} + */ export const TUI_INPUT_COPY_DEFAULT_OPTIONS: TuiInputCopyOptions = { successMessage: '', messageDirection: 'bottom-left', @@ -19,8 +25,14 @@ export const TUI_INPUT_COPY_DEFAULT_OPTIONS: TuiInputCopyOptions = { icon: () => '@tui.copy', }; +/** + * @deprecated use {@link TuiCopy} with {@link TuiTextfield} + */ export const TUI_INPUT_COPY_OPTIONS = tuiCreateToken(TUI_INPUT_COPY_DEFAULT_OPTIONS); +/** + * @deprecated use {@link TuiCopy} with {@link TuiTextfield} + */ export function tuiInputCopyOptionsProvider( options: Partial, ): Provider { diff --git a/projects/legacy/components/input-password/input-password.component.ts b/projects/legacy/components/input-password/input-password.component.ts index 40118a7cefe6..2f0b0eabce11 100644 --- a/projects/legacy/components/input-password/input-password.component.ts +++ b/projects/legacy/components/input-password/input-password.component.ts @@ -18,7 +18,7 @@ import {EMPTY, map, startWith} from 'rxjs'; import {TUI_INPUT_PASSWORD_OPTIONS} from './input-password.options'; /** - * @deprecated use {@link TuiInputPassword} instead + * @deprecated use {@link TuiPassword} with {@link TuiTextfield} */ @Component({ standalone: false, diff --git a/projects/legacy/components/input-password/input-password.directive.ts b/projects/legacy/components/input-password/input-password.directive.ts index cf0ce9ca0ebc..4f31c145a1fd 100644 --- a/projects/legacy/components/input-password/input-password.directive.ts +++ b/projects/legacy/components/input-password/input-password.directive.ts @@ -7,7 +7,7 @@ import {tuiAsTextfieldHost} from '@taiga-ui/legacy/tokens'; import type {TuiInputPasswordComponent} from './input-password.component'; /** - * @deprecated use {@link TuiInputPassword} instead + * @deprecated use {@link TuiPassword} with {@link TuiTextfield} */ @Directive({ standalone: false, diff --git a/projects/legacy/components/input-password/input-password.module.ts b/projects/legacy/components/input-password/input-password.module.ts index 804f6fef80eb..60f2b66c8bd7 100644 --- a/projects/legacy/components/input-password/input-password.module.ts +++ b/projects/legacy/components/input-password/input-password.module.ts @@ -15,7 +15,7 @@ import {TuiInputPasswordComponent} from './input-password.component'; import {TuiInputPasswordDirective} from './input-password.directive'; /** - * @deprecated use {@link TuiInputPassword} instead + * @deprecated use {@link TuiPassword} with {@link TuiTextfield} */ @NgModule({ imports: [ diff --git a/projects/legacy/components/input-password/input-password.options.ts b/projects/legacy/components/input-password/input-password.options.ts index bebd7f7bfe94..d8f9e7f02595 100644 --- a/projects/legacy/components/input-password/input-password.options.ts +++ b/projects/legacy/components/input-password/input-password.options.ts @@ -5,7 +5,7 @@ import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; /** - * @deprecated use {@link TuiInputPassword} instead + * @deprecated use {@link TuiPassword} with {@link TuiTextfield} */ export interface TuiInputPasswordOptions { readonly icons: Readonly<{ @@ -15,7 +15,7 @@ export interface TuiInputPasswordOptions { } /** - * @deprecated use {@link TuiInputPassword} instead + * @deprecated use {@link TuiPassword} with {@link TuiTextfield} */ export const TUI_INPUT_PASSWORD_DEFAULT_OPTIONS: TuiInputPasswordOptions = { icons: { @@ -25,14 +25,14 @@ export const TUI_INPUT_PASSWORD_DEFAULT_OPTIONS: TuiInputPasswordOptions = { }; /** - * @deprecated use {@link TuiInputPassword} instead + * @deprecated use {@link TuiPassword} with {@link TuiTextfield} */ export const TUI_INPUT_PASSWORD_OPTIONS = tuiCreateToken( TUI_INPUT_PASSWORD_DEFAULT_OPTIONS, ); /** - * @deprecated use {@link TuiInputPassword} instead + * @deprecated use {@link TuiPassword} with {@link TuiTextfield} */ export function tuiInputPasswordOptionsProvider( options: Partial,