Merge pull request #670 from dxc-technology/jialecl-sidenav-types

adding sidenav types + removing unneccesary func

Author: aidamag

projects/dxc-ngx-cdk-site/src/app/components/examples/sidenav/properties/sidenav-table-properties/sidenav-table-properties.component.html

@@ -10,11 +10,6 @@
     <th>Default</th>
     <th>Description</th>
   </tr>
-  <tr>
-    <td>tabIndexValue: number</td>
-    <td><code>0</code></td>
-    <td>Value of the tabindex given to DxcSidenavLink children.</td>
-  </tr>
   <tr>
     <td>padding: string | object</td>
     <td></td>

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

@@ -33,13 +33,13 @@
   text="DxcSidenavSubtitle"
   [margin]="{ bottom: 'small' }"
 ></dxc-heading>
-<p>The content will be showed as a subtitle.</p>
+<p>The content will be showed as a subtitle in the sidenav.</p>
 <dxc-heading
   [level]="5"
   text="DxcSidenavLink"
   [margin]="{ bottom: 'small' }"
 ></dxc-heading>
-<p>Customized link that allows the navigation.</p>
+<p>Customized link that allows the navigation. As the other components its content will be shown as an anchor.</p>
 <dxc-table>
   <tr>
     <th>Name</th>
@@ -54,7 +54,12 @@
   <tr>
     <td>onClick: EventEmitter</td>
     <td></td>
-    <td>This function will be called when the user clicks the link.</td>
+    <td>This event will emit when the user clicks the link.</td>
+  </tr>
+  <tr>
+    <td>tabIndexValue: number</td>
+    <td><code>0</code></td>
+    <td>Value of the tabindex given to the DxcSidenavLink.</td>
   </tr>
 </dxc-table>
 

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

@@ -1,3 +1,4 @@
+import { coerceNumberProperty } from "@angular/cdk/coercion";
 import {
   Component,
   ElementRef,
@@ -7,24 +8,36 @@ import {
   Output,
 } from "@angular/core";
 import { CssUtils } from "../../utils";
-import { SidenavService } from '../services/sidenav.service';
+
 @Component({
   selector: "dxc-sidenav-link",
   templateUrl: "./dxc-sidenav-link.component.html",
   providers: [CssUtils],
 })
 export class DxcSidenavLinkComponent implements OnInit {
+  /**
+   * Page to be opened when the user clicks on the link.
+   */
   @Input() href: string;
-  @Output() onClick = new EventEmitter<any>();
 
-  tabIndexValue: number = 0;
+  /**
+   * This event will be emit when the user clicks the link.
+   */
+  @Output() onClick: EventEmitter<void> = new EventEmitter<void>();
+
+  /**
+   * Value of the tabindex given to the DxcSidenavLink.
+   */
+   @Input()
+   get tabIndexValue(): number {
+     return this._tabIndexValue;
+   }
+   set tabIndexValue(value: number) {
+     this._tabIndexValue = coerceNumberProperty(value);
+   }
+   private _tabIndexValue;
 
-  constructor(public element: ElementRef, private service: SidenavService) {
-    this.service.tabIndexValue.subscribe((value) => {
-      if (value) {
-        this.tabIndexValue = value
-      }
-    });
+  constructor(public element: ElementRef) {
   }
 
   ngOnInit() {

projects/dxc-ngx-cdk/src/lib/dxc-sidenav/dxc-sidenav.component.html

@@ -1,5 +1,3 @@
-<background-provider-inner
-  color="{{ currentBackgroundColor }}"
->
+<background-provider-inner color="{{ currentBackgroundColor }}">
   <ng-content></ng-content>
 </background-provider-inner>

projects/dxc-ngx-cdk/src/lib/dxc-sidenav/dxc-sidenav.component.scss

@@ -12,45 +12,38 @@ import {
 import { BehaviorSubject } from "rxjs";
 import { css } from "emotion";
 import { CssUtils } from "../utils";
-import { responsiveSizes } from "./../variables";
-import {
-  coerceBooleanProperty,
-  coerceNumberProperty,
-} from "@angular/cdk/coercion";
-import { SidenavService } from "./services/sidenav.service";
 import { BackgroundProviderService } from "../background-provider/service/background-provider.service";
 
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+
+type Padding = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
 @Component({
   selector: "dxc-sidenav",
   templateUrl: "./dxc-sidenav.component.html",
-  styleUrls: ["./dxc-sidenav.component.scss"],
-  providers: [CssUtils, SidenavService, BackgroundProviderService],
+  providers: [CssUtils, BackgroundProviderService],
 })
 export class DxcSidenavComponent implements OnInit {
   @HostBinding("class") sidenavStyles;
-  @Input() mode: string = "push";
-  @Input() padding: any;
-  @Input()
-  get displayArrow(): boolean {
-    return this._displayArrow;
-  }
-  set displayArrow(value: boolean) {
-    this._displayArrow = coerceBooleanProperty(value);
-  }
-  _displayArrow = true;
-  @Input()
-  get tabIndexValue(): number {
-    return this._tabIndexValue;
-  }
-  set tabIndexValue(value: number) {
-    this._tabIndexValue = coerceNumberProperty(value);
-  }
-  private _tabIndexValue;
+
+  /**
+   * 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;
 
   firstClick: boolean = false; //remove animation on first load
-  innerWidth;
-  isResponsive = true;
-  isShown: boolean;
 
   currentBackgroundColor: string;
 
@@ -62,41 +55,15 @@ export class DxcSidenavComponent implements OnInit {
   @ViewChild("sidenavContainer", { static: false }) sidenav: ElementRef;
   sidenavArrow: any;
 
-  constructor(private utils: CssUtils, private service: SidenavService) {}
-
-  @HostListener("window:resize", ["$event"])
-  onResize(event) {
-    this.updateCss();
-  }
+  constructor(private utils: CssUtils) {}
 
   ngOnInit() {
-    this.updateState();
     this.sidenavStyles = `${this.getDynamicStyle({
       ...this.defaultInputs.getValue(),
-      mode: this.mode,
-      innerWidth: this.innerWidth,
-      isResponsive: this.isResponsive,
-      isShown: this.isShown,
     })}`;
   }
 
-  public arrowClicked() {
-    this.isShown = !this.isShown;
-    this.firstClick = true;
-    console.log(this.isShown);
-    this.updateCss();
-  }
-
-  public arrowKey($event) {
-    if ($event.keyCode && $event.keyCode === 32) {
-      $event.preventDefault();
-      this.isShown = !this.isShown;
-      this.updateCss();
-    }
-  }
-
   public ngOnChanges(changes: SimpleChanges): void {
-    this.service.setTabIndexValue(this.tabIndexValue);
     this.currentBackgroundColor = this.utils.readProperty(
       "--sidenav-backgroundColor"
     );
@@ -105,41 +72,6 @@ export class DxcSidenavComponent implements OnInit {
       return result;
     }, {});
     this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs });
-    if (this.sidenav) {
-      this.updateCss();
-    }
-  }
-
-  updateState() {
-    this.innerWidth = window.innerWidth;
-    if (this.innerWidth <= responsiveSizes.tablet) {
-      this.isResponsive = true;
-      if (!this.displayArrow) {
-        this.displayArrow = true;
-      }
-    } else {
-      this.isResponsive = false;
-      if (!this.displayArrow && !this.isShown) {
-        this.isShown = true;
-      }
-    }
-    this.isShown =
-      this.isShown !== undefined
-        ? this.isShown
-        : this.innerWidth <= responsiveSizes.tablet
-        ? false
-        : true;
-  }
-
-  updateCss() {
-    this.updateState();
-    this.sidenavStyles = `${this.getDynamicStyle({
-      ...this.defaultInputs.getValue(),
-      mode: this.mode,
-      innerWidth: this.innerWidth,
-      isResponsive: this.isResponsive,
-      isShown: this.isShown,
-    })}`;
   }
 
   getDynamicStyle(inputs) {