Fix selected button state (#224)

DevExpress · Feb 6, 2024 · 971c354 · 971c354
1 parent 56118a1
commit 971c354
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 2 deletions.
diff --git a/src/app/preview/button-group/button-group.component.css b/src/app/preview/button-group/button-group.component.css
@@ -32,5 +32,8 @@ span {
     display: flex;
     flex-direction: column;
     gap: 0 16px;
+}
+
+.btn-container-click-disabled {
     pointer-events: none;
 }
diff --git a/src/app/preview/button-group/button-group.component.html b/src/app/preview/button-group/button-group.component.html
@@ -48,7 +48,7 @@
             (onValueChanged)="toogleText($event)"
         ></dx-check-box>
     </div>
-    <div class="btn-container">
+    <div class="btn-container btn-container-click-disabled">
         <div class="btn-row">
             <div class="btn-cell btn-cell--empty"></div>
             <div class="btn-cell">
@@ -102,6 +102,16 @@
             </ng-container>
         </div>
 
+        <div class="btn-row">
+            <div class="btn-cell">
+                <span>Selected</span>
+            </div>
+
+            <ng-container *ngFor="let mode of buttonModes">
+                <ng-container *ngTemplateOutlet="buttonTemplate; context: {mode: mode, initState: initStateSelected}"></ng-container>
+            </ng-container>
+        </div>
+
         <div class="btn-row">
             <div class="btn-cell">
                 <span>Disabled</span>

diff --git a/src/app/preview/button-group/button-group.component.ts b/src/app/preview/button-group/button-group.component.ts
@@ -37,6 +37,10 @@ export class ButtonGroupComponent {
         event.element.querySelector('.dx-button:first-child').classList.add('dx-state-focused');
     }
 
+    initStateSelected(event: DxButtonGroupTypes.ContentReadyEvent) {
+        event.element.querySelector('.dx-button:first-child').classList.add('dx-state-selected');
+    }
+
     initStateDisabled(event: DxButtonGroupTypes.ContentReadyEvent) {
         event.element.querySelectorAll('.dx-button').forEach((button) => {
             button.classList.add('dx-state-disabled');

diff --git a/src/app/preview/buttons/buttons.component.css b/src/app/preview/buttons/buttons.component.css
@@ -31,5 +31,8 @@ span {
 .btn-list {
     display: flex;
     gap: 16px;
+}
+
+.btn-container-click-disabled {
     pointer-events: none;
 }
diff --git a/src/app/preview/buttons/buttons.component.html b/src/app/preview/buttons/buttons.component.html
@@ -37,7 +37,7 @@
             </div>
         </div>
     </div>
-    <div class="btn-container">
+    <div class="btn-container btn-container-click-disabled">
         <div class="btn-row">
             <div class="btn-cell btn-cell--empty"></div>
             <div class="btn-cell">