@searchstax-inc/searchstudio-ux-angular 4.1.68 → 4.2.0

package/README.md

@@ -208,31 +208,30 @@ It receives the following props:
             }"
           >
             <div class="searchstax-answer-title">Smart Answers</div>
-            <div
-              class="searchstax-answer-error"
-              *ngIf="answerData.shouldShowAnswerError"
-              [innerHTML]="answerData.answerErrorMessage"
-            ></div>
+            @if (answerData.shouldShowAnswerError) {
+              <div
+                class="searchstax-answer-error"
+                [innerHTML]="answerData.answerErrorMessage"
+              ></div>
+            }
             <div
               class="searchstax-answer-description"
               [innerHTML]="answerData.fullAnswerFormatted"
             ></div>
-            <div
-              *ngIf="answerData.answerLoading"
-              class="searchstax-answer-loading"
-            ></div>
-          </div>
-          <div
-            *ngIf="answerData.showMoreButtonVisible"
-            class="searchstax-answer-load-more-button-container"
-          >
-            <button
-              class="searchstax-answer-load-more-button"
-              (click)="showMore($event, context)"
-            >
-              Show More
-            </button>
+            @if (answerData.answerLoading) {
+              <div class="searchstax-answer-loading"></div>
+            }
           </div>
+          @if (answerData.showMoreButtonVisible) {
+            <div class="searchstax-answer-load-more-button-container">
+              <button
+                class="searchstax-answer-load-more-button"
+                (click)="showMore($event, context)"
+              >
+                Show More
+              </button>
+            </div>
+          }
         </div>
         <div class="searchstax-answer-footer">
           <div id="feedbackWidgetContainer"></div>
@@ -307,10 +306,10 @@ It receives the following props:
           [ngClass]="{ hidden: suggestions.length === 0 }"
           (mouseleave)="onMouseLeave(context)"
         >
-          <div
-            class="searchstax-autosuggest-item"
-            *ngFor="let suggestion of suggestions"
-          >
+          @for (suggestion of suggestions; track $index) {
+            <div
+              class="searchstax-autosuggest-item"
+            >
             <div
               class="searchstax-autosuggest-item-term-container"
               [innerHtml]="suggestion.term"
@@ -318,7 +317,8 @@ It receives the following props:
               tabindex="0"
               (click)="onMouseClick($event, context)"
             ></div>
-          </div>
+            </div>
+          }
         </div>
       </div>
       <app-searchstax-search-location
@@ -589,11 +589,11 @@ const locationWidgetConfig = {
       let-locationError="locationError"
       let-getCurrentLocation="getCurrentLocation"
     >
-      <div
-        class="searchstax-location-input-container"
-        data-test-id="searchstax-location-input-container"
-        *ngIf="locationData"
-      >
+      @if (locationData) {
+        <div
+          class="searchstax-location-input-container"
+          data-test-id="searchstax-location-input-container"
+        >
         <div class="searchstax-location-input-wrapper">
           <span class="searchstax-location-input-label">NEAR</span>
           <div class="searchstax-location-input-wrapper-inner">
@@ -618,29 +618,34 @@ const locationWidgetConfig = {
               Use my current location
             </button>
           </div>
-          <span
-            *ngIf="locationData.shouldShowLocationDistanceDropdown"
-            class="searchstax-location-input-label"
-            >WITHIN</span
-          >
-          <select
-            *ngIf="locationData.shouldShowLocationDistanceDropdown"
-            id="searchstax-location-radius-select"
-            class="searchstax-location-radius-select"
-            aria-label="Search Location Radius Select"
-            data-test-id="searchstax-location-radius-select"
-            (change)="radiusChange($event, context)"
-            [(ngModel)]="context.selectValue"
-          >
-            <option
-              *ngFor="let value of locationData.locationSearchDistanceValues"
-              [value]="value.value"
+          @if (locationData.shouldShowLocationDistanceDropdown) {
+            <span
+              class="searchstax-location-input-label"
+              >WITHIN</span
             >
-              {{ value.label }}
-            </option>
-          </select>
+          }
+          @if (locationData.shouldShowLocationDistanceDropdown) {
+            <select
+              id="searchstax-location-radius-select"
+              class="searchstax-location-radius-select"
+              aria-label="Search Location Radius Select"
+              data-test-id="searchstax-location-radius-select"
+              (change)="radiusChange($event, context)"
+              [(ngModel)]="context.selectValue"
+            >
+              @for (
+                value of locationData.locationSearchDistanceValues;
+                track value.value
+              ) {
+                <option [value]="value.value">
+                  {{ value.label }}
+                </option>
+              }
+            </select>
+          }
         </div>
-      </div>
+        </div>
+      }
     </ng-template>
 
           </app-searchstax-search-location>
@@ -707,10 +712,13 @@ It receives following props:
       let-isImage="isImage"
       let-context="context"
     >
-      <div class="searchstax-search-results">
-        <a
-          *ngFor="let searchResult of searchResults"
-          [href]="searchResult.url"
+      <div class="searchstax-search-results" id="searchstax-search-results">
+        @for (
+          searchResult of searchResults ?? [];
+          track searchResult.uniqueId
+        ) {
+          <a
+            [href]="searchResult.url"
           [attr.data-searchstax-unique-result-id]="searchResult.uniqueId"
           (click)="resultClicked(searchResult, $event, context)"
           (keyup.enter)="resultClicked(searchResult, $event, context)"
@@ -723,21 +731,22 @@ It receives following props:
             class="searchstax-search-result"
             [ngClass]="{ 'has-thumbnail': searchResult.thumbnail }"
           >
-            <div
-              *ngIf="searchResult.promoted"
-              class="searchstax-search-result-promoted"
-            ></div>
-            <div
-              *ngIf="searchResult.ribbon"
-              [innerHTML]="searchResult.ribbon"
-              class="searchstax-search-result-ribbon"
-            ></div>
-            <img
-              alt=""
-              *ngIf="searchResult.thumbnail"
-              [src]="searchResult.thumbnail"
-              class="searchstax-thumbnail"
-            />
+            @if (searchResult.promoted) {
+              <div class="searchstax-search-result-promoted"></div>
+            }
+            @if (searchResult.ribbon) {
+              <div
+                [innerHTML]="searchResult.ribbon"
+                class="searchstax-search-result-ribbon"
+              ></div>
+            }
+            @if (searchResult.thumbnail) {
+              <img
+                alt=""
+                [src]="searchResult.thumbnail"
+                class="searchstax-thumbnail"
+              />
+            }
             <div class="searchstax-search-result-title-container">
               <span
                 class="searchstax-search-result-title"
@@ -745,39 +754,45 @@ It receives following props:
                 [innerHTML]="searchResult.title"
               ></span>
             </div>
-            <p
-              tabindex="0"
-              *ngIf="searchResult.paths"
-              class="searchstax-search-result-common"
-              [innerHTML]="searchResult.paths"
-            ></p>
-            <p
-              tabindex="0"
-              *ngIf="searchResult.description"
-              [innerHTML]="searchResult.description"
-              class="searchstax-search-result-description searchstax-search-result-common"
-            ></p>
-            <div *ngFor="let unmappedField of searchResult.unmappedFields">
-              <div
-                *ngIf="isImage(unmappedField)"
-                class="searchstax-search-result-image-container"
-              >
-                <img
-                  alt=""
-                  [src]="unmappedField.value"
-                  class="searchstax-result-image"
-                />
-              </div>
-              <div *ngIf="!isImage(unmappedField)">
-                <p
-                  tabindex="0"
-                  class="searchstax-search-result-common"
-                  [innerHTML]="unmappedField.value"
-                ></p>
-              </div>
-            </div>
+            @if (searchResult.paths) {
+              <p
+                tabindex="0"
+                class="searchstax-search-result-common"
+                [innerHTML]="searchResult.paths"
+              ></p>
+            }
+            @if (searchResult.description) {
+              <p
+                tabindex="0"
+                [innerHTML]="searchResult.description"
+                class="searchstax-search-result-description searchstax-search-result-common"
+              ></p>
+            }
+            @for (
+              unmappedField of searchResult.unmappedFields ?? [];
+              track $index
+            ) {
+              @if (isImage(unmappedField)) {
+                <div class="searchstax-search-result-image-container">
+                  <img
+                    alt=""
+                    [src]="unmappedField.value"
+                    class="searchstax-result-image"
+                  />
+                </div>
+              } @else {
+                <div>
+                  <p
+                    tabindex="0"
+                    class="searchstax-search-result-common"
+                    [innerHTML]="unmappedField.value"
+                  ></p>
+                </div>
+              }
+            }
           </div>
-        </a>
+          </a>
+        }
       </div>
     </ng-template>
      <ng-template
@@ -791,18 +806,20 @@ It receives following props:
         Showing <strong>no results</strong> for
         <strong>"{{ searchTerm }}"</strong>
         <br />
-        <span *ngIf="metadata?.spellingSuggestion"
-          >&nbsp;Did you mean
-          <a
-            href="#"
-            [attr.aria-label]="'did you mean: ' + metadata?.spellingSuggestion"
-            class="searchstax-suggestion-term"
-            (click)="
-              executeSearch(metadata?.spellingSuggestion ?? '', $event, context)
-            "
-            >{{ metadata?.spellingSuggestion }}</a
-          >?</span
-        >
+        @if (metadata?.spellingSuggestion) {
+          <span
+            >&nbsp;Did you mean
+            <a
+              href="#"
+              [attr.aria-label]="'did you mean: ' + metadata?.spellingSuggestion"
+              class="searchstax-suggestion-term"
+              (click)="
+                executeSearch(metadata?.spellingSuggestion ?? '', $event, context)
+              "
+              >{{ metadata?.spellingSuggestion }}</a
+            >?</span
+          >
+        }
       </div>
       <ul>
         <li>
@@ -1055,11 +1072,14 @@ It receives following props:
       let-showMoreLessDesktop="showMoreLessDesktop"
     >
       <div class="searchstax-facets-container-desktop">
-        <div
-          class="searchstax-facet-container"
-          *ngFor="let facet of facetsTemplateDataDesktop?.facets"
-          [class]="{ active: isNotDeactivated(facet.name, context) }"
-        >
+        @for (
+          facet of facetsTemplateDataDesktop?.facets ?? [];
+          track facet.name
+        ) {
+          <div
+            class="searchstax-facet-container"
+            [class]="{ active: isNotDeactivated(facet.name, context) }"
+          >
           <div>
             <div
               class="searchstax-facet-title-container"
@@ -1071,14 +1091,17 @@ It receives following props:
               <div class="searchstax-facet-title-arrow active"></div>
             </div>
             <div class="searchstax-facet-values-container" aria-live="polite">
-              <div
-                *ngFor="let facetValue of facetValues(facet); index as key"
-                class="searchstax-facet-value-container"
-                [class]="{
-                  'searchstax-facet-value-disabled': facetValue.disabled
-                }"
-                #ref
-              >
+              @for (
+                facetValue of facetValues(facet);
+                track $index
+              ) {
+                <div
+                  class="searchstax-facet-value-container"
+                  [class]="{
+                    'searchstax-facet-value-disabled': facetValue.disabled
+                  }"
+                  #facetValueRow
+                >
                 <div class="searchstax-facet-input">
                   <input
                     type="checkbox"
@@ -1089,52 +1112,59 @@ It receives following props:
                     "
                     [disabled]="facetValue.disabled"
                     (click)="
-                      selectFacet(ref, $event, facetValue, true, context)
+                      selectFacet(facetValueRow, $event, facetValue, true, context)
                     "
                   />
                 </div>
                 <div
                   class="searchstax-facet-value-label"
-                  (click)="selectFacet(ref, $event, facetValue, false, context)"
+                  (click)="
+                    selectFacet(facetValueRow, $event, facetValue, false, context)
+                  "
                 >
                   {{ facetValue.value }}
                 </div>
                 <div
                   class="searchstax-facet-value-count"
-                  (click)="selectFacet(ref, $event, facetValue, false, context)"
+                  (click)="
+                    selectFacet(facetValueRow, $event, facetValue, false, context)
+                  "
                 >
                   ({{ facetValue.count }})
                 </div>
-              </div>
-              <div
-                class="searchstax-facet-show-more-container"
-                *ngIf="facet.hasMoreFacets"
-              >
-                <div
-                  class="searchstax-facet-show-more-container"
-                  (click)="showMoreLessDesktop($event, facet, context)"
-                  (keyup.enter)="showMoreLessDesktop($event, facet, context)"
-                  (keyup.space)="showMoreLessDesktop($event, facet, context)"
-                  tabindex="0"
-                  role="button"
-                >
-                  <div
-                    *ngIf="facet.showingAllFacets"
-                    class="searchstax-facet-show-less-button searchstax-facet-show-button"
-                  >
-                    less
-                  </div>
+                </div>
+              }
+              @if (facet.hasMoreFacets) {
+                <div class="searchstax-facet-show-more-container">
                   <div
-                    *ngIf="!facet.showingAllFacets"
-                    class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                    class="searchstax-facet-show-more-container"
+                    (click)="showMoreLessDesktop($event, facet, context)"
+                    (keyup.enter)="showMoreLessDesktop($event, facet, context)"
+                    (keyup.space)="showMoreLessDesktop($event, facet, context)"
+                    tabindex="0"
+                    role="button"
                   >
-                    more
+                    @if (facet.showingAllFacets) {
+                      <div
+                        class="searchstax-facet-show-less-button searchstax-facet-show-button"
+                      >
+                        less
+                      </div>
+                    }
+                    @if (!facet.showingAllFacets) {
+                      <div
+                        class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                      >
+                        more
+                      </div>
+                    }
                   </div>
                 </div>
-              </div>
+              }
             </div>
           </div>
-        </div>
+          </div>
+        }
       </div>
     </ng-template>
                  <ng-template
@@ -1164,24 +1194,26 @@ It receives following props:
             <div class="searchstax-facets-pill-label">Filter By</div>
           </div>
           <div class="searchstax-facets-pills-selected">
-            <div
-              class="searchstax-facets-pill searchstax-facets-pill-facets"
-              *ngFor="let facet of selectedFacetsCheckboxes"
-              (click)="unselectFacet(facet, context)"
-            >
+            @for (facet of selectedFacetsCheckboxes; track $index) {
+              <div
+                class="searchstax-facets-pill searchstax-facets-pill-facets"
+                (click)="unselectFacet(facet, context)"
+              >
               <div class="searchstax-facets-pill-label">
                 {{ facet.value }} ({{ facet.count }})
               </div>
               <div class="searchstax-facets-pill-icon-close"></div>
-            </div>
+              </div>
+            }
           </div>
-          <div
-            class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
-            *ngIf="selectedFacetsCheckboxes.length"
-            (click)="unselectAll(context)"
-          >
+          @if (selectedFacetsCheckboxes.length) {
+            <div
+              class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
+              (click)="unselectAll(context)"
+            >
             <div class="searchstax-facets-pill-label">Clear Filters</div>
-          </div>
+            </div>
+          }
         </div>
         <div
           class="searchstax-facets-mobile-overlay"
@@ -1200,13 +1232,16 @@ It receives following props:
             ></div>
           </div>
           <div class="searchstax-facets-container-mobile">
-            <div
-              *ngFor="let facet of facetsTemplateDataMobile?.facets"
-              class="searchstax-facet-container"
-              [class]="{
-                active: isNotDeactivated(facet.name, context)
-              }"
-            >
+            @for (
+              facet of facetsTemplateDataMobile?.facets ?? [];
+              track facet.name
+            ) {
+              <div
+                class="searchstax-facet-container"
+                [class]="{
+                  active: isNotDeactivated(facet.name, context)
+                }"
+              >
               <div>
                 <div
                   class="searchstax-facet-title-container"
@@ -1221,14 +1256,17 @@ It receives following props:
                   class="searchstax-facet-values-container"
                   aria-live="polite"
                 >
-                  <div
-                    *ngFor="let facetValue of facetValues(facet); index as key"
-                    class="searchstax-facet-value-container"
-                    [class]="{
-                      'searchstax-facet-value-disabled': facetValue.disabled
-                    }"
-                    #ref
-                  >
+                  @for (
+                    facetValue of facetValues(facet);
+                    track $index
+                  ) {
+                    <div
+                      class="searchstax-facet-value-container"
+                      [class]="{
+                        'searchstax-facet-value-disabled': facetValue.disabled
+                      }"
+                      #facetValueRow
+                    >
                     <div class="searchstax-facet-input">
                       <input
                         type="checkbox"
@@ -1239,14 +1277,14 @@ It receives following props:
                         "
                         [disabled]="facetValue.disabled"
                         (click)="
-                          selectFacet(ref, $event, facetValue, true, context)
+                          selectFacet(facetValueRow, $event, facetValue, true, context)
                         "
                       />
                     </div>
                     <div
                       class="searchstax-facet-value-label"
                       (click)="
-                        selectFacet(ref, $event, facetValue, false, context)
+                        selectFacet(facetValueRow, $event, facetValue, false, context)
                       "
                     >
                       {{ facetValue.value }}
@@ -1254,40 +1292,43 @@ It receives following props:
                     <div
                       class="searchstax-facet-value-count"
                       (click)="
-                        selectFacet(ref, $event, facetValue, false, context)
+                        selectFacet(facetValueRow, $event, facetValue, false, context)
                       "
                     >
                       ({{ facetValue.count }})
                     </div>
-                  </div>
-                  <div
-                    class="searchstax-facet-show-more-container"
-                    *ngIf="facet.hasMoreFacets"
-                  >
-                    <div
-                      class="searchstax-facet-show-more-container"
-                      (click)="showMoreLessMobile($event, facet, context)"
-                      (keyup.enter)="showMoreLessMobile($event, facet, context)"
-                      (keyup.space)="showMoreLessMobile($event, facet, context)"
-                      tabindex="0"
-                    >
-                      <div
-                        *ngIf="facet.showingAllFacets"
-                        class="searchstax-facet-show-less-button searchstax-facet-show-button"
-                      >
-                        less
-                      </div>
+                    </div>
+                  }
+                  @if (facet.hasMoreFacets) {
+                    <div class="searchstax-facet-show-more-container">
                       <div
-                        *ngIf="!facet.showingAllFacets"
-                        class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                        class="searchstax-facet-show-more-container"
+                        (click)="showMoreLessMobile($event, facet, context)"
+                        (keyup.enter)="showMoreLessMobile($event, facet, context)"
+                        (keyup.space)="showMoreLessMobile($event, facet, context)"
+                        tabindex="0"
                       >
-                        more
+                        @if (facet.showingAllFacets) {
+                          <div
+                            class="searchstax-facet-show-less-button searchstax-facet-show-button"
+                          >
+                            less
+                          </div>
+                        }
+                        @if (!facet.showingAllFacets) {
+                          <div
+                            class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                          >
+                            more
+                          </div>
+                        }
                       </div>
                     </div>
-                  </div>
+                  }
                 </div>
               </div>
-            </div>
+              </div>
+            }
           </div>
           <button
             class="searchstax-facets-mobile-overlay-done"
@@ -1341,12 +1382,15 @@ It receives following props:
           {{ searchFeedbackData!.endResultIndex }}</b
         >
         of <b>{{ searchFeedbackData!.totalResults }}</b> results
-        <span *ngIf="searchFeedbackData.searchTerm"
-          >for "<b>{{ searchFeedbackData!.searchTerm }}</b
-          >"
-        </span>
+        @if (searchFeedbackData.searchTerm) {
+          <span
+            >for "<b>{{ searchFeedbackData!.searchTerm }}</b
+            >"
+          </span>
+        }
         <div class="searchstax-feedback-container-suggested">
-          <div *ngIf="searchFeedbackData.autoCorrectedQuery">
+          @if (searchFeedbackData.autoCorrectedQuery) {
+            <div>
             Search instead for
             <a
               href="#"
@@ -1357,7 +1401,8 @@ It receives following props:
               "
               >{{ searchFeedbackData!.originalQuery }}</a
             >
-          </div>
+            </div>
+          }
         </div>
       </h2>
     </ng-template>
@@ -1413,22 +1458,28 @@ It receives following props:
         [id]="'searchstax-related-searches-container' + rand"
       >
         Related searches: <span id="searchstax-related-searches"></span>
-        <span
-          class="searchstax-related-search"
-          *ngIf="relatedData.relatedSearches"
-        >
-          <span
-            *ngFor="let related of relatedData.relatedSearches"
-            (click)="executeSearch(related, context)"
-            (keyup.enter)="executeSearch(related, context)"
-            (keyup.space)="executeSearch(related, context)"
-            tabindex="0"
-            class="searchstax-related-search searchstax-related-search-item"
-            [attr.aria-label]="'Related search: ' + related.related_search"
-          >
-            {{ related.related_search }}<span *ngIf="!related.last">,</span>
+        @if (relatedData.relatedSearches) {
+          <span class="searchstax-related-search">
+            @for (
+              related of relatedData.relatedSearches;
+              track $index
+            ) {
+              <span
+                (click)="executeSearch(related, context)"
+                (keyup.enter)="executeSearch(related, context)"
+                (keyup.space)="executeSearch(related, context)"
+                tabindex="0"
+                class="searchstax-related-search searchstax-related-search-item"
+                [attr.aria-label]="'Related search: ' + related.related_search"
+              >
+                {{ related.related_search }}
+                @if (!related.last) {
+                  <span>,</span>
+                }
+              </span>
+            }
           </span>
-        </span>
+        }
       </div>
     </ng-template>
  </app-searchstax-related-searches>
@@ -1472,37 +1523,43 @@ It receives following props:
         class="searchstax-external-promotions-container"
         id="searchstax-external-promotions-container"
       >
-        <div
-          class="searchstax-external-promotion searchstax-search-result"
-          *ngFor="
-            let externalPromotion of externalPromotionsData.externalPromotions
-          "
-        >
-          <div class="icon-elevated"></div>
-          <a
-            *ngIf="externalPromotion.url"
-            [href]="externalPromotion.url"
-            (click)="trackClick(externalPromotion, $event, context)"
-            class="searchstax-result-item-link"
-          ></a>
-          <div class="searchstax-search-result-title-container">
-            <span class="searchstax-search-result-title">{{
-              externalPromotion.name
-            }}</span>
-          </div>
-          <p
-            *ngIf="externalPromotion.description"
-            class="searchstax-search-result-description searchstax-search-result-common"
-          >
-            {{ externalPromotion.description }}
-          </p>
-          <p
-            *ngIf="externalPromotion.url"
-            class="searchstax-search-result-description searchstax-search-result-common"
+        @for (
+          externalPromotion of externalPromotionsData?.externalPromotions ??
+            [];
+          track $index
+        ) {
+          <div
+            class="searchstax-external-promotion searchstax-search-result"
           >
-            {{ externalPromotion.url }}
-          </p>
-        </div>
+            <div class="icon-elevated"></div>
+            @if (externalPromotion.url) {
+              <a
+                [href]="externalPromotion.url"
+                (click)="trackClick(externalPromotion, $event, context)"
+                class="searchstax-result-item-link"
+              ></a>
+            }
+            <div class="searchstax-search-result-title-container">
+              <span class="searchstax-search-result-title">{{
+                externalPromotion.name
+              }}</span>
+            </div>
+            @if (externalPromotion.description) {
+              <p
+                class="searchstax-search-result-description searchstax-search-result-common"
+              >
+                {{ externalPromotion.description }}
+              </p>
+            }
+            @if (externalPromotion.url) {
+              <p
+                class="searchstax-search-result-description searchstax-search-result-common"
+              >
+                {{ externalPromotion.url }}
+              </p>
+            }
+          </div>
+        }
       </div>
     </ng-template>
           </app-searchstax-external-promotions>
@@ -1558,12 +1615,14 @@ It receives following props:
           [(ngModel)]="context.selectedSorting"
           (change)="orderChange($event, context)"
         >
-          <option
-            *ngFor="let sortOption of context.sortingData.sortOptions"
-            [value]="sortOption.key"
-          >
-            {{ sortOption.value }}
-          </option>
+          @for (
+            sortOption of context.sortingData?.sortOptions ?? [];
+            track sortOption.key
+          ) {
+            <option [value]="sortOption.key">
+              {{ sortOption.value }}
+            </option>
+          }
         </select>
       </div>
     </ng-template>