valtech-components 2.0.691 → 2.0.692

package/src/lib/components/molecules/pin-input/types.ts

@@ -1,80 +0,0 @@
-import { FormControl } from '@angular/forms';
-import { Color } from '@ionic/core';
-import { ComponentState } from '../../types';
-
-/**
- * Size options for PIN input component.
- */
-export type PinInputSize = 'small' | 'medium' | 'large';
-
-/**
- * Metadata for the PIN input component.
- */
-export interface PinInputMetadata {
-  /** Form control for the PIN value (stores string, optional when used in val-form) */
-  control?: FormControl<string | null>;
-  /** Unique token for the input */
-  token?: string;
-  /** Display label */
-  label?: string;
-  /** Field name */
-  name?: string;
-  /** Help text */
-  hint?: string;
-  /** Field state */
-  state?: ComponentState;
-
-  // === PIN configuration ===
-  /** Number of digits in PIN (default: 5) */
-  length?: number;
-  /** Size of the input boxes: 'small' | 'medium' | 'large' (default: 'medium') */
-  size?: PinInputSize;
-  /** Allow only numbers */
-  allowNumbersOnly?: boolean;
-  /** Mask input (show dots instead of characters) */
-  mask?: boolean;
-  /** Mask character to display */
-  maskChar?: string;
-  /** Disable paste functionality */
-  disablePaste?: boolean;
-  /** Auto focus first input */
-  autoFocus?: boolean;
-  /** Auto submit when complete */
-  autoSubmit?: boolean;
-
-  // === Styling ===
-  /** Component color */
-  color?: Color;
-  /** Custom CSS class */
-  cssClass?: string;
-  /** Input box styles */
-  inputStyles?: Record<string, string>;
-  /** Input box class */
-  inputClass?: string;
-
-  // === Reactive content ===
-  /** Content key for reactive label */
-  contentKey?: string;
-  /** Component class name for content lookup */
-  contentClass?: string;
-  /** Fallback text if content key is not found */
-  contentFallback?: string;
-
-  // === Validation display ===
-  /** Custom error messages */
-  errors?: Record<string, string>;
-  /** Show validation errors */
-  showErrors?: boolean;
-}
-
-/**
- * Event emitted when PIN input changes.
- */
-export interface PinInputChangeEvent {
-  /** Current PIN value */
-  value: string;
-  /** Whether the PIN is complete */
-  isComplete: boolean;
-  /** Number of digits entered */
-  length: number;
-}

package/src/lib/components/molecules/plain-code-box/plain-code-box.component.scss

@@ -1,191 +0,0 @@
-.code-box-container {
-  position: relative;
-  background-color: #282c34;
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
-  margin: 0; // Eliminar margen vertical para control más preciso
-
-  @media (prefers-color-scheme: light) {
-    background-color: #ffffff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.copy-button {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  --padding-start: 2px;
-  --padding-end: 2px;
-  --padding-top: 2px;
-  --padding-bottom: 2px;
-  min-width: 28px;
-  min-height: 28px;
-  height: 28px;
-  width: 28px;
-  color: #61afef;
-  background: rgba(0, 0, 0, 0.4);
-  border-radius: 6px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition:
-    background 0.2s ease,
-    color 0.2s ease;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.5);
-    color: #8cc4ff;
-  }
-
-  ion-icon {
-    font-size: 1.2em;
-    margin: 0;
-  }
-
-  @media (prefers-color-scheme: light) {
-    color: var(--ion-color-primary, #007bff);
-    background: rgba(255, 255, 255, 0.7);
-    &:hover {
-      background: rgba(255, 255, 255, 0.9);
-      color: var(--ion-color-primary-tint, #3880ff);
-    }
-  }
-}
-
-pre {
-  margin: 0;
-  padding: 0; // Eliminar cualquier padding del pre
-  background-color: transparent;
-  min-width: 100%;
-  min-height: 100%;
-  white-space: pre-wrap;
-  word-break: normal;
-  font-family: 'Roboto Mono', monospace;
-}
-
-code {
-  font-family: 'Roboto Mono', monospace;
-  font-size: 0.9em;
-  line-height: 1.6;
-  display: block;
-  white-space: inherit;
-  word-break: inherit;
-  color: #abb2bf;
-  margin: 0; // Eliminar margen del code
-
-  @media (prefers-color-scheme: light) {
-    color: #333;
-  }
-
-  .line-normal {
-    color: #abb2bf;
-    @media (prefers-color-scheme: light) {
-      color: #333;
-    }
-  }
-
-  .line-command {
-    color: #c678dd;
-    @media (prefers-color-scheme: light) {
-      color: var(--ion-color-primary, #3880ff);
-    }
-  }
-
-  .line-error {
-    color: #e06c75;
-    @media (prefers-color-scheme: light) {
-      color: var(--ion-color-danger, #eb445a);
-    }
-  }
-
-  .line-success {
-    color: #98c379;
-    @media (prefers-color-scheme: light) {
-      color: var(--ion-color-success, #2dd36f);
-    }
-  }
-
-  .token.comment {
-    color: #5c6370;
-  }
-  .token.selector,
-  .token.string {
-    color: #98c379;
-  }
-  .token.punctuation {
-    color: #abb2bf;
-  }
-  .token.operator {
-    color: #c678dd;
-  }
-  .token.boolean,
-  .token.number {
-    color: #d19a66;
-  }
-  .token.function {
-    color: #61afef;
-  }
-  .token.keyword {
-    color: #c678dd;
-  }
-  .token.class-name {
-    color: #e6c07b;
-  }
-  .token.tag {
-    color: #e06c75;
-  }
-  .token.attr-name {
-    color: #d19a66;
-  }
-  .token.attr-value {
-    color: #98c379;
-  }
-  .token.property {
-    color: #56b6c2;
-  }
-  .token.variable {
-    color: #e06c75;
-  }
-}
-
-@media (max-width: 600px) {
-  .code-box-container {
-    border-radius: 16px;
-  }
-  .copy-button {
-    top: 6px;
-    right: 6px;
-    min-width: 24px;
-    min-height: 24px;
-    height: 24px;
-    width: 24px;
-  }
-  .copy-button ion-icon {
-    font-size: 1em;
-  }
-  pre {
-    padding: 0;
-    margin: 0;
-  }
-  code {
-    font-size: 0.8em;
-    line-height: 1.5;
-    margin: 0;
-  }
-}
-
-@media (min-width: 601px) and (max-width: 1024px) {
-  code {
-    font-size: 0.9em;
-  }
-}
-
-@media (min-width: 1025px) {
-  code {
-    font-size: 1em;
-  }
-}

package/src/lib/components/molecules/plain-code-box/plain-code-box.component.ts

@@ -1,86 +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 { I18nService } from '../../../services/i18n';
-
-import * as Prism from 'prismjs';
-import 'prismjs/components/prism-bash';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-typescript';
-import { PlainCodeBoxMetadata } from './types';
-
-@Component({
-  selector: 'val-plain-code-box',
-  standalone: true,
-  imports: [CommonModule, IonIcon, IonButton],
-  template: `
-    <div class="code-box-container">
-      <ion-button *ngIf="props.showCopyButton !== false" fill="clear" class="copy-button" (click)="copyCode()">
-        <ion-icon name="copy-outline"></ion-icon>
-      </ion-button>
-      <pre><code [class]="'language-' + (props.language || 'bash')" #codeBlock><ng-container *ngFor="let line of props.lines; let i = index"><span [class]="line.type ? 'line-' + line.type : 'line-normal'">{{ line.text }}</span><br *ngIf="i < props.lines.length - 1">
-</ng-container></code></pre>
-    </div>
-  `,
-  styleUrls: ['./plain-code-box.component.scss'],
-})
-export class PlainCodeBoxComponent implements AfterViewInit, OnChanges {
-  private toast = inject(ToastController);
-  private cdr = inject(ChangeDetectorRef);
-  private i18n = inject(I18nService);
-
-  @Input() props: PlainCodeBoxMetadata = { lines: [] };
-
-  @ViewChild('codeBlock') codeBlock!: ElementRef<HTMLElement>;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['props'] && !changes['props'].firstChange) {
-      this.cdr.detectChanges();
-      setTimeout(() => this.highlightCode());
-    }
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => this.highlightCode());
-  }
-
-  private highlightCode() {
-    if (this.codeBlock && this.props.lines && this.props.lines.length > 0) {
-      Prism.highlightElement(this.codeBlock.nativeElement);
-    }
-  }
-
-  async copyCode() {
-    const fullCode = this.props.lines.map(line => line.text).join('\n');
-    if (fullCode) {
-      await Clipboard.write({
-        string: fullCode,
-      });
-      this.presentToast(this.i18n.t('copiedToClipboard'));
-    }
-  }
-
-  async presentToast(message: string) {
-    const toast = await this.toast.create({
-      message: message,
-      duration: 2000,
-      position: 'bottom',
-      color: 'dark',
-    });
-    toast.present();
-  }
-}

package/src/lib/components/molecules/plain-code-box/plain-code-box.stories.ts

@@ -1,174 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { PlainCodeBoxComponent } from './plain-code-box.component';
-import { PlainCodeBoxMetadata } from './types';
-
-const createPlainCodeBoxProps = (overrides: Partial<PlainCodeBoxMetadata> = {}) => ({
-  lines: [
-    { text: 'npm install @valtech/components', type: 'command' as const },
-  ],
-  showCopyButton: true,
-  language: 'bash',
-  ...overrides,
-} as PlainCodeBoxMetadata);
-
-const defaultProps = createPlainCodeBoxProps();
-
-const bashCommandsProps = createPlainCodeBoxProps({
-  lines: [
-    { text: '$ npm install', type: 'command' as const },
-    { text: 'added 150 packages in 12s', type: 'success' as const },
-    { text: '$ npm run build', type: 'command' as const },
-    { text: 'Build completed successfully', type: 'success' as const },
-  ],
-  language: 'bash',
-});
-
-const withErrorsProps = createPlainCodeBoxProps({
-  lines: [
-    { text: '$ npm run test', type: 'command' as const },
-    { text: 'Running tests...', type: 'normal' as const },
-    { text: 'FAIL: test/app.spec.ts', type: 'error' as const },
-    { text: '  Expected true to be false', type: 'error' as const },
-    { text: '1 test failed, 24 tests passed', type: 'normal' as const },
-  ],
-  language: 'bash',
-});
-
-const typescriptProps = createPlainCodeBoxProps({
-  lines: [
-    { text: 'interface User {', type: 'normal' as const },
-    { text: '  id: string;', type: 'normal' as const },
-    { text: '  name: string;', type: 'normal' as const },
-    { text: '  email: string;', type: 'normal' as const },
-    { text: '}', type: 'normal' as const },
-    { text: '', type: 'normal' as const },
-    { text: 'const getUser = async (id: string): Promise<User> => {', type: 'normal' as const },
-    { text: '  const response = await fetch(`/api/users/${id}`);', type: 'normal' as const },
-    { text: '  return response.json();', type: 'normal' as const },
-    { text: '};', type: 'normal' as const },
-  ],
-  language: 'typescript',
-});
-
-const htmlProps = createPlainCodeBoxProps({
-  lines: [
-    { text: '<div class="container">', type: 'normal' as const },
-    { text: '  <val-button [props]="buttonProps">', type: 'normal' as const },
-    { text: '    Click Me', type: 'normal' as const },
-    { text: '  </val-button>', type: 'normal' as const },
-    { text: '</div>', type: 'normal' as const },
-  ],
-  language: 'markup',
-});
-
-const noCopyButtonProps = createPlainCodeBoxProps({
-  lines: [
-    { text: 'console.log("Hello, World!");', type: 'normal' as const },
-  ],
-  showCopyButton: false,
-  language: 'javascript',
-});
-
-const showcaseInstallProps = createPlainCodeBoxProps({
-  lines: [
-    { text: '# Install the package', type: 'normal' as const },
-    { text: '$ npm install @valtech/components', type: 'command' as const },
-    { text: '', type: 'normal' as const },
-    { text: '# Or with yarn', type: 'normal' as const },
-    { text: '$ yarn add @valtech/components', type: 'command' as const },
-  ],
-  language: 'bash',
-});
-
-const showcaseUsageProps = createPlainCodeBoxProps({
-  lines: [
-    { text: "import { ButtonComponent } from '@valtech/components';", type: 'normal' as const },
-    { text: '', type: 'normal' as const },
-    { text: '@Component({', type: 'normal' as const },
-    { text: "  selector: 'app-root',", type: 'normal' as const },
-    { text: '  standalone: true,', type: 'normal' as const },
-    { text: '  imports: [ButtonComponent],', type: 'normal' as const },
-    { text: "  template: '<val-button [props]=\"props\">Click</val-button>'", type: 'normal' as const },
-    { text: '})', type: 'normal' as const },
-    { text: 'export class AppComponent {}', type: 'normal' as const },
-  ],
-  language: 'typescript',
-});
-
-const meta: Meta<PlainCodeBoxComponent> = {
-  title: 'Molecules/PlainCodeBox',
-  component: PlainCodeBoxComponent,
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Configuration object for the plain code box',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<PlainCodeBoxComponent>;
-
-export const Default: Story = {
-  render: () => ({
-    props: { props: defaultProps },
-    template: `<val-plain-code-box [props]="props"></val-plain-code-box>`,
-  }),
-};
-
-export const BashCommands: Story = {
-  render: () => ({
-    props: { props: bashCommandsProps },
-    template: `<val-plain-code-box [props]="props"></val-plain-code-box>`,
-  }),
-};
-
-export const WithErrors: Story = {
-  render: () => ({
-    props: { props: withErrorsProps },
-    template: `<val-plain-code-box [props]="props"></val-plain-code-box>`,
-  }),
-};
-
-export const TypeScript: Story = {
-  render: () => ({
-    props: { props: typescriptProps },
-    template: `<val-plain-code-box [props]="props"></val-plain-code-box>`,
-  }),
-};
-
-export const HTML: Story = {
-  render: () => ({
-    props: { props: htmlProps },
-    template: `<val-plain-code-box [props]="props"></val-plain-code-box>`,
-  }),
-};
-
-export const NoCopyButton: Story = {
-  render: () => ({
-    props: { props: noCopyButtonProps },
-    template: `<val-plain-code-box [props]="props"></val-plain-code-box>`,
-  }),
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    props: {
-      installProps: showcaseInstallProps,
-      usageProps: showcaseUsageProps,
-    },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 700px;">
-        <div>
-          <h4 style="margin-bottom: 12px;">Installation</h4>
-          <val-plain-code-box [props]="installProps"></val-plain-code-box>
-        </div>
-
-        <div>
-          <h4 style="margin-bottom: 12px;">Usage Example</h4>
-          <val-plain-code-box [props]="usageProps"></val-plain-code-box>
-        </div>
-      </div>
-    `,
-  }),
-};

package/src/lib/components/molecules/plain-code-box/types.ts

@@ -1,12 +0,0 @@
-export type CodeLineType = 'normal' | 'command' | 'success' | 'error';
-
-export type CodeLine = {
-  text: string;
-  type?: CodeLineType;
-};
-
-export type PlainCodeBoxMetadata = {
-  lines: CodeLine[];
-  showCopyButton?: boolean;
-  language?: string;
-};