@spartan-ng/cli 0.0.1-alpha.323

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-dialog.directive.ts.template

@@ -0,0 +1,39 @@
+import { computed, Directive, effect, ElementRef, inject, Input, Renderer2, signal } from '@angular/core';
+import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+import { HlmCommandDirective } from './hlm-command.directive';
+
+@Directive({
+	selector: '[hlmCmdDialog]',
+	standalone: true,
+	hostDirectives: [HlmCommandDirective],
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandDialogDirective {
+	private _stateProvider = injectExposesStateProvider({ host: true });
+	public state = this._stateProvider.state ?? signal('closed').asReadonly();
+	private _renderer = inject(Renderer2);
+	private _element = inject(ElementRef);
+
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	constructor() {
+		effect(() => {
+			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
+		});
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%]  data-[state=open]:slide-in-from-top-[2%]',
+			this._userCls(),
+		);
+	}
+}

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-empty.directive.ts.template

@@ -0,0 +1,23 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmCmdEmpty]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandEmptyDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('py-6 text-center text-sm', this._userCls());
+	}
+}

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-group.directive.ts.template

@@ -0,0 +1,28 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'brn-cmd-group[hlm],cmdk-group[hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandGroupDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'block [&[cmdk-hidden="true"]]:hidden\n' +
+				'[&_.cmdk-group-label]:px-2 [&_.cmdk-group-label]:py-1.5 [&_.cmdk-group-label]:text-xs [&_.cmdk-group-label]:font-medium [&_.cmdk-group-label]:text-muted-foreground\n' +
+				'[&_.cmdk-group-content]:flex [&_.cmdk-group-content]:flex-col [&_.cmdk-group-content]:flex-col overflow-hidden p-1 text-foreground',
+			this._userCls(),
+		);
+	}
+}

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-input-wrapper.component.ts.template

@@ -0,0 +1,27 @@
+import { Component, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-cmd-input-wrapper',
+	standalone: true,
+	template: '<ng-content/>',
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandInputWrapperComponent {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'flex space-x-2 items-center border-b border-border px-3 [&_hlm-icon]:h-5 [&_hlm-icon]:w-5',
+			this._userCls(),
+		);
+	}
+}

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-input.directive.ts.template

@@ -0,0 +1,26 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlm][brnCmdInput],[hlm][cmdkInput]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandInputDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'h-11 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+			this._userCls(),
+		);
+	}
+}

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item-icon.directive.ts.template

@@ -0,0 +1,30 @@
+import { computed, Directive, inject, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmCmdIcon]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandItemIconDirective {
+	private _menuIcon = inject(HlmIconComponent, { host: true, optional: true });
+
+	constructor() {
+		if (!this._menuIcon) return;
+		this._menuIcon.size = 'none';
+	}
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('mr-2 h-4 w-4', this._userCls());
+	}
+}

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item.directive.ts.template

@@ -0,0 +1,33 @@
+import { computed, Directive, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlm][brnCmdItem],[hlm][cmdkItem]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+		// This is needed after changes to the underlying CMDK library used for the BrnCommand primitive
+		// Ideally we would remove the dependency on this outside module. If you are open to that please
+		// reach out and if you are feeling super ambitious you can implement it yourself and open a PR!
+		'[style.display]': '"flex"',
+	},
+})
+export class HlmCommandItemDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'items-center relative cursor-default select-none rounded-sm px-2 py-1.5 text-sm outline-none\n' +
+				'aria-selected:bg-accent aria-selected:text-accent-foreground\n' +
+				'hover:bg-accent/50\n' +
+				'disabled:pointer-events-none disabled:opacity-50',
+			this._userCls(),
+		);
+	}
+}

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-list.directive.ts.template

@@ -0,0 +1,23 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'cmdk-list[hlm],brn-cmd-list[hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandListDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('max-h-[300px] overflow-y-auto overflow-x-hidden', this._userCls());
+	}
+}

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-loader.directive.ts.template

@@ -0,0 +1,7 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+	selector: '[hlmCmdLoader]',
+	standalone: true,
+})
+export class HlmCommandLoaderDirective {}

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-separator.directive.ts.template

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+	selector: 'cmdk-separator[hlm],brn-cmd-separator[hlm],[hlmCmdSeparator]',
+	standalone: true,
+	host: {
+		class: '[&_hr]:border-border [&[cmdk-hidden="true"]]:hidden',
+	},
+})
+export class HlmCommandSeparatorDirective {}

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-shortcut.component.ts.template

@@ -0,0 +1,26 @@
+import { Component, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-cmd-shortcut',
+	standalone: true,
+	template: `
+		<ng-content />
+	`,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandShortcutComponent {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('ml-auto font-light text-xs tracking-widest opacity-60', this._userCls());
+	}
+}

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command.directive.ts.template

@@ -0,0 +1,26 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'cmdk-command[hlm],brn-cmd[hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCommandDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'flex h-full w-full flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground',
+			this._userCls(),
+		);
+	}
+}

package/src/generators/ui/libs/ui-command-helm/generator.d.ts

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

package/src/generators/ui/libs/ui-command-helm/generator.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = void 0;
+const tslib_1 = require("tslib");
+const generator_1 = require("../../../base/generator");
+function generator(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield (0, generator_1.default)(tree, Object.assign(Object.assign({}, options), { primitiveName: 'command', internalName: 'ui-command-helm', publicName: 'ui-command-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/ui-command-helm/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-command-helm/generator.ts"],"names":[],"mappings":";;;;AACA,uDAAuD;AAGvD,SAAsB,SAAS,CAAC,IAAU,EAAE,OAA+B;;QAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,kCAC9B,OAAO,KACV,aAAa,EAAE,SAAS,EACxB,YAAY,EAAE,iBAAiB,EAC/B,UAAU,EAAE,iBAAiB,IAC5B,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

package/src/generators/ui/libs/ui-dialog-helm/files/index.ts.template

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+
+import { HlmDialogCloseDirective } from './lib/hlm-dialog-close.directive';
+import { HlmDialogContentDirective } from './lib/hlm-dialog-content.directive';
+import { HlmDialogDescriptionDirective } from './lib/hlm-dialog-description.directive';
+import { HlmDialogFooterComponent } from './lib/hlm-dialog-footer.component';
+import { HlmDialogHeaderComponent } from './lib/hlm-dialog-header.component';
+import { HlmDialogOverlayDirective } from './lib/hlm-dialog-overlay.directive';
+import { HlmDialogTitleDirective } from './lib/hlm-dialog-title.directive';
+
+export * from './lib/hlm-dialog-close.directive';
+export * from './lib/hlm-dialog-content.directive';
+export * from './lib/hlm-dialog-description.directive';
+export * from './lib/hlm-dialog-footer.component';
+export * from './lib/hlm-dialog-header.component';
+export * from './lib/hlm-dialog-overlay.directive';
+export * from './lib/hlm-dialog-title.directive';
+
+export const HlmDialogImports = [
+	HlmDialogCloseDirective,
+	HlmDialogContentDirective,
+	HlmDialogDescriptionDirective,
+	HlmDialogFooterComponent,
+	HlmDialogHeaderComponent,
+	HlmDialogOverlayDirective,
+	HlmDialogTitleDirective,
+] as const;
+
+@NgModule({
+	imports: [...HlmDialogImports],
+	exports: [...HlmDialogImports],
+})
+export class HlmDialogModule {}

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-close.directive.ts.template

@@ -0,0 +1,26 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmDialogClose],[brnDialogClose][hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmDialogCloseDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
+			this._userCls,
+		);
+	}
+}

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-content.directive.ts.template

@@ -0,0 +1,37 @@
+import { computed, Directive, effect, ElementRef, inject, Input, Renderer2, signal } from '@angular/core';
+import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmDialogContent],[brnDialogContent][hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmDialogContentDirective {
+	private _statusProvider = injectExposesStateProvider({ host: true });
+	public state = this._statusProvider.state ?? signal('closed').asReadonly();
+	private _renderer = inject(Renderer2);
+	private _element = inject(ElementRef);
+
+	constructor() {
+		effect(() => {
+			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
+		});
+	}
+
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'border-border grid w-full max-w-lg relative gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%]  data-[state=open]:slide-in-from-top-[2%] sm:rounded-lg md:w-full',
+			this._userCls(),
+		);
+	}
+}

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-description.directive.ts.template

@@ -0,0 +1,23 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmDialogDescription],[brnDialogDescription][hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmDialogDescriptionDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('text-sm text-muted-foreground', this._userCls());
+	}
+}

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-footer.component.ts.template

@@ -0,0 +1,26 @@
+import { Component, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-dialog-footer',
+	standalone: true,
+	template: `
+		<ng-content />
+	`,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmDialogFooterComponent {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._userCls());
+	}
+}

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-header.component.ts.template

@@ -0,0 +1,26 @@
+import { Component, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-dialog-header',
+	standalone: true,
+	template: `
+		<ng-content />
+	`,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmDialogHeaderComponent {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('flex flex-col space-y-1.5 text-center sm:text-left', this._userCls());
+	}
+}

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-overlay.directive.ts.template

@@ -0,0 +1,33 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmDialogOverlay],brn-dialog-overlay[hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmDialogOverlayDirective {
+	private _classSettable = injectCustomClassSettable({ optional: true, host: true });
+
+	constructor() {
+		this._classSettable?.setClassToCustomElement(this._computedClass());
+	}
+
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+		this._classSettable?.setClassToCustomElement(this._computedClass());
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+			this._userCls(),
+		);
+	}
+}

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-title.directive.ts.template

@@ -0,0 +1,23 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmDialogTitle],[brnDialogTitle][hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmDialogTitleDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('text-lg font-semibold leading-none tracking-tight', this._userCls());
+	}
+}

package/src/generators/ui/libs/ui-dialog-helm/generator.d.ts

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

package/src/generators/ui/libs/ui-dialog-helm/generator.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = void 0;
+const tslib_1 = require("tslib");
+const generator_1 = require("../../../base/generator");
+function generator(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield (0, generator_1.default)(tree, Object.assign(Object.assign({}, options), { primitiveName: 'dialog', internalName: 'ui-dialog-helm', publicName: 'ui-dialog-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/ui-dialog-helm/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-dialog-helm/generator.ts"],"names":[],"mappings":";;;;AACA,uDAAuD;AAGvD,SAAsB,SAAS,CAAC,IAAU,EAAE,OAA+B;;QAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,kCAC9B,OAAO,KACV,aAAa,EAAE,QAAQ,EACvB,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,gBAAgB,IAC3B,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

package/src/generators/ui/libs/ui-hover-card-helm/files/index.ts.template

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { HlmHoverCardContentDirective } from './lib/hlm-hover-card-content.directive';
+
+export { HlmHoverCardContentDirective } from './lib/hlm-hover-card-content.directive';
+
+export const HlmHoverCardImports = [HlmHoverCardContentDirective] as const;
+
+@NgModule({
+	imports: [...HlmHoverCardImports],
+	exports: [...HlmHoverCardImports],
+})
+export class HlmHoverCardModule {}

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

@@ -0,0 +1,44 @@
+import { computed, Directive, effect, ElementRef, inject, Input, Renderer2, signal } from '@angular/core';
+import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmHoverCardContent]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmHoverCardContentDirective {
+	private readonly _renderer = inject(Renderer2);
+	private readonly _element = inject(ElementRef);
+	private readonly _statusProvider = injectExposesStateProvider({ host: true });
+	private readonly _sideProvider = injectExposedSideProvider({ host: true });
+
+	private _inputs: ClassValue = '';
+
+	public readonly state = this._statusProvider.state ?? signal('closed').asReadonly();
+	public readonly side = this._sideProvider.side ?? signal('bottom').asReadonly();
+
+	constructor() {
+		effect(() => {
+			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
+			this._renderer.setAttribute(this._element.nativeElement, 'data-side', this.side());
+		});
+	}
+
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'z-50 w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			this._inputs,
+		);
+	}
+}

package/src/generators/ui/libs/ui-hover-card-helm/generator.d.ts

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