Skip to content

Commit ed0a4d7

Browse files
JialeclJialecl
authored
Merge pull request #662 from dxc-technology/marcialfps-header-types
Types for Header component
2 parents d2c7849 + 4d724d7 commit ed0a4d7

File tree

5 files changed

+182
-39
lines changed

5 files changed

+182
-39
lines changed

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,26 @@
1313
<tr>
1414
<td>underlined: boolean</td>
1515
<td>
16-
<code>true</code>
16+
<code>false</code>
1717
</td>
1818
<td>Wether a contrast line should appear at the bottom of the header.</td>
1919
</tr>
2020
<tr>
2121
<td>logoSrc: string</td>
22+
<td></td>
23+
<td>The path of an icon to replace the theme logo.</td>
24+
</tr>
25+
<tr>
26+
<td>logoResponsiveSrc: string</td>
27+
<td></td>
2228
<td>
23-
<code>'default'</code>
29+
The path of an icon to replace the theme logo in responsive version.
2430
</td>
25-
<td>The path of an icon to replace the theme logo.</td>
2631
</tr>
2732
<tr>
2833
<td>onClick: EventEmitter</td>
2934
<td></td>
30-
<td>This function will be called when the user clicks the header logo.</td>
35+
<td>This event will emit in case the user clicks the header logo.</td>
3136
</tr>
3237
<tr>
3338
<td>children: node</td>
@@ -40,7 +45,10 @@
4045
<tr>
4146
<td>tabIndexValue: number</td>
4247
<td><code>0</code></td>
43-
<td>Value of the tabindex for all interactuable elements, except those inside the custom area.</td>
48+
<td>
49+
Value of the tabindex for all interactuable elements, except those inside
50+
the custom area.
51+
</td>
4452
</tr>
4553
<tr>
4654
<td>margin: string</td>

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

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,36 @@
11
<div>
22
<tbuilder-component-mode text="Default">
3-
<dxc-header margin="xsmall" underlined="true" style="position:relative;">
3+
<dxc-header margin="xsmall" underlined="true" style="position: relative">
44
<div id="responsive">
55
<dxc-button label="Custom Button"> </dxc-button>
66
<p>Header text</p>
77
</div>
8-
<div id="unresponsive" style="display: flex;
9-
align-items: center;">
8+
<div id="unresponsive" style="display: flex; align-items: center">
9+
<dxc-header-dropdown
10+
label="Default Dropdown"
11+
size="medium"
12+
caretHidden="false"
13+
margin="small"
14+
>
15+
<dxc-dropdown-option label="1" value="1"> </dxc-dropdown-option>
16+
<dxc-dropdown-option label="2"> </dxc-dropdown-option>
17+
<dxc-dropdown-option label="3"> </dxc-dropdown-option>
18+
<dxc-dropdown-option label="4" value="1"> </dxc-dropdown-option>
19+
<dxc-dropdown-option label="5"> </dxc-dropdown-option>
20+
<dxc-dropdown-option label="6"> </dxc-dropdown-option>
21+
<dxc-dropdown-option label="7" value="1"> </dxc-dropdown-option>
22+
<dxc-dropdown-option label="8"> </dxc-dropdown-option>
23+
<dxc-dropdown-option label="9"> </dxc-dropdown-option>
24+
<dxc-dropdown-option label="10" value="1"> </dxc-dropdown-option>
25+
<dxc-dropdown-option label="11"> </dxc-dropdown-option>
26+
<dxc-dropdown-option label="12"> </dxc-dropdown-option>
27+
</dxc-header-dropdown>
1028
<p>Header text</p>
11-
<dxc-button mode="primary" label="Custom Button" [margin]="buttonMargin"></dxc-button>
29+
<dxc-button
30+
mode="primary"
31+
label="Custom Button"
32+
[margin]="buttonMargin"
33+
></dxc-button>
1234
</div>
1335
</dxc-header>
1436
</tbuilder-component-mode>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,8 @@
66
[caretHidden]="caretHidden"
77
[margin]="margin"
88
[size]="size"
9-
></dxc-dropdown>
9+
[tabIndexValue]="tabIndexValue"
10+
[disabled]="disabled"
11+
>
12+
<ng-content></ng-content>
13+
</dxc-dropdown>

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

Lines changed: 74 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,90 @@ import {
55
EventEmitter,
66
HostBinding,
77
OnChanges,
8-
ChangeDetectionStrategy,
98
} from "@angular/core";
109
import { css } from "emotion";
1110

11+
type Space =
12+
| "xxsmall"
13+
| "xsmall"
14+
| "small"
15+
| "medium"
16+
| "large"
17+
| "xlarge"
18+
| "xxlarge";
19+
20+
type Margin = {
21+
top?: Space;
22+
bottom?: Space;
23+
left?: Space;
24+
right?: Space;
25+
};
26+
1227
@Component({
1328
selector: "dxc-header-dropdown",
1429
templateUrl: "./dxc-header-dropdown.component.html",
1530
styleUrls: [],
1631
})
1732
export class DxcHeaderDropdownComponent implements OnChanges {
33+
/**
34+
* In case options include icons, whether the icon should appear after or before the label.
35+
*/
36+
@Input() optionsIconPosition: "before" | "after" = "before";
37+
38+
/**
39+
* Whether the icon should appear after or before the label.
40+
*/
41+
@Input() iconPosition: "before" | "after" = "before";
42+
43+
/**
44+
* Text to be placed when the list of options is not displayed.
45+
*/
46+
@Input() label: string = "";
47+
48+
/**
49+
* Name attribute of the input element.
50+
*/
51+
@Input() name: string;
52+
53+
/**
54+
* Whether the arrow next to the label is displayed or not.
55+
*/
56+
@Input() caretHidden: boolean = false;
57+
58+
/**
59+
* Size of the margin to be applied to the component. You can pass an object with 'top',
60+
* 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
61+
*/
62+
@Input() margin: Space | Margin;
63+
64+
/**
65+
* Size of the component.
66+
*/
67+
@Input() size: "small" | "medium" | "large" | "fillParent" | "fitContent" =
68+
"fitContent";
69+
70+
/**
71+
* This event will emit in case the selection changes. The value of the selected
72+
* value will be passed as a parameter.
73+
*/
74+
@Output() onSelectOption: EventEmitter<string> = new EventEmitter<string>();
75+
76+
/**
77+
* Value of the tabindex.
78+
*/
79+
@Input() tabIndexValue: number = 0;
80+
81+
/**
82+
* If true, the options are showed when the dropdown is hover.
83+
*/
84+
@Input() expandOnHover: boolean = false;
85+
86+
/**
87+
* If true, the component will be disabled.
88+
*/
89+
@Input() disabled: boolean = false;
90+
1891
@HostBinding("class") triggerStyles;
19-
@Input() public options: { label?: string; value: any; iconSrc?: string }[];
20-
@Input() public name: string;
21-
@Input() public iconPosition: string = "before";
22-
@Input() public optionsIconPosition: string = "before";
23-
@Input() public margin: any;
24-
@Input() public size: any;
25-
@Input() expandOnHover: boolean;
26-
@Input() caretHidden: boolean;
27-
@Input() public iconSrc: string;
28-
@Input() public label: string = "";
29-
@Output() public onSelectOption: EventEmitter<any> = new EventEmitter<any>();
3092

3193
constructor() {}
3294

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

Lines changed: 64 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,38 +13,86 @@ import { css } from "emotion";
1313
import { BehaviorSubject } from "rxjs";
1414
import { CssUtils } from "../utils";
1515
import { spaces, responsiveSizes } from "../variables";
16-
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
16+
import {
17+
coerceBooleanProperty,
18+
coerceNumberProperty,
19+
} from "@angular/cdk/coercion";
1720
import { BackgroundProviderService } from "../background-provider/service/background-provider.service";
1821

22+
type Space =
23+
| "xxsmall"
24+
| "xsmall"
25+
| "small"
26+
| "medium"
27+
| "large"
28+
| "xlarge"
29+
| "xxlarge";
30+
31+
type Padding = {
32+
top?: Space;
33+
bottom?: Space;
34+
left?: Space;
35+
right?: Space;
36+
};
37+
1938
@Component({
2039
selector: "dxc-header",
2140
templateUrl: "./dxc-header.component.html",
2241
providers: [CssUtils, BackgroundProviderService],
2342
})
2443
export class DxcHeaderComponent implements OnChanges {
25-
@HostBinding("class") className;
26-
@Input() logoSrc: string;
27-
@Input() logoResponsiveSrc: string;
28-
@Input() margin: any;
29-
@Input() padding: any;
44+
/**
45+
* Wether a contrast line should appear at the bottom of the header.
46+
*/
3047
@Input()
3148
get underlined(): boolean {
3249
return this._underlined;
3350
}
3451
set underlined(value: boolean) {
3552
this._underlined = coerceBooleanProperty(value);
3653
}
37-
private _underlined;
54+
private _underlined = false;
55+
56+
/**
57+
* The path of an icon to replace the theme logo.
58+
*/
59+
@Input() logoSrc: string;
60+
61+
/**
62+
* The path of an icon to replace the theme logo in responsive version.
63+
*/
64+
@Input() logoResponsiveSrc: string;
65+
66+
/**
67+
* This event will emit in case the user clicks the header logo.
68+
*/
69+
@Output() onClick: EventEmitter<void> = new EventEmitter<void>();
70+
71+
/**
72+
* Value of the tabindex for all interactuable elements, except those inside the custom area.
73+
*/
3874
@Input()
3975
get tabIndexValue(): number {
4076
return this._tabIndexValue;
4177
}
4278
set tabIndexValue(value: number) {
4379
this._tabIndexValue = coerceNumberProperty(value);
4480
}
45-
private _tabIndexValue;
81+
private _tabIndexValue = 0;
82+
83+
/**
84+
* Size of the bottom margin to be applied to the footer.
85+
*/
86+
@Input() margin: Space;
4687

47-
@Output() onClick = new EventEmitter<any>();
88+
/**
89+
* Size of the padding to be applied to the custom area of the component.
90+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to
91+
* specify different padding sizes.
92+
*/
93+
@Input() padding: Space | Padding;
94+
95+
@HostBinding("class") className;
4896

4997
isResponsive = false;
5098
isMenuVisible = false;
@@ -56,16 +104,16 @@ export class DxcHeaderComponent implements OnChanges {
56104
currentBackgroundColor: string;
57105

58106
defaultInputs = new BehaviorSubject<any>({
107+
underlined: false,
59108
logoSrc: null,
60109
logoResponsiveSrc: null,
110+
tabIndexValue: 0,
61111
margin: null,
62112
padding: null,
63113
isResponsive: false,
64114
isMenuVisible: false,
65115
innerWidth,
66116
innerHeight,
67-
underlined:false,
68-
tabIndexValue: 0,
69117
});
70118

71119
@HostListener("window:resize", ["$event"])
@@ -167,7 +215,7 @@ export class DxcHeaderComponent implements OnChanges {
167215
`;
168216
}
169217

170-
getLogoDxc() {
218+
getLogoDxc() {
171219
const pic = document.body.getAttribute("header-logo");
172220
return pic;
173221
}
@@ -195,8 +243,9 @@ export class DxcHeaderComponent implements OnChanges {
195243
}
196244
&.underlined {
197245
.mat-toolbar-row {
198-
border-bottom: ${inputs.underlined ?
199-
`var(--header-underlinedThickness) var(--header-underlinedStyle) var(--header-underlinedColor);`: 'unset;'};
246+
border-bottom: ${inputs.underlined
247+
? `var(--header-underlinedThickness) var(--header-underlinedStyle) var(--header-underlinedColor);`
248+
: "unset;"};
200249
}
201250
}
202251
}
@@ -263,12 +312,11 @@ export class DxcHeaderComponent implements OnChanges {
263312
}
264313
}
265314
.overlay {
266-
267315
position: fixed;
268316
top: 0;
269317
left: 0;
270318
width: 100vw;
271-
height: ${inputs.innerHeight}px;
319+
height: ${inputs.innerHeight}px;
272320
background-color: var(--header-overlayColor);
273321
opacity: var(--header-overlayOpacity) !important;
274322
display: ${inputs.innerWidth <= responsiveSizes.mobileLarge
@@ -311,7 +359,6 @@ export class DxcHeaderComponent implements OnChanges {
311359
justify-content: space-between;
312360
width: 100%;
313361
.closeIcon {
314-
315362
cursor: pointer;
316363
display: flex;
317364
justify-content: flex-end;

0 commit comments

Comments
 (0)