@testgorilla/tgo-ui 2.10.1 → 2.10.2

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

@@ -1,134 +0,0 @@
-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, Story } 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";
-
-const ROUTES: IRoute[] = [
-  {
-    id: 'assessments',
-    title: 'Assessments',
-  },
-  {
-    id: 'results',
-    title: 'Results',
-  },
-];
-
-export default {
-  title: 'Navbar',
-  component: NavbarComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [
-        BrowserAnimationsModule,
-        MatToolbarModule,
-        MatIconModule,
-        MatButtonModule,
-        MatRippleModule,
-        MatMenuModule,
-        LogoComponentModule,
-        IconComponentModule,
-        UiTranslatePipe,
-        AvatarComponentModule,
-        ButtonComponentModule,
-        SideSheetComponentModule
-      ],
-      declarations: [NavbarComponent],
-      providers: [],
-    }),
-  ],
-} as Meta;
-
-const Template: Story = (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',
-        },
-      ]"
-        activedRoute="${ROUTES[0].id}">
-            <ui-button actions applicationTheme="${_theme}" label="Press"></ui-button>
-      </ui-navbar>
-  `,
-    };
-  },
-} as Story;
-
-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

@@ -1,206 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  DestroyRef,
-  EventEmitter,
-  Inject,
-  Input,
-  Optional,
-  Output,
-  TemplateRef,
-} from '@angular/core';
-import { IRoute, MenuItem } from './navbar.model';
-import { LanguageService } from '../../utils/localization/language.service';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { map, ReplaySubject, startWith, Subject, switchMap } 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';
-
-@Component({
-  selector: 'ui-navbar',
-  templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class NavbarComponent {
-  // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
-  // https://github.com/storybookjs/storybook/issues/16865
-  // https://github.com/storybookjs/storybook/issues/17004
-
-  /**
-   * Routes object
-   *
-   * @type {IRoute}
-   * @memberof NavbarComponent
-   * @ignore
-   */
-  @Input() routes: IRoute[] = [];
-
-  /**
-   * Actived route id
-   *
-   * @type {string}
-   * @memberof NavbarComponent
-   */
-  @Input() activedRoute = '';
-
-  /**
-   * 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[] = [];
-
-  /**
-   * The language to be used
-   * @property language
-   * @type {Language}
-   * @memberof NavbarComponent
-   */
-  @Input() language = LanguageService.defaultLanguage;
-
-  /**
-   *
-   * 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
-   * @tyoe {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 = false;
-
-  /**
-   * @ignore
-   */
-  @Output() navigateEvent: EventEmitter<string> = new EventEmitter<string>();
-
-  /**
-   * @ignore
-   */
-  @Output() menuItemClicked: EventEmitter<string> = new EventEmitter<string>();
-
-  /**
-   * @ignore
-   */
-  @Output() logoutEvent: EventEmitter<void> = new EventEmitter<void>();
-
-  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)))
-  );
-  protected readonly isTablet$ = this.tabletBreakpointObs$.pipe(
-    switchMap(breakpoint => this.breakpointObserver.observe(`(max-width: ${breakpoint}px)`).pipe(map(v => v.matches)))
-  );
-  protected isOpened = false;
-
-  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.language = this.language;
-    navbarSideSheetComponent.contentTemplateRef = this.contentTemplateRef;
-
-    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);
-  }
-
-  onOpenChange(isOpened: boolean): void {
-    this.isOpened = isOpened;
-  }
-}

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

@@ -1,12 +0,0 @@
-import { IconName } from '../icon/icon.model';
-
-export interface IRoute {
-  id: string;
-  title: string;
-}
-
-export interface MenuItem {
-  id: string;
-  icon: IconName;
-  text: string;
-}

package/projects/tgo-canopy-ui/components/overflow-menu/__snapshots__/overflow-menu.component.spec.ts.snap

@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`OverflowMenuComponent should render correctly 1`] = `
-<ui-overflow-menu
-  applicationTheme={[Function String]}
-  ariaRequired="false"
-  defaultAppTheme="null"
-  iconTrigger={[Function String]}
-  menuLabel=""
-  selectItem={[Function EventEmitter_]}
->
-  <div
-    class="overflow-menu-container"
-    theme="light"
-  >
-    <ui-button
-      aria-expanded="false"
-      aria-haspopup="menu"
-      class="mat-mdc-menu-trigger overflow-menu-opener"
-    />
-    <mat-menu
-      backdropclass="overflow-menu-backdrop"
-      ngskiphydration=""
-    >
-    </mat-menu>
-  </div>
-</ui-overflow-menu>
-`;

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

@@ -1,47 +0,0 @@
-<div class="overflow-menu-container" [attr.theme]="applicationTheme">
-  <ui-button
-    [matMenuTriggerFor]="menu"
-    [label]="menuLabel"
-    [variant]="'menuTrigger'"
-    [size]="applicationTheme === 'classic' ? 'small' : 'big'"
-    [justIcon]="true"
-    [iconName]="iconTrigger"
-    (keydown.tab)="$event.stopPropagation()"
-    (keydown.shift.tab)="$event.stopPropagation()"
-    [applicationTheme]="applicationTheme"
-    [ariaLabel]="ariaLabel"
-    [ariaRequired]="ariaRequired"
-    class="overflow-menu-opener"
-  ></ui-button>
-  <mat-menu #menu="matMenu" class="overflow-menu" [overlapTrigger]="false" backdropClass="overflow-menu-backdrop">
-    <ng-container  *ngFor="let button of buttons">
-      <ng-container
-        *ngIf="button.btnTemplate; else uiButton"
-        [ngTemplateOutlet]="button.btnTemplate"
-        [ngTemplateOutletContext]="{ $implicit: button }"
-      ></ng-container>
-
-      <ng-template #uiButton>
-        <ui-button
-          [applicationTheme]="applicationTheme"
-          [fullWidth]="true"
-          [disabledScaleOnClick]="true"
-          [variant]="'menuCell'"
-          iconPosition="left"
-          [iconName]="button.icon"
-          [label]="button.label"
-          [value]="button.value"
-          (buttonClickEvent)="onSelectItem($event, button.value)"
-          (keydown.Tab)="$event.stopPropagation()"
-          (keydown.shift.tab)="$event.stopPropagation()"
-          [ariaLabel]="ariaLabel + '--' + button.label"
-          [ngClass]="{'destructive': !!button.isDestructive} "
-          [disabled]="button.disabled ?? false"
-        ></ui-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

@@ -1,13 +0,0 @@
-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';
-
-@NgModule({
-  declarations: [OverflowMenuComponent],
-  imports: [CommonModule, ButtonComponentModule, IconComponentModule, MatMenuModule],
-  exports: [OverflowMenuComponent],
-})
-export class OverflowMenuComponentModule {}

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

@@ -1,98 +0,0 @@
-@use "../../theme/variables" as *;
-
-:host {
-  ::ng-deep .overflow-menu .mat-mdc-menu-content:not(:empty) {
-    padding: 0;
-  }
-}
-
-.overflow-menu-backdrop + * {
-  .mat-mdc-menu-panel {
-    min-height: 0;
-    border-radius: 8px;
-    box-shadow: 2px 24px 48px 8px rgba(0, 0, 0, 0.08);
-  }
-
-  .mat-mdc-menu-content:not(:empty) {
-    padding: 0;
-  }
-
-  ui-button:first-child button.mat-mdc-unelevated-button.menuCell {
-    border-radius: 8px 8px 0 0;
-  }
-
-  ui-button:last-child button.mat-mdc-unelevated-button.menuCell {
-    border-radius: 0 0 8px 8px;
-  }
-
-  ui-button.destructive {
-
-    button.mat-mdc-unelevated-button.menuCell {
-      color: $tgo-error-default;
-
-      mat-icon.black svg {
-        color: $tgo-error-default;
-      }
-
-      &:hover {
-        background-color: $tgo-error-secondary;
-      }
-
-      &:focus {
-
-        &.cdk-focused.cdk-mouse-focused {
-          background-color: $tgo-error-secondary;
-        }
-      }
-    }
-  }
-}
-
-[theme="dark"], [theme="light"] {
-
-
-  .overflow-menu-backdrop + * {
-    .mat-mdc-menu-panel {
-      min-height: 0;
-      border-radius: 10px;
-      box-shadow: $box-shadow-hover-state;
-    }
-    ui-button {
-      button.mat-mdc-unelevated-button.menuCell {
-        &:hover {
-          background-color: $brand-10;
-        }
-
-        &:active {
-          background-color: $brand-20;
-        }
-      }
-
-      &.destructive {
-        button.mat-mdc-unelevated-button.menuCell {
-          color: $error-50 !important;
-
-          mat-icon.black svg {
-            color: $error-50 !important;
-          }
-
-          &:hover {
-            background-color: $brand-10;
-          }
-
-          &:active {
-            background-color: $brand-20;
-          }
-
-          &:focus {
-
-            &.cdk-focused.cdk-mouse-focused {
-              background-color: $brand-20;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-

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

@@ -1,124 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { MatMenuModule } from '@angular/material/menu';
-import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { tgoIcons } from '../icon/icon.config';
-import { IconName } from '../icon/icon.model';
-import { OverflowMenuComponent } from './overflow-menu.component';
-
-describe('OverflowMenuComponent', () => {
-  let component: OverflowMenuComponent;
-  let fixture: ComponentFixture<OverflowMenuComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [OverflowMenuComponent],
-      imports: [MatMenuModule, NoopAnimationsModule],
-      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(OverflowMenuComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('should create', () => {
-    fixture.detectChanges();
-    expect(component).toBeTruthy();
-  });
-
-  it('should render correctly', () => {
-    fixture.detectChanges();
-    expect(fixture).toMatchSnapshot();
-  });
-  //testing buttons input
-  describe('when buttons input is initialized', () => {
-    it('should call render all items', fakeAsync(() => {
-      component.buttons = [
-        {
-          icon: 'Edit',
-          label: 'Edit',
-          value: 'Edit value',
-        },
-        {
-          icon: 'Copy',
-          label: 'Copy',
-          value: 'Copy value',
-        },
-      ];
-      fixture.detectChanges();
-      let button = fixture.debugElement.nativeElement.querySelector('ui-button');
-      button.click();
-      tick();
-      fixture.detectChanges();
-      fixture.whenStable().then(() => {
-        const menuItems = fixture.nativeElement.parentNode.querySelectorAll('.mat-mdc-menu-panel ui-button');
-        expect(menuItems.length).toBe(2);
-      });
-    }));
-  });
-
-  //Testing iconTrigger input
-  describe('when iconTrigger input is initialized', () => {
-    it('should render Menu-ellipsis icon as default', () => {
-      fixture.detectChanges();
-      const buttonTrigger = fixture.debugElement.query(By.css('ui-button'));
-      expect(buttonTrigger.properties['iconName']).toBe('Menu-ellipsis');
-    });
-    describe('when it changes its value', () => {
-      it('should render new iconName value', () => {
-        const randIconIdx = Math.floor(Math.random() * tgoIcons.length);
-        component.iconTrigger = tgoIcons[randIconIdx] as IconName;
-        fixture.detectChanges();
-        const buttonTrigger = fixture.debugElement.query(By.css('ui-button'));
-        expect(buttonTrigger.properties['iconName']).toBe(tgoIcons[randIconIdx]);
-      });
-    });
-  });
-  //Testing menuLabel input
-  describe('when menuLabel input is initialized', () => {
-    it('should render menuLabel value', () => {
-      component.menuLabel = 'Test';
-      fixture.detectChanges();
-      const buttonTrigger = fixture.debugElement.query(By.css('ui-button'));
-      expect(buttonTrigger.properties['label']).toBe('Test');
-    });
-  });
-  //Testing buttonClick output
-  describe('when mat menu item is clicked', () => {
-    it('should call onSelectItem when clicked', fakeAsync(() => {
-      jest.spyOn(component, 'onSelectItem');
-      component.buttons = [
-        {
-          icon: 'Edit',
-          label: 'Edit',
-          value: 'Edit value',
-        },
-        {
-          icon: 'Copy',
-          label: 'Copy',
-          value: 'Copy value',
-        },
-      ];
-      fixture.detectChanges();
-      let button = fixture.debugElement.nativeElement.querySelector('ui-button');
-      button.click();
-      tick();
-      fixture.detectChanges();
-      fixture.whenStable().then(() => {
-        const menuItems = fixture.nativeElement.parentNode.querySelectorAll('.mat-mdc-menu-panel ui-button');
-        menuItems[0].dispatchEvent(new Event('buttonClickEvent'));
-        expect(component.onSelectItem).toHaveBeenCalled();
-      });
-    }));
-    it('should emit the event when buttonClick is called', () => {
-      const emitSpy = jest.spyOn(component.selectItem, 'emit');
-      const eventMock = new Event('click');
-      component.onSelectItem(eventMock, 'test');
-      fixture.detectChanges();
-      expect(emitSpy).toHaveBeenCalled();
-    });
-  });
-});