@spartan-ng/cli 1.6.3 → 1.8.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "1.6.3",
+  "version": "1.8.0-beta.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/spartan-ng/spartan.git"

package/src/generators/healthcheck/healthchecks/brn-collapsible.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.brainCollapsibleHealthcheck = void 0;
 const devkit_1 = require("@nx/devkit");
 const generator_1 = require("../../migrate-collapsible/generator");
+const helm_collapsible_files_1 = require("../../migrate-collapsible/helm-collapsible-files");
 const healthchecks_1 = require("../healthchecks");
 exports.brainCollapsibleHealthcheck = {
     name: 'Brain Collapsible',
@@ -12,10 +13,8 @@ exports.brainCollapsibleHealthcheck = {
             if (!file.endsWith('.ts') && !file.endsWith('.html')) {
                 return;
             }
-            // skip HlmCollapsible itself
-            if (file.endsWith('hlm-collapsible.ts') ||
-                file.endsWith('hlm-collapsible-trigger.ts') ||
-                file.endsWith('hlm-collapsible-content.ts')) {
+            // skip the Helm Collapsible and Trace implementations
+            if (helm_collapsible_files_1.HELM_COLLAPSIBLE_FILES.some((name) => file.endsWith(name))) {
                 return;
             }
             const contents = tree.read(file, 'utf-8');

package/src/generators/healthcheck/healthchecks/brn-collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"brn-collapsible.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/generators/healthcheck/healthchecks/brn-collapsible.ts"],"names":[],"mappings":";;;AAAA,uCAAkD;AAClD,mEAAkF;AAClF,kDAAwE;AAE3D,QAAA,2BAA2B,GAAgB;IACvD,IAAI,EAAE,mBAAmB;IACzB,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO;QACzB,IAAA,6BAAoB,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACxC,2DAA2D;YAC3D,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;gBACtD,OAAO;YACR,CAAC;YAED,6BAA6B;YAC7B,IACC,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC;gBACnC,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC;gBAC3C,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC,EAC1C,CAAC;gBACF,OAAO;YACR,CAAC;YAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAE1C,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACf,OAAO;YACR,CAAC;YAED,IAAI,QAAQ,CAAC,QAAQ,CAAC,iCAAiC,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC;gBAClG,OAAO,CACN,0FAA0F,EAC1F,kCAAmB,CAAC,KAAK,EACzB,IAAI,CACJ,CAAC;YACH,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IACD,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QACnB,MAAM,IAAA,uCAA2B,EAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAC;IACb,CAAC;IACD,MAAM,EAAE,+DAA+D;CACvE,CAAC"}
+{"version":3,"file":"brn-collapsible.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/generators/healthcheck/healthchecks/brn-collapsible.ts"],"names":[],"mappings":";;;AAAA,uCAAkD;AAClD,mEAAkF;AAClF,6FAA0F;AAC1F,kDAAwE;AAE3D,QAAA,2BAA2B,GAAgB;IACvD,IAAI,EAAE,mBAAmB;IACzB,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO;QACzB,IAAA,6BAAoB,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACxC,2DAA2D;YAC3D,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;gBACtD,OAAO;YACR,CAAC;YAED,sDAAsD;YACtD,IAAI,+CAAsB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;gBAChE,OAAO;YACR,CAAC;YAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAE1C,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACf,OAAO;YACR,CAAC;YAED,IAAI,QAAQ,CAAC,QAAQ,CAAC,iCAAiC,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC;gBAClG,OAAO,CACN,0FAA0F,EAC1F,kCAAmB,CAAC,KAAK,EACzB,IAAI,CACJ,CAAC;YACH,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IACD,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QACnB,MAAM,IAAA,uCAA2B,EAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAC;IACb,CAAC;IACD,MAAM,EAAE,+DAA+D;CACvE,CAAC"}

package/src/generators/migrate-collapsible/generator.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.migrateCollapsibleGenerator = migrateCollapsibleGenerator;
 const devkit_1 = require("@nx/devkit");
 const visit_files_1 = require("../../utils/visit-files");
+const helm_collapsible_files_1 = require("./helm-collapsible-files");
 async function migrateCollapsibleGenerator(tree, { skipFormat }) {
     updateImports(tree);
     replaceSelector(tree);
@@ -15,10 +16,8 @@ async function migrateCollapsibleGenerator(tree, { skipFormat }) {
  */
 function updateImports(tree) {
     (0, visit_files_1.visitFiles)(tree, '/', (path) => {
-        // skip HlmCollapsible itself
-        if (path.endsWith('hlm-collapsible.ts') ||
-            path.endsWith('hlm-collapsible-trigger.ts') ||
-            path.endsWith('hlm-collapsible-content.ts')) {
+        // skip the Helm Collapsible and Trace implementations
+        if (helm_collapsible_files_1.HELM_COLLAPSIBLE_FILES.some((name) => path.endsWith(name))) {
             return;
         }
         const content = tree.read(path, 'utf-8');

package/src/generators/migrate-collapsible/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-collapsible/generator.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-collapsible/generator.ts"],"names":[],"mappings":"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"}

package/src/generators/migrate-collapsible/helm-collapsible-files.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Helm components that intentionally wrap the brain collapsible directives as host directives (to
+ * expose their inputs). They are not consumers of the deprecated `<brn-collapsible>` component, so
+ * both the healthcheck and the migration must skip them.
+ */
+export declare const HELM_COLLAPSIBLE_FILES: string[];

package/src/generators/migrate-collapsible/helm-collapsible-files.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HELM_COLLAPSIBLE_FILES = void 0;
+/**
+ * Helm components that intentionally wrap the brain collapsible directives as host directives (to
+ * expose their inputs). They are not consumers of the deprecated `<brn-collapsible>` component, so
+ * both the healthcheck and the migration must skip them.
+ */
+exports.HELM_COLLAPSIBLE_FILES = [
+    'hlm-collapsible.ts',
+    'hlm-collapsible-trigger.ts',
+    'hlm-collapsible-content.ts',
+    'hlm-trace-collapsible.ts',
+    'hlm-trace-collapsible-trigger.ts',
+    'hlm-trace-collapsible-content.ts',
+];
+//# sourceMappingURL=helm-collapsible-files.js.map

package/src/generators/migrate-collapsible/helm-collapsible-files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helm-collapsible-files.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-collapsible/helm-collapsible-files.ts"],"names":[],"mappings":";;;AAAA;;;;GAIG;AACU,QAAA,sBAAsB,GAAG;IACrC,oBAAoB;IACpB,4BAA4B;IAC5B,4BAA4B;IAC5B,0BAA0B;IAC1B,kCAAkC;IAClC,kCAAkC;CAClC,CAAC"}

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/pagination/files/index.ts.template

@@ -17,6 +17,7 @@ export * from './lib/hlm-pagination-item';
 export * from './lib/hlm-pagination-link';
 export * from './lib/hlm-pagination-next';
 export * from './lib/hlm-pagination-previous';
+export * from './lib/hlm-pagination.token';
 
 export const HlmPaginationImports = [
 	HlmPagination,

package/src/generators/ui/libs/pagination/files/lib/hlm-numbered-pagination-query-params.ts.template

@@ -19,6 +19,7 @@ import { HlmPaginationItem } from './hlm-pagination-item';
 import { HlmPaginationLink } from './hlm-pagination-link';
 import { HlmPaginationNext } from './hlm-pagination-next';
 import { HlmPaginationPrevious } from './hlm-pagination-previous';
+import { injectHlmPaginationConfig } from './hlm-pagination.token';
 
 @Component({
 	selector: 'hlm-numbered-pagination-query-params',
@@ -34,11 +35,11 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
-		<div class="flex items-center gap-1 text-sm text-nowrap text-gray-600">
+		<div class="text-muted-foreground flex items-center gap-1 text-sm text-nowrap">
 			<b>{{ totalItems() }}</b>
-			total items |
+			{{ totalItemsLabel() }} |
 			<b>{{ _lastPageNumber() }}</b>
-			pages
+			{{ pagesLabel() }}
 		</div>
 
 		<nav hlmPagination>
@@ -49,6 +50,8 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 							[link]="link()"
 							[queryParams]="{ page: currentPage() - 1 }"
 							queryParamsHandling="merge"
+							[text]="previousLabel()"
+							[aria-label]="previousAriaLabel()"
 						/>
 					</li>
 				}
@@ -77,6 +80,8 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 							[link]="link()"
 							[queryParams]="{ page: currentPage() + 1 }"
 							queryParamsHandling="merge"
+							[text]="nextLabel()"
+							[aria-label]="nextAriaLabel()"
 						/>
 					</li>
 				}
@@ -99,6 +104,8 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 	`,
 })
 export class HlmNumberedPaginationQueryParams {
+	private readonly _config = injectHlmPaginationConfig();
+
 	/**
 	 * The current (active) page.
 	 */
@@ -144,6 +151,42 @@ export class HlmNumberedPaginationQueryParams {
 	 */
 	public readonly pageSizes = input<number[]>([10, 20, 50, 100]);
 
+	/**
+	 * The label for total items or pages to show
+	 * Defaults to config's totalItemsLabel
+	 */
+	public readonly totalItemsLabel = input<string>(this._config.totalItemsLabel);
+
+	/**
+	 * The label for pages to show
+	 * Defaults to config's pagesLabel
+	 */
+	public readonly pagesLabel = input<string>(this._config.pagesLabel);
+
+	/**
+	 * The label to show on the next button
+	 * Defaults to config's nextLabel
+	 */
+	public readonly nextLabel = input<string>(this._config.nextLabel);
+
+	/**
+	 * The aria-label to show on the next button
+	 * Defaults to config's nextAriaLabel
+	 */
+	public readonly nextAriaLabel = input<string>(this._config.nextAriaLabel);
+
+	/**
+	 * The label to show on the previous button
+	 * Defaults to config's previousLabel
+	 */
+	public readonly previousLabel = input<string>(this._config.previousLabel);
+
+	/**
+	 * The aria-label to show on the previous button
+	 * Defaults to config's previousAriaLabel
+	 */
+	public readonly previousAriaLabel = input<string>(this._config.previousAriaLabel);
+
 	protected readonly _pageSizesWithCurrent = computed(() => {
 		const pageSizes = this.pageSizes();
 		return pageSizes.includes(this.itemsPerPage())

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

@@ -17,6 +17,7 @@ import { HlmPaginationItem } from './hlm-pagination-item';
 import { HlmPaginationLink } from './hlm-pagination-link';
 import { HlmPaginationNext } from './hlm-pagination-next';
 import { HlmPaginationPrevious } from './hlm-pagination-previous';
+import { injectHlmPaginationConfig } from './hlm-pagination.token';
 
 @Component({
 	selector: 'hlm-numbered-pagination',
@@ -33,18 +34,18 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<div class="flex items-center justify-between gap-2 px-4 py-2">
-			<div class="flex items-center gap-1 text-sm text-nowrap text-gray-600">
+			<div class="text-muted-foreground flex items-center gap-1 text-sm text-nowrap">
 				<b>{{ totalItems() }}</b>
-				total items |
+				{{ totalItemsLabel() }} |
 				<b>{{ _lastPageNumber() }}</b>
-				pages
+				{{ pagesLabel() }}
 			</div>
 
 			<nav hlmPagination>
 				<ul hlmPaginationContent>
 					@if (showEdges() && !_isFirstPageActive()) {
 						<li hlmPaginationItem (click)="goToPrevious()">
-							<hlm-pagination-previous />
+							<hlm-pagination-previous [aria-label]="previousAriaLabel()" [text]="previousLabel()" />
 						</li>
 					}
 
@@ -62,7 +63,7 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 
 					@if (showEdges() && !_isLastPageActive()) {
 						<li hlmPaginationItem (click)="goToNext()">
-							<hlm-pagination-next />
+							<hlm-pagination-next [aria-label]="nextAriaLabel()" [text]="nextLabel()" />
 						</li>
 					}
 				</ul>
@@ -85,6 +86,8 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 	`,
 })
 export class HlmNumberedPagination {
+	private readonly _config = injectHlmPaginationConfig();
+
 	/**
 	 * The current (active) page.
 	 */
@@ -124,6 +127,42 @@ export class HlmNumberedPagination {
 	 */
 	public readonly pageSizes = input<number[]>([10, 20, 50, 100]);
 
+	/**
+	 * The label for total items or pages to show
+	 * Defaults to config's totalItemsLabel
+	 */
+	public readonly totalItemsLabel = input<string>(this._config.totalItemsLabel);
+
+	/**
+	 * The label for pages to show
+	 * Defaults to config's pagesLabel
+	 */
+	public readonly pagesLabel = input<string>(this._config.pagesLabel);
+
+	/**
+	 * The label to show on the next button
+	 * Defaults to config's nextLabel
+	 */
+	public readonly nextLabel = input<string>(this._config.nextLabel);
+
+	/**
+	 * The aria-label to show on the next button
+	 * Defaults to config's nextAriaLabel
+	 */
+	public readonly nextAriaLabel = input<string>(this._config.nextAriaLabel);
+
+	/**
+	 * The label to show on the previous button
+	 * Defaults to config's previousLabel
+	 */
+	public readonly previousLabel = input<string>(this._config.previousLabel);
+
+	/**
+	 * The aria-label to show on the previous button
+	 * Defaults to config's previousAriaLabel
+	 */
+	public readonly previousAriaLabel = input<string>(this._config.previousAriaLabel);
+
 	protected readonly _pageSizesWithCurrent = computed(() => {
 		const pageSizes = this.pageSizes();
 		return pageSizes.includes(this.itemsPerPage())