bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 17:23:37 +00:00
Code Issues Releases Wiki Activity

Merge branch 'master' into feature/org-admin-refresh

Browse Source
This commit is contained in:
Jacob Fink
2022-12-19 11:49:42 -05:00
parent 913af652c5 7447fa7809
commit eef827eb19
126 changed files with 14311 additions and 574 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
libs/components/src/checkbox/checkbox.component.ts
View File

@@ -7,18 +7,6 @@ import { BitFormControlAbstraction } from "../form-control";
selector: "input[type=checkbox][bitCheckbox]",
template: "",
providers: [{ provide: BitFormControlAbstraction, useExisting: CheckboxComponent }],
styles: [
`
:host:checked:before {
-webkit-mask-image: url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E');
mask-image: url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E');
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
`,
],
})
export class CheckboxComponent implements BitFormControlAbstraction {
@HostBinding("class")
@@ -63,6 +51,9 @@ export class CheckboxComponent implements BitFormControlAbstraction {
"[&>label:hover]:checked:tw-border-primary-700",
"checked:before:tw-bg-text-contrast",
"checked:before:tw-mask-image-[var(--mask-image)]",
"checked:before:tw-mask-position-[center]",
"checked:before:tw-mask-repeat-[no-repeat]",
"checked:disabled:tw-border-secondary-100",
"checked:disabled:tw-bg-secondary-100",
@@ -72,6 +63,9 @@ export class CheckboxComponent implements BitFormControlAbstraction {
constructor(@Optional() @Self() private ngControl?: NgControl) {}
@HostBinding("style.--mask-image")
protected maskImage = `url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`;
@HostBinding()
@Input()
get disabled() {

11
libs/components/src/dialog/dialog.module.ts
View File

@@ -8,7 +8,7 @@ import { DialogService } from "./dialog.service";
import { DialogComponent } from "./dialog/dialog.component";
import { DialogCloseDirective } from "./directives/dialog-close.directive";
import { DialogTitleContainerDirective } from "./directives/dialog-title-container.directive";
import { SimpleDialogComponent } from "./simple-dialog/simple-dialog.component";
import { IconDirective, SimpleDialogComponent } from "./simple-dialog/simple-dialog.component";
@NgModule({
imports: [SharedModule, IconButtonModule, CdkDialogModule],
@@ -17,8 +17,15 @@ import { SimpleDialogComponent } from "./simple-dialog/simple-dialog.component";
DialogTitleContainerDirective,
DialogComponent,
SimpleDialogComponent,
IconDirective,
],
exports: [
CdkDialogModule,
DialogComponent,
SimpleDialogComponent,
DialogCloseDirective,
IconDirective,
],
exports: [CdkDialogModule, DialogComponent, SimpleDialogComponent, DialogCloseDirective],
providers: [DialogService],
})
export class DialogModule {}

4
libs/components/src/dialog/dialog/dialog.component.ts
View File

@@ -8,8 +8,8 @@ import { Component, HostBinding, Input } from "@angular/core";
export class DialogComponent {
@Input() dialogSize: "small" | "default" | "large" = "default";
private _disablePadding: boolean;
@Input() set disablePadding(value: boolean | string) {
private _disablePadding = false;
@Input() set disablePadding(value: boolean | "") {
this._disablePadding = coerceBooleanProperty(value);
}
get disablePadding() {

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

@@ -12,11 +12,11 @@ import { BitFormControlAbstraction } from "./form-control.abstraction";
export class FormControlComponent {
@Input() label: string;
private _inline: boolean;
private _inline = false;
@Input() get inline() {
return this._inline;
}
set inline(value: boolean | string | null) {
set inline(value: boolean | "") {
this._inline = coerceBooleanProperty(value);
}

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

@@ -39,8 +39,8 @@ const ButtonTemplate: Story<ButtonLinkDirective> = (args: ButtonLinkDirective) =
</div>
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType">
<i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
Chevron Icon Button
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
</button>
</div>
<div class="tw-block tw-p-2">
@@ -65,8 +65,8 @@ const AnchorTemplate: Story<AnchorLinkDirective> = (args: AnchorLinkDirective) =
</div>
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#">
<i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
Chevron Icon Anchor
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
</a>
</div>
<div class="tw-block tw-p-2">

2
libs/components/src/menu/menu-trigger-for.directive.ts
View File

@@ -49,7 +49,7 @@ export class MenuTriggerForDirective implements OnDestroy {
])
.withLockedPosition(true)
.withFlexibleDimensions(false)
.withPush(false),
.withPush(true),
};
private closedEventsSub: Subscription;
private keyDownEventsSub: Subscription;

1
libs/components/src/navigation/nav-group.component.ts
View File

@@ -42,6 +42,7 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
protected toggle(event?: MouseEvent) {
event?.stopPropagation();
this.open = !this.open;
this.openChange.emit(this.open);
}
/**

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

@@ -61,7 +61,7 @@ Avoid using icons to convey information unless paired with meaningful, clear tex
| <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 clipbaord 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-play"></i> | bwi-play | start or play action |
| <i class="bwi bwi-plus"></i> | bwi-plus | new or add option in contained buttons/links |
@@ -88,20 +88,20 @@ Avoid using icons to convey information unless paired with meaningful, clear tex
| Icon | bwi-name | Usage |
| ------------------------------------------ | ---------------------- | ------------------------------------------------------- |
| <i class="bwi bwi-angle-down"></i> | bwi-angle-down | drop down or expandable options |
| <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 | collapsed section that can be expanded |
| <i class="bwi bwi-angle-right"></i> | bwi-angle-right | closed expandable section |
| <i class="bwi bwi-arrow-circle-down"></i> | bwi-arrow-circle-down | table sort order |
| <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 | table sort order |
| <i class="bwi bwi-caret-down"></i> | bwi-caret-down | - |
| <i class="bwi bwi-caret-right"></i> | bwi-caret-right | - |
| <i class="bwi bwi-chevron-up"></i> | bwi-chevron-up | - |
| <i class="bwi bwi-chevron-up"></i> | bwi-chevron-up | open dropdown |
| <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-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 optioins menu vertical; used primarily in tables |
| <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 |
@@ -159,11 +159,11 @@ Avoid using icons to convey information unless paired with meaningful, clear tex
| <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-universal-access"></i> | bwi-universal-access | use for accessiblity related actions |
| <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-wrench"></i> | bwi-wrench | tools or aditional configuration options |
| <i class="bwi bwi-wrench"></i> | bwi-wrench | tools or additional configuration options |
## Platforms and Logos

23
libs/components/tailwind.config.base.js
View File

@@ -1,5 +1,6 @@
/* eslint-disable */
const colors = require("tailwindcss/colors");
const plugin = require("tailwindcss/plugin");
function rgba(color) {
return "rgb(var(" + color + ") / <alpha-value>)";
@@ -94,5 +95,25 @@ module.exports = {
}),
},
},
plugins: [],
plugins: [
plugin(function ({ matchUtilities, theme, addUtilities, addComponents, e, config }) {
matchUtilities(
{
"mask-image": (value) => ({
"-webkit-mask-image": value,
"mask-image": value,
}),
"mask-position": (value) => ({
"-webkit-mask-position": value,
"mask-position": value,
}),
"mask-repeat": (value) => ({
"-webkit-mask-repeat": value,
"mask-repeat": value,
}),
},
{}
);
}),
],
};