feat: progressbar slot content renamed to slot structure

angular/demo/src/app/samples/progressbar/cofee-progressbar.component.ts

@@ -0,0 +1,26 @@
+import {type ProgressbarWidget, SlotComponent} from '@agnos-ui/angular';
+import {Component} from '@angular/core';
+
+@Component({
+	standalone: true,
+	template: `
+		<div class="position-relative" style="height: 300px">
+			<div class="cup">
+				<div class="cup-fill-parent">
+					<div class="cup-fill" [style.height.px]="state.value * 1.7">
+						@if (state.value >= 50) {
+							<div class="bubble bubble-1"></div>
+							<div class="bubble bubble-2"></div>
+							<div class="bubble bubble-3"></div>
+						}
+					</div>
+				</div>
+			</div>
+		</div>
+	`,
+	styles: "@import '@agnos-ui/common/samples/progressbar/custom.scss';",
+	host: {
+		style: 'display: contents;',
+	},
+})
+export default class CoffeeProgressbarComponent extends SlotComponent<ProgressbarWidget> {}

angular/demo/src/app/samples/progressbar/fullCustom.route.ts

@@ -1,32 +1,18 @@
-import {ProgressbarComponent, ProgressbarContentDirective} from '@agnos-ui/angular';
+import {ProgressbarComponent, provideWidgetsConfig} from '@agnos-ui/angular';
 import type {OnDestroy} from '@angular/core';
 import {Component} from '@angular/core';
 import type {Subscription} from 'rxjs';
 import {interval, takeWhile} from 'rxjs';
+import CoffeeProgressbarComponent from './cofee-progressbar.component';
 
 @Component({
 	standalone: true,
-	imports: [ProgressbarComponent, ProgressbarContentDirective],
+	imports: [ProgressbarComponent],
+	providers: [provideWidgetsConfig(() => ({progressbar: {slotStructure: CoffeeProgressbarComponent}}))],
 	template: `
 		<div class="d-flex align-items-center flex-wrap">
 			<div style="width: 350px">
-				<div auProgressbar #progressbar [auValue]="value">
-					<ng-template auProgressbarContent let-state="state">
-						<div class="position-relative" style="height: 300px">
-							<div class="cup">
-								<div class="cup-fill-parent">
-									<div class="cup-fill" [style.height.px]="value * 1.7">
-										@if (value >= 50) {
-											<div class="bubble bubble-1"></div>
-											<div class="bubble bubble-2"></div>
-											<div class="bubble bubble-3"></div>
-										}
-									</div>
-								</div>
-							</div>
-						</div>
-					</ng-template>
-				</div>
+				<div auProgressbar #progressbar [auValue]="value"></div>
 			</div>
 			<div class="d-flex flex-column justify-content-evenly h-100 ms-5">
 				<div class="btn-group" role="group">

angular/lib/src/agnos-ui-angular.module.ts

@@ -29,7 +29,7 @@ import {
 	AccordionItemStructureDirective,
 } from './components/accordion/accordion.component';
 import {SliderComponent, SliderHandleDirective, SliderLabelDirective, SliderStructureDirective} from './components/slider/slider.component';
-import {ProgressbarComponent, ProgressbarContentDirective} from './components/progressbar/progressbar.component';
+import {ProgressbarComponent, ProgressbarStructureDirective} from './components/progressbar/progressbar.component';
 import {ToastBodyDirective, ToastComponent, ToastStructureDirective} from './components/toast/toast.component';
 /* istanbul ignore next */
 const components = [
@@ -67,7 +67,7 @@ const components = [
 	SliderLabelDirective,
 	SliderStructureDirective,
 	ProgressbarComponent,
-	ProgressbarContentDirective,
+	ProgressbarStructureDirective,
 	ToastComponent,
 	ToastStructureDirective,
 	ToastBodyDirective,

angular/lib/src/components/progressbar/progressbar.component.ts

@@ -14,20 +14,20 @@ import {NgClass} from '@angular/common';
 import type {AfterContentChecked} from '@angular/core';
 import {ChangeDetectionStrategy, Component, ContentChild, Directive, Input, TemplateRef, ViewChild, inject} from '@angular/core';
 
-@Directive({selector: 'ng-template[auProgressbarContent]', standalone: true})
-export class ProgressbarContentDirective {
+@Directive({selector: 'ng-template[auProgressbarStructure]', standalone: true})
+export class ProgressbarStructureDirective {
 	public templateRef = inject(TemplateRef<ProgressbarContext>);
-	static ngTemplateContextGuard(_dir: ProgressbarContentDirective, context: unknown): context is ProgressbarContext {
+	static ngTemplateContextGuard(_dir: ProgressbarStructureDirective, context: unknown): context is ProgressbarContext {
 		return true;
 	}
 }
 
 @Component({
 	standalone: true,
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgClass, SlotDirective, ProgressbarContentDirective],
+	imports: [NgClass, SlotDirective, ProgressbarStructureDirective],
 	template: `
-		<ng-template auProgressbarContent #content let-state="state" let-widget="widget">
+		<ng-template auProgressbarStructure #structure let-state="state" let-widget="widget">
 			<div class="progress" [style.height]="state.height">
 				<div
 					class="progress-bar"
@@ -43,14 +43,14 @@ export class ProgressbarContentDirective {
 	`,
 })
 export class ProgressbarDefaultSlotsComponent {
-	@ViewChild('content', {static: true}) content: TemplateRef<ProgressbarContext>;
+	@ViewChild('structure', {static: true}) structure: TemplateRef<ProgressbarContext>;
 }
 
-export const progressbarDefaultSlotContent = new ComponentTemplate(ProgressbarDefaultSlotsComponent, 'content');
+export const progressbarDefaultSlotStructure = new ComponentTemplate(ProgressbarDefaultSlotsComponent, 'structure');
 
 export type PartialProgressbarProps = Partial<ProgressbarProps>;
 const defaultConfig: PartialProgressbarProps = {
-	slotContent: progressbarDefaultSlotContent,
+	slotStructure: progressbarDefaultSlotStructure,
 };
 
 @Component({
@@ -68,7 +68,7 @@ const defaultConfig: PartialProgressbarProps = {
 	},
 	template: `
 		<ng-template [auSlotDefault]="defaultSlots"><ng-content></ng-content></ng-template>
-		<ng-template [auSlot]="state().slotContent" [auSlotProps]="{state: state(), widget}"></ng-template>
+		<ng-template [auSlot]="state().slotStructure" [auSlotProps]="{state: state(), widget}"></ng-template>
 	`,
 })
 export class ProgressbarComponent extends BaseWidgetDirective<ProgressbarWidget> implements AfterContentChecked {
@@ -100,8 +100,9 @@ export class ProgressbarComponent extends BaseWidgetDirective<ProgressbarWidget>
 	@Input('auClassName') className: string | undefined;
 
 	@Input('auSlotDefault') slotDefault: SlotContent<ProgressbarContext>;
-	@Input('auSlotContent') slotContent: SlotContent<ProgressbarContext>;
-	@ContentChild(ProgressbarContentDirective, {static: false}) slotContentFromContent: ProgressbarContentDirective | undefined;
+
+	@Input('auSlotStructure') slotStructure: SlotContent<ProgressbarContext>;
+	@ContentChild(ProgressbarStructureDirective, {static: false}) slotStructureFromContent: ProgressbarStructureDirective | undefined;
 
 	/**
 	 * Height of the progressbar, can be any valid css height value.
@@ -127,8 +128,9 @@ export class ProgressbarComponent extends BaseWidgetDirective<ProgressbarWidget>
 	readonly _widget = callWidgetFactory({factory: createProgressbar, widgetName: 'progressbar', defaultConfig: this.defaultSlots, events: {}});
 
 	ngAfterContentChecked(): void {
-		this._widget.patch({
-			slotContent: this.slotContentFromContent?.templateRef,
+		this._widget.patchSlots({
+			slotDefault: undefined,
+			slotStructure: this.slotStructureFromContent?.templateRef,
 		});
 	}
 }

core/src/components/progressbar/progressbar.ts

@@ -28,9 +28,9 @@ export interface ProgressbarCommonPropsAndState extends WidgetsCommonPropsAndSta
 	 */
 	ariaLabel: string;
 	/**
-	 * Global template for the Progressbar content.
+	 * Global template for the Progressbar.
 	 */
-	slotContent: SlotContent<ProgressbarContext>;
+	slotStructure: SlotContent<ProgressbarContext>;
 	/**
 	 * Label of the progress.
 	 */
@@ -90,7 +90,7 @@ const defaultConfig: ProgressbarProps = {
 	value: 0,
 	ariaLabel: 'Progressbar',
 	className: '',
-	slotContent: undefined,
+	slotStructure: undefined,
 	slotDefault: undefined,
 	height: '',
 	striped: false,

react/demo/src/app/samples/progressbar/Coffee.tsx

@@ -0,0 +1,20 @@
+import type {AdaptSlotContentProps} from '@agnos-ui/react/types';
+import type {ProgressbarContext} from '@agnos-ui/react/components/progressbar';
+
+export const Coffee = ({state}: AdaptSlotContentProps<ProgressbarContext>) => (
+	<div className="position-relative" style={{height: '300px'}}>
+		<div className="cup">
+			<div className="cup-fill-parent">
+				<div className="cup-fill" style={{height: `${1.7 * state.percentage}px`}}>
+					{state.percentage >= 50 ? (
+						<>
+							<div className="bubble bubble-1"></div>
+							<div className="bubble bubble-2"></div>
+							<div className="bubble bubble-3"></div>
+						</>
+					) : null}
+				</div>
+			</div>
+		</div>
+	</div>
+);

react/demo/src/app/samples/progressbar/FullCustom.route.tsx

@@ -1,26 +1,7 @@
-import type {ProgressbarContext} from '@agnos-ui/react/components/progressbar';
-import type {AdaptSlotContentProps} from '@agnos-ui/react/types';
 import {Progressbar} from '@agnos-ui/react/components/progressbar';
 import {useEffect, useState} from 'react';
 import '@agnos-ui/common/samples/progressbar/custom.scss';
-
-const CustomContent = ({state}: AdaptSlotContentProps<ProgressbarContext>) => (
-	<div className="position-relative" style={{height: '300px'}}>
-		<div className="cup">
-			<div className="cup-fill-parent">
-				<div className="cup-fill" style={{height: `${1.7 * state.percentage}px`}}>
-					{state.percentage >= 50 ? (
-						<>
-							<div className="bubble bubble-1"></div>
-							<div className="bubble bubble-2"></div>
-							<div className="bubble bubble-3"></div>
-						</>
-					) : null}
-				</div>
-			</div>
-		</div>
-	</div>
-);
+import {Coffee} from './Coffee';
 
 const FullCustomDemo = () => {
 	const [value, setValue] = useState(0);
@@ -47,7 +28,7 @@ const FullCustomDemo = () => {
 	return (
 		<div className="d-flex align-items-center flex-wrap">
 			<div style={{width: '350px'}}>
-				<Progressbar value={value} slotContent={CustomContent} />
+				<Progressbar value={value} slotStructure={Coffee} />
 			</div>
 			<div className="d-flex flex-column justify-content-evenly h-100 ms-5">
 				<div className="btn-group" role="group">

react/lib/src/components/progressbar/progressbar.tsx

@@ -28,7 +28,7 @@ function DefaultSlotContent(slotContext: ProgressbarContext) {
 }
 
 const defaultConfig: Partial<ProgressbarProps> = {
-	slotContent: DefaultSlotContent,
+	slotStructure: DefaultSlotContent,
 };
 
 export const Progressbar = (props: PropsWithChildren<Partial<ProgressbarProps>>) => {
@@ -43,7 +43,7 @@ export const Progressbar = (props: PropsWithChildren<Partial<ProgressbarProps>>)
 			aria-valuemax={state.max}
 			aria-valuetext={state.ariaValueText}
 		>
-			<Slot slotContent={state.slotContent} props={slotContext} />
+			<Slot slotContent={state.slotStructure} props={slotContext} />
 		</div>
 	);
 };

svelte/demo/src/app/samples/progressbar/Coffee.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import {type ProgressbarSlots} from '@agnos-ui/svelte/components/progressbar';
-	type $$Props = ProgressbarSlots['content'];
+	type $$Props = ProgressbarSlots['structure'];
 	type $$Slots = ProgressbarSlots;
 
 	export let state: $$Props['state'];

svelte/demo/src/app/samples/progressbar/FullCustom.route.svelte

@@ -27,7 +27,7 @@
 
 <div class="d-flex align-items-center flex-wrap">
 	<div style="width: 350px">
-		<Progressbar {value} slotContent={Coffee} />
+		<Progressbar {value} slotStructure={Coffee} />
 	</div>
 	<div class="d-flex flex-column justify-content-evenly h-100 ms-5">
 		<div class="btn-group" role="group">

svelte/lib/src/components/progressbar/Progressbar.svelte

@@ -3,9 +3,9 @@
 	import {createProgressbar} from '@agnos-ui/svelte-headless/components/progressbar';
 	import {Slot} from '@agnos-ui/svelte-headless/slot';
 	import {callWidgetFactory} from '@agnos-ui/svelte-headless/config';
-	import ProgressbarDefaultContent from './ProgressbarDefaultContent.svelte';
+	import ProgressbarDefaultStructure from './ProgressbarDefaultStructure.svelte';
 	const defaultConfig: Partial<Props> = {
-		slotContent: ProgressbarDefaultContent,
+		slotStructure: ProgressbarDefaultStructure,
 	};
 </script>
 
@@ -15,7 +15,7 @@
 	type $$Slots = Slots; // eslint-disable-line @typescript-eslint/no-unused-vars
 	export const widget = callWidgetFactory({factory: createProgressbar, widgetName: 'progressbar', $$slots, $$props, defaultConfig, events: {}});
 	const {
-		stores: {slotContent$, ariaLabel$, value$, min$, max$, ariaValueText$},
+		stores: {slotStructure$, ariaLabel$, value$, min$, max$, ariaValueText$},
 		state$,
 	} = widget;
 
@@ -32,11 +32,11 @@
 	aria-valuemax={$max$}
 	aria-valuetext={$ariaValueText$}
 >
-	<Slot slotContent={$slotContent$} props={slotContext} let:component let:props>
-		<slot slot="slot" name="content" let:props {...props} />
+	<Slot slotContent={$slotStructure$} props={slotContext} let:component let:props>
+		<slot slot="slot" name="structure" let:props {...props} />
 		<svelte:component this={component} {...props}>
 			<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
-			<slot name="content" slot="content" let:state let:widget {state} {widget} />
+			<slot name="structure" slot="structure" let:state let:widget {state} {widget} />
 		</svelte:component>
 	</Slot>
 </div>

svelte/lib/src/components/progressbar/ProgressbarDefaultContent.svelte → svelte/lib/src/components/progressbar/ProgressbarDefaultStructure.svelte

@@ -3,7 +3,7 @@
 	import type {ProgressbarSlots} from '@agnos-ui/svelte-headless/components/progressbar';
 
 	// cf https://github.com/ota-meshi/eslint-plugin-svelte/issues/348
-	type $$Props = ProgressbarSlots['content']; // eslint-disable-line @typescript-eslint/no-unused-vars
+	type $$Props = ProgressbarSlots['structure']; // eslint-disable-line @typescript-eslint/no-unused-vars
 	// cf https://github.com/ota-meshi/eslint-plugin-svelte/issues/348
 	type $$Slots = ProgressbarSlots; // eslint-disable-line @typescript-eslint/no-unused-vars
 
@@ -24,7 +24,7 @@
 			<slot slot="slot" let:props {...props} />
 			<svelte:component this={component} {...props}>
 				<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
-				<slot name="content" slot="content" let:state let:widget {state} {widget} />
+				<slot name="structure" slot="structure" let:state let:widget {state} {widget} />
 			</svelte:component>
 		</Slot>
 	</div>