valtech-components 2.0.691 → 2.0.693

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

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

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

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

@@ -1,55 +0,0 @@
-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()];
-  };
-}