valtech-components 2.0.691 → 2.0.692

package/src/lib/components/templates/auth-background/auth-background.component.ts

@@ -1,258 +0,0 @@
-import { Component, Input, signal, computed } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AuthBackgroundMetadata } from './types';
-
-interface WaveData {
-  id: number;
-  path: string;
-  color: string;
-  thickness: number;
-  opacity: number;
-  duration: number;
-  delay: number;
-}
-
-/**
- * val-auth-background
- *
- * A visually striking background component for authentication pages.
- * Features animated wave patterns, grain texture, and glassmorphism effects.
- * Supports dark mode automatically via CSS variables.
- *
- * @example Basic usage
- * ```html
- * <val-auth-background>
- *   <div class="my-content">
- *     <h1>Welcome</h1>
- *     <val-login [props]="loginProps" />
- *   </div>
- * </val-auth-background>
- * ```
- *
- * @example Custom configuration
- * ```html
- * <val-auth-background [props]="{
- *   waveCount: 30,
- *   showGrain: false,
- *   minHeight: '100vh'
- * }">
- *   <div class="content">...</div>
- * </val-auth-background>
- * ```
- */
-@Component({
-  selector: 'val-auth-background',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <section class="auth-background" [style.min-height]="config().minHeight">
-      @if (config().showGrain) {
-        <div class="grain"></div>
-      }
-      @if (config().showGlass) {
-        <div class="glass-layer"></div>
-      }
-      <div class="wave-bg">
-        <svg class="waves" viewBox="0 0 1440 800" preserveAspectRatio="none">
-          @for (wave of waves(); track wave.id) {
-            <path
-              [attr.d]="wave.path"
-              [attr.stroke]="wave.color"
-              [attr.stroke-width]="wave.thickness"
-              [style.opacity]="wave.opacity"
-              [style.animation-duration]="wave.duration + 's'"
-              [style.animation-delay]="wave.delay + 's'"
-            />
-          }
-        </svg>
-      </div>
-
-      <div class="content-layer">
-        <ng-content></ng-content>
-      </div>
-    </section>
-  `,
-  styles: [`
-    /* Theme variables - Light mode (default) */
-    :host {
-      display: block;
-      --auth-bg-start: #ffffff;
-      --auth-bg-mid: #f8f9fa;
-      --auth-bg-end: #f0f0f0;
-      --auth-glass-bg: rgba(255, 255, 255, 0.3);
-      --auth-grain-opacity: 0.035;
-      --auth-wave-color: var(--ion-color-primary, #6366f1);
-    }
-
-    /* Dark mode - System preference */
-    @media (prefers-color-scheme: dark) {
-      :host {
-        --auth-bg-start: #0f0f1a;
-        --auth-bg-mid: #1a1a2e;
-        --auth-bg-end: #16213e;
-        --auth-glass-bg: rgba(0, 0, 0, 0.3);
-        --auth-grain-opacity: 0.05;
-        --auth-wave-color: var(--ion-color-primary, #818cf8);
-      }
-    }
-
-    /* Dark mode - Class-based (for toggle support) */
-    :host-context(body.dark),
-    :host-context(.dark),
-    :host-context([data-theme="dark"]) {
-      --auth-bg-start: #0f0f1a;
-      --auth-bg-mid: #1a1a2e;
-      --auth-bg-end: #16213e;
-      --auth-glass-bg: rgba(0, 0, 0, 0.3);
-      --auth-grain-opacity: 0.05;
-      --auth-wave-color: var(--ion-color-primary, #818cf8);
-    }
-
-    .auth-background {
-      position: relative;
-      display: flex;
-      align-items: center;
-      padding: 0;
-      background: linear-gradient(135deg, var(--auth-bg-start) 0%, var(--auth-bg-mid) 50%, var(--auth-bg-end) 100%);
-      overflow: hidden;
-    }
-
-    .grain {
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      z-index: 0;
-      opacity: var(--auth-grain-opacity);
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
-    }
-
-    .glass-layer {
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      z-index: 1;
-      background: var(--auth-glass-bg);
-      backdrop-filter: blur(3px) saturate(120%);
-      -webkit-backdrop-filter: blur(3px) saturate(120%);
-    }
-
-    .wave-bg {
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      z-index: 0;
-      transition: filter 0.3s ease;
-    }
-
-    /* Invert waves in dark mode */
-    @media (prefers-color-scheme: dark) {
-      .wave-bg {
-        filter: invert(1) opacity(0.6);
-      }
-    }
-
-    :host-context(body.dark) .wave-bg,
-    :host-context(.dark) .wave-bg,
-    :host-context([data-theme="dark"]) .wave-bg {
-      filter: invert(1) opacity(0.6);
-    }
-
-    .waves {
-      width: 100%;
-      height: 100%;
-    }
-
-    .waves path {
-      fill: none;
-      animation: wave-pulse ease-in-out infinite alternate;
-    }
-
-    @keyframes wave-pulse {
-      0% {
-        transform: scaleY(1);
-        opacity: var(--base-opacity, 0.2);
-      }
-      100% {
-        transform: scaleY(1.3);
-        opacity: calc(var(--base-opacity, 0.2) + 0.1);
-      }
-    }
-
-    .content-layer {
-      position: relative;
-      z-index: 2;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-    }
-  `],
-})
-export class AuthBackgroundComponent {
-  private _props = signal<AuthBackgroundMetadata>({});
-
-  @Input()
-  set props(value: AuthBackgroundMetadata) {
-    this._props.set(value);
-    this.regenerateWaves();
-  }
-  get props(): AuthBackgroundMetadata {
-    return this._props();
-  }
-
-  private defaultColors = ['#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242'];
-  private wavesSignal = signal<WaveData[]>([]);
-
-  config = computed(() => {
-    const props = this._props();
-    return {
-      waveCount: props.waveCount ?? 45,
-      waveColors: props.waveColors ?? this.defaultColors,
-      showGrain: props.showGrain !== false,
-      showGlass: props.showGlass !== false,
-      minHeight: props.minHeight ?? 'calc(100vh - 120px)',
-    };
-  });
-
-  waves = computed(() => this.wavesSignal());
-
-  constructor() {
-    this.regenerateWaves();
-  }
-
-  private regenerateWaves(): void {
-    const cfg = this.config();
-    const colors = cfg.waveColors;
-    const count = cfg.waveCount;
-
-    const newWaves = Array.from({ length: count }, (_, i) => {
-      const y = 20 + i * 18;
-      const isThick = i % 5 === 0;
-      const isMedium = i % 3 === 0 && !isThick;
-
-      const amplitude = 10 + Math.random() * 20;
-      const frequency = 1 + Math.random() * 2;
-      const phase = Math.random() * Math.PI * 2;
-
-      let path = `M0,${y}`;
-      for (let x = 0; x <= 1440; x += 40) {
-        const waveY = y + amplitude * Math.sin((x / 1440) * Math.PI * frequency * 2 + phase);
-        path += ` L${x},${waveY.toFixed(1)}`;
-      }
-
-      const color = colors[Math.floor(Math.random() * colors.length)];
-
-      return {
-        id: i,
-        path,
-        color,
-        thickness: isThick ? 1.2 : isMedium ? 0.7 : 0.3,
-        opacity: isThick ? 0.5 : isMedium ? 0.4 : 0.3,
-        duration: 2 + Math.random() * 3,
-        delay: Math.random() * -3,
-      };
-    });
-
-    this.wavesSignal.set(newWaves);
-  }
-}

package/src/lib/components/templates/auth-background/types.ts

@@ -1,34 +0,0 @@
-/**
- * Configuration for the auth-background component.
- */
-export interface AuthBackgroundMetadata {
-  /**
-   * Number of animated wave lines.
-   * @default 45
-   */
-  waveCount?: number;
-
-  /**
-   * Array of colors for waves. Picks randomly from this palette.
-   * @default ['#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242']
-   */
-  waveColors?: string[];
-
-  /**
-   * Show grain texture overlay.
-   * @default true
-   */
-  showGrain?: boolean;
-
-  /**
-   * Show glassmorphism layer.
-   * @default true
-   */
-  showGlass?: boolean;
-
-  /**
-   * Minimum height of the background container.
-   * @default 'calc(100vh - 120px)'
-   */
-  minHeight?: string;
-}

package/src/lib/components/templates/docs-layout/docs-layout.component.scss

@@ -1,218 +0,0 @@
-.docs-layout {
-  --sidebar-width: 260px;
-  --toc-width: 220px;
-  --content-max-width: 900px;
-  --header-height: 56px;
-  --spacing-md: 1.5rem;
-  --spacing-lg: 2rem;
-
-  display: grid;
-  grid-template-columns: var(--sidebar-width) 1fr var(--toc-width);
-  min-height: 100vh;
-  background: var(--ion-background-color, #fff);
-
-  // ==========================================================================
-  // Mobile Header
-  // ==========================================================================
-  &__mobile-header {
-    display: none;
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    height: var(--header-height);
-    padding: 0 var(--spacing-md);
-    background: var(--ion-background-color, #fff);
-    border-bottom: 1px solid var(--ion-border-color, #e0e0e0);
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  &__menu-toggle {
-    --padding-start: 0;
-    --padding-end: 0;
-  }
-
-  // ==========================================================================
-  // Backdrop
-  // ==========================================================================
-  &__backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 199;
-    opacity: 0;
-    animation: fadeIn 0.2s ease forwards;
-  }
-
-  @keyframes fadeIn {
-    to {
-      opacity: 1;
-    }
-  }
-
-  // ==========================================================================
-  // Sidebar
-  // ==========================================================================
-  &__sidebar {
-    position: sticky;
-    top: 0;
-    height: 100vh;
-    overflow-y: auto;
-    border-right: 1px solid var(--ion-border-color, #e0e0e0);
-    background: var(--ion-background-color, #fff);
-    z-index: 200;
-
-    // Custom scrollbar
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: var(--ion-color-medium, #92949c);
-      border-radius: 3px;
-    }
-  }
-
-  &__sidebar-content {
-    padding: var(--spacing-md);
-  }
-
-  // ==========================================================================
-  // Main Content
-  // ==========================================================================
-  &__main {
-    min-width: 0; // Prevent overflow
-    padding: var(--spacing-lg);
-  }
-
-  &__content {
-    max-width: var(--content-max-width);
-    margin: 0 auto;
-  }
-
-  // ==========================================================================
-  // Table of Contents
-  // ==========================================================================
-  &__toc {
-    position: sticky;
-    top: 0;
-    height: 100vh;
-    overflow-y: auto;
-    padding: var(--spacing-lg) var(--spacing-md);
-    border-left: 1px solid var(--ion-border-color, #e0e0e0);
-    background: var(--ion-background-color, #fff);
-
-    // Custom scrollbar
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: var(--ion-color-medium, #92949c);
-      border-radius: 2px;
-    }
-  }
-
-  &__toc-content {
-    position: sticky;
-    top: var(--spacing-lg);
-  }
-
-  // ==========================================================================
-  // Tablet Layout (sidebar collapsible, no TOC)
-  // ==========================================================================
-  &--tablet {
-    grid-template-columns: 1fr;
-
-    .docs-layout__mobile-header {
-      display: flex;
-    }
-
-    .docs-layout__sidebar {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: var(--sidebar-width);
-      transform: translateX(-100%);
-      transition: transform 0.3s ease;
-      box-shadow: none;
-
-      &--open {
-        transform: translateX(0);
-        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
-      }
-    }
-
-    .docs-layout__main {
-      padding-top: calc(var(--header-height) + var(--spacing-md));
-    }
-
-    .docs-layout__toc {
-      display: none;
-    }
-  }
-
-  // ==========================================================================
-  // Mobile Layout (sidebar as drawer)
-  // ==========================================================================
-  &--mobile {
-    grid-template-columns: 1fr;
-
-    .docs-layout__mobile-header {
-      display: flex;
-    }
-
-    .docs-layout__sidebar {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: min(var(--sidebar-width), 85vw);
-      transform: translateX(-100%);
-      transition: transform 0.3s ease;
-      box-shadow: none;
-
-      &--open {
-        transform: translateX(0);
-        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
-      }
-    }
-
-    .docs-layout__main {
-      padding: var(--spacing-md);
-      padding-top: calc(var(--header-height) + var(--spacing-md));
-    }
-
-    .docs-layout__toc {
-      display: none;
-    }
-  }
-}
-
-// ==========================================================================
-// Dark Mode Support
-// ==========================================================================
-:host-context(.dark),
-:host-context([color-scheme='dark']) {
-  .docs-layout {
-    &__backdrop {
-      background: rgba(0, 0, 0, 0.7);
-    }
-
-    &__sidebar,
-    &__toc {
-      border-color: var(--ion-border-color, #3a3a3a);
-    }
-
-    &__mobile-header {
-      border-color: var(--ion-border-color, #3a3a3a);
-    }
-  }
-}

package/src/lib/components/templates/docs-layout/docs-layout.component.ts

@@ -1,161 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  HostListener,
-  signal,
-  computed,
-} from '@angular/core';
-import { IonIcon, IonButton } from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import { menuOutline, closeOutline } from 'ionicons/icons';
-import { DocsLayoutMetadata } from './types';
-
-addIcons({ menuOutline, closeOutline });
-
-/**
- * val-docs-layout
- *
- * A responsive 3-column layout template for documentation sites.
- * Provides slots for sidebar navigation, main content, and table of contents.
- *
- * @example Basic usage
- * ```html
- * <val-docs-layout [props]="{ showToc: true }">
- *   <ng-container sidebar>
- *     <val-docs-sidebar [props]="sidebarConfig"></val-docs-sidebar>
- *   </ng-container>
- *
- *   <ng-container content>
- *     <val-article [props]="articleConfig"></val-article>
- *   </ng-container>
- *
- *   <ng-container toc>
- *     <val-docs-toc [props]="tocConfig"></val-docs-toc>
- *   </ng-container>
- * </val-docs-layout>
- * ```
- */
-@Component({
-  selector: 'val-docs-layout',
-  standalone: true,
-  imports: [CommonModule, IonIcon, IonButton],
-  template: `
-    <div
-      class="docs-layout"
-      [class]="props.cssClass"
-      [class.docs-layout--sidebar-open]="sidebarOpen()"
-      [class.docs-layout--mobile]="isMobile()"
-      [class.docs-layout--tablet]="isTablet()"
-      [style.--sidebar-width]="props.sidebarWidth || '260px'"
-      [style.--toc-width]="props.tocWidth || '220px'"
-      [style.--content-max-width]="props.contentMaxWidth || '900px'"
-    >
-      <!-- Mobile header with menu toggle -->
-      @if (isMobile() || isTablet()) {
-        <header class="docs-layout__mobile-header">
-          <ion-button
-            fill="clear"
-            class="docs-layout__menu-toggle"
-            (click)="toggleSidebar()"
-            [attr.aria-label]="sidebarOpen() ? 'Close menu' : 'Open menu'"
-            [attr.aria-expanded]="sidebarOpen()"
-            aria-controls="docs-sidebar"
-          >
-            <ion-icon
-              slot="icon-only"
-              [name]="sidebarOpen() ? 'close-outline' : 'menu-outline'"
-            ></ion-icon>
-          </ion-button>
-          <ng-content select="[mobile-header]"></ng-content>
-        </header>
-      }
-
-      <!-- Backdrop for mobile sidebar -->
-      @if ((isMobile() || isTablet()) && sidebarOpen()) {
-        <div
-          class="docs-layout__backdrop"
-          role="presentation"
-          aria-hidden="true"
-          (click)="closeSidebar()"
-        ></div>
-      }
-
-      <!-- Sidebar -->
-      @if (props.showSidebar !== false) {
-        <aside
-          id="docs-sidebar"
-          class="docs-layout__sidebar"
-          [class.docs-layout__sidebar--open]="sidebarOpen() || (!isMobile() && !isTablet())"
-        >
-          <div class="docs-layout__sidebar-content">
-            <ng-content select="[sidebar]"></ng-content>
-          </div>
-        </aside>
-      }
-
-      <!-- Main content area -->
-      <main class="docs-layout__main">
-        <div class="docs-layout__content">
-          <ng-content select="[content]"></ng-content>
-        </div>
-      </main>
-
-      <!-- Table of contents -->
-      @if (props.showToc !== false && !isMobile()) {
-        <aside class="docs-layout__toc">
-          <div class="docs-layout__toc-content">
-            <ng-content select="[toc]"></ng-content>
-          </div>
-        </aside>
-      }
-    </div>
-  `,
-  styleUrls: ['./docs-layout.component.scss'],
-})
-export class DocsLayoutComponent {
-  @Input() props: DocsLayoutMetadata = {};
-
-  @Output() sidebarToggle = new EventEmitter<boolean>();
-
-  // Responsive breakpoints
-  private readonly MOBILE_BREAKPOINT = 768;
-  private readonly TABLET_BREAKPOINT = 1024;
-
-  // Signals for reactive state
-  private windowWidth = signal(typeof window !== 'undefined' ? window.innerWidth : 1200);
-  protected sidebarOpen = signal(false);
-
-  protected isMobile = computed(() => this.windowWidth() < this.MOBILE_BREAKPOINT);
-  protected isTablet = computed(
-    () => this.windowWidth() >= this.MOBILE_BREAKPOINT && this.windowWidth() < this.TABLET_BREAKPOINT
-  );
-
-  @HostListener('window:resize')
-  onResize(): void {
-    this.windowWidth.set(window.innerWidth);
-    // Auto-close sidebar when resizing to desktop
-    if (!this.isMobile() && !this.isTablet()) {
-      this.sidebarOpen.set(false);
-    }
-  }
-
-  @HostListener('document:keydown.escape')
-  onEscapeKey(): void {
-    if (this.sidebarOpen()) {
-      this.closeSidebar();
-    }
-  }
-
-  toggleSidebar(): void {
-    this.sidebarOpen.update(open => !open);
-    this.sidebarToggle.emit(this.sidebarOpen());
-  }
-
-  closeSidebar(): void {
-    this.sidebarOpen.set(false);
-    this.sidebarToggle.emit(false);
-  }
-}

package/src/lib/components/templates/docs-layout/types.ts

@@ -1,45 +0,0 @@
-/**
- * Configuration for the docs-layout template component.
- */
-export interface DocsLayoutMetadata {
-  /**
-   * Show the left sidebar navigation.
-   * @default true
-   */
-  showSidebar?: boolean;
-
-  /**
-   * Show the right table of contents.
-   * @default true
-   */
-  showToc?: boolean;
-
-  /**
-   * Width of the sidebar.
-   * @default '260px'
-   */
-  sidebarWidth?: string;
-
-  /**
-   * Width of the table of contents.
-   * @default '220px'
-   */
-  tocWidth?: string;
-
-  /**
-   * Maximum width of the main content area.
-   * @default '900px'
-   */
-  contentMaxWidth?: string;
-
-  /**
-   * Sticky header offset (for scroll calculations).
-   * @default 0
-   */
-  headerOffset?: number;
-
-  /**
-   * Custom CSS class for the layout container.
-   */
-  cssClass?: string;
-}