valtech-components 2.0.687 → 2.0.689

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

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

@@ -0,0 +1,34 @@
+/**
+ * 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

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

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

@@ -0,0 +1,45 @@
+/**
+ * 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;
+}