bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-13 14:53:33 +00:00
Code Issues Releases Wiki Activity

Merge branch 'main' into feature/passkey-provider

Browse Source
This commit is contained in:
Anders Åberg
2025-04-22 17:10:28 +02:00
committed by GitHub
parent 0fca674b73 d70d81dec6
commit 9d8d5be5f8
1230 changed files with 35787 additions and 32141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
libs/components/src/badge/badge.component.ts
View File

@@ -5,7 +5,14 @@ import { Component, ElementRef, HostBinding, Input } from "@angular/core";
import { FocusableElement } from "../shared/focusable-element";
export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
export type BadgeVariant =
| "primary"
| "secondary"
| "success"
| "danger"
| "warning"
| "info"
| "notification";
const styles: Record<BadgeVariant, string[]> = {
primary: ["tw-bg-primary-100", "tw-border-primary-700", "!tw-text-primary-700"],
@@ -14,6 +21,11 @@ const styles: Record<BadgeVariant, string[]> = {
danger: ["tw-bg-danger-100", "tw-border-danger-700", "!tw-text-danger-700"],
warning: ["tw-bg-warning-100", "tw-border-warning-700", "!tw-text-warning-700"],
info: ["tw-bg-info-100", "tw-border-info-700", "!tw-text-info-700"],
notification: [
"tw-bg-notification-100",
"tw-border-notification-600",
"!tw-text-notification-600",
],
};
const hoverStyles: Record<BadgeVariant, string[]> = {
@@ -27,6 +39,11 @@ const hoverStyles: Record<BadgeVariant, string[]> = {
danger: ["hover:tw-bg-danger-600", "hover:tw-border-danger-600", "hover:!tw-text-contrast"],
warning: ["hover:tw-bg-warning-600", "hover:tw-border-warning-600", "hover:!tw-text-black"],
info: ["hover:tw-bg-info-600", "hover:tw-border-info-600", "hover:!tw-text-black"],
notification: [
"hover:tw-bg-notification-600",
"hover:tw-border-notification-600",
"hover:!tw-text-contrast",
],
};
@Component({

11
libs/components/src/badge/badge.stories.ts
View File

@@ -36,6 +36,7 @@ export const Variants: Story = {
<button class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
<button class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<br/><br/>
<span class="tw-text-main tw-mx-1">Hover</span>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="primary" [truncate]="truncate">Primary</button>
@@ -44,6 +45,7 @@ export const Variants: Story = {
<button class="tw-mx-1 tw-test-hover" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="info" [truncate]="truncate">Info</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<br/><br/>
<span class="tw-text-main tw-mx-1">Focus Visible</span>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="primary" [truncate]="truncate">Primary</button>
@@ -52,6 +54,7 @@ export const Variants: Story = {
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="info" [truncate]="truncate">Info</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<br/><br/>
<span class="tw-text-main tw-mx-1">Disabled</span>
<button disabled class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
@@ -60,6 +63,7 @@ export const Variants: Story = {
<button disabled class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button disabled class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button disabled class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
<button disabled class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
`,
}),
};
@@ -112,6 +116,13 @@ export const Info: Story = {
},
};
export const Notification: Story = {
...Primary,
args: {
variant: "notification",
},
};
export const Truncated: Story = {
...Primary,
args: {

21
libs/components/src/button/button.mdx
View File

@@ -73,6 +73,27 @@ where the width is fixed and the text wraps to 2 lines if exceeding the button
<Canvas of={stories.Block} />
## With Icon
To ensure consistent icon spacing, the icon should have .5rem spacing on left or right(depending on
placement).
> NOTE: Use logical css properties to ensure LTR/RTL support.
**If icon is placed before button label**
```html
<i class="bwi bwi-plus tw-me-2"></i>
```
**If icon is placed after button label**
```html
<i class="bwi bwi-plus tw-ms-2"></i>
```
<Canvas of={stories.WithIcon} />
## Accessibility
Please follow these guidelines to ensure that buttons are accessible to all users.

22
libs/components/src/button/button.stories.ts
View File

@@ -120,3 +120,25 @@ export const Block: Story = {
block: true,
},
};
export const WithIcon: Story = {
render: (args) => ({
props: args,
template: `
<span class="tw-flex tw-gap-8">
<div>
<button bitButton [buttonType]="buttonType" [block]="block">
<i class="bwi bwi-plus tw-me-2"></i>
Button label
</button>
</div>
<div>
<button bitButton [buttonType]="buttonType" [block]="block">
Button label
<i class="bwi bwi-plus tw-ms-2"></i>
</button>
</div>
</span>
`,
}),
};

1
libs/components/src/dialog/index.ts
View File

@@ -1,3 +1,4 @@
export * from "./dialog.module";
export * from "./simple-dialog/types";
export * from "./dialog.service";
export { DialogConfig, DIALOG_DATA, DialogRef } from "@angular/cdk/dialog";

4
libs/components/src/form-control/form-control.component.html
View File

@@ -14,7 +14,9 @@
}
</span>
@if (!hasError) {
<ng-content select="bit-hint"></ng-content>
<span class="[&_bit-hint]:tw-mt-0 tw-leading-none">
<ng-content select="bit-hint"></ng-content>
</span>
}
</span>
</label>

14
libs/components/src/icon/icon.component.ts
View File

@@ -1,19 +1,23 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { Component, HostBinding, Input } from "@angular/core";
import { Component, Input } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { Icon, isIcon } from "./icon";
@Component({
selector: "bit-icon",
host: {
"[attr.aria-hidden]": "!ariaLabel",
"[attr.aria-label]": "ariaLabel",
"[innerHtml]": "innerHtml",
},
template: ``,
standalone: true,
})
export class BitIconComponent {
innerHtml: SafeHtml | null = null;
@Input() set icon(icon: Icon) {
if (!isIcon(icon)) {
this.innerHtml = "";
return;
}
@@ -21,7 +25,7 @@ export class BitIconComponent {
this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
}
@HostBinding() innerHtml: SafeHtml;
@Input() ariaLabel: string | undefined = undefined;
constructor(private domSanitizer: DomSanitizer) {}
}

10
libs/components/src/icon/icon.mdx
View File

@@ -98,9 +98,19 @@ import * as stories from "./icon.stories";
```
- **HTML:**
> NOTE: SVG icons are treated as decorative by default and will be `aria-hidden` unless an
> `ariaLabel` is explicitly provided to the `<bit-icon>` component
```html
<bit-icon [icon]="Icons.ExampleIcon"></bit-icon>
```
With `ariaLabel`
```html
<bit-icon [icon]="Icons.ExampleIcon" [ariaLabel]="Your custom label text here"></bit-icon>
```
8. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client
which supports multiple style modes.

4
libs/components/src/icon/icon.stories.ts
View File

@@ -26,5 +26,9 @@ export const Default: Story = {
mapping: GenericIcons,
control: { type: "select" },
},
ariaLabel: {
control: "text",
description: "the text used by a screen reader to describe the icon",
},
},
};

2
libs/components/src/menu/menu.component.spec.ts
View File

@@ -66,7 +66,7 @@ describe("Menu", () => {
@Component({
selector: "test-app",
template: `
<button type="button" [bitMenuTriggerFor]="testMenu" class="testclass">Open menu</button>
<button type="button" [bitMenuTriggerFor]="testMenu">Open menu</button>
<bit-menu #testMenu>
<a id="item1" bitMenuItem>Item 1</a>

2
libs/components/src/radio-button/radio-button.component.ts
View File

@@ -16,7 +16,7 @@ let nextId = 0;
export class RadioButtonComponent {
@HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
@HostBinding("class") get classList() {
return [this.block ? "tw-block" : "tw-inline-block", "tw-mb-1"];
return [this.block ? "tw-block" : "tw-inline-block", "tw-mb-1", "[&_bit-hint]:tw-mt-0"];
}
@Input() value: unknown;

202
libs/components/src/stories/icons.mdx
View File

@@ -14,11 +14,8 @@ or an options menu icon.
| Icon | bwi-name | Usage |
| -------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <i class="bwi bwi-ban"></i> | bwi-ban | option or feature not available. Example: send maximum access count was reached |
| <i class="bwi bwi-check"></i> | bwi-check | confirmation action (Example: "confirm member"), successful confirmation (toast or callout), or shows currently selected option in a menu. Use with success color variable if applicable. |
| <i class="bwi bwi-error"></i> | bwi-error | error; used in form field error states and error toasts, banners, and callouts. Do not use as a close or clear icon. Use with danger color variable. |
| <i class="bwi bwi-expired"></i> | bwi-expired | - |
| <i class="bwi bwi-exclamation-circle"></i> | bwi-exclamation-circle | deprecated error icon; use bwi-error |
| <i class="bwi bwi-exclamation-triangle"></i> | bwi-exclamation-triangle | warning; used in warning callouts, banners, and toasts. Use with warning color variable. |
| <i class="bwi bwi-info-circle"></i> | bwi-info-circle | information; used in info callouts, banners, and toasts. Use with info color variable. |
| <i class="bwi bwi-question-circle"></i> | bwi-question-circle | link to help documentation or hover tooltip |
@@ -26,34 +23,31 @@ or an options menu icon.
## Bitwarden Objects
| Icon | bwi-name | Usage |
| ------------------------------------- | ----------------- | --------------------------------------------------- |
| <i class="bwi bwi-authenticator"></i> | bwi-authenticator | authenticator app |
| <i class="bwi bwi-business"></i> | bwi-business | organization or vault for Free, Teams or Enterprise |
| <i class="bwi bwi-collection"></i> | bwi-collection | collection |
| <i class="bwi bwi-credit-card"></i> | bwi-credit-card | card item type |
| <i class="bwi bwi-family"></i> | bwi-family | family vault or organization |
| <i class="bwi bwi-folder"></i> | bwi-folder | folder |
| <i class="bwi bwi-globe"></i> | bwi-globe | login item type |
| <i class="bwi bwi-id-card"></i> | bwi-id-card | identity item type |
| <i class="bwi bwi-send"></i> | bwi-send | send action or feature |
| <i class="bwi bwi-send-f"></i> | bwi-send-f | - |
| <i class="bwi bwi-sticky-note"></i> | bwi-sticky-note | secure note item type |
| <i class="bwi bwi-users"></i> | bwi-users | user group |
| <i class="bwi bwi-vault"></i> | bwi-vault | general vault |
| <i class="bwi bwi-vault-f"></i> | bwi-vault-f | general vault |
| Icon | bwi-name | Usage |
| ----------------------------------- | --------------- | --------------------------------------------------- |
| <i class="bwi bwi-business"></i> | bwi-business | organization or vault for Free, Teams or Enterprise |
| <i class="bwi bwi-collection"></i> | bwi-collection | collection |
| <i class="bwi bwi-credit-card"></i> | bwi-credit-card | card item type |
| <i class="bwi bwi-family"></i> | bwi-family | family vault or organization |
| <i class="bwi bwi-folder"></i> | bwi-folder | folder |
| <i class="bwi bwi-globe"></i> | bwi-globe | login item type |
| <i class="bwi bwi-id-card"></i> | bwi-id-card | identity item type |
| <i class="bwi bwi-send"></i> | bwi-send | send action or feature |
| <i class="bwi bwi-send-f"></i> | bwi-send-f | - |
| <i class="bwi bwi-sticky-note"></i> | bwi-sticky-note | secure note item type |
| <i class="bwi bwi-users"></i> | bwi-users | user group |
| <i class="bwi bwi-vault"></i> | bwi-vault | general vault |
| <i class="bwi bwi-vault-f"></i> | bwi-vault-f | general vault |
## Actions
| Icon | bwi-name | Usage |
| -------------------------------------- | ------------------ | -------------------------------------------- |
| <i class="bwi bwi-check-circle"></i> | bwi-check-circle | check if password has been exposed |
| <i class="bwi bwi-check-square"></i> | bwi-check-square | select all action |
| <i class="bwi bwi-clone"></i> | bwi-clone | copy to clipboard action |
| <i class="bwi bwi-close"></i> | bwi-close | close action |
| <i class="bwi bwi-cog"></i> | bwi-cog | settings |
| <i class="bwi bwi-cog-f"></i> | bwi-cog-f | settings |
| <i class="bwi bwi-cogs"></i> | bwi-cogs | deprecated; do not use in app. |
| <i class="bwi bwi-download"></i> | bwi-download | download or export |
| <i class="bwi bwi-envelope"></i> | bwi-envelope | action related to emailing a user |
| <i class="bwi bwi-external-link"></i> | bwi-external-link | open in new window or popout |
@@ -66,141 +60,81 @@ or an options menu icon.
| <i class="bwi bwi-lock-encrypted"></i> | bwi-lock-encrypted | - |
| <i class="bwi bwi-lock-f"></i> | bwi-lock-f | - |
| <i class="bwi bwi-minus-circle"></i> | bwi-minus-circle | remove action |
| <i class="bwi bwi-minus-square"></i> | bwi-minus-square | unselect all action |
| <i class="bwi bwi-paste"></i> | bwi-paste | paste from clipboard action |
| <i class="bwi bwi-pencil-square"></i> | bwi-pencil-square | edit action |
| <i class="bwi bwi-popout"></i> | bwi-popout | popout action |
| <i class="bwi bwi-play"></i> | bwi-play | start or play action |
| <i class="bwi bwi-plus"></i> | bwi-plus | new or add option in contained buttons/links |
| <i class="bwi bwi-plus-f"></i> | bwi-plus-f | new or add option in contained buttons/links |
| <i class="bwi bwi-plus-circle"></i> | bwi-plus-circle | new or add option in text buttons/links |
| <i class="bwi bwi-plus-square"></i> | bwi-plus-square | - |
| <i class="bwi bwi-refresh"></i> | bwi-refresh | "re"-action; such as refresh or regenerate |
| <i class="bwi bwi-refresh-tab"></i> | bwi-refresh-tab | - |
| <i class="bwi bwi-save"></i> | bwi-save | alternate download action |
| <i class="bwi bwi-save-changes"></i> | bwi-save-changes | save changes action |
| <i class="bwi bwi-search"></i> | bwi-search | search action |
| <i class="bwi bwi-share"></i> | bwi-share | - |
| <i class="bwi bwi-share-arrow"></i> | bwi-share-arrow | - |
| <i class="bwi bwi-share-square"></i> | bwi-share-square | avoid using; use external-link instead |
| <i class="bwi bwi-sign-in"></i> | bwi-sign-in | sign-in action |
| <i class="bwi bwi-sign-out"></i> | bwi-sign-out | sign-out action |
| <i class="bwi bwi-star"></i> | bwi-star | favorite action |
| <i class="bwi bwi-star-f"></i> | bwi-star-f | favorited / unfavorite action |
| <i class="bwi bwi-stop"></i> | bwi-stop | stop action |
| <i class="bwi bwi-trash"></i> | bwi-trash | delete action or trash area |
| <i class="bwi bwi-undo"></i> | bwi-undo | restore action |
| <i class="bwi bwi-unlock"></i> | bwi-unlock | unlocked |
## Directional and Menu Indicators
| Icon | bwi-name | Usage |
| ------------------------------------------ | ---------------------- | ------------------------------------------------------- |
| <i class="bwi bwi-angle-down"></i> | bwi-angle-down | closed dropdown or open expandable section |
| <i class="bwi bwi-angle-left"></i> | bwi-angle-left | - |
| <i class="bwi bwi-angle-right"></i> | bwi-angle-right | closed expandable section |
| <i class="bwi bwi-angle-up"></i> | bwi-angle-up | open dropdown |
| <i class="bwi bwi-arrow-circle-down"></i> | bwi-arrow-circle-down | - |
| <i class="bwi bwi-arrow-circle-left"></i> | bwi-arrow-circle-left | - |
| <i class="bwi bwi-arrow-circle-right"></i> | bwi-arrow-circle-right | - |
| <i class="bwi bwi-arrow-circle-up"></i> | bwi-arrow-circle-up | - |
| <i class="bwi bwi-back"></i> | bwi-back | back arrow |
| <i class="bwi bwi-caret-down"></i> | bwi-caret-down | table sort order |
| <i class="bwi bwi-caret-right"></i> | bwi-caret-right | - |
| <i class="bwi bwi-caret-up"></i> | bwi-caret-up | table sort order |
| <i class="bwi bwi-dbl-angle-left"></i> | bwi-dbl-angle-left | - |
| <i class="bwi bwi-dbl-angle-right"></i> | bwi-dbl-angle-right | - |
| <i class="bwi bwi-down-solid"></i> | bwi-down-solid | table sort order |
| <i class="bwi bwi-ellipsis-h"></i> | bwi-ellipsis-h | more options menu horizontal; used in mobile list items |
| <i class="bwi bwi-ellipsis-v"></i> | bwi-ellipsis-v | more options menu vertical; used primarily in tables |
| <i class="bwi bwi-filter"></i> | bwi-filter | Product switcher |
| <i class="bwi bwi-hamburger"></i> | bwi-hamburger | navigation indicator |
| <i class="bwi bwi-list"></i> | bwi-list | toggle list/grid view |
| <i class="bwi bwi-list-alt"></i> | bwi-list-alt | view item action in extension |
| <i class="bwi bwi-long-arrow-right"></i> | bwi-long-arrow-right | - |
| <i class="bwi bwi-numbered-list"></i> | bwi-numbered-list | toggle numbered list view |
| <i class="bwi bwi-up-down-btn"></i> | bwi-up-down-btn | table sort order |
| <i class="bwi bwi-up-solid"></i> | bwi-up-solid | table sort order |
| Icon | bwi-name | Usage |
| ------------------------------------- | ----------------- | ------------------------------------------------------- |
| <i class="bwi bwi-angle-down"></i> | bwi-angle-down | closed dropdown or open expandable section |
| <i class="bwi bwi-angle-left"></i> | bwi-angle-left | - |
| <i class="bwi bwi-angle-right"></i> | bwi-angle-right | closed expandable section |
| <i class="bwi bwi-angle-up"></i> | bwi-angle-up | open dropdown |
| <i class="bwi bwi-back"></i> | bwi-back | back arrow |
| <i class="bwi bwi-down-solid"></i> | bwi-down-solid | table sort order |
| <i class="bwi bwi-ellipsis-h"></i> | bwi-ellipsis-h | more options menu horizontal; used in mobile list items |
| <i class="bwi bwi-ellipsis-v"></i> | bwi-ellipsis-v | more options menu vertical; used primarily in tables |
| <i class="bwi bwi-filter"></i> | bwi-filter | Product switcher |
| <i class="bwi bwi-hamburger"></i> | bwi-hamburger | navigation indicator |
| <i class="bwi bwi-list"></i> | bwi-list | toggle list/grid view |
| <i class="bwi bwi-list-alt"></i> | bwi-list-alt | view item action in extension |
| <i class="bwi bwi-numbered-list"></i> | bwi-numbered-list | toggle numbered list view |
| <i class="bwi bwi-up-down-btn"></i> | bwi-up-down-btn | table sort order |
| <i class="bwi bwi-up-solid"></i> | bwi-up-solid | table sort order |
## Misc Objects
| Icon | bwi-name | Usage |
| ----------------------------------------- | --------------------- | ---------------------------------------------- |
| <i class="bwi bwi-bank"></i> | bwi-bank | - |
| <i class="bwi bwi-billing"></i> | bwi-billing | billing options |
| <i class="bwi bwi-bitcoin"></i> | bwi-bitcoin | crypto |
| <i class="bwi bwi-bolt"></i> | bwi-bolt | deprecated "danger" icon |
| <i class="bwi bwi-bookmark"></i> | bwi-bookmark | bookmark or save related actions |
| <i class="bwi bwi-browser"></i> | bwi-browser | web browser |
| <i class="bwi bwi-browser-alt"></i> | bwi-browser-alt | web browser |
| <i class="bwi bwi-bug"></i> | bwi-bug | test or debug action |
| <i class="bwi bwi-camera"></i> | bwi-camera | actions related to camera use |
| <i class="bwi bwi-chain-broken"></i> | bwi-chain-broken | unlink action |
| <i class="bwi bwi-chat"></i> | bwi-chat | - |
| <i class="bwi bwi-cli"></i> | bwi-cli | cli client or code |
| <i class="bwi bwi-clock"></i> | bwi-clock | use for time based actions or views |
| <i class="bwi bwi-community"></i> | bwi-community | - |
| <i class="bwi bwi-cut"></i> | bwi-cut | cut or omit actions |
| <i class="bwi bwi-dashboard"></i> | bwi-dashboard | statuses or dashboard views |
| <i class="bwi bwi-desktop"></i> | bwi-desktop | desktop client |
| <i class="bwi bwi-desktop-alt"></i> | bwi-desktop-alt | desktop client |
| <i class="bwi bwi-dollar"></i> | bwi-dollar | account credit |
| <i class="bwi bwi-file"></i> | bwi-file | file related objects or actions |
| <i class="bwi bwi-file-pdf"></i> | bwi-file-pdf | PDF related object or actions |
| <i class="bwi bwi-file-text"></i> | bwi-file-text | text related objects or actions |
| <i class="bwi bwi-fingerprint"></i> | bwi-fingerprint | - |
| <i class="bwi bwi-bw-folder-open-f1"></i> | bwi-bw-folder-open-f1 | - |
| <i class="bwi bwi-folder-closed-f"></i> | bwi-folder-closed-f | - |
| <i class="bwi bwi-folder-open"></i> | bwi-folder-open | - |
| <i class="bwi bwi-frown"></i> | bwi-frown | - |
| <i class="bwi bwi-hashtag"></i> | bwi-hashtag | link to specific id |
| <i class="bwi bwi-icon-1"></i> | bwi-icon-1 | - |
| <i class="bwi bwi-icon-2"></i> | bwi-icon-2 | - |
| <i class="bwi bwi-icon-3"></i> | bwi-icon-3 | - |
| <i class="bwi bwi-icon-4"></i> | bwi-icon-4 | - |
| <i class="bwi bwi-icon-5"></i> | bwi-icon-5 | - |
| <i class="bwi bwi-icon-6"></i> | bwi-icon-6 | - |
| <i class="bwi bwi-icon-7"></i> | bwi-icon-7 | - |
| <i class="bwi bwi-icon-8"></i> | bwi-icon-8 | - |
| <i class="bwi bwi-icon-9"></i> | bwi-icon-9 | - |
| <i class="bwi bwi-insurance"></i> | bwi-insurance | - |
| <i class="bwi bwi-key"></i> | bwi-key | key or password related objects or actions |
| <i class="bwi bwi-learning"></i> | bwi-learning | learning center |
| <i class="bwi bwi-lightbulb"></i> | bwi-lightbulb | - |
| <i class="bwi bwi-link"></i> | bwi-link | link action |
| <i class="bwi bwi-mobile"></i> | bwi-mobile | mobile client |
| <i class="bwi bwi-mobile-alt"></i> | bwi-mobile-alt | mobile client |
| <i class="bwi bwi-money"></i> | bwi-money | - |
| <i class="bwi bwi-msp"></i> | bwi-msp | - |
| <i class="bwi bwi-paperclip"></i> | bwi-paperclip | attachments |
| <i class="bwi bwi-passkey"></i> | bwi-passkey | passkey |
| <i class="bwi bwi-pencil"></i> | bwi-pencil | editing |
| <i class="bwi bwi-provider"></i> | bwi-provider | relates to provider or provider portal |
| <i class="bwi bwi-providers"></i> | bwi-providers | - |
| <i class="bwi bwi-puzzle"></i> | bwi-puzzle | - |
| <i class="bwi bwi-rocket"></i> | bwi-rocket | - |
| <i class="bwi bwi-rss"></i> | bwi-rss | - |
| <i class="bwi bwi-search-book"></i> | bwi-search-book | - |
| <i class="bwi bwi-server"></i> | bwi-server | - |
| <i class="bwi bwi-shield"></i> | bwi-shield | - |
| <i class="bwi bwi-sitemap"></i> | bwi-sitemap | - |
| <i class="bwi bwi-sliders"></i> | bwi-sliders | reporting or filtering |
| <i class="bwi bwi-software-license"></i> | bwi-software-license | - |
| <i class="bwi bwi-square"></i> | bwi-square | - |
| <i class="bwi bwi-tag"></i> | bwi-tag | labels |
| <i class="bwi bwi-thumb-tack"></i> | bwi-thumb-tack | - |
| <i class="bwi bwi-thumbs-up"></i> | bwi-thumbs-up | - |
| <i class="bwi bwi-totp-codes"></i> | bwi-totp-codes | - |
| <i class="bwi bwi-totp-codes-alt"></i> | bwi-totp-codes-alt | - |
| <i class="bwi bwi-totp-codes-alt2"></i> | bwi-totp-codes-alt2 | - |
| <i class="bwi bwi-universal-access"></i> | bwi-universal-access | use for accessibility related actions |
| <i class="bwi bwi-user"></i> | bwi-user | relates to current user or organization member |
| <i class="bwi bwi-user-circle"></i> | bwi-user-circle | - |
| <i class="bwi bwi-user-f"></i> | bwi-user-f | - |
| <i class="bwi bwi-user-monitor"></i> | bwi-user-monitor | - |
| <i class="bwi bwi-wand"></i> | bwi-wand | - |
| <i class="bwi bwi-wireless"></i> | bwi-wireless | - |
| <i class="bwi bwi-wrench"></i> | bwi-wrench | tools or additional configuration options |
| Icon | bwi-name | Usage |
| ---------------------------------------- | -------------------- | ---------------------------------------------- |
| <i class="bwi bwi-billing"></i> | bwi-billing | billing options |
| <i class="bwi bwi-bitcoin"></i> | bwi-bitcoin | crypto |
| <i class="bwi bwi-browser"></i> | bwi-browser | web browser |
| <i class="bwi bwi-browser-alt"></i> | bwi-browser-alt | web browser |
| <i class="bwi bwi-bug"></i> | bwi-bug | test or debug action |
| <i class="bwi bwi-camera"></i> | bwi-camera | actions related to camera use |
| <i class="bwi bwi-cli"></i> | bwi-cli | cli client or code |
| <i class="bwi bwi-clock"></i> | bwi-clock | use for time based actions or views |
| <i class="bwi bwi-community"></i> | bwi-community | - |
| <i class="bwi bwi-desktop"></i> | bwi-desktop | desktop client |
| <i class="bwi bwi-dollar"></i> | bwi-dollar | account credit |
| <i class="bwi bwi-file"></i> | bwi-file | file related objects or actions |
| <i class="bwi bwi-file-text"></i> | bwi-file-text | text related objects or actions |
| <i class="bwi bwi-hashtag"></i> | bwi-hashtag | link to specific id |
| <i class="bwi bwi-key"></i> | bwi-key | key or password related objects or actions |
| <i class="bwi bwi-link"></i> | bwi-link | link action |
| <i class="bwi bwi-mobile"></i> | bwi-mobile | mobile client |
| <i class="bwi bwi-msp"></i> | bwi-msp | - |
| <i class="bwi bwi-paperclip"></i> | bwi-paperclip | attachments |
| <i class="bwi bwi-passkey"></i> | bwi-passkey | passkey |
| <i class="bwi bwi-pencil"></i> | bwi-pencil | editing |
| <i class="bwi bwi-provider"></i> | bwi-provider | relates to provider or provider portal |
| <i class="bwi bwi-puzzle"></i> | bwi-puzzle | - |
| <i class="bwi bwi-shield"></i> | bwi-shield | - |
| <i class="bwi bwi-sliders"></i> | bwi-sliders | reporting or filtering |
| <i class="bwi bwi-tag"></i> | bwi-tag | labels |
| <i class="bwi bwi-totp-codes"></i> | bwi-totp-codes | - |
| <i class="bwi bwi-totp-codes-alt"></i> | bwi-totp-codes-alt | - |
| <i class="bwi bwi-totp-codes-alt2"></i> | bwi-totp-codes-alt2 | - |
| <i class="bwi bwi-universal-access"></i> | bwi-universal-access | use for accessibility related actions |
| <i class="bwi bwi-user"></i> | bwi-user | relates to current user or organization member |
| <i class="bwi bwi-user-monitor"></i> | bwi-user-monitor | - |
| <i class="bwi bwi-wireless"></i> | bwi-wireless | - |
| <i class="bwi bwi-wrench"></i> | bwi-wrench | tools or additional configuration options |
## Platforms and Logos

1
libs/components/src/tw-theme.css
View File

@@ -1,4 +1,5 @@
@import "@angular/cdk/a11y-prebuilt.css";
@import "@angular/cdk/text-field-prebuilt.css";
@import "./reset.css";
@import "./popover/popover.component.css";
@import "./toast/toast.tokens.css";