bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-07 20:24:01 +00:00
Code Issues Releases Wiki Activity

finish migrating form-field module

Browse Source
This commit is contained in:
Vicki League
2025-06-23 16:33:58 -04:00
parent 5caf751499
commit 167281cc48
6 changed files with 26 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
libs/components/src/form-field/form-field.component.html
View File

@@ -85,8 +85,8 @@
<div
class="tw-gap-1 tw-flex tw-min-h-[1.85rem] tw-border-0 tw-border-solid"
[ngClass]="{
'tw-border-secondary-300/50 tw-border-b tw-pb-[2px]': !disableReadOnlyBorder,
'tw-border-transparent tw-pb-[3px]': disableReadOnlyBorder,
'tw-border-secondary-300/50 tw-border-b tw-pb-[2px]': !disableReadOnlyBorder(),
'tw-border-transparent tw-pb-[3px]': disableReadOnlyBorder(),
}"
>
<div

7
libs/components/src/form-field/form-field.component.ts
View File

@@ -9,10 +9,10 @@ import {
ElementRef,
HostBinding,
HostListener,
Input,
ViewChild,
signal,
input,
model,
} from "@angular/core";
import { I18nPipe } from "@bitwarden/ui-common";
@@ -42,10 +42,7 @@ export class BitFormFieldComponent implements AfterContentChecked {
readonly disableMargin = input(false, { transform: booleanAttribute });
/** If `true`, remove the bottom border for `readonly` inputs */
// TODO: Skipped for migration because:
// Your application code writes to the input. This prevents migration.
@Input({ transform: booleanAttribute })
disableReadOnlyBorder = false;
disableReadOnlyBorder = model(false);
protected prefixHasChildren = signal(false);
protected suffixHasChildren = signal(false);

21
libs/components/src/form-field/password-input-toggle.directive.ts
View File

@@ -5,7 +5,7 @@ import {
Host,
HostBinding,
HostListener,
Input,
model,
OnChanges,
Output,
} from "@angular/core";
@@ -18,14 +18,15 @@ import { BitFormFieldComponent } from "./form-field.component";
@Directive({
selector: "[bitPasswordInputToggle]",
host: {
"[attr.aria-pressed]": "toggled()",
},
})
export class BitPasswordInputToggleDirective implements AfterContentInit, OnChanges {
/**
* Whether the input is toggled to show the password.
*/
// TODO: Skipped for migration because:
// Your application code writes to the input. This prevents migration.
@HostBinding("attr.aria-pressed") @Input() toggled = false;
toggled = model(false);
@Output() toggledChange = new EventEmitter<boolean>();
@HostBinding("attr.title") title = this.i18nService.t("toggleVisibility");
@@ -35,8 +36,8 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
* Click handler to toggle the state of the input type.
*/
@HostListener("click") onClick() {
this.toggled = !this.toggled;
this.toggledChange.emit(this.toggled);
this.toggled.update((toggled) => !toggled);
this.toggledChange.emit(this.toggled());
this.update();
}
@@ -48,7 +49,7 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
) {}
get icon() {
return this.toggled ? "bwi-eye-slash" : "bwi-eye";
return this.toggled() ? "bwi-eye-slash" : "bwi-eye";
}
ngOnChanges(): void {
@@ -57,7 +58,7 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
ngAfterContentInit(): void {
if (this.formField.input?.type) {
this.toggled = this.formField.input.type !== "password";
this.toggled.set(this.formField.input.type !== "password");
}
this.button.icon = this.icon;
}
@@ -65,8 +66,8 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
private update() {
this.button.icon = this.icon;
if (this.formField.input?.type != null) {
this.formField.input.type = this.toggled ? "text" : "password";
this.formField.input.spellcheck = this.toggled ? false : undefined;
this.formField.input.type = this.toggled() ? "text" : "password";
this.formField.input.spellcheck = this.toggled() ? false : undefined;
}
}
}

11
libs/components/src/form-field/prefix.directive.ts
View File

@@ -1,16 +1,15 @@
import { Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
import { Directive, input, OnInit, Optional } from "@angular/core";
import { BitIconButtonComponent } from "../icon-button/icon-button.component";
@Directive({
selector: "[bitPrefix]",
host: {
"[attr.class]": "classList()",
},
})
export class BitPrefixDirective implements OnInit {
// TODO: Skipped for migration because:
// Accessor inputs cannot be migrated as they are too complex.
@HostBinding("class") @Input() get classList() {
return ["tw-text-muted"];
}
readonly classList = input(["tw-text-muted"]);
constructor(@Optional() private iconButtonComponent: BitIconButtonComponent) {}

11
libs/components/src/form-field/suffix.directive.ts
View File

@@ -1,16 +1,15 @@
import { Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
import { Directive, input, OnInit, Optional } from "@angular/core";
import { BitIconButtonComponent } from "../icon-button/icon-button.component";
@Directive({
selector: "[bitSuffix]",
host: {
"[attr.class]": "classList()",
},
})
export class BitSuffixDirective implements OnInit {
// TODO: Skipped for migration because:
// Accessor inputs cannot be migrated as they are too complex.
@HostBinding("class") @Input() get classList() {
return ["tw-text-muted"];
}
readonly classList = input(["tw-text-muted"]);
constructor(@Optional() private iconButtonComponent: BitIconButtonComponent) {}

2
libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.ts
View File

@@ -19,7 +19,7 @@ export class ReadOnlyCipherCardComponent implements AfterViewInit {
// Delay model update until next change detection cycle
setTimeout(() => {
if (this.formFields) {
this.formFields.last.disableReadOnlyBorder = true;
this.formFields.last.disableReadOnlyBorder.set(true);
}
});
}