feat: moving actions into directives / api (#947)

angular/bootstrap/src/components/select/select.component.ts

@@ -46,24 +46,12 @@ export class SelectItemLabelDirective<Item> {
 			>
 				@if (state.selectedContexts; as selectedContexts) {
 					@for (itemContext of selectedContexts; track itemCtxTrackBy($index, itemContext)) {
-						<div [auUse]="[_widget.directives.badgeAttributesDirective, itemContext]">
+						<div [auUse]="[widget.directives.badgeAttributesDirective, itemContext]">
 							<ng-template [auSlot]="state.badgeLabel" [auSlotProps]="{state, widget, itemContext}"></ng-template>
 						</div>
 					}
 				}
-				<input
-					attr.id="{{ state.id }}"
-					attr.aria-label="{{ state.ariaLabel }}"
-					type="text"
-					class="au-select-input flex-grow-1 border-0"
-					[value]="state.filterText"
-					aria-autocomplete="list"
-					autoCorrect="off"
-					autoCapitalize="none"
-					autoComplete="off"
-					(input)="_widget.actions.onInput($event)"
-					(keydown)="_widget.actions.onInputKeydown($event)"
-				/>
+				<input [auUse]="widget.directives.inputDirective" [value]="state.filterText" />
 			</div>
 			@if (state.open && state.visibleItems.length) {
 				<ul

angular/bootstrap/src/index.ts

@@ -15,7 +15,6 @@ export type {
 	AccordionState,
 	AccordionWidget,
 	AccordionDirectives,
-	AccordionItemActions,
 	AccordionItemApi,
 	AccordionItemDirectives,
 } from './components/accordion';
@@ -28,16 +27,7 @@ export * from './components/alert';
 
 export * from './components/collapse';
 
-export type {
-	ModalContext,
-	ModalProps,
-	ModalState,
-	ModalWidget,
-	ModalApi,
-	ModalDirectives,
-	ModalActions,
-	ModalBeforeCloseEvent,
-} from './components/modal';
+export type {ModalContext, ModalProps, ModalState, ModalWidget, ModalApi, ModalDirectives, ModalBeforeCloseEvent} from './components/modal';
 export {createModal, getModalDefaultConfig, modalCloseButtonClick, modalOutsideClick} from './components/modal';
 export * from './components/modal';
 
@@ -48,7 +38,7 @@ export type {
 	PaginationState,
 	PaginationWidget,
 	DirectionsHrefs,
-	PaginationActions,
+	PaginationApi,
 	PaginationDirectives,
 } from './components/pagination';
 export {createPagination, getPaginationDefaultConfig} from './components/pagination';
@@ -58,7 +48,7 @@ export type {ProgressbarContext, ProgressbarProps, ProgressbarState, Progressbar
 export {createProgressbar, getProgressbarDefaultConfig} from './components/progressbar';
 export * from './components/progressbar';
 
-export type {RatingProps, RatingState, RatingWidget, StarContext, RatingActions, RatingDirectives} from './components/rating';
+export type {RatingProps, RatingState, RatingWidget, StarContext, RatingApi, RatingDirectives} from './components/rating';
 export {createRating, getRatingDefaultConfig} from './components/rating';
 export * from './components/rating';
 
@@ -69,7 +59,6 @@ export type {
 	SelectState,
 	SelectWidget,
 	ItemContext,
-	SelectActions,
 	SelectApi,
 	SelectDirectives,
 } from './components/select';
@@ -83,7 +72,6 @@ export type {
 	SliderSlotLabelContext,
 	SliderState,
 	SliderWidget,
-	SliderActions,
 	SliderHandle,
 	HandleDisplayOptions,
 	ProgressDisplayOptions,

angular/demo/bootstrap/src/app/samples/pagination/custom.route.ts

@@ -59,7 +59,7 @@ export default class PaginationComponent {
 	handleTheChange(input: HTMLInputElement, widget: PaginationContext['widget']) {
 		const value = input.value;
 		const intValue = parseInt(value);
-		widget.actions.select(intValue);
+		widget.api.select(intValue);
 		input.value = widget.stores.page$().toString();
 	}
 }

angular/demo/bootstrap/src/app/samples/select/custom.route.ts

@@ -36,7 +36,7 @@ function getHtmlText(html: string) {
 						type="button"
 						class="btn-close ms-1 wiki-btn-close"
 						aria-label="Close"
-						(click)="widget.actions.onRemoveBadgeClick($event, itemContext.item)"
+						[auUse]="[widget.directives.badgeCloseButtonDirective, itemContext]"
 					></button>
 				</ng-template>
 				<ng-template auSelectItemLabel let-widget="widget" let-itemContext="itemContext">

angular/demo/bootstrap/src/app/samples/slots/rating-readonly.component.ts

@@ -39,11 +39,6 @@ export class RatingReadonlyComponent extends BaseWidgetDirective<RatingWidget> {
 		defaultConfig: {
 			readonly: true,
 		},
-		events: {
-			onHover: () => {},
-			onLeave: () => {},
-			onRatingChange: () => {},
-		},
 	});
 
 	readonly className = input<string>();

angular/demo/daisyui/src/app/samples/pagination/pagination.component.html

@@ -4,7 +4,7 @@
 			<button
 				class="join-item btn btn-outline"
 				[attr.aria-label]="state().ariaFirstLabel"
-				(click)="widget.actions.first()"
+				(click)="widget.api.first()"
 				[disabled]="state().previousDisabled"
 				[attr.aria-disabled]="state().previousDisabled ? 'true' : null"
 				[attr.tabindex]="state().previousDisabled ? -1 : undefined"
@@ -16,7 +16,7 @@
 			<button
 				class="join-item btn btn-outline"
 				[attr.aria-label]="state().ariaPreviousLabel"
-				(click)="widget.actions.previous()"
+				(click)="widget.api.previous()"
 				[disabled]="state().previousDisabled"
 				[attr.aria-disabled]="state().previousDisabled ? 'true' : null"
 				[attr.tabindex]="state().previousDisabled ? -1 : undefined"
@@ -31,7 +31,7 @@
 				[attr.aria-current]="page === state().page ? 'page' : null"
 				[attr.tabindex]="state().disabled ? -1 : undefined"
 				[class.disabled]="state().disabled"
-				(click)="widget.actions.select(page)"
+				(click)="widget.api.select(page)"
 			>
 				{{ page }}
 				@if (state().page === page) {
@@ -43,7 +43,7 @@
 			<button
 				class="join-item btn btn-outline"
 				[attr.aria-label]="state().ariaNextLabel"
-				(click)="widget.actions.next()"
+				(click)="widget.api.next()"
 				[disabled]="state().nextDisabled"
 				[attr.aria-disabled]="state().nextDisabled ? 'true' : null"
 				[attr.tabindex]="state().nextDisabled ? -1 : undefined"
@@ -55,7 +55,7 @@
 			<button
 				class="join-item btn btn-outline"
 				[attr.aria-label]="state().ariaLastLabel"
-				(click)="widget.actions.last()"
+				(click)="widget.api.last()"
 				[disabled]="state().nextDisabled"
 				[attr.aria-disabled]="state().nextDisabled ? 'true' : null"
 				[attr.tabindex]="state().nextDisabled ? -1 : undefined"

angular/demo/daisyui/src/app/samples/rating/rating.component.html

@@ -2,9 +2,9 @@
 	@for (item of state().stars; track trackByIndex(index); let index = $index) {
 		<input
 			(blur)="onTouched()"
-			(mouseleave)="_widget.actions.leave()"
-			(mouseenter)="_widget.actions.hover(index + 1)"
-			(click)="_widget.actions.click(index + 1)"
+			(mouseleave)="api.leave()"
+			(mouseenter)="api.setHoveredRating(index + 1)"
+			(click)="api.setRating(index + 1)"
 			type="radio"
 			name="rating-1"
 			class="mask mask-star"

angular/demo/daisyui/src/app/samples/slider/slider.component.html

@@ -1,14 +1,14 @@
 <input
-	[auUse]="widget.directives.sliderDirective"
+	[auUseMulti]="[
+		[widget.directives.sliderDirective, undefined],
+		[widget.directives.clickableAreaDirective, undefined],
+		[widget.directives.handleEventsDirective, {item: {id: 0}}],
+	]"
 	type="range"
 	[min]="state().min"
 	[max]="state().max"
 	[value]="state().sortedHandles[0].value"
 	[step]="state().stepSize"
-	[class]="'range'"
+	class="range"
 	[attr.aria-label]="state().sortedHandles[0].ariaLabel"
-	(click)="widget.actions.click($event)"
-	(keydown)="widget.actions.keydown($event, 0)"
-	(mousedown)="widget.actions.mouseDown($event, 0)"
-	(touchstart)="widget.actions.touchStart($event, 0)"
 />

angular/demo/daisyui/src/app/samples/slider/slider.component.ts

@@ -5,14 +5,14 @@ import {
 	auNumberAttribute,
 	callWidgetFactory,
 	createSlider,
-	UseDirective,
+	UseMultiDirective,
 } from '@agnos-ui/angular-headless';
 import {ChangeDetectionStrategy, Component, input, model} from '@angular/core';
 
 @Component({
 	selector: 'app-slider',
 	standalone: true,
-	imports: [UseDirective],
+	imports: [UseMultiDirective],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	templateUrl: './slider.component.html',
 })

angular/ssr-app/tsconfig.json

@@ -5,6 +5,8 @@
 		"paths": {
 			"@agnos-ui/core": ["./core/src"],
 			"@agnos-ui/core/*": ["./core/src/*"],
+			"@agnos-ui/core-bootstrap": ["./core-bootstrap/src"],
+			"@agnos-ui/core-bootstrap/*": ["./core-bootstrap/src/*"],
 			"@agnos-ui/angular-headless": ["./angular/headless/src"],
 			"@agnos-ui/angular-bootstrap": ["./angular/bootstrap/src"],
 			"@agnos-ui/common/*": ["./common/*"],

core-bootstrap/src/components/accordion/accordion.ts

@@ -1,7 +1,6 @@
 import type {
 	AccordionApi,
 	AccordionDirectives,
-	AccordionItemActions,
 	AccordionItemApi,
 	AccordionProps as CoreProps,
 	AccordionState as CoreState,
@@ -76,7 +75,7 @@ export type AccordionWidget = Widget<AccordionProps, AccordionState, AccordionAp
 export interface AccordionItemState extends CoreItemState, AccordionItemExtraProps {}
 export interface AccordionItemProps extends CoreItemProps, AccordionItemExtraProps {}
 
-export type AccordionItemWidget = Widget<AccordionItemProps, AccordionItemState, AccordionItemApi, AccordionItemActions, AccordionItemDirectives>;
+export type AccordionItemWidget = Widget<AccordionItemProps, AccordionItemState, AccordionItemApi, object, AccordionItemDirectives>;
 
 const defaultConfigExtraProps: AccordionExtraProps = {
 	itemStructure: undefined,

core-bootstrap/src/components/modal/modal.ts

@@ -1,10 +1,4 @@
-import type {
-	ModalProps as CoreProps,
-	ModalState as CoreState,
-	ModalActions,
-	ModalApi as CoreApi,
-	ModalDirectives,
-} from '@agnos-ui/core/components/modal';
+import type {ModalProps as CoreProps, ModalState as CoreState, ModalApi as CoreApi, ModalDirectives} from '@agnos-ui/core/components/modal';
 import {createModal as createCoreModal, getModalDefaultConfig as getCoreDefaultConfig} from '@agnos-ui/core/components/modal';
 import type {ConfigValidator, PropsConfig, SlotContent, Widget, WidgetSlotContext} from '@agnos-ui/core/types';
 import {fadeTransition} from '../../services/transitions';
@@ -78,7 +72,7 @@ export interface ModalApi<Data> extends Omit<CoreApi, 'patch'> {
 	patch: ModalWidget<Data>['patch'];
 }
 
-export type ModalWidget<Data> = Widget<ModalProps<Data>, ModalState<Data>, ModalApi<Data>, ModalActions, ModalDirectives>;
+export type ModalWidget<Data> = Widget<ModalProps<Data>, ModalState<Data>, ModalApi<Data>, object, ModalDirectives>;
 
 const defaultConfigExtraProps: ModalExtraProps<any> = {
 	contentData: undefined,

core-bootstrap/src/components/pagination/pagination.ts

@@ -1,7 +1,7 @@
 import {extendWidgetProps} from '@agnos-ui/core/services/extendWidget';
 import type {SlotContent, Widget, WidgetFactory, WidgetSlotContext} from '@agnos-ui/core/types';
 import type {
-	PaginationActions,
+	PaginationApi,
 	PaginationDirectives,
 	PaginationProps as CoreProps,
 	PaginationState as CoreState,
@@ -104,7 +104,7 @@ interface PaginationExtraProps {
 export interface PaginationState extends CoreState, PaginationExtraProps {}
 export interface PaginationProps extends CoreProps, PaginationExtraProps {}
 
-export type PaginationWidget = Widget<PaginationProps, PaginationState, object, PaginationActions, PaginationDirectives>;
+export type PaginationWidget = Widget<PaginationProps, PaginationState, PaginationApi, object, PaginationDirectives>;
 
 const defaultConfigExtraProps: PaginationExtraProps = {
 	structure: undefined,

core-bootstrap/src/components/rating/rating.ts

@@ -1,10 +1,4 @@
-import type {
-	RatingActions,
-	RatingDirectives,
-	StarContext,
-	RatingState as CoreState,
-	RatingProps as CoreProps,
-} from '@agnos-ui/core/components/rating';
+import type {RatingApi, RatingDirectives, StarContext, RatingState as CoreState, RatingProps as CoreProps} from '@agnos-ui/core/components/rating';
 import {getRatingDefaultConfig as getCoreDefaultConfig, createRating as createCoreRating} from '@agnos-ui/core/components/rating';
 import {extendWidgetProps} from '@agnos-ui/core/services/extendWidget';
 import type {SlotContent, Widget, WidgetFactory} from '@agnos-ui/core/types';
@@ -26,7 +20,7 @@ interface RatingExtraProps {
 export interface RatingState extends CoreState, RatingExtraProps {}
 export interface RatingProps extends CoreProps, RatingExtraProps {}
 
-export type RatingWidget = Widget<RatingProps, RatingState, object, RatingActions, RatingDirectives>;
+export type RatingWidget = Widget<RatingProps, RatingState, RatingApi, object, RatingDirectives>;
 
 const defaultConfigExtraProps: RatingExtraProps = {
 	star: ({fill}: StarContext) => String.fromCharCode(fill === 100 ? 9733 : 9734),

core-bootstrap/src/components/select/select.ts

@@ -1,11 +1,4 @@
-import type {
-	ItemContext,
-	SelectActions,
-	SelectApi,
-	SelectDirectives,
-	SelectProps as CoreProps,
-	SelectState as CoreState,
-} from '@agnos-ui/core/components/select';
+import type {ItemContext, SelectApi, SelectDirectives, SelectProps as CoreProps, SelectState as CoreState} from '@agnos-ui/core/components/select';
 import {createSelect as createCoreSelect, getSelectDefaultConfig as getCoreDefaultConfig} from '@agnos-ui/core/components/select';
 import {extendWidgetProps} from '@agnos-ui/core/services/extendWidget';
 import type {PropsConfig, SlotContent, Widget, WidgetSlotContext} from '@agnos-ui/core/types';
@@ -51,7 +44,7 @@ interface SelectExtraProps<Item> {
 export interface SelectState<Item> extends CoreState<Item>, SelectExtraProps<Item> {}
 export interface SelectProps<Item> extends CoreProps<Item>, SelectExtraProps<Item> {}
 
-export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectActions<Item>, SelectDirectives<Item>>;
+export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, object, SelectDirectives<Item>>;
 
 const defaultConfigExtraProps: SelectExtraProps<any> = {
 	badgeLabel: ({itemContext}: SelectItemContext<any>) => itemContext.item,

core-bootstrap/src/components/slider/slider.ts

@@ -1,10 +1,4 @@
-import type {
-	SliderActions,
-	SliderDirectives,
-	SliderHandle,
-	SliderProps as CoreProps,
-	SliderState as CoreState,
-} from '@agnos-ui/core/components/slider';
+import type {SliderDirectives, SliderHandle, SliderProps as CoreProps, SliderState as CoreState} from '@agnos-ui/core/components/slider';
 import {createSlider as createCoreSlider, getSliderDefaultConfig as getCoreDefaultConfig} from '@agnos-ui/core/components/slider';
 import {extendWidgetProps} from '@agnos-ui/core/services/extendWidget';
 import type {SlotContent, Widget, WidgetFactory, WidgetSlotContext} from '@agnos-ui/core/types';
@@ -40,7 +34,7 @@ interface SliderExtraProps {
 export interface SliderState extends CoreState, SliderExtraProps {}
 export interface SliderProps extends CoreProps, SliderExtraProps {}
 
-export type SliderWidget = Widget<SliderProps, SliderState, object, SliderActions, SliderDirectives>;
+export type SliderWidget = Widget<SliderProps, SliderState, object, object, SliderDirectives>;
 
 const defaultConfigExtraProps: SliderExtraProps = {
 	structure: undefined,

core-bootstrap/src/scss/select.scss

@@ -6,5 +6,7 @@
 }
 
 .au-select-input {
+	border: 0;
+	flex-grow: 1;
 	outline: none;
 }

core/src/components/accordion/accordion.spec.ts

@@ -114,11 +114,13 @@ describe(`Accordion`, () => {
 	});
 
 	test(`itemVisibleState update properly`, () => {
+		const button = document.createElement('button');
 		const i = accordion.api.registerItem();
+		i.directives.buttonDirective(button);
 		expect(i.state$().visible).toBe(false);
-		i.actions.click();
+		button.click();
 		expect(i.state$().visible).toBe(true);
-		i.actions.click();
+		button.click();
 	});
 
 	test(`should expand all the items and close them`, () => {
@@ -277,12 +279,14 @@ describe(`Accordion`, () => {
 
 	test(`should not work click when item is disabled`, () => {
 		const element = document.createElement('div');
+		const button = document.createElement('button');
 		const i = accordion.api.registerItem({props: {disabled: true}});
 		i.directives.itemDirective(element);
+		i.directives.buttonDirective(button);
 		expectOpenItems(state, [false]);
 		i.patch({visible: true});
 		expectOpenItems(state, [true]);
-		i.actions.click();
+		button.click();
 		expectOpenItems(state, [true]);
 	});