mirror of
https://github.com/bitwarden/browser
synced 2026-02-05 11:13:44 +00:00
232dd89814
* Add arrow icons to vault carousel component * Fix carousel next button and update tests * Add new unit tests for back/next buttons * Copy 'next' string from web/src/locales to browser/src/_locales * Fix layout / spacing on carousel arrows * Remove 'next' string from non-en locales * Fix lint errors on carousel tests * Add I18n provider to storybook for carousel * Fix spacing for carousel button row * Update carousel arrows to use small icon variant * Add label attr to carousel buttons * Add next string to locales for Desktop
48 lines
1.5 KiB
HTML
48 lines
1.5 KiB
HTML
<section
|
|
aria-roledescription="carousel"
|
|
[attr.aria-label]="label"
|
|
[ngStyle]="{ minHeight: minHeight ?? undefined }"
|
|
class="tw-flex tw-flex-col"
|
|
#container
|
|
>
|
|
<vault-carousel-content [content]="slides.get(selectedIndex)?.content"></vault-carousel-content>
|
|
<div class="tw-w-full tw-flex tw-justify-between tw-mt-auto tw-px-4 tw-pb-2 tw-pt-4">
|
|
<button
|
|
type="button"
|
|
bitIconButton="bwi-angle-left"
|
|
class="tw-size-6 tw-p-0 tw-flex tw-items-center tw-justify-center"
|
|
size="small"
|
|
[attr.label]="'back' | i18n"
|
|
(click)="prevSlide()"
|
|
[disabled]="selectedIndex <= 0"
|
|
appA11yTitle="{{ 'back' | i18n }}"
|
|
></button>
|
|
<div
|
|
class="tw-w-full tw-flex tw-gap-2 tw-justify-center tw-mt-auto"
|
|
role="tablist"
|
|
(keydown)="keyManager.onKeydown($event)"
|
|
#carouselButtonWrapper
|
|
>
|
|
<vault-carousel-button
|
|
*ngFor="let slide of slides; let i = index"
|
|
[slide]="slide"
|
|
[isActive]="i === selectedIndex"
|
|
(onClick)="selectSlide(i)"
|
|
></vault-carousel-button>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
bitIconButton="bwi-angle-right"
|
|
class="tw-size-6 tw-p-0 tw-flex tw-items-center tw-justify-center"
|
|
[attr.label]="'next' | i18n"
|
|
size="small"
|
|
(click)="nextSlide()"
|
|
[disabled]="selectedIndex >= slides.length - 1"
|
|
appA11yTitle="{{ 'next' | i18n }}"
|
|
></button>
|
|
</div>
|
|
<div class="tw-absolute tw-invisible" #tempSlideContainer *ngIf="minHeight === null">
|
|
<ng-template cdkPortalOutlet></ng-template>
|
|
</div>
|
|
</section>
|