[CL-221] Add chip-select component (#9021)

---------

Co-authored-by: William Martin <[email protected]>

apps/browser/src/_locales/en/messages.json

@@ -3229,7 +3229,37 @@
  "errorAssigningTargetFolder": {
  "message": "Error assigning target folder."
  },
+ "viewItemsIn": {
+ "message": "View items in $NAME$",
+ "description": "Button to view the contents of a folder or collection",
+ "placeholders": {
+ "name": {
+ "content": "$1",
+ "example": "Work"
+ }
+ }
+ },
+ "backTo": {
+ "message": "Back to $NAME$",
+ "description": "Navigate back to a previous folder or collection",
+ "placeholders": {
+ "name": {
+ "content": "$1",
+ "example": "Work"
+ }
+ }
+ },
  "new": {
  "message": "New"
+ },
+ "removeItem": {
+ "message": "Remove $NAME$",
+ "description": "Remove a selected option, such as a folder or collection",
+ "placeholders": {
+ "name": {
+ "content": "$1",
+ "example": "Work"
+ }
+ }
  }
 }

apps/desktop/src/locales/en/messages.json

@@ -2822,5 +2822,39 @@
  },
  "errorAssigningTargetFolder": {
  "message": "Error assigning target folder."
+ },
+ "viewItemsIn": {
+ "message": "View items in $NAME$",
+ "description": "Button to view the contents of a folder or collection",
+ "placeholders": {
+ "name": {
+ "content": "$1",
+ "example": "Work"
+ }
+ }
+ },
+ "backTo": {
+ "message": "Back to $NAME$",
+ "description": "Navigate back to a previous folder or collection",
+ "placeholders": {
+ "name": {
+ "content": "$1",
+ "example": "Work"
+ }
+ }
+ },
+ "back": {
+ "message": "Back",
+ "description": "Button text to navigate back"
+ },
+ "removeItem": {
+ "message": "Remove $NAME$",
+ "description": "Remove a selected option, such as a folder or collection",
+ "placeholders": {
+ "name": {
+ "content": "$1",
+ "example": "Work"
+ }
+ }
  }
 }

apps/web/src/locales/en/messages.json

@@ -8199,6 +8199,40 @@
  "manageBillingFromProviderPortalMessage": {
  "message": "Manage billing from the Provider Portal"
  },
+ "viewItemsIn": {
+ "message": "View items in $NAME$",
+ "description": "Button to view the contents of a folder or collection",
+ "placeholders": {
+ "name": {
+ "content": "$1",
+ "example": "Work"
+ }
+ }
+ },
+ "backTo": {
+ "message": "Back to $NAME$",
+ "description": "Navigate back to a previous folder or collection",
+ "placeholders": {
+ "name": {
+ "content": "$1",
+ "example": "Work"
+ }
+ }
+ },
+ "back": {
+ "message": "Back",
+ "description": "Button text to navigate back"
+ },
+ "removeItem": {
+ "message": "Remove $NAME$",
+ "description": "Remove a selected option, such as a folder or collection",
+ "placeholders": {
+ "name": {
+ "content": "$1",
+ "example": "Work"
+ }
+ }
+ },
  "viewInfo": {
  "message": "View info"
  },

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

@@ -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>