From 019908b5566b047caacee0984adc5294104df549 Mon Sep 17 00:00:00 2001
From: dxvladslavvolkov <vladislav.volkov@devexpress.com>
Date: Tue, 7 Nov 2023 10:38:56 +0400
Subject: [PATCH] Fixed after designer review

---
 src/app/preview/buttons/buttons.component.html | 4 ++--
 src/app/preview/editors/editors.component.html | 4 ++--
 src/app/preview/preview/preview.component.css  | 2 +-
 src/app/preview/preview/preview.component.ts   | 4 ++++
 src/app/preview/treeview/treeview.component.ts | 1 -
 5 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/preview/buttons/buttons.component.html b/src/app/preview/buttons/buttons.component.html
index 4d673bd3..8fb11c3f 100644
--- a/src/app/preview/buttons/buttons.component.html
+++ b/src/app/preview/buttons/buttons.component.html
@@ -94,14 +94,14 @@
     <div class="btn-cell">
         <div class="btn-list">
         <dx-button
-            text="BUTTON"
+            text="Button"
             type="default"
             [stylingMode]="mode"
             [disabled]="disabled"
             (onContentReady)="initState ? initState($event) : null"
         ></dx-button>
         <dx-button
-            text="BUTTON"
+            text="Button"
             icon="favorites"
             type="default"
             [stylingMode]="mode"
diff --git a/src/app/preview/editors/editors.component.html b/src/app/preview/editors/editors.component.html
index ef9e7f18..342ddc52 100644
--- a/src/app/preview/editors/editors.component.html
+++ b/src/app/preview/editors/editors.component.html
@@ -2,7 +2,7 @@
 
 <ng-template #collapsedBlock>
     <dx-text-box width="140" value="Text Box"></dx-text-box>
-    <dx-tag-box width="140" [items]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']" [value]="['Monday']"></dx-tag-box>
+    <dx-tag-box width="140" [multiline]="false" [items]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']" [value]="['Monday']"></dx-tag-box>
     <dx-select-box width="140" [items]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']"></dx-select-box>
     <dx-lookup width="140" [items]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']"></dx-lookup>
     <dx-check-box [value]="true"></dx-check-box>
@@ -40,7 +40,7 @@
                 </dx-text-box>
             </div>
             <div class="field daterangebox">
-                <dx-date-range-box stylingMode="outlined" [dropDownOptions]="dropDownOptions"></dx-date-range-box>
+                <dx-date-range-box stylingMode="outlined" [dropDownOptions]="dropDownOptions" [labelMode]="labelMode"></dx-date-range-box>
             </div>
         </div>
         <div class="block filled">
diff --git a/src/app/preview/preview/preview.component.css b/src/app/preview/preview/preview.component.css
index 69f91325..21232c67 100644
--- a/src/app/preview/preview/preview.component.css
+++ b/src/app/preview/preview/preview.component.css
@@ -37,7 +37,7 @@
 }
 
 .component-display:hover,
-.component-item.component-item--active .component-display {
+.component-item.selected-component-item .component-display {
     border-color: #2190F7;
 }
 
diff --git a/src/app/preview/preview/preview.component.ts b/src/app/preview/preview/preview.component.ts
index 6b13e61c..c56e05b6 100644
--- a/src/app/preview/preview/preview.component.ts
+++ b/src/app/preview/preview/preview.component.ts
@@ -30,6 +30,7 @@ export class PreviewComponent implements AfterViewInit, OnChanges {
 
     createPreviewContent(widget: any): void {
         const EXPAND_CLASS_NAME = 'component-item--active';
+        const SELECTED_ITEM_CLASS_NAME = 'selected-component-item';
         const flexContainers = document.getElementsByClassName('component-item');
         const scrollableContainer = this.scrollView.instance.element().querySelector('.dx-scrollable-container');
         const currentWidget: string = widget.currentValue || widget;
@@ -38,6 +39,7 @@ export class PreviewComponent implements AfterViewInit, OnChanges {
         /* eslint @typescript-eslint/prefer-for-of: 'off' */
         for(let i = 0; i < flexContainers.length; i++) {
             flexContainers[i].classList.remove(EXPAND_CLASS_NAME);
+            flexContainers[i].classList.remove(SELECTED_ITEM_CLASS_NAME);
         }
 
         this.widgetElements.forEach((widgetEl) => {
@@ -63,6 +65,8 @@ export class PreviewComponent implements AfterViewInit, OnChanges {
                 const flexParentContainer = widgetContainer[0].parentElement.parentElement;
                 const scrollTop = 30;
 
+                flexParentContainer.classList.add(SELECTED_ITEM_CLASS_NAME);
+
                 if(this.notExpandableWidgets.indexOf(currentWidget) >= 0) {
                     scrollableContainer.scrollTo({
                         top: flexParentContainer.offsetTop - scrollTop,
diff --git a/src/app/preview/treeview/treeview.component.ts b/src/app/preview/treeview/treeview.component.ts
index a4beb4fd..5fe64487 100644
--- a/src/app/preview/treeview/treeview.component.ts
+++ b/src/app/preview/treeview/treeview.component.ts
@@ -19,7 +19,6 @@ export class TreeviewComponent {
                 {
                     id: 11,
                     text: 'Individual Platforms',
-                    selected: true,
                     items: [
                         { id: 111, text: 'WinForms' },
                         { id: 112, text: 'ASP.NET' },