angular-matecu 2.0.6 → 2.0.9

package/src/lib/modules/matecu-spinner/components/matecu-spinner/matecu-spinner.component.css

@@ -0,0 +1,15 @@
+
+.matecu-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    
+}
+.matecu-spinner     > svg {
+    width: 80px;;
+    height: 80px;;
+}
+.matecu-spinner__hidden {
+    display: none;
+}

package/src/lib/modules/matecu-spinner/components/matecu-spinner/matecu-spinner.component.html

@@ -0,0 +1,35 @@
+<ng-container *ngIf="active">
+    <svg xmlns:svg="http://www.w3.org/2000/svg" [attr.width]="size" [attr.height]="size"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" viewBox="0 0 128 128" xml:space="preserve">
+    <rect x="0" y="0" width="100%" height="100%" fill="transparent" />
+    <g>
+        <path class="matecu-spinner__100" d="M122.5 69.25H96.47a33.1 33.1 0 0 0 0-10.5h26.05a5.25 5.25 0 0 1 0 10.5z" [attr.fill]="color"
+            fill-opacity="1" />
+        <path class="matecu-spinner__30" d="M112.04 97.83L89.47 84.8a33.1 33.1 0 0 0 5.25-9.1l22.57 13.03a5.25 5.25 0 0 1-5.28 9.1z" [attr.fill]="color"
+            fill-opacity="0.3" />
+        <path class="matecu-spinner__30" d="M88.68 117.35L75.65 94.78a33.1 33.1 0 0 0 9.1-5.25l13.02 22.57a5.25 5.25 0 1 1-9.1 5.25z"
+            [attr.fill]="color" fill-opacity="0.3" />
+        <path class="matecu-spinner__30" d="M58.7 122.57V96.5a33.1 33.1 0 0 0 10.5 0v26.07a5.25 5.25 0 0 1-10.5 0z" [attr.fill]="color"
+            fill-opacity="0.3" />
+        <path class="matecu-spinner__30" d="M30.1 112.1l13.04-22.57a33.1 33.1 0 0 0 9.1 5.25L39.2 117.35a5.25 5.25 0 1 1-9.1-5.25z" [attr.fill]="color"
+            fill-opacity="0.3" />
+        <path class="matecu-spinner__30" d="M10.6 88.74L33.16 75.7a33.1 33.1 0 0 0 5.25 9.1L15.88 97.83a5.25 5.25 0 1 1-5.25-9.1z" [attr.fill]="color"
+            fill-opacity="0.3" />
+        <path class="matecu-spinner__40" d="M5.37 58.75h26.06a33.1 33.1 0 0 0 0 10.5H5.37a5.25 5.25 0 0 1 0-10.5z" [attr.fill]="color"
+            fill-opacity="0.4" />
+        <path class="matecu-spinner__50" d="M15.85 30.17L38.4 43.2a33.1 33.1 0 0 0-5.24 9.1L10.6 39.25a5.25 5.25 0 1 1 5.25-9.1z" [attr.fill]="color"
+            fill-opacity="0.5" />
+        <path class="matecu-spinner__60" d="M39.2 10.65l13.03 22.57a33.1 33.1 0 0 0-9.1 5.25l-13-22.57a5.25 5.25 0 1 1 9.1-5.25z" [attr.fill]="color"
+            fill-opacity="0.6" />
+        <path class="matecu-spinner__70" d="M69.2 5.43V31.5a33.1 33.1 0 0 0-10.5 0V5.42a5.25 5.25 0 1 1 10.5 0z" [attr.fill]="color"
+            fill-opacity="0.7" />
+        <path class="matecu-spinner__80" d="M97.77 15.9L84.75 38.47a33.1 33.1 0 0 0-9.1-5.25l13.03-22.57a5.25 5.25 0 1 1 9.1 5.25z" [attr.fill]="color"
+            fill-opacity="0.8" />
+        <path class="matecu-spinner__90" d="M117.3 39.26L94.7 52.3a33.1 33.1 0 0 0-5.25-9.1l22.57-13.03a5.25 5.25 0 0 1 5.25 9.1z" [attr.fill]="color"
+            fill-opacity="0.9" />
+        <animateTransform attributeName="transform" type="rotate"
+            values="0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64"
+            calcMode="discrete" dur="600ms" repeatCount="indefinite"></animateTransform>
+    </g>
+</svg>
+</ng-container>

package/src/lib/modules/matecu-spinner/components/matecu-spinner/matecu-spinner.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuSpinnerComponent } from './matecu-spinner.component';
+
+describe('MatecuSpinnerComponent', () => {
+  let component: MatecuSpinnerComponent;
+  let fixture: ComponentFixture<MatecuSpinnerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuSpinnerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuSpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/matecu-spinner/components/matecu-spinner/matecu-spinner.component.ts

@@ -0,0 +1,47 @@
+import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { MatecuSpinnerService } from '../../services/matecu-spinner.service';
+import { takeUntil, tap } from 'rxjs/operators';
+@Component({
+  selector: 'matecu-spinner',
+  templateUrl: './matecu-spinner.component.html',
+  styleUrls: ['./matecu-spinner.component.css']
+})
+export class MatecuSpinnerComponent implements OnInit, OnDestroy {
+
+  private destroy$ = new Subject();
+  private hiddenClass = 'matecu-spinner--hidden';
+  private activeCache = false;
+  @HostBinding('class') className = 'matecu-spinner';
+  @Input() color = '#2196F3';
+  @Input() global = false;
+  get active(): boolean{
+    return this.activeCache;
+  }
+  @Input() set active(value: boolean) {
+    if (this.global) {
+      return;
+    }
+    this.activeCache = value;
+    this.className = value
+      ? this.className.replace(` ${this.hiddenClass}`, '')
+      : (this.className += ` ${this.hiddenClass}`);
+  }
+  @Input() size = '70px';
+
+  constructor(
+    private spinnerService: MatecuSpinnerService,
+  ) {}
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+  ngOnInit(): void {
+    if (this.global) {
+      this.spinnerService.watch().pipe(
+        tap(value => this.activeCache = value),
+        takeUntil(this.destroy$)
+      ).subscribe();
+    }
+  }
+}

package/src/lib/modules/matecu-spinner/components/matecu-spinner/spinner-loader.component.scss

@@ -0,0 +1,13 @@
+$size: 80px;
+:host, .matecu-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    > svg {
+        width: $size;
+        height: $size;
+    }
+    &__hidden {
+        display: none;
+    }
+}

package/src/lib/modules/matecu-spinner/matecu-spinner.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatecuSpinnerComponent } from './components/matecu-spinner/matecu-spinner.component';
+import { MatecuSpinnerService } from './services/matecu-spinner.service';
+
+
+
+@NgModule({
+  declarations: [MatecuSpinnerComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    MatecuSpinnerComponent
+  ]
+})
+export class MatecuSpinnerModule { }

package/src/lib/modules/matecu-spinner/services/matecu-spinner.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MatecuSpinnerService } from './matecu-spinner.service';
+
+describe('MatecuSpinnerService', () => {
+  let service: MatecuSpinnerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MatecuSpinnerService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/modules/matecu-spinner/services/matecu-spinner.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MatecuSpinnerService {
+  private active$ = new BehaviorSubject<boolean>(false);
+  private requestsKeys: string[] = [];
+  constructor() {}
+
+  watch(): Observable<boolean> {
+    return this.active$.pipe();
+  }
+  add(customKey?: string): string {
+    const key = (typeof(customKey) === 'string' && customKey.length > 0) ? customKey : this.createKey();
+    this.requestsKeys.push(key);
+    this.updateStatus();
+    return key;
+  }
+  remove(key: string): void {
+    this.requestsKeys = this.requestsKeys.filter(
+      (requestKey) => requestKey !== key
+    );
+    this.updateStatus();
+  }
+  clear(): void {
+    this.requestsKeys = [];
+    this.updateStatus();
+  }
+  private updateStatus(): void {
+    const active = this.requestsKeys.length > 0;
+    this.active$.next(active);
+  }
+  private createKey(): string {
+    const time = new Date().getTime();
+    const complement = Math.random();
+    return `${time}__${complement}`;
+  }
+}

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-actions/matecu-topbar-actions.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-actions/matecu-topbar-actions.component.scss

@@ -0,0 +1,8 @@
+@import '../../scss/variables.scss';
+:host {
+  display: flex;
+  align-items: center;
+  padding: 7px;
+  min-height: $toolbar-height;
+  box-sizing: border-box;
+}

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-actions/matecu-topbar-actions.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuTopbarActionsComponent } from './matecu-topbar-actions.component';
+
+describe('MatecuTopbarActionsComponent', () => {
+  let component: MatecuTopbarActionsComponent;
+  let fixture: ComponentFixture<MatecuTopbarActionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuTopbarActionsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuTopbarActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-actions/matecu-topbar-actions.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'matecu-topbar-actions',
+  templateUrl: './matecu-topbar-actions.component.html',
+  styleUrls: ['./matecu-topbar-actions.component.scss'],
+})
+export class MatecuTopbarActionsComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-body/matecu-topbar-body.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-body/matecu-topbar-body.component.scss

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+  padding: 0;
+  padding-top: 2rem;
+  overflow-y: auto;
+  @media screen and (max-width: 770px) {
+    padding-bottom: 80px;
+  }
+}

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-body/matecu-topbar-body.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuTopbarBodyComponent } from './matecu-topbar-body.component';
+
+describe('MatecuTopbarBodyComponent', () => {
+  let component: MatecuTopbarBodyComponent;
+  let fixture: ComponentFixture<MatecuTopbarBodyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuTopbarBodyComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuTopbarBodyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-body/matecu-topbar-body.component.ts

@@ -0,0 +1,23 @@
+import { Component, ElementRef, HostBinding, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'matecu-topbar-body',
+  templateUrl: './matecu-topbar-body.component.html',
+  styleUrls: ['./matecu-topbar-body.component.scss'],
+})
+export class MatecuTopbarBodyComponent implements OnInit {
+  @HostBinding('class') className = 'matecu-topbar-body';
+  constructor(private elementRef: ElementRef) {}
+
+  ngOnInit(): void {}
+
+  scrollTop(): void {
+    const element = this.elementRef.nativeElement;
+    if (!!element) {
+      element.scroll({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }
+  }
+}

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-fab/matecu-topbar-fab.component.html

@@ -0,0 +1,3 @@
+  <button type="button" mat-fab [ngClass]="{'extended': extended}" [color]="color" (click)="onClickAction()">
+    <ng-content></ng-content>
+  </button>

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-fab/matecu-topbar-fab.component.scss

@@ -0,0 +1,26 @@
+:host {
+  display: flex;
+  align-items: flex-end;
+  height: 100%;
+  position: relative;
+  z-index: 2;
+  button {
+    transform: translateY(50%);
+    &.extended {
+      border-radius: 27px;
+      height: 55px;
+      width: auto;
+      padding: 0 1rem !important;
+    }
+  }
+  @media screen and (max-width: 768px) {
+    height: auto;
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    transform: initial;
+    button {
+      transform: translateY(0);
+    }
+  }
+}

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-fab/matecu-topbar-fab.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuTopbarFabComponent } from './matecu-topbar-fab.component';
+
+describe('MatecuTopbarFabComponent', () => {
+  let component: MatecuTopbarFabComponent;
+  let fixture: ComponentFixture<MatecuTopbarFabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuTopbarFabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuTopbarFabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-fab/matecu-topbar-fab.component.ts

@@ -0,0 +1,27 @@
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+
+@Component({
+  selector: 'matecu-topbar-fab',
+  templateUrl: './matecu-topbar-fab.component.html',
+  styleUrls: ['./matecu-topbar-fab.component.scss'],
+})
+export class MatecuTopbarFabComponent implements OnInit {
+  @Input() color = 'accent';
+  @Input() extended = false;
+  @Output() clickAction = new EventEmitter<void>();
+  constructor() {}
+
+  @HostBinding('class') className = 'matecu-topbar-fab';
+  ngOnInit(): void {}
+
+  onClickAction(): void {
+    this.clickAction.emit();
+  }
+}

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-layout/matecu-topbar-layout.component.html

@@ -0,0 +1,23 @@
+  <mat-toolbar [color]="color">
+    <ng-container *ngIf="navMenu">
+      <div class="matecu-topbar-layout__menu-btn">
+        <button mat-icon-button type="button" (click)="onClickNavMenu()">
+          <mat-icon>menu</mat-icon>
+        </button>
+      </div>
+    </ng-container>
+    <ng-content select="matecu-topbar-fab"></ng-content>
+    <ng-content select="matecu-topbar-title"></ng-content>
+    <ng-content select="matecu-topbar-search"></ng-content>
+    <ng-content select="matecu-topbar-actions"></ng-content>
+    <ng-container *ngIf="actionMenu">
+      <div class="matecu-topbar-layout__more-actions-btn">
+        <button type="button" (click)="onClickActionMenu()" mat-icon-button>
+          <mat-icon>more_vert</mat-icon>
+        </button>
+      </div>
+    </ng-container>
+
+
+  </mat-toolbar>
+  <ng-content select="matecu-topbar-body"></ng-content>

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-layout/matecu-topbar-layout.component.scss

@@ -0,0 +1,48 @@
+@import '../../scss/variables.scss';
+:host,
+.matecu-topbar-layout {
+  display: grid;
+  height: 100vh;
+  max-width: 100vw;
+  overflow: hidden;
+  grid-template-rows: auto 1fr;
+  position: relative;
+  &,
+  * {
+    box-sizing: border-box;
+  }
+  // overflow: hidden;
+  mat-toolbar {
+    position: relative;
+    height: $toolbar-height;
+    max-height: $toolbar-height;
+
+    transition: all 300ms;
+    align-items: flex-start;
+  }
+  &__menu-btn,
+  &__more-actions-btn {
+    min-height: $toolbar-height;
+    display: flex;
+    align-items: center;
+  }
+  &__menu-btn {
+    @media screen and (max-width: 425px) {
+      margin-right: auto;
+    }
+  }
+}
+:host.matecu-topbar-layout--prominent {
+  .mat-toolbar {
+    height: $toolbar-prominent-height;
+    max-height: $toolbar-prominent-height;
+  }
+}
+:host.matecu-topbar-layout--scrolling {
+  .mat-toolbar {
+    height: $toolbar-height;
+    max-height: $toolbar-height;
+    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+      0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  }
+}

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-layout/matecu-topbar-layout.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuTopbarLayoutComponent } from './matecu-topbar-layout.component';
+
+describe('MatecuTopbarLayoutComponent', () => {
+  let component: MatecuTopbarLayoutComponent;
+  let fixture: ComponentFixture<MatecuTopbarLayoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuTopbarLayoutComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuTopbarLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-layout/matecu-topbar-layout.component.ts

@@ -0,0 +1,93 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { ParamMap } from '@angular/router';
+import { fromEvent, Observable, of } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+@Component({
+  selector: 'matecu-topbar-layout',
+  templateUrl: './matecu-topbar-layout.component.html',
+  styleUrls: ['./matecu-topbar-layout.component.scss'],
+})
+export class MatecuTopbarLayoutComponent implements AfterViewInit {
+  @HostBinding('class') className = 'matecu-topbar-layout';
+  showSearchInput = false;
+  search = false;
+  searchInput: FormControl = new FormControl();
+  isProminent = false;
+  private scrollingClass = 'matecu-topbar-layout--scrolling';
+  private prominentClass = 'matecu-topbar-layout--prominent';
+  @Input() color = 'primary';
+  @Input() navMenu = true;
+  @Input() actionMenu = false;
+  @Output() clickNavMenu = new EventEmitter<void>();
+  @Output() clickActionMenu = new EventEmitter<void>();
+  @Input() set prominent(value: boolean) {
+    this.isProminent = value;
+    if (value) {
+      this.className += ' ' + this.prominentClass;
+    } else {
+      const regex = new RegExp(this.prominentClass, 'ig');
+      this.className = this.className.replace(regex, '').trim();
+    }
+  }
+  constructor() {}
+
+  ngAfterViewInit(): void {
+    this.spyScroll().subscribe();
+  }
+
+  toogleSearch(): void {
+    this.showSearchInput = !this.showSearchInput;
+  }
+  closeSearch(): void {
+    this.showSearchInput = false;
+    this.searchInput.reset();
+  }
+  onMenuClick(): void {}
+  onClickNavMenu(): void {
+    this.clickNavMenu.emit();
+  }
+  onClickActionMenu(): void {
+    this.clickActionMenu.emit();
+  }
+  spyScroll(): Observable<HTMLElement | null> {
+    const scrollabe: HTMLElement | null = document.querySelector(
+      '.matecu-topbar-body'
+    );
+    if (!scrollabe) {
+      return of(null);
+    }
+    return fromEvent(scrollabe, 'scroll').pipe(
+      tap(() => this.applyScrollStyles(scrollabe)),
+      map(() => scrollabe)
+    );
+  }
+  applyScrollStyles(scrollabe: HTMLElement): void {
+    if (!scrollabe) {
+      return;
+    }
+    const maxScrollHeight = scrollabe.scrollHeight;
+    const screenHeight = screen.availHeight;
+    if (screenHeight > maxScrollHeight) {
+      return;
+    }
+    const scrollPosition = scrollabe.scrollTop;
+    if (scrollPosition > 20) {
+      this.className += ' ' + this.scrollingClass;
+    }
+    if (scrollPosition < 10) {
+      const regexp = new RegExp(this.scrollingClass, 'ig');
+      this.className = this.className.replace(regexp, '').trim();
+    }
+  }
+}

package/src/lib/modules/matecu-topbar-layout/components/matecu-topbar-search/matecu-topbar-search.component.html

@@ -0,0 +1,12 @@
+<button mat-icon-button class="only-mobile" (click)="toogleSearch()">
+  <mat-icon>search</mat-icon>
+</button>
+
+<div class="matecu-topbar-search__input" [ngClass]="{'mobile-input-active': showMobileInput}">
+  <mat-icon>search</mat-icon>
+  <input [type]="inputType" [formControl]="searchInput" [placeholder]="searchPlaceholder" />
+  <button mat-icon-button (click)="closeMobile()" [ngClass]="{'show-btn': showDescktopCleanBtn}">
+    <mat-icon>close</mat-icon>
+  </button>
+
+</div>