valtech-components 2.0.687 → 2.0.689

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

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

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

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

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

@@ -0,0 +1,192 @@
+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.',
+      },
+    },
+  },
+};