From 061f49216e2a52b1dffb304de67f6285738a14e3 Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Thu, 31 Mar 2022 14:01:39 +0200 Subject: [PATCH 1/3] [Major] Renamed tokens file input --- .../theme-builder/themes/AdvancedTheme.json | 7 +++-- .../themes/schemas/Advanced.schema.json | 5 ++-- .../dxc-file-input.component.html | 2 +- .../dxc-file/dxc-file.component.html | 25 +++++++++------- .../dxc-file/dxc-file.component.ts | 29 ++++++++++++++----- .../src/lib/theme/componentTokens.ts | 9 +++--- 6 files changed, 49 insertions(+), 28 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json index 3170205e9..79fe47249 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json @@ -356,10 +356,11 @@ "focusDropBorderColor": "#0095ff", "disabledDropBorderColor": "#999999", "dragoverDropBackgroundColor": "#f5fbff", - "hoverFileItemIconBackgroundColor": "#f2f2f2", - "activeFileItemIconBackgroundColor": "#cccccc", + "hoverDeleteFileItemBackgroundColor": "#0000000d", + "activeDeleteFileItemBackgroundColor": "#00000033", + "focusDeleteFileItemBackgroundColor": "#0095ff", "errorFileItemBorderColor": "#d0011b", - "errorFileItemBackgroundColor": "#ffccd3", + "errorFileItemBackgroundColor": "#FFF5F6", "errorMessageFontColor": "#d0011b", "labelFontFamily": "Open Sans, sans-serif", "labelFontSize": "0.875rem", diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json index 0c0bcf674..03da25041 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json @@ -356,8 +356,9 @@ "focusDropBorderColor": "color", "disabledDropBorderColor": "color", "dragoverDropBackgroundColor": "color", - "hoverFileItemIconBackgroundColor": "color", - "activeFileItemIconBackgroundColor": "color", + "hoverDeleteFileItemBackgroundColor": "color", + "activeDeleteFileItemBackgroundColor": "color", + "focusDeleteFileItemBackgroundColor": "color", "errorFileItemBorderColor": "color", "errorFileItemBackgroundColor": "color", "errorMessageFontColor": "color", diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html index fcc5db2cd..f3de69a9b 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html +++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html @@ -42,10 +42,10 @@ [showPreview]="showPreview" [multiple]="!hasSingleFile" [mode]="mode" + [tabIndexValue]="tabIndexValue" [updatable]="callbackFile?.observers?.length > 0" > - diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.html index 6552b7578..6dd2e0067 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.html +++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.html @@ -1,4 +1,8 @@ -
+
- - + > +
@@ -29,7 +32,13 @@ > - +
- {{ file.error }} + {{ file.error }}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts index ed3e06776..7a88eb38d 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts @@ -1,4 +1,7 @@ -import { coerceBooleanProperty } from "@angular/cdk/coercion"; +import { + coerceBooleanProperty, + coerceNumberProperty, +} from "@angular/cdk/coercion"; import { C } from "@angular/cdk/keycodes"; import { Component, @@ -31,6 +34,14 @@ export class DxcFileComponent implements OnInit { this._showPreview = coerceBooleanProperty(value); } private _showPreview = false; + @Input() + get tabIndexValue(): number { + return this._tabIndexValue; + } + set tabIndexValue(value: number) { + this._tabIndexValue = coerceNumberProperty(value); + } + private _tabIndexValue = 0; hasError: boolean = false; hasShowError: boolean = false; @@ -70,9 +81,9 @@ export class DxcFileComponent implements OnInit { } onRemoveHandler(event: any): void { - if(this.updatable){ + if (this.updatable) { this.service.removeFile(this.file); - } + } } private isShowPreview() { @@ -114,11 +125,11 @@ export class DxcFileComponent implements OnInit { return "image"; } return "file"; - }; + } getRemoveAriaLabel() { return "Remove " + this.file.data.name; - }; + } getDynamicStyle(inputs) { return css` @@ -215,14 +226,18 @@ export class DxcFileComponent implements OnInit { } &:hover { background-color: var( - --fileInput-hoverFileItemIconBackgroundColor + --fileInput-hoverDeleteFileItemBackgroundColor ); } &:active { background-color: var( - --fileInput-activeFileItemIconBackgroundColor + --fileInput-activeDeleteFileItemBackgroundColor ); } + &:focus { + outline: var(--fileInput-focusDeleteFileItemBackgroundColor) + auto 1px; + } } .errorIcon { margin-right: 4px; diff --git a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts index 9df1b516c..e1f47ea97 100644 --- a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts +++ b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts @@ -510,12 +510,12 @@ export const componentTokens = { "--fileInput-focusDropBorderColor": globalTokens.hal_blue_l_50, "--fileInput-disabledDropBorderColor": globalTokens.hal_grey_l_60, "--fileInput-dragoverDropBackgroundColor": "#f5fbff", - "--fileInput-hoverFileItemIconBackgroundColor": globalTokens.hal_grey_l_95, - "--fileInput-activeFileItemIconBackgroundColor": globalTokens.hal_grey_l_80, + "--fileInput-hoverDeleteFileItemBackgroundColor": "#0000000d", + "--fileInput-activeDeleteFileItemBackgroundColor": "#00000033", + "--fileInput-focusDeleteFileItemBackgroundColor": globalTokens.hal_blue_l_50, "--fileInput-errorFileItemBorderColor": globalTokens.hal_red_s_41, - "--fileInput-errorFileItemBackgroundColor": "#ffccd3", + "--fileInput-errorFileItemBackgroundColor": "#FFF5F6", "--fileInput-errorMessageFontColor": globalTokens.hal_red_s_41, - //falta token para error icon "--fileInput-labelFontFamily": globalTokens.type_sans, "--fileInput-labelFontSize": globalTokens.type_scale_02, "--fileInput-labelFontWeight": globalTokens.type_semibold, @@ -1000,7 +1000,6 @@ export const componentTokens = { // "--radioGroup-radioInputHeight": "18px", // "--radioGroup-focusOutlineHeight": "24px", - //V3 SELECT "--v3Select-fontFamily": "Open Sans, sans-serif", "--v3Select-labelFontSize": globalTokens.type_scale_03, From cf536ac72dd57ff1ebf9794513fd2e146792723f Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Mon, 11 Apr 2022 16:53:12 +0200 Subject: [PATCH 2/3] Fixed tokens --- .../app/pages/theme-builder/themes/AdvancedTheme.json | 6 +++++- .../theme-builder/themes/schemas/Advanced.schema.json | 6 +++++- .../lib/dxc-file-input/dxc-file/dxc-file.component.ts | 9 +++++++-- projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts | 7 +++++-- 4 files changed, 22 insertions(+), 6 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json index 937841650..9fe507cdd 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json @@ -345,10 +345,14 @@ "fileInput": { "dropBorderColor": "#000000", "fileItemBorderColor": "#cccccc", - "fileItemIconColor": "#000000", + "deleteFileItemColor": "#000000", "fileNameFontColor": "#000000", "labelFontColor": "#000000", "helperTextFontColor": "#000000", + "filePreviewBackgroundColor": "#f2f2f2", + "filePreviewIconColor": "#000000", + "errorFilePreviewBackgroundColor": "#ffccd3", + "errorFilePreviewIconColor": "#d0011b", "dropLabelFontColor": "#000000", "disabledLabelFontColor": "#999999", "disabledHelperTextFontColor": "#999999", diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json index fb812ce2c..0cdc205ab 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json @@ -345,10 +345,14 @@ "fileInput": { "dropBorderColor": "color", "fileItemBorderColor": "color", - "fileItemIconColor": "color", + "deleteFileItemColor": "color", "fileNameFontColor": "color", "labelFontColor": "color", "helperTextFontColor": "color", + "filePreviewBackgroundColor": "color", + "filePreviewIconColor": "color", + "errorFilePreviewBackgroundColor": "color", + "errorFilePreviewIconColor": "color", "dropLabelFontColor": "color", "disabledLabelFontColor": "color", "disabledHelperTextFontColor": "color", diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts index 7a88eb38d..b86573458 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts @@ -160,7 +160,9 @@ export class DxcFileComponent implements OnInit { margin-top: ${inputs.multiple || inputs.mode !== "file" ? "4px" : ""}; margin-left: ${!inputs.multiple && inputs.mode === "file" ? "4px" : ""}; .previewContainer { - background-color: ${this.hasError ? "#ffc9ce" : "#e6e6e6"}; + background-color: ${this.hasError + ? "var(--fileInput-errorFilePreviewBackgroundColor)" + : "var(--fileInput-filePreviewBackgroundColor)"}; display: flex; align-items: center; place-content: center; @@ -170,7 +172,9 @@ export class DxcFileComponent implements OnInit { width: 48px; svg, img { - fill: ${this.hasError ? "#d0011b" : "#808080"}; + fill: ${this.hasError + ? "var(--fileInput-errorFilePreviewIconColor)" + : "var(--fileInput-filePreviewIconColor)"}; height: 24px; width: 24px; } @@ -218,6 +222,7 @@ export class DxcFileComponent implements OnInit { svg { height: 16px; width: 16px; + fill: var(--fileInput-deleteFileItemColor); } &:hover, &:active { diff --git a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts index 8e1fb9b2b..c8b68e102 100644 --- a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts +++ b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts @@ -498,12 +498,15 @@ export const componentTokens = { //FILE INPUT "--fileInput-dropBorderColor": globalTokens.hal_black, "--fileInput-fileItemBorderColor": globalTokens.hal_grey_l_80, - "--fileInput-fileItemIconColor": globalTokens.hal_black, //añadir + "--fileInput-deleteFileItemColor": globalTokens.hal_black, "--fileInput-fileNameFontColor": globalTokens.hal_black, "--fileInput-labelFontColor": globalTokens.hal_black, "--fileInput-helperTextFontColor": globalTokens.hal_black, "--fileInput-dropLabelFontColor": globalTokens.hal_black, - + "--fileInput-filePreviewBackgroundColor": globalTokens.hal_grey_l_95, + "--fileInput-filePreviewIconColor": globalTokens.hal_black, + "--fileInput-errorFilePreviewBackgroundColor": "#ffccd3", + "--fileInput-errorFilePreviewIconColor": globalTokens.hal_red_s_41, "--fileInput-disabledLabelFontColor": globalTokens.hal_grey_l_60, "--fileInput-disabledHelperTextFontColor": globalTokens.hal_grey_l_60, "--fileInput-disabledDropLabelFontColor": globalTokens.hal_grey_l_60, From b172e6bae2d4c9b64a530f35c9afaffab3045c1d Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Tue, 12 Apr 2022 09:43:50 +0200 Subject: [PATCH 3/3] Renamed token --- .../src/app/pages/theme-builder/themes/AdvancedTheme.json | 2 +- .../app/pages/theme-builder/themes/schemas/Advanced.schema.json | 2 +- .../src/lib/dxc-file-input/dxc-file/dxc-file.component.ts | 2 +- projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json index 9fe507cdd..c176e2175 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json @@ -345,7 +345,7 @@ "fileInput": { "dropBorderColor": "#000000", "fileItemBorderColor": "#cccccc", - "deleteFileItemColor": "#000000", + "deleteFileItemIconColor": "#000000", "fileNameFontColor": "#000000", "labelFontColor": "#000000", "helperTextFontColor": "#000000", diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json index 0cdc205ab..7fc1e6154 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json @@ -345,7 +345,7 @@ "fileInput": { "dropBorderColor": "color", "fileItemBorderColor": "color", - "deleteFileItemColor": "color", + "deleteFileItemIconColor": "color", "fileNameFontColor": "color", "labelFontColor": "color", "helperTextFontColor": "color", diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts index b86573458..6de9bfcdd 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file/dxc-file.component.ts @@ -222,7 +222,7 @@ export class DxcFileComponent implements OnInit { svg { height: 16px; width: 16px; - fill: var(--fileInput-deleteFileItemColor); + fill: var(--fileInput-deleteFileItemIconColor); } &:hover, &:active { diff --git a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts index c8b68e102..743e5cebd 100644 --- a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts +++ b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts @@ -498,7 +498,7 @@ export const componentTokens = { //FILE INPUT "--fileInput-dropBorderColor": globalTokens.hal_black, "--fileInput-fileItemBorderColor": globalTokens.hal_grey_l_80, - "--fileInput-deleteFileItemColor": globalTokens.hal_black, + "--fileInput-deleteFileItemIconColor": globalTokens.hal_black, "--fileInput-fileNameFontColor": globalTokens.hal_black, "--fileInput-labelFontColor": globalTokens.hal_black, "--fileInput-helperTextFontColor": globalTokens.hal_black,