valtech-components 2.0.795 → 2.0.796

package/src/lib/components/molecules/number-stepper/types.ts

@@ -1,101 +0,0 @@
-import { FormControl } from '@angular/forms';
-import { Color } from '@ionic/core';
-import { ComponentState } from '../../types';
-
-/**
- * Quick selection preset for number stepper.
- */
-export interface NumberStepperPreset {
-  /** Preset value */
-  value: number;
-  /** Display label (optional, defaults to value) */
-  label?: string;
-  /** Whether this is a popular/highlighted option */
-  popular?: boolean;
-}
-
-/**
- * Metadata for the number stepper component.
- */
-export interface NumberStepperMetadata {
-  /** Form control for the value */
-  control: FormControl<number>;
-  /** Minimum value */
-  min?: number;
-  /** Maximum value */
-  max?: number;
-  /** Step increment */
-  step?: number;
-  /** Show manual input field */
-  showInput?: boolean;
-  /** Allow manual input editing */
-  editableInput?: boolean;
-
-  // === Pricing (optional) ===
-  /** Unit price for total calculation */
-  unitPrice?: number;
-  /** Currency code for price display */
-  currency?: string;
-  /** Currency symbol */
-  currencySymbol?: string;
-  /** Show total price */
-  showTotal?: boolean;
-  /** Unit label (e.g., "boletos", "tickets") */
-  unitLabel?: string;
-  /** Singular unit label */
-  unitLabelSingular?: string;
-
-  // === Quick selection ===
-  /** Preset values for quick selection */
-  presets?: NumberStepperPreset[];
-  /** Show preset buttons */
-  showPresets?: boolean;
-
-  // === Styling ===
-  /** Component color */
-  color?: Color;
-  /** Size variant */
-  size?: 'small' | 'medium' | 'large';
-  /** Button shape */
-  buttonShape?: 'square' | 'round';
-  /** Layout direction */
-  layout?: 'horizontal' | 'vertical';
-  /** Custom CSS class */
-  cssClass?: string;
-  /** Component state */
-  state?: ComponentState;
-
-  // === Labels ===
-  /** Label for the component */
-  label?: string;
-  /** Hint text */
-  hint?: string;
-  /** Decrement button aria label */
-  decrementLabel?: string;
-  /** Increment button aria label */
-  incrementLabel?: string;
-
-  // === Reactive content ===
-  /** Content key for label */
-  labelContentKey?: string;
-  /** Content key for unit label */
-  unitLabelContentKey?: string;
-  /** Content class for reactive content */
-  contentClass?: string;
-}
-
-/**
- * Event emitted when value changes.
- */
-export interface NumberStepperChangeEvent {
-  /** New value */
-  value: number;
-  /** Previous value */
-  previousValue: number;
-  /** Total price (if unitPrice is set) */
-  totalPrice?: number;
-  /** Whether at minimum */
-  atMin: boolean;
-  /** Whether at maximum */
-  atMax: boolean;
-}

package/src/lib/components/molecules/page-links/page-links.component.scss

@@ -1,93 +0,0 @@
-/**
- * val-page-links — stacked list of navigational links.
- *
- * Pattern: each item is a full-width row with label on the left, optional icon
- * on the right, and a hairline divider below (last item has no divider).
- * Hover: text color shifts to primary, icon nudges right.
- */
-
-:host {
-  display: block;
-}
-
-.val-page-links {
-  display: flex;
-  flex-direction: column;
-}
-
-.val-page-links__item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-  padding: 14px 4px;
-  background: transparent;
-  border: 0;
-  border-bottom: 1px solid var(--ion-color-light-shade, #e8e9ec);
-  color: var(--ion-color-dark);
-  font-size: 0.95rem;
-  line-height: 1.4;
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    color 0.15s ease,
-    background 0.15s ease;
-
-  &.is-last {
-    border-bottom: 0;
-  }
-
-  &:hover {
-    color: var(--ion-color-primary, #7026df);
-
-    .val-page-links__icon--default {
-      transform: translateX(2px);
-    }
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--ion-color-primary, #7026df);
-    outline-offset: 2px;
-    border-radius: 6px;
-  }
-}
-
-.val-page-links__label {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.val-page-links__icon {
-  flex-shrink: 0;
-  font-size: 18px;
-  color: var(--ion-color-medium);
-  transition: transform 0.15s ease;
-}
-
-.val-page-links__icon--default {
-  font-size: 16px;
-  opacity: 0.7;
-}
-
-// Variants
-.val-page-links.no-dividers .val-page-links__item {
-  border-bottom: 0;
-}
-
-.val-page-links.size-small .val-page-links__item {
-  font-size: 0.85rem;
-  padding: 10px 4px;
-}
-.val-page-links.size-large .val-page-links__item {
-  font-size: 1.05rem;
-  padding: 18px 4px;
-}
-
-// Dark theme
-:host-context(body.dark) .val-page-links__item,
-:host-context(html.ion-palette-dark) .val-page-links__item,
-:host-context([data-theme='dark']) .val-page-links__item {
-  border-bottom-color: rgba(255, 255, 255, 0.08);
-}

package/src/lib/components/molecules/page-links/page-links.component.ts

@@ -1,103 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core';
-import { RouterLink } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import { chevronForwardOutline, openOutline } from 'ionicons/icons';
-import { PageLink, PageLinksMetadata } from './types';
-
-/**
- * `val-page-links` — stacked list of navigational links with optional dividers.
- * Used for legal/policies, footer link columns, "about" sections, etc.
- *
- * Each item can navigate via Angular `routerLink` (SPA) or external `href`.
- * Detects absolute URLs (`http(s)://`) to apply `target="_blank"` by default.
- *
- * @example
- * <val-page-links [props]="{
- *   links: [
- *     { label: 'Terms', routerLink: '/legal/terms' },
- *     { label: 'Privacy', routerLink: '/legal/privacy' },
- *     { label: 'Visit main site', href: 'https://myvaltech.com', icon: 'open-outline' },
- *   ],
- * }"></val-page-links>
- */
-@Component({
-  selector: 'val-page-links',
-  standalone: true,
-  imports: [CommonModule, RouterLink, IonIcon],
-  template: `
-    <nav
-      class="val-page-links"
-      [class.no-dividers]="props.showDividers === false"
-      [class.size-small]="props.size === 'small'"
-      [class.size-large]="props.size === 'large'"
-    >
-      @for (link of links(); track link.label; let last = $last) {
-        @if (link.routerLink) {
-          <a
-            class="val-page-links__item"
-            [routerLink]="link.routerLink"
-            [class.is-last]="last"
-            [attr.aria-label]="link.ariaLabel || link.label"
-          >
-            <span class="val-page-links__label">{{ link.label }}</span>
-            @if (link.icon) {
-              <ion-icon class="val-page-links__icon" [name]="link.icon" aria-hidden="true"></ion-icon>
-            } @else {
-              <ion-icon
-                class="val-page-links__icon val-page-links__icon--default"
-                name="chevron-forward-outline"
-                aria-hidden="true"
-              ></ion-icon>
-            }
-          </a>
-        } @else if (link.href) {
-          <a
-            class="val-page-links__item"
-            [href]="link.href"
-            [class.is-last]="last"
-            [attr.target]="isExternal(link) ? '_blank' : null"
-            [attr.rel]="isExternal(link) ? 'noopener noreferrer' : null"
-            [attr.aria-label]="link.ariaLabel || link.label"
-          >
-            <span class="val-page-links__label">{{ link.label }}</span>
-            @if (link.icon) {
-              <ion-icon class="val-page-links__icon" [name]="link.icon" aria-hidden="true"></ion-icon>
-            } @else {
-              <ion-icon
-                class="val-page-links__icon val-page-links__icon--default"
-                [name]="isExternal(link) ? 'open-outline' : 'chevron-forward-outline'"
-                aria-hidden="true"
-              ></ion-icon>
-            }
-          </a>
-        }
-      }
-    </nav>
-  `,
-  styleUrls: ['./page-links.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PageLinksComponent {
-  /** Page links configuration object. */
-  @Input({ required: true }) set props(value: PageLinksMetadata) {
-    this._props.set(value);
-  }
-  get props(): PageLinksMetadata {
-    return this._props();
-  }
-
-  private _props = signal<PageLinksMetadata>({ links: [] });
-
-  protected links = computed(() => this._props().links ?? []);
-
-  constructor() {
-    addIcons({ chevronForwardOutline, openOutline });
-  }
-
-  protected isExternal(link: PageLink): boolean {
-    if (link.external !== undefined) return link.external;
-    return !!link.href && /^https?:\/\//i.test(link.href);
-  }
-}

package/src/lib/components/molecules/page-links/types.ts

@@ -1,39 +0,0 @@
-/**
- * Single entry of a `val-page-links` list.
- *
- * Pass EITHER `routerLink` (Angular SPA navigation) OR `href` (external URL).
- * If both are present, `routerLink` wins.
- */
-export interface PageLink {
-  /** Visible text. */
-  label: string;
-  /** Angular router path (e.g. `/legal/terms`). */
-  routerLink?: string;
-  /** External URL (e.g. `https://myvaltech.com/legal/terms`). */
-  href?: string;
-  /**
-   * Force opens in a new tab. Defaults to `true` when `href` looks absolute
-   * (starts with `http://` or `https://`).
-   */
-  external?: boolean;
-  /**
-   * Optional Ionic icon name shown after the label (e.g. `arrow-forward-outline`,
-   * `open-outline` for external). When omitted, no icon is rendered.
-   */
-  icon?: string;
-  /** Optional tooltip / aria-label override. */
-  ariaLabel?: string;
-}
-
-/**
- * Config for `val-page-links` — stacked list of navigational links.
- * Used for legal/policies, footer link columns, "About" sections, etc.
- */
-export interface PageLinksMetadata {
-  /** Items to render in order. */
-  links: PageLink[];
-  /** Show a divider line between items. Default `true`. */
-  showDividers?: boolean;
-  /** Visual size preset. Default `'medium'`. */
-  size?: 'small' | 'medium' | 'large';
-}

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

@@ -1,50 +0,0 @@
-:host {
-  display: block;
-}
-
-.pagination-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  flex-wrap: wrap;
-
-  &.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-
-ion-button {
-  --padding-start: 8px;
-  --padding-end: 8px;
-  min-width: 36px;
-  font-weight: 500;
-
-  &[size='small'] {
-    --padding-start: 6px;
-    --padding-end: 6px;
-    min-width: 28px;
-    font-size: 12px;
-  }
-
-  &[size='large'] {
-    --padding-start: 12px;
-    --padding-end: 12px;
-    min-width: 44px;
-    font-size: 16px;
-  }
-}
-
-.ellipsis {
-  padding: 0 8px;
-  color: var(--ion-color-medium);
-  font-size: 14px;
-}
-
-.page-info {
-  margin-left: 16px;
-  color: var(--ion-color-medium);
-  font-size: 14px;
-  white-space: nowrap;
-}

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

@@ -1,194 +0,0 @@
-import { Component, Input, OnChanges, Output, EventEmitter, SimpleChanges } from '@angular/core';
-import { IonButton, IonIcon } from '@ionic/angular/standalone';
-import { CommonModule } from '@angular/common';
-import { PaginationMetadata, PageChangeEvent } from './types';
-import { addIcons } from 'ionicons';
-import { chevronBack, chevronForward, playBack, playForward } from 'ionicons/icons';
-
-addIcons({ chevronBack, chevronForward, playBack, playForward });
-
-@Component({
-  selector: 'val-pagination',
-  standalone: true,
-  imports: [CommonModule, IonButton, IonIcon],
-  template: `
-    <div class="pagination-container" [class.disabled]="props.disabled">
-      @if (props.showFirstLast !== false) {
-        <ion-button
-          fill="clear"
-          [size]="props.size || 'default'"
-          [color]="props.color || 'primary'"
-          [disabled]="props.disabled || props.currentPage <= 1"
-          (click)="goToPage(1)"
-        >
-          <ion-icon slot="icon-only" name="play-back"></ion-icon>
-        </ion-button>
-      }
-
-      @if (props.showPrevNext !== false) {
-        <ion-button
-          fill="clear"
-          [size]="props.size || 'default'"
-          [color]="props.color || 'primary'"
-          [disabled]="props.disabled || props.currentPage <= 1"
-          (click)="goToPage(props.currentPage - 1)"
-        >
-          <ion-icon slot="icon-only" name="chevron-back"></ion-icon>
-        </ion-button>
-      }
-
-      @for (page of visiblePages; track page) {
-        @if (page === -1) {
-          <span class="ellipsis">...</span>
-        } @else {
-          <ion-button
-            [fill]="page === props.currentPage ? 'solid' : 'clear'"
-            [size]="props.size || 'default'"
-            [color]="props.color || 'primary'"
-            [disabled]="props.disabled"
-            (click)="goToPage(page)"
-          >
-            {{ page }}
-          </ion-button>
-        }
-      }
-
-      @if (props.showPrevNext !== false) {
-        <ion-button
-          fill="clear"
-          [size]="props.size || 'default'"
-          [color]="props.color || 'primary'"
-          [disabled]="props.disabled || props.currentPage >= totalPages"
-          (click)="goToPage(props.currentPage + 1)"
-        >
-          <ion-icon slot="icon-only" name="chevron-forward"></ion-icon>
-        </ion-button>
-      }
-
-      @if (props.showFirstLast !== false) {
-        <ion-button
-          fill="clear"
-          [size]="props.size || 'default'"
-          [color]="props.color || 'primary'"
-          [disabled]="props.disabled || props.currentPage >= totalPages"
-          (click)="goToPage(totalPages)"
-        >
-          <ion-icon slot="icon-only" name="play-forward"></ion-icon>
-        </ion-button>
-      }
-
-      @if (props.showPageInfo) {
-        <span class="page-info">Page {{ props.currentPage }} of {{ totalPages }}</span>
-      }
-    </div>
-  `,
-  styleUrls: ['./pagination.component.scss'],
-})
-/**
- * val-pagination
- *
- * A pagination component for navigating through paged content.
- *
- * @example Basic usage
- * <val-pagination [props]="{
- *   currentPage: 1,
- *   totalPages: 10,
- *   showPageInfo: true
- * }" (pageChange)="onPageChange($event)"></val-pagination>
- *
- * @example With total items
- * <val-pagination [props]="{
- *   currentPage: 1,
- *   totalItems: 100,
- *   pageSize: 10,
- *   maxVisiblePages: 5
- * }"></val-pagination>
- *
- * @input props: PaginationMetadata - Configuration for pagination
- * @output pageChange: PageChangeEvent - Emits when page changes
- */
-export class PaginationComponent implements OnChanges {
-  @Input() props: PaginationMetadata;
-
-  @Output() pageChange = new EventEmitter<PageChangeEvent>();
-
-  visiblePages: number[] = [];
-  totalPages: number = 1;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['props']) {
-      this.calculateTotalPages();
-      this.calculateVisiblePages();
-    }
-  }
-
-  goToPage(page: number): void {
-    if (page < 1 || page > this.totalPages || page === this.props.currentPage) {
-      return;
-    }
-
-    const event: PageChangeEvent = {
-      page,
-      previousPage: this.props.currentPage,
-      pageSize: this.props.pageSize || 10,
-    };
-
-    this.pageChange.emit(event);
-  }
-
-  private calculateTotalPages(): void {
-    if (this.props.totalPages) {
-      this.totalPages = this.props.totalPages;
-    } else if (this.props.totalItems && this.props.pageSize) {
-      this.totalPages = Math.ceil(this.props.totalItems / this.props.pageSize);
-    } else {
-      this.totalPages = 1;
-    }
-  }
-
-  private calculateVisiblePages(): void {
-    const maxVisible = this.props.maxVisiblePages || 5;
-    const current = this.props.currentPage;
-    const total = this.totalPages;
-
-    if (total <= maxVisible) {
-      this.visiblePages = Array.from({ length: total }, (_, i) => i + 1);
-      return;
-    }
-
-    const pages: number[] = [];
-    const half = Math.floor(maxVisible / 2);
-
-    let start = Math.max(1, current - half);
-    let end = Math.min(total, start + maxVisible - 1);
-
-    if (end - start < maxVisible - 1) {
-      start = Math.max(1, end - maxVisible + 1);
-    }
-
-    // Always show first page
-    if (start > 1) {
-      pages.push(1);
-      if (start > 2) {
-        pages.push(-1); // Ellipsis
-      }
-    }
-
-    // Middle pages
-    for (let i = start; i <= end; i++) {
-      if (!pages.includes(i)) {
-        pages.push(i);
-      }
-    }
-
-    // Always show last page
-    if (end < total) {
-      if (end < total - 1) {
-        pages.push(-1); // Ellipsis
-      }
-      pages.push(total);
-    }
-
-    this.visiblePages = pages;
-  }
-}