rename, add menu, update styling
This commit is contained in:
parent
11a60c83bc
commit
f7514ec804
|
@ -1,15 +1,16 @@
|
||||||
import { BooleanInput, coerceBooleanProperty } from "@angular/cdk/coercion";
|
import { BooleanInput, coerceBooleanProperty } from "@angular/cdk/coercion";
|
||||||
import { CommonModule } from "@angular/common";
|
import { CommonModule } from "@angular/common";
|
||||||
import { Component, Input } from "@angular/core";
|
import { Component, Input, QueryList, ContentChildren } from "@angular/core";
|
||||||
|
|
||||||
import { ButtonModule } from "../button";
|
import { ButtonModule } from "../button";
|
||||||
import { IconButtonModule } from "../icon-button";
|
import { IconButtonModule } from "../icon-button";
|
||||||
|
import { MenuItemDirective, MenuModule } from "../menu";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: "bit-chip",
|
selector: "bit-chip",
|
||||||
templateUrl: "chip.template.html",
|
templateUrl: "chip-select.template.html",
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule, ButtonModule, IconButtonModule],
|
imports: [CommonModule, ButtonModule, IconButtonModule, MenuModule],
|
||||||
})
|
})
|
||||||
export class ChipComponent {
|
export class ChipComponent {
|
||||||
@Input()
|
@Input()
|
||||||
|
@ -20,5 +21,14 @@ export class ChipComponent {
|
||||||
this._selected = coerceBooleanProperty(value);
|
this._selected = coerceBooleanProperty(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ContentChildren(MenuItemDirective, { descendants: true })
|
||||||
|
menuItems: QueryList<MenuItemDirective>;
|
||||||
|
|
||||||
private _selected = false;
|
private _selected = false;
|
||||||
|
|
||||||
|
clear(e: Event) {
|
||||||
|
//eslint-disable-next-line
|
||||||
|
console.log("hi");
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -1,13 +1,15 @@
|
||||||
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
|
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
|
||||||
|
|
||||||
import { ChipComponent } from "./chip.component";
|
import { MenuModule } from "../menu";
|
||||||
|
|
||||||
|
import { ChipComponent } from "./chip-select.component";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: "Component Library/Chip",
|
title: "Component Library/Chip",
|
||||||
component: ChipComponent,
|
component: ChipComponent,
|
||||||
decorators: [
|
decorators: [
|
||||||
moduleMetadata({
|
moduleMetadata({
|
||||||
imports: [],
|
imports: [MenuModule],
|
||||||
providers: [],
|
providers: [],
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
|
@ -22,11 +24,19 @@ export const Default: Story = {
|
||||||
<bit-chip>
|
<bit-chip>
|
||||||
<i class="bwi bwi-folder" aria-hidden="true" slot="start"></i>
|
<i class="bwi bwi-folder" aria-hidden="true" slot="start"></i>
|
||||||
Label
|
Label
|
||||||
|
<ng-container slot="menuItems">
|
||||||
|
<a href="#" bitMenuItem>Anchor link</a>
|
||||||
|
<a href="#" bitMenuItem>Another link</a>
|
||||||
|
</ng-container>
|
||||||
</bit-chip>
|
</bit-chip>
|
||||||
|
|
||||||
<bit-chip selected>
|
<bit-chip selected>
|
||||||
<i class="bwi bwi-folder" aria-hidden="true" slot="start"></i>
|
<i class="bwi bwi-folder" aria-hidden="true" slot="start"></i>
|
||||||
Label
|
Label
|
||||||
|
<ng-container slot="menuItems">
|
||||||
|
<a href="#" bitMenuItem>Anchor link</a>
|
||||||
|
<a href="#" bitMenuItem>Another link</a>
|
||||||
|
</ng-container>
|
||||||
</bit-chip>
|
</bit-chip>
|
||||||
`,
|
`,
|
||||||
}),
|
}),
|
|
@ -0,0 +1,27 @@
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="tw-border tw-border-solid tw-rounded-3xl tw-border-text-muted tw-px-3 tw-py-1.5 tw-inline-flex tw-gap-1.5 tw-items-center focus-visible:tw-ring focus-visible:tw-ring-offset-1 focus-visible:tw-ring-primary-700 focus-visible:tw-z-10"
|
||||||
|
[ngClass]="selected ? 'tw-bg-text-muted tw-text-contrast hover:tw-bg-secondary-700' : 'tw-bg-background tw-text-muted hover:tw-bg-black/5'"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-controls="listbox-id"
|
||||||
|
buttonType="secondary"
|
||||||
|
[bitMenuTriggerFor]="chipSelectMenu"
|
||||||
|
>
|
||||||
|
<span class="tw-pr-1">
|
||||||
|
<ng-content select="[slot=start]"></ng-content>
|
||||||
|
</span>
|
||||||
|
<ng-content></ng-content>
|
||||||
|
<button
|
||||||
|
*ngIf="selected"
|
||||||
|
bitIconButton="bwi-close"
|
||||||
|
buttonType="contrast"
|
||||||
|
size="small"
|
||||||
|
type="button"
|
||||||
|
class="tw-rounded-3xl before:tw-rounded-3xl tw-text-sm"
|
||||||
|
(click)="clear($event)"
|
||||||
|
></button>
|
||||||
|
<i *ngIf="!selected" class="bwi bwi-angle-down tw-mt-1 tw-p-1"></i>
|
||||||
|
</button>
|
||||||
|
<bit-menu #chipSelectMenu>
|
||||||
|
<ng-content select="[slot=menuItems]"></ng-content>
|
||||||
|
</bit-menu>
|
|
@ -1,14 +0,0 @@
|
||||||
<button
|
|
||||||
bitButton
|
|
||||||
type="button"
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-controls="listbox-id"
|
|
||||||
buttonType="secondary"
|
|
||||||
>
|
|
||||||
<span class="tw-pr-1">
|
|
||||||
<ng-content select="[slot=start]"></ng-content>
|
|
||||||
</span>
|
|
||||||
<ng-content></ng-content>
|
|
||||||
<button *ngIf="selected" bitIconButton="bwi-close" size="small" type="button"></button>
|
|
||||||
<button *ngIf="!selected" bitIconButton="bwi-angle-down" size="small" type="button"></button>
|
|
||||||
</button>
|
|
Loading…
Reference in New Issue