Victoria League
2 years ago
committed by
GitHub
16 changed files with 732 additions and 26 deletions
@ -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 @@ |
|||||||
|
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 @@ |
|||||||
|
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 @@ |
|||||||
|
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 @@ |
|||||||
|
export * from "./chip-select.component"; |
||||||
@ -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> |
||||||
@ -1,8 +1,6 @@ |
|||||||
import { TemplateRef } from "@angular/core"; |
|
||||||
|
|
||||||
export interface Option<T> { |
export interface Option<T> { |
||||||
icon?: string; |
icon?: string; |
||||||
value?: T; |
value: T | null; |
||||||
label?: string; |
label?: string; |
||||||
content?: TemplateRef<unknown>; |
disabled?: boolean; |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue