Feature/business dialog

projects/angular-showcase/src/app/app.component.scss

@@ -21,7 +21,7 @@
   top: 0;
   height: 48px;
   border-bottom: solid 1px #cccccc;
-  z-index: 2000;
+  z-index: 980;
 
   a {
     height: 48px;
@@ -45,7 +45,7 @@
   width: 300px;
   height: 100%;
   top: 0;
-  z-index: 1000;
+  z-index: 980;
   transition: all 0.3s ease;
   overflow-y: auto;
 
@@ -101,7 +101,7 @@
   transform: rotate(0deg);
   transition: all 0.3s ease;
   cursor: pointer;
-  z-index: 3000;
+  z-index: 990;
 
   span {
     display: block;

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

@@ -5,13 +5,23 @@ import { RouterModule } from '@angular/router';
 import { ButtonModule } from '@sbb-esta/angular-business/button';
 import { CheckboxModule } from '@sbb-esta/angular-business/checkbox';
 import { ContextmenuModule } from '@sbb-esta/angular-business/contextmenu';
+import { DialogModule } from '@sbb-esta/angular-business/dialog';
 import { FieldModule } from '@sbb-esta/angular-business/field';
 import { HeaderModule } from '@sbb-esta/angular-business/header';
 import { ProcessflowModule } from '@sbb-esta/angular-business/processflow';
+import { RadioButtonModule } from '@sbb-esta/angular-business/radio-button';
 import { TooltipModule } from '@sbb-esta/angular-business/tooltip';
 import { UserMenuModule } from '@sbb-esta/angular-business/usermenu';
 import { IconCollectionModule } from '@sbb-esta/angular-icons';
 
+import {
+  DialogShowcaseComponent,
+  DialogShowcaseExample2Component,
+  DialogShowcaseExample2ContentComponent,
+  DialogShowcaseExample3Component,
+  DialogShowcaseExampleComponent,
+  DialogShowcaseExampleContentComponent
+} from './dialog-showcase/dialog-showcase.component';
 import { SimpleContextmenuComponent } from './simple-contextmenu/simple-contextmenu.component';
 import { SkippableProcessflowComponent } from './skippable-processflow/skippable-processflow.component';
 import { TooltipShowcaseComponent } from './tooltip-showcase/tooltip-showcase.component';
@@ -21,7 +31,13 @@ const exampleComponents = [
   SimpleContextmenuComponent,
   SkippableProcessflowComponent,
   TooltipShowcaseComponent,
-  UsermenuShowcaseComponent
+  UsermenuShowcaseComponent,
+  DialogShowcaseComponent,
+  DialogShowcaseExampleComponent,
+  DialogShowcaseExampleContentComponent,
+  DialogShowcaseExample2Component,
+  DialogShowcaseExample2ContentComponent,
+  DialogShowcaseExample3Component
 ];
 
 @NgModule({
@@ -41,7 +57,9 @@ const exampleComponents = [
     HeaderModule,
     ProcessflowModule,
     TooltipModule,
-    UserMenuModule
+    UserMenuModule,
+    DialogModule,
+    RadioButtonModule
   ]
 })
 export class BusinessExamplesModule {}

projects/angular-showcase/src/app/business/business-examples/dialog-showcase/dialog-showcase-content-1.component.html

@@ -0,0 +1,19 @@
+<div sbbDialogHeader>
+  <p>Hi {{ data.name }}</p>
+</div>
+<div sbbDialogContent>
+  <div>
+    What's your favorite animal?
+    <sbb-field label="Animal" mode="long">
+      <input type="text" [(ngModel)]="data.animal" cdkFocusInitial />
+    </sbb-field>
+  </div>
+</div>
+<div sbbDialogFooter>
+  <button sbbButton [sbbDialogClose]="data.animal" cdkFocusInitial>
+    Ok
+  </button>
+  <button sbbButton mode="secondary" (click)="noThanks()">
+    No Thanks
+  </button>
+</div>

projects/angular-showcase/src/app/business/business-examples/dialog-showcase/dialog-showcase-content-2.component.html

@@ -0,0 +1,97 @@
+<div sbbDialogHeader>
+  <p>Install Angular</p>
+</div>
+<div sbbDialogContent>
+  <div>
+    <p>
+      Learn one way to build applications with Angular and reuse your code and abilities to build
+      apps for any deployment target. For web, mobile web, native mobile and native desktop.
+    </p>
+
+    <h3>Speed &amp; Performance</h3>
+    <p>
+      Achieve the maximum speed possible on the Web Platform today, and take it further, via Web
+      Workers and server-side rendering. Angular puts you in control over scalability. Meet huge
+      data requirements by building data models on RxJS, Immutable.js or another push-model.
+    </p>
+
+    <h3>Incredible tooling</h3>
+    <p>
+      Build features quickly with simple, declarative templates. Extend the template language with
+      your own components and use a wide array of existing components. Get immediate
+      Angular-specific help and feedback with nearly every IDE and editor. All this comes together
+      so you can focus on building amazing apps rather than trying to make the code work.
+    </p>
+
+    <h3>Loved by millions</h3>
+    <p>
+      From prototype through global deployment, Angular delivers the productivity and scalable
+      infrastructure that supports Google's largest applications.
+    </p>
+
+    <h3>What is Angular?</h3>
+
+    <p>
+      Angular is a platform that makes it easy to build applications with the web. Angular combines
+      declarative templates, dependency injection, end to end tooling, and integrated best practices
+      to solve development challenges. Angular empowers developers to build applications that live
+      on the web, mobile, or the desktop
+    </p>
+
+    <h3>Architecture overview</h3>
+
+    <p>
+      Angular is a platform and framework for building client applications in HTML and TypeScript.
+      Angular is itself written in TypeScript. It implements core and optional functionality as a
+      set of TypeScript libraries that you import into your apps.
+    </p>
+
+    <p>
+      The basic building blocks of an Angular application are NgModules, which provide a compilation
+      context for components. NgModules collect related code into functional sets; an Angular app is
+      defined by a set of NgModules. An app always has at least a root module that enables
+      bootstrapping, and typically has many more feature modules.
+    </p>
+
+    <p>
+      Components define views, which are sets of screen elements that Angular can choose among and
+      modify according to your program logic and data. Every app has at least a root component.
+    </p>
+
+    <p>
+      Components use services, which provide specific functionality not directly related to views.
+      Service providers can be injected into components as dependencies, making your code modular,
+      reusable, and efficient.
+    </p>
+
+    <p>
+      Both components and services are simply classes, with decorators that mark their type and
+      provide metadata that tells Angular how to use them.
+    </p>
+
+    <p>
+      The metadata for a component class associates it with a template that defines a view. A
+      template combines ordinary HTML with Angular directives and binding markup that allow Angular
+      to modify the HTML before rendering it for display.
+    </p>
+
+    <p>
+      The metadata for a service class provides the information Angular needs to make it available
+      to components through Dependency Injection (DI).
+    </p>
+
+    <p>
+      An app's components typically define many views, arranged hierarchically. Angular provides the
+      Router service to help you define navigation paths among views. The router provides
+      sophisticated in-browser navigational capabilities. END
+    </p>
+  </div>
+</div>
+<div sbbDialogFooter>
+  <button sbbButton [sbbDialogClose]="true">
+    Accept
+  </button>
+  <button sbbButton mode="secondary" sbbDialogClose>
+    Cancel
+  </button>
+</div>

projects/angular-showcase/src/app/business/business-examples/dialog-showcase/dialog-showcase-content-3.component.html

@@ -0,0 +1,33 @@
+<div class="sbbsc-block">
+  <button sbbButton mode="secondary" (click)="openDialog()">
+    Open Dialog From Template
+  </button>
+</div>
+
+<ng-template #sampleDialogTemplate>
+  <div>
+    <div sbbDialogHeader>
+      <p>Lorem Ipsum</p>
+    </div>
+    <div sbbDialogContent>
+      <div>
+        <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. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </p>
+      </div>
+    </div>
+    <div sbbDialogFooter>
+      <button sbbButton [sbbDialogClose]="true">
+        Accept
+      </button>
+      <button sbbButton mode="secondary" sbbDialogClose>
+        Cancel
+      </button>
+    </div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,42 @@
+<article class="container-fluid">
+  <div class="row">
+    <div class="col-lg-6 sbbsc-v-sep">
+      <h4 class="sbbsc-block">Dialog sharing data</h4>
+      <sbb-dialog-showcase-example></sbb-dialog-showcase-example>
+    </div>
+    <div class="col-lg-6">
+      <h4 class="sbbsc-block">Description</h4>
+      <p>
+        This implementation shows how to share data between parent component and dialog component.
+      </p>
+    </div>
+  </div>
+  <div role="presentation" class="sbbsc-separator"></div>
+  <div class="row">
+    <div class="col-lg-6 sbbsc-v-sep">
+      <h4 class="sbbsc-block">Dialog with content loaded from Component</h4>
+      <sbb-dialog-showcase-example-2></sbb-dialog-showcase-example-2>
+    </div>
+    <div class="col-lg-6">
+      <h4 class="sbbsc-block">Description</h4>
+      <p>
+        This dialog loads its content from a component and shows custom content inside the header,
+        scrollable content and footer. Additionally it makes use of the configuration options to set
+        a fixed width, height and top offset.
+      </p>
+    </div>
+  </div>
+  <div role="presentation" class="sbbsc-separator"></div>
+  <div class="row">
+    <div class="col-lg-6 sbbsc-v-sep">
+      <h4 class="sbbsc-block">Dialog with content loaded from Template</h4>
+      <sbb-dialog-showcase-example-3></sbb-dialog-showcase-example-3>
+    </div>
+    <div class="col-lg-6">
+      <h4 class="sbbsc-block">Description</h4>
+      <p>
+        Dialog with content loaded from a TemplateRef.
+      </p>
+    </div>
+  </div>
+</article>

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

@@ -0,0 +1,31 @@
+.sbbsc-dialog-example-icon-1,
+.sbbsc-dialog-example-icon-2 {
+  height: 20px;
+  vertical-align: middle;
+}
+
+.sbbsc-dialog-example-icon-1 {
+  width: 20px;
+}
+
+.sbbsc-dialog-example-icon-2 {
+  width: 60px;
+  fill: #fff;
+  background: #eb0000;
+}
+
+.sbbsc-lb-disableclose-c-1 {
+  text-align: center;
+}
+
+.sbbsc-lb-disableclose-c-2 {
+  text-align: center;
+
+  h3 {
+    margin-bottom: 1em;
+  }
+
+  button[mode='ghost'] {
+    margin-right: 8px;
+  }
+}