[CL-135] Migrate component library to standalone components (#12389)

* Migrate component library to standalone components

* Fix tests

libs/components/src/menu/menu-divider.component.ts

@@ -3,5 +3,6 @@ import { Component } from "@angular/core";
 @Component({
   selector: "bit-menu-divider",
   templateUrl: "./menu-divider.component.html",
+  standalone: true,
 })
 export class MenuDividerComponent {}

libs/components/src/menu/menu-item.directive.ts

@@ -1,10 +1,13 @@
 import { FocusableOption } from "@angular/cdk/a11y";
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { NgClass } from "@angular/common";
 import { Component, ElementRef, HostBinding, Input } from "@angular/core";
 
 @Component({
   selector: "[bitMenuItem]",
   templateUrl: "menu-item.component.html",
+  standalone: true,
+  imports: [NgClass],
 })
 export class MenuItemDirective implements FocusableOption {
   @HostBinding("class") classList = [

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

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

libs/components/src/menu/menu.component.ts

@@ -1,6 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { FocusKeyManager } from "@angular/cdk/a11y";
+import { FocusKeyManager, CdkTrapFocus } from "@angular/cdk/a11y";
 import {
   Component,
   Output,
@@ -19,6 +19,8 @@ import { MenuItemDirective } from "./menu-item.directive";
   selector: "bit-menu",
   templateUrl: "./menu.component.html",
   exportAs: "menuComponent",
+  standalone: true,
+  imports: [CdkTrapFocus],
 })
 export class MenuComponent implements AfterContentInit {
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;

libs/components/src/menu/menu.module.ts

@@ -1,6 +1,3 @@
-import { A11yModule } from "@angular/cdk/a11y";
-import { OverlayModule } from "@angular/cdk/overlay";
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { MenuDividerComponent } from "./menu-divider.component";
@@ -9,8 +6,7 @@ import { MenuTriggerForDirective } from "./menu-trigger-for.directive";
 import { MenuComponent } from "./menu.component";
 
 @NgModule({
-  imports: [A11yModule, CommonModule, OverlayModule],
-  declarations: [MenuComponent, MenuTriggerForDirective, MenuItemDirective, MenuDividerComponent],
+  imports: [MenuComponent, MenuTriggerForDirective, MenuItemDirective, MenuDividerComponent],
   exports: [MenuComponent, MenuTriggerForDirective, MenuItemDirective, MenuDividerComponent],
 })
 export class MenuModule {}

libs/components/src/menu/menu.stories.ts

@@ -3,23 +3,15 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { ButtonModule } from "../button/button.module";
 
-import { MenuDividerComponent } from "./menu-divider.component";
-import { MenuItemDirective } from "./menu-item.directive";
 import { MenuTriggerForDirective } from "./menu-trigger-for.directive";
-import { MenuComponent } from "./menu.component";
+import { MenuModule } from "./menu.module";
 
 export default {
   title: "Component Library/Menu",
   component: MenuTriggerForDirective,
   decorators: [
     moduleMetadata({
-      declarations: [
-        MenuTriggerForDirective,
-        MenuComponent,
-        MenuItemDirective,
-        MenuDividerComponent,
-      ],
-      imports: [OverlayModule, ButtonModule],
+      imports: [MenuModule, OverlayModule, ButtonModule],
     }),
   ],
   parameters: {
@@ -51,7 +43,7 @@ export const OpenMenu: Story = {
           Disabled button
         </button>
       </bit-menu>
-  
+
       <div class="tw-h-40">
         <div class="cdk-overlay-pane bit-menu-panel">
           <ng-container *ngTemplateOutlet="myMenu.templateRef"></ng-container>
@@ -67,7 +59,7 @@ export const ClosedMenu: Story = {
       <div class="tw-h-40">
         <button bitButton buttonType="secondary" [bitMenuTriggerFor]="myMenu">Open menu</button>
       </div>
-  
+
       <bit-menu #myMenu>
         <a href="#" bitMenuItem>Anchor link</a>
         <a href="#" bitMenuItem>Another link</a>