bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-12 06:23:38 +00:00
Code Issues Releases Wiki Activity

chip-select fixes

Browse Source
This commit is contained in:
Vicki League
2025-06-25 15:24:40 -04:00
parent 796905bc36
commit bf3dffe7ea
2 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
libs/components/src/chip-select/chip-select.component.html
View File

@@ -3,11 +3,11 @@
class="tw-inline-flex tw-items-center tw-rounded-full tw-w-full tw-border-solid tw-border tw-gap-1.5 tw-group/chip-select"
[ngClass]="{
'tw-bg-text-muted hover:tw-bg-secondary-700 tw-text-contrast hover:!tw-border-secondary-700':
selectedOption && !disabled(),
selectedOption && !disabled,
'tw-bg-transparent hover:tw-border-secondary-700 !tw-text-muted hover:tw-bg-secondary-100':
!selectedOption && !disabled(),
'tw-bg-secondary-300 tw-text-muted tw-border-transparent': disabled(),
'tw-border-text-muted': !disabled(),
!selectedOption && !disabled,
'tw-bg-secondary-300 tw-text-muted tw-border-transparent': disabled,
'tw-border-text-muted': !disabled,
'tw-ring-2 tw-ring-primary-600 tw-ring-offset-1': focusVisibleWithin(),
}"
>
@@ -17,11 +17,11 @@
class="tw-inline-flex tw-gap-1.5 tw-items-center tw-justify-between tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-w-full tw-py-1 tw-ps-3 last:tw-pe-3 [&:not(:last-child)]:tw-pe-0 tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
data-fvw-target
[ngClass]="{
'tw-cursor-not-allowed': disabled(),
'group-hover/chip-select:tw-text-secondary-700': !selectedOption && !disabled(),
'tw-cursor-not-allowed': disabled,
'group-hover/chip-select:tw-text-secondary-700': !selectedOption && !disabled,
}"
[bitMenuTriggerFor]="menu"
[disabled]="disabled()"
[disabled]="disabled"
[title]="label"
#menuTrigger="menuTrigger"
(click)="setMenuWidth()"
@@ -45,10 +45,10 @@
<button
type="button"
[attr.aria-label]="'removeItem' | i18n: label"
[disabled]="disabled()"
[disabled]="disabled"
class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-py-0.5 tw-px-1 tw-me-1 tw-text-[color:inherit] tw-text-[length:inherit] tw-border-solid tw-border tw-border-transparent hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-flex tw-items-center tw-justify-center focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
[ngClass]="{
'tw-cursor-not-allowed': disabled(),
'tw-cursor-not-allowed': disabled,
}"
(click)="clear()"
>

7
libs/components/src/chip-select/chip-select.component.ts
View File

@@ -15,7 +15,6 @@ import {
inject,
signal,
input,
model,
} from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
@@ -76,7 +75,9 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, A
}
/** Disables the entire chip */
disabled = model(false);
// TODO: Skipped for signal migration because:
// Your application code writes to the input. This prevents migration.
@Input({ transform: booleanAttribute }) disabled = false;
/** Chip will stretch to full width of its container */
readonly fullWidth = input<boolean, unknown>(undefined, { transform: booleanAttribute });
@@ -257,7 +258,7 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, A
/** Implemented as part of NG_VALUE_ACCESSOR */
setDisabledState(isDisabled: boolean): void {
this.disabled.set(isDisabled);
this.disabled = isDisabled;
}
/** Implemented as part of NG_VALUE_ACCESSOR */