Merge pull request #623 from dxc-technology/marcialfps-dropdown-types

Types for Dropdown component

Author: Jialecl

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

@@ -28,7 +28,7 @@
     </tr>
 
     <tr>
-        <td>value: any</td>
+        <td>value: string</td>
         <td></td>
         <td>Value of the option.</td>
     </tr>

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

@@ -18,14 +18,6 @@
       before the label.
     </td>
   </tr>
-  <tr>
-    <td>iconSrc: string</td>
-    <td></td>
-    <td>
-      <b>Deprecated.</b> URL of the icon that will be placed next to the
-      dropdown label.
-    </td>
-  </tr>
   <tr>
     <td>iconPosition: 'before' | 'after'</td>
     <td><code>'before'</code></td>
@@ -57,15 +49,18 @@
     </td>
   </tr>
   <tr>
-    <td>size: any (string | object)</td>
+    <td>size: string</td>
     <td><code>'fitContent' </code></td>
-    <td>Size of the component ('large' | 'fillParent' | 'fitContent').</td>
+    <td>
+      Size of the component ('small' | 'medium' | 'large' | 'fillParent' |
+      'fitContent').
+    </td>
   </tr>
   <tr>
     <td>onSelectOption: EventEmitter</td>
     <td></td>
     <td>
-      This event will be triggered when the selection changes. The value of the
+      This event will emit in case the selection changes. The value of the
       selected value will be passed as a parameter.
     </td>
   </tr>
@@ -74,4 +69,14 @@
     <td><code>0</code></td>
     <td>Value of the tabindex.</td>
   </tr>
+  <tr>
+    <td>disabled: boolean</td>
+    <td><code>false</code></td>
+    <td>If true, the component will be disabled.</td>
+  </tr>
+  <tr>
+    <td>expandOnHover: boolean</td>
+    <td><code>false</code></td>
+    <td>If true, the options are showed when the dropdown is hover.</td>
+  </tr>
 </dxc-table>

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

@@ -14,8 +14,14 @@ import { DropdownService } from "../services/dropdown.service";
   templateUrl: "./dxc-dropdown-option.component.html",
 })
 export class DxcDropdownOptionComponent implements OnChanges {
-  @Input() public value;
-  @Input() public label: string;
+  /**
+   * Value of the option.
+   */
+  @Input() value: string;
+  /**
+   * Label displayed in the option.
+   */
+  @Input() label: string;
 
   @ViewChild(MatMenuItem) menuItem: MatMenuItem;
 

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

@@ -23,7 +23,6 @@
       <div class="dxc-arrow arrow-{{ arrowClass }}"></div>
     </div>
   </div>
-
 </button>
 
 <mat-menu

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

@@ -21,6 +21,22 @@ import {
 } from "@angular/cdk/coercion";
 import { DropdownService } from "./services/dropdown.service";
 
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
 @Component({
   selector: "dxc-dropdown",
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -29,48 +45,94 @@ import { DropdownService } from "./services/dropdown.service";
   providers: [CssUtils, DropdownService],
 })
 export class DxcDropdownComponent implements OnChanges {
-  @HostBinding("class") className;
+  /**
+   * In case options include icons, whether the icon should appear after or before the label.
+   */
+  @Input() optionsIconPosition: "before" | "after" = "before";
 
-  @Input() public name: string;
-  @Input() public iconPosition: string = "before";
-  @Input() public optionsIconPosition: string = "before";
-  @Input() public margin: any;
-  @Input() public size: any;
-  @Input()
-  get expandOnHover(): boolean {
-    return this._expandOnHover;
-  }
-  set expandOnHover(value: boolean) {
-    this._expandOnHover = coerceBooleanProperty(value);
-  }
-  private _expandOnHover;
+  /**
+   * 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()
   get caretHidden(): boolean {
     return this._caretHidden;
   }
   set caretHidden(value: boolean) {
     this._caretHidden = coerceBooleanProperty(value);
   }
-  private _caretHidden;
+  private _caretHidden = 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() public onSelectOption: EventEmitter<string> =
+    new EventEmitter<string>();
+
+  /**
+   * Value of the tabindex.
+   */
   @Input()
   get tabIndexValue(): number {
     return this._tabIndexValue;
   }
   set tabIndexValue(value: number) {
     this._tabIndexValue = coerceNumberProperty(value);
   }
-  private _tabIndexValue;
+  private _tabIndexValue = 0;
+
+  /**
+   * If true, the options are showed when the dropdown is hover.
+   */
+  @Input()
+  get expandOnHover(): boolean {
+    return this._expandOnHover;
+  }
+  set expandOnHover(value: boolean) {
+    this._expandOnHover = coerceBooleanProperty(value);
+  }
+  private _expandOnHover = false;
+
+  /**
+   * If true, the component will be disabled.
+   */
   @Input()
   get disabled(): boolean {
     return this._disabled;
   }
   set disabled(value: boolean) {
     this._disabled = coerceBooleanProperty(value);
   }
-  private _disabled;
+  private _disabled = false;
 
-  @Input() public label: string = "";
-  @Output() public onSelectOption: EventEmitter<any> = new EventEmitter<any>();
+  @HostBinding("class") className;
 
   @ViewChild("dropdownButton", { static: true }) dropdownButton;
   @ViewChild(MatMenuTrigger, { static: false }) menuTrigger: MatMenuTrigger;
@@ -88,17 +150,17 @@ export class DxcDropdownComponent implements OnChanges {
   triggerStyles: string;
 
   defaultInputs = new BehaviorSubject<any>({
-    disableRipple: false,
-    name: null,
-    iconPosition: "before",
     optionsIconPosition: "before",
-    mode: "basic",
-    caretHidden: false,
+    iconSrc: null,
+    iconPosition: "before",
     label: null,
+    name: null,
+    caretHidden: false,
     margin: null,
     size: "fitContent",
-    expandOnHover: false,
     tabIndexValue: 0,
+    disabled: false,
+    expandOnHover: false,
   });
 
   public arrowClass: string = "down";