Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-05 18:47:52 +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" [checked]="selected"
(change)="onInputInteraction()" (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> <span class="tw-line-clamp-2 tw-break-words" #labelContent>
<ng-content></ng-content> <ng-content></ng-content>
</span> </span>

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

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