@sourceloop/search-client 9.0.1 → 11.0.0

package/src/lib/search/search.component.html

@@ -0,0 +1,191 @@
+<ng-container *ngIf="!showOnlySearchResultOverlay()">
+  <div
+    fxLayout
+    fxLayoutAlign="start center"
+    class="toolbar-search"
+    *ngIf="cfg()"
+  >
+    <mat-form-field appearance="outline" class="toolbar-search-input">
+      <input
+        matInput
+        autocomplete="off"
+        type="text"
+        [placeholder]="
+          cfg().placeholderFunction?.(searchInput.value, category)
+            ?? cfg().placeholder ?? 'Search'
+        "
+        #searchInput
+        name="searchInput"
+        (focus)="showSuggestions()"
+        (blur)="hideSuggestions()"
+        [(ngModel)]="searchBoxInput"
+        (keyup)="hitSearchApi($event)"
+        placeholder="Search"
+        (ngModelChange)="onChange(this.searchBoxInput)"
+        [disabled]="disabled"
+      />
+      <mat-icon matPrefix [className]="cfg().searchIconClass"></mat-icon>
+      <mat-icon
+        *ngIf="searchBoxInput"
+        matSuffix
+        [className]="cfg().crossIconClass"
+        (click)="resetInput()"
+      ></mat-icon>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="toolbar-search-select">
+      <mat-icon
+        matSuffix
+        [className]="cfg().dropDownButtonIconClass"
+      ></mat-icon>
+      <mat-select
+        [value]="category"
+        (selectionChange)="setCategory($event.value)"
+        panelClass="search-select"
+      >
+        <mat-option [value]="model.name" *ngFor="let model of cfg().models">
+          {{ model.displayName }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+</ng-container>
+
+<div class="search-container">
+  <div
+    *ngIf="suggestionsDisplay && (recentSearches.length || suggestions.length)"
+    class="search-popup"
+  >
+    <ng-container *ngIf="searchBoxInput">
+      <span *ngIf="suggestions.length === 0" class="search-message">
+        <ng-container *ngIf="searching"> searching... </ng-container>
+        <ng-container *ngIf="!searching">
+          {{ cfg().noResultMessage }}
+        </ng-container>
+      </span>
+      <ng-container *ngIf="cfg().categorizeResults && suggestions.length">
+        <div
+          class="search-result"
+          *ngFor="let modelWithSuggestions of getModelsWithSuggestions()"
+        >
+          <h3 class="suggestions-heading">
+            <img
+              *ngIf="modelWithSuggestions.model.imageUrl"
+              [src]="modelWithSuggestions.model.imageUrl"
+              [alt]="modelWithSuggestions.model.displayName"
+            />
+            {{ modelWithSuggestions.model.displayName }} ({{
+              modelWithSuggestions.items.length
+            }})
+          </h3>
+          <ul>
+            <li
+              *ngFor="let suggestion of modelWithSuggestions.items"
+              (mousedown)="populateValue(suggestion, $event)"
+              class="suggestions"
+            >
+              <ng-container *ngIf="subtitleTemplate()">
+                <ng-container
+                  *ngTemplateOutlet="
+                    subtitleTemplate();
+                    context: {$implicit: suggestion}
+                  "
+                >
+                </ng-container>
+              </ng-container>
+              <p
+                *ngIf="!titleTemplate()"
+                [innerHTML]="
+                  boldString(
+                    suggestion[cfg().displayPropertyName],
+                    searchBoxInput
+                  )
+                "
+                style="display: inline"
+              ></p>
+              <ng-container *ngIf="titleTemplate()">
+                <ng-container
+                  *ngTemplateOutlet="
+                    titleTemplate();
+                    context: {$implicit: suggestion}
+                  "
+                >
+                </ng-container>
+              </ng-container>
+            </li>
+          </ul>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="!cfg().categorizeResults">
+        <div class="search-result">
+          <ul>
+            <li
+              *ngFor="let suggestion of suggestions"
+              (mousedown)="populateValue(suggestion, $event)"
+            >
+              <!--Need to call fetchModelImageUrlFromSuggestion as each suggestion can come from different model-->
+              <img
+                *ngIf="
+                  !titleTemplate() &&
+                  fetchModelImageUrlFromSuggestion(suggestion)
+                "
+                class="suggestions-categorize-false"
+                [src]="fetchModelImageUrlFromSuggestion(suggestion)"
+                style="margin-right: 5px"
+                alt="Img"
+              />
+              <ng-container *ngIf="subtitleTemplate()">
+                <ng-container
+                  *ngTemplateOutlet="
+                    subtitleTemplate();
+                    context: {$implicit: suggestion}
+                  "
+                >
+                </ng-container>
+              </ng-container>
+              <p
+                *ngIf="!titleTemplate()"
+                [innerHTML]="
+                  boldString(
+                    suggestion[cfg().displayPropertyName],
+                    searchBoxInput
+                  )
+                "
+                style="display: inline"
+              ></p>
+              <ng-container *ngIf="titleTemplate()">
+                <ng-container
+                  *ngTemplateOutlet="
+                    titleTemplate();
+                    context: {$implicit: suggestion}
+                  "
+                >
+                </ng-container>
+              </ng-container>
+            </li>
+          </ul>
+        </div>
+      </ng-container>
+    </ng-container>
+
+    <ng-container *ngIf="!cfg().hideRecentSearch && recentSearches.length > 0">
+      <div class="recent-searches">
+        <h3 class="suggestions-heading">Recent Searches</h3>
+        <ul>
+          <li
+            *ngFor="let recentSearch of recentSearches"
+            class="suggestions"
+            (mousedown)="populateValueRecentSearch(recentSearch, $event)"
+          >
+            <mat-icon
+              matPrefix
+              [className]="cfg().recentSearchIconClass"
+            ></mat-icon>
+
+            <span>&nbsp;{{ recentSearch.match }}</span>
+          </li>
+        </ul>
+      </div>
+    </ng-container>
+  </div>
+</div>

package/src/lib/search/search.component.scss

@@ -0,0 +1,339 @@
+$search-width: 86%;
+
+:host {
+  ::ng-deep .mat-form-field-wrapper {
+    padding: 0;
+    .mat-form-field-prefix {
+      margin-right: 12px;
+    }
+  }
+}
+
+.toolbar-search-input {
+  width: $search-width;
+  ::ng-deep input {
+    margin: 0;
+  }
+  ::ng-deep {
+    .mat-form-field-flex {
+      .mat-form-field-outline:first-child {
+        .mat-form-field-outline-start {
+          border-color: transparent;
+        }
+        .mat-form-field-outline-end {
+          border: none;
+          border-radius: 0;
+        }
+      }
+    }
+  }
+}
+.icomoon {
+  &.Search,
+  &.close {
+    height: 1rem;
+    width: 1rem;
+    font-size: 1rem;
+    color: #33333380;
+    padding-bottom: 4px;
+  }
+  &.close {
+    cursor: pointer;
+  }
+}
+
+.toolbar-search-select {
+  width: calc(100% - #{$search-width});
+  ::ng-deep .mat-select-arrow {
+    opacity: 0;
+  }
+  ::ng-deep {
+    .mat-select-arrow-wrapper {
+      display: inline-block;
+      width: 1px;
+    }
+    .mat-select-value-text {
+      font-size: 9px;
+    }
+    .mat-form-field-suffix .mat-icon {
+      width: 12px;
+      font-size: 14px;
+    }
+    .mat-form-field-flex {
+      .mat-form-field-outline:first-child {
+        .mat-form-field-outline-start {
+          border-color: transparent;
+          border-radius: 0;
+        }
+        .mat-form-field-outline-end {
+          border: none;
+        }
+      }
+      .mat-form-field-infix {
+        //chrome specific only.
+        -webkit-padding-before: 0.7em ;
+      }
+    }
+  }
+}
+.toolbar-search {
+  width: 515px;
+  background-color: #f7f7f7;
+  border-radius: 0 0 4px 4px;
+
+  ::ng-deep {
+    .mat-form-field-appearance-outline .mat-form-field-flex {
+      height: 39px;
+      align-items: center ;
+    }
+
+    .mat-form-field-appearance-outline .mat-form-field-wrapper {
+      margin: 0;
+    }
+  }
+
+  ::ng-deep .mat-form-field-infix {
+    height: auto ;
+  }
+}
+
+.search-container {
+  position: relative;
+  width: 515px;
+
+  .search-popup {
+    padding: 0 15px 15px;
+    margin: 0;
+    max-height: 80vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: absolute;
+    top: 100%;
+    left: 0px;
+    right: 0px;
+    z-index: 9999;
+    background-color: #fff;
+    box-shadow: 0 5px 4px #0003;
+    border-radius: 0 0 4px 4px;
+    hr {
+      border: 0;
+      border-top: 1px solid #ebebeb;
+      margin: 0;
+      position: sticky;
+      top: 0;
+      padding: 0 0 15px;
+      z-index: 1;
+    }
+    .search-message {
+      display: inline-block;
+      width: 100%;
+      text-align: center;
+      font-size: 16px;
+      padding-top: 12px;
+    }
+    .search-item-info {
+      color: #91263b;
+      text-align: center;
+      font-size: 12px;
+      margin-bottom: 15px;
+      padding-top: 12px;
+    }
+    ul {
+      padding: 0;
+      margin: 0;
+
+      li {
+        list-style: none;
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.5;
+        color: #333;
+
+        &.suggestions {
+          font-size: 15px;
+          line-height: 36px;
+          padding: 0 15px 0 44px;
+          // display: flex; causes words to join if bold and also causes ellipsis to not work
+          align-items: center;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          cursor: pointer;
+
+          &:hover {
+            background-color: #fee8e8;
+          }
+
+          svg {
+            margin-right: 5px;
+          }
+        }
+
+        &.suggestions-categorize-false:hover {
+          background-color: #fee8e8;
+        }
+      }
+    }
+    .search-result {
+      padding: 10px 0 0;
+      margin: 0 -15px;
+
+      &.no-categorize-result {
+        ul {
+          width: 100%;
+          padding: 0;
+          margin: 0 0 10px;
+
+          li {
+            font-size: 15px;
+            line-height: 36px;
+            padding: 0 15px 0 31px;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+
+            &:hover {
+              background-color: #fee8e8;
+            }
+
+            img {
+              width: 18px;
+              margin-right: 9px;
+            }
+          }
+        }
+      }
+    }
+    .suggestions-heading {
+      color: #9c9c9c;
+      font-size: 14px;
+      font-weight: normal;
+      margin: 0 0 10px 17px;
+      display: flex;
+      align-items: center;
+      position: relative;
+
+      .show-more {
+        position: absolute;
+        right: 20px;
+        color: #d1d1d1;
+        font-size: 12px;
+        cursor: pointer;
+        text-decoration: none;
+
+        :hover {
+          text-decoration: underline;
+        }
+      }
+      img {
+        width: 18px;
+        margin-right: 9px;
+      }
+    }
+    .recent-searches {
+      padding: 10px 0 0;
+      margin: 0 -15px;
+
+      ul {
+        display: inline-block;
+        width: 100%;
+        li.suggestions {
+          display: flex;
+          span {
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      .suggestions {
+        display: flex;
+      }
+
+      .suggestions-heading {
+        margin-left: 30px;
+      }
+      li.suggestions {
+        padding-left: 31px;
+      }
+    }
+  }
+}
+
+@mixin toolbar-search-mixin($width, $color) {
+  .toolbar-search-input {
+    &.mat-form-field:not(.mat-form-field-disabled) {
+      .mat-form-field-outline {
+        .mat-form-field-outline-start {
+          border-width: $width ;
+          border-color: $color ;
+        }
+        .mat-form-field-outline-end {
+          border: $width solid $color ;
+          border-left-style: none ;
+          border-right-style: none ;
+          border-top-right-radius: 0 ;
+          border-bottom-right-radius: 0 ;
+        }
+      }
+    }
+  }
+  .toolbar-search-select {
+    &.mat-form-field:not(.mat-form-field-disabled) {
+      .mat-form-field-outline {
+        .mat-form-field-outline-start {
+          border-radius: 0;
+          border-color: transparent ;
+          background-color: $color ;
+        }
+        .mat-form-field-outline-end {
+          border-width: $width ;
+          border-color: $color ;
+          background-color: $color ;
+        }
+      }
+      .mat-select {
+        color: white ;
+      }
+      .icomoon.arrow_down {
+        color: white;
+      }
+    }
+  }
+}
+
+::ng-deep {
+  .search-select.mat-select-panel {
+    margin-top: 30px;
+    margin-left: 10px;
+  }
+  .search-select .mat-option-text {
+    display: contents ;
+  }
+  .toolbar-search {
+    $size: 14px;
+    .mat-form-field-infix {
+      font-size: $size;
+    }
+    input {
+      line-height: $size;
+    }
+    .mat-form-field-outline:first-child {
+      .mat-form-field-outline-start,
+      .mat-form-field-outline-end {
+        background-color: #f1f3f4;
+      }
+    }
+    // Hover
+    &:hover {
+      @include toolbar-search-mixin(1px, #a53159);
+    }
+    &:focus-within {
+      @include toolbar-search-mixin(2px, #90003b);
+    }
+    .mat-select-arrow {
+      opacity: 0;
+    }
+  }
+}