feat: provide sbb-radio-group for radio-button type components

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "typescript.tsdk": "node_modules\\typescript\\lib"
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

projects/angular-showcase/src/app/business/business-examples/tooltip-showcase/tooltip-showcase.component.html

@@ -55,7 +55,7 @@ <h4 class="sbbsc-block">Tooltip with Custom Icon</h4>
       <div class="row">
         <div class="col-lg-6">
           <sbb-tooltip>
-            <sbb-icon-plus *sbbTooltipIcon></sbb-icon-plus>
+            <sbb-icon-plus *sbbIcon></sbb-icon-plus>
             <p>Dies ist ein Tooltip mit einem angepassten Icon.</p>
           </sbb-tooltip>
         </div>

projects/angular-showcase/src/app/features/public-component-viewer/ps-chrome-patch.directive.ts

@@ -1,20 +1,37 @@
-import { Directive, ElementRef, Self } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, OnDestroy, Self } from '@angular/core';
 import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
+import { interval, merge, Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 
 @Directive({
   // tslint:disable-next-line: directive-selector
   selector: 'perfect-scrollbar'
 })
-export class PsChromePatchDirective {
-  constructor(elementRef: ElementRef, @Self() perfectScrollbar: PerfectScrollbarComponent) {
-    const element: HTMLElement = elementRef.nativeElement;
-    perfectScrollbar.psXReachEnd.subscribe(() => {
-      if (
-        perfectScrollbar.directiveRef.elementRef.nativeElement.getBoundingClientRect().top < 0 &&
-        element.scrollTo
-      ) {
-        element.scrollTo(0, 0);
-      }
-    });
+export class PsChromePatchDirective implements OnDestroy, AfterViewInit {
+  private _destroy = new Subject();
+
+  constructor(
+    private _elementRef: ElementRef,
+    @Self() private _perfectScrollbar: PerfectScrollbarComponent
+  ) {}
+
+  ngAfterViewInit(): void {
+    const element: HTMLElement = this._elementRef.nativeElement;
+    if (!element.scrollTo) {
+      return;
+    }
+
+    const directiveElement: HTMLElement = this._perfectScrollbar.directiveRef.elementRef
+      .nativeElement;
+    merge(interval(100), this._perfectScrollbar.psXReachEnd)
+      .pipe(
+        takeUntil(this._destroy),
+        filter(() => directiveElement.getBoundingClientRect().top < 0)
+      )
+      .subscribe(() => element.scrollTo(0, 0));
+  }
+
+  ngOnDestroy(): void {
+    this._destroy.next();
   }
 }

projects/angular-showcase/src/app/public/public-examples/accordion-showcase/accordion-showcase.component.html

@@ -228,7 +228,7 @@ <h2>Panel with custom html</h2>
                 "
               >
                 Test button
-                <sbb-icon-arrow-right *sbbButtonIcon></sbb-icon-arrow-right>
+                <sbb-icon-arrow-right *sbbIcon></sbb-icon-arrow-right>
               </button>
             </div>
           </sbb-expansion-panel-header>

projects/angular-showcase/src/app/public/public-examples/ghettobox-showcase/ghettobox-showcase.component.html

@@ -25,7 +25,7 @@ <h4 class="sbbsc-block">Ghettobox Link with custom icon</h4>
         [queryParams]="{ debug: false }"
         fragment="test"
       >
-        <sbb-icon-him-disruption *sbbGhettoboxIcon></sbb-icon-him-disruption>
+        <sbb-icon-him-disruption *sbbIcon></sbb-icon-him-disruption>
         This is a simple link text with custom icon
       </sbb-ghettobox>
     </div>
@@ -47,7 +47,7 @@ <h4 class="sbbsc-block">Ghettobox container with initial entry</h4>
           [queryParams]="{ debug: true }"
           fragment="education"
         >
-          <sbb-icon-him-disruption *sbbGhettoboxIcon></sbb-icon-him-disruption>
+          <sbb-icon-him-disruption *sbbIcon></sbb-icon-him-disruption>
           This is an initial ghettobox into a container. Die Strecke zwischen Stadelhofen und Zürich
           Hauptbahnhof ist vorübergehend wegen einer technischen Störung auf 5km.
         </sbb-ghettobox>

projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase-content-2.component.html

@@ -120,11 +120,11 @@ <h3>Architecture overview</h3>
 <sbb-lightbox-footer [alignment]="alignment">
   <button sbbButton mode="secondary" sbbLightboxClose>
     Abbrechen
-    <sbb-icon-cross *sbbButtonIcon></sbb-icon-cross>
+    <sbb-icon-cross *sbbIcon></sbb-icon-cross>
   </button>
   <button sbbButton [sbbLightboxClose]="true">
     Übernehmen
-    <sbb-icon-arrow-right *sbbButtonIcon></sbb-icon-arrow-right>
+    <sbb-icon-arrow-right *sbbIcon></sbb-icon-arrow-right>
   </button>
 </sbb-lightbox-footer>
 

projects/angular-showcase/src/app/public/public-examples/loading-showcase/loading-showcase.component.html

@@ -30,14 +30,14 @@ <h4 class="sbbsc-block">Spinner overlay example</h4>
       ></sbb-loading>
       <div class="align-middle">
         <button (click)="activateSpinner('fullbox')" sbbButton mode="ghost">
-          <sbb-icon-arrow-right *sbbButtonIcon></sbb-icon-arrow-right>
+          <sbb-icon-arrow-right *sbbIcon></sbb-icon-arrow-right>
           Fullbox Spinner
         </button>
       </div>
       <br />
       <div class="align-middle">
         <button (click)="activateSpinner('fullscreen')" sbbButton mode="ghost">
-          <sbb-icon-arrow-right *sbbButtonIcon></sbb-icon-arrow-right>
+          <sbb-icon-arrow-right *sbbIcon></sbb-icon-arrow-right>
           Fullscreen Spinner
         </button>
       </div>

projects/angular-showcase/src/app/public/public-examples/notification-showcase/notification-showcase.component.html

@@ -20,7 +20,7 @@ <h4 class="sbbsc-block">Properties</h4>
     <div class="col-lg-6">
       <h4 class="sbbsc-block">Notification with custom icon</h4>
       <sbb-notification message="Suchen">
-        <sbb-icon-clock *sbbNotificationIcon></sbb-icon-clock>
+        <sbb-icon-clock *sbbIcon></sbb-icon-clock>
       </sbb-notification>
     </div>
   </div>
@@ -33,7 +33,7 @@ <h4 class="sbbsc-block">
         Error notification with jump marks and custom icon
       </h4>
       <sbb-notification message="Suchen" type="error" [jumpMarks]="jumpMarks">
-        <sbb-icon-cloud-sunshine *sbbNotificationIcon></sbb-icon-cloud-sunshine>
+        <sbb-icon-cloud-sunshine *sbbIcon></sbb-icon-cloud-sunshine>
       </sbb-notification>
     </div>
   </div>
@@ -46,7 +46,7 @@ <h4 class="sbbsc-block">
         Success notification with jump marks and custom icon
       </h4>
       <sbb-notification message="Suchen" [jumpMarks]="jumpMarks">
-        <sbb-icon-bulb-on *sbbNotificationIcon></sbb-icon-bulb-on>
+        <sbb-icon-bulb-on *sbbIcon></sbb-icon-bulb-on>
       </sbb-notification>
     </div>
   </div>

projects/angular-showcase/src/app/public/public-examples/radio-button-panel-showcase/radio-button-panel-showcase.component.html

@@ -50,16 +50,13 @@ <h4 class="sbbsc-block">Properties</h4>
   <div class="row">
     <div class="col-lg-6 sbbsc-v-sep">
       <h4 class="sbbsc-block">Option selections</h4>
-      <ng-container *ngFor="let option of radioOptions; index as i">
-        <div class="sbbsc-block">
-          <sbb-radio-button-panel
-            [(ngModel)]="modelValue"
-            name="model-option-selection"
-            [value]="option.value"
-            [label]="option.name"
-          ></sbb-radio-button-panel>
-        </div>
-      </ng-container>
+      <sbb-radio-group [(ngModel)]="modelValue" class="sbbsc-block">
+        <sbb-radio-button-panel
+          *ngFor="let option of radioOptions; index as i"
+          [value]="option.value"
+          [label]="option.name"
+        ></sbb-radio-button-panel>
+      </sbb-radio-group>
     </div>
     <div class="col-lg-6">
       <h4 class="sbbsc-block">Model</h4>

projects/angular-showcase/src/app/public/public-examples/radio-button-showcase/radio-button-showcase.component.html

@@ -30,13 +30,11 @@ <h4 class="sbbsc-block">Properties</h4>
   <div class="row">
     <div class="col-lg-6 sbbsc-v-sep">
       <h4 class="sbbsc-block">Radio buttons</h4>
-      <ng-container *ngFor="let option of radioOptions; index as i">
-        <div class="sbbsc-block">
-          <sbb-radio-button [(ngModel)]="modelValue" name="model-radio" [value]="option.value">{{
-            option.name
-          }}</sbb-radio-button>
-        </div>
-      </ng-container>
+      <sbb-radio-group [(ngModel)]="modelValue" class="sbbsc-block">
+        <sbb-radio-button *ngFor="let option of radioOptions; index as i" [value]="option.value">{{
+          option.name
+        }}</sbb-radio-button>
+      </sbb-radio-group>
     </div>
     <div class="col-lg-6">
       <h4 class="sbbsc-block">Model</h4>

projects/angular-showcase/src/app/public/public-examples/search-showcase/search-showcase.component.html

@@ -73,7 +73,7 @@ <h4 class="sbbsc-block">
         [formControl]="myControlStatic"
         [sbbAutocomplete]="auto3"
       >
-        <sbb-icon-circle-information *sbbSearchIcon></sbb-icon-circle-information>
+        <sbb-icon-circle-information *sbbIcon></sbb-icon-circle-information>
       </sbb-search>
       <sbb-autocomplete #auto3="sbbAutocomplete">
         <sbb-option *ngFor="let option of options$ | async" [value]="option">

projects/angular-showcase/src/app/public/public-examples/toggle-showcase/toggle-showcase.component.html

@@ -6,20 +6,12 @@ <h4 id="group_label_2" class="sbbsc-block">
       </h4>
       <form [formGroup]="form" novalidate>
         <sbb-toggle aria-labelledby="group_label_2" formControlName="test">
-          <sbb-toggle-option
-            *ngFor="let option of toggleOptions | async; let i = index"
-            [infoText]="i === 0 ? 'info text' : undefined"
-            [label]="option.label"
-            [value]="option.value"
-          >
-            <ng-container *ngIf="i === 0">
-              <sbb-icon-arrow-right *sbbToggleOptionIcon></sbb-icon-arrow-right>
-            </ng-container>
-            <ng-container *ngIf="i === 1">
-              <sbb-icon-arrows-right-left *sbbToggleOptionIcon></sbb-icon-arrows-right-left>
-            </ng-container>
-
-            <sbb-field mode="long" *ngIf="i === 1">
+          <sbb-toggle-option infoText="info text" label="Einfache Fahrt" value="Option_1">
+            <sbb-icon-arrow-right *sbbIcon></sbb-icon-arrow-right>
+          </sbb-toggle-option>
+          <sbb-toggle-option label="Hin- und Rückfahrt" value="Option_2">
+            <sbb-icon-arrows-right-left *sbbIcon></sbb-icon-arrows-right-left>
+            <sbb-field mode="long">
               <sbb-label for="name1">Select date</sbb-label>
               <sbb-datepicker>
                 <input sbbDateInput type="text" />
@@ -43,24 +35,18 @@ <h4 id="group_label_1" class="sbbsc-block">
         Toggle buttons used as Template driven Form
       </h4>
       <sbb-toggle aria-labelledby="group_label_1" [(ngModel)]="modelValue" name="test-toggle-2">
-        <sbb-toggle-option
-          *ngFor="let option of toggleOptions | async; let i = index"
-          [label]="option.label"
-          [value]="option.value"
-        >
-          <ng-container *ngIf="i === 0">
-            <sbb-icon-arrow-right *sbbToggleOptionIcon></sbb-icon-arrow-right>
-          </ng-container>
-          <ng-container *ngIf="i === 1">
-            <sbb-icon-arrows-right-left *sbbToggleOptionIcon></sbb-icon-arrows-right-left>
-          </ng-container>
-          <sbb-field mode="long" *ngIf="i === 0">
-            <sbb-label for="name1">Select date</sbb-label>
+        <sbb-toggle-option infoText="info text" label="Einfache Fahrt" value="Option_1">
+          <sbb-icon-arrow-right *sbbIcon></sbb-icon-arrow-right>
+          <sbb-field mode="long">
+            <sbb-label>Select date</sbb-label>
             <sbb-datepicker>
-              <input sbbDateInput type="text" />
+              <input sbbDateInput sbbInput type="text" />
             </sbb-datepicker>
           </sbb-field>
-          <p *ngIf="i === 1">
+        </sbb-toggle-option>
+        <sbb-toggle-option label="Hin- und Rückfahrt" value="Option_2">
+          <sbb-icon-arrows-right-left *sbbIcon></sbb-icon-arrows-right-left>
+          <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
             incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
             exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -81,7 +67,7 @@ <h4 class="sbbsc-block">Model</h4>
       <h4 id="group_label_3" class="sbbsc-block">
         Toggle buttons simple use case no Forms attached
       </h4>
-      <sbb-toggle aria-labelledby="group_label_3" (toggleChange)="toggleChange($event)">
+      <sbb-toggle aria-labelledby="group_label_3" (change)="toggleChange($event)">
         <sbb-toggle-option
           label="2. Klasse"
           infoText="- CHF 5.60"

projects/angular-showcase/src/app/public/public-examples/toggle-showcase/toggle-showcase.component.ts

@@ -12,17 +12,6 @@ export class ToggleShowcaseComponent implements OnInit {
   modelValue = 'Option_1';
   modelReactive = 'Option_2';
 
-  toggleOptions: Observable<any> = of([
-    {
-      label: 'Einfache Fahrt',
-      value: 'Option_1'
-    },
-    {
-      label: 'Hin- und Rückfahrt',
-      value: 'Option_2'
-    }
-  ]);
-
   toggleValues: any;
 
   form = new FormGroup({

projects/angular-showcase/src/app/public/public-examples/tooltip-showcase/tooltip-showcase.component.html

@@ -55,7 +55,7 @@ <h4 class="sbbsc-block">Tooltip with Custom Icon</h4>
       <div class="row">
         <div class="col-lg-6">
           <sbb-tooltip>
-            <sbb-icon-plus *sbbTooltipIcon></sbb-icon-plus>
+            <sbb-icon-plus *sbbIcon></sbb-icon-plus>
             <p>Dies ist ein Tooltip mit einem angepassten Icon.</p>
           </sbb-tooltip>
         </div>

projects/angular-showcase/src/app/public/public/public.component.ts

@@ -94,7 +94,7 @@ export class PublicComponent implements ExampleProvider {
     'file-selector': {
       'file-selector-showcase': new ComponentPortal(FileSelectorShowcaseComponent)
     },
-    'radio-button': { 'radioButton-showcase': new ComponentPortal(RadioButtonShowcaseComponent) },
+    'radio-button': { 'radio-button-showcase': new ComponentPortal(RadioButtonShowcaseComponent) },
     'radio-button-panel': {
       'radio-button-panel-showcase': new ComponentPortal(RadioButtonPanelShowcaseComponent)
     },

projects/sbb-esta/angular-core/radio-button/index.ts

@@ -0,0 +1 @@
+export * from './src/public_api';

projects/sbb-esta/angular-core/radio-button/package.json

@@ -0,0 +1,19 @@
+{
+  "ngPackage": {
+    "lib": {
+      "umdModuleIds": {
+        "@sbb-esta/angular-core": "sbbAngularCore",
+        "@sbb-esta/angular-core/base": "sbbAngularCoreBase",
+        "@sbb-esta/angular-core/breakpoints": "sbbAngularCoreBreakpoints",
+        "@sbb-esta/angular-core/common-behaviors": "sbbAngularCoreCommonBehaviors",
+        "@sbb-esta/angular-core/datetime": "sbbAngularCoreDatetime",
+        "@sbb-esta/angular-core/error": "sbbAngularCoreError",
+        "@sbb-esta/angular-core/forms": "sbbAngularCoreForms",
+        "@sbb-esta/angular-core/icon-directive": "sbbAngularCoreIconDirective",
+        "@sbb-esta/angular-core/models": "sbbAngularCoreModels",
+        "@sbb-esta/angular-icons": "sbbAngularIcons",
+        "ngx-perfect-scrollbar": "ngxPerfectScrollbar"
+      }
+    }
+  }
+}

projects/sbb-esta/angular-core/radio-button/src/public_api.ts

@@ -0,0 +1,3 @@
+export { RadioButtonModule as ɵRadioButtonModule } from './radio-button.module';
+export * from './radio-button';
+export * from './radio-group.directive';

projects/sbb-esta/angular-core/radio-button/src/radio-button.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { RadioGroupDirective } from './radio-group.directive';
+
+@NgModule({
+  declarations: [RadioGroupDirective],
+  exports: [RadioGroupDirective]
+})
+export class RadioButtonModule {}