SM-1146: Tab link component simplifications

This commit is contained in:
Maciej Zieniuk 2024-06-24 10:09:24 +02:00
parent 7fe1200310
commit df122148da
No known key found for this signature in database
GPG Key ID: 9CACE59F1272ACD9
2 changed files with 8 additions and 10 deletions

View File

@ -9,12 +9,10 @@
[attr.aria-disabled]="disabled"
ariaCurrentWhenActive="page"
role="link"
[class]="'tw-flex' + (haveSlotEnd ? ' hover:tw-no-underline' : '')"
[class]="'tw-flex' + (haveEndSlot ? ' hover:tw-no-underline' : '')"
>
<ng-container>
<div [class]="'tw-inline-flex' + (haveSlotEnd ? ' hover:tw-underline' : '')">
<ng-content></ng-content>
</div>
</ng-container>
<ng-content #slotEnd select="[slot=end]"></ng-content>
<div [class]="'tw-inline-flex' + (haveEndSlot ? ' hover:tw-underline' : '')">
<ng-content></ng-content>
</div>
<ng-content #endSlot select="[slot=end]"></ng-content>
</a>

View File

@ -24,7 +24,7 @@ export class TabLinkComponent implements FocusableOption, AfterViewInit, OnDestr
@ViewChild(TabListItemDirective) tabItem: TabListItemDirective;
@ViewChild("rla") routerLinkActive: RouterLinkActive;
@ViewChild("slotEnd") slotEnd: ElementRef<HTMLElement>;
@ViewChild("endSlot") endSlot: ElementRef<HTMLElement>;
readonly routerLinkMatchOptions: IsActiveMatchOptions = {
queryParams: "ignored",
@ -46,8 +46,8 @@ export class TabLinkComponent implements FocusableOption, AfterViewInit, OnDestr
return this.routerLinkActive?.isActive ?? false;
}
get haveSlotEnd() {
return this.slotEnd?.nativeElement?.innerHTML !== "" ?? false;
get haveEndSlot() {
return this.endSlot?.nativeElement?.childElementCount !== 0;
}
constructor(private _tabNavBar: TabNavBarComponent) {}