wip

libs/components/src/chip-select/chip-select.component.html

@@ -1,31 +1,42 @@
 <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"
+  bitButton
-  [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"
+  [bitMenuTriggerFor]="menu"
+  #menuTrigger="menuTrigger"
 >
-  <span class="tw-pr-1">
+  <i class="bwi {{ icon }}"></i>
-    <ng-content select="[slot=start]"></ng-content>
+  {{ placeholder }}
-  </span>
+  <i class="bwi" [ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"></i>
-  <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>
+<bit-menu #menu>
-  <ng-content select="[slot=menuItems]"></ng-content>
+  <button
+    type="button"
+    bitMenuItem
+    *ngIf="renderedOptions.parent"
+    (click)="viewOption(renderedOptions.parent, $event)"
+  >
+    <i class="bwi bwi-angle-left"></i>
+    Back
+  </button>
+
+  <button
+    type="button"
+    bitMenuItem
+    *ngIf="renderedOptions.parent"
+    (click)="selectOption(renderedOptions, $event)"
+  >
+    {{ renderedOptions.label }}
+  </button>
+  <!-- <bit-menu-divider *ngIf="renderedOptions.parent"></bit-menu-divider> -->
+
+  <button
+    type="button"
+    bitMenuItem
+    *ngFor="let option of renderedOptions.children"
+    (click)="option.children ? viewOption(option, $event) : selectOption(option, $event)"
+  >
+    {{ option.label }}
+    <i *ngIf="option.children" class="bwi bwi-angle-right"></i>
+  </button>
 </bit-menu>

libs/components/src/chip-select/chip-select.component.ts

@@ -1,34 +1,94 @@
-import { BooleanInput, coerceBooleanProperty } from "@angular/cdk/coercion";
 import { CommonModule } from "@angular/common";
-import { Component, Input, QueryList, ContentChildren } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 
 import { ButtonModule } from "../button";
 import { IconButtonModule } from "../icon-button";
-import { MenuItemDirective, MenuModule } from "../menu";
+import { MenuModule } from "../menu";
+import { Option } from "../select/option";
+
+export type OptionTree<T> = Option<T> & {
+  children?: OptionTree<T>[];
+  parent?: OptionTree<T>;
+};
+
+const testData: OptionTree<any>[] = [
+  {
+    label: "Foo",
+  },
+  {
+    label: "Bar",
+    children: [
+      {
+        label: "Foo1",
+      },
+      {
+        label: "Bar1",
+        children: [
+          {
+            label: "Foooooooooooooooo00000000000000000000000000000000000002",
+          },
+          {
+            label: "Bar2",
+            children: [
+              {
+                label: "Foo3",
+              },
+            ],
+          },
+          {
+            label: "Baz2",
+          },
+          {
+            label: "Baf2",
+          },
+        ],
+      },
+    ],
+  },
+];
 
 @Component({
-  selector: "bit-chip",
+  selector: "bit-chip-select",
   templateUrl: "chip-select.component.html",
   standalone: true,
   imports: [CommonModule, ButtonModule, IconButtonModule, MenuModule],
 })
-export class ChipSelectComponent {
+export class ChipSelectComponent<T = unknown> implements OnInit {
-  @Input()
+  // private i18nService = inject(I18nService);
-  get selected() {
+
-    return this._selected;
+  @Input() placeholder = "Placeholder";
-  }
+
-  set selected(value: BooleanInput) {
+  // name placeholder icon?
-    this._selected = coerceBooleanProperty(value);
+  @Input() icon: string;
+
+  /** Optional: Options can be provided using an  input or using `bit-option` */
+  @Input() items: OptionTree<T>[] = testData;
+
+  protected renderedOptions: OptionTree<T>;
+
+  protected selectOption(option: OptionTree<T>, event: MouseEvent) {
+    this.placeholder = option.label;
   }
 
-  @ContentChildren(MenuItemDirective, { descendants: true })
+  protected viewOption(option: OptionTree<T>, event: MouseEvent) {
-  menuItems: QueryList<MenuItemDirective>;
+    this.renderedOptions = option;
 
-  private _selected = false;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
 
-  clear(e: Event) {
+  private markParents(tree: OptionTree<T>) {
-    //eslint-disable-next-line
+    tree.children?.forEach((child) => {
-    console.log("hi");
+      child.parent = tree;
-    e.stopPropagation();
+      this.markParents(child);
+    });
+  }
+
+  ngOnInit(): void {
+    const root: OptionTree<T> = {
+      children: this.items,
+    };
+    this.markParents(root);
+    this.renderedOptions = root;
   }
 }

libs/components/src/chip-select/chip-select.stories.ts

@@ -21,23 +21,13 @@ export const Default: Story = {
   render: (args) => ({
     props: args,
     template: /* html */ `
-      <bit-chip>
+      <bit-chip-select placeholder="Folder" icon="bwi-key">
-        <i class="bwi bwi-folder" aria-hidden="true" slot="start"></i>
+        <bit-option label="Foo"></bit-option>
-        Label
+        <bit-option label="Bar"></bit-option>
-        <ng-container slot="menuItems">
+        <bit-option label="Baz">
-          <a href="#" bitMenuItem>Anchor link</a>
+          <bit-option label="Foo"></bit-option>
-          <a href="#" bitMenuItem>Another link</a>
+        </bit-option>
-        </ng-container>
+      </bit-chip-select>
-      </bit-chip>
-
-      <bit-chip selected>
-        <i class="bwi bwi-folder" aria-hidden="true" slot="start"></i>
-        Label
-        <ng-container slot="menuItems">
-          <a href="#" bitMenuItem>Anchor link</a>
-          <a href="#" bitMenuItem>Another link</a>
-        </ng-container>
-      </bit-chip>
     `,
   }),
 };

libs/components/src/menu/menu-trigger-for.directive.ts

@@ -16,6 +16,7 @@ import { MenuComponent } from "./menu.component";
 
 @Directive({
   selector: "[bitMenuTriggerFor]",
+  exportAs: "menuTrigger",
 })
 export class MenuTriggerForDirective implements OnDestroy {
   @HostBinding("attr.aria-expanded") isOpen = false;