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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'input[hlmComboboxChipInput]',
+	exportAs: 'hlmComboboxChipInput',
 	hostDirectives: [{ directive: BrnComboboxChipInput, inputs: ['id', 'aria-invalid'] }],
 	host: { 'data-slot': 'combobox-chip-input' },
 })

package/src/generators/ui/libs/combobox/files/lib/hlm-combobox-chip-remove.ts.template

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'button[hlmComboboxChipRemove]',
+	exportAs: 'hlmComboboxChipRemove',
 	hostDirectives: [BrnComboboxChipRemove],
 	host: { 'data-slot': 'combobox-chip-remove' },
 })

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

@@ -8,6 +8,7 @@ import { HlmComboboxChipRemove } from './hlm-combobox-chip-remove';
 
 @Component({
 	selector: 'hlm-combobox-chip',
+	exportAs: 'hlmComboboxChip',
 	imports: [NgIcon, HlmComboboxChipRemove],
 	providers: [provideIcons({ lucideX })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmComboboxChips],hlm-combobox-chips',
+	exportAs: 'hlmComboboxChips',
 	hostDirectives: [BrnComboboxAnchor, BrnComboboxPopoverTrigger],
 	host: {
 		'data-slot': 'combobox-chips',

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

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

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

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

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

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

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

@@ -8,6 +8,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-combobox-input',
+	exportAs: 'hlmComboboxInput',
 	imports: [HlmInputGroupImports, NgIcon, BrnComboboxImports, BrnComboboxPopoverTrigger],
 	providers: [provideIcons({ lucideChevronDown, lucideX })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

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

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

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

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

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

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

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmComboboxMultiple],hlm-combobox-multiple',
+	exportAs: 'hlmComboboxMultiple',
 	providers: [
 		provideBrnPopoverConfig({
 			align: 'start',

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

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

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

@@ -3,6 +3,7 @@ import { BrnPopoverContent } from '@spartan-ng/brain/popover';
 
 @Directive({
 	selector: '[hlmComboboxPortal]',
+	exportAs: 'hlmComboboxPortal',
 	hostDirectives: [{ directive: BrnPopoverContent, inputs: ['context', 'class'] }],
 })
 export class HlmComboboxPortal {}

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmComboboxSeparator]',
+	exportAs: 'hlmComboboxSeparator',
 	hostDirectives: [{ directive: BrnComboboxSeparator, inputs: ['orientation'] }],
 	host: { 'data-slot': 'combobox-separator' },
 })

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

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

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

@@ -10,6 +10,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-combobox-trigger',
+	exportAs: 'hlmComboboxTrigger',
 	imports: [
 		NgIcon,
 		HlmButton,

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

@@ -1,5 +1,9 @@
 import { Directive } from '@angular/core';
 import { BrnComboboxValueTemplate } from '@spartan-ng/brain/combobox';
 
-@Directive({ selector: '[hlmComboboxValueTemplate]', hostDirectives: [BrnComboboxValueTemplate] })
+@Directive({
+	selector: '[hlmComboboxValueTemplate]',
+	exportAs: 'hlmComboboxValueTemplate',
+	hostDirectives: [BrnComboboxValueTemplate],
+})
 export class HlmComboboxValueTemplate {}

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmComboboxValue],hlm-combobox-value',
+	exportAs: 'hlmComboboxValue',
 	hostDirectives: [{ directive: BrnComboboxValue, inputs: ['placeholder'] }],
 	host: { 'data-slot': 'combobox-value' },
 })

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

@@ -1,5 +1,5 @@
 import { Directive } from '@angular/core';
 import { BrnComboboxValues } from '@spartan-ng/brain/combobox';
 
-@Directive({ selector: '[hlmComboboxValues]', hostDirectives: [BrnComboboxValues] })
+@Directive({ selector: '[hlmComboboxValues]', exportAs: 'hlmComboboxValues', hostDirectives: [BrnComboboxValues] })
 export class HlmComboboxValues {}

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

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCombobox],hlm-combobox',
+	exportAs: 'hlmCombobox',
 	providers: [
 		provideBrnPopoverConfig({
 			align: 'start',

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

@@ -15,6 +15,7 @@ import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-command-dialog',
+	exportAs: 'hlmCommandDialog',
 	imports: [HlmDialogImports],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `

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

@@ -3,6 +3,7 @@ import { BrnCommandEmpty } from '@spartan-ng/brain/command';
 
 @Directive({
 	selector: '[hlmCommandEmptyState]',
+	exportAs: 'hlmCommandEmptyState',
 	hostDirectives: [BrnCommandEmpty],
 })
 export class HlmCommandEmptyState {}

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

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

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

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

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandGroup],hlm-command-group',
+	exportAs: 'hlmCommandGroup',
 	hostDirectives: [
 		{
 			directive: BrnCommandGroup,

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

@@ -7,6 +7,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-command-input',
+	exportAs: 'hlmCommandInput',
 	imports: [HlmInputGroupImports, NgIcon, BrnCommandInput],
 	providers: [provideIcons({ lucideSearch })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'button[hlmCommandItem],button[hlm-command-item]',
+	exportAs: 'hlmCommandItem',
 	hostDirectives: [
 		{
 			directive: BrnCommandItem,

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandList],hlm-command-list',
+	exportAs: 'hlmCommandList',
 	hostDirectives: [
 		{
 			directive: BrnCommandList,

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

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

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

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

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommand],hlm-command',
+	exportAs: 'hlmCommand',
 	hostDirectives: [
 		{
 			directive: BrnCommand,

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

@@ -7,6 +7,7 @@ import { injectHlmContextMenuConfig } from './hlm-context-menu-token';
 
 @Directive({
 	selector: '[hlmContextMenuTrigger]',
+	exportAs: 'hlmContextMenuTrigger',
 	providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmContextMenuTrigger) }],
 	hostDirectives: [
 		{

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

@@ -12,6 +12,7 @@ import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
 
 @Component({
 	selector: 'hlm-date-multi-input',
+	exportAs: 'hlmDateMultiInput',
 	imports: [HlmInputGroupImports, NgIcon],
 	providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateMultiInput)],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -2,7 +2,7 @@ import { Directive, effect, ElementRef, inject, input, linkedSignal } from '@ang
 import { BrnOverlay } from '@spartan-ng/brain/overlay';
 import { BrnPopover } from '@spartan-ng/brain/popover';
 
-@Directive({ selector: '[hlmDatePickerAnchor]' })
+@Directive({ selector: '[hlmDatePickerAnchor]', exportAs: 'hlmDatePickerAnchor' })
 export class HlmDatePickerAnchor {
 	private readonly _host = inject(ElementRef, { host: true });
 	private readonly _brnOverlay = inject(BrnOverlay, { optional: true });

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

@@ -12,6 +12,7 @@ import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
 
 @Component({
 	selector: 'hlm-date-picker-input',
+	exportAs: 'hlmDatePickerInput',
 	imports: [HlmInputGroupImports, NgIcon],
 	providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDatePickerInput)],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -31,6 +31,7 @@ export const HLM_DATE_PICKER_MULTI_VALUE_ACCESSOR = {
 
 @Component({
 	selector: 'hlm-date-picker-multi',
+	exportAs: 'hlmDatePickerMulti',
 	imports: [HlmPopoverImports, HlmCalendarMulti],
 	providers: [
 		HLM_DATE_PICKER_MULTI_VALUE_ACCESSOR,

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

@@ -15,6 +15,7 @@ import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-date-picker-trigger',
+	exportAs: 'hlmDatePickerTrigger',
 	imports: [HlmButtonImports, HlmPopoverTrigger, NgIcon, BrnFieldControlDescribedBy],
 	providers: [provideIcons({ lucideChevronDown }), provideBrnDatePickerTrigger(HlmDatePickerTrigger)],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -30,6 +30,7 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 
 @Component({
 	selector: 'hlm-date-picker',
+	exportAs: 'hlmDatePicker',
 	imports: [HlmPopoverImports, HlmCalendar],
 	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideBrnDatePicker(HlmDatePicker), provideBrnLabelable(HlmDatePicker)],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -12,6 +12,7 @@ import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
 
 @Component({
 	selector: 'hlm-date-range-input',
+	exportAs: 'hlmDateRangeInput',
 	imports: [HlmInputGroupImports, NgIcon],
 	providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateRangeInput)],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -31,6 +31,7 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 
 @Component({
 	selector: 'hlm-date-range-picker',
+	exportAs: 'hlmDateRangePicker',
 	imports: [HlmPopoverImports, HlmCalendarRange],
 	providers: [
 		HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR,

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

@@ -12,6 +12,7 @@ import { injectHlmMonthYearPickerConfig } from './hlm-month-year-picker.token';
 
 @Component({
 	selector: 'hlm-month-year-input',
+	exportAs: 'hlmMonthYearInput',
 	imports: [HlmInputGroupImports, NgIcon],
 	providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmMonthYearInput)],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -29,6 +29,7 @@ export const HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR = {
 };
 @Component({
 	selector: 'hlm-month-year-picker',
+	exportAs: 'hlmMonthYearPicker',
 	imports: [HlmPopoverImports, HlmCalendarImports],
 	providers: [
 		HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR,

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

@@ -3,6 +3,7 @@ import { BrnDialogClose } from '@spartan-ng/brain/dialog';
 
 @Directive({
 	selector: 'button[hlmDialogClose]',
+	exportAs: 'hlmDialogClose',
 	hostDirectives: [BrnDialogClose],
 	host: { 'data-slot': 'dialog-close' },
 })

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

@@ -19,6 +19,7 @@ type HlmDialogContentContext = {
 
 @Component({
 	selector: 'hlm-dialog-content',
+	exportAs: 'hlmDialogContent',
 	imports: [NgComponentOutlet, HlmButton, HlmDialogClose, NgIcon],
 	providers: [provideIcons({ lucideX })],
 	changeDetection: ChangeDetectionStrategy.OnPush,