[Textarea] Add autoResize and scrollIntoView options

packages/ng/forms/textarea-input/textarea-input.component.html

@@ -1,11 +1,16 @@
-<div class="textField">
+<div class="textField" [class.mod-autoResize]="autoResize">
 	<div class="textField-input">
+		@if (autoResize) {
+		<div class="textField-input-valueClone" aria-hidden="true" [attr.data-content-before]="ngControl.control.value"></div>
+		}
 		<textarea
 			luInput
 			class="textField-input-value"
 			[formControl]="ngControl.control"
 			[attr.placeholder]="placeholder"
 			[attr.rows]="rows"
+			(input)="updateScroll()"
+			#textarea
 		></textarea>
 	</div>
 </div>

packages/ng/forms/textarea-input/textarea-input.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { InputDirective } from '@lucca-front/ng/form-field';
 import { injectNgControl } from '../inject-ng-control';
@@ -14,11 +14,30 @@ import { NoopValueAccessorDirective } from '../noop-value-accessor.directive';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TextareaInputComponent {
+	@ViewChild('textarea', { read: ElementRef, static: true })
+	textarea: ElementRef<HTMLTextAreaElement>;
+
 	ngControl = injectNgControl();
 
 	@Input()
 	placeholder: string = '';
 
 	@Input()
 	rows?: number;
+
+	@Input({
+		transform: booleanAttribute,
+	})
+	autoResize = false;
+
+	@Input({
+		transform: booleanAttribute,
+	})
+	scrollIntoViewOnAutoResizing = false;
+
+	updateScroll() {
+		if (this.scrollIntoViewOnAutoResizing) {
+			this.textarea.nativeElement.scrollIntoView();
+		}
+	}
 }

packages/scss/src/components/textField/component.scss

@@ -55,6 +55,7 @@
 			}
 		}
 
+		.textField-input-valueClone,
 		.textField-input-value {
 			border: 0;
 			outline: 0;

packages/scss/src/components/textField/index.scss

@@ -25,4 +25,8 @@
 	&:has(.textField-input-value:disabled) {
 		@include disabled;
 	}
+
+	&.mod-autoResize {
+		@include autoResize;
+	}
 }

packages/scss/src/components/textField/mods.scss

@@ -44,3 +44,28 @@
 		text-align: right;
 	}
 }
+
+@mixin autoResize {
+	.textField-input {
+		display: grid;
+		align-items: normal;
+		min-width: 0;
+	}
+
+	.textField-input-valueClone,
+	.textField-input-value {
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+		grid-area: 1 / 1 / 2 / 2;
+		resize: none;
+		min-width: 0;
+	}
+
+	.textField-input-valueClone {
+		visibility: hidden;
+
+		&::after {
+			content: ' ';
+		}
+	}
+}

stories/documentation/forms/fields/textarea/angular/textarea.stories.ts → stories/documentation/forms/fields/textarea/angular/textareafield.stories.ts

@@ -35,15 +35,22 @@ export default {
 		counter: {
 			description: '[v17.4]',
 		},
+		autoResize: {
+			type: 'boolean',
+		},
+		scrollIntoViewOnAutoResizing: {
+			type: 'boolean',
+			if: { arg: 'autoResize', truthy: true },
+		},
 		hiddenLabel: {
-			description: 'Masque le label en le conservant dans le DOM pour les lecteurs d\'écrans',
+			description: "Masque le label en le conservant dans le DOM pour les lecteurs d'écrans",
 		},
 	},
 } as Meta;
 
 export const Basic: StoryObj<TextareaInputComponent & { disabled: boolean } & FormFieldComponent> = {
 	render: (args, { argTypes }) => {
-		const { label, hiddenLabel, tooltip, inlineMessage, inlineMessageState, size, counter, ...inputArgs } = args;
+		const { label, hiddenLabel, tooltip, inlineMessage, inlineMessageState, size, counter, autoResize, scrollIntoViewOnAutoResizing, ...inputArgs } = args;
 		return {
 			template: cleanupTemplate(`<lu-form-field ${generateInputs(
 				{
@@ -57,15 +64,12 @@ export const Basic: StoryObj<TextareaInputComponent & { disabled: boolean } & Fo
 				},
 				argTypes,
 			)}>
-
-	<lu-textarea-input
+	<lu-textarea-input scrollIntoViewOnAutoResizing="${scrollIntoViewOnAutoResizing}" autoResize="${autoResize}"
 	${generateInputs(inputArgs, argTypes)}
 		[(ngModel)]="example">
 	</lu-textarea-input>
-
 </lu-form-field>
-
-{{example}}`),
+`),
 			moduleMetadata: {
 				imports: [TextareaInputComponent, FormFieldComponent, FormsModule, BrowserAnimationsModule],
 			},
@@ -81,6 +85,8 @@ export const Basic: StoryObj<TextareaInputComponent & { disabled: boolean } & Fo
 		placeholder: 'Placeholder',
 		tooltip: 'Je suis un message d’aide',
 		counter: 0,
+		autoResize: false,
+		scrollIntoViewOnAutoResizing: false,
 		rows: 3,
 	},
 };

stories/documentation/forms/fields/textarea/html&css/textareafield.stories.ts

@@ -1,24 +1,49 @@
 import { Meta, StoryFn } from '@storybook/angular';
 
-interface TextareaBasicStory {}
+interface TextareaBasicStory {
+	autoResize: boolean;
+	scrollIntoViewOnAutoResizing: boolean;
+}
 
 export default {
 	title: 'Documentation/Forms/Fields/TextAreaField/HTML&CSS',
-	argTypes: {},
+	argTypes: {
+		autoResize: {
+			type: 'boolean',
+		},
+		scrollIntoViewOnAutoResizing: {
+			type: 'boolean',
+			if: { arg: 'autoResize', truthy: true },
+		},
+	},
 } as Meta;
 
 function getTemplate(args: TextareaBasicStory): string {
+	const autoResize = args.autoResize ? 'mod-autoResize' : '';
+	const clone = args.autoResize ? '<div class="textField-input-valueClone" aria-hidden="true"></div>' : '';
+	let input = '';
+	if (args.autoResize) {
+		if (args.scrollIntoViewOnAutoResizing) {
+			input = 'onInput="this.previousElementSibling.dataset.contentBefore = this.value; this.scrollIntoViewOnAutoResizing"';
+		} else {
+			input = 'onInput="this.previousElementSibling.dataset.contentBefore = this.value"';
+		}
+	}
+
 	return `<div class="form-field">
 		<label class="formLabel" id="IDlabel" for="ID">Label</label>
-		<div class="textField">
+		<div class="textField ${autoResize}">
 			<div class="textField-input">
-				<textarea rows="3" id="ID" class="textField-input-value" aria-labelledby="IDlabel" aria-describedby="IDmessage" placeholder="Placeholder" aria-invalid="false"></textarea>
+				${clone}
+				<textarea rows="3" id="ID" class="textField-input-value" aria-labelledby="IDlabel"
+					aria-describedby="IDmessage" placeholder="Placeholder" aria-invalid="false"
+					${input}></textarea>
 			</div>
 		</div>
 		<div class="inlineMessage" id="IDmessage">
 			<span aria-hidden="true" class="lucca-icon inlineMessage-statusIcon"></span>
 			<p class="inlineMessage-content">
-				Helper text
+				Helper Text
 			</p>
 		</div>
 	</div>`;
@@ -30,4 +55,7 @@ const Template: StoryFn<TextareaBasicStory> = (args) => ({
 });
 
 export const Basic = Template.bind({});
-Basic.args = {};
+Basic.args = {
+	autoResize: false,
+	scrollIntoViewOnAutoResizing: false,
+};