From ef92ae29bb970362e51509a1e597b1c8a1a72e3a Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Wed, 30 Oct 2024 14:32:31 -0400
Subject: [PATCH] wip Item compact mode

---
 libs/components/src/item/item.component.html | 27 +++++++-------------
 libs/components/src/item/item.component.ts   | 20 ++++++++++++++-
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/libs/components/src/item/item.component.html b/libs/components/src/item/item.component.html
index 46cee897591..96a40d97e9c 100644
--- a/libs/components/src/item/item.component.html
+++ b/libs/components/src/item/item.component.html
@@ -1,20 +1,11 @@
-<div
-  class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-cursor-pointer [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg tw-mb-1.5"
-  [ngClass]="
-    focusVisibleWithin()
-      ? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-600 tw-border-transparent'
-      : 'tw-border-b-shadow'
-  "
->
-  <bit-item-action class="item-main-content tw-block tw-flex-1 tw-overflow-hidden">
-    <ng-content></ng-content>
-  </bit-item-action>
+<bit-item-action class="item-main-content tw-block tw-flex-1 tw-overflow-hidden">
+  <ng-content></ng-content>
+</bit-item-action>
 
-  <div
-    #endSlot
-    class="tw-p-2 tw-flex tw-gap-1 tw-items-center"
-    [hidden]="endSlot.childElementCount === 0"
-  >
-    <ng-content select="[slot=end]"></ng-content>
-  </div>
+<div
+  #endSlot
+  class="tw-p-2 tw-flex tw-gap-1 tw-items-center"
+  [hidden]="endSlot.childElementCount === 0"
+>
+  <ng-content select="[slot=end]"></ng-content>
 </div>
diff --git a/libs/components/src/item/item.component.ts b/libs/components/src/item/item.component.ts
index 5ce421e980b..9ca290c6afd 100644
--- a/libs/components/src/item/item.component.ts
+++ b/libs/components/src/item/item.component.ts
@@ -1,5 +1,11 @@
 import { CommonModule } from "@angular/common";
-import { ChangeDetectionStrategy, Component, HostListener, signal } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  HostListener,
+  signal,
+} from "@angular/core";
 
 import { A11yRowDirective } from "../a11y/a11y-row.directive";
 
@@ -26,6 +32,10 @@ export const BitItemHeight = 59;
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "item.component.html",
   providers: [{ provide: A11yRowDirective, useExisting: ItemComponent }],
+  host: {
+    class:
+      "tw-block tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-cursor-pointer [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg bit-compact:[&:not(bit-layout_*)]:tw-rounded-none bit-compact:[&:not(bit-layout_*)]:last:tw-mb-1.5 bit-compact:[&:not(bit-layout_*)]:last:tw-rounded-b-lg bit-compact:[&:not(bit-layout_*)]:first:tw-rounded-t-lg tw-mb-1.5 bit-compact:tw-mb-0",
+  },
 })
 export class ItemComponent extends A11yRowDirective {
   /**
@@ -40,4 +50,12 @@ export class ItemComponent extends A11yRowDirective {
   onFocusOut() {
     this.focusVisibleWithin.set(false);
   }
+
+  @HostBinding("class") get classList(): string[] {
+    return [
+      this.focusVisibleWithin()
+        ? "tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-600 tw-border-transparent"
+        : "tw-border-b-shadow",
+    ];
+  }
 }