Merge pull request #1635 from zyfra/fix/accordion-hint-change

fix: accordion hint not shown if title changed #1415
zyfra · May 8, 2024 · e5670bf · e5670bf
2 parents 6b2385f + 857b93a
commit e5670bf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/...ents/src/lib/components/accordion/components/accordion-item/accordion-item.component.html b/...ents/src/lib/components/accordion/components/accordion-item/accordion-item.component.html
@@ -20,8 +20,14 @@
  <prizm-icons class="header-icon" [name]="$any(content)" size="16"></prizm-icons>
  </ng-container>
  </ng-container>
- <div class="title" #elem *ngIf="title" [prizmHint]="title" [prizmHintCanShow]="prizmIsTextOverflow(elem)">
- <ng-container *polymorphOutlet="title as content; context: data">
+ <div
+ class="title"
+ #elem
+ *ngIf="_title"
+ [prizmHint]="_title"
+ [prizmHintCanShow]="prizmIsTextOverflow(elem)"
+ >
+ <ng-container *polymorphOutlet="_title as content; context: data">
  {{ content }}
  </ng-container>
  </div>

diff --git a/...onents/src/lib/components/accordion/components/accordion-item/accordion-item.component.ts b/...onents/src/lib/components/accordion/components/accordion-item/accordion-item.component.ts
@@ -46,7 +46,13 @@ import { prizmIconsChevronsDoubleDown } from '@prizm-ui/icons/full/source';
 })
 export class PrizmAccordionItemComponent extends PrizmAbstractTestId implements OnInit, OnDestroy {
  @Input() icon!: PolymorphContent<PrizmAccordionItemData>;
- @Input() title: PolymorphContent<PrizmAccordionItemData> = '';
+ @Input()
+ set title(value: PolymorphContent<PrizmAccordionItemData>) {
+ this._title = value;
+ queueMicrotask(() => this.cdRef.markForCheck());
+ }
+
+ public _title: PolymorphContent<PrizmAccordionItemData> = '';
  @Input() isExpanded = false;
 
  @Input()
@@ -67,7 +73,7 @@ export class PrizmAccordionItemComponent extends PrizmAbstractTestId implements
  get data() {
  return {
  icon: this.icon,
- title: this.title,
+ title: this._title,
  isExpanded: this.isExpanded,
  disabled: this._disabled,
  focused: this.isAccordionFocused,