mirror of
https://github.com/bitwarden/browser
synced 2026-02-02 17:53:41 +00:00
ccf7bb1753
* migrate chip select to use signals * Have Claude address feedback and create spec file * remove eslint disable comment * fix failing tests * remove unnecessary tests * improved documentation * remove unnecessary test logic * consolidate tests and remove fragile selectors
112 lines
4.2 KiB
HTML
112 lines
4.2 KiB
HTML
<div
|
|
bitTypography="body2"
|
|
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(),
|
|
'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(),
|
|
'tw-ring-2 tw-ring-primary-600 tw-ring-offset-1': focusVisibleWithin(),
|
|
}"
|
|
>
|
|
<!-- Primary button -->
|
|
<button
|
|
type="button"
|
|
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(),
|
|
}"
|
|
[bitMenuTriggerFor]="menu"
|
|
[disabled]="disabled()"
|
|
[title]="label"
|
|
#menuTrigger="menuTrigger"
|
|
(click)="setMenuWidth()"
|
|
#chipSelectButton
|
|
>
|
|
<span class="tw-inline-flex tw-items-center tw-gap-1.5 tw-truncate">
|
|
<i class="bwi !tw-text-[inherit]" [ngClass]="icon" aria-hidden="true"></i>
|
|
<span class="tw-truncate">{{ label }}</span>
|
|
</span>
|
|
@if (!selectedOption) {
|
|
<i
|
|
class="bwi tw-mt-0.5"
|
|
[ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"
|
|
aria-hidden="true"
|
|
></i>
|
|
}
|
|
</button>
|
|
|
|
<!-- Close button -->
|
|
@if (selectedOption) {
|
|
<button
|
|
type="button"
|
|
[attr.aria-label]="'removeItem' | i18n: label"
|
|
[disabled]="disabled()"
|
|
class="tw-bg-transparent hover:tw-bg-hover-contrast 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 tw-flex tw-items-center tw-justify-center focus-visible:tw-ring-2 tw-ring-text-contrast hover:disabled:tw-bg-transparent"
|
|
[ngClass]="{
|
|
'tw-cursor-not-allowed': disabled(),
|
|
}"
|
|
(click)="clear()"
|
|
>
|
|
<i class="bwi bwi-close tw-text-xs" aria-hidden="true"></i>
|
|
</button>
|
|
}
|
|
</div>
|
|
|
|
<bit-menu #menu (closed)="handleMenuClosed()">
|
|
@if (renderedOptions) {
|
|
<div
|
|
class="tw-max-h-80 tw-min-w-32 tw-max-w-80 tw-text-sm"
|
|
[ngStyle]="menuWidth && { width: menuWidth + 'px' }"
|
|
>
|
|
@if (getParent(renderedOptions); as parent) {
|
|
<button
|
|
type="button"
|
|
bitMenuItem
|
|
(click)="viewOption(parent, $event)"
|
|
class="tw-text-[length:inherit]"
|
|
[title]="'backTo' | i18n: parent.label ?? placeholderText()"
|
|
>
|
|
<i slot="start" class="bwi bwi-angle-left" aria-hidden="true"></i>
|
|
{{ "backTo" | i18n: parent.label ?? placeholderText() }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
bitMenuItem
|
|
(click)="selectOption(renderedOptions, $event)"
|
|
[title]="'viewItemsIn' | i18n: renderedOptions.label"
|
|
class="tw-text-[length:inherit]"
|
|
>
|
|
<i slot="start" class="bwi bwi-list" aria-hidden="true"></i>
|
|
{{ "viewItemsIn" | i18n: renderedOptions.label }}
|
|
</button>
|
|
}
|
|
@for (option of renderedOptions.children; track option) {
|
|
<button
|
|
type="button"
|
|
bitMenuItem
|
|
(click)="
|
|
option.children?.length ? viewOption(option, $event) : selectOption(option, $event)
|
|
"
|
|
[disabled]="option.disabled"
|
|
[title]="option.label"
|
|
class="tw-text-[length:inherit]"
|
|
[attr.aria-haspopup]="option.children?.length ? 'menu' : null"
|
|
>
|
|
@if (option.icon) {
|
|
<i slot="start" class="bwi" [ngClass]="option.icon" aria-hidden="true"></i>
|
|
}
|
|
{{ option.label }}
|
|
@if (option.children?.length) {
|
|
<i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
|
|
}
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
</bit-menu>
|