Merge pull request #677 from dxc-technology/jialecl-appLayout-types

Adding app layout types

Author: aidamag

projects/dxc-ngx-cdk-site/src/app/components/examples/layout/app-layout-api/app-layout-api.component.html

@@ -51,36 +51,7 @@
 <p>
   Everything in this component will be displayed as content inside a sidenav at
   the left. This is optional and if not specified, the sidenav will not be
-  shown. Check
-  <dxc-link
-    text="DxcSidenav"
-    href=""
-    underlined="false"
-    (click)="navigateToRoute('sidenav'); $event.preventDefault()"
-  ></dxc-link>
-  for more information regarding its props. This also applies to the themming.
-</p>
-
-
-<dxc-heading
-  [level]="5"
-  weight="normal"
-  text="DxcApplicationLayoutFooter"
-  [margin]="{ bottom: 'small' }"
-></dxc-heading>
-<p>
-  This component has to be a child of DxcApplicationLayoutMain. Everything in
-  this component will be displayed as a footer, at the bottom of the screen. If
-  you want to show a
-  <dxc-link
-    text="DxcFooter"
-    href=""
-    underlined="false"
-    (click)="navigateToRoute('footer'); $event.preventDefault()"
-  ></dxc-link
-  >, as a shortcut, you can directly use it without DxcApplicationLayoutFooter.
-  This is optional and if it is not specified, the DxcFooter will be shown by
-  default.
+  shown. 
 </p>
 
 <dxc-heading
@@ -90,31 +61,65 @@
   [margin]="{ bottom: 'small' }"
 ></dxc-heading>
 
-<dxc-table>
+<dxc-table [margin]="{ bottom: 'medium' }">
   <tr>
     <th>Name</th>
     <th>Default</th>
     <th>Description</th>
   </tr>
   <tr>
-    <td>mode: 'overlay' | 'push' </td>
+    <td>mode: 'overlay' | 'push'</td>
     <td>
-      <code>'overlay'</code>
+      <code>'push'</code>
     </td>
     <td>
-      Default action over the content of the page, overlay the content or
-      push to the right.
+      Default action over the content of the page, overlay the content or push
+      to the right. In lower resolutions the mode will always be overlay.
     </td>
   </tr>
   <tr>
     <td>displayArrow: boolean</td>
     <td>
       <code>true</code>
     </td>
-    <td>If false, the arrow button is hidden.</td>
+    <td>
+      If false, the arrow button is hidden. In lower resolutions the arrow will
+      be always displayed.
+    </td>
+  </tr>
+  <tr>
+    <td>padding: string | object</td>
+    <td></td>
+    <td>
+      Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall'
+      | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an
+      object with 'top', 'bottom', 'left' and 'right' properties in order to
+      specify different padding sizes.
+    </td>
   </tr>
 </dxc-table>
 
+<dxc-heading
+  [level]="5"
+  weight="normal"
+  text="DxcApplicationLayoutFooter"
+  [margin]="{ bottom: 'small' }"
+></dxc-heading>
+<p>
+  This component has to be a child of DxcApplicationLayoutMain. Everything in
+  this component will be displayed as a footer, at the bottom of the screen. If
+  you want to show a
+  <dxc-link
+    text="DxcFooter"
+    href=""
+    underlined="false"
+    (click)="navigateToRoute('footer'); $event.preventDefault()"
+  ></dxc-link
+  >, as a shortcut, you can directly use it without DxcApplicationLayoutFooter.
+  This is optional and if it is not specified, the DxcFooter will be shown by
+  default.
+</p>
+
 <dxc-heading
   [level]="5"
   weight="normal"
@@ -126,7 +131,6 @@
   container at the center.
 </p>
 
-
 <dxc-heading
   [level]="4"
   weight="normal"
@@ -138,7 +142,4 @@
   want to use it from your Angular project. You have the following example:
 </p>
 
-
-
-
 <app-code-playground [code]="bindCode" type="TS"></app-code-playground>

projects/dxc-ngx-cdk/src/lib/dxc-application-layout/dxc-application-layout-sidenav/dxc-application-layout-sidenav.component.ts

@@ -16,6 +16,22 @@ import { responsiveSizes } from "../../variables";
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { SidenavService } from "./services/sidenav.service";
 
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+
+type Padding = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
 @Component({
   selector: "dxc-application-layout-sidenav",
   templateUrl: "./dxc-application-layout-sidenav.component.html",
@@ -24,8 +40,20 @@ import { SidenavService } from "./services/sidenav.service";
 })
 export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
   @HostBinding("class") sidenavStyles;
-  @Input() mode: string = "push";
-  @Input() padding: any;
+  /**
+   * Default action over the content of the page, overlay the content or push to the right ('push' | 'overlay').
+   * In lower resolutions the mode will always be overlay.
+   */
+  @Input() mode: "push" | "overlay" = "push";
+  /**
+   * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
+   */
+  @Input() padding: Space | Padding;
+  /**
+   * If false, the arrow button is hidden.
+   * In lower resolutions the arrow will be always displayed.
+   */
   @Input()
   get displayArrow(): boolean {
     return this._displayArrow;
@@ -51,7 +79,7 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
   constructor(
     private utils: CssUtils,
     private sidenavService: SidenavService
-  ) { }
+  ) {}
 
   @HostListener("window:resize", ["$event"])
   onResize(event) {
@@ -113,8 +141,8 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
       this.isShown !== undefined
         ? this.isShown
         : this.innerWidth <= responsiveSizes.tablet
-          ? false
-          : true;
+        ? false
+        : true;
     this.sidenavService.showMenu(this.isShown);
   }
 
@@ -133,7 +161,7 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
     return css`
       z-index: 400;
       position: ${(inputs.mode === "overlay" && this.displayArrow) ||
-        inputs.isResponsive
+      inputs.isResponsive
         ? "absolute"
         : "relative"};
       height: ${inputs.mode === "overlay" || inputs.isResponsive ? "100%" : ""};
@@ -145,22 +173,22 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
         .sidenavMenu {
           ${this.isShown ? this.utils.getPaddings(inputs.padding) : ""}
           width: ${inputs.isShown
-        ? "calc(300px" +
-        this.utils.getPaddingOrMargin(null, inputs.padding) +
-        ")"
-        : "0px"};
+            ? "calc(300px" +
+              this.utils.getPaddingOrMargin(null, inputs.padding) +
+              ")"
+            : "0px"};
           overflow-y: auto;
           overflow-x: hidden;
           transform: ${inputs.isShown
-        ? "translateX(0)"
-        : !inputs.isShown
-          ? "translateX(-100%) !important"
-          : ""};
+            ? "translateX(0)"
+            : !inputs.isShown
+            ? "translateX(-100%) !important"
+            : ""};
           opacity: ${inputs.isShown ? "1" : "0"};
           visibility: ${inputs.isShown ? "visible" : "hidden"};
           transition: ${this.firstClick
-        ? "transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, width 0.4s ease-in-out, padding 0.4s ease-in-out;"
-        : "width 0.4s ease-in-out"};
+            ? "transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, width 0.4s ease-in-out, padding 0.4s ease-in-out;"
+            : "width 0.4s ease-in-out"};
           &::-webkit-scrollbar {
             width: 2px;
           }
@@ -186,24 +214,24 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
           left: ${this.isShown ? "calc(300px - 21px)" : "calc(0px - 21px)"};
           top: calc(50% - 21px);
           transition: ${this.firstClick
-        ? "transform 0.4s ease-in-out, left 0.4s ease-in-out;"
-        : ""};
+            ? "transform 0.4s ease-in-out, left 0.4s ease-in-out;"
+            : ""};
           cursor: pointer;
           z-index: ${inputs.mode === "overlay" || this.isResponsive
-        ? "401"
-        : "auto"};
+            ? "401"
+            : "auto"};
           .sidenavArrowImage {
             height: 18px;
             width: 18px;
             display: flex;
             align-items: center;
             margin-left: ${inputs.isShown ? "0px" : "10px"};
             transform: ${inputs.isShown
-        ? "rotate(-180deg)"
-        : "rotate(0deg) !important"};
+              ? "rotate(-180deg)"
+              : "rotate(0deg) !important"};
             transition: ${this.firstClick
-        ? "margin 0.4s ease-in, transform 0.4s ease-in-out; "
-        : ""};
+              ? "margin 0.4s ease-in, transform 0.4s ease-in-out; "
+              : ""};
             fill: var(--sidenav-arrowColor);
           }
         }