angular-matecu 4.0.7 → 4.1.0

package/src/lib/components/matecu-file-input/matecu-file-input.ts

@@ -0,0 +1,438 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  OnDestroy,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+interface FileValidationResult {
+  isValid: boolean;
+  errors: string[];
+}
+
+interface ErrorMessages {
+  invalidSize: string;
+  invalidType: string;
+  tooManyFiles: string;
+  uploadError: string;
+}
+
+type FileSizeUnit = 'AUTO' | 'bytes' | 'KB' | 'MB' | 'GB' | 'TB';
+
+export type { FileSizeUnit };
+
+export enum FileInputState {
+  IDLE = 'idle',
+  LOADING = 'loading',
+  SUCCESS = 'success',
+  ERROR = 'error',
+}
+
+@Component({
+  selector: 'matecu-file-input',
+  imports: [CommonModule],
+  templateUrl: './matecu-file-input.html',
+  styleUrls: ['./matecu-file-input.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: MatecuFileInput,
+    },
+  ],
+})
+export class MatecuFileInput implements ControlValueAccessor, OnDestroy {
+  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
+
+  // State
+  files: File[] = [];
+  file?: File;
+  isDisabled = false;
+  fileName?: string;
+  selectedFileSize?: number;
+  hasInvalidSize = false;
+  hasInvalidType = false;
+  previewUrl?: string;
+  previewUrls = new Map<string, string>(); // Para múltiples archivos
+  currentState: FileInputState = FileInputState.IDLE;
+  validationErrors: string[] = [];
+  isDragOver = false;
+
+  private onChange: ((value: any) => void) | undefined;
+  private onTouched: (() => void) | undefined;
+  // Inputs - Funcionalidad básica
+  @Input() optimizeImage?: (img: File) => Promise<File>;
+  @Input() optimizeImageToSize?: number;
+  @Input() maxFileSize?: number; // tamaño máximo en bytes
+  @Input() maxFiles = 1;
+  @Input() multiple = false;
+  @Input() showFileSize = false;
+  @Input() fileSizeUnit: FileSizeUnit = 'AUTO';
+  @Input() displayName?: string;
+  @Input() placeholder = 'Select a file or drag here';
+  @Input() buttonText = 'Select file';
+  @Input() changeSelectedFileText = 'Change selected file(s)';
+  @Input() loadingText = 'Processing...';
+  @Input() ariaLabel?: string;
+
+  // Inputs - Validación
+  @Input() acceptedMimeTypes: string[] = [];
+  @Input() acceptedExtensions: string[] = [];
+  @Input() errorMessages: ErrorMessages = {
+    invalidSize: 'File exceeds maximum allowed size',
+    invalidType: 'File type not allowed',
+    tooManyFiles: 'Maximum number of files exceeded',
+    uploadError: 'Error processing file',
+  };
+
+  // Inputs - UI/UX
+  @Input() enableDragDrop = true;
+  @Input() showPreview = false;
+  @Input() previewMaxWidth = 200;
+  @Input() previewMaxHeight = 200;
+  @Input() showProgress = false;
+
+  // Outputs
+  @Output() fileSelected = new EventEmitter<File>();
+  @Output() filesSelected = new EventEmitter<File[]>();
+  @Output() fileRemoved = new EventEmitter<File>();
+  @Output() validationError = new EventEmitter<string[]>();
+  @Output() dragEnter = new EventEmitter<DragEvent>();
+  @Output() dragLeave = new EventEmitter<DragEvent>();
+  @Output() stateChange = new EventEmitter<FileInputState>();
+  // ControlValueAccessor Methods
+  writeValue(value: any): void {
+    if (value instanceof File) {
+      this.handleSingleFile(value);
+    } else if (Array.isArray(value)) {
+      this.handleMultipleFiles(value);
+    } else if (typeof value === 'string') {
+      this.fileName = value;
+    } else {
+      this.resetComponent();
+    }
+  }
+
+  registerOnChange(fn: (value: any) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+    this.changeState(this.isDisabled ? FileInputState.IDLE : this.currentState);
+  }
+
+  ngOnDestroy(): void {
+    this.cleanupPreview();
+  }
+
+  // Event Handlers
+  onFileChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const selectedFiles = Array.from(input.files || []);
+    this.handleFileSelection(selectedFiles);
+  }
+
+  onDragOver(event: DragEvent): void {
+    if (!this.enableDragDrop || this.isDisabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (!this.isDragOver) {
+      this.isDragOver = true;
+      this.dragEnter.emit(event);
+    }
+  }
+
+  onDragLeave(event: DragEvent): void {
+    if (!this.enableDragDrop || this.isDisabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = false;
+    this.dragLeave.emit(event);
+  }
+
+  onDrop(event: DragEvent): void {
+    if (!this.enableDragDrop || this.isDisabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.isDragOver = false;
+    const files = Array.from(event.dataTransfer?.files || []);
+    this.handleFileSelection(files);
+  }
+
+  openFileDialog(): void {
+    if (this.isDisabled) return;
+    this.fileInput?.nativeElement.click();
+  }
+
+  removeFile(fileToRemove: File): void {
+    // Limpiar preview del archivo eliminado
+    const fileKey = `${fileToRemove.name}-${fileToRemove.size}-${fileToRemove.lastModified}`;
+    const previewUrl = this.previewUrls.get(fileKey);
+    if (previewUrl && previewUrl.startsWith('blob:')) {
+      URL.revokeObjectURL(previewUrl);
+      this.previewUrls.delete(fileKey);
+    }
+    if (this.multiple) {
+      this.files = this.files.filter((file) => file !== fileToRemove);
+      this.notifyChange(this.files.length > 0 ? this.files : null);
+      this.filesSelected.emit([...this.files]);
+    } else {
+      this.resetComponent();
+      this.notifyChange(null);
+    }
+    this.fileRemoved.emit(fileToRemove);
+  }
+  // Private Methods
+  private async handleFileSelection(selectedFiles: File[]): Promise<void> {
+    if (selectedFiles.length === 0) return;
+
+    this.changeState(FileInputState.LOADING);
+    this.validationErrors = [];
+
+    try {
+      // Validar número máximo de archivos
+      if (selectedFiles.length > this.maxFiles) {
+        this.validationErrors.push(this.errorMessages.tooManyFiles);
+        this.changeState(FileInputState.ERROR);
+        return;
+      }
+
+      const processedFiles: File[] = [];
+
+      for (const file of selectedFiles) {
+        const validation = this.validateFile(file);
+        if (!validation.isValid) {
+          this.validationErrors.push(...validation.errors);
+          continue;
+        }
+
+        try {
+          const processedFile = await this.processFile(file);
+          if (processedFile) {
+            processedFiles.push(processedFile);
+          }
+        } catch (error) {
+          this.validationErrors.push(this.errorMessages.uploadError);
+        }
+      }
+
+      if (this.validationErrors.length > 0) {
+        this.validationError.emit([...this.validationErrors]);
+        this.changeState(FileInputState.ERROR);
+        return;
+      }
+
+      if (processedFiles.length > 0) {
+        if (this.multiple) {
+          this.files = processedFiles;
+          this.filesSelected.emit([...this.files]);
+          this.notifyChange(this.files);
+        } else {
+          this.file = processedFiles[0];
+          this.handleSingleFile(this.file);
+          this.fileSelected.emit(this.file);
+          this.notifyChange(this.file);
+        }
+
+        this.changeState(FileInputState.SUCCESS);
+      }
+    } catch (error) {
+      this.validationErrors.push(this.errorMessages.uploadError);
+      this.validationError.emit([...this.validationErrors]);
+      this.changeState(FileInputState.ERROR);
+    }
+  }
+
+  private handleSingleFile(file: File): void {
+    this.file = file;
+    this.fileName = this.displayName || file.name;
+    this.selectedFileSize = this.calculateFileSizeInMB(file);
+    this.generatePreview(file);
+  }
+
+  private handleMultipleFiles(files: File[]): void {
+    this.files = files;
+    this.file = files[0] || undefined;
+    this.fileName = files.length > 0 ? `${files.length} file(s) selected` : undefined;
+  }
+
+  private async processFile(file: File): Promise<File | undefined> {
+    if (this.optimizeImage && file.type.includes('image') && this.optimizeImageToSize) {
+      try {
+        return await this.optimizeImage(file);
+      } catch (error) {
+        console.warn('Error optimizing image:', error);
+        return file; // Return original if optimization fails
+      }
+    }
+    return file;
+  }
+
+  private validateFile(file: File): FileValidationResult {
+    const errors: string[] = [];
+
+    // Validar tamaño
+    if (this.maxFileSize && file.size > this.maxFileSize) {
+      errors.push(this.errorMessages.invalidSize);
+    }
+
+    // Validar tipo MIME
+    if (this.acceptedMimeTypes.length > 0) {
+      if (!this.acceptedMimeTypes.some((type) => file.type.includes(type))) {
+        errors.push(this.errorMessages.invalidType);
+      }
+    }
+
+    // Validar extensión
+    if (this.acceptedExtensions.length > 0) {
+      const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
+      if (!this.acceptedExtensions.some((ext) => ext.toLowerCase() === fileExtension)) {
+        errors.push(this.errorMessages.invalidType);
+      }
+    }
+
+    return {
+      isValid: errors.length === 0,
+      errors,
+    };
+  }
+
+  private generatePreview(file: File): void {
+    this.cleanupPreview();
+
+    if (this.showPreview && file.type.startsWith('image/')) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        this.previewUrl = e.target?.result as string;
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+
+  private cleanupPreview(): void {
+    // Limpiar preview simple
+    if (this.previewUrl && this.previewUrl.startsWith('blob:')) {
+      URL.revokeObjectURL(this.previewUrl);
+    }
+    this.previewUrl = undefined;
+
+    // Limpiar previews múltiples
+    this.previewUrls.forEach((url) => {
+      if (url.startsWith('blob:')) {
+        URL.revokeObjectURL(url);
+      }
+    });
+    this.previewUrls.clear();
+  }
+
+  private resetComponent(): void {
+    this.files = [];
+    this.file = undefined;
+    this.fileName = undefined;
+    this.selectedFileSize = undefined;
+    this.validationErrors = [];
+    this.hasInvalidSize = false;
+    this.hasInvalidType = false;
+    this.cleanupPreview();
+    this.changeState(FileInputState.IDLE);
+  }
+
+  private notifyChange(value: any): void {
+    if (this.onChange) {
+      this.onChange(value);
+    }
+    if (this.onTouched) {
+      this.onTouched();
+    }
+  }
+
+  private changeState(newState: FileInputState): void {
+    if (this.currentState !== newState) {
+      this.currentState = newState;
+      this.stateChange.emit(newState);
+    }
+  }
+
+  calculateFileSizeInMB(file: File): number {
+    const sizeInMB = file.size / 1024 / 1024;
+    return sizeInMB > 0.01 ? sizeInMB : 0.01;
+  }
+
+  formatFileSize(file: File): string {
+    const bytes = file.size;
+
+    if (bytes === 0) return '0 bytes';
+
+    const k = 1024;
+    const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB'];
+
+    // Si se especifica una unidad específica, usarla
+    if (this.fileSizeUnit !== 'AUTO') {
+      const targetUnitIndex = sizes.indexOf(this.fileSizeUnit);
+      if (targetUnitIndex !== -1) {
+        const size = bytes / Math.pow(k, targetUnitIndex);
+        const formattedSize = targetUnitIndex === 0 ? size.toString() : size.toFixed(2);
+        return `${formattedSize} ${this.fileSizeUnit}`;
+      }
+    }
+
+    // Comportamiento AUTO (original)
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const size = bytes / Math.pow(k, i);
+    const formattedSize = i === 0 ? size.toString() : size.toFixed(2);
+
+    return `${formattedSize} ${sizes[i]}`;
+  }
+
+  // Public Utility Methods
+  getFileIcon(file?: File): string {
+    if (!file) return 'insert_drive_file';
+
+    if (file.type.startsWith('image/')) return '🖼️';
+    if (file.type.includes('pdf')) return '📄';
+    if (file.type.startsWith('video/')) return '🎥';
+    if (file.type.startsWith('audio/')) return '🎵';
+    if (file.type.includes('zip') || file.type.includes('rar')) return '🗜️';
+    if (file.type.includes('word')) return '📝';
+    if (file.type.includes('excel') || file.type.includes('sheet')) return '📊';
+
+    return '📄';
+  }
+
+  getPreviewUrl(file: File): string {
+    if (!file.type.startsWith('image/')) return '';
+
+    const fileKey = `${file.name}-${file.size}-${file.lastModified}`;
+
+    if (!this.previewUrls.has(fileKey)) {
+      const url = URL.createObjectURL(file);
+      this.previewUrls.set(fileKey, url);
+    }
+
+    return this.previewUrls.get(fileKey) || '';
+  }
+
+  get hasErrors(): boolean {
+    return this.validationErrors.length > 0 || this.currentState === FileInputState.ERROR;
+  }
+
+  get isLoading(): boolean {
+    return this.currentState === FileInputState.LOADING;
+  }
+
+  get hasFiles(): boolean {
+    return this.multiple ? this.files.length > 0 : !!this.file;
+  }
+}

package/src/lib/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/components/matecu-spinner/matecu-spinner.component.html

@@ -0,0 +1,44 @@
+@if(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>
+}

package/src/lib/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/components/matecu-spinner/matecu-spinner.component.ts

@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil, tap } from 'rxjs/operators';
+import { MatecuSpinnerService } from '../../services/matecu-spinner.service';
+@Component({
+  selector: 'matecu-spinner',
+  templateUrl: './matecu-spinner.component.html',
+  styleUrls: ['./matecu-spinner.component.css'],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class MatecuSpinnerComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject<void>();
+  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,
+    private cdr: ChangeDetectorRef,
+  ) {}
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+  ngOnInit(): void {
+    if (this.global) {
+      this.spinnerService
+        .watch()
+        .pipe(
+          tap((value) => (this.activeCache = value)),
+          tap(() => this.cdr.detectChanges()),
+          takeUntil(this.destroy$),
+        )
+        .subscribe();
+    }
+  }
+}

package/src/lib/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/components/matecu-topbar-action/matecu-topbar-action.component.html

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

package/src/lib/components/matecu-topbar-action/matecu-topbar-action.component.scss

@@ -0,0 +1,19 @@
+:host {
+  --mtb-bar-height: 64px;
+  --mtb-action-padding: 10px;
+  --mtb-action-margin: 0px;
+}
+:host,
+.matecu-topbar-action {
+  &,
+  * {
+    box-sizing: border-box;
+    outline: none;
+  }
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  max-height: var(--mtb-bar-height);
+  padding: var(--mtb-action-padding);
+  margin: var(--mtb-action-margin);
+}

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

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

package/src/lib/components/matecu-topbar-action/matecu-topbar-action.component.ts

@@ -0,0 +1,14 @@
+import { Component, HostBinding, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'matecu-topbar-action',
+  templateUrl: './matecu-topbar-action.component.html',
+  styleUrls: ['./matecu-topbar-action.component.scss'],
+  standalone: true,
+})
+export class MatecuTopbarActionComponent implements OnInit {
+  @HostBinding('class') className = 'matecu-topbar-action';
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

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

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

@@ -0,0 +1,14 @@
+:host,
+.matecu-topbar-body {
+  display: block;
+  &,
+  * {
+    box-sizing: border-box;
+    outline: none;
+  }
+
+  padding: var(--mtb-body-padding, 30px);
+  background-color: var(--mtb-body-background, auto);
+  overflow-y: auto;
+  padding-bottom: var(--mtb-body-padding-button, 60px);
+}