mirror of
https://github.com/bitwarden/browser
synced 2025-12-12 22:33:35 +00:00
92 lines
3.2 KiB
HTML
92 lines
3.2 KiB
HTML
<div
|
|
bitTypography="body2"
|
|
class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-border-text-muted"
|
|
[ngClass]="[
|
|
selectedOption
|
|
? 'tw-bg-text-muted tw-text-contrast tw-gap-1'
|
|
: 'tw-bg-transparent tw-text-muted tw-gap-1.5',
|
|
focusVisibleWithin() ? 'tw-ring-2 tw-ring-primary-500 tw-ring-offset-1' : ''
|
|
]"
|
|
>
|
|
<!-- Primary button -->
|
|
<button
|
|
type="button"
|
|
class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-max-w-full tw-py-1 tw-pl-3 last:tw-pr-3 tw-truncate tw-text-[inherit]"
|
|
[ngClass]="{
|
|
'tw-cursor-not-allowed': disabled
|
|
}"
|
|
[bitMenuTriggerFor]="menu"
|
|
[disabled]="disabled"
|
|
[title]="label"
|
|
#menuTrigger="menuTrigger"
|
|
>
|
|
<i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i>
|
|
<span class="tw-truncate">{{ label }}</span>
|
|
<i
|
|
*ngIf="!selectedOption"
|
|
class="bwi"
|
|
[ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"
|
|
></i>
|
|
</button>
|
|
|
|
<!-- Close button -->
|
|
<button
|
|
*ngIf="selectedOption"
|
|
type="button"
|
|
[attr.aria-label]="'removeItem' | i18n: label"
|
|
[disabled]="disabled"
|
|
class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-p-1 tw-my-1 tw-mr-1 tw-text-[inherit] tw-border-solid tw-border tw-border-text-muted hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-aspect-square tw-flex tw-items-center tw-justify-center tw-h-fit focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
|
|
[ngClass]="{
|
|
'tw-cursor-not-allowed': disabled
|
|
}"
|
|
(click)="clear()"
|
|
>
|
|
<i class="bwi bwi-close tw-text-xs"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<bit-menu #menu>
|
|
<div *ngIf="renderedOptions" class="tw-max-h-80 tw-min-w-52 tw-max-w-80 tw-text-sm">
|
|
<ng-container *ngIf="getParent(renderedOptions) as parent">
|
|
<button
|
|
type="button"
|
|
bitMenuItem
|
|
(click)="viewOption(parent, $event)"
|
|
[title]="parent.label ? ('backTo' | i18n: parent.label) : ('back' | i18n)"
|
|
>
|
|
<i slot="start" class="bwi bwi-angle-left" aria-hidden="true"></i>
|
|
{{ parent.label ? ("backTo" | i18n: parent.label) : ("back" | i18n) }}
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
bitMenuItem
|
|
(click)="selectOption(renderedOptions, $event)"
|
|
[title]="'viewItemsIn' | i18n: renderedOptions.label"
|
|
>
|
|
<i slot="start" class="bwi bwi-list" aria-hidden="true"></i>
|
|
{{ "viewItemsIn" | i18n: renderedOptions.label }}
|
|
</button>
|
|
</ng-container>
|
|
|
|
<button
|
|
type="button"
|
|
bitMenuItem
|
|
*ngFor="let option of renderedOptions.children"
|
|
(click)="option.children?.length ? viewOption(option, $event) : selectOption(option, $event)"
|
|
[disabled]="option.disabled"
|
|
[title]="option.label"
|
|
>
|
|
<i
|
|
*ngIf="option.icon"
|
|
slot="start"
|
|
class="bwi"
|
|
[ngClass]="option.icon"
|
|
aria-hidden="true"
|
|
></i>
|
|
{{ option.label }}
|
|
<i *ngIf="option.children?.length" slot="end" class="bwi bwi-angle-right"></i>
|
|
</button>
|
|
</div>
|
|
</bit-menu>
|