fix(showcase): fix example code loading (#167)

Closes #165

package.json

@@ -174,15 +174,7 @@
   "prettier": {
     "singleQuote": true,
     "endOfLine": "lf",
-    "printWidth": 100,
-    "overrides": [
-      {
-        "files": "*.html",
-        "options": {
-          "parser": "angular"
-        }
-      }
-    ]
+    "printWidth": 100
   },
   "stylelint": {
     "extends": "stylelint-config-recommended-scss",

projects/angular-showcase/src/app/business/examples/examples.module.ts → projects/angular-showcase/src/app/business/business-examples/business-examples.module.ts

@@ -9,10 +9,10 @@ import { HeaderModule } from '@sbb-esta/angular-business/header';
 import { ProcessflowModule } from '@sbb-esta/angular-business/processflow';
 import { IconCollectionModule } from '@sbb-esta/angular-icons';
 
-import { ContextmenuShowcaseComponent } from './contextmenu-showcase/contextmenu-showcase.component';
-import { ProcessflowShowcaseComponent } from './processflow-showcase/processflow-showcase.component';
+import { SimpleContextmenuComponent } from './simple-contextmenu/simple-contextmenu.component';
+import { SkippableProcessflowComponent } from './skippable-processflow/skippable-processflow.component';
 
-const exampleComponents = [ContextmenuShowcaseComponent, ProcessflowShowcaseComponent];
+const exampleComponents = [SimpleContextmenuComponent, SkippableProcessflowComponent];
 
 @NgModule({
   declarations: exampleComponents,
@@ -31,4 +31,4 @@ const exampleComponents = [ContextmenuShowcaseComponent, ProcessflowShowcaseComp
     ProcessflowModule
   ]
 })
-export class ExamplesModule {}
+export class BusinessExamplesModule {}

projects/angular-showcase/src/app/business/business-examples/simple-contextmenu/simple-contextmenu.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sbb-simple-contextmenu',
+  templateUrl: './simple-contextmenu.component.html',
+  styleUrls: ['./simple-contextmenu.component.scss']
+})
+export class SimpleContextmenuComponent {
+  action1() {}
+  action2() {}
+  action3() {}
+}

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

@@ -0,0 +1,29 @@
+<div>
+  <sbb-processflow #processflow skippable="true">
+    <sbb-processflow-step title="Schritt 1">
+      <div>
+        Schrittinhalt 1
+      </div>
+    </sbb-processflow-step>
+    <sbb-processflow-step title="Schritt 2">
+      <div>
+        Schrittinhalt 2
+      </div>
+    </sbb-processflow-step>
+    <sbb-processflow-step title="Schritt 3">
+      <div>
+        Schrittinhalt 3
+      </div>
+    </sbb-processflow-step>
+  </sbb-processflow>
+  <button sbbButton (click)="processflow.prevStep()">
+    Vorheriger Schritt
+  </button>
+  <button sbbButton (click)="processflow.nextStep()">
+    Nächster Schritt
+  </button>
+</div>
+<div>
+  <h4>Properties</h4>
+  <button mode="ghost" sbbButton (click)="reset()">Reset</button>
+</div>

projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: flex;
+}

projects/angular-showcase/src/app/public/examples/processflow-showcase/processflow-showcase.component.ts → projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.ts

@@ -1,12 +1,12 @@
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import { ProcessflowComponent, ProcessflowStep } from '@sbb-esta/angular-public/processflow';
+import { ProcessflowComponent, ProcessflowStep } from '@sbb-esta/angular-business/processflow';
 
 @Component({
-  selector: 'sbb-processflow-showcase',
-  templateUrl: './processflow-showcase.component.html',
-  styleUrls: ['./processflow-showcase.component.scss']
+  selector: 'sbb-skippable-processflow',
+  templateUrl: './skippable-processflow.component.html',
+  styleUrls: ['./skippable-processflow.component.scss']
 })
-export class ProcessflowShowcaseComponent implements AfterViewInit {
+export class SkippableProcessflowComponent implements AfterViewInit {
   @ViewChild('processflow', { static: true }) processflow: ProcessflowComponent;
 
   ngAfterViewInit(): void {

projects/angular-showcase/src/app/business/business.module.ts

@@ -6,18 +6,18 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { SharedModule } from '../shared/shared.module';
 
+import { BusinessExamplesModule } from './business-examples/business-examples.module';
 import { BusinessRoutingModule } from './business-routing.module';
 import { BusinessComponent } from './business/business.component';
 import { ComponentViewerComponent } from './component-viewer/component-viewer.component';
-import { ExamplesModule } from './examples/examples.module';
 
 @NgModule({
   declarations: [BusinessComponent, ComponentViewerComponent],
   imports: [
     CommonModule,
     PerfectScrollbarModule,
     PortalModule,
-    ExamplesModule,
+    BusinessExamplesModule,
     SharedModule,
     TabsModule,
     BusinessRoutingModule

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

@@ -1,15 +1,15 @@
-import { Component, Type } from '@angular/core';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Component } from '@angular/core';
 
 import { ExampleProvider } from '../../shared/example-provider';
-import { HtmlLoader } from '../../shared/html-loader.service';
-import { ContextmenuShowcaseComponent } from '../examples/contextmenu-showcase/contextmenu-showcase.component';
-import { ProcessflowShowcaseComponent } from '../examples/processflow-showcase/processflow-showcase.component';
+import { SimpleContextmenuComponent } from '../business-examples/simple-contextmenu/simple-contextmenu.component';
+import { SkippableProcessflowComponent } from '../business-examples/skippable-processflow/skippable-processflow.component';
 
 @Component({
   selector: 'sbb-business',
   templateUrl: './business.component.html',
   styleUrls: ['./business.component.scss'],
-  providers: [{ provide: ExampleProvider, useExisting: BusinessComponent }, HtmlLoader]
+  providers: [{ provide: ExampleProvider, useExisting: BusinessComponent }]
 })
 export class BusinessComponent implements ExampleProvider {
   formComponents = {
@@ -34,12 +34,18 @@ export class BusinessComponent implements ExampleProvider {
     contextmenu: 'Contextmenu'
   };
   popupsAndModals = {};
-  private _examples = {
-    processflow: ProcessflowShowcaseComponent,
-    contextmenu: ContextmenuShowcaseComponent
+  private _examples: { [component: string]: { [name: string]: ComponentPortal<any> } } = {
+    processflow: {
+      'skippable-processflow': new ComponentPortal(SkippableProcessflowComponent)
+    },
+    contextmenu: {
+      'simple-contextmenu': new ComponentPortal(SimpleContextmenuComponent)
+    }
   };
 
-  resolveExample<TComponent = any>(component: string): Type<TComponent> {
+  resolveExample<TComponent = any>(
+    component: string
+  ): { [name: string]: ComponentPortal<TComponent> } {
     return this._examples[component];
   }
 }

projects/angular-showcase/src/app/business/component-viewer/component-viewer.component.html

@@ -7,8 +7,12 @@
       <sbb-tab label="API">
         <div #api></div>
       </sbb-tab>
-      <sbb-tab *ngIf="example | async as examplePortal" label="Examples">
-        <sbb-example-viewer [example]="examplePortal"></sbb-example-viewer>
+      <sbb-tab *ngIf="example | async as examplePortals" label="Examples">
+        <sbb-example-viewer
+          *ngFor="let entry of examplePortals | keyvalue"
+          [name]="entry.key"
+          [example]="entry.name"
+        ></sbb-example-viewer>
       </sbb-tab>
     </sbb-tabs>
   </article>

projects/angular-showcase/src/app/business/component-viewer/component-viewer.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { ComponentViewerBase } from '../../shared/component-viewer-base';
@@ -11,7 +11,12 @@ import { HtmlLoader } from '../../shared/html-loader.service';
   styleUrls: ['./component-viewer.component.scss']
 })
 export class ComponentViewerComponent extends ComponentViewerBase {
-  constructor(htmlLoader: HtmlLoader, exampleProvider: ExampleProvider, route: ActivatedRoute) {
-    super(htmlLoader, exampleProvider, route);
+  constructor(
+    htmlLoader: HtmlLoader,
+    exampleProvider: ExampleProvider,
+    route: ActivatedRoute,
+    renderer: Renderer2
+  ) {
+    super(htmlLoader, exampleProvider, route, renderer);
   }
 }

projects/angular-showcase/src/app/core/component-viewer/component-viewer.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { ComponentViewerBase } from '../../shared/component-viewer-base';
@@ -11,7 +11,12 @@ import { HtmlLoader } from '../../shared/html-loader.service';
   styleUrls: ['./component-viewer.component.scss']
 })
 export class ComponentViewerComponent extends ComponentViewerBase {
-  constructor(htmlLoader: HtmlLoader, exampleProvider: ExampleProvider, route: ActivatedRoute) {
-    super(htmlLoader, exampleProvider, route);
+  constructor(
+    htmlLoader: HtmlLoader,
+    exampleProvider: ExampleProvider,
+    route: ActivatedRoute,
+    renderer: Renderer2
+  ) {
+    super(htmlLoader, exampleProvider, route, renderer);
   }
 }

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

@@ -1,22 +1,24 @@
-import { Component, Type } from '@angular/core';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Component } from '@angular/core';
 
 import { ExampleProvider } from '../../shared/example-provider';
-import { HtmlLoader } from '../../shared/html-loader.service';
 
 @Component({
   selector: 'sbb-core',
   templateUrl: './core.component.html',
   styleUrls: ['./core.component.scss'],
-  providers: [{ provide: ExampleProvider, useExisting: CoreComponent }, HtmlLoader]
+  providers: [{ provide: ExampleProvider, useExisting: CoreComponent }]
 })
 export class CoreComponent implements ExampleProvider {
   modules = {
     breakpoints: 'Breakpoints',
     datetime: 'Datetime'
   };
-  private _examples = {};
+  private _examples: { [component: string]: { [name: string]: ComponentPortal<any> } } = {};
 
-  resolveExample<TComponent = any>(component: string): Type<TComponent> {
+  resolveExample<TComponent = any>(
+    component: string
+  ): { [name: string]: ComponentPortal<TComponent> } {
     return this._examples[component];
   }
 }

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

@@ -2,13 +2,10 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { Component } from '@angular/core';
 import { ICON_COMPONENT_META_INFORMATION } from '@sbb-esta/angular-icons';
 
-import { HtmlLoader } from '../../shared/html-loader.service';
-
 @Component({
   selector: 'sbb-icons',
   templateUrl: './icons.component.html',
-  styleUrls: ['./icons.component.scss'],
-  providers: [HtmlLoader]
+  styleUrls: ['./icons.component.scss']
 })
 export class IconsComponent {
   icons = ICON_COMPONENT_META_INFORMATION.map(i => ({

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

@@ -1,11 +1,8 @@
 import { Component } from '@angular/core';
 
-import { HtmlLoader } from '../../shared/html-loader.service';
-
 @Component({
   selector: 'sbb-keycloak',
   templateUrl: './keycloak.component.html',
-  styleUrls: ['./keycloak.component.scss'],
-  providers: [HtmlLoader]
+  styleUrls: ['./keycloak.component.scss']
 })
 export class KeycloakComponent {}

projects/angular-showcase/src/app/public/component-viewer/component-viewer.component.html

@@ -7,8 +7,12 @@
       <sbb-tab label="API">
         <div #api></div>
       </sbb-tab>
-      <sbb-tab *ngIf="example | async as examplePortal" label="Examples">
-        <sbb-example-viewer [example]="examplePortal"></sbb-example-viewer>
+      <sbb-tab *ngIf="example | async as examplePortals" label="Examples">
+        <sbb-example-viewer
+          *ngFor="let entry of examplePortals | keyvalue"
+          [name]="entry.key"
+          [example]="entry.value"
+        ></sbb-example-viewer>
       </sbb-tab>
     </sbb-tabs>
   </article>

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { ComponentViewerBase } from '../../shared/component-viewer-base';
@@ -11,7 +11,12 @@ import { HtmlLoader } from '../../shared/html-loader.service';
   styleUrls: ['./component-viewer.component.scss']
 })
 export class ComponentViewerComponent extends ComponentViewerBase {
-  constructor(htmlLoader: HtmlLoader, exampleProvider: ExampleProvider, route: ActivatedRoute) {
-    super(htmlLoader, exampleProvider, route);
+  constructor(
+    htmlLoader: HtmlLoader,
+    exampleProvider: ExampleProvider,
+    route: ActivatedRoute,
+    renderer: Renderer2
+  ) {
+    super(htmlLoader, exampleProvider, route, renderer);
   }
 }

projects/angular-showcase/src/app/public/examples/examples.module.ts → projects/angular-showcase/src/app/public/public-examples/public-examples.module.ts

@@ -83,7 +83,7 @@ import { TextexpandShowcaseComponent } from './textexpand-showcase/textexpand-sh
 import { TimeInputShowcaseComponent } from './time-input-showcase/time-input-showcase.component';
 import { ToggleShowcaseComponent } from './toggle-showcase/toggle-showcase.component';
 import { TooltipShowcaseComponent } from './tooltip-showcase/tooltip-showcase.component';
-import { UserMenuShowcaseComponent } from './usermenu-showcase/usermenu-showcase.component';
+import { UsermenuShowcaseComponent } from './usermenu-showcase/usermenu-showcase.component';
 
 const exampleComponents = [
   AccordionShowcaseComponent,
@@ -128,7 +128,7 @@ const exampleComponents = [
   ToggleShowcaseComponent,
   TooltipShowcaseComponent,
   TagShowcaseComponent,
-  UserMenuShowcaseComponent
+  UsermenuShowcaseComponent
 ];
 
 @NgModule({
@@ -178,4 +178,4 @@ const exampleComponents = [
     UserMenuModule
   ]
 })
-export class ExamplesModule {}
+export class PublicExamplesModule {}