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

package/src/generators/ui/libs/select/files/lib/hlm-select-scroll-up.ts.template

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

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

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

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

@@ -9,6 +9,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-select-trigger',
+	exportAs: 'hlmSelectTrigger',
 	imports: [NgIcon, BrnSelectTrigger, BrnFieldControlDescribedBy],
 	providers: [provideIcons({ lucideChevronDown })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -1,5 +1,9 @@
 import { Directive } from '@angular/core';
 import { BrnSelectValueTemplate } from '@spartan-ng/brain/select';
 
-@Directive({ selector: '[hlmSelectValueTemplate]', hostDirectives: [BrnSelectValueTemplate] })
+@Directive({
+	selector: '[hlmSelectValueTemplate]',
+	exportAs: 'hlmSelectValueTemplate',
+	hostDirectives: [BrnSelectValueTemplate],
+})
 export class HlmSelectValueTemplate {}

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSelectValue],hlm-select-value',
+	exportAs: 'hlmSelectValue',
 	hostDirectives: [{ directive: BrnSelectValue, inputs: ['placeholder'] }],
 	host: { '[attr.data-slot]': '!_hidden() ? "select-value" : null' },
 })

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

@@ -1,7 +1,7 @@
 import { Directive } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
 
-@Directive({ selector: '[hlmSelectValuesContent],hlm-select-values-content' })
+@Directive({ selector: '[hlmSelectValuesContent],hlm-select-values-content', exportAs: 'hlmSelectValuesContent' })
 export class HlmSelectValuesContent {
 	constructor() {
 		classes(() => 'spartan-select-values-content flex');

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

@@ -1,5 +1,5 @@
 import { Directive } from '@angular/core';
 import { BrnSelectValues } from '@spartan-ng/brain/select';
 
-@Directive({ selector: '[hlmSelectValues]', hostDirectives: [BrnSelectValues] })
+@Directive({ selector: '[hlmSelectValues]', exportAs: 'hlmSelectValues', hostDirectives: [BrnSelectValues] })
 export class HlmSelectValues {}

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

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

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

@@ -7,6 +7,7 @@ export const hlmSeparatorClass =
 
 @Directive({
 	selector: '[hlmSeparator],hlm-separator',
+	exportAs: 'hlmSeparator',
 	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
 	host: {
 		'data-slot': 'separator',

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

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

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

@@ -20,6 +20,7 @@ import { HlmSheetClose } from './hlm-sheet-close';
 
 @Component({
 	selector: 'hlm-sheet-content',
+	exportAs: 'hlmSheetContent',
 	imports: [HlmButton, HlmSheetClose, NgIcon],
 	providers: [provideIcons({ lucideX })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

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

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

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

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

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

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

@@ -6,6 +6,7 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmSheetOverlay],hlm-sheet-overlay',
+	exportAs: 'hlmSheetOverlay',
 	hostDirectives: [BrnSheetOverlay],
 })
 export class HlmSheetOverlay {

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

@@ -3,6 +3,7 @@ import { BrnSheetContent } from '@spartan-ng/brain/sheet';
 
 @Directive({
 	selector: '[hlmSheetPortal]',
+	exportAs: 'hlmSheetPortal',
 	hostDirectives: [{ directive: BrnSheetContent, inputs: ['context', 'class'] }],
 })
 export class HlmSheetPortal {}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'main[hlmSidebarInset]',
+	exportAs: 'hlmSidebarInset',
 	host: { 'data-slot': 'sidebar-inset' },
 })
 export class HlmSidebarInset {

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'button[hlmSidebarMenuAction]',
+	exportAs: 'hlmSidebarMenuAction',
 	host: {
 		'data-slot': 'sidebar-menu-action',
 		'data-sidebar': 'menu-action',

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

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

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

@@ -34,6 +34,7 @@ const sidebarMenuButtonVariants = cva(
 
 @Directive({
 	selector: 'button[hlmSidebarMenuButton], a[hlmSidebarMenuButton]',
+	exportAs: 'hlmSidebarMenuButton',
 	providers: [
 		provideBrnTooltipDefaultOptions({
 			showDelay: 150,

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

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

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

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-sidebar-menu-skeleton,div[hlmSidebarMenuSkeleton]',
+	exportAs: 'hlmSidebarMenuSkeleton',
 	imports: [HlmSkeletonImports],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {

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

@@ -6,6 +6,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 @Directive({
 	selector: 'a[hlmSidebarMenuSubButton], button[hlmSidebarMenuSubButton]',
+	exportAs: 'hlmSidebarMenuSubButton',
 	host: {
 		'data-slot': 'sidebar-menu-sub-button',
 		'data-sidebar': 'menu-sub-button',

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

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'li[hlmSidebarMenuSubItem]',
+	exportAs: 'hlmSidebarMenuSubItem',
 	host: {
 		'data-slot': 'sidebar-menu-sub-item',
 		'data-sidebar': 'menu-sub-item',

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

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

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

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

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

@@ -4,6 +4,7 @@ import { HlmSidebarService } from './hlm-sidebar.service';
 
 @Directive({
 	selector: 'button[hlmSidebarRail]',
+	exportAs: 'hlmSidebarRail',
 	host: {
 		'data-sidebar': 'rail',
 		'data-slot': 'sidebar-rail',

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

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

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

@@ -7,6 +7,7 @@ import { HlmSidebarService } from './hlm-sidebar.service';
 @Component({
 	// eslint-disable-next-line @angular-eslint/component-selector
 	selector: 'button[hlmSidebarTrigger]',
+	exportAs: 'hlmSidebarTrigger',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucidePanelLeft }), provideBrnButtonConfig({ variant: 'ghost', size: 'icon-sm' })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -4,6 +4,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 @Directive({
 	selector: '[hlmSidebarWrapper],hlm-sidebar-wrapper',
+	exportAs: 'hlmSidebarWrapper',
 	host: {
 		'data-slot': 'sidebar-wrapper',
 		'[style.--sidebar-width]': 'sidebarWidth()',

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

@@ -8,6 +8,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 @Component({
 	selector: 'hlm-sidebar',
+	exportAs: 'hlmSidebar',
 	imports: [NgTemplateOutlet, HlmSheetImports],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {

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

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

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-slider, brn-slider [hlm]',
+	exportAs: 'hlmSlider',
 	imports: [BrnSliderImports],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [

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

@@ -9,6 +9,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-toaster',
+	exportAs: 'hlmToaster',
 	imports: [BrnSonnerImports, HlmButtonImports, NgIcon],
 	providers: [provideIcons({ lucideCircleCheck, lucideInfo, lucideTriangleAlert, lucideOctagonX, lucideLoader2 })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

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

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

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

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

@@ -24,6 +24,7 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 
 @Component({
 	selector: 'hlm-switch',
+	exportAs: 'hlmSwitch',
 	imports: [BrnSwitch, HlmSwitchThumb],
 	providers: [HLM_SWITCH_VALUE_ACCESSOR],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'div[hlmTableContainer]',
+	exportAs: 'hlmTableContainer',
 	host: { 'data-slot': 'table-container' },
 })
 export class HlmTableContainer {
@@ -16,6 +17,7 @@ export class HlmTableContainer {
  */
 @Directive({
 	selector: 'table[hlmTable]',
+	exportAs: 'hlmTable',
 	host: { 'data-slot': 'table' },
 })
 export class HlmTable {
@@ -30,6 +32,7 @@ export class HlmTable {
  */
 @Directive({
 	selector: 'thead[hlmTHead],thead[hlmTableHeader]',
+	exportAs: 'hlmTHead',
 	host: { 'data-slot': 'table-header' },
 })
 export class HlmTHead {
@@ -44,6 +47,7 @@ export class HlmTHead {
  */
 @Directive({
 	selector: 'tbody[hlmTBody],tbody[hlmTableBody]',
+	exportAs: 'hlmTBody',
 	host: { 'data-slot': 'table-body' },
 })
 export class HlmTBody {
@@ -58,6 +62,7 @@ export class HlmTBody {
  */
 @Directive({
 	selector: 'tfoot[hlmTFoot],tfoot[hlmTableFooter]',
+	exportAs: 'hlmTFoot',
 	host: { 'data-slot': 'table-footer' },
 })
 export class HlmTFoot {
@@ -72,6 +77,7 @@ export class HlmTFoot {
  */
 @Directive({
 	selector: 'tr[hlmTr],tr[hlmTableRow]',
+	exportAs: 'hlmTr',
 	host: { 'data-slot': 'table-row' },
 })
 export class HlmTr {
@@ -86,6 +92,7 @@ export class HlmTr {
  */
 @Directive({
 	selector: 'th[hlmTh],th[hlmTableHead]',
+	exportAs: 'hlmTh',
 	host: { 'data-slot': 'table-head' },
 })
 export class HlmTh {
@@ -100,6 +107,7 @@ export class HlmTh {
  */
 @Directive({
 	selector: 'td[hlmTd],td[hlmTableCell]',
+	exportAs: 'hlmTd',
 	host: { 'data-slot': 'table-cell' },
 })
 export class HlmTd {
@@ -114,6 +122,7 @@ export class HlmTd {
  */
 @Directive({
 	selector: 'caption[hlmCaption],caption[hlmTableCaption]',
+	exportAs: 'hlmCaption',
 	host: { 'data-slot': 'table-caption' },
 })
 export class HlmCaption {

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

@@ -3,6 +3,7 @@ import { BrnTabsContentLazy } from '@spartan-ng/brain/tabs';
 
 @Directive({
 	selector: 'ng-template[hlmTabsContentLazy]',
+	exportAs: 'hlmTabsContentLazy',
 	hostDirectives: [BrnTabsContentLazy],
 })
 export class HlmTabsContentLazy {}

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmTabsContent]',
+	exportAs: 'hlmTabsContent',
 	hostDirectives: [{ directive: BrnTabsContent, inputs: ['brnTabsContent: hlmTabsContent'] }],
 	host: {
 		'data-slot': 'tabs-content',

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

@@ -21,6 +21,7 @@ type ListVariants = VariantProps<typeof listVariants>;
 
 @Directive({
 	selector: '[hlmTabsList],hlm-tabs-list',
+	exportAs: 'hlmTabsList',
 	hostDirectives: [BrnTabsList],
 	host: {
 		'data-slot': 'tabs-list',

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

@@ -20,6 +20,7 @@ import { listVariants } from './hlm-tabs-list';
 
 @Component({
 	selector: 'hlm-paginated-tabs-list',
+	exportAs: 'hlmTabsPaginatedList',
 	imports: [CdkObserveContent, NgIcon],
 	providers: [provideIcons({ lucideChevronRight, lucideChevronLeft })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmTabsTrigger]',
+	exportAs: 'hlmTabsTrigger',
 	hostDirectives: [{ directive: BrnTabsTrigger, inputs: ['brnTabsTrigger: hlmTabsTrigger', 'disabled'] }],
 	host: {
 		'data-slot': 'tabs-trigger',

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

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

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

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

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

@@ -27,6 +27,7 @@ export type ToggleVariants = VariantProps<typeof toggleVariants>;
 
 @Directive({
 	selector: 'button[hlmToggle]',
+	exportAs: 'hlmToggle',
 	hostDirectives: [
 		{
 			directive: BrnToggle,

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

@@ -6,6 +6,7 @@ import { injectHlmToggleGroup } from './hlm-toggle-group.token';
 
 @Directive({
 	selector: 'button[hlmToggleGroupItem]',
+	exportAs: 'hlmToggleGroupItem',
 	hostDirectives: [
 		{
 			directive: BrnToggleGroupItem,

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

@@ -7,6 +7,7 @@ import { provideHlmToggleGroup } from './hlm-toggle-group.token';
 
 @Directive({
 	selector: '[hlmToggleGroup],hlm-toggle-group',
+	exportAs: 'hlmToggleGroup',
 	providers: [provideHlmToggleGroup(HlmToggleGroup)],
 	hostDirectives: [
 		{

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

@@ -23,6 +23,7 @@ export const tooltipPositionVariants = cva('absolute', {
 
 @Directive({
 	selector: '[hlmTooltip]',
+	exportAs: 'hlmTooltip',
 	providers: [
 		provideBrnTooltipDefaultOptions({
 			svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,

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

@@ -5,6 +5,7 @@ export const hlmBlockquote = 'mt-6 border-border border-l-2 pl-6 italic';
 
 @Directive({
 	selector: '[hlmBlockquote]',
+	exportAs: 'hlmBlockquote',
 })
 export class HlmBlockquote {
 	constructor() {

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

@@ -5,6 +5,7 @@ export const hlmCode = 'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-m
 
 @Directive({
 	selector: '[hlmCode]',
+	exportAs: 'hlmCode',
 })
 export class HlmCode {
 	constructor() {

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

@@ -5,6 +5,7 @@ export const hlmH1 = 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text
 
 @Directive({
 	selector: '[hlmH1]',
+	exportAs: 'hlmH1',
 })
 export class HlmH1 {
 	constructor() {