valtech-components 2.0.691 → 2.0.692

package/src/lib/components/molecules/refresher/refresher.component.ts

@@ -1,257 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  signal,
-  ViewChild,
-  TemplateRef,
-  ContentChild,
-  inject,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-  IonRefresher,
-  IonRefresherContent,
-  IonSpinner,
-  IonText,
-} from '@ionic/angular/standalone';
-import { I18nService } from '../../../services/i18n';
-import {
-  RefresherMetadata,
-  RefresherState,
-  RefreshEvent,
-  RefreshPullEvent,
-  DEFAULT_REFRESHER_METADATA,
-} from './types';
-
-/**
- * Componente de pull-to-refresh para movil y web.
- *
- * @example
- * <!-- Uso basico -->
- * <val-refresher
- *   [props]="{
- *     color: 'primary',
- *     pullingText: 'Arrastra para actualizar',
- *     refreshingText: 'Cargando...'
- *   }"
- *   (refresh)="onRefresh($event)"
- * >
- *   <ion-content>
- *     <!-- Contenido scrolleable -->
- *   </ion-content>
- * </val-refresher>
- *
- * @example
- * <!-- Con indicador personalizado -->
- * <val-refresher [props]="{ color: 'primary' }" (refresh)="onRefresh($event)">
- *   <ng-template #pullingIndicator let-progress="progress">
- *     <div class="custom-indicator">
- *       <ion-icon name="arrow-down" [style.transform]="'rotate(' + progress * 180 + 'deg)'"></ion-icon>
- *     </div>
- *   </ng-template>
- *   <ion-content>...</ion-content>
- * </val-refresher>
- */
-@Component({
-  selector: 'val-refresher',
-  standalone: true,
-  imports: [CommonModule, IonRefresher, IonRefresherContent, IonSpinner, IonText],
-  template: `
-    <ion-refresher
-      #refresher
-      slot="fixed"
-      [disabled]="mergedProps.disabled"
-      [pullMin]="mergedProps.pullThreshold"
-      [pullMax]="mergedProps.pullMax"
-      [pullFactor]="mergedProps.pullFactor"
-      [snapbackDuration]="mergedProps.snapbackDuration"
-      [closeDuration]="mergedProps.closeDuration"
-      (ionRefresh)="onIonRefresh($event)"
-      (ionPull)="onIonPull($event)"
-      (ionStart)="onIonStart()"
-    >
-      @if (hasCustomIndicator) {
-        <!-- Custom indicator templates -->
-        <div class="refresher-custom-content">
-          @switch (state()) {
-            @case ('pulling') {
-              @if (pullingIndicator) {
-                <ng-container
-                  *ngTemplateOutlet="pullingIndicator; context: { progress: pullProgress() }"
-                ></ng-container>
-              }
-            }
-            @case ('refreshing') {
-              @if (refreshingIndicator) {
-                <ng-container *ngTemplateOutlet="refreshingIndicator"></ng-container>
-              } @else {
-                <ion-spinner [name]="mergedProps.spinnerType" [color]="mergedProps.color"></ion-spinner>
-                @if (mergedProps.refreshingText) {
-                  <ion-text [color]="mergedProps.color">{{ mergedProps.refreshingText }}</ion-text>
-                }
-              }
-            }
-            @case ('completing') {
-              @if (completingIndicator) {
-                <ng-container *ngTemplateOutlet="completingIndicator"></ng-container>
-              }
-            }
-          }
-        </div>
-      } @else {
-        <!-- Default Ionic refresher content -->
-        <ion-refresher-content
-          [pullingIcon]="mergedProps.spinnerType === 'crescent' ? 'chevron-down-circle-outline' : undefined"
-          [pullingText]="mergedProps.pullingText"
-          [refreshingSpinner]="mergedProps.spinnerType"
-          [refreshingText]="mergedProps.refreshingText"
-        ></ion-refresher-content>
-      }
-    </ion-refresher>
-
-    <ng-content></ng-content>
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-        position: relative;
-      }
-
-      .refresher-custom-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        padding: 16px;
-      }
-    `,
-  ],
-})
-export class RefresherComponent {
-  @ViewChild('refresher') ionRefresher!: IonRefresher;
-
-  /** Templates personalizados via content projection */
-  @ContentChild('pullingIndicator') pullingIndicator?: TemplateRef<{ progress: number }>;
-  @ContentChild('refreshingIndicator') refreshingIndicator?: TemplateRef<void>;
-  @ContentChild('completingIndicator') completingIndicator?: TemplateRef<void>;
-
-  /** Configuracion del refresher */
-  @Input() props: RefresherMetadata = {};
-
-  /** Evento emitido cuando se activa el refresh */
-  @Output() refresh = new EventEmitter<RefreshEvent>();
-
-  /** Evento de progreso durante el pull */
-  @Output() pullProgressChange = new EventEmitter<RefreshPullEvent>();
-
-  /** Evento de cambio de estado */
-  @Output() stateChange = new EventEmitter<RefresherState>();
-
-  private i18n = inject(I18nService);
-
-  /** Estado actual del refresher */
-  readonly state = signal<RefresherState>('idle');
-
-  /** Progreso actual del pull (0-1) */
-  readonly pullProgress = signal<number>(0);
-
-  /** Get pulling text with i18n fallback */
-  getPullingText(): string {
-    return this.props.pullingText || this.i18n.t('pullToRefresh');
-  }
-
-  /** Get refreshing text with i18n fallback */
-  getRefreshingText(): string {
-    return this.props.refreshingText || this.i18n.t('loading');
-  }
-
-  /** Props combinados con defaults */
-  get mergedProps(): RefresherMetadata {
-    return {
-      ...DEFAULT_REFRESHER_METADATA,
-      ...this.props,
-      pullingText: this.getPullingText(),
-      refreshingText: this.getRefreshingText(),
-    };
-  }
-
-  /** Si hay indicadores personalizados */
-  get hasCustomIndicator(): boolean {
-    return !!(
-      this.pullingIndicator ||
-      this.refreshingIndicator ||
-      this.completingIndicator ||
-      this.props.indicatorConfig
-    );
-  }
-
-  /**
-   * Activa programaticamente el refresh.
-   */
-  triggerRefresh(): void {
-    this.state.set('refreshing');
-    this.emitRefreshEvent();
-  }
-
-  /**
-   * Completa la operacion de refresh actual.
-   */
-  complete(): void {
-    this.state.set('completing');
-    this.stateChange.emit('completing');
-    this.ionRefresher?.complete();
-
-    // Resetear a idle despues de la animacion
-    setTimeout(() => {
-      this.state.set('idle');
-      this.stateChange.emit('idle');
-    }, this.mergedProps.closeDuration ?? 280);
-  }
-
-  /**
-   * Cancela la operacion de refresh actual.
-   */
-  cancel(): void {
-    this.ionRefresher?.cancel();
-    this.state.set('idle');
-    this.stateChange.emit('idle');
-  }
-
-  /** Handler para evento ionRefresh */
-  onIonRefresh(event: CustomEvent): void {
-    this.state.set('refreshing');
-    this.stateChange.emit('refreshing');
-    this.emitRefreshEvent();
-  }
-
-  /** Handler para evento ionPull */
-  onIonPull(event: CustomEvent): void {
-    const detail = event.detail;
-    const progress = Math.min(detail.progress, 1);
-    this.pullProgress.set(progress);
-
-    this.pullProgressChange.emit({
-      progress,
-      thresholdReached: progress >= 1,
-    });
-  }
-
-  /** Handler para evento ionStart */
-  onIonStart(): void {
-    this.state.set('pulling');
-    this.stateChange.emit('pulling');
-  }
-
-  private emitRefreshEvent(): void {
-    const event: RefreshEvent = {
-      complete: () => this.complete(),
-      cancel: () => this.cancel(),
-      timestamp: new Date(),
-    };
-    this.refresh.emit(event);
-  }
-}

package/src/lib/components/molecules/refresher/types.ts

@@ -1,103 +0,0 @@
-import { TemplateRef } from '@angular/core';
-import { Color } from '@ionic/core';
-
-/**
- * Estado del componente refresher.
- */
-export type RefresherState = 'idle' | 'pulling' | 'refreshing' | 'completing';
-
-/**
- * Tipos de spinner disponibles.
- */
-export type RefresherSpinnerType = 'circular' | 'crescent' | 'dots' | 'lines-sharp';
-
-/**
- * Evento emitido cuando se activa el refresh.
- */
-export interface RefreshEvent {
-  /** Llamar cuando la operacion de refresh completa */
-  complete: () => void;
-  /** Llamar para cancelar el refresh */
-  cancel: () => void;
-  /** Timestamp cuando inicio el refresh */
-  timestamp: Date;
-}
-
-/**
- * Evento de progreso durante el gesto de pull.
- */
-export interface RefreshPullEvent {
-  /** Valor de progreso entre 0 y 1 */
-  progress: number;
-  /** Si se ha alcanzado el umbral de pull */
-  thresholdReached: boolean;
-}
-
-/**
- * Configuracion de indicador personalizado.
- */
-export interface RefresherIndicatorConfig {
-  /** Template personalizado para estado pulling */
-  pullingTemplate?: TemplateRef<{ progress: number }>;
-  /** Template personalizado para estado refreshing */
-  refreshingTemplate?: TemplateRef<void>;
-  /** Template personalizado para estado completing */
-  completingTemplate?: TemplateRef<void>;
-}
-
-/**
- * Metadata para el componente val-refresher.
- */
-export interface RefresherMetadata {
-  /** Si el refresher esta deshabilitado */
-  disabled?: boolean;
-  /** Umbral de pull en pixels (default: 70) */
-  pullThreshold?: number;
-  /** Distancia maxima de pull en pixels (default: 200) */
-  pullMax?: number;
-  /** Factor de resistencia del pull (0-1, default: 0.5) */
-  pullFactor?: number;
-  /** Duracion de snap back en ms (default: 280) */
-  snapbackDuration?: number;
-  /** Duracion de cierre en ms (default: 280) */
-  closeDuration?: number;
-  /** Color del spinner */
-  color?: Color;
-  /** Tipo de spinner */
-  spinnerType?: RefresherSpinnerType;
-  /** Texto mostrado mientras se arrastra */
-  pullingText?: string;
-  /** Texto mostrado mientras se actualiza */
-  refreshingText?: string;
-  /** Configuracion de indicador personalizado */
-  indicatorConfig?: RefresherIndicatorConfig;
-  /** Habilitar feedback haptico en movil (default: true) */
-  hapticFeedback?: boolean;
-  /** Modo web - habilita pull-to-refresh en navegadores desktop */
-  webMode?: boolean;
-  /** Identificador unico */
-  token?: string;
-
-  // Soporte i18n
-  /** Key de traduccion para texto pulling */
-  pullingTextKey?: string;
-  /** Key de traduccion para texto refreshing */
-  refreshingTextKey?: string;
-  /** Clase CSS adicional */
-  contentClass?: string;
-}
-
-/**
- * Valores por defecto para el refresher.
- */
-export const DEFAULT_REFRESHER_METADATA: Partial<RefresherMetadata> = {
-  disabled: false,
-  pullThreshold: 70,
-  pullMax: 200,
-  pullFactor: 0.5,
-  snapbackDuration: 280,
-  closeDuration: 280,
-  spinnerType: 'crescent',
-  hapticFeedback: true,
-  webMode: false,
-};

package/src/lib/components/molecules/searchbar/searchbar.component.scss

@@ -1,9 +0,0 @@
-@import '../../styles/variables.scss';
-@import '../../styles/mixins.scss';
-
-ion-searchbar {
-  --cancel-button-color: var(--ion-color-dark);
-  --background: var(--ion-color-light);
-
-  font-family: var(--ion-default-font), Arial, sans-serif;
-}

package/src/lib/components/molecules/searchbar/searchbar.component.ts

@@ -1,122 +0,0 @@
-import { Component, EventEmitter, inject, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { IonSearchbar } from '@ionic/angular/standalone';
-import { I18nService } from '../../../services/i18n';
-import { PresetService } from '../../../services/presets';
-import { SearchbarMetadata } from './types';
-
-@Component({
-  selector: 'val-searchbar',
-  standalone: true,
-  imports: [IonSearchbar],
-  template: `
-    <ion-searchbar
-      [mode]="resolvedProps.mode || 'ios'"
-      [debounce]="resolvedProps.debounce || 500"
-      [placeholder]="getPlaceholder()"
-      [disabled]="resolvedProps.disabled"
-      [showCancelButton]="resolvedProps.showCancelButton || 'focus'"
-      [cancelButtonText]="getCancelText()"
-      (ionInput)="onSearch($event)"
-      (ionBlur)="onBlur()"
-      (ionFocus)="onFocus()"
-    >
-    </ion-searchbar>
-  `,
-  styleUrls: ['./searchbar.component.scss'],
-})
-/**
- * val-searchbar
- *
- * A search bar component with debounce and event emitters for filtering, focus, and blur.
- * Supports presets for reusable configurations.
- *
- * @example With preset:
- * <val-searchbar preset="default" (filterEvent)="onFilter($event)"></val-searchbar>
- *
- * @example With props:
- * <val-searchbar [props]="{ placeholder: 'Search...', debounce: 300 }"></val-searchbar>
- *
- * @input preset: string - Name of preset to apply
- * @input props: SearchbarMetadata - Configuration for the searchbar
- * @output filterEvent - Emits the search term on input.
- * @output focusEvent - Emits when the searchbar gains focus.
- * @output blurEvent - Emits when the searchbar loses focus.
- */
-export class SearchbarComponent implements OnInit, OnChanges {
-  private presets = inject(PresetService);
-  private i18n = inject(I18nService);
-
-  /**
-   * Preset name to apply.
-   */
-  @Input() preset?: string;
-
-  /**
-   * Configuration object. Values here override preset values.
-   */
-  @Input() props: Partial<SearchbarMetadata> = {};
-
-  /**
-   * Resolved props after merging preset + explicit props.
-   */
-  resolvedProps: SearchbarMetadata = {};
-
-  /**
-   * Emits the search term on input.
-   */
-  @Output() filterEvent = new EventEmitter<string>();
-
-  /**
-   * Emits when the searchbar gains focus.
-   */
-  @Output() focusEvent = new EventEmitter<void>();
-
-  /**
-   * Emits when the searchbar loses focus.
-   */
-  @Output() blurEvent = new EventEmitter<void>();
-
-  ngOnInit() {
-    this.resolveProps();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['preset'] || changes['props']) {
-      this.resolveProps();
-    }
-  }
-
-  private resolveProps(): void {
-    const presetProps = this.preset
-      ? (this.presets.get('searchbar', this.preset) as Partial<SearchbarMetadata>)
-      : {};
-
-    this.resolvedProps = {
-      ...presetProps,
-      ...this.props,
-    };
-  }
-
-  /** Get placeholder text */
-  getPlaceholder(): string {
-    return this.resolvedProps.placeholder || this.i18n.t('search');
-  }
-
-  /** Get cancel button text */
-  getCancelText(): string {
-    return this.resolvedProps.cancelText || this.i18n.t('cancel');
-  }
-
-  onSearch($event: any) {
-    const searchTerm = $event.detail.value;
-    this.filterEvent.emit(searchTerm);
-  }
-
-  onFocus() {
-    this.focusEvent.emit();
-  }
-
-  onBlur() {
-    this.blurEvent.emit();
-  }
-}

package/src/lib/components/molecules/searchbar/searchbar.stories.ts

@@ -1,192 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { SearchbarComponent } from './searchbar.component';
-
-const meta: Meta<SearchbarComponent> = {
-  title: 'Molecules/Searchbar',
-  component: SearchbarComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, SearchbarComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Searchbar configuration object',
-      control: 'object',
-    },
-    filterEvent: {
-      action: 'filterEvent',
-      description: 'Event emitted with search term on input (debounced 500ms)',
-    },
-    focusEvent: {
-      action: 'focusEvent',
-      description: 'Event emitted when searchbar gains focus',
-    },
-    blurEvent: {
-      action: 'blurEvent',
-      description: 'Event emitted when searchbar loses focus',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-searchbar
-
-A search bar component built on Ionic's IonSearchbar with built-in debounce functionality.
-
-### Usage
-
-\`\`\`html
-<val-searchbar
-  [disabled]="false"
-  (filterEvent)="onSearch($event)"
-  (focusEvent)="onFocus()"
-  (blurEvent)="onBlur()">
-</val-searchbar>
-\`\`\`
-
-### Features
-
-- **Debounce**: 500ms debounce on input to prevent excessive API calls
-- **iOS Mode**: Consistent iOS styling across platforms
-- **Cancel Button**: Shows cancel button on focus
-- **Events**: Emits filter, focus, and blur events
-
-### Implementation Notes
-
-The component uses Ionic's IonSearchbar with:
-- \`mode="ios"\` for consistent styling
-- \`debounce="500"\` for performance optimization
-- \`showCancelButton="focus"\` for better UX
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<SearchbarComponent>;
-
-export const Default: Story = {
-  args: {
-    props: { disabled: false },
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    props: { disabled: true },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Disabled searchbar that does not accept input.',
-      },
-    },
-  },
-};
-
-export const InContext: Story = {
-  render: () => ({
-    template: `
-      <div style="padding: 16px; background: var(--ion-background-color, #f4f5f8);">
-        <h3 style="margin: 0 0 16px 0; color: var(--ion-color-dark);">Search Products</h3>
-        <val-searchbar [disabled]="false"></val-searchbar>
-        <div style="margin-top: 16px; padding: 16px; background: white; border-radius: 8px;">
-          <p style="color: var(--ion-color-medium); margin: 0;">Search results will appear here...</p>
-        </div>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Searchbar shown in a typical page context with results area.',
-      },
-    },
-  },
-};
-
-export const WithHeader: Story = {
-  render: () => ({
-    template: `
-      <div style="background: var(--ion-color-primary); padding: 16px;">
-        <h2 style="margin: 0 0 12px 0; color: white;">Find Items</h2>
-        <val-searchbar [disabled]="false"></val-searchbar>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Searchbar placed in a colored header section.',
-      },
-    },
-  },
-};
-
-export const FilterList: Story = {
-  render: () => ({
-    template: `
-      <div style="padding: 16px;">
-        <val-searchbar [disabled]="false" (filterEvent)="onFilter($event)"></val-searchbar>
-        <div style="margin-top: 16px;">
-          <div style="padding: 12px; border-bottom: 1px solid #eee;">Item 1</div>
-          <div style="padding: 12px; border-bottom: 1px solid #eee;">Item 2</div>
-          <div style="padding: 12px; border-bottom: 1px solid #eee;">Item 3</div>
-          <div style="padding: 12px; border-bottom: 1px solid #eee;">Item 4</div>
-          <div style="padding: 12px;">Item 5</div>
-        </div>
-      </div>
-    `,
-    props: {
-      onFilter: (term: string) => console.log('Filter:', term),
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Searchbar used to filter a list of items. Check the Actions tab to see emitted events.',
-      },
-    },
-  },
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 24px; padding: 16px;">
-        <div>
-          <h3 style="margin: 0 0 8px 0; color: #666;">Enabled</h3>
-          <val-searchbar [disabled]="false"></val-searchbar>
-        </div>
-
-        <div>
-          <h3 style="margin: 0 0 8px 0; color: #666;">Disabled</h3>
-          <val-searchbar [disabled]="true"></val-searchbar>
-        </div>
-
-        <div style="background: var(--ion-color-light); padding: 16px; border-radius: 8px;">
-          <h3 style="margin: 0 0 8px 0; color: #666;">On Light Background</h3>
-          <val-searchbar [disabled]="false"></val-searchbar>
-        </div>
-
-        <div style="background: var(--ion-color-dark); padding: 16px; border-radius: 8px;">
-          <h3 style="margin: 0 0 8px 0; color: white;">On Dark Background</h3>
-          <val-searchbar [disabled]="false"></val-searchbar>
-        </div>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Showcase of searchbar in different states and backgrounds.',
-      },
-    },
-  },
-};