Code Block

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideDownload, lucideWrapText } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

@Component({
	selector: 'spartan-code-block-preview',
	imports: [HlmCodeBlockImports, HlmButton, NgIcon],
	providers: [provideIcons({ lucideDownload, lucideWrapText })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="w-full max-w-lg">
			<hlm-code-block>
				<hlm-code-block-header>
					<hlm-code-block-title>app/hello.component.ts</hlm-code-block-title>
					<hlm-code-block-actions>
						<button
							hlmBtn
							variant="ghost"
							size="icon-xs"
							aria-label="Wrap lines"
							[attr.aria-pressed]="_wrap()"
							(click)="_wrap.set(!_wrap())"
						>
							<ng-icon name="lucideWrapText" />
						</button>
						<button
							hlmBtn
							variant="ghost"
							size="icon-xs"
							aria-label="Download"
							(click)="_download(_code, 'hello.component.ts')"
						>
							<ng-icon name="lucideDownload" />
						</button>
						<button hlmCodeBlockCopyButton [value]="_code"></button>
					</hlm-code-block-actions>
				</hlm-code-block-header>
				<pre hlmCodeBlockContent [code]="_code" [wrap]="_wrap()"></pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockPreview {
	protected readonly _wrap = signal(false);

	protected readonly _code = `import { Component, input } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: \`<p>Hello, {{ name() }}!</p>\`,
})
export class HelloComponent {
  readonly name = input('Angular');
}`;

	protected _download(value: string, filename: string): void {
		const url = URL.createObjectURL(new Blob([value], { type: 'text/plain' }));
		const link = document.createElement('a');
		link.href = url;
		link.download = filename;
		link.click();
		URL.revokeObjectURL(url);
	}
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

@Component({
	selector: 'spartan-code-block-basic',
	imports: [HlmCodeBlockImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="w-full max-w-md">
			<hlm-code-block>
				<pre hlmCodeBlockContent>{{ _output }}</pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockBasic {
	protected readonly _output = `$ pnpm build
> ng build

✔ Browser application bundle generation complete.

Initial chunk files | Names     |  Raw size
polyfills.js        | polyfills |  34.52 kB
main.js             | main      | 210.45 kB

Output location: dist/app`;
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideTerminal } from '@ng-icons/lucide';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

@Component({
	selector: 'spartan-code-block-header',
	imports: [HlmCodeBlockImports, NgIcon],
	providers: [provideIcons({ lucideTerminal })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="w-full max-w-md">
			<hlm-code-block>
				<hlm-code-block-header>
					<hlm-code-block-title>
						<ng-icon name="lucideTerminal" />
						Terminal
					</hlm-code-block-title>
					<hlm-code-block-actions>
						<button hlmCodeBlockCopyButton [value]="_command"></button>
					</hlm-code-block-actions>
				</hlm-code-block-header>
				<pre hlmCodeBlockContent>{{ _output }}</pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockHeader {
	protected readonly _command = 'pnpm add -D @spartan-ng/cli';

	protected readonly _output = `$ ${this._command}
Packages: +14
Progress: resolved 412, reused 398, downloaded 14, added 14, done
Done in 2.8s using pnpm v10.18.0`;
}

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideDownload, lucideTerminal, lucideWrapText } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

@Component({
	selector: 'spartan-code-block-actions',
	imports: [HlmCodeBlockImports, HlmButton, NgIcon],
	providers: [provideIcons({ lucideTerminal, lucideWrapText, lucideDownload })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="w-full max-w-md">
			<hlm-code-block>
				<hlm-code-block-header>
					<hlm-code-block-title>
						<ng-icon name="lucideTerminal" />
						Terminal
					</hlm-code-block-title>
					<hlm-code-block-actions>
						<button
							hlmBtn
							variant="ghost"
							size="icon-xs"
							aria-label="Wrap lines"
							[attr.aria-pressed]="_wrap()"
							(click)="_wrap.set(!_wrap())"
						>
							<ng-icon name="lucideWrapText" />
						</button>
						<button
							hlmBtn
							variant="ghost"
							size="icon-xs"
							aria-label="Download"
							(click)="_download(_output, 'lint.log')"
						>
							<ng-icon name="lucideDownload" />
						</button>
						<button hlmCodeBlockCopyButton [value]="_output"></button>
					</hlm-code-block-actions>
				</hlm-code-block-header>
				<pre hlmCodeBlockContent [code]="_output" [wrap]="_wrap()"></pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockActions {
	protected readonly _wrap = signal(false);

	protected readonly _output = `$ pnpm lint
apps/web/src/app/message-list.component.ts
  18:22  error    Unsafe call of an \`any\` typed value  @typescript-eslint/no-unsafe-call
  42:7   warning  'scrollToBottom' is assigned a value but never used  @typescript-eslint/no-unused-vars

✖ 2 problems (1 error, 1 warning)`;

	protected _download(value: string, filename: string): void {
		const url = URL.createObjectURL(new Blob([value], { type: 'text/plain' }));
		const link = document.createElement('a');
		link.href = url;
		link.download = filename;
		link.click();
		URL.revokeObjectURL(url);
	}
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

@Component({
	selector: 'spartan-code-block-floating-actions',
	imports: [HlmCodeBlockImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="w-full max-w-md">
			<hlm-code-block>
				<hlm-code-block-actions>
					<button hlmCodeBlockCopyButton [value]="_output"></button>
				</hlm-code-block-actions>
				<pre hlmCodeBlockContent [code]="_output"></pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockFloatingActions {
	protected readonly _output = `$ pnpm add @spartan-ng/brain
Progress: resolved 412, reused 398, downloaded 14, added 14, done
dependencies:
+ @angular/cdk 20.2.0
+ @spartan-ng/brain 1.0.0
+ @spartan-ng/helm 1.0.0
Done in 2.8s using pnpm v10.18.0`;
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

@Component({
	selector: 'spartan-code-block-line-numbers',
	imports: [HlmCodeBlockImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="w-full max-w-md">
			<hlm-code-block>
				<pre hlmCodeBlockContent [code]="_code" lineNumbers></pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockLineNumbers {
	protected readonly _code = `{
  "name": "chat",
  "private": true,
  "scripts": {
    "start": "ng serve",
    "build": "ng build"
  }
}`;
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

@Component({
	selector: 'spartan-code-block-start-line',
	imports: [HlmCodeBlockImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="w-full max-w-md">
			<hlm-code-block>
				<hlm-code-block-header>
					<hlm-code-block-title>app/dashboard/dashboard.component.ts</hlm-code-block-title>
					<hlm-code-block-actions>
						<button hlmCodeBlockCopyButton [value]="_code"></button>
					</hlm-code-block-actions>
				</hlm-code-block-header>
				<pre hlmCodeBlockContent [code]="_code" lineNumbers [startLine]="10"></pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockStartLine {
	protected readonly _code = `  if (!this._session) {
    this._router.navigate(['/login']);
  }

  return this._db.project.findMany({
    where: { ownerId: this._session.userId },
    orderBy: { updatedAt: 'desc' },
  });
}`;
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

@Component({
	selector: 'spartan-code-block-wrap',
	imports: [HlmCodeBlockImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="grid w-full max-w-md gap-4">
			<hlm-code-block>
				<pre hlmCodeBlockContent [code]="_output"></pre>
			</hlm-code-block>
			<hlm-code-block>
				<pre hlmCodeBlockContent [code]="_output" wrap></pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockWrap {
	protected readonly _output = `Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'Angular'. Current value: 'Angular 20'. Find more at https://angular.dev/errors/NG0100`;
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

type Line = { text: string; variant: 'default' | 'highlighted' };

@Component({
	selector: 'spartan-code-block-highlighted-lines',
	imports: [HlmCodeBlockImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="w-full max-w-md">
			<hlm-code-block>
				<pre hlmCodeBlockContent lineNumbers>
					@for (line of _lines; track $index) {
						<span hlmCodeBlockLine [variant]="line.variant">{{ line.text }}</span>
					}
				</pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockHighlightedLines {
	protected readonly _lines: Line[] = [
		{ text: '{', variant: 'default' },
		{ text: '  "projects": {', variant: 'default' },
		{ text: '    "app": {', variant: 'default' },
		{ text: '      "architect": {', variant: 'default' },
		{ text: '        "build": {', variant: 'default' },
		{ text: '          "options": {', variant: 'default' },
		{ text: '            "outputPath": "dist/app",', variant: 'highlighted' },
		{ text: '            "index": "src/index.html",', variant: 'default' },
		{ text: '            "browser": "src/main.ts"', variant: 'highlighted' },
		{ text: '          }', variant: 'default' },
		{ text: '        }', variant: 'default' },
		{ text: '      }', variant: 'default' },
		{ text: '    }', variant: 'default' },
		{ text: '  }', variant: 'default' },
		{ text: '}', variant: 'default' },
	];
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

type Line = { text: string; variant: 'default' | 'added' | 'removed' };

@Component({
	selector: 'spartan-code-block-diff',
	imports: [HlmCodeBlockImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="w-full max-w-md">
			<hlm-code-block>
				<hlm-code-block-header>
					<hlm-code-block-title>app/greeting.component.ts</hlm-code-block-title>
					<hlm-code-block-actions>
						<button hlmCodeBlockCopyButton [value]="_code"></button>
					</hlm-code-block-actions>
				</hlm-code-block-header>
				<pre hlmCodeBlockContent>
					@for (line of _lines; track $index) {
						<span hlmCodeBlockLine [variant]="line.variant">{{ line.text }}</span>
					}
				</pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockDiff {
	protected readonly _lines: Line[] = [
		{ text: 'export class GreetingComponent {', variant: 'default' },
		{ text: '  protected readonly greeting = "Hello, " + this.name;', variant: 'removed' },
		{
			text: '  protected readonly greeting = computed(() => `Hello, ${this.name()}! Welcome back.`);',
			variant: 'added',
		},
		{ text: "  readonly name = input('Angular');", variant: 'default' },
		{ text: '}', variant: 'default' },
	];

	protected readonly _code = this._lines.map((line) => line.text).join('\n');
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

@Component({
	selector: 'spartan-code-block-height',
	imports: [HlmCodeBlockImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="w-full max-w-md">
			<hlm-code-block>
				<hlm-code-block-header>
					<hlm-code-block-title>Logs</hlm-code-block-title>
					<hlm-code-block-actions>
						<button hlmCodeBlockCopyButton [value]="_logs"></button>
					</hlm-code-block-actions>
				</hlm-code-block-header>
				<pre hlmCodeBlockContent [code]="_logs" class="scroll-fade-y max-h-64"></pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockHeight {
	protected readonly _logs = Array.from(
		{ length: 40 },
		(_, index) =>
			`[${String(index + 1).padStart(2, '0')}] GET /api/health 200 in ${12 + Math.floor(index / 6) * 2 + (index % 6) * 7}ms`,
	).join('\n');
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideTerminal } from '@ng-icons/lucide';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

@Component({
	selector: 'spartan-code-block-size',
	imports: [HlmCodeBlockImports, NgIcon],
	providers: [provideIcons({ lucideTerminal })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="grid w-full max-w-md gap-4">
			<hlm-code-block>
				<hlm-code-block-header>
					<hlm-code-block-title>
						<ng-icon name="lucideTerminal" />
						Terminal
					</hlm-code-block-title>
					<hlm-code-block-actions>
						<button hlmCodeBlockCopyButton [value]="_output"></button>
					</hlm-code-block-actions>
				</hlm-code-block-header>
				<pre hlmCodeBlockContent [code]="_output"></pre>
			</hlm-code-block>
			<hlm-code-block size="sm">
				<hlm-code-block-header>
					<hlm-code-block-title>
						<ng-icon name="lucideTerminal" />
						Terminal
					</hlm-code-block-title>
					<hlm-code-block-actions>
						<button hlmCodeBlockCopyButton [value]="_output"></button>
					</hlm-code-block-actions>
				</hlm-code-block-header>
				<pre hlmCodeBlockContent [code]="_output" wrap></pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockSize {
	protected readonly _output = `$ pnpm add @spartan-ng/brain
Progress: resolved 412, reused 398, downloaded 14, added 14, done
Done in 2.8s using pnpm v10.18.0`;
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

@Component({
	selector: 'spartan-code-block-destructive',
	imports: [HlmCodeBlockImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="w-full max-w-md">
			<hlm-code-block variant="destructive">
				<hlm-code-block-header>
					<hlm-code-block-title>Error</hlm-code-block-title>
					<hlm-code-block-actions>
						<button hlmCodeBlockCopyButton [value]="_error"></button>
					</hlm-code-block-actions>
				</hlm-code-block-header>
				<pre hlmCodeBlockContent [code]="_error" wrap></pre>
			</hlm-code-block>
		</div>
	`,
})
export class CodeBlockDestructive {
	protected readonly _error = `TypeError: Cannot read properties of undefined (reading 'pipe')
    at MessageListComponent.ngOnInit (app/message-list.component.ts:18:22)
    at callHook (core.mjs:16305:18)`;
}

import { Directionality } from '@angular/cdk/bidi';
import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { TranslateService, Translations } from '@spartan-ng/app/app/shared/translate.service';
import { HlmCodeBlockImports } from '@spartan-ng/helm/code-block';

@Component({
	selector: 'spartan-code-block-rtl-preview',
	imports: [HlmCodeBlockImports],
	providers: [Directionality],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'w-full max-w-md',
		'[dir]': '_dir()',
	},
	template: `
		<p class="text-muted-foreground mb-4 text-sm">{{ _t()['intro'] }}</p>
		<hlm-code-block>
			<hlm-code-block-header>
				<hlm-code-block-title>{{ _t()['title'] }}</hlm-code-block-title>
				<hlm-code-block-actions>
					<button hlmCodeBlockCopyButton [value]="_output"></button>
				</hlm-code-block-actions>
			</hlm-code-block-header>
			<pre hlmCodeBlockContent [code]="_output"></pre>
		</hlm-code-block>
	`,
})
export class CodeBlockRtlPreview {
	private readonly _language = inject(TranslateService).language;
	private readonly _translations: Translations = {
		en: {
			dir: 'ltr',
			values: {
				intro: 'Install the packages, then run the dev server.',
				title: 'Terminal',
			},
		},
		ar: {
			dir: 'rtl',
			values: {
				intro: 'ثبّت الحزم، ثم شغّل خادم التطوير.',
				title: 'الطرفية',
			},
		},
		he: {
			dir: 'rtl',
			values: {
				intro: 'התקן את החבילות, ואז הפעל את שרת הפיתוח.',
				title: 'מסוף',
			},
		},
	};

	protected readonly _output = `pnpm add @spartan-ng/brain
pnpm start`;

	private readonly _translation = computed(() => this._translations[this._language()]);
	protected readonly _t = computed(() => this._translation().values);
	protected readonly _dir = computed(() => this._translation().dir);
}