From 3be3155e7f53446fb86cbab1a0f298df2fa77f3f Mon Sep 17 00:00:00 2001 From: marcialfps Date: Tue, 1 Feb 2022 17:04:46 +0100 Subject: [PATCH 1/3] [Minor] Types for Header component --- .../dxc-header-dropdown.component.html | 6 +- .../dxc-header-dropdown.component.ts | 86 ++++++++++++++++--- .../lib/dxc-header/dxc-header.component.ts | 81 +++++++++++++---- 3 files changed, 143 insertions(+), 30 deletions(-) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header-dropdown/dxc-header-dropdown.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header-dropdown/dxc-header-dropdown.component.html index 6459de5ca..466378c7b 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header-dropdown/dxc-header-dropdown.component.html +++ b/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" -> + [tabIndexValue]="tabIndexValue" + [disabled]="disabled" +> + + diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header-dropdown/dxc-header-dropdown.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header-dropdown/dxc-header-dropdown.component.ts index 46953487e..6993dc35c 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header-dropdown/dxc-header-dropdown.component.ts +++ b/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 = new EventEmitter(); + + /** + * 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 = new EventEmitter(); constructor() {} diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header.component.ts index e0d9a19e4..9fd90181e 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header.component.ts @@ -13,20 +13,37 @@ 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; @@ -34,7 +51,26 @@ export class DxcHeaderComponent implements OnChanges { 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 = new EventEmitter(); + + /** + * Value of the tabindex for all interactuable elements, except those inside the custom area. + */ @Input() get tabIndexValue(): number { return this._tabIndexValue; @@ -42,9 +78,21 @@ export class DxcHeaderComponent implements OnChanges { 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(); + /** + * 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({ + 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; From e281659f5bef992c441e7fbd4d1985f0467c5767 Mon Sep 17 00:00:00 2001 From: marcialfps Date: Tue, 1 Feb 2022 17:05:55 +0100 Subject: [PATCH 2/3] Documentation fixes --- .../header-table-properties.component.html | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/header/properties/header-table-properties/header-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/header/properties/header-table-properties/header-table-properties.component.html index d5ad96b0e..2513b0f71 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/header/properties/header-table-properties/header-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/header/properties/header-table-properties/header-table-properties.component.html @@ -13,21 +13,26 @@ underlined: boolean - true + false Wether a contrast line should appear at the bottom of the header. logoSrc: string + + The path of an icon to replace the theme logo. + + + logoResponsiveSrc: string + - 'default' + The path of an icon to replace the theme logo in responsive version. - The path of an icon to replace the theme logo. onClick: EventEmitter - This function will be called when the user clicks the header logo. + This event will emit in case the user clicks the header logo. children: node @@ -40,7 +45,10 @@ tabIndexValue: number 0 - Value of the tabindex for all interactuable elements, except those inside the custom area. + + Value of the tabindex for all interactuable elements, except those inside + the custom area. + margin: string From 4d724d71444a6089b675e9495c83ddbcf36bb6a5 Mon Sep 17 00:00:00 2001 From: marcialfps Date: Tue, 1 Feb 2022 17:06:52 +0100 Subject: [PATCH 3/3] Theme builder preview update --- .../header-preview.component.html | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/header-preview/header-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/header-preview/header-preview.component.html index 34363f542..0f47638a2 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/header-preview/header-preview.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/header-preview/header-preview.component.html @@ -1,14 +1,36 @@
- +

Header text

-
+
+ + + + + + + + + + + + + +

Header text

- +