From 4bd1fea34493b16740314a3dff4bfd1f732124d0 Mon Sep 17 00:00:00 2001 From: Manuel Angel Garcia Caballero Date: Mon, 21 Feb 2022 16:47:39 +0100 Subject: [PATCH] [Patch] #704 Fixing reset selected option value in dxc select component --- .vscode/settings.json | 37 +++--- .../select-preview.component.html | 118 +++++------------- .../select-preview.component.ts | 33 +++-- .../dxc-select-option-selected.component.ts | 32 +++-- .../lib/dxc-select/dxc-select.component.ts | 7 +- .../lib/dxc-select/services/select.service.ts | 13 +- .../dxc-textarea/dxc-textarea.component.ts | 2 +- 7 files changed, 99 insertions(+), 143 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 3f7bfb87c..f47a813ed 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,22 +1,23 @@ { "workbench.colorCustomizations": { - "activityBar.activeBackground": "#073caf", - "activityBar.activeBorder": "#e9eff5", - "activityBar.background": "#ec5fa6", - "activityBar.foreground": "#15202b", - "activityBar.inactiveForeground": "#15202b99", - "activityBarBadge.background": "#e9eff5", - "activityBarBadge.foreground": "#15202b", - "statusBar.background": "#ec5fa6", - "statusBar.foreground": "#15202b", - "statusBarItem.hoverBackground": "#597a38", - "titleBar.activeBackground": "#739d48", - "titleBar.activeForeground": "#15202b", - "titleBar.inactiveBackground": "#739d4899", - "titleBar.inactiveForeground": "#15202b99", - "sash.hoverBorder": "#8cb761", - "statusBarItem.remoteBackground": "#739d48", - "statusBarItem.remoteForeground": "#15202b" + "activityBar.activeBackground": "#fa1b49", + "activityBar.activeBorder": "#155e02", + "activityBar.background": "#fa1b49", + "activityBar.foreground": "#e7e7e7", + "activityBar.inactiveForeground": "#e7e7e799", + "activityBarBadge.background": "#155e02", + "activityBarBadge.foreground": "#e7e7e7", + "statusBar.background": "#dd0531", + "statusBar.foreground": "#e7e7e7", + "statusBarItem.hoverBackground": "#fa1b49", + "titleBar.activeBackground": "#dd0531", + "titleBar.activeForeground": "#e7e7e7", + "titleBar.inactiveBackground": "#dd053199", + "titleBar.inactiveForeground": "#e7e7e799", + "sash.hoverBorder": "#fa1b49", + "statusBarItem.remoteBackground": "#dd0531", + "statusBarItem.remoteForeground": "#e7e7e7" }, - "peacock.color": "#739d48" + "peacock.color": "#dd0531", + "angular.enable-strict-mode-prompt": false } diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html index 9586f0c1a..c3e67274f 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.html @@ -2,119 +2,61 @@ - + - + - + - + - + - + - + - + - + - + - - + + + + + + + + + + diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts index 06fcb1828..2ab37c472 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts @@ -1,12 +1,13 @@ -import { Component, OnInit } from '@angular/core'; -import { Option } from '@dxc-technology/halstack-angular/lib/dxc-select/interfaces/option.interface'; -import { OptionGroup } from '@dxc-technology/halstack-angular/lib/dxc-select/interfaces/optionGroup.interface'; +import { Component, OnInit } from "@angular/core"; +import { Option } from "@dxc-technology/halstack-angular/lib/dxc-select/interfaces/option.interface"; +import { OptionGroup } from "@dxc-technology/halstack-angular/lib/dxc-select/interfaces/optionGroup.interface"; @Component({ - selector: 'app-select', - templateUrl: './select-preview.component.html' + selector: "app-select", + templateUrl: "./select-preview.component.html", }) export class SelectPreviewComponent implements OnInit { + selectedValues: string = ""; array1: Option[] = [ { @@ -62,21 +63,33 @@ export class SelectPreviewComponent implements OnInit { }, ]; - arrayValue = ['1','2']; + arrayValue = ["1", "2"]; value = "1"; - constructor() { } + constructor() {} - ngOnInit(): void { + ngOnInit(): void {} + + onChange(event) { + console.log("onchange:", event); + } + + onBlur(event) { + console.log("onBlur:", event); } - onChange(event){ + onChangeTest(event) { + this.selectedValues = event.value; console.log("onchange:", event); } - onBlur(event){ + onBlurTest(event) { console.log("onBlur:", event); } + onResetTest(event) { + console.log(event); + this.selectedValues = ""; + } } diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select-option-selected/dxc-select-option-selected.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select-option-selected/dxc-select-option-selected.component.ts index 0a1380ee3..0f801fd3b 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select-option-selected/dxc-select-option-selected.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select-option-selected/dxc-select-option-selected.component.ts @@ -38,6 +38,8 @@ export class DxcSelectOptionSelectedComponent implements OnInit { } else { this.selectedOptions[0] = newOptions; } + } else { + this.selectedOptions = []; } }); } @@ -91,27 +93,25 @@ export class DxcSelectOptionSelectedComponent implements OnInit { font-size: var(--select-valueFontSize); font-style: var(--select-valueFontStyle); font-weight: var(--select-valueFontWeight); - color: ${ - inputs.disabled - ? "var(--select-disabledColor)" - : "var(--select-valueFontColor)" - }; - .iconLabel{ + color: ${inputs.disabled + ? "var(--select-disabledColor)" + : "var(--select-valueFontColor)"}; + .iconLabel { width: 24px; height: 24px; display: inline-flex; align-items: center; } - .comma{ + .comma { margin-right: 4px; } - .iconLabel{ + .iconLabel { margin-right: 0.25rem; } - .isOptionalLabel{ - color: ${ - inputs.disabled ? "var(--select-disabledColor)" : "#000000b3" - }; + .isOptionalLabel { + color: ${inputs.disabled + ? "var(--select-disabledColor)" + : "#000000b3"}; } } .notSelectedLabel { @@ -120,11 +120,9 @@ export class DxcSelectOptionSelectedComponent implements OnInit { font-size: var(--select-placeholderFontSize); font-style: var(--select-placeholderFontStyle); font-weight: var(--select-placeholderFontWeight); - color: ${ - inputs.disabled - ? "var(--select-disabledColor)" - : "var(--select-placeholderFontColor)" - }; + color: ${inputs.disabled + ? "var(--select-disabledColor)" + : "var(--select-placeholderFontColor)"}; } } `; diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts index 7eddbca56..60a964b08 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select.component.ts @@ -254,8 +254,9 @@ export class DxcSelectComponent implements OnInit, ControlValueAccessor { } } else { if (this.optionGroupRef) { - const optionGroupElement = - this.optionGroupRef?.toArray()[value.group]; + const optionGroupElement = this.optionGroupRef?.toArray()[ + value.group + ]; optionGroupElement && this.scrollByIndex(optionGroupElement, value.option + 1); } @@ -395,7 +396,7 @@ export class DxcSelectComponent implements OnInit, ControlValueAccessor { this.focusedOption.group === indexGroup; setDefaultValues() { - if (this.value) { + if (this.value !== undefined && this.value !== null) { if (Array.isArray(this.value)) { const arr = []; this.value.map((value) => { diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-select/services/select.service.ts b/projects/dxc-ngx-cdk/src/lib/dxc-select/services/select.service.ts index fae764667..9ebf78363 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-select/services/select.service.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-select/services/select.service.ts @@ -12,11 +12,12 @@ export class SelectService { public selectedValues: BehaviorSubject = new BehaviorSubject(null); public filteredOptions: BehaviorSubject = new BehaviorSubject(null); - public visualFocused: BehaviorSubject = - new BehaviorSubject({ - group: -1, - option: -1, - }); + public visualFocused: BehaviorSubject< + VisualOptionFocus + > = new BehaviorSubject({ + group: -1, + option: -1, + }); public activeOption: BehaviorSubject = new BehaviorSubject( { group: -1, @@ -25,7 +26,7 @@ export class SelectService { ); public setSelectedValues(newOptions): void { - this.selectedValues.next(newOptions); + this.selectedValues.next(newOptions ?? null); } public setVisualFocused(newFocus): void { diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts index 47b38bc37..9b8b4f0fc 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts @@ -73,7 +73,7 @@ export class DxcTextareaComponent implements OnInit { private _rows = 4; @Input() - verticalGrow = ""; + verticalGrow = "auto"; @Input() error = undefined;