valtech-components 2.0.687 → 2.0.689

package/src/lib/components/molecules/docs-breadcrumb/docs-breadcrumb.component.ts

@@ -0,0 +1,161 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Router } from '@angular/router';
+import { DocsBreadcrumbMetadata, DocsBreadcrumbItem } from './types';
+
+/**
+ * val-docs-breadcrumb
+ *
+ * A breadcrumb navigation component for documentation.
+ *
+ * @example
+ * ```html
+ * <val-docs-breadcrumb
+ *   [props]="{
+ *     showHome: true,
+ *     items: [
+ *       { label: 'Components', route: ['/docs', 'components'] },
+ *       { label: 'Button' }
+ *     ]
+ *   }"
+ * ></val-docs-breadcrumb>
+ * ```
+ */
+@Component({
+  selector: 'val-docs-breadcrumb',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <nav
+      class="docs-breadcrumb"
+      [class]="props.cssClass"
+      aria-label="Breadcrumb"
+    >
+      <ol class="docs-breadcrumb__list">
+        @if (props.showHome) {
+          <li class="docs-breadcrumb__item">
+            <button
+              type="button"
+              class="docs-breadcrumb__link"
+              (click)="onNavigate(props.homeRoute || ['/'])"
+            >
+              {{ props.homeLabel || 'Home' }}
+            </button>
+            <span class="docs-breadcrumb__separator" aria-hidden="true">
+              {{ props.separator || '>' }}
+            </span>
+          </li>
+        }
+
+        @for (item of props.items; track item.label; let last = $last) {
+          <li class="docs-breadcrumb__item">
+            @if (item.route && !last) {
+              <button
+                type="button"
+                class="docs-breadcrumb__link"
+                (click)="onNavigate(item.route)"
+              >
+                {{ item.label }}
+              </button>
+            } @else {
+              <span
+                class="docs-breadcrumb__current"
+                aria-current="page"
+              >
+                {{ item.label }}
+              </span>
+            }
+
+            @if (!last) {
+              <span class="docs-breadcrumb__separator" aria-hidden="true">
+                {{ props.separator || '>' }}
+              </span>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `,
+  styles: [`
+    :host {
+      display: block;
+      font-family: var(--ion-font-family, system-ui, sans-serif);
+    }
+
+    :host .docs-breadcrumb__list {
+      display: flex !important;
+      flex-direction: row !important;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.5rem;
+      list-style: none !important;
+      list-style-type: none !important;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+
+    :host .docs-breadcrumb__item {
+      display: flex !important;
+      flex-direction: row !important;
+      align-items: center;
+      gap: 0.5rem;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+
+    :host .docs-breadcrumb__link {
+      display: inline;
+      padding: 0;
+      border: none;
+      background: transparent;
+      font-size: 0.875rem;
+      color: var(--ion-color-medium, #666);
+      text-decoration: none;
+      cursor: pointer;
+      transition: color 0.15s ease;
+    }
+
+    :host .docs-breadcrumb__link:hover {
+      color: var(--ion-text-color, #1a1a1a);
+    }
+
+    :host .docs-breadcrumb__link:focus-visible {
+      outline: 2px solid #1a1a1a;
+      outline-offset: 2px;
+    }
+
+    :host .docs-breadcrumb__separator {
+      color: var(--ion-color-medium, #666);
+      font-size: 0.875rem;
+    }
+
+    :host .docs-breadcrumb__current {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--ion-text-color, #1a1a1a);
+    }
+
+    /* Dark mode */
+    :host-context(.dark) .docs-breadcrumb__link:hover,
+    :host-context([color-scheme='dark']) .docs-breadcrumb__link:hover {
+      color: #f4f5f8;
+    }
+
+    :host-context(.dark) .docs-breadcrumb__current,
+    :host-context([color-scheme='dark']) .docs-breadcrumb__current {
+      color: #f4f5f8;
+    }
+  `],
+})
+export class DocsBreadcrumbComponent {
+  @Input() props: DocsBreadcrumbMetadata = { items: [] };
+
+  @Output() navigate = new EventEmitter<string[]>();
+
+  constructor(private router: Router) {}
+
+  onNavigate(route: string[]): void {
+    this.navigate.emit(route);
+    this.router.navigate(route);
+  }
+}

package/src/lib/components/molecules/docs-breadcrumb/types.ts

@@ -0,0 +1,21 @@
+export interface DocsBreadcrumbMetadata {
+  /** Breadcrumb items */
+  items: DocsBreadcrumbItem[];
+  /** Separator character @default '>' */
+  separator?: string;
+  /** Show home link at start */
+  showHome?: boolean;
+  /** Home label text @default 'Home' */
+  homeLabel?: string;
+  /** Home route */
+  homeRoute?: string[];
+  /** Custom CSS class */
+  cssClass?: string;
+}
+
+export interface DocsBreadcrumbItem {
+  /** Display label */
+  label: string;
+  /** Route array for navigation (omit for current page) */
+  route?: string[];
+}

package/src/lib/components/molecules/docs-callout/docs-callout.component.scss

@@ -0,0 +1,136 @@
+.docs-callout {
+  --callout-bg: #fffbeb;
+  --callout-border: #f59e0b;
+  --callout-title: #92400e;
+  --callout-text: #78350f;
+
+  margin: 1.5rem 0;
+  padding: 1rem 1.25rem;
+  border-left: 4px solid var(--callout-border);
+  border-radius: 0 8px 8px 0;
+  background: var(--callout-bg);
+
+  &__title {
+    font-size: 0.9375rem;
+    font-weight: 700;
+    color: var(--callout-title);
+    margin-bottom: 0.5rem;
+  }
+
+  &__content {
+    font-size: 0.9375rem;
+    line-height: 1.7;
+    color: var(--callout-text);
+
+    p {
+      margin: 0;
+    }
+
+    p + p {
+      margin-top: 0.75rem;
+    }
+
+    code {
+      font-family: 'SF Mono', 'Fira Code', Monaco, Consolas, monospace;
+      font-size: 0.875rem;
+      background: rgba(0, 0, 0, 0.06);
+      padding: 0.125rem 0.375rem;
+      border-radius: 4px;
+    }
+
+    a {
+      color: var(--callout-title);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // Note variant (default) - amber/yellow
+  &--note {
+    --callout-bg: #fffbeb;
+    --callout-border: #f59e0b;
+    --callout-title: #92400e;
+    --callout-text: #78350f;
+  }
+
+  // Warning variant - orange
+  &--warning {
+    --callout-bg: #fff7ed;
+    --callout-border: #f97316;
+    --callout-title: #c2410c;
+    --callout-text: #9a3412;
+  }
+
+  // Tip variant - green
+  &--tip {
+    --callout-bg: #ecfdf5;
+    --callout-border: #10b981;
+    --callout-title: #065f46;
+    --callout-text: #047857;
+  }
+
+  // Danger variant - red
+  &--danger {
+    --callout-bg: #fef2f2;
+    --callout-border: #ef4444;
+    --callout-title: #991b1b;
+    --callout-text: #b91c1c;
+  }
+
+  // Info variant - blue
+  &--info {
+    --callout-bg: #eff6ff;
+    --callout-border: #3b82f6;
+    --callout-title: #1e40af;
+    --callout-text: #1d4ed8;
+  }
+}
+
+// Dark mode
+:host-context(.dark),
+:host-context([color-scheme='dark']) {
+  .docs-callout {
+    &--note {
+      --callout-bg: rgba(245, 158, 11, 0.1);
+      --callout-border: #f59e0b;
+      --callout-title: #fbbf24;
+      --callout-text: #fcd34d;
+    }
+
+    &--warning {
+      --callout-bg: rgba(249, 115, 22, 0.1);
+      --callout-border: #f97316;
+      --callout-title: #fb923c;
+      --callout-text: #fdba74;
+    }
+
+    &--tip {
+      --callout-bg: rgba(16, 185, 129, 0.1);
+      --callout-border: #10b981;
+      --callout-title: #34d399;
+      --callout-text: #6ee7b7;
+    }
+
+    &--danger {
+      --callout-bg: rgba(239, 68, 68, 0.1);
+      --callout-border: #ef4444;
+      --callout-title: #f87171;
+      --callout-text: #fca5a5;
+    }
+
+    &--info {
+      --callout-bg: rgba(59, 130, 246, 0.1);
+      --callout-border: #3b82f6;
+      --callout-title: #60a5fa;
+      --callout-text: #93c5fd;
+    }
+
+    &__content code {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+}

package/src/lib/components/molecules/docs-callout/docs-callout.component.ts

@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+
+export type DocsCalloutVariant = 'note' | 'warning' | 'tip' | 'danger' | 'info';
+
+export interface DocsCalloutMetadata {
+  /** Variant determines the color scheme */
+  variant?: DocsCalloutVariant;
+  /** Optional title (defaults to variant name if not provided) */
+  title?: string;
+  /** Hide the title completely */
+  hideTitle?: boolean;
+}
+
+@Component({
+  selector: 'val-docs-callout',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div
+      class="docs-callout"
+      [class.docs-callout--note]="variant() === 'note'"
+      [class.docs-callout--warning]="variant() === 'warning'"
+      [class.docs-callout--tip]="variant() === 'tip'"
+      [class.docs-callout--danger]="variant() === 'danger'"
+      [class.docs-callout--info]="variant() === 'info'"
+    >
+      @if (!props().hideTitle) {
+        <div class="docs-callout__title">{{ displayTitle() }}</div>
+      }
+      <div class="docs-callout__content">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./docs-callout.component.scss'],
+})
+export class DocsCalloutComponent {
+  props = input<DocsCalloutMetadata>({});
+
+  variant = () => this.props().variant || 'note';
+
+  displayTitle = () => {
+    if (this.props().title) return this.props().title;
+
+    const titles: Record<DocsCalloutVariant, string> = {
+      note: 'Note',
+      warning: 'Warning',
+      tip: 'Tip',
+      danger: 'Danger',
+      info: 'Info',
+    };
+    return titles[this.variant()];
+  };
+}