Victoria League
2 years ago
committed by
GitHub
16 changed files with 732 additions and 26 deletions
@ -0,0 +1,91 @@
@@ -0,0 +1,91 @@
|
||||
<div |
||||
bitTypography="body2" |
||||
class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-border-text-muted" |
||||
[ngClass]="[ |
||||
selectedOption |
||||
? 'tw-bg-text-muted tw-text-contrast tw-gap-1' |
||||
: 'tw-bg-transparent tw-text-muted tw-gap-1.5', |
||||
focusVisibleWithin() ? 'tw-ring-2 tw-ring-primary-500 tw-ring-offset-1' : '' |
||||
]" |
||||
> |
||||
<!-- Primary button --> |
||||
<button |
||||
type="button" |
||||
class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-max-w-full tw-py-1 tw-pl-3 last:tw-pr-3 tw-truncate tw-text-[inherit]" |
||||
[ngClass]="{ |
||||
'tw-cursor-not-allowed': disabled |
||||
}" |
||||
[bitMenuTriggerFor]="menu" |
||||
[disabled]="disabled" |
||||
[title]="label" |
||||
#menuTrigger="menuTrigger" |
||||
> |
||||
<i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i> |
||||
<span class="tw-truncate">{{ label }}</span> |
||||
<i |
||||
*ngIf="!selectedOption" |
||||
class="bwi" |
||||
[ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'" |
||||
></i> |
||||
</button> |
||||
|
||||
<!-- Close button --> |
||||
<button |
||||
*ngIf="selectedOption" |
||||
type="button" |
||||
[attr.aria-label]="'removeItem' | i18n: label" |
||||
[disabled]="disabled" |
||||
class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-p-1 tw-my-1 tw-mr-1 tw-text-[inherit] tw-border-solid tw-border tw-border-text-muted hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-aspect-square tw-flex tw-items-center tw-justify-center tw-h-fit focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent" |
||||
[ngClass]="{ |
||||
'tw-cursor-not-allowed': disabled |
||||
}" |
||||
(click)="clear()" |
||||
> |
||||
<i class="bwi bwi-close tw-text-xs"></i> |
||||
</button> |
||||
</div> |
||||
|
||||
<bit-menu #menu> |
||||
<div *ngIf="renderedOptions" class="tw-max-h-80 tw-min-w-52 tw-max-w-80 tw-text-sm"> |
||||
<ng-container *ngIf="getParent(renderedOptions) as parent"> |
||||
<button |
||||
type="button" |
||||
bitMenuItem |
||||
(click)="viewOption(parent, $event)" |
||||
[title]="parent.label ? ('backTo' | i18n: parent.label) : ('back' | i18n)" |
||||
> |
||||
<i slot="start" class="bwi bwi-angle-left" aria-hidden="true"></i> |
||||
{{ parent.label ? ("backTo" | i18n: parent.label) : ("back" | i18n) }} |
||||
</button> |
||||
|
||||
<button |
||||
type="button" |
||||
bitMenuItem |
||||
(click)="selectOption(renderedOptions, $event)" |
||||
[title]="'viewItemsIn' | i18n: renderedOptions.label" |
||||
> |
||||
<i slot="start" class="bwi bwi-list" aria-hidden="true"></i> |
||||
{{ "viewItemsIn" | i18n: renderedOptions.label }} |
||||
</button> |
||||
</ng-container> |
||||
|
||||
<button |
||||
type="button" |
||||
bitMenuItem |
||||
*ngFor="let option of renderedOptions.children" |
||||
(click)="option.children?.length ? viewOption(option, $event) : selectOption(option, $event)" |
||||
[disabled]="option.disabled" |
||||
[title]="option.label" |
||||
> |
||||
<i |
||||
*ngIf="option.icon" |
||||
slot="start" |
||||
class="bwi" |
||||
[ngClass]="option.icon" |
||||
aria-hidden="true" |
||||
></i> |
||||
{{ option.label }} |
||||
<i *ngIf="option.children?.length" slot="end" class="bwi bwi-angle-right"></i> |
||||
</button> |
||||
</div> |
||||
</bit-menu> |
||||
@ -0,0 +1,197 @@
@@ -0,0 +1,197 @@
|
||||
import { Component, HostListener, Input, booleanAttribute, signal } from "@angular/core"; |
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; |
||||
|
||||
import { ButtonModule } from "../button"; |
||||
import { IconButtonModule } from "../icon-button"; |
||||
import { MenuModule } from "../menu"; |
||||
import { Option } from "../select/option"; |
||||
import { SharedModule } from "../shared"; |
||||
import { TypographyModule } from "../typography"; |
||||
|
||||
/** An option that will be showed in the overlay menu of `ChipSelectComponent` */ |
||||
export type ChipSelectOption<T> = Option<T> & { |
||||
/** The options that will be nested under this option */ |
||||
children?: ChipSelectOption<T>[]; |
||||
}; |
||||
|
||||
@Component({ |
||||
selector: "bit-chip-select", |
||||
templateUrl: "chip-select.component.html", |
||||
standalone: true, |
||||
imports: [SharedModule, ButtonModule, IconButtonModule, MenuModule, TypographyModule], |
||||
providers: [ |
||||
{ |
||||
provide: NG_VALUE_ACCESSOR, |
||||
useExisting: ChipSelectComponent, |
||||
multi: true, |
||||
}, |
||||
], |
||||
}) |
||||
export class ChipSelectComponent<T = unknown> implements ControlValueAccessor { |
||||
/** Text to show when there is no selected option */ |
||||
@Input({ required: true }) placeholderText: string; |
||||
|
||||
/** Icon to show when there is no selected option or the selected option does not have an icon */ |
||||
@Input() placeholderIcon: string; |
||||
|
||||
private _options: ChipSelectOption<T>[]; |
||||
/** The select options to render */ |
||||
@Input({ required: true }) |
||||
get options(): ChipSelectOption<T>[] { |
||||
return this._options; |
||||
} |
||||
set options(value: ChipSelectOption<T>[]) { |
||||
this._options = value; |
||||
this.initializeRootTree(value); |
||||
} |
||||
|
||||
/** Disables the entire chip */ |
||||
@Input({ transform: booleanAttribute }) disabled = false; |
||||
|
||||
/** |
||||
* We have `:focus-within` and `:focus-visible` but no `:focus-visible-within` |
||||
*/ |
||||
protected focusVisibleWithin = signal(false); |
||||
@HostListener("focusin", ["$event.target"]) |
||||
onFocusIn(target: HTMLElement) { |
||||
this.focusVisibleWithin.set(target.matches(".fvw-target:focus-visible")); |
||||
} |
||||
@HostListener("focusout") |
||||
onFocusOut() { |
||||
this.focusVisibleWithin.set(false); |
||||
} |
||||
|
||||
/** Tree constructed from `this.options` */ |
||||
private rootTree: ChipSelectOption<T>; |
||||
|
||||
/** Options that are currently displayed in the menu */ |
||||
protected renderedOptions: ChipSelectOption<T>; |
||||
|
||||
/** The option that is currently selected by the user */ |
||||
protected selectedOption: ChipSelectOption<T>; |
||||
|
||||
/** The label to show in the chip button */ |
||||
protected get label(): string { |
||||
return this.selectedOption?.label || this.placeholderText; |
||||
} |
||||
|
||||
/** The icon to show in the chip button */ |
||||
protected get icon(): string { |
||||
return this.selectedOption?.icon || this.placeholderIcon; |
||||
} |
||||
|
||||
protected selectOption(option: ChipSelectOption<T>, _event: MouseEvent) { |
||||
this.selectedOption = option; |
||||
this.onChange(option); |
||||
} |
||||
|
||||
protected viewOption(option: ChipSelectOption<T>, event: MouseEvent) { |
||||
this.renderedOptions = option; |
||||
|
||||
/** We don't want the menu to close */ |
||||
event.preventDefault(); |
||||
event.stopImmediatePropagation(); |
||||
} |
||||
|
||||
/** Click handler for the X button */ |
||||
protected clear() { |
||||
this.renderedOptions = this.rootTree; |
||||
this.selectedOption = null; |
||||
this.onChange(null); |
||||
} |
||||
|
||||
/** |
||||
* Find a `ChipSelectOption` by its value |
||||
* @param tree the root tree to search |
||||
* @param value the option value to look for |
||||
* @returns the `ChipSelectOption` associated with the provided value, or null if not found |
||||
*/ |
||||
private findOption(tree: ChipSelectOption<T>, value: T): ChipSelectOption<T> | null { |
||||
let result = null; |
||||
if (tree.value === value) { |
||||
return tree; |
||||
} |
||||
|
||||
if (Array.isArray(tree.children) && tree.children.length > 0) { |
||||
tree.children.some((node) => { |
||||
result = this.findOption(node, value); |
||||
return result; |
||||
}); |
||||
} |
||||
return result; |
||||
} |
||||
|
||||
/** Maps child options to their parent, to enable navigating up the tree */ |
||||
private childParentMap = new Map<ChipSelectOption<T>, ChipSelectOption<T>>(); |
||||
|
||||
/** For each descendant in the provided `tree`, update `_parent` to be a refrence to the parent node. This allows us to navigate back in the menu. */ |
||||
private markParents(tree: ChipSelectOption<T>) { |
||||
tree.children?.forEach((child) => { |
||||
this.childParentMap.set(child, tree); |
||||
this.markParents(child); |
||||
}); |
||||
} |
||||
|
||||
protected getParent(option: ChipSelectOption<T>): ChipSelectOption<T> | null { |
||||
return this.childParentMap.get(option); |
||||
} |
||||
|
||||
private initializeRootTree(options: ChipSelectOption<T>[]) { |
||||
/** Since the component is just initialized with an array of options, we need to construct the root tree. */ |
||||
const root: ChipSelectOption<T> = { |
||||
children: options, |
||||
value: null, |
||||
}; |
||||
this.markParents(root); |
||||
this.rootTree = root; |
||||
this.renderedOptions = this.rootTree; |
||||
} |
||||
|
||||
/** Control Value Accessor */ |
||||
|
||||
private notifyOnChange?: (value: T) => void; |
||||
private notifyOnTouched?: () => void; |
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */ |
||||
writeValue(obj: T): void { |
||||
this.selectedOption = this.findOption(this.rootTree, obj); |
||||
|
||||
/** Update the rendered options for next time the menu is opened */ |
||||
this.renderedOptions = this.selectedOption |
||||
? this.getParent(this.selectedOption) |
||||
: this.rootTree; |
||||
} |
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */ |
||||
registerOnChange(fn: (value: T) => void): void { |
||||
this.notifyOnChange = fn; |
||||
} |
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */ |
||||
registerOnTouched(fn: any): void { |
||||
this.notifyOnTouched = fn; |
||||
} |
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */ |
||||
setDisabledState(isDisabled: boolean): void { |
||||
this.disabled = isDisabled; |
||||
} |
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */ |
||||
protected onChange(option: Option<T> | null) { |
||||
if (!this.notifyOnChange) { |
||||
return; |
||||
} |
||||
|
||||
this.notifyOnChange(option?.value); |
||||
} |
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */ |
||||
protected onBlur() { |
||||
if (!this.notifyOnTouched) { |
||||
return; |
||||
} |
||||
|
||||
this.notifyOnTouched(); |
||||
} |
||||
} |
||||
@ -0,0 +1,113 @@
@@ -0,0 +1,113 @@
|
||||
import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs"; |
||||
|
||||
import * as stories from "./chip-select.stories"; |
||||
|
||||
<Meta of={stories} /> |
||||
|
||||
```ts |
||||
import { ChipSelectComponent } from "@bitwarden/components"; |
||||
``` |
||||
|
||||
# Chip Select |
||||
|
||||
`<bit-chip-select>` is a select element that is commonly used to filter items in lists or tables. |
||||
|
||||
<Canvas> |
||||
<Story of={stories.Default} /> |
||||
</Canvas> |
||||
|
||||
## Options |
||||
|
||||
Options are passed to the select via an `options` input. |
||||
|
||||
```ts |
||||
@Component({ |
||||
selector: ` |
||||
<bit-chip-select options=[options]></bit-chip-select> |
||||
`, |
||||
}) |
||||
class MyComponent { |
||||
protected options = [ |
||||
{ |
||||
label: "Foo", |
||||
value: "foo", |
||||
icon: "bwi-folder", |
||||
}, |
||||
{ |
||||
label: "Bar", |
||||
value: "bar", |
||||
icon: "bwi-exclamation-triangle tw-text-danger", |
||||
}, |
||||
{ |
||||
label: "Baz", |
||||
value: "baz", |
||||
disabled: true, |
||||
}, |
||||
]; |
||||
} |
||||
``` |
||||
|
||||
### Option Trees |
||||
|
||||
Nested trees of options are also supported by passing an array of options to `children`. |
||||
|
||||
```ts |
||||
const options = [ |
||||
{ |
||||
label: "Foo0", |
||||
value: "foo0", |
||||
icon: "bwi-folder", |
||||
children: [ |
||||
{ |
||||
label: "Foo1", |
||||
value: "foo1", |
||||
icon: "bwi-folder", |
||||
children: [ |
||||
{ |
||||
label: "Foo2", |
||||
value: "foo2", |
||||
icon: "bwi-folder", |
||||
children: [ |
||||
{ |
||||
label: "Foo3", |
||||
value: "foo3", |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: "Bar", |
||||
value: "bar", |
||||
icon: "bwi-folder", |
||||
}, |
||||
{ |
||||
label: "Baz", |
||||
value: "baz", |
||||
icon: "bwi-folder", |
||||
}, |
||||
]; |
||||
``` |
||||
|
||||
<Canvas> |
||||
<Story of={stories.NestedOptions} /> |
||||
</Canvas> |
||||
|
||||
## Placeholder Content |
||||
|
||||
Placeholder content is shown when no item is selected. |
||||
|
||||
```html |
||||
<bit-chip-select placeholderText="Foo" placeholderIcon="bwi-key"> </bit-chip-select> |
||||
``` |
||||
|
||||
## Reading the current value |
||||
|
||||
The component implements `ControlValueAccessor`, so the current selected value can be read via |
||||
`ngModel` or `[formControlName]`. |
||||
|
||||
```html |
||||
<bit-chip-select [(ngModel)]="..."></bit-chip-select> |
||||
``` |
||||
@ -0,0 +1,160 @@
@@ -0,0 +1,160 @@
|
||||
import { FormsModule } from "@angular/forms"; |
||||
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular"; |
||||
import { getAllByRole, userEvent } from "@storybook/testing-library"; |
||||
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; |
||||
|
||||
import { MenuModule } from "../menu"; |
||||
import { I18nMockService } from "../utils/i18n-mock.service"; |
||||
|
||||
import { ChipSelectComponent } from "./chip-select.component"; |
||||
|
||||
export default { |
||||
title: "Component Library/Chip Select", |
||||
component: ChipSelectComponent, |
||||
decorators: [ |
||||
moduleMetadata({ |
||||
imports: [MenuModule, FormsModule], |
||||
providers: [ |
||||
{ |
||||
provide: I18nService, |
||||
useFactory: () => { |
||||
return new I18nMockService({ |
||||
viewItemsIn: (name) => `View items in ${name}`, |
||||
back: "Back", |
||||
backTo: (name) => `Back to ${name}`, |
||||
removeItem: (name) => `Remove ${name}`, |
||||
}); |
||||
}, |
||||
}, |
||||
], |
||||
}), |
||||
], |
||||
} as Meta; |
||||
|
||||
type Story = StoryObj<ChipSelectComponent & { value: any }>; |
||||
|
||||
export const Default: Story = { |
||||
render: (args) => ({ |
||||
props: { |
||||
...args, |
||||
}, |
||||
template: /* html */ ` |
||||
<bit-chip-select
|
||||
placeholderText="Folder" |
||||
placeholderIcon="bwi-folder" |
||||
[options]="options" |
||||
[ngModel]="value" |
||||
></bit-chip-select> |
||||
`,
|
||||
}), |
||||
args: { |
||||
options: [ |
||||
{ |
||||
label: "Foo", |
||||
value: "foo", |
||||
icon: "bwi-folder", |
||||
}, |
||||
{ |
||||
label: "Bar", |
||||
value: "bar", |
||||
icon: "bwi-exclamation-triangle tw-text-danger", |
||||
}, |
||||
{ |
||||
label: "Baz", |
||||
value: "baz", |
||||
disabled: true, |
||||
}, |
||||
], |
||||
}, |
||||
play: async (context) => { |
||||
const canvas = context.canvasElement; |
||||
const buttons = getAllByRole(canvas, "button"); |
||||
await userEvent.click(buttons[0]); |
||||
}, |
||||
}; |
||||
|
||||
export const NestedOptions: Story = { |
||||
...Default, |
||||
args: { |
||||
options: [ |
||||
{ |
||||
label: "Foo", |
||||
value: "foo", |
||||
icon: "bwi-folder", |
||||
children: [ |
||||
{ |
||||
label: "Foo1", |
||||
value: "foo1", |
||||
icon: "bwi-folder", |
||||
children: [ |
||||
{ |
||||
label: "Foo2", |
||||
value: "foo2", |
||||
icon: "bwi-folder", |
||||
children: [ |
||||
{ |
||||
label: "Foo3", |
||||
value: "foo3", |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: "Bar", |
||||
value: "bar", |
||||
icon: "bwi-folder", |
||||
}, |
||||
{ |
||||
label: "Baz", |
||||
value: "baz", |
||||
icon: "bwi-folder", |
||||
}, |
||||
], |
||||
value: "foo1", |
||||
}, |
||||
}; |
||||
|
||||
export const TextOverflow: Story = { |
||||
...Default, |
||||
args: { |
||||
options: [ |
||||
{ |
||||
label: "Fooooooooooooooooooooooooooooooooooooooooooooo", |
||||
value: "foo", |
||||
}, |
||||
], |
||||
value: "foo", |
||||
}, |
||||
}; |
||||
|
||||
export const Disabled: Story = { |
||||
...Default, |
||||
render: (args) => ({ |
||||
props: { |
||||
...args, |
||||
}, |
||||
template: /* html */ ` |
||||
<bit-chip-select
|
||||
placeholderText="Folder" |
||||
placeholderIcon="bwi-folder" |
||||
[options]="options" |
||||
[ngModel]="value" |
||||
disabled |
||||
></bit-chip-select> |
||||
`,
|
||||
}), |
||||
args: { |
||||
options: [ |
||||
{ |
||||
label: "Foo", |
||||
value: "foo", |
||||
icon: "bwi-folder", |
||||
}, |
||||
], |
||||
value: "foo", |
||||
}, |
||||
}; |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export * from "./chip-select.component"; |
||||
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
<div class="tw-flex tw-w-full tw-justify-between tw-items-center tw-gap-2"> |
||||
<span class="tw-flex tw-gap-2 tw-items-center tw-overflow-hidden"> |
||||
<span #startSlot [ngClass]="{ 'tw-hidden': startSlot.childElementCount === 0 }"> |
||||
<ng-content select="[slot=start]"></ng-content> |
||||
</span> |
||||
<span class="tw-truncate"><ng-content></ng-content></span> |
||||
</span> |
||||
<span #endSlot [ngClass]="{ 'tw-hidden': endSlot.childElementCount === 0 }"> |
||||
<ng-content select="[slot=end]"></ng-content> |
||||
</span> |
||||
</div> |
||||
Loading…
Reference in new issue