feat(select): add input like styles (including error styles) to selec… (

#310)

* feat(select): add input like styles (including error styles) to select-trigger

* feat(select): cleanup import

libs/ui/select/helm/src/lib/hlm-select-trigger.component.ts

@@ -4,15 +4,38 @@ import { lucideChevronDown } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
 import { BrnSelectTriggerDirective } from '@spartan-ng/ui-select-brain';
+import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
+export const selectTriggerVariants = cva(
+ 'flex items-center justify-between rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+ {
+ variants: {
+ size: {
+ default: 'h-10 py-2 px-4',
+ sm: 'h-9 px-3',
+ lg: 'h-11 px-8',
+ },
+ error: {
+ auto: '[&.ng-invalid.ng-touched]:text-destructive [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive',
+ true: 'text-destructive border-destructive focus-visible:ring-destructive',
+ },
+ },
+ defaultVariants: {
+ size: 'default',
+ error: 'auto',
+ },
+ },
+);
+type SelectTriggerVariants = VariantProps<typeof selectTriggerVariants>;
+
 @Component({
  selector: 'hlm-select-trigger',
  standalone: true,
  imports: [BrnSelectTriggerDirective, HlmIconComponent],
  providers: [provideIcons({ lucideChevronDown })],
  template: `
- <button [class]="_computedClass()" #button brnSelectTrigger type="button">
+ <button [class]="_computedClass()" #button hlmInput brnSelectTrigger type="button">
  <ng-content />
  @if (icon) {
  <ng-content select="hlm-icon" />
@@ -29,11 +52,11 @@ export class HlmSelectTriggerComponent {
  @ContentChild(HlmIconComponent, { static: false })
  protected icon!: HlmIconComponent;
 
+ public readonly _size = input<SelectTriggerVariants['size']>('default');
+ public readonly _error = input<SelectTriggerVariants['error']>('auto');
  public readonly userClass = input<ClassValue>('', { alias: 'class' });
- protected readonly _computedClass = computed(() =>
- hlm(
- 'flex h-10 items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-[180px]',
- this.userClass(),
- ),
+
+ protected _computedClass = computed(() =>
+ hlm(selectTriggerVariants({ size: this._size(), error: this._error() }), this.userClass()),
  );
 }