@spartan-ng/cli 1.2.0-beta.1 → 1.2.0-beta.3

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmBubbleContent],hlm-bubble-content',
+	host: { 'data-slot': 'bubble-content' },
+})
+export class HlmBubbleContent {
+	constructor() {
+		classes(
+			() =>
+				'spartan-bubble-content [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-ring/50 w-fit max-w-full min-w-0 overflow-hidden border border-transparent wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-start [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:ring-3',
+		);
+	}
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmBubbleGroup],hlm-bubble-group',
+	host: { 'data-slot': 'bubble-group' },
+})
+export class HlmBubbleGroup {
+	constructor() {
+		classes(() => 'spartan-bubble-group flex min-w-0 flex-col');
+	}
+}

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

@@ -0,0 +1,43 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const bubbleReactionsVariants = cva(
+	'spartan-bubble-reactions absolute z-10 flex w-fit shrink-0 items-center justify-center has-[button]:p-0',
+	{
+		variants: {
+			side: {
+				top: 'top-0 -translate-y-3/4',
+				bottom: 'bottom-0 translate-y-3/4',
+			},
+			align: {
+				start: 'start-3',
+				end: 'end-3',
+			},
+		},
+		defaultVariants: {
+			side: 'bottom',
+			align: 'end',
+		},
+	},
+);
+
+export type BubbleReactionsVariants = VariantProps<typeof bubbleReactionsVariants>;
+
+@Directive({
+	selector: '[hlmBubbleReactions],hlm-bubble-reactions',
+	host: {
+		'data-slot': 'bubble-reactions',
+		'[attr.data-align]': 'align()',
+		'[attr.data-side]': 'side()',
+		'[attr.align]': 'null',
+	},
+})
+export class HlmBubbleReactions {
+	public readonly side = input<BubbleReactionsVariants['side']>('bottom');
+	public readonly align = input<BubbleReactionsVariants['align']>('end');
+
+	constructor() {
+		classes(() => bubbleReactionsVariants({ side: this.side(), align: this.align() }));
+	}
+}

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

@@ -0,0 +1,46 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const bubbleVariants = cva(
+	'spartan-bubble group/bubble relative flex w-fit min-w-0 flex-col group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',
+	{
+		variants: {
+			variant: {
+				default: 'spartan-bubble-variant-default',
+				secondary: 'spartan-bubble-variant-secondary',
+				muted: 'spartan-bubble-variant-muted',
+				tinted: 'spartan-bubble-variant-tinted',
+				outline: 'spartan-bubble-variant-outline',
+				ghost: 'spartan-bubble-variant-ghost',
+				destructive: 'spartan-bubble-variant-destructive',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export type BubbleVariants = VariantProps<typeof bubbleVariants>;
+export type BubbleAlign = 'start' | 'end';
+
+@Directive({
+	selector: '[hlmBubble],hlm-bubble',
+	host: {
+		'data-slot': 'bubble',
+		'[attr.data-variant]': 'variant()',
+		'[attr.data-align]': 'align()',
+		// Prevent the legacy HTML `align` attribute (from `align="end"` bindings) from
+		// forcing text-align on the bubble content.
+		'[attr.align]': 'null',
+	},
+})
+export class HlmBubble {
+	public readonly variant = input<BubbleVariants['variant']>('default');
+	public readonly align = input<BubbleAlign>('start');
+
+	constructor() {
+		classes(() => bubbleVariants({ variant: this.variant() }));
+	}
+}

package/src/generators/ui/libs/bubble/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/bubble/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: 'bubble' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/bubble/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/bubble/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,QAAQ,EAAE,CAAC,CAAC;AACrE,CAAC"}

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-multi-input.ts.template

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCalendar, lucideX } from '@ng-icons/lucide';
 import {
@@ -6,6 +6,7 @@ import {
 	type BrnDatePickerTriggerBase,
 	provideBrnDatePickerTrigger,
 } from '@spartan-ng/brain/date-picker';
+import { BrnFieldControl } from '@spartan-ng/brain/field';
 import { HlmInputGroup, HlmInputGroupImports } from '<%- importAlias %>/input-group';
 import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
 
@@ -24,6 +25,11 @@ import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
 			[placeholder]="placeholder()"
 			[disabled]="_disabled()"
 			[forceInvalid]="forceInvalid()"
+			[attr.aria-invalid]="_ariaInvalid()"
+			[attr.data-invalid]="_ariaInvalid()"
+			[attr.data-touched]="_touched?.() ? 'true' : null"
+			[attr.data-dirty]="_dirty?.() ? 'true' : null"
+			[attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
 			(click)="_handleClick()"
 			(keydown.arrowDown)="_open()"
 			(keydown.enter)="_handleEnter($event)"
@@ -58,6 +64,14 @@ import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
 })
 export class HlmDateMultiInput<T> extends BrnDateInput<T[]> implements BrnDatePickerTriggerBase {
 	private readonly _config = injectHlmDatePickerMultiConfig<T>();
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+	private readonly _invalid = this._fieldControl?.invalid;
+	protected readonly _spartanInvalid = computed(() => this.forceInvalid() || this._fieldControl?.spartanInvalid());
+	protected readonly _dirty = this._fieldControl?.dirty;
+	protected readonly _touched = this._fieldControl?.touched;
+
+	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
 	/**
 	 * Parses input text into dates. Return `null` for invalid input - the
 	 * picker's dates are cleared while the text is preserved so the user can

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-picker-input.ts.template

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCalendar, lucideX } from '@ng-icons/lucide';
 import {
@@ -6,6 +6,7 @@ import {
 	type BrnDatePickerTriggerBase,
 	provideBrnDatePickerTrigger,
 } from '@spartan-ng/brain/date-picker';
+import { BrnFieldControl } from '@spartan-ng/brain/field';
 import { HlmInputGroup, HlmInputGroupImports } from '<%- importAlias %>/input-group';
 import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
 
@@ -24,6 +25,11 @@ import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
 			[placeholder]="placeholder()"
 			[disabled]="_disabled()"
 			[forceInvalid]="forceInvalid()"
+			[attr.aria-invalid]="_ariaInvalid()"
+			[attr.data-invalid]="_ariaInvalid()"
+			[attr.data-touched]="_touched?.() ? 'true' : null"
+			[attr.data-dirty]="_dirty?.() ? 'true' : null"
+			[attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
 			(click)="_handleClick()"
 			(keydown.arrowDown)="_open()"
 			(keydown.enter)="_handleEnter($event)"
@@ -58,6 +64,14 @@ import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
 })
 export class HlmDatePickerInput<T> extends BrnDateInput<T> implements BrnDatePickerTriggerBase {
 	private readonly _config = injectHlmDatePickerConfig<T>();
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+	private readonly _invalid = this._fieldControl?.invalid;
+	protected readonly _spartanInvalid = computed(() => this.forceInvalid() || this._fieldControl?.spartanInvalid());
+	protected readonly _dirty = this._fieldControl?.dirty;
+	protected readonly _touched = this._fieldControl?.touched;
+
+	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
 
 	/**
 	 * Parses input text into a date value. Return `null` for invalid

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

@@ -50,8 +50,8 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 					class="rounded-none border-0"
 					[date]="_mutableDate()"
 					[captionLayout]="captionLayout()"
-					[min]="min()"
-					[max]="max()"
+					[min]="minDate()"
+					[max]="maxDate()"
 					[minSelection]="minSelection()"
 					[maxSelection]="maxSelection()"
 					[disabled]="_disabled()"
@@ -75,10 +75,10 @@ export class HlmDatePickerMulti<T> implements BrnDatePickerBase<T[]>, ControlVal
 	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
 
 	/** The minimum date that can be selected.*/
-	public readonly min = input<T>();
+	public readonly minDate = input<T>();
 
 	/** The maximum date that can be selected. */
-	public readonly max = input<T>();
+	public readonly maxDate = input<T>();
 
 	/** The minimum selectable dates.  */
 	public readonly minSelection = input<number, NumberInput>(undefined, {

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

@@ -46,8 +46,8 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 					[captionLayout]="captionLayout()"
 					[date]="_mutableDate()"
 					[defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
-					[min]="min()"
-					[max]="max()"
+					[min]="minDate()"
+					[max]="maxDate()"
 					[disabled]="_disabled()"
 					(dateChange)="_handleChange($event)"
 				/>
@@ -68,11 +68,11 @@ export class HlmDatePicker<T> implements BrnDatePickerBase<T>, ControlValueAcces
 	/** Show dropdowns to navigate between months or years. */
 	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
 
-	/** The minimum date that can be selected.*/
-	public readonly min = input<T>();
+	/** The minimum date that can be selected. */
+	public readonly minDate = input<T>();
 
 	/** The maximum date that can be selected. */
-	public readonly max = input<T>();
+	public readonly maxDate = input<T>();
 
 	/** Determine if the date picker is disabled. */
 	public readonly disabled = input<boolean, BooleanInput>(false, {

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-range-input.ts.template

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCalendar, lucideX } from '@ng-icons/lucide';
 import {
@@ -6,6 +6,7 @@ import {
 	type BrnDatePickerTriggerBase,
 	provideBrnDatePickerTrigger,
 } from '@spartan-ng/brain/date-picker';
+import { BrnFieldControl } from '@spartan-ng/brain/field';
 import { HlmInputGroup, HlmInputGroupImports } from '<%- importAlias %>/input-group';
 import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
 
@@ -24,6 +25,11 @@ import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
 			[placeholder]="placeholder()"
 			[disabled]="_disabled()"
 			[forceInvalid]="forceInvalid()"
+			[attr.aria-invalid]="_ariaInvalid()"
+			[attr.data-invalid]="_ariaInvalid()"
+			[attr.data-touched]="_touched?.() ? 'true' : null"
+			[attr.data-dirty]="_dirty?.() ? 'true' : null"
+			[attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
 			(click)="_handleClick()"
 			(keydown.arrowDown)="_open()"
 			(keydown.enter)="_handleEnter($event)"
@@ -58,6 +64,14 @@ import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
 })
 export class HlmDateRangeInput<T> extends BrnDateInput<[T, T]> implements BrnDatePickerTriggerBase {
 	private readonly _config = injectHlmDateRangePickerConfig<T>();
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+	private readonly _invalid = this._fieldControl?.invalid;
+	protected readonly _spartanInvalid = computed(() => this.forceInvalid() || this._fieldControl?.spartanInvalid());
+	protected readonly _dirty = this._fieldControl?.dirty;
+	protected readonly _touched = this._fieldControl?.touched;
+
+	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
 
 	/**
 	 * Parses input text into a date range. Return `null` for invalid

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

@@ -51,8 +51,8 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 					[startDate]="_start()"
 					[captionLayout]="captionLayout()"
 					[endDate]="_end()"
-					[min]="min()"
-					[max]="max()"
+					[min]="minDate()"
+					[max]="maxDate()"
 					[disabled]="_disabled()"
 					(startDateChange)="_handleStartDayChange($event)"
 					(endDateChange)="_handleEndDateChange($event)"
@@ -75,10 +75,10 @@ export class HlmDateRangePicker<T> implements BrnDatePickerBase<[T, T]>, Control
 	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
 
 	/** The minimum date that can be selected.*/
-	public readonly min = input<T>();
+	public readonly minDate = input<T>();
 
 	/** The maximum date that can be selected. */
-	public readonly max = input<T>();
+	public readonly maxDate = input<T>();
 
 	/** Determine if the date picker is disabled. */
 	public readonly disabled = input<boolean, BooleanInput>(false, {

package/src/generators/ui/libs/date-picker/files/lib/hlm-month-year-input.ts.template

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCalendar, lucideX } from '@ng-icons/lucide';
 import {
@@ -6,6 +6,7 @@ import {
 	type BrnDatePickerTriggerBase,
 	provideBrnDatePickerTrigger,
 } from '@spartan-ng/brain/date-picker';
+import { BrnFieldControl } from '@spartan-ng/brain/field';
 import { HlmInputGroup, HlmInputGroupImports } from '<%- importAlias %>/input-group';
 import { injectHlmMonthYearPickerConfig } from './hlm-month-year-picker.token';
 
@@ -24,6 +25,11 @@ import { injectHlmMonthYearPickerConfig } from './hlm-month-year-picker.token';
 			[placeholder]="placeholder()"
 			[disabled]="_disabled()"
 			[forceInvalid]="forceInvalid()"
+			[attr.aria-invalid]="_ariaInvalid()"
+			[attr.data-invalid]="_ariaInvalid()"
+			[attr.data-touched]="_touched?.() ? 'true' : null"
+			[attr.data-dirty]="_dirty?.() ? 'true' : null"
+			[attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
 			(click)="_handleClick()"
 			(keydown.arrowDown)="_open()"
 			(keydown.enter)="_handleEnter($event)"
@@ -58,6 +64,14 @@ import { injectHlmMonthYearPickerConfig } from './hlm-month-year-picker.token';
 })
 export class HlmMonthYearInput<T> extends BrnDateInput<T> implements BrnDatePickerTriggerBase {
 	private readonly _config = injectHlmMonthYearPickerConfig<T>();
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+	private readonly _invalid = this._fieldControl?.invalid;
+	protected readonly _spartanInvalid = computed(() => this.forceInvalid() || this._fieldControl?.spartanInvalid());
+	protected readonly _dirty = this._fieldControl?.dirty;
+	protected readonly _touched = this._fieldControl?.touched;
+
+	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
 
 	/**
 	 * Parses input text into a date value. Return `null` for invalid

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

@@ -48,8 +48,8 @@ export const HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR = {
 					class="rounded-none border-0"
 					[date]="_mutableDate()"
 					[defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
-					[min]="min()"
-					[max]="max()"
+					[min]="minDate()"
+					[max]="maxDate()"
 					[disabled]="_disabled()"
 					(dateChange)="_handleChange($event)"
 				/>
@@ -68,10 +68,10 @@ export class HlmMonthYearPicker<T> implements BrnDatePickerBase<T>, ControlValue
 	public readonly align = input<BrnPopoverAlign>('center');
 
 	/** The minimum date that can be selected.*/
-	public readonly min = input<T>();
+	public readonly minDate = input<T>();
 
 	/** The maximum date that can be selected. */
-	public readonly max = input<T>();
+	public readonly maxDate = input<T>();
 
 	/** Determine if the date picker is disabled. */
 	public readonly disabled = input<boolean, BooleanInput>(false, {

package/src/generators/ui/libs/marker/files/index.ts.template

@@ -0,0 +1,9 @@
+import { HlmMarker } from './lib/hlm-marker';
+import { HlmMarkerContent } from './lib/hlm-marker-content';
+import { HlmMarkerIcon } from './lib/hlm-marker-icon';
+
+export * from './lib/hlm-marker';
+export * from './lib/hlm-marker-content';
+export * from './lib/hlm-marker-icon';
+
+export const HlmMarkerImports = [HlmMarker, HlmMarkerContent, HlmMarkerIcon] as const;

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMarkerContent],hlm-marker-content',
+	host: { 'data-slot': 'marker-content' },
+})
+export class HlmMarkerContent {
+	constructor() {
+		classes(
+			() =>
+				'spartan-marker-content *:[a]:hover:text-foreground wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3',
+		);
+	}
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMarkerIcon],hlm-marker-icon',
+	host: {
+		'data-slot': 'marker-icon',
+		'aria-hidden': 'true',
+	},
+})
+export class HlmMarkerIcon {
+	constructor() {
+		classes(() => "spartan-marker-icon [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)]");
+	}
+}

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

@@ -0,0 +1,36 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const markerVariants = cva(
+	"spartan-marker group/marker [a]:hover:text-foreground relative flex min-h-4 w-full items-center text-start text-sm [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] [a]:underline [a]:underline-offset-3",
+	{
+		variants: {
+			variant: {
+				default: 'spartan-marker-variant-default',
+				separator: 'spartan-marker-variant-separator',
+				border: 'spartan-marker-variant-border',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export type MarkerVariants = VariantProps<typeof markerVariants>;
+
+@Directive({
+	selector: '[hlmMarker],hlm-marker',
+	host: {
+		'data-slot': 'marker',
+		'[attr.data-variant]': 'variant()',
+	},
+})
+export class HlmMarker {
+	public readonly variant = input<MarkerVariants['variant']>('default');
+
+	constructor() {
+		classes(() => markerVariants({ variant: this.variant() }));
+	}
+}

package/src/generators/ui/libs/marker/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/marker/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: 'marker' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/marker/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/marker/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,QAAQ,EAAE,CAAC,CAAC;AACrE,CAAC"}

package/src/generators/ui/libs/message/files/index.ts.template

@@ -0,0 +1,22 @@
+import { HlmMessage } from './lib/hlm-message';
+import { HlmMessageAvatar } from './lib/hlm-message-avatar';
+import { HlmMessageContent } from './lib/hlm-message-content';
+import { HlmMessageFooter } from './lib/hlm-message-footer';
+import { HlmMessageGroup } from './lib/hlm-message-group';
+import { HlmMessageHeader } from './lib/hlm-message-header';
+
+export * from './lib/hlm-message';
+export * from './lib/hlm-message-avatar';
+export * from './lib/hlm-message-content';
+export * from './lib/hlm-message-footer';
+export * from './lib/hlm-message-group';
+export * from './lib/hlm-message-header';
+
+export const HlmMessageImports = [
+	HlmMessage,
+	HlmMessageAvatar,
+	HlmMessageContent,
+	HlmMessageFooter,
+	HlmMessageGroup,
+	HlmMessageHeader,
+] as const;

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageAvatar],hlm-message-avatar',
+	host: { 'data-slot': 'message-avatar' },
+})
+export class HlmMessageAvatar {
+	constructor() {
+		classes(
+			() =>
+				'spartan-message-avatar flex w-fit shrink-0 items-center justify-center self-end overflow-hidden group-has-data-[slot=message-footer]/message:-translate-y-8',
+		);
+	}
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageContent],hlm-message-content',
+	host: { 'data-slot': 'message-content' },
+})
+export class HlmMessageContent {
+	constructor() {
+		classes(
+			() =>
+				'spartan-message-content flex w-full min-w-0 flex-col wrap-break-word group-data-[align=end]/message:*:data-slot:self-end',
+		);
+	}
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageFooter],hlm-message-footer',
+	host: { 'data-slot': 'message-footer' },
+})
+export class HlmMessageFooter {
+	constructor() {
+		classes(
+			() =>
+				'spartan-message-footer flex max-w-full min-w-0 items-center group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end',
+		);
+	}
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageGroup],hlm-message-group',
+	host: { 'data-slot': 'message-group' },
+})
+export class HlmMessageGroup {
+	constructor() {
+		classes(() => 'spartan-message-group flex min-w-0 flex-col');
+	}
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageHeader],hlm-message-header',
+	host: { 'data-slot': 'message-header' },
+})
+export class HlmMessageHeader {
+	constructor() {
+		classes(
+			() => 'spartan-message-header flex max-w-full min-w-0 items-center group-has-data-[variant=ghost]/message:px-0',
+		);
+	}
+}

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

@@ -0,0 +1,21 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+export type MessageAlign = 'start' | 'end';
+
+@Directive({
+	selector: '[hlmMessage],hlm-message',
+	host: {
+		'data-slot': 'message',
+		'[attr.data-align]': 'align()',
+		// Prevent the legacy HTML `align` attribute from forcing text-align.
+		'[attr.align]': 'null',
+	},
+})
+export class HlmMessage {
+	public readonly align = input<MessageAlign>('start');
+
+	constructor() {
+		classes(() => 'spartan-message group/message relative flex w-full min-w-0 data-[align=end]:flex-row-reverse');
+	}
+}

package/src/generators/ui/libs/message/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/message/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: 'message' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/message/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/message/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,SAAS,EAAE,CAAC,CAAC;AACtE,CAAC"}