@testgorilla/tgo-ui 2.11.1 → 2.11.2

package/projects/tgo-canopy-ui/components/navbar/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.scss

@@ -1,70 +0,0 @@
-@use "../../../theme/variables" as *;
-
-.mobile-navbar-container {
-  padding: 16px 12px;
-  .user-info {
-    padding: 0 16px;
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 32px;
-
-    .user-name {
-      font-weight: 700;
-      font-size: 16px;
-      line-height: 22px;
-      font-family: "ModernGothic", sans-serif;
-    }
-
-    .user-email {
-      font-size: 12px;
-    }
-  }
-
-  .routes {
-    .route {
-      padding: 0 16px;
-      width: 100%;
-      height: 48px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      font-size: 14px;
-
-      &.active {
-        background-color: $brand-10;
-        font-weight: bold;
-        font-family: "ModernGothic", sans-serif;
-      }
-    }
-  }
-
-  .settings {
-    height: 48px;
-    padding: 0 16px;
-    display: flex;
-    font-size: 14px;
-    font-weight: bold;
-    font-family: "ModernGothic", sans-serif;
-    flex-direction: row;
-    align-items: center;
-    gap: 16px;
-  }
-
-  .menu-item {
-    display: flex;
-    align-items: center;
-
-    ui-icon {
-      margin-right: 16px;
-    }
-  }
-  .bottom-content {
-    padding: 32px 16px;
-    width: calc(100% - 32px);
-    position: absolute;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}

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

@@ -1,58 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MobileNavbarSideSheetComponent } from './mobile-navbar-side-sheet.component';
-import { FormBuilder, FormsModule } from "@angular/forms";
-import { UiTranslatePipe } from "../../../pipes/ui-translate.pipe";
-import { MatMenuModule } from "@angular/material/menu";
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from "@angular/core";
-
-describe('MobileNavbarSideSheetComponent', () => {
-  let component: MobileNavbarSideSheetComponent;
-  let fixture: ComponentFixture<MobileNavbarSideSheetComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [FormBuilder],
-      imports: [
-        UiTranslatePipe,
-        FormsModule,
-        MatMenuModule,
-        MobileNavbarSideSheetComponent
-      ],
-      schemas: [ NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA ]
-    });
-    fixture = TestBed.createComponent(MobileNavbarSideSheetComponent);
-    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);
-  });
-});

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

@@ -1,58 +0,0 @@
-import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
-import { IRoute, MenuItem } from "../navbar.model";
-import { NgClass, NgForOf, NgIf, NgTemplateOutlet } from "@angular/common";
-import { IconComponentModule } from "../../icon/icon.component.module";
-import { MatIconModule } from "@angular/material/icon";
-import { MatMenuModule } from "@angular/material/menu";
-import { UiTranslatePipe } from "../../../pipes/ui-translate.pipe";
-import { LanguageService } from "../../../utils/localization/language.service";
-import { MatButtonModule } from "@angular/material/button";
-import { AccordionComponentModule } from "../../accordion/accordion.component.module";
-
-@Component({
-  selector: 'ui-mobile-navbar-side-sheet',
-  templateUrl: './mobile-navbar-side-sheet.component.html',
-  styleUrls: ['./mobile-navbar-side-sheet.component.scss'],
-  standalone: true,
-  imports: [
-    NgForOf,
-    NgClass,
-    IconComponentModule,
-    MatIconModule,
-    MatMenuModule,
-    UiTranslatePipe,
-    MatButtonModule,
-    AccordionComponentModule,
-    NgIf,
-    NgTemplateOutlet
-  ]
-})
-export class MobileNavbarSideSheetComponent {
-  @Input() routes: IRoute[] = [];
-  @Input() activedRoute = '';
-  @Input() email = '';
-  @Input() userName = '';
-  @Input() menuItems: MenuItem[] = [];
-  @Input() language = LanguageService.defaultLanguage;
-  @Input() contentTemplateRef: TemplateRef<any>;
-
-  @Output() navigateEvent: EventEmitter<string> = new EventEmitter<string>();
-  @Output() menuItemClicked: EventEmitter<string> = new EventEmitter<string>();
-  @Output() logoutEvent: EventEmitter<void> = new EventEmitter<void>();
-
-  protected readonly translationContext = 'NAVBAR.';
-
-  isOpenSettings = false;
-
-  navigate(routeId: string) {
-    this.navigateEvent.emit(`/${routeId}`);
-  }
-
-  logout(): void {
-    this.logoutEvent.emit();
-  }
-
-  clickMenuItem(id: string) {
-    this.menuItemClicked.emit(id);
-  }
-}

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

@@ -1,62 +0,0 @@
-<ui-side-sheet [applicationTheme]="applicationTheme" (openChange)="onOpenChange($event)" [position]="(isMobile$ | async) ? 'start' : 'end'">
-  <mat-toolbar [attr.theme]="applicationTheme">
-    <div class="custom-toolbar row">
-      <ui-logo [applicationTheme]="applicationTheme" class="logo" (click)="navigate('')"></ui-logo>
-      <ui-button (click)="openMobileMenu()" *ngIf="isMobile$ | async" [variant]="'text'" [companyColor]="'#242424'"
-                 [applicationTheme]="'light'" [iconName]="isOpened ? 'Close-in-line' : 'Menu-burger-in-line'" [justIcon]="true"></ui-button>
-      <div class="navigation row">
-        <a *ngFor="let route of routes" (click)="navigate(route.id)"
-           [ngClass]="{'active': activedRoute === route.id}">
-          <span>{{ route.title }}</span>
-        </a>
-      </div>
-      <div class="actions">
-        <ng-content select="[actions]"></ng-content>
-        <button mat-button class="profile-menu" *ngIf="isTablet$ | async; else pc" (click)="openMobileMenu()">
-          <ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
-        </button>
-
-        <ng-template #pc>
-          <button mat-button class="profile-menu" [matMenuTriggerFor]="menu">
-            <ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
-          </button>
-        </ng-template>
-
-        <ng-template #buttonContent>
-          <div class="profile-button-content">
-            <ng-container *ngIf="isAvatar; else onlyName">
-              <ui-avatar [applicationTheme]="applicationTheme" [name]="userName"></ui-avatar>
-            </ng-container>
-
-            <ng-template #onlyName>
-              {{ userName }}
-            </ng-template>
-
-            <mat-icon *ngIf="applicationTheme === 'classic'; else newThemeIcon" iconPositionEnd>expand_more</mat-icon>
-            <ng-template #newThemeIcon>
-              <ui-icon [size]="'24'"
-                       *ngIf="!isAvatar"
-                       [name]="menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'"
-                       [applicationTheme]="applicationTheme"></ui-icon>
-            </ng-template>
-          </div>
-        </ng-template>
-      </div>
-    </div>
-  </mat-toolbar>
-
-  <ng-content></ng-content>
-
-  <mat-menu #menu="matMenu">
-    <button *ngFor="let e of menuItems" mat-menu-item (click)="clickMenuItem(e.id)">
-      <div class="menu-item">
-        <ui-icon [name]="e.icon" size="24"></ui-icon>
-        {{ e.text }}
-      </div>
-    </button>
-    <button mat-menu-item (click)="logout()">
-      <mat-icon>power_settings_new</mat-icon>
-      {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}
-    </button>
-  </mat-menu>
-</ui-side-sheet>

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

@@ -1,36 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-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 { LogoComponentModule } from '../logo/logo.component.module';
-import { NavbarComponent } from './navbar.component';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { AvatarComponentModule } from "../avatar/avatar.component.module";
-import { SideSheetComponentModule } from "../side-sheet/side-sheet.component.module";
-import { ButtonComponentModule } from "../button/button.component.module";
-import { MobileNavbarSideSheetComponent } from './mobile-navbar-side-sheet/mobile-navbar-side-sheet.component';
-
-@NgModule({
-  declarations: [NavbarComponent],
-  imports: [
-    CommonModule,
-    MatToolbarModule,
-    MatIconModule,
-    MatButtonModule,
-    MatRippleModule,
-    MatMenuModule,
-    LogoComponentModule,
-    IconComponentModule,
-    UiTranslatePipe,
-    AvatarComponentModule,
-    SideSheetComponentModule,
-    ButtonComponentModule,
-    MobileNavbarSideSheetComponent
-  ],
-  exports: [NavbarComponent],
-})
-export class NavbarComponentModule {}

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

@@ -1,240 +0,0 @@
-@use '../../theme/variables' as *;
-@use '../../theme/breakpoints-mixin' as *;
-
-:host {
-  ::ng-deep {
-    .mat-drawer {
-      padding: 0 !important;
-
-      .mat-drawer-inner-container {
-        .header {
-          padding: 16px 16px 16px 24px !important;
-          border-bottom: 1px solid $grayscale-30;
-          height: 64px;
-
-          ui-logo {
-            width: 100%;
-            margin: 0 !important;
-            display: flex;
-            justify-content: flex-start;
-
-            img {
-              width: fit-content;
-              height: 32px;
-            }
-          }
-        }
-      }
-    }
-
-    @media (max-width: map-get($tgo-breakpoints, 'large')) and (min-width: map-get($tgo-breakpoints, 'medium')) {
-      .mat-drawer {
-        margin-top: 64px;
-        height: calc(100% - 64px);
-        max-width: 320px;
-
-        .header {
-          display: none!important;
-        }
-      }
-
-      .mat-drawer-backdrop {
-        background: transparent!important;
-        opacity: 0!important;
-      }
-    }
-
-    @media (max-width: map-get($tgo-breakpoints, 'medium')) {
-      .mat-drawer {
-        margin-top: 64px;
-        height: calc(100% - 64px);
-
-        .header {
-          display: none!important;
-        }
-      }
-
-      .mat-drawer-backdrop {
-        background: transparent!important;
-        opacity: 0!important;
-      }
-    }
-  }
-}
-
-.mat-toolbar {
-  height: 80px;
-  background-color: $tgo-white !important;
-  padding: 0 192px !important;
-
-  .custom-toolbar {
-    width: 100%;
-    height: 100%;
-    background-color: $tgo-white;
-
-    ui-logo.logo {
-      cursor: pointer;
-      width: 200px;
-      height: 43px;
-      align-self: center;
-      display: flex;
-    }
-
-    .navigation {
-      height: 100%;
-      margin-left: 40px;
-
-      a {
-        display: flex;
-        align-items: center;
-        height: 100%;
-        background: $tgo-white;
-        cursor: pointer;
-
-        &.active {
-          border-top: 2px solid $tgo-petrol-default;
-
-          span {
-            font-weight: 700;
-          }
-        }
-
-        span {
-          width: 100%;
-          text-align: center;
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 16px;
-        }
-      }
-    }
-
-    .actions {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-
-      margin-right: 40px;
-
-      @include screen('medium') {
-        margin-right: 0;
-      }
-
-      .profile-menu {
-        font-weight: 600;
-        font-size: 14px;
-        height: 100%;
-        margin-right: -20px;
-
-        mat-icon {
-          font-size: 16px;
-          position: relative;
-          top: 3px;
-          left: 3px;
-        }
-      }
-
-      .profile-button-content {
-        display: flex;
-        align-items: center;
-        flex-wrap: nowrap;
-      }
-    }
-  }
-
-  &[theme='dark'],
-  &[theme='light'] {
-    display: flex;
-    justify-content: center;
-
-    .custom-toolbar {
-      justify-content: space-between;
-    }
-
-    ui-logo.logo {
-      width: 200px;
-      margin-left: 40px;
-    }
-
-    .actions {
-      color: $black;
-
-      ::ng-deep.mat-mdc-button .mdc-button__label {
-        font-weight: 400;
-      }
-
-      .profile-menu {
-        margin-right: 0;
-      }
-    }
-
-    ui-icon {
-      margin-left: 8px;
-
-      &.open {
-        transform: rotateZ(180deg);
-      }
-    }
-
-    .navigation {
-      a {
-        padding: 16px 24px;
-
-        &.active {
-          border-top: unset !important;
-          border-bottom: 2px solid $brand-50;
-        }
-      }
-    }
-
-    width: 100%;
-    height: 64px;
-    padding: 0 24px !important;
-    border-bottom: 1px solid $grayscale-30;
-
-
-    @include screen('medium') {
-      padding: 0 16px 0 0 !important;
-
-      ui-button {
-        height: 48px;
-      }
-
-      ui-logo {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: 0 !important;
-
-        ::ng-deep img {
-          height: 32px;
-        }
-      }
-
-      .custom-toolbar {
-        align-items: center;
-
-        .navigation,
-        .actions {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-}
-
-.menu-item {
-  display: flex;
-  align-items: center;
-
-  ui-icon {
-    margin-right: 16px;
-  }
-}

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

@@ -1,136 +0,0 @@
-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 { By } from "@angular/platform-browser";
-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';
-    component.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
-    });
-  });
-
-});