@cauca-911/material 20.2.13 → 20.2.15

package/src/lib/components/cauca-date-time-picker/components/dialog-date-time-picker/dialog-date-time-picker.component.ts

@@ -1,227 +0,0 @@
-import { Component, HostListener, OnInit, signal, WritableSignal, inject } from '@angular/core';
-import { provideNativeDateAdapter } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { MatListModule } from '@angular/material/list';
-import { DialogDateTimePickerOptions, DialogDateTimePickerDataDisabled, DialogDateTimePickerDataStep } from '../../models/dialog-date-time-picker-data';
-import { CaucaCoreForChildModule } from '@cauca-911/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { CommonModule } from '@angular/common';
-import { MobileTimePickerComponent } from '../mobile-time-picker/mobile-time-picker.component';
-import { DesktopTimePickerComponent } from '../desktop-time-picker/desktop-time-picker.component';
-
-@Component({
-    selector: 'cauca-dialog-date-time-picker',
-    imports: [
-        CommonModule,
-        CaucaCoreForChildModule,
-        MatButtonModule,
-        MatDatepickerModule,
-        MatIconModule,
-        MatListModule,
-        MobileTimePickerComponent,
-        DesktopTimePickerComponent
-    ],
-    providers: [provideNativeDateAdapter()],
-    templateUrl: './dialog-date-time-picker.component.html',
-    styleUrl: './dialog-date-time-picker.component.scss'
-})
-export class DialogDateTimePickerComponent implements OnInit {
-
-  public selectedHour = 0;
-  public selectedMinute = 0;
-  public selectedSecond = 0;
-  public initialDate: Date = null;
-  public selectedDate: Date = null;
-  public minimumDate = new Date();
-  public maximumDate = new Date();
-  public showSeconds: boolean = false;
-  public showClearButton: boolean = true;
-  public showButtonIcons: boolean = true;
-
-  public hours = [...Array(24).keys()];
-  public minutes = [...Array(60).keys()];
-  public seconds = [...Array(60).keys()];
-  public showMobileUi: boolean = false;
-
-  public showTime: WritableSignal<boolean> = signal(true);
-
-  public disabled: DialogDateTimePickerDataDisabled = {
-    hours: true,
-    someHours: [],
-    minutes: true,
-    someMinutes: [],
-    seconds: true,
-    someSeconds: [],
-  };
-
-  private step: DialogDateTimePickerDataStep = {
-    hours: 1,
-    minutes: 1,
-    seconds: 1,
-  };
-
-  private readonly dialogRef = inject<MatDialogRef<DialogDateTimePickerComponent>>(MatDialogRef);
-  private readonly options = inject<DialogDateTimePickerOptions>(MAT_DIALOG_DATA);
-
-  public constructor() {
-    const options = this.options;
-
-    this.step = options.step || this.step;
-    this.showSeconds = options.showSeconds;
-    this.showButtonIcons = options.showButtonIcons ?? this.showButtonIcons;
-    this.showClearButton = options.showClearButton ?? this.showClearButton;
-    this.showTime.set(options.showTime ?? true);
-    this.setListHoursMinutes();
-    this.initialEachComponentValue(options);
-  }
-
-  public ngOnInit(): void {
-    this.onWindowWithChange(window.innerWidth);
-  }
-
-  @HostListener('window:resize', ['$event'])
-  public onResize(event) {
-    this.onWindowWithChange(event.target.innerWidth);
-  }
-
-  public dateChanged(date: Date): void {
-    if (date) {
-      this.selectedDate = date;
-      this.selectedDate.setHours(this.selectedHour);
-      this.selectedDate.setMinutes(this.selectedMinute);
-      this.selectedDate.setSeconds(this.selectedSecond);
-      this.disabled.hours = false;
-      this.disabled.someHours = this.hours.filter(hour => this.hourOfSelectedDateIsDisabled(hour));
-    } else {
-      this.selectedDate = null;
-      this.disabled.hours = true;
-    }
-  }
-
-  public hourChanged(hour: number): void {
-    if (this.disabled.hours || this.disabled.someHours.includes(hour)) return;
-
-    this.selectedHour = hour;
-    this.selectedDate.setHours(hour);
-    this.disabled.minutes = false;
-    this.disabled.someMinutes = this.minutes.filter(minute => this.minuteOfSelectedDateIsDisabled(minute));
-  }
-
-  public minuteChanged(minute: number): void {
-    if (this.disabled.minutes || this.disabled.someMinutes.includes(minute)) return;
-
-    this.selectedMinute = minute;
-    this.selectedDate.setMinutes(minute);
-    this.disabled.seconds = false;
-    this.disabled.someSeconds = this.seconds.filter(second => this.secondOfSelectedDateIsDisabled(second));
-  }
-
-  public secondChanged(second: number): void {
-    if (this.disabled.seconds || this.disabled.someSeconds.includes(second)) return;
-
-    this.selectedSecond = second;
-    this.selectedDate.setSeconds(second);
-  }
-
-  public clear(): void {
-    this.dialogRef.close({
-      value: null
-    });
-  }
-
-  public cancel(): void {
-    this.dialogRef.close({
-      value: this.initialDate
-    });
-  }
-
-  public confirm(): void {
-    this.dialogRef.close({
-      value: this.selectedDate
-    });
-  }
-
-  private onWindowWithChange(width: number): void {
-    this.showMobileUi = width && width <= 555;
-  }
-
-  private hourOfSelectedDateIsDisabled(hour: number): boolean {
-    if (this.selectedDateIsTheMinimumDate()) {
-      return hour < this.minimumDate.getHours();
-    } else if (this.selectedDateIsTheMaximumDate()) {
-      return hour > this.maximumDate.getHours();
-    }
-
-    return false;
-  }
-
-  private minuteOfSelectedDateIsDisabled(minute: number): boolean {
-    if (
-      this.selectedDateIsTheMinimumDate() &&
-      this.selectedDate.getHours() === this.minimumDate.getHours()
-    ) {
-      return minute < this.minimumDate.getMinutes();
-    } else if (
-      this.selectedDateIsTheMaximumDate() &&
-      this.selectedDate.getHours() === this.maximumDate.getHours()
-    ) {
-      return minute > this.maximumDate.getMinutes();
-    }
-
-    return false;
-  }
-
-  private secondOfSelectedDateIsDisabled(second: number): boolean {
-    if (
-      this.selectedDateIsTheMinimumDate() &&
-      this.selectedDate.getHours() === this.minimumDate.getHours() &&
-      this.selectedDate.getMinutes() === this.minimumDate.getMinutes()
-    ) {
-      return second < this.minimumDate.getSeconds();
-    } else if (
-      this.selectedDateIsTheMaximumDate() &&
-      this.selectedDate.getMinutes() === this.maximumDate.getMinutes()
-    ) {
-      return second > this.maximumDate.getSeconds();
-    }
-
-    return false;
-  }
-
-  private initialEachComponentValue(options: DialogDateTimePickerOptions): void {
-    this.initialDate = options.selectedDate ? new Date(options.selectedDate) : null;
-    this.minimumDate = options.minimumDate ? new Date(options.minimumDate) : null;
-    this.maximumDate = options.maximumDate ? new Date(options.maximumDate) : null;
-    this.selectedDate = options.selectedDate ? new Date(options.selectedDate) : new Date();
-    this.dateChanged(options.selectedDate ? new Date(options.selectedDate) : null);
-    this.hourChanged(options.selectedDate ? new Date(options.selectedDate).getHours() : 0);
-    this.minuteChanged(options.selectedDate ? new Date(options.selectedDate).getMinutes() : 0);
-    this.secondChanged(options.selectedDate ? new Date(options.selectedDate).getSeconds() : 0);
-  }
-
-  private selectedDateIsTheMinimumDate(): boolean {
-    return (
-      this.minimumDate &&
-      this.selectedDate.getFullYear() === this.minimumDate.getFullYear() &&
-      this.selectedDate.getMonth() === this.minimumDate.getMonth() &&
-      this.selectedDate.getDate() === this.minimumDate.getDate()
-    );
-  }
-
-  private selectedDateIsTheMaximumDate(): boolean {
-    return (
-      this.maximumDate &&
-      this.selectedDate.getFullYear() === this.maximumDate.getFullYear() &&
-      this.selectedDate.getMonth() === this.maximumDate.getMonth() &&
-      this.selectedDate.getDate() === this.maximumDate.getDate()
-    );
-  }
-
-  private setListHoursMinutes(): void {
-    this.hours = this.hours.filter(hour => hour % this.step.hours === 0);
-    this.minutes = this.minutes.filter(minute => minute % this.step.minutes === 0);
-    this.seconds = this.seconds.filter(seconde => seconde % this.step.seconds === 0);
-  }
-}

package/src/lib/components/cauca-date-time-picker/components/mobile-time-picker/mobile-time-picker.component.html

@@ -1,9 +0,0 @@
-<button mat-icon-button (click)="valueUp()">
-    <mat-icon>keyboard_arrow_up</mat-icon>
-</button>
-<div>
-{{(value < 10 ? '0' : '' ) + value}}
-</div>
-<button mat-icon-button (click)="valueDown()">
-    <mat-icon>keyboard_arrow_down</mat-icon>
-</button>

package/src/lib/components/cauca-date-time-picker/components/mobile-time-picker/mobile-time-picker.component.scss

@@ -1,15 +0,0 @@
-:host {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 70px;
-    font-family: var(--mat-form-field-container-text-font);
-}
-
-.mat-mdc-icon-button {
-    height: 24px;
-    width: 24px;
-    line-height: 24px;
-    padding: 0;
-}

package/src/lib/components/cauca-date-time-picker/components/mobile-time-picker/mobile-time-picker.component.spec.ts

@@ -1,103 +0,0 @@
-import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatButtonHarness } from '@angular/material/button/testing';
-
-import { MobileTimePickerComponent } from './mobile-time-picker.component';
-
-const someOptions = [
-  0, 1, 2
-];
-const someFirstOption = 0;
-const someLastOption = 2;
-
-describe('MobileTimePickerComponent', () => {
-  let component: MobileTimePickerComponent;
-  let fixture: ComponentFixture<MobileTimePickerComponent>;
-  let loader: HarnessLoader;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MobileTimePickerComponent]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(MobileTimePickerComponent);
-    loader = TestbedHarnessEnvironment.loader(fixture);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-    component.options = someOptions;
-    component.value = 0;
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should emit valueChange when clicking Up arrow', fakeAsync(async () => {
-    const spy = spyOn(component.valueChange, 'emit');
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-
-    button.click();
-    tick();
-
-    expect(spy).toHaveBeenCalled();
-  }));
-
-  it('should change for next value when clicking Up arrow', fakeAsync(async () => {
-    component.value = someFirstOption;
-    const spy = spyOn(component.valueChange, 'emit');
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-
-    button.click();
-    tick();
-
-    expect(spy).toHaveBeenCalledWith(someFirstOption + 1);
-  }));
-
-  it('should return to first value when clicking Up arrow and at the last value is selected', fakeAsync(async () => {
-    component.value = someLastOption;
-    const spy = spyOn(component.valueChange, 'emit');
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-
-    button.click();
-    tick();
-
-    expect(spy).toHaveBeenCalledWith(someFirstOption);
-  }));
-
-  it('should emit valueChange when clicking Down arrow', fakeAsync(async () => {
-    const spy = spyOn(component.valueChange, 'emit');
-    const buttons = await loader.getAllHarnesses(MatButtonHarness);
-    const button = buttons[buttons.length - 1];
-
-    button.click();
-    tick();
-
-    expect(spy).toHaveBeenCalled();
-  }));
-
-  it('should change for next value when clicking Down arrow', fakeAsync(async () => {
-    component.value = someLastOption;
-    const spy = spyOn(component.valueChange, 'emit');
-    const buttons = await loader.getAllHarnesses(MatButtonHarness);
-    const button = buttons[buttons.length - 1];
-
-    button.click();
-    tick();
-
-    expect(spy).toHaveBeenCalledWith(someLastOption - 1);
-  }));
-
-  it('should return to last value when clicking Down arrow and at the first value is selected', fakeAsync(async () => {
-    component.value = someFirstOption;
-    const spy = spyOn(component.valueChange, 'emit');
-    const buttons = await loader.getAllHarnesses(MatButtonHarness);
-    const button = buttons[buttons.length - 1];
-
-    button.click();
-    tick();
-
-    expect(spy).toHaveBeenCalledWith(someLastOption);
-  }));
-});

package/src/lib/components/cauca-date-time-picker/components/mobile-time-picker/mobile-time-picker.component.ts

@@ -1,47 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-
-@Component({
-    selector: 'cauca-mobile-time-picker',
-    imports: [
-        MatButtonModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule
-    ],
-    templateUrl: './mobile-time-picker.component.html',
-    styleUrl: './mobile-time-picker.component.scss'
-})
-export class MobileTimePickerComponent {
-  @Input({required: true}) public value: number;
-  @Input({ required: true }) public options: number[];
-
-  @Output() public valueChange = new EventEmitter<number>();
-
-  public valueUp(): void {
-    const currentIndex = this.options.indexOf(this.value);
-    let newValue = 0;
-    if (currentIndex === this.options.length - 1) {
-      newValue = this.options[0];
-    } else {
-      newValue = this.options[currentIndex + 1];
-    }
-
-    this.valueChange.emit(newValue);
-  }
-
-  public valueDown(): void {
-    const currentIndex = this.options.indexOf(this.value);
-    let newValue = 0;
-    if (currentIndex === 0) {
-      newValue = this.options[this.options.length - 1];
-    } else {
-      newValue = this.options[currentIndex - 1];
-    }
-
-    this.valueChange.emit(newValue);
-  }
-}

package/src/lib/components/cauca-date-time-picker/models/dialog-date-time-picker-data.ts

@@ -1,29 +0,0 @@
-export interface DialogDateTimePickerDataStep {
-    hours: number,
-    minutes: number,
-    seconds: number,
-}
-
-export interface DialogDateTimePickerDataDisabled {
-    hours: boolean,
-    someHours: number[],
-    minutes: boolean,
-    someMinutes: number[],
-    seconds: boolean,
-    someSeconds: number[],
-}
-
-export interface DialogDateTimePickerOptions {
-    selectedDate: Date,
-    minimumDate: Date | null,
-    maximumDate: Date | null,
-    showSeconds: boolean,
-    showClearButton: boolean,
-    showButtonIcons: boolean,
-    showTime: boolean,
-    step: DialogDateTimePickerDataStep,
-}
-
-export interface DialogDateTimePickerValue {
-    value: Date,
-}

package/src/lib/components/deprecated-components/cauca-input-file/cauca-input-file.component.html

@@ -1,11 +0,0 @@
-<button mat-raised-button (click)="openDialog($event)">
-    <mat-icon *ngIf="icon">{{icon}}</mat-icon>
-    <span *ngIf="text">{{text}}</span>
-</button>
-<ng-container *ngIf="multiple; else notMultipleInput">
-  <input #file type="file" (change)="onSelectFile($event)" [accept]="accept" multiple="multiple" />
-</ng-container>
-
-<ng-template #notMultipleInput>
-  <input #file type="file" (change)="onSelectFile($event)" [accept]="accept" />
-</ng-template>

package/src/lib/components/deprecated-components/cauca-input-file/cauca-input-file.component.scss

@@ -1,3 +0,0 @@
-:host input{
-  display: none;
-}

package/src/lib/components/deprecated-components/cauca-input-file/cauca-input-file.component.ts

@@ -1,87 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, inject } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { TranslateService } from '@cauca-911/core';
-import { CaucaSimpleDialogComponent } from '../cauca-simple-dialog/cauca-simple-dialog.component';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-
-@Component({
-    selector: 'cauca-input-file',
-    templateUrl: './cauca-input-file.component.html',
-    styleUrls: ['./cauca-input-file.component.scss'],
-    imports: [MatButtonModule, MatIcon]
-})
-export class CaucaInputFileComponent implements OnInit {
-
-    @ViewChild('file', {static: false})
-    public file: ElementRef;
-    @Output()
-    public readend = new EventEmitter();
-    @Input()
-    public accept = '';
-    @Input()
-    public multiple = false;
-    @Input()
-    public icon = '';
-    @Input()
-    public text = '';
-
-    private labels: any = {};
-    private readonly translateService = inject(TranslateService);
-    private readonly dialog = inject(MatDialog);
-
-    public ngOnInit(): void {
-        if (!this.icon && !this.text) {
-            this.translateService.get(
-                ['material.select', 'material.dialogTitle', 'material.dialogMessage']
-            ).subscribe((labels: any) => {
-                this.labels = labels;
-                this.text = labels['material.select'];
-            });
-        }
-    }
-
-    public onSelectFile(e: any): void {
-        for (let i = 0, j = e.target.files.length; i < j; i++) {
-            const file = e.target.files[i];
-            const reader = new FileReader();
-            reader.onerror = ((error: any) => this.onError(error));
-            reader.onload = ((event: any) => this.onReadEnd(file, event));
-            reader.readAsDataURL(file);
-        }
-
-        if (e.target.files.length) {
-            this.dialog.open(CaucaSimpleDialogComponent, {
-                width: '250px',
-                disableClose: true,
-                data: {
-                    title: this.labels['material.dialogTitle'],
-                    message: this.labels['material.dialogMessage']
-                }
-            });
-        }
-    }
-
-    public openDialog(event: any): void {
-        if (this.file) {
-            this.file.nativeElement.click();
-        }
-        event.stopPropagation();
-    }
-
-    private onError(error: any): void {
-        throw error;
-    }
-
-    private onReadEnd(file: any, e: any): void {
-        this.dialog.closeAll();
-        this.readend.emit({
-            name: file.name,
-            size: file.size,
-            type: file.type,
-            lastModifiedDate: file.lastModifiedDate,
-            content: e.target['result'],
-            file,
-        });
-    }
-}

package/src/lib/components/deprecated-components/cauca-input-multiple-langue/cauca-input-multiple-langue.component.html

@@ -1,8 +0,0 @@
-<mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="onTagChanged($event)">
-  <mat-tab *ngFor="let lang of labels; let i = index" [label]="lang">
-    <mat-form-field hideRequiredMarker="never">
-      <input matInput [placeholder]="lang" [formControl]="forms[i]" required="required">
-      <mat-error *ngIf="forms[i].invalid">{{getErrorMessage(i) | translate}}</mat-error>
-    </mat-form-field>
-  </mat-tab>
-</mat-tab-group>

package/src/lib/components/deprecated-components/cauca-input-multiple-langue/cauca-input-multiple-langue.component.scss

@@ -1,3 +0,0 @@
-.mat-mdc-form-field {
-  width: 100%;
-}

package/src/lib/components/deprecated-components/cauca-input-multiple-langue/cauca-input-multiple-langue.component.spec.ts

@@ -1,35 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatTabsModule } from '@angular/material/tabs';
-import { CaucaCoreModule } from '@cauca-911/core';
-import { CaucaInputMultipleLangueComponent } from './cauca-input-multiple-langue.component';
-
-describe('CaucaInputMultipleLangueComponent', () => {
-  let component: CaucaInputMultipleLangueComponent;
-  let fixture: ComponentFixture<CaucaInputMultipleLangueComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [ 
-        CaucaInputMultipleLangueComponent,
-        CaucaCoreModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatFormFieldModule,
-        MatTabsModule,
-      ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CaucaInputMultipleLangueComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/deprecated-components/cauca-input-multiple-langue/cauca-input-multiple-langue.component.ts

@@ -1,57 +0,0 @@
-import { Component, Input, OnInit, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {ReactiveFormsModule, UntypedFormControl, Validators} from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
-import { MatTab, MatTabGroup } from '@angular/material/tabs';
-import {Configuration, CaucaCoreService, TranslateService} from '@cauca-911/core';
-import { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-    selector: 'cauca-input-multiple-langue',
-    templateUrl: './cauca-input-multiple-langue.component.html',
-    styleUrls: ['./cauca-input-multiple-langue.component.scss'],
-    imports: [CommonModule, MatTabGroup, MatTab, MatInput, MatFormFieldModule, ReactiveFormsModule, TranslateModule]
-})
-export class CaucaInputMultipleLangueComponent implements OnInit {
-
-    @Input()
-    public value: string[] = [];
-    public config: Configuration;
-    public forms: UntypedFormControl[] = [];
-    public labels: string[] = [];
-    public selectedIndex = 0;
-
-    private readonly translate = inject(TranslateService);
-
-    public constructor() {
-        const coreService = inject(CaucaCoreService);
-        this.config = coreService.getConfig();
-    }
-
-    public ngOnInit(): void {
-        this.translate.get(this.config.languages).subscribe((labels: any) => {
-            for (const i in labels) {
-                if (labels[i]) {
-                    this.labels.push(labels[i]);
-                }
-            }
-            this.initializeForms();
-        });
-    }
-
-    public onTagChanged(tabIndex: number): void {
-        console.log('cauca-material, onTabChanged', tabIndex);
-    }
-
-    public getErrorMessage(index: any): string {
-        return this.forms[index].hasError('required') ? 'error.required' : '';
-    }
-
-    private initializeForms(): void {
-        this.labels.forEach((item: any, index: number) => {
-            this.forms[index] = new UntypedFormControl('', [Validators.required]);
-            this.forms[index].setValue(this.value[index] || '');
-        });
-    }
-}

package/src/lib/components/deprecated-components/cauca-menu-sidebar/cauca-menu-sidebar.component.html

@@ -1,19 +0,0 @@
-<div class="header">
-    <button mat-icon-button class="close" (click)="hideOnMobile()">
-        <mat-icon>clear</mat-icon>
-    </button>
-    <ng-content select="[header]"></ng-content>
-</div>
-<div class="content">
-    <ng-content select="[beforeMenu]"></ng-content>
-    <cauca-menu-vertical #menu [menuItems]="menuItems" (itemClick)="onMenuItemClick()"></cauca-menu-vertical>
-    <ng-content select="[afterMenu]"></ng-content>
-</div>
-<div class="footer">
-    <ng-content select="[footer]"></ng-content>
-</div>
-<div *ngIf="version" class="version">
-    <div class="double-arrow" (click)="onToggleCollapse()"></div>
-    <span class="full">{{'material.version' | translate}} {{version}}</span>
-    <span class="abbr">{{version}}</span>
-</div>