Merge pull request #2544 from intersective/2.4.y/CORE-8012/slider-broken-null

[CORE-8012] 2.4.y/slider broken null

Author: trtshen

docs/directives/toggleLabelDirective.md

@@ -0,0 +1,37 @@
+# Toggle Label Directive
+
+This directive was created to accommodate the use of innerHTML in ion-checkbox and ion-radio labels. It provides a solution for dynamically toggling label content and handling HTML content within Ionic form controls where standard label binding may not be sufficient.
+
+## Problem Statement
+The issue arises when clicking on the content within the innerHTML title text of ion-checkbox or ion-radio components. The expected behavior is that clicking the label should toggle the checkbox or radio button state. However, due to the way innerHTML is handled, the click event does not propagate correctly to the underlying input element, preventing the toggle action from occurring. This can lead to a confusing user experience where the label appears clickable but does not perform the intended function.
+
+### Comparison of Implementations
+
+#### Default Recommended Code Implementation
+```html
+<ion-checkbox [(ngModel)]="isChecked" (click)="toggleCheckbox()">
+  <ion-label>Toggle me</ion-label>
+</ion-checkbox>
+```
+In this implementation, clicking the label correctly toggles the checkbox state because the label is directly associated with the checkbox input.
+
+#### Implementation with innerHTML
+```html
+<ion-checkbox [(ngModel)]="isChecked">
+  <ion-label [innerHTML]="dynamicLabel" (click)="toggleCheckbox()"></ion-label>
+</ion-checkbox>
+```
+In this case, while the label appears clickable, the click event does not propagate to the checkbox input, resulting in no toggle action occurring when the label is clicked.
+
+This comparison highlights the importance of using standard label binding to ensure proper functionality in Ionic form controls.
+
+## Purpose
+- Enable dynamic label content for Ionic checkbox and radio components
+- Support HTML content rendering within form control labels
+- Provide consistent label behavior across different form input types
+
+## Usage
+Apply this directive to elements that need dynamic label toggling functionality, particularly useful with Ionic form controls that require innerHTML support.
+
+## Note
+This directive addresses limitations in standard Ionic label handling where innerHTML content needs to be dynamically managed for checkbox and radio controls.

docs/docs.md

@@ -7,4 +7,7 @@ This is practera documentation with more informations.
 
 ### Components
 - [Chat Room Component](./components/chatRoomComponent.md)
-- [Chat List Component](./components/chatListComponent.md)
+- [Chat List Component](./components/chatListComponent.md)
+
+### Directives
+- [Toggle Label Directive](./directives/toggleLabelDirective.md)

package-lock.json

@@ -203,19 +203,21 @@
                   [@tickAnimation]="failed()[question.id] ? 'visible' : 'hidden'"></ion-icon>
               </div>
 
-              <ion-item *ngIf="!doAssessment && (
-                (!question.reviewerOnly && utils.isEmpty(submission?.answers[question.id]?.answer)) ||
-                (question.reviewerOnly && !review?.answers[question.id] && !isPendingReview)
-              )"
-                class="no-answers item-bottom-border"
-                lines="none">
-                <ion-icon slot="start"
-                  color="orange"
-                  name="information-circle-outline"
-                  class="ion-margin-end"></ion-icon>
-                <ion-label size="small"
-                  i18n>No answer for this question.</ion-label>
-              </ion-item>
+              <ng-container *ngIf="question.type !== 'slider'">
+                <ion-item *ngIf="!doAssessment && (
+                  (!question.reviewerOnly && utils.isEmpty(submission?.answers[question.id]?.answer)) ||
+                  (question.reviewerOnly && !review?.answers[question.id] && !isPendingReview)
+                )"
+                  class="no-answers item-bottom-border"
+                  lines="none">
+                  <ion-icon slot="start"
+                    color="orange"
+                    name="information-circle-outline"
+                    class="ion-margin-end"></ion-icon>
+                  <ion-label size="small"
+                    i18n>No answer for this question.</ion-label>
+                </ion-item>
+              </ng-container>
 
               <app-text *ngSwitchCase="'text'"
                 #questionField
@@ -416,4 +418,4 @@
   <ng-template #blocked>
     <app-bottom-action-bar buttonType="blocked-role"></app-bottom-action-bar>
   </ng-template>
-</ng-container>
+</ng-container>