feat(demo): add docs configuration section

projects/elements-demo/src/app/core/layout/navigation/navigation.component.ts

@@ -17,6 +17,10 @@ const NAVIGATION = [
         label: 'How it works',
         url: 'docs/how-it-works'
       },
+      {
+        label: 'Configuration',
+        url: 'docs/configuration'
+      },
       {
         label: 'Use cases',
         url: 'docs/use-cases'

projects/elements-demo/src/app/features/docs/configuration/configuration-routing.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ConfigurationComponent } from './configuration.component';
+
+const routes: Routes = [{ path: '', component: ConfigurationComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ConfigurationRoutingModule {}

projects/elements-demo/src/app/features/docs/configuration/configuration.component.html

@@ -0,0 +1,82 @@
+<div class="wrapper">
+  <h1>Configuration</h1>
+
+  <blockquote class="large">
+    The library supports additional configuration which can improve developer
+    experience when using multiple elements (or same element multiple time).
+  </blockquote>
+
+  <h2>Pre-configuration with module</h2>
+  <p>
+    Let's imagine situation in which we want to use multiple instances of a
+    single element in the template of one of our feature components.
+  </p>
+  <blockquote>
+    Example of such an use case could be that we have a
+    <code>&#60;user-profile-element></code> and we want to display top 3 users
+    for a given month. We would need to pass url in all of the elements...
+  </blockquote>
+
+  <pre [highlight]="codeExampleInline"></pre>
+
+  <p>
+    This could be optimized by storing url once in the component variable but
+    still, component needs to be aware of the element url. This can lead to
+    further inconvenient situation when element url changes and we would have to
+    search for the url in te whole code base...
+  </p>
+
+  <p>
+    Compare this to the following solution where we pre-configure all of the
+    elements we will be using in our application with the help of the
+    <code>LazyElementsModule.forRoot(options)</code> (or
+    <code>.forFeature()</code>) static functions!
+  </p>
+
+  <pre [highlight]="codeExampleModule"></pre>
+
+  <p>
+    We're creating options of the <code>LazyElementModuleOptions</code> type and
+    passing in array of <code>ElementConfig</code> items. Every item specifies
+    element <code>tag</code> and <code>url</code>...
+  </p>
+
+  <p>
+    With this configuration in place, we can adjust original
+    <code>FeatureComponent</code> template to look like this...
+  </p>
+
+  <pre [highlight]="codeExamplePreConfigured"></pre>
+
+  <p>
+    As we can see, the component template got simple! There is less redundant
+    data and the configuration was centralized in the predictable place that is
+    easy to find and adjust when necessary!
+  </p>
+
+  <p>
+    Check out the <a routerLink="../../../examples/advanced">working demo</a> of
+    this approach!
+  </p>
+
+  <h2>Upcoming pre-configuration features</h2>
+
+  <p>
+    Currently we're working to enable pre-configuration of various other options
+    like:
+  </p>
+
+  <ul>
+    <li>Granular element pre-loading</li>
+    <li>Global and granular configuration of <code>loadingTemplate</code></li>
+    <li>Global and granular configuration of <code>errorTemplate</code></li>
+    <li>
+      Global and granular configuration of <code>module</code> (script type
+      module for ECMAScript modules)
+    </li>
+    <li>
+      Posibility to use loading and error components (not just
+      <code>&#60;ng-template></code>
+    </li>
+  </ul>
+</div>

projects/elements-demo/src/app/features/docs/configuration/configuration.component.scss

@@ -0,0 +1,14 @@
+ol {
+  margin: 0 0 20px 0;
+}
+
+h2 {
+  margin: 40px 0 10px 0;
+  font-weight: bold;
+}
+
+:host-context(.responsive-large) {
+  .wrapper {
+    width: 70%;
+  }
+}

projects/elements-demo/src/app/features/docs/configuration/configuration.component.spec.ts

@@ -0,0 +1,36 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HighlightModule } from 'ngx-highlightjs';
+import typescript from 'highlight.js/lib/languages/typescript';
+
+import { SharedModule } from '../../../shared/shared.module';
+
+import { ConfigurationComponent } from './configuration.component';
+
+describe('ConfigurationComponent', () => {
+  let component: ConfigurationComponent;
+  let fixture: ComponentFixture<ConfigurationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        HighlightModule.forRoot({
+          languages: () => [{ name: 'typescript', func: typescript }]
+        }),
+        RouterTestingModule,
+        SharedModule
+      ],
+      declarations: [ConfigurationComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfigurationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/elements-demo/src/app/features/docs/configuration/configuration.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'demo-configuration',
+  templateUrl: './configuration.component.html',
+  styleUrls: ['./configuration.component.scss']
+})
+export class ConfigurationComponent implements OnInit {
+  codeExampleInline = CODE_EXAMPLE_INLINE;
+  codeExampleModule = CODE_EXAMPLE_MODULE;
+  codeExamplePreConfigured = CODE_EXAMPLE_PRE_CONFIGURED;
+
+  constructor() {}
+
+  ngOnInit() {}
+}
+
+const CODE_EXAMPLE_INLINE = `@Component({
+  selector: 'your-org-feature',
+  template: \`
+    <user-profile-element *axLazyElement="'https://your-org.com/elements/user-profile-element.js'"></user-profile-element>
+    <user-profile-element *axLazyElement="'https://your-org.com/elements/user-profile-element.js'"></user-profile-element>
+    <user-profile-element *axLazyElement="'https://your-org.com/elements/user-profile-element.js'"></user-profile-element>
+  \`
+})
+export class FeatureComponent {}`;
+
+const CODE_EXAMPLE_MODULE = `// pre-configured LazyElementsModule
+const options: LazyElementModuleOptions = {
+  elementConfigs: [
+    { tag: 'user-profile-element', url: 'https://your-org.com/elements/user-profile-element.js' }
+    { tag: 'some-other-element', url: 'https://your-org.com/elements/some-other-element.js' }
+  ]
+};
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [FeatureComponent],
+  imports: [
+    LazyElementsModule.forFeature(options),
+  ]
+})
+export class FeatureModule { }
+`;
+
+const CODE_EXAMPLE_PRE_CONFIGURED = `@Component({
+  selector: 'your-org-feature',
+  template: \`
+    <user-profile-element *axLazyElement></user-profile-element>
+    <user-profile-element *axLazyElement></user-profile-element>
+    <user-profile-element *axLazyElement></user-profile-element>
+  \`
+})
+export class FeatureComponent {}`;

projects/elements-demo/src/app/features/docs/configuration/configuration.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HighlightModule } from 'ngx-highlightjs';
+
+import { SharedModule } from '../../../shared/shared.module';
+
+import { ConfigurationRoutingModule } from './configuration-routing.module';
+import { ConfigurationComponent } from './configuration.component';
+
+@NgModule({
+  declarations: [ConfigurationComponent],
+  imports: [
+    CommonModule,
+    HighlightModule,
+    SharedModule,
+    ConfigurationRoutingModule
+  ]
+})
+export class ConfigurationModule {}

projects/elements-demo/src/app/features/docs/docs-routing.module.ts

@@ -46,6 +46,13 @@ const routes: Routes = [
           import('./change-detection/change-detection.module').then(
             m => m.ChangeDetectionModule
           )
+      },
+      {
+        path: 'configuration',
+        loadChildren: () =>
+          import('./configuration/configuration.module').then(
+            m => m.ConfigurationModule
+          )
       }
     ]
   }