@testgorilla/tgo-ui 2.10.0 → 2.10.1

package/projects/tgo-canopy-ui/components/icons-showcase/icons-showcase.component.html

@@ -0,0 +1,17 @@
+<ul *ngIf="applicationTheme === 'classic'; else rebrandIcons" class="icons-showcase">
+  <li *ngFor="let icon of icons"><ui-icon size="24" color="teal" [applicationTheme]="applicationTheme" [name]="icon"></ui-icon>{{icon}}</li>
+</ul>
+
+<ng-template #rebrandIcons>
+  <ng-container *ngFor="let section of icons | keyvalue">
+    <div class="icons-section">
+      <h1>{{section.key | titlecase}}</h1>
+
+      <ul class="icons-showcase">
+        <li *ngFor="let icon of section.value">
+          <ui-icon *ngIf="icon" size="24" color="rebrand-black" [applicationTheme]="applicationTheme" [name]="icon"></ui-icon>{{icon}}
+        </li>
+      </ul>
+    </div>
+  </ng-container>
+</ng-template>

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

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { IconsShowcaseComponent } from './icons-showcase.component';
+
+@NgModule({
+  declarations: [IconsShowcaseComponent],
+  imports: [CommonModule, IconComponentModule],
+  exports: [IconsShowcaseComponent],
+  providers: [],
+})
+export class IconsShowcaseComponentModule {}

package/projects/tgo-canopy-ui/components/icons-showcase/icons-showcase.component.scss

@@ -0,0 +1,25 @@
+@use "../../theme/variables" as *;
+
+.icons-section {
+  margin-bottom: 24px;
+}
+
+.icons-showcase {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex-wrap: wrap;
+
+  li {
+    flex: 1 0 12%;
+    padding: 10px;
+    justify-content: center;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    font-size: 12px;
+    height: 110px;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,40 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconsShowcaseComponent } from './icons-showcase.component';
+import { By } from '@angular/platform-browser';
+
+describe('IconsShowcaseComponent', () => {
+  let component: IconsShowcaseComponent;
+  let fixture: ComponentFixture<IconsShowcaseComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [IconsShowcaseComponent],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconsShowcaseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it('should render correctly', () => {
+    fixture.detectChanges();
+    expect(fixture).toMatchSnapshot();
+  });
+
+  it('should render correctly', () => {
+    fixture.detectChanges();
+    expect(fixture).toMatchSnapshot();
+  });
+  describe('when component is initialized', () => {
+    it('should render icons', () => {
+      const showcase = fixture.debugElement.query(By.css('ul'));
+      expect(showcase.classes['icons-showcase']).toBeTruthy();
+    });
+  });
+});

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

@@ -0,0 +1,44 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { tgoIcons } from '../../components/icon/icon.config';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { IconsShowcaseComponent } from './icons-showcase.component';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Icons/Icons showcase',
+  component: IconsShowcaseComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [IconsShowcaseComponent],
+      imports: [IconComponentModule],
+    }),
+  ],
+  argTypes: {
+    icons: {
+      control: { disable: true },
+    },
+  },
+} as Meta;
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+const hideControls = {
+  controls: {
+    exclude: ['ngOnInit'],
+  },
+};
+
+export const AllIcons = Template.bind({});
+AllIcons.args = {
+  icons: tgoIcons,
+};
+
+AllIcons.parameters = hideControls;

package/projects/tgo-canopy-ui/components/icons-showcase/icons-showcase.component.ts

@@ -0,0 +1,43 @@
+import { Component, Inject, Input, OnChanges, OnInit, Optional } from '@angular/core';
+import { groupedIcons, tgoIcons } from '../icon/icon.config';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-icons-showcase',
+  templateUrl: './icons-showcase.component.html',
+  styleUrls: ['./icons-showcase.component.scss'],
+})
+export class IconsShowcaseComponent implements OnInit, OnChanges {
+  /**
+   * Icon name
+   *
+   * @type {Array<keyof typeof tgoIcons>}
+   * @memberof IconsShowcaseComponent
+   */
+  @Input() icons = tgoIcons;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof IconsShowcaseComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnInit(): void {
+    this.icons = this.applicationTheme === 'classic' ? tgoIcons : (groupedIcons as unknown as typeof tgoIcons);
+  }
+
+  ngOnChanges(): void {
+    this.icons = this.applicationTheme === 'classic' ? tgoIcons : (groupedIcons as unknown as typeof tgoIcons);
+  }
+}

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

@@ -0,0 +1,14 @@
+<ng-container *ngIf="applicationTheme === 'classic'; else rebrandLogo">
+  <img [attr.src]="logoURL" [alt]="type">
+</ng-container>
+
+<ng-template #rebrandLogo>
+  <div *ngIf="label && type === LogoTypeEnum.POWEREDBY; else others" class="logo-label" [style.width]="logoWidth + 'px'">
+    <h3 class="bold">{{ label }}</h3>
+    <img [attr.src]="logoURL" [alt]="type" [width]="logoWidth">
+  </div>
+
+  <ng-template #others>
+    <img [attr.src]="logoURL" [alt]="type" [width]="logoWidth">
+  </ng-template>
+</ng-template>

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { LogoComponent } from './logo.component';
+import { NgIf } from '@angular/common';
+
+@NgModule({
+  declarations: [LogoComponent],
+  imports: [NgIf],
+  exports: [LogoComponent],
+})
+export class LogoComponentModule {}

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

@@ -0,0 +1,13 @@
+@use "../../theme/variables" as *;
+
+:host {
+  position: relative;
+
+  .logo-label {
+    h3 {
+      margin-left: 35px;
+      color: $grayscale-40;
+    }
+    height: 80px;
+  }
+}

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

@@ -0,0 +1,162 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LogoComponent } from './logo.component';
+import { LogoTypeEnum, LogoPathEnum } from './logo.model';
+import { InjectionToken } from "@angular/core";
+
+describe('LogoComponent', () => {
+  let component: LogoComponent;
+  let fixture: ComponentFixture<LogoComponent>;
+  const CANOPYUI_DEFAULT_APPLICATION_THEME = new InjectionToken<string>('CANOPYUI_DEFAULT_APPLICATION_THEME');
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LogoComponent],
+      providers: [{ provide: CANOPYUI_DEFAULT_APPLICATION_THEME, useValue: 'dark' }], // optional provider
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges(); // Triggers ngOnInit and other lifecycle hooks
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set the default logo width to 200', () => {
+    expect(component.logoWidth).toBe(200);
+  });
+
+  it('should not set logo width if less than 200', () => {
+    component.width = 150;
+    expect(component.logoWidth).toBe(200); // Should not change
+  });
+
+  it('should set logo width if it is 200 or greater', () => {
+    component.width = 250;
+    expect(component.logoWidth).toBe(250); // Should update
+  });
+
+  it('should set logoURL based on type and applicationTheme', () => {
+    component.type = LogoTypeEnum.PRIMARY_BRANDMARK_PINK;
+    component.applicationTheme = 'light';
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.PRIMARY_BRANDMARK_PINK);
+
+    component.applicationTheme = 'classic';
+    component.type = LogoTypeEnum.POWEREDBY;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.POWEREDBY);
+  });
+
+  it('should update the logoURL on ngOnInit', () => {
+    component.type = LogoTypeEnum.PRIMARY_BRANDMARK_PINK;
+    component.applicationTheme = 'classic';
+    component.ngOnInit(); // Calls setURL
+    expect(component.logoURL).toBe(LogoPathEnum.DEFAULT);
+  });
+
+  it('should update the logoURL on ngOnChanges', () => {
+    component.type = LogoTypeEnum.SECONDARY_BRANDMARK_BLACK;
+    component.applicationTheme = 'light';
+    component.ngOnChanges(); // Calls setURL
+    expect(component.logoURL).toBe(LogoPathEnum.SECONDARY_BRANDMARK_BLACK);
+  });
+
+  it('should have a default application theme if injected', () => {
+    expect(component.applicationTheme).toBe('light');
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set default values on initialization', () => {
+    fixture.detectChanges();
+    expect(component.logoWidth).toBe(200);
+    expect(component.applicationTheme).toBe('light');
+  });
+
+  it('should set logoURL correctly based on applicationTheme and type', () => {
+    component.applicationTheme = 'classic';
+    component.type = LogoTypeEnum.POWEREDBY;
+    component.setURL();
+    component.ngOnChanges()
+    expect(component.logoURL).toBe(LogoPathEnum.POWEREDBY);
+    component.applicationTheme = 'light';
+    component.type = LogoTypeEnum.PRIMARY_BRANDMARK_PINK;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.PRIMARY_BRANDMARK_PINK);
+
+    component.type = LogoTypeEnum.SECONDARY_LOCKUP_BLACK;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.SECONDARY_LOCKUP_BLACK);
+
+    component.type = LogoTypeEnum.SECONDARY_LOCKUP_CREAM;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.SECONDARY_LOCKUP_CREAM);
+
+    component.type = LogoTypeEnum.SECONDARY_WORDMARK_BLACK;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.SECONDARY_WORDMARK_BLACK);
+
+    component.type = LogoTypeEnum.SECONDARY_WORDMARK_CREAM;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.SECONDARY_WORDMARK_CREAM);
+
+    component.type = LogoTypeEnum.POWEREDBY;
+    component.setURL();
+    expect(component.logoURL).toBe(LogoPathEnum.REBRAND_POWEREDBY);
+  });
+
+  it('should set default application theme if provided through constructor', () => {
+    expect(component.applicationTheme).toBe('light');
+  });
+
+  it('should update the logoURL when ngOnChanges is triggered', () => {
+    component.type = LogoTypeEnum.SECONDARY_LOCKUP_CREAM;
+    component.applicationTheme = 'classic';
+    fixture.detectChanges();
+    expect(component.logoURL).toBe(LogoPathEnum.PRIMARY_LOCKUP_PINK);
+  });
+
+  it('should set correct logo URL based on application theme and type', () => {
+    component.applicationTheme = 'classic'; // Set the theme to classic
+    component.type = LogoTypeEnum.POWEREDBY; // Set the logo type
+    component.ngOnInit(); // Initialize the component
+
+    expect(component.logoURL).toBe(LogoPathEnum.POWEREDBY); // Validate the correct logo URL
+
+    component.applicationTheme = 'dark'; // Set to a non-classic theme
+    component.type = LogoTypeEnum.PRIMARY_BRANDMARK_PINK; // Change the logo type
+    component.ngOnChanges(); // Trigger change detection
+
+    expect(component.logoURL).toBe(LogoPathEnum.PRIMARY_BRANDMARK_PINK); // Check updated logo URL
+  });
+
+  it('should set default logo URL when application theme or type does not match specific cases', () => {
+    component.applicationTheme = 'classic';
+    component.type = 'unknown' as LogoTypeEnum; // Set an unknown type
+    component.ngOnChanges(); // Trigger change detection
+
+    expect(component.logoURL).toBe(LogoPathEnum.DEFAULT); // Default logo for classic theme
+
+    //@ts-ignore
+    component.applicationTheme = 'dark';
+    component.ngOnChanges(); // Trigger change detection
+
+    expect(component.logoURL).toBe(LogoPathEnum.PRIMARY_LOCKUP_PINK); // Default logo for non-classic theme
+  });
+
+  it('should respect width input to set logo width', () => {
+    component.width = 300; // Set width to 300
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.logoWidth).toBe(300); // Check the width
+
+    component.width = 150; // Set width to 150 (less than 200)
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.logoWidth).toBe(300); // Should default to 200 when less than 200
+  });
+});

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

@@ -0,0 +1,55 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { LogoComponent } from './logo.component';
+import { LogoTypeEnum } from './logo.model';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Logo',
+  component: LogoComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [LogoComponent],
+      imports: [],
+      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 = {
+  type: LogoTypeEnum.DEFAULT,
+};
+
+Default.parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: '',
+  },
+};
+
+export const PoweredBy = Template.bind({});
+PoweredBy.args = {
+  type: LogoTypeEnum.POWEREDBY,
+};
+
+export const Reverse = Template.bind({});
+Reverse.args = {
+  type: LogoTypeEnum.REVERSE,
+};
+
+export const CustomWidth = Template.bind({});
+CustomWidth.args = {
+  type: LogoTypeEnum.DEFAULT,
+  width: 400
+};
+

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

@@ -0,0 +1,148 @@
+import { ChangeDetectionStrategy, Component, Inject, Input, Optional } from '@angular/core';
+import { LogoPathEnum, LogoTypeEnum } from './logo.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-logo',
+  templateUrl: './logo.component.html',
+  styleUrls: ['./logo.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LogoComponent {
+  /**
+   * Logo type
+   *
+   * @type {LogoTypeEnum}
+   * @memberof LogoComponent
+   */
+  @Input() type: LogoTypeEnum = LogoTypeEnum.DEFAULT;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof LogoComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   *
+   * Label. Only for ppoweredby type
+   *
+   * @type {string}
+   * @memberof LogoComponent
+   */
+  @Input() label: string = 'POWERED BY';
+
+  /**
+   * Set logo width
+   * @default 200
+   * @type {number}
+   * @memberof LogoComponent
+   */
+  @Input() set width(logoWidth: number) {
+    if (logoWidth >= 200) {
+      this.logoWidth = logoWidth;
+    }
+  }
+
+  logoWidth = 200;
+  protected readonly LogoTypeEnum = LogoTypeEnum;
+
+  /**
+   * @ignore
+   */
+  logoURL: String;
+
+  /**
+   * @ignore
+   */
+  setURL = () => {
+    if (this.applicationTheme === 'classic') {
+      switch (this.type) {
+        case LogoTypeEnum.POWEREDBY: {
+          this.logoURL = LogoPathEnum.POWEREDBY;
+          break;
+        }
+        case LogoTypeEnum.REVERSE: {
+          this.logoURL = LogoPathEnum.REVERSE;
+          break;
+        }
+        default: {
+          this.logoURL = LogoPathEnum.DEFAULT;
+          break;
+        }
+      }
+    } else {
+      switch (this.type) {
+        case LogoTypeEnum.PRIMARY_BRANDMARK_PINK: {
+          this.logoURL = LogoPathEnum.PRIMARY_BRANDMARK_PINK;
+          break;
+        }
+        case LogoTypeEnum.PRIMARY_LOCKUP_PINK: {
+          this.logoURL = LogoPathEnum.PRIMARY_LOCKUP_PINK;
+          break;
+        }
+        case LogoTypeEnum.PRIMARY_WORDMARK_PINK: {
+          this.logoURL = LogoPathEnum.PRIMARY_WORDMARK_PINK;
+          break;
+        }
+        case LogoTypeEnum.SECONDARY_BRANDMARK_BLACK: {
+          this.logoURL = LogoPathEnum.SECONDARY_BRANDMARK_BLACK;
+          break;
+        }
+        case LogoTypeEnum.SECONDARY_BRANDMARK_CREAM: {
+          this.logoURL = LogoPathEnum.SECONDARY_BRANDMARK_CREAM;
+          break;
+        }
+        case LogoTypeEnum.SECONDARY_LOCKUP_BLACK: {
+          this.logoURL = LogoPathEnum.SECONDARY_LOCKUP_BLACK;
+          break;
+        }
+        case LogoTypeEnum.SECONDARY_LOCKUP_CREAM: {
+          this.logoURL = LogoPathEnum.SECONDARY_LOCKUP_CREAM;
+          break;
+        }
+        case LogoTypeEnum.SECONDARY_WORDMARK_BLACK: {
+          this.logoURL = LogoPathEnum.SECONDARY_WORDMARK_BLACK;
+          break;
+        }
+        case LogoTypeEnum.SECONDARY_WORDMARK_CREAM: {
+          this.logoURL = LogoPathEnum.SECONDARY_WORDMARK_CREAM;
+          break;
+        }
+        case LogoTypeEnum.POWEREDBY: {
+          this.logoURL = LogoPathEnum.REBRAND_POWEREDBY;
+          break;
+        }
+        default: {
+          this.logoURL = LogoPathEnum.PRIMARY_LOCKUP_PINK;
+          break;
+        }
+      }
+    }
+  };
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  /**
+   * @ignore
+   */
+  ngOnInit(): void {
+    this.setURL();
+  }
+
+  /**
+   * @ignore
+   */
+  ngOnChanges(): void {
+    this.setURL();
+  }
+}

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

@@ -0,0 +1,30 @@
+export enum LogoTypeEnum {
+  DEFAULT = 'default',
+  POWEREDBY = 'poweredby',
+  REVERSE = 'reverse',
+  PRIMARY_BRANDMARK_PINK = 'primary-brandmark-pink',
+  PRIMARY_LOCKUP_PINK = 'primary-lockup-pink',
+  PRIMARY_WORDMARK_PINK = 'primary-wordmark-pink',
+  SECONDARY_BRANDMARK_BLACK = 'secondary-brandmark-black',
+  SECONDARY_BRANDMARK_CREAM = 'secondary-brandmark-cream',
+  SECONDARY_LOCKUP_BLACK = 'secondary-lockup-black',
+  SECONDARY_LOCKUP_CREAM = 'secondary-lockup-cream',
+  SECONDARY_WORDMARK_BLACK = 'secondary-wordmark-black',
+  SECONDARY_WORDMARK_CREAM = 'secondary-wordmark-cream',
+}
+
+export enum LogoPathEnum {
+  DEFAULT = '/images/testgorilla.svg',
+  POWEREDBY = '/images/poweredbyTG.svg',
+  REVERSE = '/images/reverseTG.svg',
+  PRIMARY_BRANDMARK_PINK = '/images/rebrand-logo/primary_brandmark_pink.svg',
+  PRIMARY_LOCKUP_PINK = '/images/rebrand-logo/primary_lockup_pink.svg',
+  PRIMARY_WORDMARK_PINK = '/images/rebrand-logo/primary_wordmark_pink.svg',
+  SECONDARY_BRANDMARK_BLACK = '/images/rebrand-logo/secondary_brandmark_black.svg',
+  SECONDARY_BRANDMARK_CREAM = '/images/rebrand-logo/secondary_brandmark_cream.svg',
+  SECONDARY_LOCKUP_BLACK = '/images/rebrand-logo/secondary_lockup_black.svg',
+  SECONDARY_LOCKUP_CREAM = '/images/rebrand-logo/secondary_lockup_cream.svg',
+  SECONDARY_WORDMARK_BLACK = '/images/rebrand-logo/secondary_wordmark_black.svg',
+  SECONDARY_WORDMARK_CREAM = '/images/rebrand-logo/secondary_wordmark_cream.svg',
+  REBRAND_POWEREDBY = '/images/rebrand-logo/powered-by.svg',
+}

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

@@ -0,0 +1,36 @@
+<div class="mobile-navbar-container">
+  <div class="user-info">
+    <span class="user-name">{{ userName }}</span>
+    <span class="user-email">{{ email }}</span>
+  </div>
+
+  <div class="routes">
+    <div *ngFor="let route of routes" (click)="navigate(route.id)" class="route"
+         [ngClass]="{'active': activedRoute === route.id}">
+      <span>{{ route.title }}</span>
+    </div>
+  </div>
+  <div class="settings" (click)="isOpenSettings = !isOpenSettings">
+    <span>Settings</span>
+    <ui-icon [applicationTheme]="'dark'" [size]="'24'"
+             [name]="isOpenSettings ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'"></ui-icon>
+  </div>
+
+  <div *ngIf="isOpenSettings">
+    <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>
+  </div>
+
+  <div class="bottom-content">
+    <ng-container *ngTemplateOutlet="contentTemplateRef"></ng-container>
+  </div>
+
+</div>