mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 16:53:34 +00:00
a4303fac59
* setup popover component template and basic story * add a11y features * add multiple positions for the popover * add stories for open right and left * prevent panel from hugging edges of screen * fix typo * add popover arrow depending on position * add buttons to stories * add figma preview * move toward directive approach * add all positions * add header input * add close functionality * make standalone component * add a11y import * add all stories * add story controls/args * add module of standalone components * gracefully handle text wrap and align close button to top for longer headings * update semantic html * add story for open state * use bitIconButton * adjust styles * add public close method * setup walkthrough mode * add walkthrough mode * revert to before walkthrough service added * add triggerRef to stories * change property name * add Escape key to close events * add initially open state * add docs * minor reformatting --------- Co-authored-by: William Martin <contact@willmartian.com>
27 lines
964 B
HTML
27 lines
964 B
HTML
<ng-template>
|
|
<section cdkTrapFocus cdkTrapFocusAutoCapture class="tw-relative" role="dialog" aria-modal="true">
|
|
<div class="tw-overflow-hidden tw-rounded-md tw-border tw-border-solid tw-border-secondary-300">
|
|
<div
|
|
class="tw-relative tw-z-20 tw-w-72 tw-break-words tw-bg-background tw-pb-4 tw-pt-2 tw-text-main"
|
|
>
|
|
<div class="tw-mb-1 tw-mr-2 tw-flex tw-items-start tw-justify-between tw-gap-4 tw-pl-4">
|
|
<h2 class="tw-mb-0 tw-mt-1 tw-text-base tw-font-semibold">
|
|
{{ title }}
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
bitIconButton="bwi-close"
|
|
[attr.title]="'close' | i18n"
|
|
[attr.aria-label]="'close' | i18n"
|
|
(click)="closed.emit()"
|
|
></button>
|
|
</div>
|
|
<div class="tw-px-4">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bit-popover-arrow"></div>
|
|
</section>
|
|
</ng-template>
|