@spartan-ng/cli 1.7.0 → 1.8.0-beta.2

package/src/generators/ui/libs/breadcrumb/files/lib/hlm-breadcrumb-list.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmBreadcrumbList]',
+	exportAs: 'hlmBreadcrumbList',
 	host: {
 		'data-slot': 'breadcrumb-list',
 	},

package/src/generators/ui/libs/breadcrumb/files/lib/hlm-breadcrumb-page.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmBreadcrumbPage]',
+	exportAs: 'hlmBreadcrumbPage',
 	host: {
 		'data-slot': 'breadcrumb-page',
 		role: 'link',

package/src/generators/ui/libs/breadcrumb/files/lib/hlm-breadcrumb-separator.ts.template

@@ -6,6 +6,7 @@ import { classes } from '<%- importAlias %>/utils';
 @Component({
 	// eslint-disable-next-line @angular-eslint/component-selector
 	selector: '[hlmBreadcrumbSeparator]',
+	exportAs: 'hlmBreadcrumbSeparator',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/breadcrumb/files/lib/hlm-breadcrumb.ts.template

@@ -2,6 +2,7 @@ import { Directive, input } from '@angular/core';
 
 @Directive({
 	selector: '[hlmBreadcrumb]',
+	exportAs: 'hlmBreadcrumb',
 	host: {
 		'data-slot': 'breadcrumb',
 		role: 'navigation',

package/src/generators/ui/libs/bubble/files/lib/hlm-bubble-content.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmBubbleContent],hlm-bubble-content',
+	exportAs: 'hlmBubbleContent',
 	host: { 'data-slot': 'bubble-content' },
 })
 export class HlmBubbleContent {

package/src/generators/ui/libs/bubble/files/lib/hlm-bubble-group.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmBubbleGroup],hlm-bubble-group',
+	exportAs: 'hlmBubbleGroup',
 	host: { 'data-slot': 'bubble-group' },
 })
 export class HlmBubbleGroup {

package/src/generators/ui/libs/bubble/files/lib/hlm-bubble-reactions.ts.template

@@ -26,6 +26,7 @@ export type BubbleReactionsVariants = VariantProps<typeof bubbleReactionsVariant
 
 @Directive({
 	selector: '[hlmBubbleReactions],hlm-bubble-reactions',
+	exportAs: 'hlmBubbleReactions',
 	host: {
 		'data-slot': 'bubble-reactions',
 		'[attr.data-align]': 'align()',

package/src/generators/ui/libs/bubble/files/lib/hlm-bubble.ts.template

@@ -27,6 +27,7 @@ export type BubbleAlign = 'start' | 'end';
 
 @Directive({
 	selector: '[hlmBubble],hlm-bubble',
+	exportAs: 'hlmBubble',
 	host: {
 		'data-slot': 'bubble',
 		'[attr.data-variant]': 'variant()',

package/src/generators/ui/libs/button-group/files/lib/hlm-button-group-separator.ts.template

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmButtonGroupSeparator],hlm-button-group-separator',
+	exportAs: 'hlmButtonGroupSeparator',
 	providers: [provideBrnSeparatorConfig({ orientation: 'vertical' })],
 	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
 	host: {

package/src/generators/ui/libs/button-group/files/lib/hlm-button-group-text.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmButtonGroupText],hlm-button-group-text',
+	exportAs: 'hlmButtonGroupText',
 	host: {
 		'data-slot': 'button-group-text',
 	},

package/src/generators/ui/libs/button-group/files/lib/hlm-button-group.ts.template

@@ -21,6 +21,7 @@ const buttonGroupVariants = cva(
 
 @Directive({
 	selector: '[hlmButtonGroup],hlm-button-group',
+	exportAs: 'hlmButtonGroup',
 	host: {
 		'data-slot': 'button-group',
 		role: 'group',

package/src/generators/ui/libs/calendar/files/lib/hlm-calendar-multi.ts.template

@@ -10,6 +10,7 @@ import { classes, hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-calendar-multi',
+	exportAs: 'hlmCalendarMulti',
 	imports: [BrnCalendarImports, NgIcon, NgTemplateOutlet, HlmSelectImports, HlmButtonImports],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/calendar/files/lib/hlm-calendar-range.ts.template

@@ -10,6 +10,7 @@ import { classes, hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-calendar-range',
+	exportAs: 'hlmCalendarRange',
 	imports: [BrnCalendarImports, NgIcon, HlmSelectImports, NgTemplateOutlet, HlmButtonImports],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/calendar/files/lib/hlm-calendar.ts.template

@@ -10,6 +10,7 @@ import { classes, hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-calendar',
+	exportAs: 'hlmCalendar',
 	imports: [BrnCalendarImports, NgIcon, HlmSelectImports, NgTemplateOutlet, HlmButtonImports],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/calendar/files/lib/hlm-month-year-calendar.ts.template

@@ -8,6 +8,7 @@ import { classes, hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-month-year-calendar',
+	exportAs: 'hlmMonthYearCalendar',
 	imports: [BrnCalendarImports, NgIcon, HlmButtonImports],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/card/files/lib/hlm-card-action.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCardAction]',
+	exportAs: 'hlmCardAction',
 	host: { 'data-slot': 'card-action' },
 })
 export class HlmCardAction {

package/src/generators/ui/libs/card/files/lib/hlm-card-content.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCardContent]',
+	exportAs: 'hlmCardContent',
 	host: { 'data-slot': 'card-content' },
 })
 export class HlmCardContent {

package/src/generators/ui/libs/card/files/lib/hlm-card-description.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCardDescription]',
+	exportAs: 'hlmCardDescription',
 	host: { 'data-slot': 'card-description' },
 })
 export class HlmCardDescription {

package/src/generators/ui/libs/card/files/lib/hlm-card-footer.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCardFooter],hlm-card-footer',
+	exportAs: 'hlmCardFooter',
 	host: { 'data-slot': 'card-footer' },
 })
 export class HlmCardFooter {

package/src/generators/ui/libs/card/files/lib/hlm-card-header.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCardHeader],hlm-card-header',
+	exportAs: 'hlmCardHeader',
 	host: { 'data-slot': 'card-header' },
 })
 export class HlmCardHeader {

package/src/generators/ui/libs/card/files/lib/hlm-card-title.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCardTitle]',
+	exportAs: 'hlmCardTitle',
 	host: { 'data-slot': 'card-title' },
 })
 export class HlmCardTitle {

package/src/generators/ui/libs/card/files/lib/hlm-card.ts.template

@@ -4,6 +4,7 @@ import { HlmCardConfig, injectHlmCardConfig } from './hlm-card.token';
 
 @Directive({
 	selector: '[hlmCard],hlm-card',
+	exportAs: 'hlmCard',
 	host: {
 		'data-slot': 'card',
 		'[attr.data-size]': 'size()',

package/src/generators/ui/libs/carousel/files/lib/hlm-carousel-content.ts.template

@@ -4,6 +4,7 @@ import { HlmCarousel } from './hlm-carousel';
 
 @Directive({
 	selector: '[hlmCarouselContent],hlm-carousel-content',
+	exportAs: 'hlmCarouselContent',
 	host: {
 		'data-slot': 'carousel-content',
 	},

package/src/generators/ui/libs/carousel/files/lib/hlm-carousel-item.ts.template

@@ -4,6 +4,7 @@ import { HlmCarousel } from './hlm-carousel';
 
 @Directive({
 	selector: '[hlmCarouselItem],hlm-carousel-item',
+	exportAs: 'hlmCarouselItem',
 	host: {
 		'data-slot': 'carousel-item',
 		role: 'group',

package/src/generators/ui/libs/carousel/files/lib/hlm-carousel-next.ts.template

@@ -7,6 +7,7 @@ import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'button[hlm-carousel-next], button[hlmCarouselNext]',
+	exportAs: 'hlmCarouselNext',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideArrowRight }), provideBrnButtonConfig({ variant: 'outline', size: 'icon-sm' })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/carousel/files/lib/hlm-carousel-previous.ts.template

@@ -7,6 +7,7 @@ import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'button[hlm-carousel-previous], button[hlmCarouselPrevious]',
+	exportAs: 'hlmCarouselPrevious',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideArrowLeft }), provideBrnButtonConfig({ variant: 'outline', size: 'icon-sm' })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/carousel/files/lib/hlm-carousel-slide-display.ts.template

@@ -4,6 +4,7 @@ import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'hlm-carousel-slide-display',
+	exportAs: 'hlmCarouselSlideDisplay',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'data-slot': 'carousel-slide-display',

package/src/generators/ui/libs/carousel/files/lib/hlm-carousel.ts.template

@@ -16,6 +16,7 @@ import { EmblaCarouselDirective } from 'embla-carousel-angular';
 
 @Component({
 	selector: 'hlm-carousel',
+	exportAs: 'hlmCarousel',
 	imports: [EmblaCarouselDirective],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {

package/src/generators/ui/libs/chart/files/lib/hlm-chart.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'tanstack-chart[hlmChart]',
+	exportAs: 'hlmChart',
 	host: {
 		'data-slot': 'chart',
 		style: `

package/src/generators/ui/libs/checkbox/files/lib/hlm-checkbox.ts.template

@@ -28,6 +28,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 
 @Component({
 	selector: 'hlm-checkbox',
+	exportAs: 'hlmCheckbox',
 	imports: [BrnCheckbox, NgIcon],
 	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
 	viewProviders: [provideIcons({ lucideCheck })],

package/src/generators/ui/libs/code-block/files/index.ts.template

@@ -0,0 +1,28 @@
+import { HlmCodeBlock } from './lib/hlm-code-block';
+import { HlmCodeBlockActions } from './lib/hlm-code-block-actions';
+import { HlmCodeBlockContent } from './lib/hlm-code-block-content';
+import { HlmCodeBlockCopyButton } from './lib/hlm-code-block-copy-button';
+import { HlmCodeBlockFooter } from './lib/hlm-code-block-footer';
+import { HlmCodeBlockHeader } from './lib/hlm-code-block-header';
+import { HlmCodeBlockLine } from './lib/hlm-code-block-line';
+import { HlmCodeBlockTitle } from './lib/hlm-code-block-title';
+
+export * from './lib/hlm-code-block';
+export * from './lib/hlm-code-block-actions';
+export * from './lib/hlm-code-block-content';
+export * from './lib/hlm-code-block-copy-button';
+export * from './lib/hlm-code-block-footer';
+export * from './lib/hlm-code-block-header';
+export * from './lib/hlm-code-block-line';
+export * from './lib/hlm-code-block-title';
+
+export const HlmCodeBlockImports = [
+	HlmCodeBlock,
+	HlmCodeBlockActions,
+	HlmCodeBlockContent,
+	HlmCodeBlockCopyButton,
+	HlmCodeBlockFooter,
+	HlmCodeBlockHeader,
+	HlmCodeBlockLine,
+	HlmCodeBlockTitle,
+] as const;

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-actions.ts.template

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmCodeBlockActions],hlm-code-block-actions',
+	exportAs: 'hlmCodeBlockActions',
+	host: { 'data-slot': 'code-block-actions' },
+})
+export class HlmCodeBlockActions {
+	constructor() {
+		classes(
+			() =>
+				'spartan-code-block-actions ms-auto flex shrink-0 items-center [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 [[data-slot=code-block]>&]:pointer-coarse:opacity-100',
+		);
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-content.ts.template

@@ -0,0 +1,85 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	inject,
+	input,
+	numberAttribute,
+} from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { HlmCodeBlockLine } from './hlm-code-block-line';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'pre[hlmCodeBlockContent]',
+	exportAs: 'hlmCodeBlockContent',
+	imports: [HlmCodeBlockLine],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'data-slot': 'code-block-content',
+		'[attr.data-wrap]': 'wrap() || null',
+		'[attr.data-numbered]': 'lineNumbers() || null',
+		'[attr.dir]': '_direction()',
+		'[style.counter-reset]': '_style()',
+		tabindex: '0',
+	},
+	template: `
+		<code
+			data-slot="code-block-code"
+			class="spartan-code-block-code grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0"
+		>
+			@if (_lines(); as lines) {
+				@for (line of lines; track $index) {
+					<span hlmCodeBlockLine>{{ line }}</span>
+				}
+			} @else if (_hasCode()) {
+				<span [textContent]="_code()"></span>
+			} @else {
+				<ng-content />
+			}
+		</code>
+	`,
+})
+export class HlmCodeBlockContent {
+	private readonly _dir = inject(Directionality);
+
+	protected readonly _direction = this._dir.valueSignal;
+
+	public readonly wrap = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+	public readonly lineNumbers = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+	public readonly startLine = input<number, NumberInput>(1, { transform: numberAttribute });
+
+	/** When set, the code is rendered line by line instead of projecting `<ng-content />`. */
+	public readonly code = input<string>();
+
+	protected readonly _code = computed(() => {
+		const code = this.code();
+		return typeof code === 'string' ? code : null;
+	});
+
+	protected readonly _hasCode = computed(() => this._code() !== null);
+
+	protected readonly _lines = computed(() => {
+		const code = this._code();
+		if (!this.lineNumbers() || code === null) return null;
+
+		// An empty line renders a newline so copying a selection keeps blank lines.
+		return code
+			.replace(/\n$/, '')
+			.split('\n')
+			.map((line) => (line === '' ? '\n' : line));
+	});
+
+	protected readonly _style = computed(() => `line ${this.startLine() - 1}`);
+
+	constructor() {
+		classes(
+			() =>
+				'spartan-code-block-content scroll-fade-x data-wrap:scroll-fade-y min-h-0 min-w-0 scrollbar-thin overflow-auto text-start font-mono outline-none data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap',
+		);
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-copy-button.ts.template

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, computed, effect, input, signal } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck, lucideCopy } from '@ng-icons/lucide';
+import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
+import { classes } from '<%- importAlias %>/utils';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'button[hlmCodeBlockCopyButton]',
+	exportAs: 'hlmCodeBlockCopyButton',
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideCopy, lucideCheck }), provideBrnButtonConfig({ variant: 'ghost', size: 'icon-xs' })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
+	host: {
+		type: 'button',
+		'data-slot': 'code-block-copy-button',
+		'[attr.data-copied]': '_copied() || null',
+		'[attr.aria-label]': '_ariaLabel()',
+		'(click)': '_copy()',
+	},
+	template: `
+		<ng-icon [name]="_icon()" />
+
+		@if (_copied()) {
+			<span aria-live="polite" class="sr-only">
+				{{ copiedText() }}
+			</span>
+		}
+	`,
+})
+export class HlmCodeBlockCopyButton {
+	protected readonly _copied = signal(false);
+
+	protected readonly _icon = computed(() => (this._copied() ? 'lucideCheck' : 'lucideCopy'));
+
+	public readonly value = input<string>('');
+	public readonly copyText = input<string>('Copy');
+	public readonly copiedText = input<string>('Copied');
+
+	protected readonly _ariaLabel = computed(() => (this._copied() ? this.copiedText() : this.copyText()));
+
+	constructor() {
+		classes(() => 'spartan-code-block-copy-button');
+
+		effect((onCleanup) => {
+			if (!this._copied()) return;
+
+			const timeout = setTimeout(() => this._copied.set(false), 2000);
+			onCleanup(() => clearTimeout(timeout));
+		});
+	}
+
+	protected async _copy(): Promise<void> {
+		try {
+			await navigator.clipboard.writeText(this.value());
+			this._copied.set(true);
+		} catch {
+			// ignore clipboard errors
+		}
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-footer.ts.template

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmCodeBlockFooter],hlm-code-block-footer',
+	exportAs: 'hlmCodeBlockFooter',
+	host: { 'data-slot': 'code-block-footer' },
+})
+export class HlmCodeBlockFooter {
+	constructor() {
+		classes(() => 'spartan-code-block-footer flex min-w-0 shrink-0 items-center');
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-header.ts.template

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmCodeBlockHeader],hlm-code-block-header',
+	exportAs: 'hlmCodeBlockHeader',
+	host: { 'data-slot': 'code-block-header' },
+})
+export class HlmCodeBlockHeader {
+	constructor() {
+		classes(
+			() =>
+				'spartan-code-block-header flex min-w-0 shrink-0 items-center *:has-[>[data-slot=code-block-title]]:min-w-0',
+		);
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-line.ts.template

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+
+const codeBlockLineVariants = cva(
+	"spartan-code-block-line relative block min-h-lh after:absolute after:top-0 after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']",
+	{
+		variants: {
+			variant: {
+				default: 'spartan-code-block-line-variant-default',
+				added: 'spartan-code-block-line-variant-added',
+				removed: 'spartan-code-block-line-variant-removed',
+				highlighted: 'spartan-code-block-line-variant-highlighted',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+type CodeBlockLineVariants = VariantProps<typeof codeBlockLineVariants>;
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'span[hlmCodeBlockLine]',
+	exportAs: 'hlmCodeBlockLine',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { 'data-slot': 'code-block-line', '[attr.data-variant]': 'variant()' },
+	template: `
+		<span data-slot="code-block-line-content" class="min-w-0">
+			<ng-content />
+		</span>
+	`,
+})
+export class HlmCodeBlockLine {
+	public readonly variant = input<CodeBlockLineVariants['variant']>('default');
+
+	constructor() {
+		classes(() => codeBlockLineVariants({ variant: this.variant() }));
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-title.ts.template

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmCodeBlockTitle],hlm-code-block-title',
+	exportAs: 'hlmCodeBlockTitle',
+	host: { 'data-slot': 'code-block-title' },
+})
+export class HlmCodeBlockTitle {
+	constructor() {
+		classes(
+			() =>
+				'spartan-code-block-title min-w-0 truncate [&_ng-icon]:pointer-events-none [&_ng-icon]:inline-block [&_ng-icon]:align-middle',
+		);
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block.ts.template

@@ -0,0 +1,34 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const codeBlockVariants = cva(
+	'spartan-code-block group/code-block relative flex w-full min-w-0 flex-col overflow-hidden',
+	{
+		variants: {
+			variant: {
+				default: 'spartan-code-block-variant-default',
+				destructive: 'spartan-code-block-variant-destructive',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+type CodeBlockVariants = VariantProps<typeof codeBlockVariants>;
+
+@Directive({
+	selector: '[hlmCodeBlock],hlm-code-block',
+	exportAs: 'hlmCodeBlock',
+	host: { 'data-slot': 'code-block', '[attr.data-variant]': 'variant()', '[attr.data-size]': 'size()' },
+})
+export class HlmCodeBlock {
+	public readonly variant = input<CodeBlockVariants['variant']>('default');
+	public readonly size = input<'default' | 'sm'>('default');
+
+	constructor() {
+		classes(() => codeBlockVariants({ variant: this.variant() }));
+	}
+}

package/src/generators/ui/libs/code-block/generator.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/code-block/generator.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, { ...options, name: 'code-block' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/code-block/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/code-block/generator.ts"],"names":[],"mappings":";;AAIA,8BAEC;;AALD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;AACzE,CAAC"}

package/src/generators/ui/libs/collapsible/files/lib/hlm-collapsible-content.ts.template

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCollapsibleContent],hlm-collapsible-content',
+	exportAs: 'hlmCollapsibleContent',
 	hostDirectives: [{ directive: BrnCollapsibleContent, inputs: ['id'] }],
 	host: { 'data-slot': 'collapsible-content' },
 })

package/src/generators/ui/libs/collapsible/files/lib/hlm-collapsible-trigger.ts.template

@@ -3,6 +3,7 @@ import { BrnCollapsibleTrigger } from '@spartan-ng/brain/collapsible';
 
 @Directive({
 	selector: 'button[hlmCollapsibleTrigger]',
+	exportAs: 'hlmCollapsibleTrigger',
 	hostDirectives: [{ directive: BrnCollapsibleTrigger, inputs: ['type'] }],
 	host: { 'data-slot': 'collapsible-trigger' },
 })

package/src/generators/ui/libs/collapsible/files/lib/hlm-collapsible.ts.template

@@ -3,6 +3,7 @@ import { BrnCollapsible } from '@spartan-ng/brain/collapsible';
 
 @Directive({
 	selector: '[hlmCollapsible],hlm-collapsible',
+	exportAs: 'hlmCollapsible',
 	hostDirectives: [
 		{
 			directive: BrnCollapsible,