angular-matecu 4.1.0 → 4.2.0

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

@@ -1,438 +0,0 @@
-/* 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

@@ -1,15 +0,0 @@
-
-.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

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

@@ -1,25 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,13 +0,0 @@
-$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

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

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

@@ -1,19 +0,0 @@
-: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

@@ -1,25 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-: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);
-}