Merge pull request #703 from dxc-technology/fix-select-aida

[Minor] Fix tokens and visual issues in select

Author: Jialecl

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

@@ -5,8 +5,15 @@
       <dxc-select label="Label" helperText="HelperText" margin="xsmall" [options]="array1" (onChange)="onChange($event)"
         (onBlur)="onBlur($event)" [optional]="true" placeholder="Another placeholder" size="large" tabIndex="3">
       </dxc-select>
-      <dxc-select label="Label" helperText="HelperText" margin="xsmall" [options]="array2" [optional]="true"
-        (onChange)="onChange($event)" placeholder="Another placeholder"></dxc-select>
+      <dxc-select
+        label="Label"
+        helperText="HelperText"
+        margin="xsmall"
+        [options]="array2"
+        [optional]="true"
+        (onChange)="onChange($event)"
+        placeholder="This is a very very very long placeholder to test the ellipsis"
+      ></dxc-select>
     </tbuilder-component-mode>
 
     <tbuilder-component-mode text="Searchable">

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/select-preview/select-preview.component.ts

@@ -8,14 +8,16 @@ import { OptionGroup } from "@dxc-technology/halstack-angular/lib/dxc-select/int
 })
 export class SelectPreviewComponent implements OnInit {
   selectedValues: string = "";
-
   array1: Option[] = [
     {
       label: "label1",
       value: "1",
       icon: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="18px" viewBox="0 0 24 24" width="18px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><path d="M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z"/></g></g></svg>',
     },
-    { label: "label2", value: "2" },
+    {
+      label: "This is a very very very long label to test the ellipsis",
+      value: "2",
+    },
     { label: "label6", value: "6" },
     { label: "label9", value: "9" },
     { label: "aida", value: "10" },
@@ -31,7 +33,10 @@ export class SelectPreviewComponent implements OnInit {
     {
       label: "Group label 1",
       options: [
-        { label: "label3", value: "3" },
+        {
+          label: "This is a very very very long label to test the ellipsis",
+          value: "3",
+        },
         { label: "label4", value: "4" },
         {
           label: "label5",

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/AdvancedTheme.json

@@ -934,7 +934,8 @@
     "underlineFocusColor": "#000000",
     "underlineThickness": "1px",
     "arrowColor": "#000000",
-    "systemMessageFontColor": "#666666"
+    "systemMessageFontColor": "#666666",
+    "focusListOptionBorderColor": "#0095ff"
   },
   "sidenav": {
     "backgroundColor": "#F8F8F8",

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/themes/schemas/Advanced.schema.json

@@ -938,7 +938,8 @@
     "valueFontColorOnDark": "color",
     "arrowColor": "color",
     "arrowColorOnDark": "color",
-    "systemMessageFontColor": "color"
+    "systemMessageFontColor": "color",
+    "focusListOptionBorderColor": "color"
   },
   "sidenav": {
     "backgroundColor": "color",

projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select-option-selected/dxc-select-option-selected.component.html

@@ -1,22 +1,12 @@
 <div class="labelsContainer" #labelsContainer>
   <ng-container *ngIf="!(multiple && searchable)">
     <span
-      *ngFor="let option of selectedOptions; last as last"
       class="selectedOption"
+      [ngClass]="{
+        isOptionalLabel: isOptionalLabel()
+      }"
     >
-      <!-- <span
-        *ngIf="option?.icon"
-        class="iconLabel"
-        [innerHTML]="option.icon | safeHtml"
-      ></span> -->
-      <span
-        class="selectedLabel"
-        [ngClass]="{
-          isOptionalLabel: !multiple && this.selectedOptions[0]?.value === ''
-        }"
-      >
-        {{ option.label }} <span *ngIf="!last" class="comma">,</span>
-      </span>
+      {{ selectedOptions }}
     </span>
   </ng-container>
 

projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select-option-selected/dxc-select-option-selected.component.ts

@@ -23,7 +23,8 @@ export class DxcSelectOptionSelectedComponent implements OnInit {
   @Input() placeholder: string;
 
   subscriptor: any;
-  selectedOptions: Array<Option> = [];
+  selectedOptions: string = "";
+  array: Array<Option> = [];
 
   defaultInputs = new BehaviorSubject<any>({
     multiple: false,
@@ -33,13 +34,22 @@ export class DxcSelectOptionSelectedComponent implements OnInit {
   constructor(public service: SelectService) {
     this.subscriptor = this.service.selectedValues.subscribe((newOptions) => {
       if (newOptions) {
+        this.selectedOptions = "";
         if (Array.isArray(newOptions)) {
-          this.selectedOptions = newOptions;
+          this.array = newOptions;
+          newOptions.forEach((option, index) => {
+            if (index === 0) {
+              this.selectedOptions = option.label;
+            } else {
+              this.selectedOptions = this.selectedOptions + ", " + option.label;
+            }
+          });
         } else {
-          this.selectedOptions[0] = newOptions;
+          this.array[0] = newOptions;
+          this.selectedOptions = newOptions.label;
         }
       } else {
-        this.selectedOptions = [];
+        this.selectedOptions = "";
       }
     });
   }
@@ -75,47 +85,39 @@ export class DxcSelectOptionSelectedComponent implements OnInit {
     }
   }
 
+  isOptionalLabel() {
+    return !this.multiple && this.array[0]?.value === "";
+  }
+
   getDynamicStyle(inputs) {
     return css`
       display: flex;
       max-width: 100%;
+      width: 100%;
       div.labelsContainer {
         width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        display: inline-block;
         .selectedOption {
-          text-align: left;
-          display: inline-flex;
-          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          display: block;
+          width: 100%;
           font-family: var(--select-fontFamily);
           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 {
-            width: 24px;
-            height: 24px;
-            display: inline-flex;
-            align-items: center;
-          }
-          .comma {
-            margin-right: 4px;
-          }
-          .iconLabel {
-            margin-right: 0.25rem;
-          }
-          .isOptionalLabel {
+          &.isOptionalLabel {
             color: ${inputs.disabled
               ? "var(--select-disabledColor)"
               : "#000000b3"};
           }
         }
         .notSelectedLabel {
           text-align: left;
+          white-space: nowrap;
           font-family: var(--select-fontFamily);
           font-size: var(--select-placeholderFontSize);
           font-style: var(--select-placeholderFontStyle);

projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select-option/dxc-select-option.component.html

@@ -11,20 +11,18 @@
     class="iconLabel"
     [innerHTML]="option.icon | safeHtml"
   ></div>
-  <span class="label" [attr.aria-selected]="this.selected" role="option">{{
-    option.label
-  }}</span>
+  <span class="label"
+    ><span [attr.aria-selected]="this.selected" role="option">{{
+      option.label
+    }}</span></span
+  >
   <span
     class="checkIcon"
     *ngIf="
       !multiple && this.service.getSelectedValues()?.value === option.value
     "
   >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="#000000"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
       <path d="M0 0h24v24H0z" fill="none" />
       <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
     </svg>
@@ -39,20 +37,18 @@
   (mousedown)="handleOptionMouseDown($event)"
   tabindex="-1"
 >
-  <span class="label" [attr.aria-selected]="this.selected" role="option">{{
-    option.label
-  }}</span>
+  <span class="label"
+    ><span [attr.aria-selected]="this.selected" role="option">{{
+      option.label
+    }}</span></span
+  >
   <span
     class="checkIcon"
     *ngIf="
       !multiple && this.service.getSelectedValues()?.value === option.value
     "
   >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="#000000"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
       <path d="M0 0h24v24H0z" fill="none" />
       <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
     </svg>
@@ -76,8 +72,10 @@
   </dxc-checkbox>
   <div *ngIf="option.icon !== undefined && option.icon !== null">
     <span class="iconLabel" [innerHTML]="option.icon | safeHtml"></span>
-    <span class="label" [attr.aria-selected]="this.selected" role="option">{{
-      option.label
-    }}</span>
+    <span class="label"
+      ><span [attr.aria-selected]="this.selected" role="option">{{
+        option.label
+      }}</span></span
+    >
   </div>
 </span>

projects/dxc-ngx-cdk/src/lib/dxc-select/dxc-select-option/dxc-select-option.component.ts

@@ -106,23 +106,29 @@ export class DxcSelectOptionComponent implements OnInit {
       height: 32px;
       :hover {
         cursor: pointer;
-        background-color: var(--select-unselectedHoverListOptionBackgroundColor);
+        background-color: var(
+          --select-unselectedHoverListOptionBackgroundColor
+        );
       }
       :active {
-        background-color: var(--select-unselectedActiveListOptionBackgroundColor);
+        background-color: var(
+          --select-unselectedActiveListOptionBackgroundColor
+        );
       }
       ${inputs.checked && inputs.multiple ? this.setSelectedStyles() : ""}
       &.selected {
         ${this.setSelectedStyles()}
         &.focused {
-          background-color: var(--select-selectedHoverListOptionBackgroundColor);
+          background-color: var(
+            --select-selectedHoverListOptionBackgroundColor
+          );
         }
         .optionLabel {
           border-bottom: 1px solid transparent;
         }
       }
       &.focused {
-        box-shadow: inset 0 0 0 2px #0095ff;
+        box-shadow: inset 0 0 0 2px var(--select-focusListOptionBorderColor);
         .optionLabel {
           border-bottom: 1px solid transparent;
         }
@@ -134,33 +140,40 @@ export class DxcSelectOptionComponent implements OnInit {
         margin: 2px 8px;
         height: 100%;
         box-sizing: border-box;
-        border-bottom: 1px solid var(--select-ListOptionDividerColor);
+        border-bottom: 1px solid var(--select-listOptionDividerColor);
+        overflow: hidden;
         .iconLabel {
           display: flex;
           align-items: center;
           margin-left: ${!inputs.multiple ? "8px" : ""};
           svg {
-            fill: var(--select-ListOptionIconColor);
+            fill: var(--select-listOptionIconColor);
           }
         }
         .label {
           width: 100%;
-          height: 100%;
-          display: flex;
-          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          display: inline-block;
+          align-self: center;
           margin-left: 0.5rem;
           margin-right: 0.5rem;
-          font-family: var(--select-fontFamily);
-          font-size: var(--select-ListOptionFontSize);
-          font-style: var(--select-ListOptionFontStyle);
-          font-weight: var(--select-ListOptionFontWeight);
-          color: var(--select-ListOptionFontColor);
+          span {
+            width: 100%;
+            height: 100%;
+            font-family: var(--select-fontFamily);
+            font-size: var(--select-listOptionFontSize);
+            font-style: var(--select-listOptionFontStyle);
+            font-weight: var(--select-listOptionFontWeight);
+            color: var(--select-listOptionFontColor);
+          }
         }
         .checkIcon {
           display: flex;
-          margin-right: 8px;
+          margin-right: 0.5rem;
           align-items: center;
-          svg{
+          svg {
             fill: var(--select-selectedListOptionIconColor);
             width: 16px;
             height: 16px;
@@ -171,8 +184,24 @@ export class DxcSelectOptionComponent implements OnInit {
         width: 100%;
         height: 100%;
         display: flex;
+        align-items: center;
         div {
           display: flex;
+          overflow: hidden;
+        }
+        dxc-checkbox {
+          .mat-checkbox-label {
+            span:last-child {
+              display: inline-grid;
+              .checkboxLabel {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                display: block;
+                width: 100%;
+              }
+            }
+          }
         }
       }
     `;