Types for Header component

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

@@ -13,21 +13,26 @@
   <tr>
     <td>underlined: boolean</td>
     <td>
-      <code>true</code>
+      <code>false</code>
     </td>
     <td>Wether a contrast line should appear at the bottom of the header.</td>
   </tr>
   <tr>
     <td>logoSrc: string</td>
+    <td></td>
+    <td>The path of an icon to replace the theme logo.</td>
+  </tr>
+  <tr>
+    <td>logoResponsiveSrc: string</td>
+    <td></td>
     <td>
-      <code>'default'</code>
+      The path of an icon to replace the theme logo in responsive version.
     </td>
-    <td>The path of an icon to replace the theme logo.</td>
   </tr>
   <tr>
     <td>onClick: EventEmitter</td>
     <td></td>
-    <td>This function will be called when the user clicks the header logo.</td>
+    <td>This event will emit in case the user clicks the header logo.</td>
   </tr>
   <tr>
     <td>children: node</td>
@@ -40,7 +45,10 @@
   <tr>
     <td>tabIndexValue: number</td>
     <td><code>0</code></td>
-    <td>Value of the tabindex for all interactuable elements, except those inside the custom area.</td>
+    <td>
+      Value of the tabindex for all interactuable elements, except those inside
+      the custom area.
+    </td>
   </tr>
   <tr>
     <td>margin: string</td>

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/header-preview/header-preview.component.html

@@ -1,14 +1,36 @@
 <div>
   <tbuilder-component-mode text="Default">
-    <dxc-header margin="xsmall" underlined="true" style="position:relative;">
+    <dxc-header margin="xsmall" underlined="true" style="position: relative">
       <div id="responsive">
         <dxc-button label="Custom Button"> </dxc-button>
         <p>Header text</p>
       </div>
-      <div id="unresponsive" style="display: flex;
-      align-items: center;">
+      <div id="unresponsive" style="display: flex; align-items: center">
+        <dxc-header-dropdown
+          label="Default Dropdown"
+          size="medium"
+          caretHidden="false"
+          margin="small"
+        >
+          <dxc-dropdown-option label="1" value="1"> </dxc-dropdown-option>
+          <dxc-dropdown-option label="2"> </dxc-dropdown-option>
+          <dxc-dropdown-option label="3"> </dxc-dropdown-option>
+          <dxc-dropdown-option label="4" value="1"> </dxc-dropdown-option>
+          <dxc-dropdown-option label="5"> </dxc-dropdown-option>
+          <dxc-dropdown-option label="6"> </dxc-dropdown-option>
+          <dxc-dropdown-option label="7" value="1"> </dxc-dropdown-option>
+          <dxc-dropdown-option label="8"> </dxc-dropdown-option>
+          <dxc-dropdown-option label="9"> </dxc-dropdown-option>
+          <dxc-dropdown-option label="10" value="1"> </dxc-dropdown-option>
+          <dxc-dropdown-option label="11"> </dxc-dropdown-option>
+          <dxc-dropdown-option label="12"> </dxc-dropdown-option>
+        </dxc-header-dropdown>
         <p>Header text</p>
-        <dxc-button mode="primary" label="Custom Button" [margin]="buttonMargin"></dxc-button>
+        <dxc-button
+          mode="primary"
+          label="Custom Button"
+          [margin]="buttonMargin"
+        ></dxc-button>
       </div>
     </dxc-header>
   </tbuilder-component-mode>

projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header-dropdown/dxc-header-dropdown.component.html

@@ -6,4 +6,8 @@
   [caretHidden]="caretHidden"
   [margin]="margin"
   [size]="size"
-></dxc-dropdown>
+  [tabIndexValue]="tabIndexValue"
+  [disabled]="disabled"
+>
+  <ng-content></ng-content>
+</dxc-dropdown>

projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header-dropdown/dxc-header-dropdown.component.ts

@@ -5,28 +5,90 @@ import {
   EventEmitter,
   HostBinding,
   OnChanges,
-  ChangeDetectionStrategy,
 } from "@angular/core";
 import { css } from "emotion";
 
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
 @Component({
   selector: "dxc-header-dropdown",
   templateUrl: "./dxc-header-dropdown.component.html",
   styleUrls: [],
 })
 export class DxcHeaderDropdownComponent implements OnChanges {
+  /**
+   * In case options include icons, whether the icon should appear after or before the label.
+   */
+  @Input() optionsIconPosition: "before" | "after" = "before";
+
+  /**
+   * Whether the icon should appear after or before the label.
+   */
+  @Input() iconPosition: "before" | "after" = "before";
+
+  /**
+   * Text to be placed when the list of options is not displayed.
+   */
+  @Input() label: string = "";
+
+  /**
+   * Name attribute of the input element.
+   */
+  @Input() name: string;
+
+  /**
+   * Whether the arrow next to the label is displayed or not.
+   */
+  @Input() caretHidden: boolean = false;
+
+  /**
+   * Size of the margin to be applied to the component. You can pass an object with 'top',
+   * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+   */
+  @Input() margin: Space | Margin;
+
+  /**
+   * Size of the component.
+   */
+  @Input() size: "small" | "medium" | "large" | "fillParent" | "fitContent" =
+    "fitContent";
+
+  /**
+   * This event will emit in case the selection changes. The value of the selected
+   * value will be passed as a parameter.
+   */
+  @Output() onSelectOption: EventEmitter<string> = new EventEmitter<string>();
+
+  /**
+   * Value of the tabindex.
+   */
+  @Input() tabIndexValue: number = 0;
+
+  /**
+   * If true, the options are showed when the dropdown is hover.
+   */
+  @Input() expandOnHover: boolean = false;
+
+  /**
+   * If true, the component will be disabled.
+   */
+  @Input() disabled: boolean = false;
+
   @HostBinding("class") triggerStyles;
-  @Input() public options: { label?: string; value: any; iconSrc?: string }[];
-  @Input() public name: string;
-  @Input() public iconPosition: string = "before";
-  @Input() public optionsIconPosition: string = "before";
-  @Input() public margin: any;
-  @Input() public size: any;
-  @Input() expandOnHover: boolean;
-  @Input() caretHidden: boolean;
-  @Input() public iconSrc: string;
-  @Input() public label: string = "";
-  @Output() public onSelectOption: EventEmitter<any> = new EventEmitter<any>();
 
   constructor() {}
 

projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header.component.ts

@@ -13,38 +13,86 @@ import { css } from "emotion";
 import { BehaviorSubject } from "rxjs";
 import { CssUtils } from "../utils";
 import { spaces, responsiveSizes } from "../variables";
-import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import {
+  coerceBooleanProperty,
+  coerceNumberProperty,
+} from "@angular/cdk/coercion";
 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-header",
   templateUrl: "./dxc-header.component.html",
   providers: [CssUtils, BackgroundProviderService],
 })
 export class DxcHeaderComponent implements OnChanges {
-  @HostBinding("class") className;
-  @Input() logoSrc: string;
-  @Input() logoResponsiveSrc: string;
-  @Input() margin: any;
-  @Input() padding: any;
+  /**
+   * Wether a contrast line should appear at the bottom of the header.
+   */
   @Input()
   get underlined(): boolean {
     return this._underlined;
   }
   set underlined(value: boolean) {
     this._underlined = coerceBooleanProperty(value);
   }
-  private _underlined;
+  private _underlined = false;
+
+  /**
+   * The path of an icon to replace the theme logo.
+   */
+  @Input() logoSrc: string;
+
+  /**
+   * The path of an icon to replace the theme logo in responsive version.
+   */
+  @Input() logoResponsiveSrc: string;
+
+  /**
+   * This event will emit in case the user clicks the header logo.
+   */
+  @Output() onClick: EventEmitter<void> = new EventEmitter<void>();
+
+  /**
+   * Value of the tabindex for all interactuable elements, except those inside the custom area.
+   */
   @Input()
   get tabIndexValue(): number {
     return this._tabIndexValue;
   }
   set tabIndexValue(value: number) {
     this._tabIndexValue = coerceNumberProperty(value);
   }
-  private _tabIndexValue;
+  private _tabIndexValue = 0;
+
+  /**
+   * Size of the bottom margin to be applied to the footer.
+   */
+  @Input() margin: Space;
 
-  @Output() onClick = new EventEmitter<any>();
+  /**
+   * Size of the padding to be applied to the custom area of the component.
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to
+   * specify different padding sizes.
+   */
+  @Input() padding: Space | Padding;
+
+  @HostBinding("class") className;
 
   isResponsive = false;
   isMenuVisible = false;
@@ -56,16 +104,16 @@ export class DxcHeaderComponent implements OnChanges {
   currentBackgroundColor: string;
 
   defaultInputs = new BehaviorSubject<any>({
+    underlined: false,
     logoSrc: null,
     logoResponsiveSrc: null,
+    tabIndexValue: 0,
     margin: null,
     padding: null,
     isResponsive: false,
     isMenuVisible: false,
     innerWidth,
     innerHeight,
-    underlined:false,
-    tabIndexValue: 0,
   });
 
   @HostListener("window:resize", ["$event"])
@@ -167,7 +215,7 @@ export class DxcHeaderComponent implements OnChanges {
     `;
   }
 
-   getLogoDxc() {
+  getLogoDxc() {
     const pic = document.body.getAttribute("header-logo");
     return pic;
   }
@@ -195,8 +243,9 @@ export class DxcHeaderComponent implements OnChanges {
         }
         &.underlined {
           .mat-toolbar-row {
-            border-bottom: ${inputs.underlined ?
-              `var(--header-underlinedThickness) var(--header-underlinedStyle) var(--header-underlinedColor);`: 'unset;'};
+            border-bottom: ${inputs.underlined
+              ? `var(--header-underlinedThickness) var(--header-underlinedStyle) var(--header-underlinedColor);`
+              : "unset;"};
           }
         }
       }
@@ -263,12 +312,11 @@ export class DxcHeaderComponent implements OnChanges {
         }
       }
       .overlay {
-
         position: fixed;
         top: 0;
         left: 0;
         width: 100vw;
-        height:  ${inputs.innerHeight}px;
+        height: ${inputs.innerHeight}px;
         background-color: var(--header-overlayColor);
         opacity: var(--header-overlayOpacity) !important;
         display: ${inputs.innerWidth <= responsiveSizes.mobileLarge
@@ -311,7 +359,6 @@ export class DxcHeaderComponent implements OnChanges {
         justify-content: space-between;
         width: 100%;
         .closeIcon {
-
           cursor: pointer;
           display: flex;
           justify-content: flex-end;