feat: integrate Angular form support (#11)

This PR adds initial integration into the `@angular/forms` library. --------- Co-authored-by: Lukas Spirig <[email protected]>
sbb-design-systems · Jan 20, 2025 · 44f7160 · 44f7160
1 parent cc0370f
commit 44f7160
Show file tree

Hide file tree

Showing 62 changed files with 421 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
   "type": "module",
   "dependencies": {
     "@angular/animations": "19.1.1",
+    "@angular/cdk": "19.1.0",
     "@angular/common": "19.1.1",
     "@angular/compiler": "19.1.1",
     "@angular/core": "19.1.1",

diff --git a/src/angular-experimental/eslint.config.mjs b/src/angular-experimental/eslint.config.mjs
@@ -6,16 +6,7 @@ export default tseslint.config(
   ...rootConfig,
   {
     files: ['**/*.ts'],
-    rules: {
-      '@angular-eslint/component-selector': [
-        'error',
-        {
-          type: 'element',
-          prefix: 'sbb',
-          style: 'kebab-case',
-        },
-      ],
-    },
+    rules: {},
   },
   {
     files: ['**/*.html'],

diff --git a/src/angular/accordion/accordion.ts b/src/angular/accordion/accordion.ts
@@ -1,9 +1,10 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbAccordionElement } from '@sbb-esta/lyne-elements/accordion.js';
-import '@sbb-esta/lyne-elements/accordion.js';
 import { SbbTitleLevel } from '@sbb-esta/lyne-elements/title.js';
 
+import '@sbb-esta/lyne-elements/accordion.js';
+
 @Directive({
   selector: 'sbb-accordion',
 })

diff --git a/src/angular/action-group/action-group.ts b/src/angular/action-group/action-group.ts
@@ -1,10 +1,11 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import type { SbbActionGroupElement } from '@sbb-esta/lyne-elements/action-group.js';
-import '@sbb-esta/lyne-elements/action-group.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 import { SbbHorizontalFrom, SbbOrientation } from '@sbb-esta/lyne-elements/core/interfaces.js';
 import { SbbLinkSize } from '@sbb-esta/lyne-elements/link.js';
 
+import '@sbb-esta/lyne-elements/action-group.js';
+
 @Directive({
   selector: 'sbb-action-group',
 })

diff --git a/src/angular/alert/alert-group/alert-group.ts b/src/angular/alert/alert-group/alert-group.ts
@@ -2,6 +2,7 @@ import { Directive, ElementRef, inject, Input, NgZone, Output } from '@angular/c
 import type { SbbAlertGroupElement } from '@sbb-esta/lyne-elements/alert/alert-group.js';
 import { SbbTitleLevel } from '@sbb-esta/lyne-elements/title.js';
 import { fromEvent, type Observable } from 'rxjs';
+
 import '@sbb-esta/lyne-elements/alert/alert-group.js';
 
 @Directive({

diff --git a/src/angular/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts b/src/angular/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
@@ -1,9 +1,10 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbAutocompleteGridButtonElement } from '@sbb-esta/lyne-elements/autocomplete-grid/autocomplete-grid-button.js';
-import '@sbb-esta/lyne-elements/autocomplete-grid/autocomplete-grid-button.js';
 import { SbbAutocompleteGridOptionElement } from '@sbb-esta/lyne-elements/autocomplete-grid/autocomplete-grid-option.js';
 
+import '@sbb-esta/lyne-elements/autocomplete-grid/autocomplete-grid-button.js';
+
 @Directive({
   selector: 'sbb-autocomplete-grid-button',
 })

diff --git a/src/angular/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.ts b/src/angular/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.ts
@@ -1,4 +1,5 @@
 import { Directive } from '@angular/core';
+
 import '@sbb-esta/lyne-elements/autocomplete-grid/autocomplete-grid-cell.js';
 
 @Directive({

diff --git a/src/angular/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts b/src/angular/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
@@ -1,6 +1,7 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbAutocompleteGridOptgroupElement } from '@sbb-esta/lyne-elements/autocomplete-grid/autocomplete-grid-optgroup.js';
+
 import '@sbb-esta/lyne-elements/autocomplete-grid/autocomplete-grid-optgroup.js';
 
 @Directive({

diff --git a/src/angular/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/angular/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
@@ -2,6 +2,7 @@ import { Directive, ElementRef, inject, Input, NgZone, Output } from '@angular/c
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbAutocompleteGridOptionElement } from '@sbb-esta/lyne-elements/autocomplete-grid/autocomplete-grid-option.js';
 import { fromEvent, type Observable } from 'rxjs';
+
 import '@sbb-esta/lyne-elements/autocomplete-grid/autocomplete-grid-option.js';
 
 @Directive({

diff --git a/src/angular/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts b/src/angular/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
@@ -1,4 +1,5 @@
 import { Directive } from '@angular/core';
+
 import '@sbb-esta/lyne-elements/autocomplete-grid/autocomplete-grid-row.js';
 
 @Directive({

diff --git a/src/angular/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts b/src/angular/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
@@ -2,6 +2,7 @@ import { Directive, ElementRef, inject, Input, NgZone, Output } from '@angular/c
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbAutocompleteGridElement } from '@sbb-esta/lyne-elements/autocomplete-grid/autocomplete-grid.js';
 import { fromEvent, type Observable } from 'rxjs';
+
 import '@sbb-esta/lyne-elements/autocomplete-grid/autocomplete-grid.js';
 
 @Directive({

diff --git a/src/angular/autocomplete/autocomplete.ts b/src/angular/autocomplete/autocomplete.ts
@@ -2,6 +2,7 @@ import { Directive, ElementRef, inject, Input, NgZone, Output } from '@angular/c
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbAutocompleteElement } from '@sbb-esta/lyne-elements/autocomplete.js';
 import { fromEvent, type Observable } from 'rxjs';
+
 import '@sbb-esta/lyne-elements/autocomplete.js';
 
 @Directive({

diff --git a/src/angular/breadcrumb/breadcrumb-group/breadcrumb-group.ts b/src/angular/breadcrumb/breadcrumb-group/breadcrumb-group.ts
@@ -1,4 +1,5 @@
 import { Directive } from '@angular/core';
+
 import '@sbb-esta/lyne-elements/breadcrumb/breadcrumb-group.js';
 
 @Directive({

diff --git a/src/angular/breadcrumb/breadcrumb/breadcrumb.ts b/src/angular/breadcrumb/breadcrumb/breadcrumb.ts
@@ -1,9 +1,10 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbBreadcrumbElement } from '@sbb-esta/lyne-elements/breadcrumb/breadcrumb.js';
-import '@sbb-esta/lyne-elements/breadcrumb/breadcrumb.js';
 import { LinkTargetType } from '@sbb-esta/lyne-elements/core/base-elements.js';
 
+import '@sbb-esta/lyne-elements/breadcrumb/breadcrumb.js';
+
 @Directive({
   selector: 'sbb-breadcrumb',
 })

diff --git a/src/angular/button/accent-button-link/accent-button-link.ts b/src/angular/button/accent-button-link/accent-button-link.ts
@@ -1,10 +1,11 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbAccentButtonLinkElement } from '@sbb-esta/lyne-elements/button/accent-button-link.js';
-import '@sbb-esta/lyne-elements/button/accent-button-link.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 import { LinkTargetType } from '@sbb-esta/lyne-elements/core/base-elements.js';
 
+import '@sbb-esta/lyne-elements/button/accent-button-link.js';
+
 @Directive({
   selector: 'sbb-accent-button-link',
 })

diff --git a/src/angular/button/accent-button-static/accent-button-static.ts b/src/angular/button/accent-button-static/accent-button-static.ts
@@ -1,9 +1,10 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbAccentButtonStaticElement } from '@sbb-esta/lyne-elements/button/accent-button-static.js';
-import '@sbb-esta/lyne-elements/button/accent-button-static.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 
+import '@sbb-esta/lyne-elements/button/accent-button-static.js';
+
 @Directive({
   selector: 'sbb-accent-button-static',
 })

diff --git a/src/angular/button/accent-button/accent-button.ts b/src/angular/button/accent-button/accent-button.ts
@@ -1,10 +1,11 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbAccentButtonElement } from '@sbb-esta/lyne-elements/button/accent-button.js';
-import '@sbb-esta/lyne-elements/button/accent-button.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 import { SbbButtonType } from '@sbb-esta/lyne-elements/core/base-elements.js';
 
+import '@sbb-esta/lyne-elements/button/accent-button.js';
+
 @Directive({
   selector: 'sbb-accent-button',
 })

diff --git a/src/angular/button/button-link/button-link.ts b/src/angular/button/button-link/button-link.ts
@@ -1,10 +1,11 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbButtonLinkElement } from '@sbb-esta/lyne-elements/button/button-link.js';
-import '@sbb-esta/lyne-elements/button/button-link.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 import { LinkTargetType } from '@sbb-esta/lyne-elements/core/base-elements.js';
 
+import '@sbb-esta/lyne-elements/button/button-link.js';
+
 @Directive({
   selector: 'sbb-button-link',
 })

diff --git a/src/angular/button/button-static/button-static.ts b/src/angular/button/button-static/button-static.ts
@@ -1,9 +1,10 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbButtonStaticElement } from '@sbb-esta/lyne-elements/button/button-static.js';
-import '@sbb-esta/lyne-elements/button/button-static.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 
+import '@sbb-esta/lyne-elements/button/button-static.js';
+
 @Directive({
   selector: 'sbb-button-static',
 })

diff --git a/src/angular/button/button/button.ts b/src/angular/button/button/button.ts
@@ -1,10 +1,11 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbButtonElement } from '@sbb-esta/lyne-elements/button/button.js';
-import '@sbb-esta/lyne-elements/button/button.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 import { SbbButtonType } from '@sbb-esta/lyne-elements/core/base-elements.js';
 
+import '@sbb-esta/lyne-elements/button/button.js';
+
 @Directive({
   selector: 'sbb-button',
 })

diff --git a/src/angular/button/mini-button-group/mini-button-group.ts b/src/angular/button/mini-button-group/mini-button-group.ts
@@ -4,6 +4,7 @@ import type {
   SbbMiniButtonGroupElement,
   SbbMiniButtonGroupSize,
 } from '@sbb-esta/lyne-elements/button/mini-button-group.js';
+
 import '@sbb-esta/lyne-elements/button/mini-button-group.js';
 
 @Directive({

diff --git a/src/angular/button/mini-button/mini-button.ts b/src/angular/button/mini-button/mini-button.ts
@@ -1,9 +1,10 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbMiniButtonElement } from '@sbb-esta/lyne-elements/button/mini-button.js';
-import '@sbb-esta/lyne-elements/button/mini-button.js';
 import { SbbButtonType } from '@sbb-esta/lyne-elements/core/base-elements.js';
 
+import '@sbb-esta/lyne-elements/button/mini-button.js';
+
 @Directive({
   selector: 'sbb-mini-button',
 })

diff --git a/src/angular/button/secondary-button-link/secondary-button-link.ts b/src/angular/button/secondary-button-link/secondary-button-link.ts
@@ -1,10 +1,11 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbSecondaryButtonLinkElement } from '@sbb-esta/lyne-elements/button/secondary-button-link.js';
-import '@sbb-esta/lyne-elements/button/secondary-button-link.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 import { LinkTargetType } from '@sbb-esta/lyne-elements/core/base-elements.js';
 
+import '@sbb-esta/lyne-elements/button/secondary-button-link.js';
+
 @Directive({
   selector: 'sbb-secondary-button-link',
 })

diff --git a/src/angular/button/secondary-button-static/secondary-button-static.ts b/src/angular/button/secondary-button-static/secondary-button-static.ts
@@ -1,9 +1,10 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbSecondaryButtonStaticElement } from '@sbb-esta/lyne-elements/button/secondary-button-static.js';
-import '@sbb-esta/lyne-elements/button/secondary-button-static.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 
+import '@sbb-esta/lyne-elements/button/secondary-button-static.js';
+
 @Directive({
   selector: 'sbb-secondary-button-static',
 })

diff --git a/src/angular/button/secondary-button/secondary-button.ts b/src/angular/button/secondary-button/secondary-button.ts
@@ -1,10 +1,11 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbSecondaryButtonElement } from '@sbb-esta/lyne-elements/button/secondary-button.js';
-import '@sbb-esta/lyne-elements/button/secondary-button.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 import { SbbButtonType } from '@sbb-esta/lyne-elements/core/base-elements.js';
 
+import '@sbb-esta/lyne-elements/button/secondary-button.js';
+
 @Directive({
   selector: 'sbb-secondary-button',
 })

diff --git a/src/angular/button/transparent-button-link/transparent-button-link.ts b/src/angular/button/transparent-button-link/transparent-button-link.ts
@@ -1,10 +1,11 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbTransparentButtonLinkElement } from '@sbb-esta/lyne-elements/button/transparent-button-link.js';
-import '@sbb-esta/lyne-elements/button/transparent-button-link.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 import { LinkTargetType } from '@sbb-esta/lyne-elements/core/base-elements.js';
 
+import '@sbb-esta/lyne-elements/button/transparent-button-link.js';
+
 @Directive({
   selector: 'sbb-transparent-button-link',
 })

diff --git a/src/angular/button/transparent-button-static/transparent-button-static.ts b/src/angular/button/transparent-button-static/transparent-button-static.ts
@@ -1,9 +1,10 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbTransparentButtonStaticElement } from '@sbb-esta/lyne-elements/button/transparent-button-static.js';
-import '@sbb-esta/lyne-elements/button/transparent-button-static.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 
+import '@sbb-esta/lyne-elements/button/transparent-button-static.js';
+
 @Directive({
   selector: 'sbb-transparent-button-static',
 })

diff --git a/src/angular/button/transparent-button/transparent-button.ts b/src/angular/button/transparent-button/transparent-button.ts
@@ -1,10 +1,11 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbTransparentButtonElement } from '@sbb-esta/lyne-elements/button/transparent-button.js';
-import '@sbb-esta/lyne-elements/button/transparent-button.js';
 import { SbbButtonSize } from '@sbb-esta/lyne-elements/button.js';
 import { SbbButtonType } from '@sbb-esta/lyne-elements/core/base-elements.js';
 
+import '@sbb-esta/lyne-elements/button/transparent-button.js';
+
 @Directive({
   selector: 'sbb-transparent-button',
 })

diff --git a/src/angular/calendar/calendar.ts b/src/angular/calendar/calendar.ts
@@ -3,6 +3,7 @@ import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { CalendarView, SbbCalendarElement } from '@sbb-esta/lyne-elements/calendar.js';
 import { SbbDateLike } from '@sbb-esta/lyne-elements/core/interfaces.js';
 import { fromEvent, type Observable } from 'rxjs';
+
 import '@sbb-esta/lyne-elements/calendar.js';
 
 @Directive({

diff --git a/src/angular/card/card-badge/card-badge.ts b/src/angular/card/card-badge/card-badge.ts
@@ -1,5 +1,6 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import type { SbbCardBadgeElement } from '@sbb-esta/lyne-elements/card/card-badge.js';
+
 import '@sbb-esta/lyne-elements/card/card-badge.js';
 
 @Directive({

diff --git a/src/angular/card/card-button/card-button.ts b/src/angular/card/card-button/card-button.ts
@@ -1,9 +1,10 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbCardButtonElement } from '@sbb-esta/lyne-elements/card/card-button.js';
-import '@sbb-esta/lyne-elements/card/card-button.js';
 import { SbbButtonType } from '@sbb-esta/lyne-elements/core/base-elements.js';
 
+import '@sbb-esta/lyne-elements/card/card-button.js';
+
 @Directive({
   selector: 'sbb-card-button',
 })

diff --git a/src/angular/card/card-link/card-link.ts b/src/angular/card/card-link/card-link.ts
@@ -1,9 +1,10 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbCardLinkElement } from '@sbb-esta/lyne-elements/card/card-link.js';
-import '@sbb-esta/lyne-elements/card/card-link.js';
 import { LinkTargetType } from '@sbb-esta/lyne-elements/core/base-elements.js';
 
+import '@sbb-esta/lyne-elements/card/card-link.js';
+
 @Directive({
   selector: 'sbb-card-link',
 })

diff --git a/src/angular/card/card/card.ts b/src/angular/card/card/card.ts
@@ -1,5 +1,6 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import type { SbbCardElement } from '@sbb-esta/lyne-elements/card/card.js';
+
 import '@sbb-esta/lyne-elements/card/card.js';
 
 @Directive({

diff --git a/src/angular/checkbox/checkbox-group/checkbox-group.ts b/src/angular/checkbox/checkbox-group/checkbox-group.ts
@@ -1,12 +1,13 @@
 import { Directive, ElementRef, inject, Input, NgZone } from '@angular/core';
 import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
 import type { SbbCheckboxGroupElement } from '@sbb-esta/lyne-elements/checkbox/checkbox-group.js';
-import '@sbb-esta/lyne-elements/checkbox/checkbox-group.js';
 import { SbbCheckboxPanelElement } from '@sbb-esta/lyne-elements/checkbox/checkbox-panel.js';
 import { SbbCheckboxElement } from '@sbb-esta/lyne-elements/checkbox/checkbox.js';
 import { SbbCheckboxSize } from '@sbb-esta/lyne-elements/checkbox.js';
 import { SbbHorizontalFrom, SbbOrientation } from '@sbb-esta/lyne-elements/core/interfaces.js';
 
+import '@sbb-esta/lyne-elements/checkbox/checkbox-group.js';
+
 @Directive({
   selector: 'sbb-checkbox-group',
 })