refactor(form): use container queries for automatic layout

api-goldens/element-ng/form/index.api.md

@@ -36,6 +36,7 @@ export const SI_FORM_ITEM_CONTROL: InjectionToken<SiFormItemControl>;
 export class SiFormContainerComponent<TControl extends {
     [K in keyof TControl]: AbstractControl;
 }> {
+    // @deprecated (undocumented)
     readonly contentContainerBreakpoints: _angular_core.InputSignal<Breakpoints | undefined>;
     readonly controlNameTranslateKeyMap: _angular_core.InputSignal<Map<string, string>>;
     readonly disableContainerBreakpoints: _angular_core.InputSignalWithTransform<boolean, unknown>;

projects/element-ng/form/si-form-container/si-form-container.component.html

@@ -1,17 +1,10 @@
 <div class="d-flex flex-column align-content-stretch flex-grow-1 flex-shrink-1">
-  @if (disableContainerBreakpoints() || hasParentContainer) {
-    <div class="flex-grow-1 flex-shrink-1">
-      <ng-container *ngTemplateOutlet="contentTemplate" />
-    </div>
-  } @else {
-    <div
-      class="flex-grow-1 flex-shrink-1"
-      siResponsiveContainer
-      [breakpoints]="contentContainerBreakpoints()"
-    >
-      <ng-container *ngTemplateOutlet="contentTemplate" />
-    </div>
-  }
+  <div
+    class="flex-grow-1 flex-shrink-1"
+    [class.responsive-container]="!disableContainerBreakpoints() && !hasParentContainer"
+  >
+    <ng-content select="[si-form-container-content]" />
+  </div>
 
   @if (!readonly()) {
     <div class="d-flex flex-row flex-nowrap flex-grow-0 flex-shrink-0 py-4">
@@ -29,7 +22,3 @@
     </div>
   }
 </div>
-
-<ng-template #contentTemplate>
-  <ng-content select="[si-form-container-content]" />
-</ng-template>

projects/element-ng/form/si-form-container/si-form-container.component.scss

@@ -18,3 +18,8 @@
   text-decoration: underline;
   cursor: pointer;
 }
+
+.responsive-container {
+  container-type: inline-size;
+  container-name: si-form-container;
+}

projects/element-ng/form/si-form-container/si-form-container.component.spec.ts

@@ -16,7 +16,6 @@ import {
   SiFormModule,
   SiFormValidationErrorMapper
 } from '@siemens/element-ng/form';
-import { SiResponsiveContainerDirective } from '@siemens/element-ng/resize-observer';
 
 interface TestForm {
   name: FormControl<string | null>;
@@ -45,20 +44,6 @@ export class TestHostComponent {
   customErrorMapper?: SiFormValidationErrorMapper | Map<string, string>;
 }
 
-@Component({
-  imports: [SiFormContainerComponent],
-  template: `
-    <si-form-container style="inline-size: 100px" [form]="form">
-      <si-form-container si-form-container-content [form]="form">
-        <div si-form-container-content style="block-size: 10px"></div>
-      </si-form-container>
-    </si-form-container>
-  `
-})
-class TestHostWithNestingComponent {
-  form = new FormGroup({});
-}
-
 describe('SiFormContainerComponent', () => {
   describe('with custom error messages', () => {
     let component: TestHostComponent;
@@ -155,26 +140,4 @@ describe('SiFormContainerComponent', () => {
       });
     });
   });
-
-  describe('with nested form containers', () => {
-    let fixture: ComponentFixture<TestHostWithNestingComponent>;
-
-    beforeEach(() => {
-      vi.useFakeTimers();
-      fixture = TestBed.createComponent(TestHostWithNestingComponent);
-      fixture.detectChanges();
-    });
-
-    afterEach(() => {
-      vi.useRealTimers();
-    });
-
-    it('should create', async () => {
-      const spy = vi.spyOn(SiResponsiveContainerDirective.prototype as any, 'setResponsiveSize');
-      await vi.advanceTimersByTimeAsync(100);
-
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith(100, 26);
-    });
-  });
 });

projects/element-ng/form/si-form-container/si-form-container.component.ts

@@ -2,10 +2,9 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { NgTemplateOutlet } from '@angular/common';
 import { booleanAttribute, Component, computed, inject, input } from '@angular/core';
 import { AbstractControl, FormGroup } from '@angular/forms';
-import { Breakpoints, SiResponsiveContainerDirective } from '@siemens/element-ng/resize-observer';
+import { Breakpoints } from '@siemens/element-ng/resize-observer';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 import { SiFormValidationErrorMapper } from '../si-form-validation-error.model';
@@ -20,7 +19,6 @@ export interface SiFormValidationError {
 
 @Component({
   selector: 'si-form-container',
-  imports: [NgTemplateOutlet, SiResponsiveContainerDirective],
   templateUrl: './si-form-container.component.html',
   styleUrl: './si-form-container.component.scss',
   host: {
@@ -44,9 +42,7 @@ export class SiFormContainerComponent<TControl extends { [K in keyof TControl]:
   readonly readonly = input(false, { transform: booleanAttribute });
 
   /**
-   * The container hosts the form within a siResizeContainer to configure the breakpoint for
-   * different screen sizes. Optionally, change the container breakpoints with the contentContainerBreakpoints
-   * input.
+   * @deprecated has no effect
    */
   readonly contentContainerBreakpoints = input<Breakpoints>();
 

projects/element-ng/form/si-form.shared.scss

@@ -29,13 +29,10 @@
 }
 
 /// ACCOUNT FOR MEASURED CONTAINERS
-:host-context(.si-container-sm),
-:host-context(.si-container-md),
-:host-context(.si-container-lg),
-:host-context(.si-container-xl),
-:host-context(.si-container-xxl) {
+@container si-form-container (inline-size >= #{map.get(all-variables.$grid-breakpoints, sm)}) {
   :host.si-form-input {
-    display: flex;
+    // need !important here to override the fallback checkbox not inline style.
+    display: flex !important; // stylelint-disable-line declaration-no-important
     flex-direction: row;
     align-items: center;
   }