valtech-components 2.0.795 → 2.0.796

package/src/lib/components/molecules/docs-code-example/docs-code-example.component.ts

@@ -1,540 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, signal, TemplateRef, ContentChild, ViewEncapsulation } from '@angular/core';
-import { IonIcon, IonButton } from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import { copyOutline, checkmarkOutline, openOutline } from 'ionicons/icons';
-import { DocsCodeExampleMetadata, DocsCodeTab } from './types';
-
-// Prism.js imports (same pattern as code-display and plain-code-box)
-import * as Prism from 'prismjs';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-scss';
-import 'prismjs/components/prism-bash';
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-markup';
-
-addIcons({ copyOutline, checkmarkOutline, openOutline });
-
-/**
- * val-docs-code-example
- *
- * A code example component with tabs, preview, and copy functionality.
- *
- * @example Basic usage
- * ```html
- * <val-docs-code-example
- *   [props]="{
- *     title: 'Basic Button',
- *     tabs: [
- *       { label: 'HTML', language: 'html', code: '<val-button>Click me</val-button>' },
- *       { label: 'TypeScript', language: 'typescript', code: 'import { ButtonComponent } from ...' }
- *     ]
- *   }"
- * >
- *   <ng-template #preview>
- *     <val-button [props]="{ label: 'Click me' }"></val-button>
- *   </ng-template>
- * </val-docs-code-example>
- * ```
- */
-@Component({
-  selector: 'val-docs-code-example',
-  standalone: true,
-  imports: [CommonModule, IonIcon, IonButton],
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <div class="docs-code-example" [class]="props.cssClass">
-      <!-- Header -->
-      @if (props.title || props.description || props.externalLink) {
-        <div class="docs-code-example__header">
-          @if (props.title) {
-            <h4 class="docs-code-example__title">{{ props.title }}</h4>
-          }
-          @if (props.description) {
-            <p class="docs-code-example__description">{{ props.description }}</p>
-          }
-          @if (props.externalLink) {
-            <a
-              class="docs-code-example__external-link"
-              [href]="props.externalLink.url"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {{ props.externalLink.label || 'Open in StackBlitz' }}
-              <ion-icon name="open-outline"></ion-icon>
-            </a>
-          }
-        </div>
-      }
-
-      <!-- Preview -->
-      @if (previewTpl) {
-        <div class="docs-code-example__preview">
-          <ng-container *ngTemplateOutlet="previewTpl"></ng-container>
-        </div>
-      }
-
-      <!-- Tabs -->
-      @if (props.tabs?.length) {
-        <div class="docs-code-example__tabs">
-          <div class="docs-code-example__tab-list" role="tablist">
-            @for (tab of props.tabs; track tab.label; let i = $index) {
-              <button
-                class="docs-code-example__tab"
-                [class.docs-code-example__tab--active]="activeTab() === i"
-                (click)="activeTab.set(i)"
-                role="tab"
-                [attr.aria-selected]="activeTab() === i"
-              >
-                {{ tab.label }}
-              </button>
-            }
-          </div>
-
-          <!-- Code Panel -->
-          <div class="docs-code-example__code-panel">
-            <div class="docs-code-example__code-header">
-              @if (props.showCopyButton !== false) {
-                <ion-button
-                  fill="clear"
-                  size="small"
-                  class="docs-code-example__copy-btn"
-                  [attr.aria-label]="copied() ? 'Code copied' : 'Copy code'"
-                  (click)="copyCode()"
-                >
-                  <ion-icon slot="icon-only" [name]="copied() ? 'checkmark-outline' : 'copy-outline'"></ion-icon>
-                </ion-button>
-              }
-            </div>
-            <pre
-              class="docs-code-example__pre"
-              [class.docs-code-example__pre--line-numbers]="props.showLineNumbers"
-            ><code
-              class="docs-code-example__code"
-              [class]="'language-' + currentTab().language"
-              [innerHTML]="highlightedCode()"
-            ></code></pre>
-          </div>
-        </div>
-      }
-    </div>
-  `,
-  styles: [
-    `
-      .docs-code-example {
-        margin: 1.5rem 0;
-        border: 1px solid #f2f6f7;
-        border-radius: 12px;
-        overflow: hidden;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-        background: #ffffff;
-      }
-
-      .docs-code-example__header {
-        padding: 1rem 1.25rem;
-        border-bottom: 1px solid #f2f6f7;
-        background: #ffffff;
-      }
-
-      .docs-code-example__title {
-        font-size: 1rem;
-        font-weight: 600;
-        margin: 0 0 0.25rem 0;
-        color: var(--ion-text-color, #1a1a1a);
-      }
-
-      .docs-code-example__description {
-        font-size: 0.875rem;
-        color: var(--ion-color-medium, #666);
-        margin: 0;
-      }
-
-      .docs-code-example__external-link {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.25rem;
-        margin-top: 0.5rem;
-        font-size: 0.8125rem;
-        color: #555;
-        text-decoration: none;
-      }
-
-      .docs-code-example__external-link:hover {
-        color: #1a1a1a;
-        text-decoration: underline;
-      }
-
-      .docs-code-example__external-link ion-icon {
-        font-size: 0.875rem;
-      }
-
-      .docs-code-example__preview {
-        padding: 1.5rem;
-        background: #ffffff;
-        border-bottom: 1px solid #f2f6f7;
-      }
-
-      .docs-code-example__tabs {
-        background: #f6f9fa;
-      }
-
-      .docs-code-example__tab-list {
-        display: flex;
-        gap: 2px;
-        border-bottom: 1px solid #f2f6f7;
-        overflow-x: auto;
-        scrollbar-width: thin;
-        font-size: 12px;
-      }
-
-      .docs-code-example__tab {
-        padding: 10px 18px 8px 18px;
-        font-family: 'Roboto Mono', 'SF Mono', Monaco, monospace;
-        font-size: 0.95em;
-        font-weight: 500;
-        color: #899396;
-        background: transparent;
-        border: 1px solid transparent;
-        border-bottom: none;
-        border-radius: 8px 8px 0 0;
-        cursor: pointer;
-        transition:
-          background 0.2s,
-          color 0.2s;
-        margin-bottom: -1px;
-        white-space: nowrap;
-      }
-
-      .docs-code-example__tab:hover {
-        background: #e8eef2;
-      }
-
-      .docs-code-example__tab--active {
-        background: #ffffff;
-        color: #19422d;
-        border: 1px solid #f2f6f7;
-        border-bottom: 1px solid #ffffff;
-        font-weight: 600;
-        z-index: 2;
-      }
-
-      .docs-code-example__code-panel {
-        position: relative;
-        background: #ffffff;
-      }
-
-      .docs-code-example__code-header {
-        position: sticky;
-        top: 10px;
-        float: right;
-        z-index: 10;
-        height: 0;
-        margin-right: 15px;
-      }
-
-      .docs-code-example__copy-btn {
-        --padding-start: 2px;
-        --padding-end: 2px;
-        min-width: 28px;
-        min-height: 28px;
-        height: 28px;
-        width: 28px;
-        --color: var(--ion-color-primary);
-        --background: rgba(255, 255, 255, 0.7);
-        border-radius: 6px;
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
-        opacity: 0;
-        transition: opacity 0.2s ease;
-      }
-
-      .docs-code-example__code-panel:hover .docs-code-example__copy-btn {
-        opacity: 1;
-      }
-
-      .docs-code-example__copy-btn:hover {
-        --background: rgba(255, 255, 255, 0.9);
-      }
-
-      .docs-code-example__pre {
-        margin: 0;
-        padding: 0;
-        overflow-x: auto;
-        overflow-y: auto;
-        max-height: 30rem;
-        min-height: 3rem;
-        background: #ffffff;
-        white-space: pre;
-        word-break: normal;
-      }
-
-      .docs-code-example__pre--line-numbers {
-        padding-left: 3rem;
-        counter-reset: line;
-      }
-
-      .docs-code-example__code {
-        display: block;
-        font-family: 'Roboto Mono', 'SF Mono', Monaco, 'Courier New', monospace;
-        font-size: 0.75em;
-        line-height: 1.5;
-        color: #24292f;
-        white-space: inherit;
-        word-break: normal;
-        tab-size: 2;
-      }
-
-      /* Prism.js syntax highlighting - Light theme (GitHub style) */
-      .docs-code-example__code .token {
-        text-decoration: none !important;
-      }
-
-      .docs-code-example__code .token.comment,
-      .docs-code-example__code .token.prolog,
-      .docs-code-example__code .token.doctype,
-      .docs-code-example__code .token.cdata {
-        color: #6a737d;
-      }
-
-      .docs-code-example__code .token.punctuation {
-        color: #24292f;
-      }
-
-      .docs-code-example__code .token.property,
-      .docs-code-example__code .token.tag,
-      .docs-code-example__code .token.boolean,
-      .docs-code-example__code .token.number,
-      .docs-code-example__code .token.constant,
-      .docs-code-example__code .token.symbol,
-      .docs-code-example__code .token.deleted {
-        color: #005cc5;
-      }
-
-      .docs-code-example__code .token.selector,
-      .docs-code-example__code .token.attr-name,
-      .docs-code-example__code .token.string,
-      .docs-code-example__code .token.char,
-      .docs-code-example__code .token.builtin,
-      .docs-code-example__code .token.inserted {
-        color: #22863a;
-      }
-
-      .docs-code-example__code .token.operator,
-      .docs-code-example__code .token.entity,
-      .docs-code-example__code .token.url {
-        color: #24292f;
-      }
-
-      .docs-code-example__code .token.atrule,
-      .docs-code-example__code .token.attr-value,
-      .docs-code-example__code .token.keyword {
-        color: #d73a49;
-      }
-
-      .docs-code-example__code .token.function,
-      .docs-code-example__code .token.class-name {
-        color: #6f42c1;
-      }
-
-      .docs-code-example__code .token.regex,
-      .docs-code-example__code .token.important,
-      .docs-code-example__code .token.variable {
-        color: #e36209;
-      }
-
-      /* Responsive */
-      @media (max-width: 600px) {
-        .docs-code-example {
-          border-radius: 8px;
-        }
-        .docs-code-example__tab-list {
-          font-size: 11px;
-        }
-        .docs-code-example__pre {
-          max-height: 20rem;
-        }
-        .docs-code-example__code {
-          font-size: 0.7em;
-        }
-      }
-
-      /* Dark mode — class-based ONLY (Ionic body.dark / html.ion-palette-dark) */
-      :host-context(.dark),
-      :host-context(.ion-palette-dark),
-      :host-context(html.ion-palette-dark),
-      :host-context(body.dark),
-      :host-context([data-theme='dark']) {
-        .docs-code-example {
-          background: #21252b;
-          border-color: #3b4048;
-          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
-        }
-
-        .docs-code-example__header {
-          background: #21252b;
-          border-color: #3b4048;
-        }
-
-        .docs-code-example__title {
-          color: #c9d1d9;
-        }
-
-        .docs-code-example__preview {
-          background: #161b22;
-          border-color: #3b4048;
-        }
-
-        .docs-code-example__tabs {
-          background: #1a1a1a;
-        }
-
-        .docs-code-example__tab-list {
-          border-color: #3b4048;
-        }
-
-        .docs-code-example__tab {
-          color: #8b949e;
-        }
-
-        .docs-code-example__tab:hover {
-          background: #21252b;
-        }
-
-        .docs-code-example__tab--active {
-          background: #282c34;
-          color: #c9d1d9;
-          border-color: #3b4048;
-          border-bottom-color: #282c34;
-        }
-
-        .docs-code-example__code-panel {
-          background: #161b22;
-        }
-
-        .docs-code-example__pre {
-          background: #161b22;
-        }
-
-        .docs-code-example__code {
-          color: #c9d1d9;
-        }
-
-        .docs-code-example__copy-btn {
-          --background: rgba(0, 0, 0, 0.4);
-        }
-
-        .docs-code-example__copy-btn:hover {
-          --background: rgba(0, 0, 0, 0.6);
-        }
-
-        /* Dark mode syntax highlighting */
-        .docs-code-example__code .token.comment,
-        .docs-code-example__code .token.prolog,
-        .docs-code-example__code .token.doctype,
-        .docs-code-example__code .token.cdata {
-          color: #8b949e;
-        }
-
-        .docs-code-example__code .token.punctuation {
-          color: #c9d1d9;
-        }
-
-        .docs-code-example__code .token.property,
-        .docs-code-example__code .token.tag,
-        .docs-code-example__code .token.boolean,
-        .docs-code-example__code .token.number,
-        .docs-code-example__code .token.constant,
-        .docs-code-example__code .token.symbol,
-        .docs-code-example__code .token.deleted {
-          color: #79c0ff;
-        }
-
-        .docs-code-example__code .token.selector,
-        .docs-code-example__code .token.attr-name,
-        .docs-code-example__code .token.string,
-        .docs-code-example__code .token.char,
-        .docs-code-example__code .token.builtin,
-        .docs-code-example__code .token.inserted {
-          color: #7ee787;
-        }
-
-        .docs-code-example__code .token.operator,
-        .docs-code-example__code .token.entity,
-        .docs-code-example__code .token.url {
-          color: #c9d1d9;
-        }
-
-        .docs-code-example__code .token.atrule,
-        .docs-code-example__code .token.attr-value,
-        .docs-code-example__code .token.keyword {
-          color: #ff7b72;
-        }
-
-        .docs-code-example__code .token.function,
-        .docs-code-example__code .token.class-name {
-          color: #d2a8ff;
-        }
-
-        .docs-code-example__code .token.regex,
-        .docs-code-example__code .token.important,
-        .docs-code-example__code .token.variable {
-          color: #ffa657;
-        }
-      }
-    `,
-  ],
-})
-export class DocsCodeExampleComponent {
-  @Input() props: DocsCodeExampleMetadata = { tabs: [] };
-
-  @ContentChild('preview') previewTpl?: TemplateRef<any>;
-
-  protected activeTab = signal(0);
-  protected copied = signal(false);
-
-  protected currentTab(): DocsCodeTab {
-    return this.props.tabs[this.activeTab()] || { label: '', code: '', language: 'text' };
-  }
-
-  protected highlightedCode(): string {
-    const tab = this.currentTab();
-    const lang = this.normalizeLanguage(tab.language);
-    const grammar = Prism.languages[lang];
-
-    if (!grammar) {
-      return this.escapeHtml(tab.code);
-    }
-
-    return Prism.highlight(tab.code, grammar, lang);
-  }
-
-  async copyCode(): Promise<void> {
-    const code = this.currentTab().code;
-    try {
-      await navigator.clipboard.writeText(code);
-      this.copied.set(true);
-      setTimeout(() => this.copied.set(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy code:', err);
-    }
-  }
-
-  private normalizeLanguage(language: string): string {
-    const aliases: Record<string, string> = {
-      ts: 'typescript',
-      js: 'javascript',
-      html: 'markup',
-      xml: 'markup',
-      sh: 'bash',
-      shell: 'bash',
-    };
-    return aliases[language.toLowerCase()] || language.toLowerCase();
-  }
-
-  private escapeHtml(text: string): string {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-}

package/src/lib/components/molecules/docs-code-example/types.ts

@@ -1,75 +0,0 @@
-import { TemplateRef } from '@angular/core';
-
-/**
- * Configuration for the docs-code-example component.
- */
-export interface DocsCodeExampleMetadata {
-  /**
-   * Example title.
-   */
-  title?: string;
-
-  /**
-   * Example description.
-   */
-  description?: string;
-
-  /**
-   * Code tabs to display.
-   */
-  tabs: DocsCodeTab[];
-
-  /**
-   * Template for live preview.
-   * Use ng-template with #preview reference.
-   */
-  previewTemplate?: TemplateRef<any>;
-
-  /**
-   * External link (e.g., StackBlitz, CodeSandbox).
-   */
-  externalLink?: {
-    url: string;
-    label?: string;
-  };
-
-  /**
-   * Show copy button on code blocks.
-   * @default true
-   */
-  showCopyButton?: boolean;
-
-  /**
-   * Show line numbers in code.
-   * @default false
-   */
-  showLineNumbers?: boolean;
-
-  /**
-   * Custom CSS class.
-   */
-  cssClass?: string;
-
-  /**
-   * Default active tab index.
-   * @default 0
-   */
-  defaultTab?: number;
-}
-
-export interface DocsCodeTab {
-  /**
-   * Tab label (e.g., "HTML", "TypeScript", "SCSS").
-   */
-  label: string;
-
-  /**
-   * Code content.
-   */
-  code: string;
-
-  /**
-   * Language for syntax highlighting.
-   */
-  language: 'html' | 'typescript' | 'scss' | 'css' | 'json' | 'bash' | 'text' | 'go';
-}