wally-ui 1.2.1 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "About Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.",
   "bin": {
     "wally": "dist/cli.js"

package/playground/showcase/package-lock.json

@@ -19,6 +19,7 @@
         "@tailwindcss/postcss": "^4.1.13",
         "express": "^5.1.0",
         "postcss": "^8.5.6",
+        "prismjs": "^1.30.0",
         "rxjs": "~7.8.0",
         "tailwindcss": "^4.1.13",
         "tslib": "^2.3.0",
@@ -31,6 +32,7 @@
         "@types/express": "^5.0.1",
         "@types/jasmine": "~5.1.0",
         "@types/node": "^20.17.19",
+        "@types/prismjs": "^1.26.5",
         "jasmine-core": "~5.7.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
@@ -4252,6 +4254,13 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/qs": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
@@ -8815,6 +8824,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/proc-log": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz",

package/playground/showcase/package.json

@@ -32,6 +32,7 @@
     "@tailwindcss/postcss": "^4.1.13",
     "express": "^5.1.0",
     "postcss": "^8.5.6",
+    "prismjs": "^1.30.0",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.1.13",
     "tslib": "^2.3.0",
@@ -44,6 +45,7 @@
     "@types/express": "^5.0.1",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^20.17.19",
+    "@types/prismjs": "^1.26.5",
     "jasmine-core": "~5.7.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

package/playground/showcase/public/_headers

@@ -0,0 +1,7 @@
+/*
+  X-Robots-Tag: index, follow
+  X-Frame-Options: DENY
+  X-Content-Type-Options: nosniff
+
+/robots.txt
+  Cache-Control: public, max-age=3600

package/playground/showcase/public/robots.txt

@@ -0,0 +1,14 @@
+User-agent: *
+Allow: /
+
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: claudebot
+Allow: /
+
+User-agent: ChatGPT-User
+Allow: /

package/playground/showcase/src/app/app.routes.server.ts

@@ -6,11 +6,23 @@ export const serverRoutes: ServerRoute[] = [
     renderMode: RenderMode.Prerender
   },
   {
-    path: 'components',
+    path: 'documentation',
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: 'documentation/components',
     renderMode: RenderMode.Prerender,
   },
   {
-    path: 'components/button',
+    path: 'documentation/components/button',
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: 'documentation/components/breadcrumb',
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: 'components',
     renderMode: RenderMode.Prerender,
   },
   {

package/playground/showcase/src/app/app.routes.ts

@@ -5,9 +5,13 @@ export const routes: Routes = [
         path: '',
         loadComponent: () => import('./pages/home/home').then(m => m.Home)
     },
+    {
+        path: 'documentation',
+        loadChildren: () => import('./pages/documentation/documentation.routes').then(m => m.documentationRoutes)
+    },
     {
         path: 'components',
-        loadChildren: () => import('./pages/components/components.routes').then(m => m.componentsRoutes)
+        redirectTo: '/documentation/components'
     },
     {
         path: 'mcp',

package/playground/showcase/src/app/components/breadcrumb/breadcrumb.ts

@@ -13,6 +13,7 @@ export interface BreadcrumbItem {
     CommonModule,
     RouterModule
   ],
+  // standalone: true, (If your application is lower than Angular 19, uncomment this line)
   templateUrl: './breadcrumb.html',
 })
 export class Breadcrumb {

package/playground/showcase/src/app/components/input/input.html

@@ -0,0 +1,70 @@
+@if (label()) {
+<div class="py-1">
+    <label [for]="inputId" class="block text-sm font-medium text-[#0a0a0a] dark:text-white">
+        {{ label() }}
+    </label>
+</div>
+}
+
+<div class="relative">
+    <input [id]="inputId" [type]="currentInputType()" [value]="value()" [disabled]="disabled || loading()"
+        [placeholder]="placeholder()" [autocomplete]="autocomplete() || (type() === 'password' ? 'new-password' : '')" class="
+        font-semibold
+        block
+        w-full
+        rounded-lg
+        border-2 border-transparent
+        text-[#0a0a0a] text-base md:text-sm placeholder:text-neutral-400
+        focus:outline-none focus:ring-2 focus:ring-neutral-300
+        bg-gray-100
+        dark:bg-[#1b1b1b] dark:text-white dark:placeholder:text-neutral-500 dark:focus:ring-neutral-700
+        disabled:opacity-80 disabled:pointer-events-none
+        transition duration-200 ease-in-out
+        py-4 px-4" [ngClass]="{
+            'pe-12': type() === 'password',
+            'ps-12': loading(),
+            '!bg-green-100 focus:!ring-green-500/50 placeholder:!text-green-600/70 !text-green-600 focus:!border-green-500 dark:!bg-[#1b1b1b] dark:!border-green-600  dark:!text-green-500 dark:placeholder:!text-green-400/40 dark:focus:!ring-green-500/50': valid() && !errorMessage(),
+            '!border-red-300 bg-red-100 !text-red-500 placeholder:text-red-300 focus:ring-red-300 dark:!text-red-500 dark:placeholder:!text-red-500 dark:!border-red-500 dark:focus:!ring-red-500': errorMessage() && !valid()
+        }">
+
+    <!-- Loading spinner -->
+    @if (loading()) {
+    <div class="absolute inset-y-0 start-0 flex items-center ps-4">
+        <svg class="size-4 animate-spin text-neutral-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg"
+            fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+            </path>
+        </svg>
+    </div>
+    }
+
+    @if (type() === 'password' && !loading()) {
+    <button type="button" (click)="togglePasswordVisibility()"
+        class="absolute inset-y-0 end-0 flex items-center pe-4 cursor-pointer focus:outline-none transition duration-200 ease-in-out">
+        @if (showPassword()) {
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+            class="size-5 text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-200">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+        </svg>
+        } @else {
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+            class="size-5 text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-200">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
+        </svg>
+        }
+    </button>
+    }
+</div>
+
+@if (errorMessage()) {
+<div class="py-1">
+    <span class="text-sm text-red-500 font-medium">
+        {{ errorMessage() }}
+    </span>
+</div>
+}

package/playground/showcase/src/app/{pages/components/button-docs/button-docs.spec.ts → components/input/input.spec.ts}

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ButtonDocs } from './button-docs';
+import { Input } from './input';
 
-describe('Button', () => {
-  let component: ButtonDocs;
-  let fixture: ComponentFixture<ButtonDocs>;
+describe('Input', () => {
+  let component: Input;
+  let fixture: ComponentFixture<Input>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ButtonDocs]
+      imports: [Input]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ButtonDocs);
+    fixture = TestBed.createComponent(Input);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/playground/showcase/src/app/components/input/input.ts

@@ -0,0 +1,98 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component, computed, HostListener, input, InputSignal, signal, untracked, WritableSignal
+} from '@angular/core';
+
+import {
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR
+} from '@angular/forms';
+
+@Component({
+  selector: 'wally-input',
+  imports: [
+    CommonModule
+  ],
+  // standalone: true, (If your application is lower than Angular 19, uncomment this line)
+  templateUrl: './input.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: Input,
+      multi: true
+    }
+  ]
+})
+export class Input implements ControlValueAccessor {
+  placeholder: InputSignal<string> = input<string>('');
+  type: InputSignal<string> = input<string>('text');
+  label: InputSignal<string> = input<string>('');
+  autocomplete: InputSignal<string> = input<string>('');
+
+  valid: InputSignal<boolean> = input<boolean>(false);
+  errorMessage: InputSignal<string> = input<string>('');
+  loading: InputSignal<boolean> = input<boolean>(false);
+
+  protected readonly showPassword = signal<boolean>(false);
+  protected readonly inputId = `wally-input-${Math.random().toString(36).substring(2, 11)}`;
+
+  private touched: WritableSignal<boolean> = signal<boolean>(false);
+  value: WritableSignal<string> = signal<string>('');
+
+  protected readonly currentInputType = computed(() => {
+    const currentType = this.type();
+
+    if (currentType !== 'password') {
+      return currentType;
+    }
+
+    if (this.showPassword()) {
+      return 'text';
+    }
+
+    return 'password';
+  });
+
+  disabled: boolean = false;
+
+  private onChange = (value: any) => { };
+  private onTouched = () => { };
+
+  writeValue(obj: any): void {
+    untracked(() => {
+      this.value.set(obj || '');
+    });
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  togglePasswordVisibility(): void {
+    this.showPassword.set(!this.showPassword());
+  }
+
+  @HostListener('input', ['$event'])
+  onInputChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const newValue = target.value;
+    this.value.set(newValue);
+    this.onChange(newValue);
+  }
+
+  @HostListener('blur')
+  onInputBlur(): void {
+    if (!this.touched()) {
+      this.touched.set(true);
+      this.onTouched();
+    }
+  }
+}

package/playground/showcase/src/app/core/services/ai-prompt.service.ts

@@ -26,8 +26,8 @@ export class AiPromptService {
     if (isPlatformBrowser(this.platformId)) {
       return window.location.href;
     }
-    // Fallback for SSR - you can customize this
-    return 'https://wally-ui.com/components/button';
+    
+    return 'https://wally-ui.com/documentation/components/button';
   }
 
   generateCustomPromptUrl(aiService: 'claude' | 'chatgpt', customPrompt: string, pageUrl?: string): string {

package/playground/showcase/src/app/core/utils/prism.ts

@@ -0,0 +1,14 @@
+import * as Prism from 'prismjs';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-markup';
+
+export function highlightCode(code: string, language: string = 'typescript'): string {
+  return Prism.highlight(code, Prism.languages[language], language);
+}
+
+export function getFormattedCode(code: string, language: string = 'html'): string {
+  const cleanCode = code.trim();
+  return highlightCode(cleanCode, language);
+}

package/playground/showcase/src/app/pages/documentation/components/breadcrumb-docs/breadcrumb-docs.examples.ts

@@ -0,0 +1,71 @@
+// Breadcrumb documentation code examples
+export const BreadcrumbCodeExamples = {
+  // Installation
+  installation: `npx wally-ui add breadcrumb`,
+
+  // Import examples
+  import: `import { Breadcrumb, BreadcrumbItem } from './components/wally-ui/breadcrumb/breadcrumb';`,
+  componentImport: `@Component({
+  selector: 'app-example',
+  imports: [Breadcrumb],
+  templateUrl: './example.html',
+  styleUrl: './example.css'
+})`,
+
+  // Basic usage
+  basicUsage: `<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>`,
+
+  // Component setup
+  componentSetup: `export class ExampleComponent {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Products', url: '/products' },
+    { label: 'Category' }
+  ];
+}`,
+
+  // Basic setup for simple example
+  basicSetup: `breadcrumbItems: BreadcrumbItem[] = [
+  { label: 'Components' }
+];`,
+
+  // Specific examples
+  multiLevelSetup: `breadcrumbItems: BreadcrumbItem[] = [
+  { label: 'Home', url: '/' },
+  { label: 'Documentation', url: '/documentation' },
+  { label: 'Components', url: '/documentation/components' },
+  { label: 'Breadcrumb' }
+];`,
+
+  singleItemSetup: `breadcrumbItems: BreadcrumbItem[] = [
+  { label: 'Components' }
+];`,
+
+  // Interface
+  interface: `interface BreadcrumbItem {
+  label: string;
+  url?: string;
+}`,
+
+  // Advanced examples
+  withIcons: `<wally-breadcrumb [items]="breadcrumbItemsWithIcons"></wally-breadcrumb>`,
+
+  withIconsSetup: `breadcrumbItemsWithIcons: BreadcrumbItem[] = [
+  {
+    label: 'Home',
+    url: '/',
+    icon: '<svg>...</svg>'
+  },
+  {
+    label: 'Settings',
+    url: '/settings',
+    icon: '<svg>...</svg>'
+  },
+  { label: 'Profile' }
+];`,
+
+  // Properties
+  propertyItems: `items: BreadcrumbItem[] = [];`,
+  propertySeparator: `separator?: string = '/';`,
+  propertyMaxItems: `maxItems?: number;`
+};

package/playground/showcase/src/app/pages/{components → documentation/components}/breadcrumb-docs/breadcrumb-docs.html

@@ -47,9 +47,7 @@
     <section class="mb-8">
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Installation</h2>
       <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-        <code class="text-sm text-[#0a0a0a] dark:text-white">
-          npx wally-ui add breadcrumb
-        </code>
+        <pre><code [innerHTML]="installationCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
       </div>
     </section>
 
@@ -70,20 +68,11 @@
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Import</h2>
       <div class="space-y-4">
         <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <code class="text-sm text-[#0a0a0a] dark:text-white">
-            import {{ '{' }} Breadcrumb, BreadcrumbItem {{ '}' }} from './components/wally-ui/breadcrumb/breadcrumb';
-          </code>
+          <pre><code [innerHTML]="importCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
         </div>
 
         <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <code class="text-sm text-[#0a0a0a] dark:text-white">
-            &#64;Component({{ '{' }}<br>
-            &nbsp;&nbsp;selector: 'app-example',<br>
-            &nbsp;&nbsp;imports: [Breadcrumb],<br>
-            &nbsp;&nbsp;templateUrl: './example.html',<br>
-            &nbsp;&nbsp;styleUrl: './example.css'<br>
-            {{ '}' }})
-          </code>
+          <pre><code [innerHTML]="componentImportCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
         </div>
       </div>
     </section>
@@ -95,9 +84,10 @@
       <div class="space-y-8">
         <div>
           <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
-            <code class="text-sm text-[#0a0a0a] dark:text-white">
-              {{ '<' }}wally-breadcrumb [items]="breadcrumbItems"{{ '>' }}{{ '<' }}/wally-breadcrumb{{ '>' }}
-            </code>
+            <pre><code [innerHTML]="basicSetupCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="basicUsageCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-breadcrumb [items]="simpleBreadcrumbs"></wally-breadcrumb>
@@ -115,13 +105,7 @@
         <div>
           <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Multi-level Navigation</h3>
           <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
-            <code class="text-sm text-[#0a0a0a] dark:text-white">
-              breadcrumbItems: BreadcrumbItem[] = [<br>
-              &nbsp;&nbsp;{{ '{' }} label: 'Home', url: '/' {{ '}' }},<br>
-              &nbsp;&nbsp;{{ '{' }} label: 'Components', url: '/components' {{ '}' }},<br>
-              &nbsp;&nbsp;{{ '{' }} label: 'Button' {{ '}' }}<br>
-              ];
-            </code>
+            <pre><code [innerHTML]="multiLevelSetupCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-breadcrumb [items]="exampleBreadcrumbs"></wally-breadcrumb>
@@ -132,11 +116,7 @@
         <div>
           <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Single Item</h3>
           <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
-            <code class="text-sm text-[#0a0a0a] dark:text-white">
-              breadcrumbItems: BreadcrumbItem[] = [<br>
-              &nbsp;&nbsp;{{ '{' }} label: 'Components' {{ '}' }}<br>
-              ];
-            </code>
+            <pre><code [innerHTML]="singleItemSetupCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-breadcrumb [items]="simpleBreadcrumbs"></wally-breadcrumb>
@@ -150,14 +130,9 @@
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
 
       <div class="space-y-4">
-        <div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
-          <div class="font-mono text-sm mb-2">
-            <span class="text-blue-600 dark:text-blue-400">items</span><span class="text-[#0a0a0a] dark:text-white">:
-            </span>
-            <span class="text-purple-600 dark:text-purple-400">BreadcrumbItem[]</span> <span
-              class="text-[#0a0a0a] dark:text-white"> = </span>
-            <span class="text-green-600 dark:text-green-400">[]</span>
-            <span class="text-[#0a0a0a] dark:text-white">;</span>
+        <div class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyItemsCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <p class="text-sm text-gray-700 dark:text-gray-400">Array of breadcrumb items to display</p>
         </div>
@@ -169,12 +144,7 @@
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Interface</h2>
 
       <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-        <code class="text-sm text-[#0a0a0a] dark:text-white">
-          interface BreadcrumbItem {{ '{' }}<br>
-          &nbsp;&nbsp;label: string;<br>
-          &nbsp;&nbsp;url?: string;<br>
-          {{ '}' }}
-        </code>
+        <pre><code [innerHTML]="interfaceCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
       </div>
     </section>
 

package/playground/showcase/src/app/pages/documentation/components/breadcrumb-docs/breadcrumb-docs.ts

@@ -0,0 +1,63 @@
+import { Component } from '@angular/core';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../../components/breadcrumb/breadcrumb';
+
+import { AiPromptService } from '../../../../core/services/ai-prompt.service';
+import { getFormattedCode } from '../../../../core/utils/prism';
+
+import { BreadcrumbCodeExamples } from './breadcrumb-docs.examples';
+
+@Component({
+  selector: 'app-breadcrumb-docs',
+  imports: [
+    Breadcrumb
+  ],
+  templateUrl: './breadcrumb-docs.html',
+  styleUrl: './breadcrumb-docs.css'
+})
+export class BreadcrumbDocs {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Components', url: '/documentation/components' },
+    { label: 'Breadcrumb' }
+  ];
+
+  exampleBreadcrumbs: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Components', url: '/documentation/components' },
+    { label: 'Breadcrumb' }
+  ];
+
+  simpleBreadcrumbs: BreadcrumbItem[] = [
+    { label: 'Components' }
+  ];
+
+  installationCode = getFormattedCode(BreadcrumbCodeExamples.installation, 'bash');
+  importCode = getFormattedCode(BreadcrumbCodeExamples.import, 'typescript');
+  componentImportCode = getFormattedCode(BreadcrumbCodeExamples.componentImport, 'typescript');
+  basicUsageCode = getFormattedCode(BreadcrumbCodeExamples.basicUsage, 'html');
+  componentSetupCode = getFormattedCode(BreadcrumbCodeExamples.componentSetup, 'typescript');
+  basicSetupCode = getFormattedCode(BreadcrumbCodeExamples.basicSetup, 'typescript');
+  multiLevelSetupCode = getFormattedCode(BreadcrumbCodeExamples.multiLevelSetup, 'typescript');
+  singleItemSetupCode = getFormattedCode(BreadcrumbCodeExamples.singleItemSetup, 'typescript');
+  interfaceCode = getFormattedCode(BreadcrumbCodeExamples.interface, 'typescript');
+  withIconsCode = getFormattedCode(BreadcrumbCodeExamples.withIcons, 'html');
+  withIconsSetupCode = getFormattedCode(BreadcrumbCodeExamples.withIconsSetup, 'typescript');
+  propertyItemsCode = getFormattedCode(BreadcrumbCodeExamples.propertyItems, 'typescript');
+  propertySeparatorCode = getFormattedCode(BreadcrumbCodeExamples.propertySeparator, 'typescript');
+  propertyMaxItemsCode = getFormattedCode(BreadcrumbCodeExamples.propertyMaxItems, 'typescript');
+
+  constructor(
+    private aiPromptService: AiPromptService
+  ) { }
+
+  get claudeUrl(): string {
+    return this.aiPromptService.generateClaudeUrl();
+  }
+
+  get chatGptUrl(): string {
+    return this.aiPromptService.generateChatGptUrl();
+  }
+}