From a21c78df01414cddd18ebcfc3660a746c9c8aa5f Mon Sep 17 00:00:00 2001 From: "a.inkin" Date: Tue, 1 Oct 2024 16:37:54 +0400 Subject: [PATCH 1/3] fix(core): `Hint` fix change detection when changing content programmatically --- .../directives/hint/hint-unstyled.component.ts | 2 +- projects/core/directives/hint/hint.component.ts | 16 +++++++--------- projects/core/directives/hint/hint.directive.ts | 8 ++++---- 3 files changed, 12 insertions(+), 14 deletions(-) diff --git a/projects/core/directives/hint/hint-unstyled.component.ts b/projects/core/directives/hint/hint-unstyled.component.ts index 10bd6b06483a..91f82171375d 100644 --- a/projects/core/directives/hint/hint-unstyled.component.ts +++ b/projects/core/directives/hint/hint-unstyled.component.ts @@ -37,6 +37,6 @@ export class TuiHintUnstyled { const hint = inject(TuiHintDirective); hint.component = new PolymorpheusComponent(TuiHintUnstyledComponent); - hint.content = inject(TemplateRef); + hint.content.set(inject(TemplateRef)); } } diff --git a/projects/core/directives/hint/hint.component.ts b/projects/core/directives/hint/hint.component.ts index 21a5d801d9d6..0a6f03bc4d2c 100644 --- a/projects/core/directives/hint/hint.component.ts +++ b/projects/core/directives/hint/hint.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {EMPTY_CLIENT_RECT} from '@taiga-ui/cdk/constants'; import {TuiHoveredService} from '@taiga-ui/cdk/directives/hovered'; @@ -15,7 +15,6 @@ import { import {TuiPositionService, TuiVisualViewportService} from '@taiga-ui/core/services'; import {TUI_ANIMATIONS_SPEED, TUI_VIEWPORT} from '@taiga-ui/core/tokens'; import {tuiIsObscured, tuiToAnimationOptions} from '@taiga-ui/core/utils'; -import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; import {injectContext, PolymorpheusOutlet} from '@taiga-ui/polymorpheus'; import {map, takeWhile} from 'rxjs'; @@ -41,7 +40,7 @@ export const TUI_HINT_PROVIDERS = [ template: ` `, @@ -69,6 +68,11 @@ export class TuiHintComponent { protected readonly hint = injectContext>>().$implicit; + protected readonly content = + this.hint.component.component === TuiHintUnstyledComponent + ? signal('') + : this.hint.content; + protected readonly appearance = this.hint.appearance || this.hint.el.closest('[tuiTheme]')?.getAttribute('tuiTheme'); @@ -90,12 +94,6 @@ export class TuiHintComponent { .subscribe((hover) => this.hover.toggle(hover)); } - protected get content(): PolymorpheusContent { - return this.hint.component.component === TuiHintUnstyledComponent - ? '' - : this.hint.content; - } - protected onClick(target: HTMLElement): void { if ( (!target.closest('tui-hint') && !this.hint.el.contains(target)) || diff --git a/projects/core/directives/hint/hint.directive.ts b/projects/core/directives/hint/hint.directive.ts index 5531a592336d..74fa9327f6d9 100644 --- a/projects/core/directives/hint/hint.directive.ts +++ b/projects/core/directives/hint/hint.directive.ts @@ -1,4 +1,4 @@ -import type {OnDestroy} from '@angular/core'; +import {type OnDestroy, signal} from '@angular/core'; import {Directive, inject, INJECTOR, Input} from '@angular/core'; import {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone'; import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom'; @@ -50,7 +50,7 @@ export class TuiHintDirective @Input('tuiHintAppearance') public appearance = inject(TUI_HINT_OPTIONS).appearance; - public content: PolymorpheusContent; + public content = signal>(null); public component = inject(PolymorpheusComponent); public readonly el = tuiInjectElement(); public readonly activeZone? = inject(TuiActiveZone, {optional: true}); @@ -58,7 +58,7 @@ export class TuiHintDirective @Input() public set tuiHint(content: PolymorpheusContent) { - this.content = content; + this.content.set(content); if (!content) { this.toggle(false); @@ -74,7 +74,7 @@ export class TuiHintDirective } public toggle(show: boolean): void { - if (show && this.content) { + if (show && this.content()) { this.service.add(this); } else { this.service.remove(this); From a9fe0e7ed9265a1869b65c18233d9c61436d406e Mon Sep 17 00:00:00 2001 From: taiga-family-bot Date: Tue, 1 Oct 2024 12:44:37 +0000 Subject: [PATCH 2/3] chore: apply changes after linting [bot] --- projects/core/directives/hint/hint.directive.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/core/directives/hint/hint.directive.ts b/projects/core/directives/hint/hint.directive.ts index 74fa9327f6d9..70cec341c52a 100644 --- a/projects/core/directives/hint/hint.directive.ts +++ b/projects/core/directives/hint/hint.directive.ts @@ -1,5 +1,5 @@ -import {type OnDestroy, signal} from '@angular/core'; -import {Directive, inject, INJECTOR, Input} from '@angular/core'; +import type {OnDestroy} from '@angular/core'; +import {Directive, inject, INJECTOR, Input, signal} from '@angular/core'; import {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone'; import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom'; import type {TuiRectAccessor, TuiVehicle} from '@taiga-ui/core/classes'; From d6efa12a80901ae778163d52856c12374b21cb0b Mon Sep 17 00:00:00 2001 From: "a.inkin" Date: Wed, 2 Oct 2024 15:40:31 +0400 Subject: [PATCH 3/3] chore: fix --- projects/kit/components/line-clamp/line-clamp-box.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/kit/components/line-clamp/line-clamp-box.component.ts b/projects/kit/components/line-clamp/line-clamp-box.component.ts index 40c26b15c02a..0380618c823a 100644 --- a/projects/kit/components/line-clamp/line-clamp-box.component.ts +++ b/projects/kit/components/line-clamp/line-clamp-box.component.ts @@ -7,7 +7,7 @@ import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus'; standalone: true, imports: [PolymorpheusOutlet, PolymorpheusTemplate], template: ` - {{ text }} + {{ text }} `, styleUrls: ['./line-clamp-box.style.less'], changeDetection: ChangeDetectionStrategy.OnPush,