mirror of
https://github.com/bitwarden/browser
synced 2026-02-10 05:30:01 +00:00
ChipMultiSelectComponent
This commit is contained in:
Justin Baur
@@ -0,0 +1,110 @@
|
||||
<div
|
||||
bitTypography="body2"
|
||||
class="tw-inline-flex tw-items-center tw-rounded-full tw-w-full tw-border-solid tw-border tw-gap-1.5 tw-group/chip-select"
|
||||
[ngClass]="{
|
||||
'tw-bg-text-muted hover:tw-bg-secondary-700 tw-text-contrast hover:!tw-border-secondary-700':
|
||||
anySelected && !disabled,
|
||||
'tw-bg-transparent hover:tw-border-secondary-700 !tw-text-muted hover:tw-bg-secondary-100':
|
||||
!anySelected && !disabled,
|
||||
'tw-bg-secondary-300 tw-text-muted tw-border-transparent': disabled,
|
||||
'tw-border-text-muted': !disabled,
|
||||
'tw-ring-2 tw-ring-primary-600 tw-ring-offset-1': focusVisibleWithin(),
|
||||
}"
|
||||
>
|
||||
<!-- Primary button -->
|
||||
<button
|
||||
type="button"
|
||||
class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-justify-between tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-w-full tw-py-1 tw-pl-3 last:tw-pr-3 [&:not(:last-child)]:tw-pr-0 tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
|
||||
[ngClass]="{
|
||||
'tw-cursor-not-allowed': disabled,
|
||||
'group-hover/chip-select:tw-text-secondary-700': !anySelected && !disabled,
|
||||
}"
|
||||
[bitMenuTriggerFor]="menu"
|
||||
[disabled]="disabled"
|
||||
[title]="label"
|
||||
#menuTrigger="menuTrigger"
|
||||
(click)="setMenuWidth()"
|
||||
#chipSelectButton
|
||||
>
|
||||
<span class="tw-inline-flex tw-items-center tw-gap-1.5 tw-truncate">
|
||||
<i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i>
|
||||
<span class="tw-truncate">{{ label }}</span>
|
||||
</span>
|
||||
@if (!anySelected) {
|
||||
<i
|
||||
class="bwi tw-mt-0.5"
|
||||
[ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"
|
||||
></i>
|
||||
}
|
||||
</button>
|
||||
|
||||
<!-- Close button -->
|
||||
@if (anySelected) {
|
||||
<button
|
||||
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-py-0.5 tw-px-1 tw-mr-1 tw-text-[color:inherit] tw-text-[length:inherit] tw-border-solid tw-border tw-border-transparent hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-flex tw-items-center tw-justify-center 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 (closed)="handleMenuClosed()">
|
||||
@if (renderedOptions) {
|
||||
<div
|
||||
class="tw-max-h-80 tw-min-w-32 tw-max-w-80 tw-text-sm"
|
||||
[ngStyle]="menuWidth && { width: menuWidth + 'px' }"
|
||||
>
|
||||
@if (getParent(renderedOptions); as parent) {
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
(click)="viewOption(parent, $event)"
|
||||
class="tw-text-[length:inherit]"
|
||||
[title]="'backTo' | i18n: parent.label ?? placeholderText"
|
||||
>
|
||||
<i slot="start" class="bwi bwi-angle-left" aria-hidden="true"></i>
|
||||
{{ "backTo" | i18n: parent.label ?? placeholderText }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
(click)="selectOption(renderedOptions, $event)"
|
||||
[title]="'viewItemsIn' | i18n: renderedOptions.label"
|
||||
class="tw-text-[length:inherit]"
|
||||
>
|
||||
<i slot="start" class="bwi bwi-list" aria-hidden="true"></i>
|
||||
{{ "viewItemsIn" | i18n: renderedOptions.label }}
|
||||
</button>
|
||||
}
|
||||
@for (option of renderedOptions.children; track option) {
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
(click)="
|
||||
option.children?.length ? viewOption(option, $event) : selectOption(option, $event)
|
||||
"
|
||||
[disabled]="option.disabled"
|
||||
[title]="option.label"
|
||||
class="tw-text-[length:inherit]"
|
||||
[attr.aria-haspopup]="option.children?.length ? 'menu' : null"
|
||||
>
|
||||
@let optionIcon = getOptionIcon(option);
|
||||
@if (optionIcon != null) {
|
||||
<i slot="start" class="bwi" [ngClass]="optionIcon" aria-hidden="true"></i>
|
||||
}
|
||||
{{ option.label }}
|
||||
@if (option.children?.length) {
|
||||
<i slot="end" class="bwi bwi-angle-right"></i>
|
||||
}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</bit-menu>
|
||||
@@ -0,0 +1,328 @@
|
||||
import {
|
||||
AfterViewInit,
|
||||
booleanAttribute,
|
||||
Component,
|
||||
DestroyRef,
|
||||
ElementRef,
|
||||
HostBinding,
|
||||
HostListener,
|
||||
inject,
|
||||
Input,
|
||||
QueryList,
|
||||
signal,
|
||||
ViewChild,
|
||||
ViewChildren,
|
||||
} from "@angular/core";
|
||||
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
|
||||
|
||||
import { compareValues } from "@bitwarden/common/platform/misc/compare-values";
|
||||
|
||||
import { ButtonModule } from "../button";
|
||||
import { ChipSelectOption } from "../chip-select";
|
||||
import { IconButtonModule } from "../icon-button";
|
||||
import { MenuComponent, MenuItemDirective, MenuModule } from "../menu";
|
||||
import { Option } from "../select/option";
|
||||
import { SharedModule } from "../shared";
|
||||
import { TypographyModule } from "../typography";
|
||||
|
||||
@Component({
|
||||
selector: "bit-chip-multi-select",
|
||||
templateUrl: "chip-multi-select.component.html",
|
||||
standalone: true,
|
||||
imports: [SharedModule, ButtonModule, IconButtonModule, MenuModule, TypographyModule],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: ChipMultiSelectComponent,
|
||||
multi: true,
|
||||
},
|
||||
],
|
||||
})
|
||||
export class ChipMultiSelectComponent<T = unknown> implements ControlValueAccessor, AfterViewInit {
|
||||
@ViewChild(MenuComponent) menu: MenuComponent;
|
||||
@ViewChildren(MenuItemDirective) menuItems: QueryList<MenuItemDirective>;
|
||||
@ViewChild("chipSelectButton") chipSelectButton: ElementRef<HTMLButtonElement>;
|
||||
|
||||
/** 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;
|
||||
|
||||
/** Chip will stretch to full width of its container */
|
||||
@Input({ transform: booleanAttribute }) fullWidth?: boolean;
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
|
||||
@HostBinding("class")
|
||||
get classList() {
|
||||
return ["tw-inline-block", this.fullWidth ? "tw-w-full" : "tw-max-w-52"];
|
||||
}
|
||||
|
||||
private destroyRef = inject(DestroyRef);
|
||||
|
||||
/** 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 selectedOptions: ChipSelectOption<T>[];
|
||||
|
||||
protected get anySelected(): boolean {
|
||||
return this.selectedOptions != null && this.selectedOptions.length !== 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* The initial calculated width of the menu when it opens, which is used to
|
||||
* keep the width consistent as the user navigates through submenus
|
||||
*/
|
||||
protected menuWidth: number | null = null;
|
||||
|
||||
/** The label to show in the chip button */
|
||||
protected get label(): string {
|
||||
if (this.selectedOptions == null || this.selectedOptions.length === 0) {
|
||||
return this.placeholderText;
|
||||
}
|
||||
|
||||
return this.selectedOptions[0]?.label || this.placeholderText;
|
||||
}
|
||||
|
||||
/** The icon to show in the chip button */
|
||||
protected get icon(): string {
|
||||
if (this.selectedOptions == null || this.selectedOptions.length === 0) {
|
||||
return this.placeholderIcon;
|
||||
}
|
||||
|
||||
if (this.selectedOptions.length === 1) {
|
||||
return this.selectedOptions[0].icon ?? this.placeholderIcon;
|
||||
}
|
||||
|
||||
const amount = Math.min(this.selectedOptions.length, 10);
|
||||
|
||||
if (amount === 10) {
|
||||
// TODO: Should we have a 9+ icon?
|
||||
return "bwi-icon-9";
|
||||
}
|
||||
|
||||
// The value should be between 2 and 9, which we have icons for.
|
||||
return `bwi-icon-${amount}`;
|
||||
}
|
||||
|
||||
protected getOptionIcon(option: ChipSelectOption<T>) {
|
||||
if (this.isSelected(option)) {
|
||||
return "bwi-check";
|
||||
}
|
||||
|
||||
return option.icon;
|
||||
}
|
||||
|
||||
private isSelected(option: ChipSelectOption<T>) {
|
||||
if (this.selectedOptions == null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return this.selectedOptions.some((o) => compareValues(o.value, option.value));
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the rendered options based on whether or not an option is already selected, so that the correct
|
||||
* submenu displays.
|
||||
*/
|
||||
protected setOrResetRenderedOptions(): void {
|
||||
// TODO: Huh?
|
||||
this.renderedOptions = this.rootTree;
|
||||
// this.renderedOptions = this.selectedOption
|
||||
// ? this.selectedOption.children?.length > 0
|
||||
// ? this.selectedOption
|
||||
// : this.getParent(this.selectedOption)
|
||||
// : this.rootTree;
|
||||
}
|
||||
|
||||
protected handleMenuClosed(): void {
|
||||
this.setOrResetRenderedOptions();
|
||||
// reset menu width so that it can be recalculated upon open
|
||||
this.menuWidth = null;
|
||||
}
|
||||
|
||||
protected selectOption(option: ChipSelectOption<T>, _event: MouseEvent) {
|
||||
this.selectedOptions ??= [];
|
||||
// Check that it isn't already selected?
|
||||
const existingIndex = this.selectedOptions.findIndex((o) =>
|
||||
compareValues(o.value, option.value),
|
||||
);
|
||||
|
||||
if (existingIndex === -1) {
|
||||
// Select it
|
||||
this.selectedOptions.push(option);
|
||||
} else {
|
||||
// De-select it
|
||||
this.selectedOptions.splice(existingIndex, 1);
|
||||
}
|
||||
|
||||
this.onChange(this.selectedOptions);
|
||||
}
|
||||
|
||||
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.selectedOptions = 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 findOptions(tree: ChipSelectOption<T>, values: T[] | null): ChipSelectOption<T>[] | null {
|
||||
if (values == null) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const results: ChipSelectOption<T>[] = [];
|
||||
for (const value of values) {
|
||||
if (tree.value !== null && compareValues(tree.value, value)) {
|
||||
results.push(tree);
|
||||
break;
|
||||
}
|
||||
|
||||
if (Array.isArray(tree.children) && tree.children.length > 0) {
|
||||
for (const child of tree.children) {
|
||||
results.push(...this.findOptions(child, [value]));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
/** 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;
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
/**
|
||||
* menuItems will change when the user navigates into or out of a submenu. when that happens, we want to
|
||||
* direct their focus to the first item in the new menu
|
||||
*/
|
||||
this.menuItems.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
||||
this.menu.keyManager.setFirstItemActive();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the width of the menu based on whichever is larger, the chip select width or the width of
|
||||
* the initially rendered options
|
||||
*/
|
||||
protected setMenuWidth() {
|
||||
const chipWidth = this.chipSelectButton.nativeElement.getBoundingClientRect().width;
|
||||
|
||||
const firstMenuItemWidth =
|
||||
this.menu.menuItems.first.elementRef.nativeElement.getBoundingClientRect().width;
|
||||
|
||||
this.menuWidth = Math.max(chipWidth, firstMenuItemWidth);
|
||||
}
|
||||
|
||||
/** Control Value Accessor */
|
||||
|
||||
private notifyOnChange?: (value: T[]) => void;
|
||||
private notifyOnTouched?: () => void;
|
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */
|
||||
writeValue(obj: T[]): void {
|
||||
this.selectedOptions = this.findOptions(this.rootTree, obj);
|
||||
this.setOrResetRenderedOptions();
|
||||
}
|
||||
|
||||
/** 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?.map((o) => o.value) ?? null);
|
||||
}
|
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */
|
||||
protected onBlur() {
|
||||
if (!this.notifyOnTouched) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.notifyOnTouched();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,250 @@
|
||||
import { FormsModule } from "@angular/forms";
|
||||
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
|
||||
import { getAllByRole, userEvent } from "@storybook/test";
|
||||
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
|
||||
import { MenuModule } from "../menu";
|
||||
import { I18nMockService } from "../utils/i18n-mock.service";
|
||||
|
||||
import { ChipMultiSelectComponent } from "./chip-multi-select.component";
|
||||
|
||||
export default {
|
||||
title: "Component Library/Chip Multi Select",
|
||||
component: ChipMultiSelectComponent,
|
||||
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}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
parameters: {
|
||||
design: {
|
||||
type: "figma",
|
||||
url: "https://www.figma.com/design/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=16329-29548&t=b5tDKylm5sWm2yKo-4",
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
type Story = StoryObj<ChipMultiSelectComponent & { value: any }>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: (args) => ({
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
template: /* html */ `
|
||||
<bit-chip-multi-select
|
||||
placeholderText="Folder"
|
||||
placeholderIcon="bwi-folder"
|
||||
[options]="options"
|
||||
></bit-chip-multi-select>
|
||||
<bit-chip-multi-select
|
||||
placeholderText="Folder"
|
||||
placeholderIcon="bwi-folder"
|
||||
[options]="options"
|
||||
[ngModel]="value"
|
||||
></bit-chip-multi-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,
|
||||
},
|
||||
],
|
||||
value: ["foo"],
|
||||
},
|
||||
};
|
||||
|
||||
export const MenuOpen: Story = {
|
||||
render: (args) => ({
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
template: /* html */ `
|
||||
<bit-chip-multi-select
|
||||
placeholderText="Folder"
|
||||
placeholderIcon="bwi-folder"
|
||||
[options]="options"
|
||||
[ngModel]="value"
|
||||
></bit-chip-multi-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 FullWidth: Story = {
|
||||
render: (args) => ({
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
template: /* html */ `
|
||||
<div class="tw-w-40">
|
||||
<bit-chip-multi-select
|
||||
placeholderText="Folder"
|
||||
placeholderIcon="bwi-folder"
|
||||
[options]="options"
|
||||
[ngModel]="value"
|
||||
fullWidth
|
||||
></bit-chip-multi-select>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const NestedOptions: Story = {
|
||||
...Default,
|
||||
args: {
|
||||
options: [
|
||||
{
|
||||
label: "Foo",
|
||||
value: "foo",
|
||||
icon: "bwi-folder",
|
||||
children: [
|
||||
{
|
||||
label: "Foo1 very long name of folder but even longer than you thought",
|
||||
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 = {
|
||||
render: (args) => ({
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
template: /* html */ `
|
||||
<bit-chip-multi-select
|
||||
placeholderText="Folder"
|
||||
placeholderIcon="bwi-folder"
|
||||
[options]="options"
|
||||
disabled
|
||||
></bit-chip-multi-select>
|
||||
<bit-chip-multi-select
|
||||
placeholderText="Folder"
|
||||
placeholderIcon="bwi-folder"
|
||||
[options]="options"
|
||||
[ngModel]="value"
|
||||
disabled
|
||||
></bit-chip-multi-select>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
options: [
|
||||
{
|
||||
label: "Foo",
|
||||
value: "foo",
|
||||
icon: "bwi-folder",
|
||||
},
|
||||
],
|
||||
value: ["foo"],
|
||||
},
|
||||
};
|
||||
1
libs/components/src/chip-multi-select/index.ts
Normal file
1
libs/components/src/chip-multi-select/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from "./chip-multi-select.component";
|
||||
Reference in New Issue
Block a user