mirror of
https://github.com/bitwarden/browser
synced 2026-01-31 08:43:54 +00:00
9d82fc7dfc
* add spiner from previous branch * add loading spinner to button * Add spinner to dialog * Add spinner to icon button * add spinner to multi select component * fix spinner positioning * Add mock i18n in stories where needed * round stroke caps. Update classes * fix ts error * fix broken tests * add missing translation keys to stories * Add mising key for layout * Add mising key for nav group * Add mising key for spotlight * Add mising key for product switcher * Add mising key for dialog service * add translation to copy click story
61 lines
1.7 KiB
HTML
61 lines
1.7 KiB
HTML
<ng-select
|
|
[items]="baseItems()"
|
|
[(ngModel)]="selectedItems"
|
|
(ngModelChange)="onChange($event)"
|
|
(blur)="onBlur()"
|
|
bindLabel="listName"
|
|
groupBy="parentGrouping"
|
|
[placeholder]="placeholder()"
|
|
[loading]="loading()"
|
|
[loadingText]="loadingText"
|
|
notFoundText="{{ 'multiSelectNotFound' | i18n }}"
|
|
clearAllText="{{ 'multiSelectClearAll' | i18n }}"
|
|
[multiple]="true"
|
|
[closeOnSelect]="false"
|
|
(close)="onDropdownClosed()"
|
|
[disabled]="disabled"
|
|
[clearSearchOnAdd]="true"
|
|
[labelForId]="labelForId"
|
|
[keyDownFn]="keyDown"
|
|
appendTo="body"
|
|
>
|
|
<ng-template ng-loadingspinner-tmp>
|
|
<bit-spinner></bit-spinner>
|
|
</ng-template>
|
|
<ng-template ng-label-tmp let-item="item" let-clear="clear">
|
|
<button
|
|
type="button"
|
|
bitBadge
|
|
variant="primary"
|
|
class="tw-me-1 disabled:tw-border-0 tw-flex tw-gap-1.5 tw-items-center"
|
|
[disabled]="disabled"
|
|
(click)="clear(item)"
|
|
>
|
|
@if (item.icon != null) {
|
|
<i class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
|
|
}
|
|
<span class="tw-truncate">
|
|
{{ item.labelName }}
|
|
</span>
|
|
<i class="bwi bwi-fw bwi-close bwi-sm" aria-hidden="true"></i>
|
|
</button>
|
|
</ng-template>
|
|
<ng-template ng-option-tmp let-item="item">
|
|
<div class="tw-flex">
|
|
<div class="tw-w-7 tw-flex-none">
|
|
@if (isSelected(item)) {
|
|
<i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
|
|
}
|
|
</div>
|
|
<div class="tw-me-2 tw-flex-initial">
|
|
@if (item.icon != null) {
|
|
<i class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
|
|
}
|
|
</div>
|
|
<div class="tw-flex-1">
|
|
{{ item.listName }}
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</ng-select>
|