Merge pull request #91 from stefan-isakovic/feat/flowbar-page-layout

implemented page layouts, implemented demo for page layouts (#89)

projects/material-addons/src/lib/content-panel/content-header/content-header.component.html

@@ -0,0 +1,3 @@
+<div class="content-header">
+    <ng-content></ng-content>
+</div>

projects/material-addons/src/lib/content-panel/content-header/content-header.component.scss

@@ -0,0 +1,3 @@
+.content-header {
+  padding-right: 0.5rem;
+}

projects/material-addons/src/lib/content-panel/content-header/content-header.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mad-content-header',
+  templateUrl: './content-header.component.html',
+  styleUrls: ['./content-header.component.scss']
+})
+export class ContentHeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.scss

@@ -0,0 +1,7 @@
+:host {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  border-top: 0.05rem solid #cccccc;
+  padding: 1rem;
+  height: 1rem;
+}

projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mad-content-panel-container-content',
+  templateUrl: './content-panel-container-content.component.html',
+  styleUrls: ['./content-panel-container-content.component.scss']
+})
+export class ContentPanelContainerContentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.scss

@@ -0,0 +1,9 @@
+:host {
+  border-top: 0.05rem solid #cccccc;
+  padding: 0.25rem 1rem;
+  min-height: 2rem;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  min-height: 2rem;
+}

projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mad-content-panel-container-footer',
+  templateUrl: './content-panel-container-footer.component.html',
+  styleUrls: ['./content-panel-container-footer.component.scss']
+})
+export class ContentPanelContainerFooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.html

@@ -0,0 +1,4 @@
+<div class="content-panel-outer-wrapper">
+    <ng-content select="mad-content-panel-container-content"></ng-content>
+    <ng-content select="mad-content-panel-container-footer"></ng-content>
+</div>

projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.scss

@@ -0,0 +1,13 @@
+:host {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex: 1 1 auto;
+  min-height: .05rem;
+}
+
+.content-panel-outer-wrapper {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}

projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mad-content-panel-container',
+  templateUrl: './content-panel-container.component.html',
+  styleUrls: ['./content-panel-container.component.scss']
+})
+export class ContentPanelContainerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/material-addons/src/lib/content-panel/content-panel.module.ts

@@ -0,0 +1,26 @@
+import { ContentHeaderComponent } from './content-header/content-header.component';
+import { ContentPanelContainerComponent } from './content-panel-container/content-panel-container.component';
+import { ContentPanelContainerContentComponent } from './content-panel-container-content/content-panel-container-content.component';
+import { ContentPanelContainerFooterComponent } from './content-panel-container-footer/content-panel-container-footer.component';
+import { MainContainerComponent } from './main-container/main-container.component';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [
+    ContentHeaderComponent,
+    ContentPanelContainerComponent,
+    ContentPanelContainerContentComponent,
+    ContentPanelContainerFooterComponent,
+    MainContainerComponent,
+  ],
+  imports: [CommonModule],
+  exports: [
+    ContentHeaderComponent,
+    ContentPanelContainerComponent,
+    ContentPanelContainerContentComponent,
+    ContentPanelContainerFooterComponent,
+    MainContainerComponent,
+  ],
+})
+export class ContentPanelModule {}

projects/material-addons/src/lib/content-panel/main-container/main-container.component.html

@@ -0,0 +1,5 @@
+<div class="main-container">
+    <ng-content select="mad-content-header"></ng-content>
+    <ng-content select="mad-flowbar"></ng-content>
+    <ng-content select="mad-content-panel-container"></ng-content>
+</div>

projects/material-addons/src/lib/content-panel/main-container/main-container.component.scss

@@ -0,0 +1,5 @@
+.main-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column
+}

projects/material-addons/src/lib/content-panel/main-container/main-container.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mad-main-container',
+  templateUrl: './main-container.component.html',
+  styleUrls: ['./main-container.component.scss']
+})
+export class MainContainerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/material-addons/src/lib/flowbar/flowbar.component.html

@@ -0,0 +1,10 @@
+<div class="stepper-container">
+    <mat-horizontal-stepper #stepper (click)="triggerClick()">
+        <mat-step *ngFor="let step of _steps" [aria-labelledby]="!step.enabled ? 'disabled' : null">
+            <ng-template matStepLabel>
+                <div class="step-header-overlay" *ngIf="this._headerClick.observers.length > 0"  (click)="headerClick($event, step)"></div>
+                <span>{{step.label}}</span>
+            </ng-template>
+        </mat-step>
+    </mat-horizontal-stepper>
+</div>

projects/material-addons/src/lib/flowbar/flowbar.component.scss

@@ -0,0 +1,29 @@
+.stepper-container {
+  display: flex;
+  padding: 0 1rem;
+}
+
+::ng-deep .mat-stepper-horizontal .mat-horizontal-stepper-header {
+  padding: 0;
+  height:auto;
+}
+
+::ng-deep .mat-step-header[aria-labelledby="disabled"] {
+  pointer-events: none !important;
+  cursor: not-allowed;
+}
+
+::ng-deep .mat-stepper-horizontal .mat-horizontal-content-container {
+  padding: 0 0 10px 0;
+}
+
+::ng-deep .mat-stepper-horizontal .mat-stepper-horizontal-line {
+  margin: 0 5px;
+  border-top-width: 4px;
+}
+
+.step-header-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}