@testgorilla/tgo-ui 2.30.13 → 2.31.1

package/projects/tgo-canopy-ui/components/navbar/navbar.component.spec.ts

@@ -0,0 +1,164 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormBuilder, FormsModule } from '@angular/forms';
+import { NavbarComponent } from "./navbar.component";
+import { MatMenuModule } from "@angular/material/menu";
+import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
+import { MobileNavbarSideSheetComponent } from "./mobile-navbar-side-sheet/mobile-navbar-side-sheet.component";
+import { of, Subject } from "rxjs";
+import { BreakpointObserver, BreakpointState } from "@angular/cdk/layout";
+import { SideSheetService } from "../side-sheet/side-sheet.service";
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+  let sideSheetService: SideSheetService;
+  let breakpointObserver: BreakpointObserver;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavbarComponent ],
+      providers: [FormBuilder],
+      imports: [
+        UiTranslatePipe,
+        FormsModule,
+        MatMenuModule
+      ],
+      schemas: [ NO_ERRORS_SCHEMA ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    breakpointObserver = TestBed.inject(BreakpointObserver);
+    sideSheetService = TestBed.inject(SideSheetService);
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit navigateEvent when navigate is called', () => {
+    jest.spyOn(component.navigateEvent, 'emit');
+
+    const routeId = 'exampleRouteId';
+    component.navigate(routeId);
+
+    expect(component.navigateEvent.emit).toHaveBeenCalledWith(`/${routeId}`);
+  });
+
+  it('should emit logoutEvent when logout is called', () => {
+    jest.spyOn(component.logoutEvent, 'emit');
+
+    component.logout();
+
+    expect(component.logoutEvent.emit).toHaveBeenCalled();
+  });
+
+  it('should emit menuItemClicked when clickMenuItem is called', () => {
+   jest.spyOn(component.menuItemClicked, 'emit');
+
+    const menuItemId = 'exampleMenuItemId';
+    component.clickMenuItem(menuItemId);
+
+    expect(component.menuItemClicked.emit).toHaveBeenCalledWith(menuItemId);
+  });
+
+  it('should set and get input properties correctly', () => {
+    component.userName = 'John Doe';
+    component.email = 'john.doe@example.com';
+    fixture.componentRef.setInput('activedRoute', 'home');
+    component.menuItems = [{ id: 'profile', label: 'Profile' }] as any;
+
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.userName).toBe('John Doe'); // Check userName
+    expect(component.email).toBe('john.doe@example.com'); // Check email
+    expect(component.activedRoute()).toBe('home'); // Check active route
+    expect(component.menuItems.length).toBe(1); // Check menu items
+  });
+
+  it('should emit navigateEvent when navigate is called', () => {
+    jest.spyOn(component.navigateEvent, 'emit'); // Spy on navigateEvent
+    component.navigate('home'); // Call navigate with a route ID
+
+    expect(component.navigateEvent.emit).toHaveBeenCalledWith('/home'); // Check event emission
+  });
+
+  it('should emit logoutEvent when logout is called', () => {
+    jest.spyOn(component.logoutEvent, 'emit'); // Spy on logoutEvent
+    component.logout(); // Call logout
+
+    expect(component.logoutEvent.emit).toHaveBeenCalled(); // Check event emission
+  });
+
+  it('should emit menuItemClicked when clickMenuItem is called', () => {
+    jest.spyOn(component.menuItemClicked, 'emit'); // Spy on menuItemClicked
+    component.clickMenuItem('profile'); // Call clickMenuItem with an item ID
+
+    expect(component.menuItemClicked.emit).toHaveBeenCalledWith('profile'); // Check event emission
+  });
+
+  it('should open mobile menu and interact with side sheet service', () => {
+    const subject = new Subject<void>(); // Subject for closing the side sheet
+    const openSpy = jest.spyOn(sideSheetService, 'open').mockReturnValue({
+      userName: '',
+      menuItems: [],
+      logoutEvent: subject,
+      menuItemClicked: subject,
+      navigateEvent: subject,
+    }); // Mock the side sheet service
+
+    component.openMobileMenu(); // Open the mobile menu
+
+    expect(openSpy).toHaveBeenCalledWith({
+      componentRef: MobileNavbarSideSheetComponent,
+      showLogo: true,
+      closed: expect.any(Subject),
+    }); // Validate side sheet opening with correct config
+  });
+
+  it('should observe mobile breakpoint', () => {
+    jest.spyOn(breakpointObserver, 'observe').mockReturnValue(of({ matches: true } as BreakpointState)); // Mock breakpoint observation
+
+    //@ts-ignore
+    const isMobile = component.isMobile$; // Get the observable
+
+    isMobile.subscribe((matches) => {
+      expect(matches).toBe(true); // Check if breakpoint observer is working
+    });
+  });
+
+  it('should initialize with default application theme', () => {
+    expect(component.applicationTheme).toBe('light');
+  });
+
+  it('should set the application theme from input', () => {
+    component.applicationTheme = 'dark';
+    fixture.detectChanges();
+    expect(component.applicationTheme).toBe('dark');
+  });
+
+  it('should emit navigateEvent when navigate is called', () => {
+    jest.spyOn(component.navigateEvent, 'emit');
+    const routeId = 'test-route';
+    component.navigate(routeId);
+    expect(component.navigateEvent.emit).toHaveBeenCalledWith(`/${routeId}`);
+  });
+
+  it('should emit logoutEvent when logout is called', () => {
+    jest.spyOn(component.logoutEvent, 'emit');
+    component.logout();
+    expect(component.logoutEvent.emit).toHaveBeenCalled();
+  });
+
+  it('should emit menuItemClicked when clickMenuItem is called', () => {
+    jest.spyOn(component.menuItemClicked, 'emit');
+    const menuItemId = 'test-item';
+    component.clickMenuItem(menuItemId);
+    expect(component.menuItemClicked.emit).toHaveBeenCalledWith(menuItemId);
+  });
+});

package/projects/tgo-canopy-ui/components/navbar/navbar.component.stories.ts

@@ -0,0 +1,166 @@
+import { MatButtonModule } from '@angular/material/button';
+import { MatRippleModule } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { LogoComponentModule } from '../logo/logo.component.module';
+import { NavbarComponent } from './navbar.component';
+import { IRoute } from './navbar.model';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { transformTheme } from "../../utils/transform-theme";
+import { AvatarComponentModule } from '../avatar/avatar.component.module';
+import { FileUploadComponent } from '../file-upload/file-upload.component';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { SideSheetComponentModule } from "../side-sheet/side-sheet.component.module";
+import { MobileNavbarSideSheetComponent } from "./mobile-navbar-side-sheet/mobile-navbar-side-sheet.component";
+import { TagComponentModule } from "../tag/tag.component.module";
+import { BadgeComponentModule } from "../badge/badge.component.module";
+
+const ROUTES: IRoute[] = [
+  {
+    id: 'assessments',
+    title: 'Assessments',
+  },
+  {
+    id: 'results',
+    title: 'Results',
+    badgeOptions: { text: 'Test', color: 'info' }
+  },
+];
+
+export default {
+  title: 'Navbar',
+  component: NavbarComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        BrowserAnimationsModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatButtonModule,
+        MatRippleModule,
+        MatMenuModule,
+        LogoComponentModule,
+        IconComponentModule,
+        UiTranslatePipe,
+        AvatarComponentModule,
+        ButtonComponentModule,
+        SideSheetComponentModule,
+        MobileNavbarSideSheetComponent,
+        TagComponentModule,
+        BadgeComponentModule
+      ],
+      declarations: [NavbarComponent],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  userName: 'Markus Letterman',
+  routes: ROUTES,
+  activedRoute: ROUTES[0].id,
+  email: 'markusletterman@gmail.com',
+  menuItems: [
+    {
+      id: 'profile',
+      icon: 'User-profile',
+      text: 'Edit profile info',
+    },
+  ],
+};
+
+const params = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/0.-DS%3A-Global-tokens?node-id=1370%3A400',
+  },
+};
+
+Default.parameters = params;
+
+export const WithContent = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ng-template #temp>
+            <ui-button applicationTheme="${_theme}" label="Press"></ui-button>
+        </ng-template>
+      <ui-navbar applicationTheme="${_theme}" [contentTemplateRef]="temp" [userName]="'Markus Letterman'" [routes]="[
+        {
+          id: 'assessments',
+          title: 'Assessments',
+        },
+        {
+          id: 'results',
+          title: 'Results',
+        },
+      ]"
+      [menuItems]="[{
+      id: 'profile',
+      icon: 'User-profile',
+      text: 'Edit profile info',
+    },{
+      id: 'profile',
+      icon: 'User-profile',
+      text: 'Edit profile info',
+    },{
+      id: 'profile',
+      icon: 'User-profile',
+      text: 'Edit profile info',
+    },{
+      id: 'profile',
+      icon: 'User-profile',
+      text: 'Edit profile info',
+    },{
+      id: 'profile',
+      icon: 'User-profile',
+      text: 'Edit profile info',
+    },{
+      id: 'profile',
+      icon: 'User-profile',
+      text: 'Edit profile info',
+    },]"
+        activedRoute="${ROUTES[0].id}">
+           <ui-button actions size="small" applicationTheme="${_theme}" label="PressMe"></ui-button>
+      </ui-navbar>
+  `,
+    };
+  },
+} as StoryFn;
+
+WithContent.parameters = params;
+
+export const WithAvatar = Template.bind({});
+WithAvatar.args = {
+  userName: 'Markus Letterman',
+  routes: ROUTES,
+  isAvatar: true,
+  activedRoute: ROUTES[0].id,
+  email: 'markusletterman@gmail.com',
+  menuItems: [
+    {
+      id: 'profile',
+      icon: 'User-profile',
+      text: 'Edit profile info',
+    },
+  ],
+};
+
+WithAvatar.parameters = params;

package/projects/tgo-canopy-ui/components/navbar/navbar.component.ts

@@ -0,0 +1,227 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  EventEmitter,
+  Inject,
+  input,
+  Input,
+  InputSignal,
+  Optional,
+  Output,
+  Signal,
+  TemplateRef,
+} from '@angular/core';
+import { IRoute, MenuItem, MenuState, ScreenSize } from './navbar.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { map, ReplaySubject, startWith, Subject, switchMap, tap } from 'rxjs';
+import { SideSheetService } from '../side-sheet/side-sheet.service';
+import { MobileNavbarSideSheetComponent } from './mobile-navbar-side-sheet/mobile-navbar-side-sheet.component';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { ScreenBreakpoints } from '../../models/screen-breakpoints.model';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { LogoTypeEnum } from '../logo/logo.model';
+import { AvatarSize } from '../avatar/avatar.model';
+
+@Component({
+  selector: 'ui-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NavbarComponent {
+  /**
+   * Routes object
+   *
+   * @type {IRoute}
+   * @memberof NavbarComponent
+   * @ignore
+   */
+  @Input() routes: IRoute[] = [];
+
+  /**
+   * Actived route id
+   *
+   * @type {InputSignal<string>}
+   * @memberof NavbarComponent
+   */
+  activedRoute: InputSignal<string> = input('');
+
+  /**
+   * User first name and last name
+   *
+   * @type {string}
+   * @memberof NavbarComponent
+   */
+  @Input() userName = '';
+
+  /**
+   * User email
+   *
+   * @type {string}
+   * @memberof NavbarComponent
+   */
+  @Input() email = '';
+
+  /**
+   * Menu items to show in menu above the Log out button
+   *
+   * @type {string}
+   * @memberof NavbarComponent
+   */
+  @Input() menuItems: MenuItem[] = [];
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof NavbarComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   *
+   * It's ng-content for mobile version
+   *
+   * @type {ApplicationTheme}
+   * @memberof NavbarComponent
+   */
+  @Input() contentTemplateRef: TemplateRef<any>;
+
+  /**
+   * Mobile breakpoint
+   * @type {number}
+   * @memberof NavbarComponent
+   */
+  @Input() set mobileBreakpoint(value: number) {
+    if (value) {
+      this._mobileBreakpoint$.next(value);
+    }
+  }
+
+  /**
+   *
+   * Show avatar with user initials
+   *
+   * @type {boolean}
+   * @memberof NavbarComponent
+   */
+  @Input() isAvatar = true;
+
+  /**
+   * Sets class for the menu
+   *
+   * @type {string}
+   * @memberof NavbarComponent
+   */
+  @Input() menuClass = '';
+
+  /**
+   * @ignore
+   */
+  @Output() navigateEvent: EventEmitter<string> = new EventEmitter<string>();
+
+  /**
+   * @ignore
+   */
+  @Output() menuItemClicked: EventEmitter<string> = new EventEmitter<string>();
+
+  /**
+   * @ignore
+   */
+  @Output() logoutEvent: EventEmitter<void> = new EventEmitter<void>();
+  @Output() menuState: EventEmitter<MenuState> = new EventEmitter<MenuState>();
+
+  protected screenSize: ScreenSize = 'desktop';
+  protected readonly translationContext = 'NAVBAR.';
+  private readonly _mobileBreakpoint$ = new ReplaySubject<number>(1);
+  private readonly _tabletBreakpoint$ = new ReplaySubject<number>(1);
+  private readonly mobileBreakpointObs$ = this._mobileBreakpoint$.pipe(startWith(ScreenBreakpoints.MOBILE));
+  private readonly tabletBreakpointObs$ = this._tabletBreakpoint$.pipe(startWith(ScreenBreakpoints.TABLET));
+  protected readonly isMobile$ = this.mobileBreakpointObs$.pipe(
+    switchMap(breakpoint => this.breakpointObserver.observe(`(max-width: ${breakpoint}px)`)
+      .pipe(
+        map(v => v.matches),
+        tap(isMobile => isMobile ? this.screenSize = 'mobile' : 'desktop')
+      ))
+  );
+  protected readonly isTablet$ = this.tabletBreakpointObs$.pipe(
+    switchMap(breakpoint => this.breakpointObserver.observe(`(max-width: ${breakpoint}px)`)
+      .pipe(
+        map(v => v.matches),
+        tap(isTablet => isTablet ? this.screenSize = 'tablet' : 'desktop')
+      )
+    )
+  );
+  protected isOpened = false;
+  protected logoType = LogoTypeEnum;
+
+  activeRoutesMap:Signal<Map<string, boolean>> = computed(() => {
+    const currentRoute = this.activedRoute();
+    return new Map(this.routes.map(route => [route.id, currentRoute?.startsWith(route.id)]));
+  });
+
+  constructor(
+    private readonly breakpointObserver: BreakpointObserver,
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+    private sideSheetService: SideSheetService,
+    private destroyRef: DestroyRef,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  openMobileMenu(): void {
+    const isSideSheetClosed$ = new Subject<void>();
+    const navbarSideSheetComponent = this.sideSheetService.open<MobileNavbarSideSheetComponent>({
+      componentRef: MobileNavbarSideSheetComponent,
+      showLogo: true,
+      closed: isSideSheetClosed$,
+    });
+
+    navbarSideSheetComponent.userName = this.userName;
+    navbarSideSheetComponent.menuItems = this.menuItems;
+    navbarSideSheetComponent.activedRoute = this.activedRoute;
+    navbarSideSheetComponent.routes = this.routes;
+    navbarSideSheetComponent.email = this.email;
+    navbarSideSheetComponent.contentTemplateRef = this.contentTemplateRef;
+    navbarSideSheetComponent.applicationTheme = this.applicationTheme;
+
+    navbarSideSheetComponent.logoutEvent.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      this.logoutEvent.emit();
+      isSideSheetClosed$.next();
+    });
+
+    navbarSideSheetComponent.menuItemClicked.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
+      this.menuItemClicked.emit(value);
+      isSideSheetClosed$.next();
+    });
+
+    navbarSideSheetComponent.navigateEvent.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
+      this.navigateEvent.emit(value);
+      isSideSheetClosed$.next();
+    });
+  }
+
+  navigate(routeId: string) {
+    this.navigateEvent.emit(`/${routeId}`);
+  }
+
+  logout(): void {
+    this.logoutEvent.emit();
+  }
+
+  clickMenuItem(id: string) {
+    this.menuItemClicked.emit(id);
+  }
+
+  onChangeMenuState(isOpened: boolean, screenSize: ScreenSize) {
+    this.isOpened = isOpened;
+    this.menuState.emit({ isOpened, screenSize });
+  }
+
+  protected readonly AvatarSize = AvatarSize;
+}

package/projects/tgo-canopy-ui/components/navbar/navbar.model.ts

@@ -0,0 +1,26 @@
+import { IconName } from '../icon/icon.model';
+import { RebrandBadgeColor } from "../badge/badge.model";
+
+export interface IRoute {
+  id: string;
+  title: string;
+  badgeOptions?: RouteBadge;
+}
+
+export interface RouteBadge {
+  color: RebrandBadgeColor;
+  text: string;
+}
+
+export interface MenuItem {
+  id: string;
+  icon: IconName;
+  text: string;
+}
+
+export interface MenuState {
+  screenSize: ScreenSize;
+  isOpened: boolean;
+}
+
+export type ScreenSize = 'mobile' | 'tablet' | 'desktop';

package/projects/tgo-canopy-ui/components/overflow-menu/overflow-menu.component.html

@@ -0,0 +1,83 @@
+<div class="overflow-menu-container" [attr.theme]="applicationTheme">
+
+  <button
+    #buttonElement
+    mat-icon-button
+    *ngIf="isMenuRendered()"
+    [matMenuTriggerFor]="matmenus.first"
+    [attr.aria-label]="ariaLabel"
+    [attr.aria-required]="ariaRequired"
+    [attr.aria-describedby]="'describedby'"
+    [attr.aria-haspopup]="true"
+    [attr.aria-expanded]="isMenuOpened()"
+    (menuOpened)="onMenuOpened()"
+    (menuClosed)="onMenuClosed()"
+    class="overflow-menu-opener"
+    [matTooltip]="menuLabel"
+  >
+    <span [id]="'describedby'" [style.display]="'none'">{{ describedby }}</span>
+    <ui-icon
+      [name]="iconTrigger"
+      [applicationTheme]="applicationTheme"
+      [size]="'24'"
+      [color]="'rebrand-black'"
+    ></ui-icon>
+  </button>
+
+  @for (menu of submenus; track menu) {
+    <mat-menu #matMenu class="overflow-menu" [overlapTrigger]="false" backdropClass="overflow-menu-backdrop">
+      <ng-container *ngFor="let button of menu; index as id">
+        <ng-container
+          *ngIf="button.btnTemplate; else uiButton"
+          [ngTemplateOutlet]="button.btnTemplate"
+          [ngTemplateOutletContext]="{ $implicit: button }"
+        ></ng-container>
+
+        <ng-template #uiButton>
+          <button
+            mat-menu-item
+            [matMenuTriggerFor]="getMenu(button.subMenu)"
+            (menuOpened)="onSubmenuOpened()"
+            (focus)="onButtonFocus(button);"
+            (blur)="onButtonBlur(button)"
+            [ngClass]="{ 'is-destructive': button.isDestructive, disabled: button.disabled }"
+            [disableRipple]="true"
+            (click)="onButtonClick(button, $event)"
+            [matTooltip]="button.isTextEllipsed ? button.label : ''"
+            [attr.aria-labelledby]="'labelledby-' + button.label + id"
+            [attr.aria-describedby]="'describedby-' + button.label + id"
+            [attr.aria-label]="button.ariaLabel || null"
+            role="menuitem"
+            matTooltipPosition="right"
+          >
+            <span
+              [id]="'describedby-' + button.label + id"
+              [style.display]="'none'"
+            >
+              {{ button.disabled ? ('MENU.MENUITEM_DISABLED' | uiTranslate | async) + ' ' + (button.describedby || '') : button.describedby }}
+            </span>
+            <ui-icon
+              [name]="button.icon"
+              [filled]="button.disabled ? false : !!button.isFocused"
+              [applicationTheme]="applicationTheme"
+              [size]="'24'"
+              [color]="button.isDestructive ? 'red' : button.disabled ? 'dark' : 'rebrand-black'"
+            ></ui-icon>
+            <span
+              [id]="'labelledby-' + button.label + id"
+              class="label"
+              uiEllipseText
+              [refresh]="isMenuOpened()"
+              [maxDiffPixels]="1"
+              [isMultiline]="true"
+              (onChangeTextState)="button.isTextEllipsed = $event"
+            >{{ button.label }}</span>
+          </button>
+        </ng-template>
+      </ng-container>
+
+      <ng-content select="[menu-content]"></ng-content>
+
+    </mat-menu>
+  }
+</div>

package/projects/tgo-canopy-ui/components/overflow-menu/overflow-menu.component.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatMenuModule } from '@angular/material/menu';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { OverflowMenuComponent } from './overflow-menu.component';
+import { MatButtonModule } from "@angular/material/button";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { EllipseTextDirective } from "../../directives/ellipse-text.directive";
+import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
+
+@NgModule({
+  declarations: [OverflowMenuComponent],
+  imports: [CommonModule, ButtonComponentModule, IconComponentModule, MatMenuModule, MatButtonModule, MatTooltipModule, EllipseTextDirective, UiTranslatePipe],
+  exports: [OverflowMenuComponent],
+})
+export class OverflowMenuComponentModule {}