Add new select components and enhance existing ones for improved functionality

Author: alexcibotari

libs/ui/accordion/src/index.ts

@@ -1,19 +1,11 @@
 import { HlmAccordion } from './lib/hlm-accordion';
 import { HlmAccordionContent } from './lib/hlm-accordion-content';
-import { HlmAccordionIcon } from './lib/hlm-accordion-icon';
 import { HlmAccordionItem } from './lib/hlm-accordion-item';
 import { HlmAccordionTrigger } from './lib/hlm-accordion-trigger';
 
 export * from './lib/hlm-accordion';
 export * from './lib/hlm-accordion-content';
-export * from './lib/hlm-accordion-icon';
 export * from './lib/hlm-accordion-item';
 export * from './lib/hlm-accordion-trigger';
 
-export const HlmAccordionImports = [
-	HlmAccordion,
-	HlmAccordionItem,
-	HlmAccordionTrigger,
-	HlmAccordionIcon,
-	HlmAccordionContent,
-] as const;
+export const HlmAccordionImports = [HlmAccordion, HlmAccordionItem, HlmAccordionContent, HlmAccordionTrigger] as const;

libs/ui/accordion/src/lib/hlm-accordion-content.ts

@@ -6,16 +6,22 @@ import { classes } from '@spartan-ng/helm/utils';
 	selector: 'hlm-accordion-content',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [{ directive: BrnAccordionContent, inputs: ['style'] }],
+	host: {
+		'data-slot': 'accordion-content',
+	},
 	template: `
-		<div class="flex flex-col gap-4 pt-0 pb-4 text-balance">
+		<div
+			class="spartan-accordion-content-inner [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4"
+		>
 			<ng-content />
 		</div>
 	`,
 })
 export class HlmAccordionContent {
 	constructor() {
 		classes(
-			() => 'text-sm transition-all data-[state=closed]:h-0 data-[state=open]:h-[var(--brn-accordion-content-height)]',
+			() =>
+				'spartan-accordion-content transition-all data-[state=closed]:h-0 data-[state=open]:h-(--brn-accordion-content-height)',
 		);
 	}
 }

libs/ui/accordion/src/lib/hlm-accordion-icon.ts

@@ -3,17 +3,20 @@ import { BrnAccordionItem } from '@spartan-ng/brain/accordion';
 import { classes } from '@spartan-ng/helm/utils';
 
 @Directive({
-	selector: '[hlmAccordionItem],brn-accordion-item[hlm],hlm-accordion-item',
+	selector: '[hlmAccordionItem],hlm-accordion-item',
 	hostDirectives: [
 		{
 			directive: BrnAccordionItem,
-			inputs: ['isOpened'],
+			inputs: ['isOpened', 'disabled'],
 			outputs: ['openedChange'],
 		},
 	],
+	host: {
+		'data-slot': 'accordion-item',
+	},
 })
 export class HlmAccordionItem {
 	constructor() {
-		classes(() => 'border-border flex flex-1 flex-col border-b');
+		classes(() => 'spartan-accordion-item flex flex-col');
 	}
 }

libs/ui/accordion/src/lib/hlm-accordion-item.ts

@@ -1,19 +1,40 @@
-import { Directive } from '@angular/core';
-import { BrnAccordionTrigger } from '@spartan-ng/brain/accordion';
-import { classes } from '@spartan-ng/helm/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown, lucideChevronUp } from '@ng-icons/lucide';
+import { BrnAccordionImports } from '@spartan-ng/brain/accordion';
+import { hlm } from '@spartan-ng/helm/utils';
+import type { ClassValue } from 'clsx';
 
-@Directive({
-	selector: '[hlmAccordionTrigger]',
-	hostDirectives: [BrnAccordionTrigger],
-	host: {
-		'[style.--tw-ring-offset-shadow]': '"0 0 #000"',
-	},
+@Component({
+	selector: 'hlm-accordion-trigger',
+	imports: [BrnAccordionImports, NgIcon],
+	providers: [provideIcons({ lucideChevronDown, lucideChevronUp })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<h3 brnAccordionHeader class="flex">
+			<button brnAccordionTrigger data-slot="accordion-trigger" [class]="_computedTriggerClass()">
+				<ng-content />
+				<ng-icon
+					name="lucideChevronDown"
+					data-slot="accordion-trigger-icon"
+					class="spartan-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+				/>
+				<ng-icon
+					name="lucideChevronUp"
+					data-slot="accordion-trigger-icon"
+					class="spartan-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:inline group-aria-[expanded=false]/accordion-trigger:hidden"
+				/>
+			</button>
+		</h3>
+	`,
 })
 export class HlmAccordionTrigger {
-	constructor() {
-		classes(
-			() =>
-				'group focus-visible:ring-ring focus-visible:ring-offset-background flex w-full items-center justify-between py-4 text-left font-medium transition-all hover:underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none [&[data-state=open]>ng-icon]:rotate-180',
-		);
-	}
+	public readonly triggerClass = input<ClassValue>('');
+
+	protected readonly _computedTriggerClass = computed(() =>
+		hlm(
+			'spartan-accordion-trigger group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
+			this.triggerClass(),
+		),
+	);
 }

libs/ui/accordion/src/lib/hlm-accordion-trigger.ts

@@ -4,10 +4,13 @@ import { classes } from '@spartan-ng/helm/utils';
 
 @Directive({
 	selector: '[hlmAccordion], hlm-accordion',
-	hostDirectives: [{ directive: BrnAccordion, inputs: ['type', 'dir', 'orientation'] }],
+	hostDirectives: [{ directive: BrnAccordion, inputs: ['type', 'orientation'] }],
+	host: {
+		'data-slot': 'accordion',
+	},
 })
 export class HlmAccordion {
 	constructor() {
-		classes(() => 'flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col');
+		classes(() => 'spartan-accordion flex w-full flex-col');
 	}
 }

libs/ui/accordion/src/lib/hlm-accordion.ts

@@ -9,11 +9,13 @@ import {
 	linkedSignal,
 	model,
 	output,
+	viewChild,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
 import { BrnCheckbox } from '@spartan-ng/brain/checkbox';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import { HlmIcon } from '@spartan-ng/helm/icon';
 import { hlm } from '@spartan-ng/helm/utils';
@@ -31,18 +33,17 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
 	viewProviders: [provideIcons({ lucideCheck })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnFieldControlDescribedBy],
 	host: {
 		class: 'contents peer',
 		'data-slot': 'checkbox',
-		'[attr.id]': 'null',
 		'[attr.aria-label]': 'null',
 		'[attr.aria-labelledby]': 'null',
-		'[attr.aria-describedby]': 'null',
 		'[attr.data-disabled]': '_disabled() ? "" : null',
 	},
 	template: `
 		<brn-checkbox
-			[id]="id()"
+			[id]="inputId()"
 			[name]="name()"
 			[class]="_computedClass()"
 			[checked]="checked()"
@@ -52,6 +53,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 			[aria-label]="ariaLabel()"
 			[aria-labelledby]="ariaLabelledby()"
 			[aria-describedby]="ariaDescribedby()"
+			[forceInvalid]="forceInvalid()"
 			(checkedChange)="_handleChange($event)"
 			(touched)="_onTouched?.()"
 		>
@@ -68,14 +70,15 @@ export class HlmCheckbox implements ControlValueAccessor {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer size-4 shrink-0 cursor-default rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+			'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 peer size-4 shrink-0 cursor-default rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
 			this.userClass(),
 			this._disabled() ? 'cursor-not-allowed opacity-50' : '',
+			this._errorStateClass(),
 		),
 	);
 
 	/** Used to set the id on the underlying brn element. */
-	public readonly id = input<string | null>(null);
+	public readonly inputId = input<string | null>(null);
 
 	/** Used to set the aria-label attribute on the underlying brn element. */
 	public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
@@ -107,8 +110,20 @@ export class HlmCheckbox implements ControlValueAccessor {
 	/** Whether the checkbox is disabled. */
 	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
+	/** Whether to force the checkbox into an invalid state. */
+	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
 	protected readonly _disabled = linkedSignal(this.disabled);
 
+	private readonly _brnCheckbox = viewChild.required(BrnCheckbox);
+
+	private readonly _spartanInvalid = computed(() => this.forceInvalid() || this._brnCheckbox().spartanInvalid?.());
+	protected readonly _errorStateClass = computed(() =>
+		this._spartanInvalid()
+			? 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40'
+			: '',
+	);
+
 	protected _onChange?: ChangeFn<boolean>;
 	protected _onTouched?: TouchFn;
 

libs/ui/checkbox/src/lib/hlm-checkbox.ts

@@ -10,11 +10,13 @@ import { HlmComboboxItem } from './lib/hlm-combobox-item';
 import { HlmComboboxLabel } from './lib/hlm-combobox-label';
 import { HlmComboboxList } from './lib/hlm-combobox-list';
 import { HlmComboboxMultiple } from './lib/hlm-combobox-multiple';
+import { HlmComboboxPlaceholder } from './lib/hlm-combobox-placeholder';
 import { HlmComboboxPortal } from './lib/hlm-combobox-portal';
 import { HlmComboboxSeparator } from './lib/hlm-combobox-separator';
 import { HlmComboboxStatus } from './lib/hlm-combobox-status';
 import { HlmComboboxTrigger } from './lib/hlm-combobox-trigger';
 import { HlmComboboxValue } from './lib/hlm-combobox-value';
+import { HlmComboboxValueTemplate } from './lib/hlm-combobox-value-template';
 import { HlmComboboxValues } from './lib/hlm-combobox-values';
 
 export * from './lib/hlm-combobox';
@@ -29,11 +31,13 @@ export * from './lib/hlm-combobox-item';
 export * from './lib/hlm-combobox-label';
 export * from './lib/hlm-combobox-list';
 export * from './lib/hlm-combobox-multiple';
+export * from './lib/hlm-combobox-placeholder';
 export * from './lib/hlm-combobox-portal';
 export * from './lib/hlm-combobox-separator';
 export * from './lib/hlm-combobox-status';
 export * from './lib/hlm-combobox-trigger';
 export * from './lib/hlm-combobox-value';
+export * from './lib/hlm-combobox-value-template';
 export * from './lib/hlm-combobox-values';
 
 export const HlmComboboxImports = [
@@ -49,10 +53,12 @@ export const HlmComboboxImports = [
 	HlmComboboxLabel,
 	HlmComboboxList,
 	HlmComboboxMultiple,
+	HlmComboboxPlaceholder,
 	HlmComboboxPortal,
 	HlmComboboxSeparator,
 	HlmComboboxStatus,
 	HlmComboboxTrigger,
 	HlmComboboxValue,
+	HlmComboboxValueTemplate,
 	HlmComboboxValues,
 ] as const;

libs/ui/combobox/src/index.ts

@@ -4,7 +4,7 @@ import { classes } from '@spartan-ng/helm/utils';
 
 @Directive({
 	selector: 'input[hlmComboboxChipInput]',
-	hostDirectives: [{ directive: BrnComboboxChipInput, inputs: ['id'] }],
+	hostDirectives: [{ directive: BrnComboboxChipInput, inputs: ['id', 'aria-invalid'] }],
 	host: {
 		'data-slott': 'combobox-chip-input',
 	},

libs/ui/combobox/src/lib/hlm-combobox-chip-input.ts

@@ -1,19 +1,29 @@
-import { Directive } from '@angular/core';
-import { BrnComboboxAnchor, BrnComboboxInputWrapper, BrnComboboxPopoverTrigger } from '@spartan-ng/brain/combobox';
+import { computed, Directive } from '@angular/core';
+import { BrnComboboxAnchor, BrnComboboxPopoverTrigger, injectBrnComboboxBase } from '@spartan-ng/brain/combobox';
 import { classes } from '@spartan-ng/helm/utils';
 
 @Directive({
 	selector: '[hlmComboboxChips],hlm-combobox-chips',
-	hostDirectives: [BrnComboboxInputWrapper, BrnComboboxAnchor, BrnComboboxPopoverTrigger],
+	hostDirectives: [BrnComboboxAnchor, BrnComboboxPopoverTrigger],
 	host: {
-		'data-slott': 'combobox-chips',
+		'data-slot': 'combobox-chips',
 	},
 })
 export class HlmComboboxChips {
+	private readonly _combobox = injectBrnComboboxBase();
+
+	protected readonly _spartanInvalid = computed(() => this._combobox.controlState?.()?.spartanInvalid);
+
+	protected readonly _errorStateClass = computed(() =>
+		this._spartanInvalid?.()
+			? 'border-destructive focus-within:border-destructive focus-within:ring-destructive/20 dark:focus-within:ring-destructive/40'
+			: '',
+	);
+
 	constructor() {
-		classes(
-			() =>
-				'dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 has-data-[slot=combobox-chip]:px-1.5; flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px]',
-		);
+		classes(() => [
+			'dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-data-[slot=combobox-chip]:px-1.5; flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]',
+			this._errorStateClass(),
+		]);
 	}
 }