feat(drawer): Add inline version

Author: MarkoOleksiyenko

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

@@ -219,7 +219,7 @@ export class DrawerComponent extends BaseWidgetDirective<DrawerWidget> {
 	/**
 	 * CSS classes to be applied on the widget main container
 	 *
-	 * @defaultValue `'w-full'`
+	 * @defaultValue `''`
 	 */
 	readonly className = input<string>(undefined, {alias: 'auClassName'});
 
@@ -230,6 +230,14 @@ export class DrawerComponent extends BaseWidgetDirective<DrawerWidget> {
 	 */
 	readonly resizable = input(undefined, {alias: 'auResizable', transform: auBooleanAttribute});
 
+	/**
+	 * If `true`, the drawer is inline.
+	 * When inline mode is enabled, the drawer stays in the document flow and moves content as it expands/resizes.
+	 *
+	 * @defaultValue `false`
+	 */
+	readonly inline = input(undefined, {alias: 'auInline', transform: auBooleanAttribute});
+
 	/**
 	 * An event emitted when the drawer size changes (width or height depending on the orientation).
 	 *

angular/demo/bootstrap/src/app/samples/drawer/inline.route.ts

@@ -0,0 +1,72 @@
+import type {DrawerPositions} from '@agnos-ui/angular-bootstrap';
+import {DrawerComponent, DrawerHeaderDirective} from '@agnos-ui/angular-bootstrap';
+import {Component, signal} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+
+@Component({
+	template: `
+		<button class="btn btn-primary mb-3" (click)="toggleDrawer(drawer)">Toggle Inline Drawer</button>
+		<div class="d-flex align-items-center mb-3">
+			<label for="drawerPlacement" class="me-3">Placement:</label>
+			<select id="drawerPlacement" [(ngModel)]="drawerPlacement" class="w-auto form-select">
+				<option value="inline-start">Left</option>
+				<option value="inline-end">Right</option>
+				<option value="block-start">Top</option>
+				<option value="block-end">Bottom</option>
+			</select>
+		</div>
+
+		<div class="d-flex demo-inline-drawer" [class.flex-column]="drawerPlacement().includes('block')">
+			<div [style.order]="drawerPlacement().endsWith('end') ? 2 : 1">
+				<au-component #drawer auDrawer [auClassName]="drawerPlacement()" auResizable auInline auVisible>
+					<ng-template auDrawerHeader>
+						<h2>Inline Drawer</h2>
+						<button class="btn-close ms-auto" (click)="drawer.api.close()" aria-label="Close"></button>
+					</ng-template>
+					<div class="p-3">
+						<h6>Drawer Content</h6>
+						<ul>
+							<li>No backdrop overlay</li>
+							<li>Stays in document flow</li>
+							<li>Pushes page content</li>
+							<li>Page remains scrollable</li>
+							<li>Fully interactable</li>
+						</ul>
+					</div>
+				</au-component>
+			</div>
+
+			<div class="flex-grow-1 p-3" [style.order]="drawerPlacement().endsWith('end') ? 1 : 2">
+				<h6>Main Page Content</h6>
+				<p>This content is pushed aside by the inline drawer. You can interact with everything on this page even when the drawer is open.</p>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+				<button class="btn btn-secondary">Clickable Button</button>
+				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+				<input type="text" class="form-control mt-2" placeholder="Type here..." />
+				<p class="mt-2">
+					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+					proident.
+				</p>
+			</div>
+		</div>
+	`,
+	styles: `
+		.demo-inline-drawer {
+			border: 1px solid #dee2e6;
+			padding: 1rem;
+			border-radius: 0.375rem;
+		}
+	`,
+	imports: [DrawerComponent, DrawerHeaderDirective, FormsModule],
+})
+export default class InlineDrawerComponent {
+	readonly drawerPlacement = signal<DrawerPositions>('inline-start');
+
+	async toggleDrawer(drawer: DrawerComponent) {
+		if (drawer.state.visible()) {
+			await drawer.api.close();
+		} else {
+			await drawer.api.open();
+		}
+	}
+}

core-bootstrap/src/scss/drawer.scss

@@ -7,10 +7,9 @@
 
 	display: inline-flex;
 	flex-direction: column;
-	background: #fff;
-	box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
+	flex-shrink: 0;
+	background-color: var(--#{$prefix}body-bg, #fff);
 	z-index: var(--#{$prefix}drawer-z-index);
-
 	--#{$prefix}drawer-size: max-content;
 	--#{$prefix}drawer-min-size: 0;
 	--#{$prefix}drawer-max-size: none;
@@ -49,6 +48,7 @@
 	&.inline-start {
 		inset-inline-start: 0;
 		inset-block: 0;
+		border-inline-end: 1px solid #e2e2e2;
 		.au-splitter {
 			inset-block: 0;
 			inset-inline: auto calc(var(--#{$prefix}drawer-splitter-size) / -2);
@@ -58,6 +58,7 @@
 	&.inline-end {
 		inset-inline-end: 0;
 		inset-block: 0;
+		border-inline-start: 1px solid #e2e2e2;
 		.au-splitter {
 			inset-block: 0;
 			inset-inline: calc(var(--#{$prefix}drawer-splitter-size) auto / -2);
@@ -68,6 +69,7 @@
 	&.block-start {
 		inset-inline: 0;
 		inset-block: 0;
+		border-block-end: 1px solid #e2e2e2;
 		.au-splitter {
 			inset-block: auto calc(var(--#{$prefix}drawer-splitter-size) / -2);
 			inset-inline: 0;
@@ -77,13 +79,17 @@
 	&.block-end {
 		inset-inline: 0;
 		inset-block-end: 0;
+		border-block-start: 1px solid #e2e2e2;
 		.au-splitter {
 			inset-block: calc(var(--#{$prefix}drawer-splitter-size) auto / -2);
 			inset-inline: 0;
 		}
 	}
 
 	.au-drawer-header {
+		display: inline-flex;
+		align-items: center;
+		width: 100%;
 		padding: 0.75rem 1rem;
 		font-weight: 600;
 		border-bottom: 1px solid #e2e2e2;

core/src/components/drawer/drawer.spec.ts

@@ -304,6 +304,30 @@ describe(`Drawer`, () => {
 		testArea.removeChild(drawerElement);
 	});
 
+	test(`should properly initialize inline drawer and hide backdrop`, () => {
+		testArea.innerHTML = `
+				<div id="drawerElement"></div>
+			`;
+		const drawer = createDrawer({
+			props: {
+				bodyScroll: false,
+				backdrop: true,
+				inline: true,
+			},
+		});
+
+		const drawerElement = document.getElementById('drawerElement')!;
+		const directive = drawer.directives.drawerDirective(drawerElement);
+
+		expect(drawer.stores.inline$()).toBe(true);
+		expect(drawer.stores.backdropHidden$()).toBe(true);
+		expect(drawer.stores.container$()).toBeNull();
+
+		expect(drawerElement.getAttribute('style')).toContain('relative');
+
+		directive?.destroy?.();
+	});
+
 	describe('checks events', () => {
 		test('onMinimizedChange when mouse is in the viewport', () => {
 			const {destroy, mouseDown, mouseMove, mouseUp, state} = prepareTest('50px');

core/src/components/drawer/drawer.ts

@@ -33,7 +33,7 @@ interface DrawerCommonPropsAndState extends WidgetsCommonPropsAndState {
 	/**
 	 * CSS classes to be applied on the widget main container
 	 *
-	 * @defaultValue `'w-full'`
+	 * @defaultValue `''`
 	 */
 	className: string;
 	/**
@@ -72,6 +72,13 @@ interface DrawerCommonPropsAndState extends WidgetsCommonPropsAndState {
 	 * @defaultValue `null`
 	 */
 	size: number | null;
+	/**
+	 * If `true`, the drawer is inline.
+	 * When inline mode is enabled, the drawer stays in the document flow and moves content as it expands/resizes.
+	 *
+	 * @defaultValue `false`
+	 */
+	inline: boolean;
 }
 
 /**
@@ -290,7 +297,7 @@ const defaultDrawerConfig: DrawerProps = {
 	ariaLabelledBy: '',
 	backdropClass: '',
 	backdropTransition: noop,
-	className: 'w-full',
+	className: '',
 	visible: false,
 	container: typeof window !== 'undefined' ? document.body : null,
 	transition: noop,
@@ -307,6 +314,7 @@ const defaultDrawerConfig: DrawerProps = {
 	bodyScroll: false,
 	size: null,
 	focusOnInit: true,
+	inline: false,
 };
 
 const configValidator: ConfigValidator<DrawerProps> = {
@@ -332,6 +340,7 @@ const configValidator: ConfigValidator<DrawerProps> = {
 	bodyScroll: typeBoolean,
 	size: typeNumberOrNull,
 	focusOnInit: typeBoolean,
+	inline: typeBoolean,
 };
 
 /**
@@ -342,14 +351,14 @@ const configValidator: ConfigValidator<DrawerProps> = {
 export const createDrawer: WidgetFactory<DrawerWidget> = createWidgetFactory('drawer', (config?: PropsConfig<DrawerProps>) => {
 	const [
 		{
-			backdrop$,
+			backdrop$: _backdrop$,
 			backdropTransition$,
 			backdropClass$,
-			bodyScroll$,
+			bodyScroll$: _bodyScroll$,
 			transition$,
 			verticalTransition$,
 			visible$: requestedVisible$,
-			container$,
+			container$: _container$,
 			className$,
 			size$: _dirtySize$,
 			animated$,
@@ -363,11 +372,17 @@ export const createDrawer: WidgetFactory<DrawerWidget> = createWidgetFactory('dr
 			onMaximizedChange$,
 			onResizingChange$,
 			focusOnInit$,
+			inline$,
 			...stateProps
 		},
 		patch,
 	] = writablesForProps(defaultDrawerConfig, config, configValidator);
 
+	// Override props when inline mode is enabled
+	const backdrop$ = computed(() => (inline$() ? false : _backdrop$()));
+	const bodyScroll$ = computed(() => (inline$() ? true : _bodyScroll$()));
+	const container$ = computed(() => (inline$() ? null : _container$()));
+
 	const size$ = bindableProp(_dirtySize$, onSizeChange$, (value) => (value ? Math.round(value) : value));
 
 	const isVertical$ = computed(() => {
@@ -397,14 +412,17 @@ export const createDrawer: WidgetFactory<DrawerWidget> = createWidgetFactory('dr
 		createAttributesDirective(() => ({
 			attributes: {
 				class: className$,
-				role: readable('dialog'),
-				'aria-describedby': ariaDescribedBy$,
-				'aria-labelledby': ariaLabelledBy$,
-				'aria-modal': readable('true'),
+				role: computed(() => (inline$() ? 'complementary' : 'dialog')),
+				'aria-describedby': computed(() => ariaDescribedBy$() || undefined),
+				'aria-labelledby': computed(() => ariaLabelledBy$() || undefined),
+				'aria-modal': computed(() => (inline$() ? undefined : 'true')),
 				tabIndex: readable('-1'),
 			},
 			styles: {
 				position: computed(() => {
+					if (inline$()) {
+						return 'relative';
+					}
 					const container = container$();
 					return container && isBrowserHTMLElement(container) && container !== document.body ? 'relative' : 'fixed';
 				}),
@@ -578,6 +596,7 @@ export const createDrawer: WidgetFactory<DrawerWidget> = createWidgetFactory('dr
 			backdropHidden$,
 			hidden$,
 			isVertical$,
+			inline$,
 		}),
 		patch,
 		api: {

demo/src/routes/docs/[framework]/components/drawer/examples/+page.svelte

@@ -3,13 +3,25 @@
 	import Section from '$lib/layout/Section.svelte';
 	import sampleBasic from '@agnos-ui/samples/bootstrap/drawer/basic';
 	import sampleBody from '@agnos-ui/samples/bootstrap/drawer/body';
+	import sampleInline from '@agnos-ui/samples/bootstrap/drawer/inline';
 	import samplePosition from '@agnos-ui/samples/bootstrap/drawer/position';
 	import sampleSizes from '@agnos-ui/samples/bootstrap/drawer/sizes';
 </script>
 
 <Section label="Basic drawer" id="basic" level={2}>
 	<Sample title="Basic example" sample={sampleBasic} height={190} noresize />
 </Section>
+<Section label="Inline drawer" id="inline" level={2}>
+	<p>
+		An inline drawer stays in the document flow and pushes the page content instead of overlaying it. The page remains fully scrollable and
+		interactable.
+	</p>
+	<p>
+		It is your responsibility to properly position the drawer in the context. In case of flex layout, make sure to set the correct order for the
+		drawer and page content based on the drawer's placement.
+	</p>
+	<Sample title="Inline drawer example" sample={sampleInline} height={600} noresize />
+</Section>
 <Section label="Drawer size" id="positions" level={2}>
 	<p>You can customize the drawer's width or height by adjusting the following CSS variables:</p>
 	<p class="ps-5">

e2e/drawer/drawer.e2e-spec.ts

@@ -136,10 +136,10 @@ test.describe(`Drawer tests`, () => {
 			.toStrictEqual(
 				assign(expectedBoundingBox, {
 					width: 1280,
-					height: 500,
+					height: 501,
 				}),
 			);
-		expect(await drawerPO.statePosition()).toStrictEqual(assign(expectedVariables, {'--bs-drawer-size': '500px'}));
+		expect(await drawerPO.statePosition()).toStrictEqual(assign(expectedVariables, {'--bs-drawer-size': '501px'}));
 
 		mousePos = await drawerPO.hoverOnSplitter();
 		await page.mouse.down();
@@ -149,7 +149,7 @@ test.describe(`Drawer tests`, () => {
 		await expect
 			.poll(async () => await drawerPO.locatorRoot.boundingBox())
 			.toStrictEqual(assign(expectedBoundingBox, {height: expectedBoundingBox.height + 300 - mousePos.y}));
-		expect(await drawerPO.statePosition()).toStrictEqual(assign(expectedVariables, {'--bs-drawer-size': '300px'}));
+		expect(await drawerPO.statePosition()).toStrictEqual(assign(expectedVariables, {'--bs-drawer-size': '301px'}));
 
 		await drawerPO.locatorBackdrop.click();
 		await drawerDemoPO.locatorToggleDrawerButton.click();

e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-drawer-basic.html

@@ -17,8 +17,6 @@
 	 data-agnos-ignore-inert="data-agnos-ignore-inert"
 	/>
 	<div
-	 aria-describedby=""
-	 aria-labelledby=""
 	 aria-modal="true"
 	 class="au-drawer collapse collapse-horizontal inline-start show"
 	 role="dialog"

e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-drawer-body.html

@@ -64,8 +64,6 @@
 	 data-agnos-ignore-inert="data-agnos-ignore-inert"
 	/>
 	<div
-	 aria-describedby=""
-	 aria-labelledby=""
 	 aria-modal="true"
 	 class="au-drawer collapse collapse-horizontal inline-start show"
 	 role="dialog"