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

package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-label.ts.template

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuLabel],hlm-dropdown-menu-label',
+	exportAs: 'hlmDropdownMenuLabel',
 	host: {
 		'data-slot': 'dropdown-menu-label',
 		'[attr.data-inset]': 'inset() ? "" : null',

package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-radio-indicator.ts.template

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-dropdown-menu-radio-indicator',
+	exportAs: 'hlmDropdownMenuRadioIndicator',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideCheck })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-radio.ts.template

@@ -7,6 +7,7 @@ import { HlmDropdownMenuFocusOnHover } from './hlm-dropdown-menu-focus-on-hover'
 /** @internal. Use HlmDropdownMenuRadio instead. */
 @Directive({
 	selector: '[hlmDropdownMenuRadioCdk]',
+	exportAs: 'hlmDropdownMenuRadioCdk',
 	providers: [
 		{ provide: CdkMenuItemRadio, useExisting: HlmDropdownMenuRadioCdk },
 		{ provide: CdkMenuItemSelectable, useExisting: HlmDropdownMenuRadioCdk },
@@ -23,6 +24,7 @@ export class HlmDropdownMenuRadioCdk extends CdkMenuItemRadio {
 
 @Directive({
 	selector: '[hlmDropdownMenuRadio]',
+	exportAs: 'hlmDropdownMenuRadio',
 	hostDirectives: [
 		{
 			directive: HlmDropdownMenuRadioCdk,

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

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator',
+	exportAs: 'hlmDropdownMenuSeparator',
 	host: { 'data-slot': 'dropdown-menu-separator' },
 })
 export class HlmDropdownMenuSeparator {

package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-shortcut.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuShortcut],hlm-dropdown-menu-shortcut',
+	exportAs: 'hlmDropdownMenuShortcut',
 	host: { 'data-slot': 'dropdown-menu-shortcut' },
 })
 export class HlmDropdownMenuShortcut {

package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-sub-trigger.ts.template

@@ -12,6 +12,7 @@ import { injectHlmDropdownMenuConfig } from './hlm-dropdown-menu-token';
 
 @Directive({
 	selector: '[hlmDropdownMenuSubTrigger]',
+	exportAs: 'hlmDropdownMenuSubTrigger',
 	providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmDropdownMenuSubTrigger) }],
 	hostDirectives: [
 		{

package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-sub.ts.template

@@ -6,6 +6,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuSub],hlm-dropdown-menu-sub',
+	exportAs: 'hlmDropdownMenuSub',
 	hostDirectives: [CdkMenu],
 	host: {
 		'data-slot': 'dropdown-menu-sub',

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

@@ -11,6 +11,7 @@ import { injectHlmDropdownMenuConfig } from './hlm-dropdown-menu-token';
 
 @Directive({
 	selector: '[hlmDropdownMenuTrigger]',
+	exportAs: 'hlmDropdownMenuTrigger',
 	providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmDropdownMenuTrigger) }],
 	hostDirectives: [
 		{

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

@@ -7,6 +7,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenu],hlm-dropdown-menu',
+	exportAs: 'hlmDropdownMenu',
 	hostDirectives: [CdkMenu],
 	host: {
 		'data-slot': 'dropdown-menu',

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

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

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

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

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

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

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

@@ -21,6 +21,7 @@ export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;
 
 @Directive({
 	selector: '[hlmEmptyMedia],hlm-empty-media',
+	exportAs: 'hlmEmptyMedia',
 	host: {
 		'data-slot': 'empty-media',
 		'[attr.data-variant]': 'variant()',

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

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

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

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

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

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

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmFieldDescription],hlm-field-description',
+	exportAs: 'hlmFieldDescription',
 	host: {
 		'data-slot': 'field-description',
 		'[attr.id]': 'id()',

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

@@ -15,6 +15,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-field-error',
+	exportAs: 'hlmFieldError',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		role: 'alert',

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

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

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmFieldLabel],hlm-field-label',
+	exportAs: 'hlmFieldLabel',
 	hostDirectives: [HlmLabel],
 	host: { 'data-slot': 'field-label' },
 })

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

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'legend[hlmFieldLegend]',
+	exportAs: 'hlmFieldLegend',
 	host: {
 		'data-slot': 'field-legend',
 		'[attr.data-variant]': 'variant()',

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-field-separator',
+	exportAs: 'hlmFieldSeparator',
 	imports: [HlmSeparator],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { 'data-slot': 'field-separator' },

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

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'fieldset[hlmFieldSet]',
+	exportAs: 'hlmFieldSet',
 	host: { 'data-slot': 'field-set' },
 })
 export class HlmFieldSet {

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

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

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

@@ -28,6 +28,7 @@ export type FieldVariants = VariantProps<typeof fieldVariants>;
 
 @Directive({
 	selector: '[hlmField],hlm-field',
+	exportAs: 'hlmField',
 	hostDirectives: [{ directive: BrnField, inputs: ['data-invalid', 'forceInvalid'] }],
 	host: {
 		role: 'group',

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmHoverCardContent],hlm-hover-card-content',
+	exportAs: 'hlmHoverCardContent',
 	host: {
 		'data-slot': 'hover-card-content',
 	},

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

@@ -3,6 +3,7 @@ import { BrnHoverCardContent } from '@spartan-ng/brain/hover-card';
 
 @Directive({
 	selector: '[hlmHoverCardPortal],hlm-hover-card-portal',
+	exportAs: 'hlmHoverCardPortal',
 	hostDirectives: [BrnHoverCardContent],
 })
 export class HlmHoverCardPortal {}

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

@@ -3,6 +3,7 @@ import { BrnHoverCardTrigger } from '@spartan-ng/brain/hover-card';
 
 @Directive({
 	selector: '[hlmHoverCardTrigger]',
+	exportAs: 'hlmHoverCardTrigger',
 	hostDirectives: [
 		{
 			directive: BrnHoverCardTrigger,

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

@@ -3,6 +3,7 @@ import { BrnHoverCard } from '@spartan-ng/brain/hover-card';
 
 @Directive({
 	selector: '[hlmHoverCard],hlm-hover-card',
+	exportAs: 'hlmHoverCard',
 	hostDirectives: [BrnHoverCard],
 	host: {
 		'data-slot': 'hover-card',

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

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmInput]',
+	exportAs: 'hlmInput',
 	hostDirectives: [{ directive: BrnInput, inputs: ['id', 'forceInvalid'] }, BrnFieldControlDescribedBy],
 	host: { 'data-slot': 'input' },
 })

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

@@ -23,6 +23,7 @@ type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
 
 @Directive({
 	selector: '[hlmInputGroupAddon],hlm-input-group-addon',
+	exportAs: 'hlmInputGroupAddon',
 	host: {
 		role: 'group',
 		'data-slot': 'input-group-addon',

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

@@ -21,6 +21,7 @@ type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
 
 @Directive({
 	selector: 'button[hlmInputGroupButton]',
+	exportAs: 'hlmInputGroupButton',
 	providers: [
 		provideBrnButtonConfig({
 			variant: 'ghost',

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'input[hlmInputGroupInput]',
+	exportAs: 'hlmInputGroupInput',
 	hostDirectives: [HlmInput],
 	host: { 'data-slot': 'input-group-control' },
 })

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

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmInputGroupText],hlm-input-group-text',
+	exportAs: 'hlmInputGroupText',
 })
 export class HlmInputGroupText {
 	constructor() {

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'textarea[hlmInputGroupTextarea]',
+	exportAs: 'hlmInputGroupTextarea',
 	hostDirectives: [HlmTextarea],
 	host: { 'data-slot': 'input-group-control' },
 })

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

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

package/src/generators/ui/libs/input-otp/files/lib/hlm-input-otp-fake-caret.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-input-otp-fake-caret',
+	exportAs: 'hlmInputOtpFakeCaret',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<div class="spartan-input-otp-caret-line"></div>

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

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

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

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-input-otp-separator',
+	exportAs: 'hlmInputOtpSeparator',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideMinus })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/input-otp/files/lib/hlm-input-otp-slot.ts.template

@@ -6,6 +6,7 @@ import { HlmInputOtpFakeCaret } from './hlm-input-otp-fake-caret';
 
 @Component({
 	selector: 'hlm-input-otp-slot',
+	exportAs: 'hlmInputOtpSlot',
 	imports: [BrnInputOtpSlot, HlmInputOtpFakeCaret],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { 'data-slot': 'input-otp-slot' },

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

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'brn-input-otp[hlmInputOtp], brn-input-otp[hlm]',
+	exportAs: 'hlmInputOtp',
 	host: { 'data-slot': 'input-otp' },
 })
 export class HlmInputOtp {

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -22,6 +22,7 @@ export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;
 
 @Directive({
 	selector: '[hlmItemMedia],hlm-item-media',
+	exportAs: 'hlmItemMedia',
 	host: {
 		'data-slot': 'item-media',
 		'[attr.data-variant]': 'variant()',

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

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmItemSeparator],hlm-item-separator',
+	exportAs: 'hlmItemSeparator',
 	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
 	host: { 'data-slot': 'item-separator' },
 })

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

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

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

@@ -29,6 +29,7 @@ export type ItemVariants = VariantProps<typeof itemVariants>;
 
 @Directive({
 	selector: '[hlmItem],hlm-item',
+	exportAs: 'hlmItem',
 	host: {
 		'data-slot': 'item',
 		'[attr.data-variant]': 'variant()',

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

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

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

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

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmLabel]',
+	exportAs: 'hlmLabel',
 	hostDirectives: [{ directive: BrnLabel, inputs: ['id', 'for'] }],
 	host: { 'data-slot': 'label' },
 })

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

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

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

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmMarkerIcon],hlm-marker-icon',
+	exportAs: 'hlmMarkerIcon',
 	host: {
 		'data-slot': 'marker-icon',
 		'aria-hidden': 'true',

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

@@ -22,6 +22,7 @@ export type MarkerVariants = VariantProps<typeof markerVariants>;
 
 @Directive({
 	selector: '[hlmMarker],hlm-marker',
+	exportAs: 'hlmMarker',
 	host: {
 		'data-slot': 'marker',
 		'[attr.data-variant]': 'variant()',

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

@@ -13,6 +13,7 @@ import { injectHlmMenubarConfig } from './hlm-menubar-token';
 
 @Directive({
 	selector: 'button[hlmMenubarTrigger]',
+	exportAs: 'hlmMenubarTrigger',
 	providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmMenubarTrigger) }],
 	hostDirectives: [
 		{

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmMenubar],hlm-menubar',
+	exportAs: 'hlmMenubar',
 	hostDirectives: [CdkMenuBar],
 	host: {
 		'data-slot': 'menubar',

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

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

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

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

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

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

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

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

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

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

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

@@ -5,6 +5,7 @@ export type MessageAlign = 'start' | 'end';
 
 @Directive({
 	selector: '[hlmMessage],hlm-message',
+	exportAs: 'hlmMessage',
 	host: {
 		'data-slot': 'message',
 		'[attr.data-align]': 'align()',

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

@@ -7,6 +7,7 @@ import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
 @Component({
 	// eslint-disable-next-line @angular-eslint/component-selector -- attribute selector on native button
 	selector: 'button[hlmMessageScrollerButton]',
+	exportAs: 'hlmMessageScrollerButton',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideArrowDown }), provideBrnButtonConfig({ variant: 'secondary', size: 'icon-sm' })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmMessageScrollerContent],hlm-message-scroller-content',
+	exportAs: 'hlmMessageScrollerContent',
 	hostDirectives: [
 		{
 			directive: BrnMessageScrollerContent,