Adding className as a common prop for all widgets

angular/demo/src/app/samples/modal/stack.route.ts

@@ -7,7 +7,7 @@ import {FormsModule} from '@angular/forms';
 	standalone: true,
 	imports: [AgnosUIAngularModule, CommonModule, FormsModule],
 	template: `
-		<button class="btn btn-primary" (click)="modalService.open({slotTitle: 'First modal', modalClass: 'modal-sm', slotDefault: recursiveModal})">
+		<button class="btn btn-primary" (click)="modalService.open({slotTitle: 'First modal', className: 'modal-sm', slotDefault: recursiveModal})">
 			Launch demo modal
 		</button>
 		<ng-template #recursiveModal let-widget="widget" let-state="state">

angular/lib/src/lib/accordion/accordion.component.ts

@@ -245,7 +245,7 @@ export class AccordionItemComponent implements OnChanges, AfterContentChecked, A
 	exportAs: 'auAccordion',
 	standalone: true,
 	host: {
-		'[class]': '"accordion " + state$().accordionClass',
+		'[class]': '"accordion " + state$().className',
 	},
 	hostDirectives: [
 		{
@@ -260,10 +260,11 @@ export class AccordionDirective implements OnChanges {
 	 * If `true`, only one item at the time can stay open.
 	 */
 	@Input() closeOthers: boolean | undefined;
+
 	/**
-	 * Classes to add on the accordion DOM element.
+	 * CSS classes to be applied on the widget main container
 	 */
-	@Input() accordionClass: string | undefined;
+	@Input() className: string | undefined;
 
 	/**
 	 * An event fired when an item is shown.

angular/lib/src/lib/alert/alert.component.ts

@@ -82,7 +82,7 @@
 		<div
 			*ngIf="!state().hidden"
 			[auUse]="widget.directives.transitionDirective"
-			class="au-alert d-flex w-100 alert alert-{{ state().type }}"
+			class="au-alert d-flex w-100 alert alert-{{ state().type }} {{ state().className }}"
 			role="alert"
 		>
 			<ng-template [auSlot]="state().slotStructure" [auSlotProps]="{state: state(), widget}"></ng-template>
@@ -163,6 +163,11 @@
 	@Output() shown = new EventEmitter<void>();
 
 	readonly defaultSlots = writable(defaultConfig);
+	/**
+	 * CSS classes to be applied on the widget main container
+	 */
+	@Input() className: string | undefined;
+
 	readonly _widget = callWidgetFactory(createAlert, 'alert', this.defaultSlots);
 	readonly widget = toSlotContextWidget(this._widget);
 	readonly api = this._widget.api;

angular/lib/src/lib/modal/modal.component.ts

@@ -152,7 +152,7 @@
 	template: `
 		<ng-template [auSlotDefault]="defaultSlots"><ng-content></ng-content></ng-template>
 		<div *ngIf="!state().backdropHidden" class="modal-backdrop {{ state().backdropClass }}" [auUse]="backdropDirective"></div>
-		<div *ngIf="!state().hidden" class="modal d-block {{ state().modalClass }}" [auUse]="modalDirective" (click)="widget.actions.modalClick($event)">
+		<div *ngIf="!state().hidden" class="modal d-block {{ state().className }}" [auUse]="modalDirective" (click)="widget.actions.modalClick($event)">
 			<div class="modal-dialog">
 				<div class="modal-content">
 					<ng-template [auSlot]="state().slotStructure" [auSlotProps]="{state: state(), widget}"></ng-template>
@@ -215,9 +215,9 @@
 	@Input() closeButton: boolean | undefined;
 
 	/**
-	 * Classes to add on the modal DOM element.
+	 * CSS classes to be applied on the widget main container
 	 */
-	@Input() modalClass: string | undefined;
+	@Input() className: string | undefined;
 
 	@Input() slotStructure: SlotContent<ModalContext>;
 	@ContentChild(ModalStructureDirective, {static: false})
@@ -260,6 +260,7 @@
 	@Output() shown = new EventEmitter<void>();
 
 	readonly defaultSlots = writable(defaultConfig);
+
 	readonly _widget = callWidgetFactory(createModal, 'modal', this.defaultSlots);
 	readonly widget = toSlotContextWidget(this._widget);
 	readonly api = this._widget.api;

angular/lib/src/lib/pagination/pagination.component.ts

@@ -404,7 +404,7 @@ export class PaginationComponent implements OnChanges, AfterContentChecked {
 	@Output() pageChange = new EventEmitter<number>(true);
 
 	/**
-	 * An input to add a custom class to the UL
+	 * CSS classes to be applied on the widget main container
 	 */
 	@Input() className: string | undefined;
 

angular/lib/src/lib/rating/rating.component.ts

@@ -129,7 +129,7 @@ export class RatingComponent implements ControlValueAccessor, OnChanges, AfterCo
 	@Input() tabindex: number | undefined;
 
 	/**
-	 * Classname to be applied on the rating container
+	 * CSS classes to be applied on the widget main container
 	 */
 	@Input() className: string | undefined;
 

angular/lib/src/lib/select/select.component.ts

@@ -40,7 +40,7 @@ export class SelectComponent<Item> implements OnChanges {
 	@Input() filterText: string | undefined;
 
 	/**
-	 * the class to attach to the select DOM element
+	 * CSS classes to be applied on the widget main container
 	 */
 	@Input() className: string | undefined;
 

core/lib/accordion.spec.ts

@@ -310,7 +310,7 @@ describe(`Accordion`, () => {
 	test(`should have default config`, () => {
 		accordion = createAccordion(getAccordionDefaultConfig());
 		const {stores} = accordion;
-		expect(stores.accordionClass$()).toBe('');
+		expect(stores.className$()).toBe('');
 		const i = accordion.api.registerItem();
 		const {stores: itemStores} = i;
 		const itemStoreValues = {

core/lib/accordion.ts

@@ -17,6 +17,7 @@ import type {Directive, SlotContent, Widget, WidgetSlotContext} from './types';
 import type {ReadableSignal} from '@amadeus-it-group/tansu';
 import {computed, readable, writable} from '@amadeus-it-group/tansu';
 import {noop} from './utils';
+import type {WidgetsCommonPropsAndState} from './commonProps';
 
 let itemId = 0;
 
@@ -49,14 +50,7 @@ function getItem(items: AccordionItemWidget[], itemId: string): AccordionItemWid
 	return items.find((item) => item.state$().itemId === itemId);
 }
 
-export interface AccordionCommonPropsAndState {
-	/**
-	 * Classes to add on the accordion DOM element.
-	 */
-	accordionClass: string;
-}
-
-export interface AccordionProps extends AccordionCommonPropsAndState {
+export interface AccordionProps extends WidgetsCommonPropsAndState {
 	/**
 	 * If `true`, only one item at the time can stay open.
 	 */
@@ -183,7 +177,7 @@ export interface AccordionProps extends AccordionCommonPropsAndState {
 	itemBodyClass: string;
 }
 
-export interface AccordionState extends AccordionCommonPropsAndState {
+export interface AccordionState extends WidgetsCommonPropsAndState {
 	/**
 	 * Array containing all the accordion-items contained in the accordion.
 	 */
@@ -373,7 +367,7 @@ const defaultAccordionConfig: AccordionProps = {
 	closeOthers: false,
 	onShown: noop,
 	onHidden: noop,
-	accordionClass: '',
+	className: '',
 	itemId: '',
 	itemDestroyOnHide: false,
 	itemDisabled: false,

core/lib/alert.spec.ts

@@ -24,6 +24,7 @@ describe(`Alert`, () => {
 
 	test(`should create alert with a default state`, () => {
 		expect(state).toEqual({
+			className: '',
 			dismissible: true,
 			slotDefault: undefined,
 			slotStructure: undefined,

core/lib/alert.ts

@@ -1,3 +1,4 @@
+import type {WidgetsCommonPropsAndState} from './commonProps';
 import type {ConfigValidator, PropsConfig} from './services';
 import {bindDirectiveNoArg, stateStores, typeBoolean, typeString, writablesForProps} from './services';
 import type {TransitionFn} from './transitions';
@@ -8,7 +9,7 @@ import {noop} from './utils';
 
 export type AlertContext = WidgetSlotContext<AlertWidget>;
 
-export interface AlertCommonPropsAndState {
+export interface AlertCommonPropsAndState extends WidgetsCommonPropsAndState {
 	/**
 	 * If `true`, alert can be dismissed by the user.
 	 * The close button (×) will be displayed and you can be notified of the event with the (close) output.
@@ -122,6 +123,7 @@ const defaultConfig: AlertProps = {
 	animation: true,
 	animationOnInit: false,
 	transition: fadeTransition,
+	className: '',
 };
 
 /**

core/lib/commonProps.ts

@@ -0,0 +1,6 @@
+export interface WidgetsCommonPropsAndState {
+	/**
+	 * CSS classes to be applied on the widget main container
+	 */
+	className: string;
+}

core/lib/index.ts

@@ -9,3 +9,4 @@ export * from './config';
 export * from './modal/modal';
 export * from './alert';
 export * from './accordion';
+export * from './commonProps';

core/lib/modal/modal.ts

@@ -18,6 +18,7 @@ import {promiseFromStore} from '../transitions/utils';
 import type {Widget, Directive, SlotContent, WidgetSlotContext} from '../types';
 import {noop} from '../utils';
 import {removeScrollbars, revertScrollbars} from './scrollbars';
+import type {WidgetsCommonPropsAndState} from '../commonProps';
 
 /**
  * Value present in the {@link ModalBeforeCloseEvent.result|result} property of the {@link ModalProps.onBeforeClose|onBeforeClose} event
@@ -39,7 +40,7 @@ export type ModalContext = WidgetSlotContext<ModalWidget>;
 /**
  * Properties of the modal widget that are also in the state of the modal.
  */
-export interface ModalCommonPropsAndState {
+export interface ModalCommonPropsAndState extends WidgetsCommonPropsAndState {
 	/**
 	 * Value of the aria-label attribute to put on the close button.
 	 */
@@ -62,11 +63,6 @@ export interface ModalCommonPropsAndState {
 	 */
 	container: HTMLElement | null;
 
-	/**
-	 * Classes to add on the modal DOM element.
-	 */
-	modalClass: string;
-
 	/**
 	 * Body of the modal.
 	 */
@@ -282,7 +278,7 @@ const defaultConfig: ModalProps = {
 	closeButton: true,
 	closeOnOutsideClick: true,
 	container: typeof window !== 'undefined' ? document.body : null,
-	modalClass: '',
+	className: '',
 	modalTransition: fadeTransition, // TODO: is it ok to depend on bootstrap transition?
 	onBeforeClose: noop,
 	onVisibleChange: noop,

core/lib/pagination.ts

@@ -5,6 +5,7 @@ import {clamp, isNumber} from './services/checks';
 import {typeBoolean, typeFunction, typeNumber, typeString} from './services/writables';
 import type {Widget, SlotContent, WidgetSlotContext} from './types';
 import {noop} from './utils';
+import type {WidgetsCommonPropsAndState} from './commonProps';
 
 /**
  * A type for the slot context of the pagination widget
@@ -21,7 +22,7 @@ export interface PaginationNumberContext extends PaginationContext {
 	displayedPage: number;
 }
 
-export interface PaginationCommonPropsAndState {
+export interface PaginationCommonPropsAndState extends WidgetsCommonPropsAndState {
 	/**
 	 * The current page.
 	 *
@@ -105,12 +106,6 @@ export interface PaginationCommonPropsAndState {
 	 */
 	boundaryLinks: boolean;
 
-	/**
-	 * An input to add a custom class to the UL
-	 * @defaultValue ''
-	 */
-	className: string;
-
 	/**
 	 * The template to use for the ellipsis slot
 	 * for I18n, we suggest to use the global configuration

core/lib/rating.ts

@@ -4,6 +4,7 @@ import {INVALID_VALUE, bindableDerived, stateStores, writablesForProps} from './
 import {isNumber} from './services/checks';
 import {typeBoolean, typeFunction, typeNumber, typeString} from './services/writables';
 import type {SlotContent, Widget} from './types';
+import type {WidgetsCommonPropsAndState} from './commonProps';
 
 export interface StarContext {
 	/**
@@ -16,7 +17,7 @@ export interface StarContext {
 	index: number;
 }
 
-export interface RatingCommonPropsAndState {
+export interface RatingCommonPropsAndState extends WidgetsCommonPropsAndState {
 	/**
 	 * The current rating. Could be a decimal value like `3.75`.
 	 */
@@ -50,11 +51,6 @@ export interface RatingCommonPropsAndState {
 	 */
 	tabindex: number;
 
-	/**
-	 * Classname to be applied on the rating container
-	 */
-	className: string;
-
 	/**
 	 * The template to override the way each star is displayed.
 	 */

core/lib/select.ts

@@ -4,13 +4,9 @@ import {createHasFocus} from './services/focustrack';
 import type {PropsConfig} from './services/stores';
 import {stateStores, writablesForProps} from './services/stores';
 import type {Widget} from './types';
+import type {WidgetsCommonPropsAndState} from './commonProps';
 
-export interface SelectCommonPropsAndState<Item> {
-	/**
-	 * the class to attach to the select DOM element
-	 */
-	className: string;
-
+export interface SelectCommonPropsAndState<Item> extends WidgetsCommonPropsAndState {
 	/**
 	 * List of selected items
 	 */

react/demo/app/samples/modal/Stack.route.tsx

@@ -27,7 +27,7 @@ const ModalBody = ({widget, state}: ModalContext) => (
 );
 
 const StackDemo = () => (
-	<button className="btn btn-primary" onClick={() => openModal({slotTitle: 'First modal', modalClass: 'modal-sm', slotDefault: ModalBody})}>
+	<button className="btn btn-primary" onClick={() => openModal({slotTitle: 'First modal', className: 'modal-sm', slotDefault: ModalBody})}>
 		Launch demo modal
 	</button>
 );

react/lib/Accordion.tsx

@@ -86,7 +86,7 @@ export const Accordion = forwardRef(function Accordion(props: PropsWithChildren<
 	const refSetAccordion = useDirective(widget.directives.accordionDirective);
 	return (
 		<AccordionDIContext.Provider value={widget.api}>
-			<div className={`accordion ${state.accordionClass}`} ref={refSetAccordion}>
+			<div className={`accordion ${state.className}`} ref={refSetAccordion}>
 				{props.children}
 			</div>
 		</AccordionDIContext.Provider>

react/lib/Alert.tsx

@@ -45,7 +45,7 @@ export const Alert = forwardRef(function Alert(props: PropsWithChildren<Partial<
 	return (
 		<>
 			{state.hidden ? null : (
-				<div className={`au-alert d-flex alert w-100 alert-${state.type}`} role="alert" ref={refTransition}>
+				<div className={`au-alert d-flex alert w-100 alert-${state.type} ${state.className}`} role="alert" ref={refTransition}>
 					<Slot slotContent={state.slotStructure} props={slotContext}></Slot>
 				</div>
 			)}

react/lib/modal/Modal.tsx

@@ -65,7 +65,7 @@ export const Modal = forwardRef(function Modal(props: PropsWithChildren<Partial<
 			<Portal container={state.container}>
 				{state.backdropHidden ? null : <div className={`modal-backdrop ${state.backdropClass}`} ref={refSetBackdrop} />}
 				{state.hidden ? null : (
-					<div className={`modal d-block ${state.modalClass}`} ref={refSetModal} onClick={widget.actions.modalClick}>
+					<div className={`modal d-block ${state.className}`} ref={refSetModal} onClick={widget.actions.modalClick}>
 						<div className="modal-dialog">
 							<div className="modal-content">
 								<Slot slotContent={state.slotStructure} props={slotContext} />

svelte/demo/samples/modal/Stack.route.svelte

@@ -3,6 +3,6 @@
 	import StackModal from './StackModal.svelte';
 </script>
 
-<button class="btn btn-primary" on:click={() => openModal({slotTitle: 'First modal', modalClass: 'modal-sm', slotDefault: StackModal})}
+<button class="btn btn-primary" on:click={() => openModal({slotTitle: 'First modal', className: 'modal-sm', slotDefault: StackModal})}
 	>Launch demo modal</button
 >

svelte/lib/accordion/Accordion.svelte

@@ -17,7 +17,7 @@
 	const widget = callWidgetFactory(createAccordion, 'accordion', $$slots as any, {});
 	const {
 		directives: {accordionDirective},
-		stores: {accordionClass$},
+		stores: {className$},
 	} = widget;
 	widget.patch({
 		onItemCollapsedChange: (event) => {
@@ -37,6 +37,6 @@
 	$: widget.patchChangedProps($$props);
 </script>
 
-<div class="accordion {$accordionClass$}" use:accordionDirective>
+<div class="accordion {$className$}" use:accordionDirective>
 	<slot />
 </div>

svelte/lib/alert/Alert.svelte

@@ -41,7 +41,7 @@
 </script>
 
 {#if !$hidden$}
-	<div class="au-alert d-flex alert w-100 alert-{$state$.type}" role="alert" use:transitionDirective>
+	<div class="au-alert d-flex alert w-100 alert-{$state$.type} {$state$.className}" role="alert" use:transitionDirective>
 		<Slot slotContent={$slotStructure$} props={slotContext} let:component let:props>
 			<slot slot="slot" name="structure" let:props {...props} />
 			<svelte:component this={component} {...props}>