[PM-16102] Increase clickable area for bit-item actions (#12450)

libs/components/src/badge/badge.component.html

@@ -0,0 +1,3 @@
+<span [ngClass]="{ 'tw-truncate tw-block': truncate }">
+  <ng-content></ng-content>
+</span>

libs/components/src/badge/badge.component.ts

@@ -1,6 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Directive, ElementRef, HostBinding, Input } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Component, ElementRef, HostBinding, Input } from "@angular/core";
 
 import { FocusableElement } from "../shared/focusable-element";
 
@@ -28,12 +29,14 @@ const hoverStyles: Record<BadgeVariant, string[]> = {
   info: ["hover:tw-bg-info-600", "hover:tw-border-info-600", "hover:!tw-text-black"],
 };
 
-@Directive({
+@Component({
   selector: "span[bitBadge], a[bitBadge], button[bitBadge]",
-  providers: [{ provide: FocusableElement, useExisting: BadgeDirective }],
+  providers: [{ provide: FocusableElement, useExisting: BadgeComponent }],
+  imports: [CommonModule],
+  templateUrl: "badge.component.html",
   standalone: true,
 })
-export class BadgeDirective implements FocusableElement {
+export class BadgeComponent implements FocusableElement {
   @HostBinding("class") get classList() {
     return [
       "tw-inline-block",
@@ -63,7 +66,7 @@ export class BadgeDirective implements FocusableElement {
     ]
       .concat(styles[this.variant])
       .concat(this.hasHoverEffects ? hoverStyles[this.variant] : [])
-      .concat(this.truncate ? ["tw-truncate", this.maxWidthClass] : []);
+      .concat(this.truncate ? this.maxWidthClass : []);
   }
   @HostBinding("attr.title") get titleAttr() {
     if (this.title !== undefined) {

libs/components/src/badge/badge.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from "@angular/core";
 
-import { BadgeDirective } from "./badge.directive";
+import { BadgeComponent } from "./badge.component";
 
 @NgModule({
-  imports: [BadgeDirective],
-  exports: [BadgeDirective],
+  imports: [BadgeComponent],
+  exports: [BadgeComponent],
 })
 export class BadgeModule {}

libs/components/src/badge/badge.stories.ts

@@ -1,14 +1,14 @@
 import { CommonModule } from "@angular/common";
 import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 
-import { BadgeDirective } from "./badge.directive";
+import { BadgeComponent } from "./badge.component";
 
 export default {
   title: "Component Library/Badge",
-  component: BadgeDirective,
+  component: BadgeComponent,
   decorators: [
     moduleMetadata({
-      imports: [CommonModule, BadgeDirective],
+      imports: [CommonModule, BadgeComponent],
     }),
   ],
   args: {
@@ -21,9 +21,9 @@ export default {
       url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A16956",
     },
   },
-} as Meta<BadgeDirective>;
+} as Meta<BadgeComponent>;
 
-type Story = StoryObj<BadgeDirective>;
+type Story = StoryObj<BadgeComponent>;
 
 export const Variants: Story = {
   render: (args) => ({

libs/components/src/badge/index.ts

@@ -1,2 +1,2 @@
-export { BadgeDirective, BadgeVariant } from "./badge.directive";
+export { BadgeComponent, BadgeVariant } from "./badge.component";
 export * from "./badge.module";