Update Toolbar Buttons

Author: alexcibotari

libs/ui/breadcrumb/src/index.ts

@@ -1,4 +1,5 @@
 import { HlmBreadcrumb } from './lib/hlm-breadcrumb';
+import { HlmBreadcrumbButton } from './lib/hlm-breadcrumb-button';
 import { HlmBreadcrumbEllipsis } from './lib/hlm-breadcrumb-ellipsis';
 import { HlmBreadcrumbItem } from './lib/hlm-breadcrumb-item';
 import { HlmBreadcrumbLink } from './lib/hlm-breadcrumb-link';
@@ -7,6 +8,7 @@ import { HlmBreadcrumbPage } from './lib/hlm-breadcrumb-page';
 import { HlmBreadcrumbSeparator } from './lib/hlm-breadcrumb-separator';
 
 export * from './lib/hlm-breadcrumb';
+export * from './lib/hlm-breadcrumb-button';
 export * from './lib/hlm-breadcrumb-ellipsis';
 export * from './lib/hlm-breadcrumb-item';
 export * from './lib/hlm-breadcrumb-link';
@@ -16,6 +18,7 @@ export * from './lib/hlm-breadcrumb-separator';
 
 export const HlmBreadCrumbImports = [
 	HlmBreadcrumb,
+  HlmBreadcrumbButton,
 	HlmBreadcrumbEllipsis,
 	HlmBreadcrumbSeparator,
 	HlmBreadcrumbItem,

libs/ui/breadcrumb/src/lib/hlm-breadcrumb-button.ts

@@ -0,0 +1,16 @@
+import { Directive, computed, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { hlm } from '@spartan-ng/helm/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmBreadcrumbButton]',
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmBreadcrumbButton {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() => hlm('hover:text-foreground transition-colors cursor-pointer inline-flex items-center', this.userClass()));
+}