valtech-components 2.0.691 → 2.0.692

package/src/lib/components/molecules/chip-group/types.ts

@@ -1,69 +0,0 @@
-import { Color } from '@ionic/core';
-
-/**
- * Single chip configuration.
- */
-export interface ChipMetadata {
-  /** Unique chip identifier */
-  value: string;
-  /** Chip label */
-  label?: string;
-  /** Chip icon */
-  icon?: string;
-  /** Chip color */
-  color?: Color;
-  /** Whether chip is selected */
-  selected?: boolean;
-  /** Whether chip is disabled */
-  disabled?: boolean;
-  /** Reactive content key for label */
-  contentKey?: string;
-  /** Component class name for content lookup */
-  contentClass?: string;
-  /** Fallback for label */
-  contentFallback?: string;
-}
-
-/**
- * Metadata for the chip group component.
- */
-export interface ChipGroupMetadata {
-  /** Chip items */
-  chips: ChipMetadata[];
-  /** Allow selection */
-  selectable?: boolean;
-  /** Allow multiple selection */
-  multiple?: boolean;
-  /** Allow removing chips */
-  removable?: boolean;
-  /** Default color for all chips */
-  color?: Color;
-  /** Selected color */
-  selectedColor?: Color;
-  /** Chip outline style */
-  outline?: boolean;
-  /** Unique token identifier */
-  token?: string;
-  /** Wrap chips or scroll */
-  wrap?: boolean;
-}
-
-/**
- * Event emitted when chip selection changes.
- */
-export interface ChipSelectionEvent {
-  /** Selected chip(s) */
-  selected: ChipMetadata | ChipMetadata[];
-  /** Selected value(s) */
-  values: string | string[];
-}
-
-/**
- * Event emitted when chip is removed.
- */
-export interface ChipRemoveEvent {
-  /** Removed chip */
-  chip: ChipMetadata;
-  /** Remaining chips */
-  remaining: ChipMetadata[];
-}

package/src/lib/components/molecules/code-display/code-display.component.scss

@@ -1,239 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.code-viewer-container {
-  background-color: #ffffff;
-  border-radius: 24px;
-  overflow: hidden;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  border: 1px solid #f2f6f7;
-  position: relative;
-  min-width: 320px;
-  max-width: 100%;
-}
-
-.tab-bar {
-  display: flex;
-  background: #f6f9fa;
-  border-bottom: 1px solid #f2f6f7;
-  gap: 2px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: thin;
-  scrollbar-color: #e0e0e0 #f6f9fa;
-  -webkit-overflow-scrolling: touch;
-  max-width: 100%;
-  font-size: 12px;
-}
-
-.tab-bar::-webkit-scrollbar {
-  height: 6px;
-  background: #f6f9fa;
-}
-
-.tab-bar::-webkit-scrollbar-thumb {
-  background: #e0e0e0;
-  border-radius: 4px;
-}
-
-.tab {
-  padding: 10px 18px 8px 18px;
-  font-family: 'Roboto Mono', monospace;
-  font-size: 0.95em;
-  color: #899396;
-  cursor: pointer;
-  border-radius: 8px 8px 0 0;
-  background: transparent;
-  transition:
-    background 0.2s,
-    color 0.2s;
-  margin-bottom: -1px;
-  border: 1px solid transparent;
-  border-bottom: none;
-}
-
-.tab:hover {
-  background: #e8eef2;
-}
-
-.tab.active {
-  background: #ffffff;
-  color: #19422d;
-  border: 1px solid #f2f6f7;
-  border-bottom: 1px solid #ffffff;
-  z-index: 2;
-}
-
-.tab-label {
-  font-weight: 500;
-}
-
-.code-content {
-  overflow-x: auto;
-  overflow-y: auto;
-  max-height: 30rem;
-  min-height: 5rem;
-  background: hsl(0, 0%, 100%);
-  position: relative;
-}
-
-.language-badge {
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  background: #f6f9fa;
-  color: #899396;
-  font-family: 'Roboto Mono', monospace;
-  font-size: 0.8em;
-  font-weight: 500;
-  border-radius: 6px;
-  padding: 2px 8px;
-  z-index: 3;
-  pointer-events: none;
-  text-transform: uppercase;
-}
-
-.copy-button-wrapper {
-  position: sticky;
-  top: 10px;
-  float: right;
-  z-index: 10;
-  height: 0;
-  margin-right: 15px;
-}
-
-.copy-button {
-  --padding-start: 2px;
-  --padding-end: 2px;
-  --padding-top: 2px;
-  --padding-bottom: 2px;
-  min-width: 28px;
-  min-height: 28px;
-  height: 28px;
-  width: 28px;
-  color: var(--ion-color-primary);
-  background: rgba(255, 255, 255, 0.7);
-  border-radius: 6px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.2s ease, background 0.2s ease;
-}
-
-.code-content:hover .copy-button {
-  opacity: 1;
-}
-
-.copy-button:hover {
-  background: rgba(255, 255, 255, 0.9);
-}
-
-.copy-button ion-icon {
-  font-size: 1.2em;
-  margin: 0;
-}
-
-pre {
-  margin: 0;
-  padding: 0;
-  background-color: transparent;
-  min-width: 100%;
-  min-height: 100%;
-  white-space: pre;
-  word-break: normal;
-  font-family: 'Roboto Mono', monospace;
-}
-
-code {
-  font-family: 'Roboto Mono', monospace;
-  font-size: 0.9em;
-  line-height: 1.5;
-  display: block;
-  white-space: inherit;
-  word-break: normal;
-}
-
-@media (max-width: 600px) {
-  .code-viewer-container {
-    border-radius: 24px;
-  }
-  .tab-bar {
-    font-size: 11px;
-  }
-  .language-badge {
-    font-size: 0.7em;
-    padding: 1px 6px;
-    top: 10px;
-    left: 10px;
-  }
-  .copy-button-wrapper {
-    margin-right: 10px;
-  }
-  .code-content {
-    max-height: 20rem;
-  }
-  code {
-    font-size: 0.7em;
-  }
-}
-
-@media (min-width: 600px) {
-  code {
-    font-size: 0.8em;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .code-viewer-container {
-    background-color: #21252b;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
-    border: 1px solid #3b4048;
-  }
-
-  .tab-bar {
-    background: #1a1a1a;
-    border-bottom: 1px solid #3b4048;
-    scrollbar-color: #3b4048 #1a1a1a;
-  }
-
-  .tab-bar::-webkit-scrollbar {
-    background: #1a1a1a;
-  }
-
-  .tab-bar::-webkit-scrollbar-thumb {
-    background: #3b4048;
-  }
-
-  .tab {
-    color: #8b949e;
-  }
-
-  .tab:hover {
-    background: #21252b;
-  }
-
-  .tab.active {
-    background: #282c34;
-    color: #c9d1d9;
-    border: 1px solid #3b4048;
-    border-bottom: 1px solid #282c34;
-  }
-
-  .code-content {
-    background: #161b22;
-  }
-
-  .language-badge {
-    background: #3e4451;
-    color: #8b949e;
-  }
-
-  .copy-button {
-    background: rgba(0, 0, 0, 0.4);
-  }
-
-  .copy-button:hover {
-    background: rgba(0, 0, 0, 0.6);
-  }
-}

package/src/lib/components/molecules/code-display/code-display.component.ts

@@ -1,109 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  inject,
-  Input,
-  OnChanges,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { Clipboard } from '@capacitor/clipboard';
-import { ToastController } from '@ionic/angular';
-import { IonButton, IonIcon } from '@ionic/angular/standalone';
-import * as Prism from 'prismjs';
-import { I18nService } from '../../../services/i18n';
-
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-typescript';
-import { CodeDisplayMetadata } from './types';
-
-@Component({
-  selector: 'val-code-display',
-  standalone: true,
-  imports: [CommonModule, IonIcon, IonButton],
-  template: `
-    <div class="code-viewer-container">
-      <div class="tab-bar">
-        <div
-          class="tab"
-          *ngFor="let tab of props.tabs; let i = index"
-          [class.active]="i === selectedTab"
-          (click)="selectTab(i)"
-        >
-          <span class="tab-label">{{ tab.label }}</span>
-        </div>
-      </div>
-      <div class="code-content">
-        <div class="copy-button-wrapper">
-          <ion-button fill="clear" class="copy-button" (click)="copyToClipboard()">
-            <ion-icon name="copy-outline"></ion-icon>
-          </ion-button>
-        </div>
-        <pre><code [class]="'language-' + (props.tabs[selectedTab]?.language || props.language)" #codeElement></code></pre>
-      </div>
-    </div>
-  `,
-
-  styleUrl: './code-display.component.scss',
-})
-export class CodeDisplayComponent implements AfterViewInit, OnChanges {
-  @ViewChild('codeElement') codeElement!: ElementRef<HTMLElement>;
-
-  @Input() props: CodeDisplayMetadata;
-
-  private toast = inject(ToastController);
-  private i18n = inject(I18nService);
-  selectedTab: number = 0;
-
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['code'] || changes['language'] || changes['tabs']) {
-      this.cdr.detectChanges();
-      setTimeout(() => this.highlightCode());
-    }
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => this.highlightCode());
-  }
-
-  selectTab(i: number) {
-    this.selectedTab = i;
-    this.cdr.detectChanges();
-    setTimeout(() => this.highlightCode());
-  }
-
-  private highlightCode() {
-    if (this.codeElement) {
-      const code = this.props.tabs.length > 0 ? this.props.tabs[this.selectedTab]?.code : this.props.code;
-      this.codeElement.nativeElement.textContent = code || '';
-      Prism.highlightElement(this.codeElement.nativeElement);
-    }
-  }
-
-  async copyToClipboard() {
-    try {
-      const code = this.props.tabs.length > 0 ? this.props.tabs[this.selectedTab]?.code : this.props.code;
-      await Clipboard.write({ string: code || '' });
-      this.presentToast(this.i18n.t('copiedToClipboard'));
-    } catch (error) {
-      console.error('Error al copiar al portapapeles:', error);
-    }
-  }
-
-  async presentToast(message: string) {
-    const toast = await this.toast.create({
-      message: message,
-      duration: 2000,
-      position: 'bottom',
-      color: 'dark',
-    });
-    toast.present();
-  }
-}