fix: accordion is now a directive

spartan-ng · Nov 23, 2023 · 5fe8b90 · 5fe8b90
1 parent 8427360
commit 5fe8b90
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 61 deletions.
diff --git a/apps/app/src/app/pages/(components)/components/(accordion)/accordion.preview.ts b/apps/app/src/app/pages/(components)/components/(accordion)/accordion.preview.ts
@@ -3,7 +3,7 @@ import {
 	BrnAccordionComponent,
 	BrnAccordionContentComponent,
 	BrnAccordionItemComponent,
-	BrnAccordionTriggerComponent,
+	BrnAccordionTriggerDirective,
 } from '@spartan-ng/ui-accordion-brain';
 import {
 	HlmAccordionContentDirective,
@@ -20,7 +20,7 @@ import {
 		BrnAccordionComponent,
 		BrnAccordionContentComponent,
 		BrnAccordionItemComponent,
-		BrnAccordionTriggerComponent,
+		BrnAccordionTriggerDirective,
 		HlmAccordionDirective,
 		HlmAccordionItemDirective,
 		HlmAccordionTriggerDirective,
@@ -30,28 +30,28 @@ import {
 	template: `
 		<brn-accordion hlm>
 			<brn-accordion-item hlm>
-				<brn-accordion-trigger hlm>
+				<button hlmAccordionTrigger>
 					<span>Is it accessible?</span>
 					<hlm-accordion-icon />
-				</brn-accordion-trigger>
+				</button>
 				<brn-accordion-content hlm>Yes. It adheres to the WAI-ARIA design pattern.</brn-accordion-content>
 			</brn-accordion-item>
 
 			<brn-accordion-item hlm>
-				<brn-accordion-trigger hlm>
+				<button hlmAccordionTrigger>
 					<span>Is it styled</span>
 					<hlm-accordion-icon />
-				</brn-accordion-trigger>
+				</button>
 				<brn-accordion-content hlm>
 					Yes. It comes with default styles that match the other components' aesthetics.
 				</brn-accordion-content>
 			</brn-accordion-item>
 
 			<brn-accordion-item hlm>
-				<brn-accordion-trigger hlm>
+				<button hlmAccordionTrigger>
 					<span>Is it animated?</span>
 					<hlm-accordion-icon />
-				</brn-accordion-trigger>
+				</button>
 				<brn-accordion-content hlm>
 					Yes. It's animated by default, but you can disable it if you prefer.
 				</brn-accordion-content>
@@ -67,7 +67,7 @@ import {
   BrnAccordionComponent,
   BrnAccordionContentComponent,
   BrnAccordionItemComponent,
-  BrnAccordionTriggerComponent,
+  BrnAccordionTriggerDirective,
 } from '@spartan-ng/ui-accordion-brain';
 import {
   HlmAccordionContentDirective,
@@ -84,7 +84,7 @@ import {
     BrnAccordionComponent,
     BrnAccordionContentComponent,
     BrnAccordionItemComponent,
-    BrnAccordionTriggerComponent,
+    BrnAccordionTriggerDirective,
     HlmAccordionDirective,
     HlmAccordionItemDirective,
     HlmAccordionTriggerDirective,
@@ -131,7 +131,7 @@ import {
   BrnAccordionComponent,
   BrnAccordionContentComponent,
   BrnAccordionItemComponent,
-  BrnAccordionTriggerComponent,
+  BrnAccordionTriggerDirective,
 } from '@spartan-ng/ui-accordion-brain';
 import {
   HlmAccordionContentDirective,

diff --git a/apps/app/src/app/pages/(documentation)/documentation/introduction.page.ts b/apps/app/src/app/pages/(documentation)/documentation/introduction.page.ts
@@ -7,7 +7,7 @@ import {
 	BrnAccordionComponent,
 	BrnAccordionContentComponent,
 	BrnAccordionItemComponent,
-	BrnAccordionTriggerComponent,
+	BrnAccordionTriggerDirective,
 } from '@spartan-ng/ui-accordion-brain';
 import {
 	HlmAccordionContentDirective,
@@ -49,7 +49,7 @@ export const routeMeta: RouteMeta = {
 		BrnAccordionComponent,
 		BrnAccordionContentComponent,
 		BrnAccordionItemComponent,
-		BrnAccordionTriggerComponent,
+		BrnAccordionTriggerDirective,
 		HlmAccordionContentDirective,
 		HlmAccordionDirective,
 		HlmAccordionIconComponent,

diff --git a/libs/ui/accordion/accordion.stories.ts b/libs/ui/accordion/accordion.stories.ts
@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 import { BrnAccordionComponent, BrnAccordionImports } from './brain/src';
-import { HlmAccordionImports } from './helm/src';
+import { HlmAccordionImports, HlmAccordionTriggerDirective } from './helm/src';
 
 const meta: Meta<BrnAccordionComponent> = {
 	title: 'Accordion',
 	component: BrnAccordionComponent,
 	decorators: [
 		moduleMetadata({
-			imports: [BrnAccordionImports, HlmAccordionImports],
+			imports: [BrnAccordionImports, HlmAccordionImports, HlmAccordionTriggerDirective],
 		}),
 	],
 };
@@ -21,30 +21,30 @@ export const Default: Story = {
 		template: `
       <brn-accordion hlm>
       <brn-accordion-item hlm>
-        <brn-accordion-trigger hlm>
+        <button hlmAccordionTrigger>
           <span>What is SPARTAN</span>
           <hlm-accordion-icon />
-        </brn-accordion-trigger>
+        </button>
         <brn-accordion-content hlm>
           It is a collection of full-stack technologies that provide end-to-end type-safety.
         </brn-accordion-content>
       </brn-accordion-item>
 
       <brn-accordion-item hlm>
-        <brn-accordion-trigger hlm>
+      <button hlmAccordionTrigger>
           <span>What is SPARTAN Brain</span>
           <hlm-accordion-icon />
-        </brn-accordion-trigger>
+        </button>
         <brn-accordion-content hlm>
           A collection of unstyled UI primitives that provide accessibility out of the box.
         </brn-accordion-content>
       </brn-accordion-item>
 
             <brn-accordion-item hlm>
-        <brn-accordion-trigger hlm>
+        <button hlmAccordionTrigger>
           <span>What is SPARTAN Helm</span>
           <hlm-accordion-icon />
-        </brn-accordion-trigger>
+        </button>
         <brn-accordion-content hlm>
           Directives, sometimes additional components, that provide shadcn like styles for the Angular ecosystem.
         </brn-accordion-content>

diff --git a/libs/ui/accordion/brain/src/index.ts b/libs/ui/accordion/brain/src/index.ts
@@ -2,19 +2,19 @@ import { NgModule } from '@angular/core';
 
 import { BrnAccordionContentComponent } from './lib/brn-accordion-content.component';
 import { BrnAccordionItemComponent } from './lib/brn-accordion-item.component';
-import { BrnAccordionTriggerComponent } from './lib/brn-accordion-trigger.component';
+import { BrnAccordionTriggerDirective } from './lib/brn-accordion-trigger.directive';
 import { BrnAccordionComponent } from './lib/brn-accordion.component';
 
 export * from './lib/brn-accordion-content.component';
 export * from './lib/brn-accordion-item.component';
-export * from './lib/brn-accordion-trigger.component';
+export * from './lib/brn-accordion-trigger.directive';
 export * from './lib/brn-accordion.component';
 
 export const BrnAccordionImports = [
 	BrnAccordionComponent,
 	BrnAccordionContentComponent,
 	BrnAccordionItemComponent,
-	BrnAccordionTriggerComponent,
+	BrnAccordionTriggerDirective,
 ] as const;
 
 @NgModule({

diff --git a/...rc/lib/brn-accordion-trigger.component.ts → ...rc/lib/brn-accordion-trigger.directive.ts b/...rc/lib/brn-accordion-trigger.component.ts → ...rc/lib/brn-accordion-trigger.directive.ts
@@ -1,12 +1,11 @@
-import { Component, ElementRef, inject, signal } from '@angular/core';
-import { CustomElementClassSettable, provideCustomClassSettableExisting } from '@spartan-ng/ui-core';
+import { AfterContentInit, Directive, ElementRef, inject } from '@angular/core';
+import { rxHostPressedListener } from '@spartan-ng/ui-core';
 import { BrnAccordionItemComponent } from './brn-accordion-item.component';
 import { BrnAccordionComponent } from './brn-accordion.component';
 
-@Component({
-	selector: 'brn-accordion-trigger',
+@Directive({
+	selector: '[brnAccordionTrigger]',
 	standalone: true,
-	providers: [provideCustomClassSettableExisting(() => BrnAccordionTriggerComponent)],
 	host: {
 		'[attr.data-state]': 'state()',
 		'[attr.aria-expanded]': 'state() === "open"',
@@ -15,24 +14,17 @@ import { BrnAccordionComponent } from './brn-accordion.component';
 		'aria-level': '3',
 		'[id]': 'id',
 	},
-	template: `
-		<button [class]="btnClass()" [attr.data-state]="state()" (click)="toggleAccordionItem()">
-			<ng-content />
-		</button>
-	`,
 })
-export class BrnAccordionTriggerComponent implements CustomElementClassSettable {
+export class BrnAccordionTriggerDirective implements AfterContentInit {
 	private _accordion = inject(BrnAccordionComponent);
 	private _item = inject(BrnAccordionItemComponent);
 	private _elementRef = inject(ElementRef);
+	private _HostPressedListener = rxHostPressedListener();
 
 	public state = this._item.state;
 	public id = 'brn-accordion-trigger-' + this._item.id;
 	public ariaControls = 'brn-accordion-content-' + this._item.id;
 
-	private readonly _btnClass = signal('');
-	public btnClass = this._btnClass.asReadonly();
-
 	constructor() {
 		if (!this._accordion) {
 			throw Error('Accordion trigger can only be used inside an Accordion. Add brnAccordion to ancestor.');
@@ -41,10 +33,12 @@ export class BrnAccordionTriggerComponent implements CustomElementClassSettable
 		if (!this._item) {
 			throw Error('Accordion trigger can only be used inside an AccordionItem. Add brnAccordionItem to parent.');
 		}
+		this._HostPressedListener.subscribe(() => {
+			this.toggleAccordionItem();
+		});
 	}
-
-	public setClassToCustomElement(classes: string) {
-		this._btnClass.set(classes);
+	ngAfterContentInit(): void {
+		console.log('BrnAccordionTriggerDirective.ngAfterContentInit');
 	}
 
 	public focus() {

diff --git a/libs/ui/accordion/brain/src/lib/brn-accordion.component.ts b/libs/ui/accordion/brain/src/lib/brn-accordion.component.ts
@@ -1,7 +1,7 @@
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { AfterContentInit, Component, computed, ContentChildren, Input, QueryList, signal } from '@angular/core';
 import { rxHostListener } from '@spartan-ng/ui-core';
-import { BrnAccordionTriggerComponent } from './brn-accordion-trigger.component';
+import { BrnAccordionTriggerDirective } from './brn-accordion-trigger.directive';
 
 @Component({
 	selector: 'brn-accordion',
@@ -25,17 +25,34 @@ export class BrnAccordionComponent implements AfterContentInit {
 	private readonly _openItemIds = signal<number[]>([]);
 	public openItemIds = this._openItemIds.asReadonly();
 	public state = computed(() => (this._openItemIds().length > 0 ? 'open' : 'closed'));
-	private _keyManager?: FocusKeyManager<BrnAccordionTriggerComponent>;
+	private _keyManager?: FocusKeyManager<BrnAccordionTriggerDirective>;
 	private _keyDownListener = rxHostListener('keydown');
 
-	@ContentChildren(BrnAccordionTriggerComponent, { descendants: true })
-	public triggers?: QueryList<BrnAccordionTriggerComponent>;
+	constructor() {
+		addEventListener('keydown', (event) => {
+			// if one of the triggers is focused, prevent default on certain keys
+			for (const trigger of this.triggers?.toArray() ?? []) {
+				if (trigger.id === document.activeElement?.id) {
+					if ('key' in event) {
+						const keys = ['ArrowUp', 'ArrowDown', 'PageDown', 'PageUp', 'Home', 'End', ' ', 'Enter'];
+						if (keys.includes(event.key as string)) {
+							event.preventDefault();
+						}
+					}
+					return;
+				}
+			}
+		});
+	}
+
+	@ContentChildren(BrnAccordionTriggerDirective, { descendants: true })
+	public triggers?: QueryList<BrnAccordionTriggerDirective>;
 
 	public ngAfterContentInit() {
 		if (!this.triggers) {
 			return;
 		}
-		this._keyManager = new FocusKeyManager<BrnAccordionTriggerComponent>(this.triggers)
+		this._keyManager = new FocusKeyManager<BrnAccordionTriggerDirective>(this.triggers)
 			.withHorizontalOrientation(this.dir)
 			.withHomeAndEnd()
 			.withPageUpDown()
@@ -50,6 +67,7 @@ export class BrnAccordionComponent implements AfterContentInit {
 	}
 
 	public toggleItem(id: number) {
+		this._keyManager?.setActiveItem(id);
 		if (this._openItemIds().includes(id)) {
 			this._openItemIds.update((ids) => ids.filter((openId) => id !== openId));
 			return;

diff --git a/libs/ui/accordion/helm/src/lib/hlm-accordion-trigger.directive.ts b/libs/ui/accordion/helm/src/lib/hlm-accordion-trigger.directive.ts
@@ -1,35 +1,25 @@
 import { Directive, Input, computed, signal } from '@angular/core';
-import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
+import { BrnAccordionTriggerDirective } from '@spartan-ng/ui-accordion-brain';
+import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
 @Directive({
-	selector: '[hlmAccordionTrigger],brn-accordion-trigger[hlm]',
+	selector: '[hlmAccordionTrigger]',
 	standalone: true,
 	host: {
 		'[style.--tw-ring-offset-shadow]': '"0 0 #000"',
 		'[class]': '_computedClass()',
 	},
+	hostDirectives: [BrnAccordionTriggerDirective],
 })
 export class HlmAccordionTriggerDirective {
-	private _host = injectCustomClassSettable({ optional: true });
-
-	constructor() {
-		this._host?.setClassToCustomElement(this._generateClass());
-	}
-
 	private readonly _userCls = signal<ClassValue>('');
 	@Input()
 	set class(inputs: ClassValue) {
 		this._userCls.set(inputs);
-		// cannot set in effect because it sets a signal
-		if (this._host) {
-			this._host.setClassToCustomElement(this._generateClass());
-		}
 	}
 
-	protected _computedClass = computed(() => {
-		return !this._host ? this._generateClass() : '';
-	});
+	protected _computedClass = computed(() => this._generateClass());
 	private _generateClass() {
 		return hlm(
 			'w-full focus-visible:outline-none text-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 flex flex-1 items-center justify-between py-4 px-0.5 font-medium underline-offset-4 hover:underline [&[data-state=open]>hlm-accordion-icon]:rotate-180',