diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/dropdown/dropdown-api/dropdown-api.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/dropdown/dropdown-api/dropdown-api.component.html index 834341e50..7212094fe 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/dropdown/dropdown-api/dropdown-api.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/dropdown/dropdown-api/dropdown-api.component.html @@ -28,7 +28,7 @@ - value: any + value: string Value of the option. diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/dropdown/properties/dropdown-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/dropdown/properties/dropdown-table-properties.component.html index 88d3b229e..798b3da5c 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/dropdown/properties/dropdown-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/dropdown/properties/dropdown-table-properties.component.html @@ -18,14 +18,6 @@ before the label. - - iconSrc: string - - - Deprecated. URL of the icon that will be placed next to the - dropdown label. - - iconPosition: 'before' | 'after' 'before' @@ -57,15 +49,18 @@ - size: any (string | object) + size: string 'fitContent' - Size of the component ('large' | 'fillParent' | 'fitContent'). + + Size of the component ('small' | 'medium' | 'large' | 'fillParent' | + 'fitContent'). + onSelectOption: EventEmitter - 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. @@ -74,4 +69,14 @@ 0 Value of the tabindex. + + disabled: boolean + false + If true, the component will be disabled. + + + expandOnHover: boolean + false + If true, the options are showed when the dropdown is hover. + diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.ts index 672650274..d89aa04d4 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.ts +++ b/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; diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.html index 7a909c19e..cb072ac6e 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.html +++ b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.html @@ -23,7 +23,6 @@
- = + new EventEmitter(); + + /** + * Value of the tabindex. + */ @Input() get tabIndexValue(): number { return this._tabIndexValue; @@ -59,7 +106,23 @@ export class DxcDropdownComponent implements OnChanges { 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; @@ -67,10 +130,9 @@ export class DxcDropdownComponent implements OnChanges { set disabled(value: boolean) { this._disabled = coerceBooleanProperty(value); } - private _disabled; + private _disabled = false; - @Input() public label: string = ""; - @Output() public onSelectOption: EventEmitter = new EventEmitter(); + @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({ - 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";