diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5f67ade6..2fda2ff1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,4 @@
import { Component } from '@angular/core';
-import { ModuleEntries } from 'src/module-entries';
-import { NavigationEntries } from 'src/navigation-entries';
-import { TranslateService } from '@ngx-translate/core';
-import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
-import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-root',
@@ -11,41 +6,4 @@ import { Title } from '@angular/platform-browser';
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
- moduleName = 'MATERIAL_ADDONS_DEMO';
-
- moduleEntries = ModuleEntries.MODULE_ENTRIES;
- navEntries = NavigationEntries.NAVIGATION_ENTRIES;
-
- constructor(
- private translate: TranslateService,
- private router: Router,
- private titleService: Title,
- private activatedRoute: ActivatedRoute,
- ) {
- this.translate.setDefaultLang('en');
-
- this.router.events.subscribe(event => {
- if (event instanceof NavigationEnd) {
- this.setPageTitle();
- }
- });
- }
-
- private setPageTitle(): void {
- // TODO: find type
- let route = this.activatedRoute;
- while (route.firstChild) {
- route = route.firstChild;
- }
- route.data.subscribe(value => {
- if (value.i18n) {
- this.translate
- .get(value.i18n)
- .toPromise()
- .then(title => {
- this.titleService.setTitle(title);
- });
- }
- });
- }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 85260d8b..41b51cfb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -49,6 +49,8 @@ import {
ToolbarModule,
TableModule,
ThrottleClickModule,
+ ContentPanelModule,
+ FlowbarModule,
} from '@porscheinformatik/material-addons';
import { ReadOnlyFieldComponent } from './example-components/read-only-field/read-only-field.component';
import { ReadOnlyFieldWrapperComponent } from './example-components/read-only-field-wrapper/read-only-field-wrapper.component';
@@ -76,12 +78,15 @@ import { MadButtonsComponent } from './example-components/mad-buttons/mad-button
import { MadButtonsDemoComponent } from './component-demos/mad-buttons-demo/mad-buttons-demo.component';
import { ThrottleClickComponent } from './example-components/throttle-click/throttle-click.component';
import { ThrottleClickDemoComponent } from './component-demos/throttle-click-demo/throttle-click-demo.component';
-import { QuickListCompactBasicComponent } from './example-components/quick-list-compact-basic/quick-list-compact-basic.component';
import { StepperModule } from '../../projects/material-addons/src/lib/stepper/stepper.module';
import { StepperComponent } from './example-components/stepper/stepper.component';
import { StepperDemoComponent } from './component-demos/stepper-demo/stepper-demo.component';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { MatStepperModule } from '@angular/material/stepper';
+import { QuickListCompactBasicComponent } from './example-components/quick-list-compact-basic/quick-list-compact-basic.component';
+import { PageLayoutsComponent } from './component-demos/page-layouts/page-layouts.component';
+import { FullPageLayoutsModule } from './full-page-layouts/full-page-layouts.module';
+import { ExampleComponentsLayoutComponent } from './example-components-layout/example-components-layout.component';
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
return new TranslateHttpLoader(http, './assets/i18n/');
@@ -127,6 +132,8 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
QuickListCompactBasicComponent,
StepperComponent,
StepperDemoComponent,
+ PageLayoutsComponent,
+ ExampleComponentsLayoutComponent,
],
imports: [
CommonModule,
@@ -181,6 +188,9 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
CdkStepperModule,
MatStepperModule,
StepperModule,
+ ContentPanelModule,
+ FullPageLayoutsModule,
+ FlowbarModule,
],
providers: [],
bootstrap: [AppComponent],
diff --git a/src/app/component-demos/page-layouts/page-layouts.component.html b/src/app/component-demos/page-layouts/page-layouts.component.html
new file mode 100644
index 00000000..5551199e
--- /dev/null
+++ b/src/app/component-demos/page-layouts/page-layouts.component.html
@@ -0,0 +1,73 @@
+
Base Pagelayout
+
+ Following example shows a base page layout without multiple pages. If you have different pages (different header, ...)
+ with routing see next example.
+
+
+
Design Guidelines
+
All pages in an application should follow a common layout structure to ensure a consistent user experience across
+ applications.
+
The Base Pagelayout includes the following components:
+
+
Main Navigation
+
Pagetitle
+
Content Area
+
+
Further components may complete the pagelayout as needed:
+
+
Back Button
+
Command bar
+
Content-Panel
+
+
Command Bar
+
+
The Command Bar comprises the most common users tasks.
+
The most important ones are shown, additional ones are accessible in an overflow-menu.
+
Other commands, either less common ones or where the proximity to an ui element is crucial, are provided within
+ the content area.
+
The Flow Bar Layout extends the Base Page Layout by adding a wizard-like navigation control.
+
+ This layout that can be used to highlight the current progress a user is making throughout multiple steps. The Flow
+ Bar allows the user to navigate between steps, by either clicking on a specific step or using the previous or next
+ button.
+
+
+
Usage
+
Use this layout if you want to guide the user through a sequence of multiple steps. Each step requires the user to
+ perform a complex task like filling out a form. Don't use this layout if the user's steps are mutually exclusive; in
+ this case use Tabs instead.
+
When implementing a flow bar on your page, you will need to insert a mad-flowbar
+ right below your content-header but above your content-container.
+
Following inputs & outputs are available:
+
+
+ [steps] - an array of FlowBarStep.
+ You can extend/implement this interface to save even more information in your steps.
+
+
+ [(activeStep)] two way binding of the active step.
+
+
+
You can use the @ViewChild() annotation to get a reference of your FlowBarComponent, which will allow you to call its methods:
+
+
previous() - open the previous step.
+
next() - opens the next step.
+
isPreviousAvailable() - returns true if the previous step can be opened.
+
isNextAvailable() - returns true if the next step can be opened.
+
isLastStep() - returns true if the current step is the last.
+
+
+
+
Demo
+Base Pagelayout with a Flow Bar
+{{ flowBarLayout }}
diff --git a/src/app/component-demos/page-layouts/page-layouts.component.scss b/src/app/component-demos/page-layouts/page-layouts.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/component-demos/page-layouts/page-layouts.component.ts b/src/app/component-demos/page-layouts/page-layouts.component.ts
new file mode 100644
index 00000000..9711f3bd
--- /dev/null
+++ b/src/app/component-demos/page-layouts/page-layouts.component.ts
@@ -0,0 +1,77 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-page-layouts',
+ templateUrl: './page-layouts.component.html',
+ styleUrls: ['./page-layouts.component.scss'],
+})
+export class PageLayoutsComponent {
+ basePageLayout =
+ `
+
+
+
+
+
Base Pagelayout
+
+
+
+
+
+
Define the page content here
+
+
+
Footer here
+
+
+ `;
+
+ flowBarLayout = `
+
+
+
+
+
+
Flow Bar layout
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+ labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
+ ea rebum.
+ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+ amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
+ aliquyam
+ erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+ gubergren,
+ no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+ sadipscing
+ elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+ voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+ takimata sanctus
+ est
+ Lorem ipsum dolor sit amet.
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua.
+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+ Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua.
+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+ Lorem ipsum dolor sit amet.
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua.
+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+ Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua.
+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+ Lorem ipsum dolor sit amet.
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua.
+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+ Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua.
+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+ Lorem ipsum dolor sit amet.
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua.
+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+ Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua.
+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+ Lorem ipsum dolor sit amet.
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua.
+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+ Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua.
+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+ Lorem ipsum dolor sit amet.
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+ labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
+ ea rebum.
+ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+ amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
+ aliquyam
+ erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+ gubergren,
+ no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+ sadipscing
+ elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+ voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+ takimata sanctus
+ est
+ Lorem ipsum dolor sit amet.
+