Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-03 18:28:13 +01:00
Code Issues Projects Releases Wiki Activity

[CL-513] Fix lifecycle order for toggle title attribute (#12152)

Browse Source
This commit is contained in:
Victoria League 2024-11-26 11:10:43 -05:00 committed by GitHub
parent c52eeb1cb3
commit eac5e63f2f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/src/toggle-group/toggle.component.html
View File

@ -6,7 +6,7 @@
[checked]="selected"
(change)="onInputInteraction()"
/>
<label for="bit-toggle-{{ id }}" [ngClass]="labelClasses" [title]="labelTextContent">
<label for="bit-toggle-{{ id }}" [ngClass]="labelClasses" [title]="labelTitle()">
<span class="tw-line-clamp-2 tw-break-words" #labelContent>
<ng-content></ng-content>
</span>

15
libs/components/src/toggle-group/toggle.component.ts
View File

@ -1,5 +1,6 @@
import {
AfterContentChecked,
AfterViewInit,
Component,
ElementRef,
HostBinding,
@ -17,7 +18,7 @@ let nextId = 0;
templateUrl: "./toggle.component.html",
preserveWhitespaces: false,
})
export class ToggleComponent<TValue> implements AfterContentChecked {
export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewInit {
id = nextId++;
@Input() value?: TValue;
@ -30,6 +31,7 @@ export class ToggleComponent<TValue> implements AfterContentChecked {
@HostBinding("class") classList = ["tw-group/toggle", "tw-flex", "tw-min-w-16"];
protected bitBadgeContainerHasChidlren = signal(false);
protected labelTitle = signal<string>(null);
get name() {
return this.groupComponent.name;
@ -43,10 +45,6 @@ export class ToggleComponent<TValue> implements AfterContentChecked {
return ["tw-peer/toggle-input", "tw-appearance-none", "tw-outline-none"];
}
get labelTextContent() {
return this.labelContent?.nativeElement.innerText ?? null;
}
get labelClasses() {
return [
"tw-h-full",
@ -102,4 +100,11 @@ export class ToggleComponent<TValue> implements AfterContentChecked {
this.bitBadgeContainer?.nativeElement.childElementCount > 0,
);
}
ngAfterViewInit() {
const labelText = this.labelContent?.nativeElement.innerText;
if (labelText) {
this.labelTitle.set(labelText);
}
}
}