@searchstax-inc/searchstudio-ux-angular 4.1.0 → 4.1.5

package/esm2022/lib/components/templates/searchstax-search-facet-mobile-template.mjs

@@ -0,0 +1,343 @@
+// reusable-template.component.ts
+import { Component, ViewChild } from "@angular/core";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class FacetMobileTemplateComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FacetMobileTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FacetMobileTemplateComponent, selector: "app-facet-mobile-template", viewQueries: [{ propertyName: "templateOverrideMobile", first: true, predicate: ["templateOverrideMobile"], descendants: true }], ngImport: i0, template: `
+    <ng-template
+      #templateOverrideMobile
+      let-isNotDeactivated="isNotDeactivated"
+      let-context="context"
+      let-toggleFacetGroup="toggleFacetGroup"
+      let-facetValues="facetValues"
+      let-isChecked="isChecked"
+      let-selectFacet="selectFacet"
+      let-openOverlay="openOverlay"
+      let-selectedFacetsCheckboxes="selectedFacetsCheckboxes"
+      let-unselectFacet="unselectFacet"
+      let-unselectAll="unselectAll"
+      let-facetMobileData="facetMobileData"
+      let-facetsTemplateDataMobile="facetsTemplateDataMobile"
+      let-closeOverlay="closeOverlay"
+      let-showMoreLessDesktop="showMoreLessDesktop"
+      let-showMoreLessMobile="showMoreLessMobile"
+    >
+      <div class="searchstax-facets-container-mobile">
+        <div class="searchstax-facets-pills-container">
+          <div
+            class="searchstax-facets-pill searchstax-facets-pill-filter-by"
+            (click)="openOverlay(context)"
+          >
+            <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)"
+            >
+              <div class="searchstax-facets-pill-label">
+                {{ facet.value }} ({{ facet.count }})
+              </div>
+              <div class="searchstax-facets-pill-icon-close"></div>
+            </div>
+          </div>
+          <div
+            class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
+            *ngIf="selectedFacetsCheckboxes.length"
+            (click)="unselectAll(context)"
+          >
+            <div class="searchstax-facets-pill-label">Clear Filters</div>
+          </div>
+        </div>
+        <div
+          class="searchstax-facets-mobile-overlay"
+          [class]="{
+            'searchstax-show': facetMobileData(facetsTemplateDataMobile)
+              ?.overlayOpened
+          }"
+        >
+          <div class="searchstax-facets-mobile-overlay-header">
+            <div class="searchstax-facets-mobile-overlay-header-title">
+              Filter By
+            </div>
+            <div
+              class="searchstax-search-close"
+              (click)="closeOverlay(context)"
+            ></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)
+              }"
+            >
+              <div>
+                <div
+                  class="searchstax-facet-title-container"
+                  (click)="toggleFacetGroup(facet.name, context)"
+                >
+                  <div class="searchstax-facet-title">
+                    {{ facet.label }}
+                  </div>
+                  <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
+                  >
+                    <div class="searchstax-facet-input">
+                      <input
+                        type="checkbox"
+                        class="searchstax-facet-input-checkbox"
+                        [checked]="isChecked(facetValue, context)"
+                        [attr.aria-label]="
+                          facetValue.value + ' ' + facetValue.count
+                        "
+                        [disabled]="facetValue.disabled"
+                        (click)="
+                          selectFacet(ref, $event, facetValue, true, context)
+                        "
+                      />
+                    </div>
+                    <div
+                      class="searchstax-facet-value-label"
+                      (click)="
+                        selectFacet(ref, $event, facetValue, false, context)
+                      "
+                    >
+                      {{ facetValue.value }}
+                    </div>
+                    <div
+                      class="searchstax-facet-value-count"
+                      (click)="
+                        selectFacet(ref, $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
+                        *ngIf="!facet.showingAllFacets"
+                        class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                      >
+                        more
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <button
+            class="searchstax-facets-mobile-overlay-done"
+            (click)="closeOverlay(context)"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FacetMobileTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-facet-mobile-template",
+                    template: `
+    <ng-template
+      #templateOverrideMobile
+      let-isNotDeactivated="isNotDeactivated"
+      let-context="context"
+      let-toggleFacetGroup="toggleFacetGroup"
+      let-facetValues="facetValues"
+      let-isChecked="isChecked"
+      let-selectFacet="selectFacet"
+      let-openOverlay="openOverlay"
+      let-selectedFacetsCheckboxes="selectedFacetsCheckboxes"
+      let-unselectFacet="unselectFacet"
+      let-unselectAll="unselectAll"
+      let-facetMobileData="facetMobileData"
+      let-facetsTemplateDataMobile="facetsTemplateDataMobile"
+      let-closeOverlay="closeOverlay"
+      let-showMoreLessDesktop="showMoreLessDesktop"
+      let-showMoreLessMobile="showMoreLessMobile"
+    >
+      <div class="searchstax-facets-container-mobile">
+        <div class="searchstax-facets-pills-container">
+          <div
+            class="searchstax-facets-pill searchstax-facets-pill-filter-by"
+            (click)="openOverlay(context)"
+          >
+            <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)"
+            >
+              <div class="searchstax-facets-pill-label">
+                {{ facet.value }} ({{ facet.count }})
+              </div>
+              <div class="searchstax-facets-pill-icon-close"></div>
+            </div>
+          </div>
+          <div
+            class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
+            *ngIf="selectedFacetsCheckboxes.length"
+            (click)="unselectAll(context)"
+          >
+            <div class="searchstax-facets-pill-label">Clear Filters</div>
+          </div>
+        </div>
+        <div
+          class="searchstax-facets-mobile-overlay"
+          [class]="{
+            'searchstax-show': facetMobileData(facetsTemplateDataMobile)
+              ?.overlayOpened
+          }"
+        >
+          <div class="searchstax-facets-mobile-overlay-header">
+            <div class="searchstax-facets-mobile-overlay-header-title">
+              Filter By
+            </div>
+            <div
+              class="searchstax-search-close"
+              (click)="closeOverlay(context)"
+            ></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)
+              }"
+            >
+              <div>
+                <div
+                  class="searchstax-facet-title-container"
+                  (click)="toggleFacetGroup(facet.name, context)"
+                >
+                  <div class="searchstax-facet-title">
+                    {{ facet.label }}
+                  </div>
+                  <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
+                  >
+                    <div class="searchstax-facet-input">
+                      <input
+                        type="checkbox"
+                        class="searchstax-facet-input-checkbox"
+                        [checked]="isChecked(facetValue, context)"
+                        [attr.aria-label]="
+                          facetValue.value + ' ' + facetValue.count
+                        "
+                        [disabled]="facetValue.disabled"
+                        (click)="
+                          selectFacet(ref, $event, facetValue, true, context)
+                        "
+                      />
+                    </div>
+                    <div
+                      class="searchstax-facet-value-label"
+                      (click)="
+                        selectFacet(ref, $event, facetValue, false, context)
+                      "
+                    >
+                      {{ facetValue.value }}
+                    </div>
+                    <div
+                      class="searchstax-facet-value-count"
+                      (click)="
+                        selectFacet(ref, $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
+                        *ngIf="!facet.showingAllFacets"
+                        class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                      >
+                        more
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <button
+            class="searchstax-facets-mobile-overlay-done"
+            (click)="closeOverlay(context)"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { templateOverrideMobile: [{
+                type: ViewChild,
+                args: ["templateOverrideMobile"]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoc3RheC1zZWFyY2gtZmFjZXQtbW9iaWxlLXRlbXBsYXRlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2VhcmNoc3RheC1pbmMvc2VhcmNoc3R1ZGlvLXV4LWFuZ3VsYXIvc3JjL2xpYi9jb21wb25lbnRzL3RlbXBsYXRlcy9zZWFyY2hzdGF4LXNlYXJjaC1mYWNldC1tb2JpbGUtdGVtcGxhdGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsaUNBQWlDO0FBQ2pDLE9BQU8sRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFlLE1BQU0sZUFBZSxDQUFDOzs7QUF3S2xFLE1BQU0sT0FBTyw0QkFBNEI7K0dBQTVCLDRCQUE0QjttR0FBNUIsNEJBQTRCLG1NQXBLN0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtLVDs7NEZBRVUsNEJBQTRCO2tCQXRLeEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsMkJBQTJCO29CQUNyQyxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtLVDtpQkFDRjs4QkFHQyxzQkFBc0I7c0JBRHJCLFNBQVM7dUJBQUMsd0JBQXdCIiwic291cmNlc0NvbnRlbnQiOlsiLy8gcmV1c2FibGUtdGVtcGxhdGUuY29tcG9uZW50LnRzXG5pbXBvcnQgeyBDb21wb25lbnQsIFZpZXdDaGlsZCwgVGVtcGxhdGVSZWYgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwiYXBwLWZhY2V0LW1vYmlsZS10ZW1wbGF0ZVwiLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxuZy10ZW1wbGF0ZVxuICAgICAgI3RlbXBsYXRlT3ZlcnJpZGVNb2JpbGVcbiAgICAgIGxldC1pc05vdERlYWN0aXZhdGVkPVwiaXNOb3REZWFjdGl2YXRlZFwiXG4gICAgICBsZXQtY29udGV4dD1cImNvbnRleHRcIlxuICAgICAgbGV0LXRvZ2dsZUZhY2V0R3JvdXA9XCJ0b2dnbGVGYWNldEdyb3VwXCJcbiAgICAgIGxldC1mYWNldFZhbHVlcz1cImZhY2V0VmFsdWVzXCJcbiAgICAgIGxldC1pc0NoZWNrZWQ9XCJpc0NoZWNrZWRcIlxuICAgICAgbGV0LXNlbGVjdEZhY2V0PVwic2VsZWN0RmFjZXRcIlxuICAgICAgbGV0LW9wZW5PdmVybGF5PVwib3Blbk92ZXJsYXlcIlxuICAgICAgbGV0LXNlbGVjdGVkRmFjZXRzQ2hlY2tib3hlcz1cInNlbGVjdGVkRmFjZXRzQ2hlY2tib3hlc1wiXG4gICAgICBsZXQtdW5zZWxlY3RGYWNldD1cInVuc2VsZWN0RmFjZXRcIlxuICAgICAgbGV0LXVuc2VsZWN0QWxsPVwidW5zZWxlY3RBbGxcIlxuICAgICAgbGV0LWZhY2V0TW9iaWxlRGF0YT1cImZhY2V0TW9iaWxlRGF0YVwiXG4gICAgICBsZXQtZmFjZXRzVGVtcGxhdGVEYXRhTW9iaWxlPVwiZmFjZXRzVGVtcGxhdGVEYXRhTW9iaWxlXCJcbiAgICAgIGxldC1jbG9zZU92ZXJsYXk9XCJjbG9zZU92ZXJsYXlcIlxuICAgICAgbGV0LXNob3dNb3JlTGVzc0Rlc2t0b3A9XCJzaG93TW9yZUxlc3NEZXNrdG9wXCJcbiAgICAgIGxldC1zaG93TW9yZUxlc3NNb2JpbGU9XCJzaG93TW9yZUxlc3NNb2JpbGVcIlxuICAgID5cbiAgICAgIDxkaXYgY2xhc3M9XCJzZWFyY2hzdGF4LWZhY2V0cy1jb250YWluZXItbW9iaWxlXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzZWFyY2hzdGF4LWZhY2V0cy1waWxscy1jb250YWluZXJcIj5cbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjbGFzcz1cInNlYXJjaHN0YXgtZmFjZXRzLXBpbGwgc2VhcmNoc3RheC1mYWNldHMtcGlsbC1maWx0ZXItYnlcIlxuICAgICAgICAgICAgKGNsaWNrKT1cIm9wZW5PdmVybGF5KGNvbnRleHQpXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2VhcmNoc3RheC1mYWNldHMtcGlsbC1sYWJlbFwiPkZpbHRlciBCeTwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJzZWFyY2hzdGF4LWZhY2V0cy1waWxscy1zZWxlY3RlZFwiPlxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICBjbGFzcz1cInNlYXJjaHN0YXgtZmFjZXRzLXBpbGwgc2VhcmNoc3RheC1mYWNldHMtcGlsbC1mYWNldHNcIlxuICAgICAgICAgICAgICAqbmdGb3I9XCJsZXQgZmFjZXQgb2Ygc2VsZWN0ZWRGYWNldHNDaGVja2JveGVzXCJcbiAgICAgICAgICAgICAgKGNsaWNrKT1cInVuc2VsZWN0RmFjZXQoZmFjZXQsIGNvbnRleHQpXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNlYXJjaHN0YXgtZmFjZXRzLXBpbGwtbGFiZWxcIj5cbiAgICAgICAgICAgICAgICB7eyBmYWNldC52YWx1ZSB9fSAoe3sgZmFjZXQuY291bnQgfX0pXG4gICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2VhcmNoc3RheC1mYWNldHMtcGlsbC1pY29uLWNsb3NlXCI+PC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjbGFzcz1cInNlYXJjaHN0YXgtZmFjZXRzLXBpbGwgc2VhcmNoc3RheC1jbGVhci1maWx0ZXJzIHNlYXJjaHN0YXgtZmFjZXRzLXBpbGwtY2xlYXItYWxsXCJcbiAgICAgICAgICAgICpuZ0lmPVwic2VsZWN0ZWRGYWNldHNDaGVja2JveGVzLmxlbmd0aFwiXG4gICAgICAgICAgICAoY2xpY2spPVwidW5zZWxlY3RBbGwoY29udGV4dClcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzZWFyY2hzdGF4LWZhY2V0cy1waWxsLWxhYmVsXCI+Q2xlYXIgRmlsdGVyczwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNsYXNzPVwic2VhcmNoc3RheC1mYWNldHMtbW9iaWxlLW92ZXJsYXlcIlxuICAgICAgICAgIFtjbGFzc109XCJ7XG4gICAgICAgICAgICAnc2VhcmNoc3RheC1zaG93JzogZmFjZXRNb2JpbGVEYXRhKGZhY2V0c1RlbXBsYXRlRGF0YU1vYmlsZSlcbiAgICAgICAgICAgICAgPy5vdmVybGF5T3BlbmVkXG4gICAgICAgICAgfVwiXG4gICAgICAgID5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwic2VhcmNoc3RheC1mYWNldHMtbW9iaWxlLW92ZXJsYXktaGVhZGVyXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2VhcmNoc3RheC1mYWNldHMtbW9iaWxlLW92ZXJsYXktaGVhZGVyLXRpdGxlXCI+XG4gICAgICAgICAgICAgIEZpbHRlciBCeVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgIGNsYXNzPVwic2VhcmNoc3RheC1zZWFyY2gtY2xvc2VcIlxuICAgICAgICAgICAgICAoY2xpY2spPVwiY2xvc2VPdmVybGF5KGNvbnRleHQpXCJcbiAgICAgICAgICAgID48L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwic2VhcmNoc3RheC1mYWNldHMtY29udGFpbmVyLW1vYmlsZVwiPlxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAqbmdGb3I9XCJsZXQgZmFjZXQgb2YgZmFjZXRzVGVtcGxhdGVEYXRhTW9iaWxlPy5mYWNldHNcIlxuICAgICAgICAgICAgICBjbGFzcz1cInNlYXJjaHN0YXgtZmFjZXQtY29udGFpbmVyXCJcbiAgICAgICAgICAgICAgW2NsYXNzXT1cIntcbiAgICAgICAgICAgICAgICBhY3RpdmU6IGlzTm90RGVhY3RpdmF0ZWQoZmFjZXQubmFtZSwgY29udGV4dClcbiAgICAgICAgICAgICAgfVwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJzZWFyY2hzdGF4LWZhY2V0LXRpdGxlLWNvbnRhaW5lclwiXG4gICAgICAgICAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlRmFjZXRHcm91cChmYWNldC5uYW1lLCBjb250ZXh0KVwiXG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNlYXJjaHN0YXgtZmFjZXQtdGl0bGVcIj5cbiAgICAgICAgICAgICAgICAgICAge3sgZmFjZXQubGFiZWwgfX1cbiAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNlYXJjaHN0YXgtZmFjZXQtdGl0bGUtYXJyb3cgYWN0aXZlXCI+PC9kaXY+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJzZWFyY2hzdGF4LWZhY2V0LXZhbHVlcy1jb250YWluZXJcIlxuICAgICAgICAgICAgICAgICAgYXJpYS1saXZlPVwicG9saXRlXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICAgICpuZ0Zvcj1cImxldCBmYWNldFZhbHVlIG9mIGZhY2V0VmFsdWVzKGZhY2V0KTsgaW5kZXggYXMga2V5XCJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJzZWFyY2hzdGF4LWZhY2V0LXZhbHVlLWNvbnRhaW5lclwiXG4gICAgICAgICAgICAgICAgICAgIFtjbGFzc109XCJ7XG4gICAgICAgICAgICAgICAgICAgICAgJ3NlYXJjaHN0YXgtZmFjZXQtdmFsdWUtZGlzYWJsZWQnOiBmYWNldFZhbHVlLmRpc2FibGVkXG4gICAgICAgICAgICAgICAgICAgIH1cIlxuICAgICAgICAgICAgICAgICAgICAjcmVmXG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzZWFyY2hzdGF4LWZhY2V0LWlucHV0XCI+XG4gICAgICAgICAgICAgICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICAgICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJzZWFyY2hzdGF4LWZhY2V0LWlucHV0LWNoZWNrYm94XCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtjaGVja2VkXT1cImlzQ2hlY2tlZChmYWNldFZhbHVlLCBjb250ZXh0KVwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICBmYWNldFZhbHVlLnZhbHVlICsgJyAnICsgZmFjZXRWYWx1ZS5jb3VudFxuICAgICAgICAgICAgICAgICAgICAgICAgXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtkaXNhYmxlZF09XCJmYWNldFZhbHVlLmRpc2FibGVkXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgc2VsZWN0RmFjZXQocmVmLCAkZXZlbnQsIGZhY2V0VmFsdWUsIHRydWUsIGNvbnRleHQpXG4gICAgICAgICAgICAgICAgICAgICAgICBcIlxuICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJzZWFyY2hzdGF4LWZhY2V0LXZhbHVlLWxhYmVsXCJcbiAgICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwiXG4gICAgICAgICAgICAgICAgICAgICAgICBzZWxlY3RGYWNldChyZWYsICRldmVudCwgZmFjZXRWYWx1ZSwgZmFsc2UsIGNvbnRleHQpXG4gICAgICAgICAgICAgICAgICAgICAgXCJcbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgIHt7IGZhY2V0VmFsdWUudmFsdWUgfX1cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgICBjbGFzcz1cInNlYXJjaHN0YXgtZmFjZXQtdmFsdWUtY291bnRcIlxuICAgICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJcbiAgICAgICAgICAgICAgICAgICAgICAgIHNlbGVjdEZhY2V0KHJlZiwgJGV2ZW50LCBmYWNldFZhbHVlLCBmYWxzZSwgY29udGV4dClcbiAgICAgICAgICAgICAgICAgICAgICBcIlxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgKHt7IGZhY2V0VmFsdWUuY291bnQgfX0pXG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICAgIGNsYXNzPVwic2VhcmNoc3RheC1mYWNldC1zaG93LW1vcmUtY29udGFpbmVyXCJcbiAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCJmYWNldC5oYXNNb3JlRmFjZXRzXCJcbiAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwic2VhcmNoc3RheC1mYWNldC1zaG93LW1vcmUtY29udGFpbmVyXCJcbiAgICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwic2hvd01vcmVMZXNzTW9iaWxlKCRldmVudCwgZmFjZXQsIGNvbnRleHQpXCJcbiAgICAgICAgICAgICAgICAgICAgICAoa2V5dXAuZW50ZXIpPVwic2hvd01vcmVMZXNzTW9iaWxlKCRldmVudCwgZmFjZXQsIGNvbnRleHQpXCJcbiAgICAgICAgICAgICAgICAgICAgICAoa2V5dXAuc3BhY2UpPVwic2hvd01vcmVMZXNzTW9iaWxlKCRldmVudCwgZmFjZXQsIGNvbnRleHQpXCJcbiAgICAgICAgICAgICAgICAgICAgICB0YWJpbmRleD1cIjBcIlxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCJmYWNldC5zaG93aW5nQWxsRmFjZXRzXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwic2VhcmNoc3RheC1mYWNldC1zaG93LWxlc3MtYnV0dG9uIHNlYXJjaHN0YXgtZmFjZXQtc2hvdy1idXR0b25cIlxuICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgIGxlc3NcbiAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICAgICAgICAqbmdJZj1cIiFmYWNldC5zaG93aW5nQWxsRmFjZXRzXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwic2VhcmNoc3RheC1mYWNldC1zaG93LW1vcmUtYnV0dG9uIHNlYXJjaHN0YXgtZmFjZXQtc2hvdy1idXR0b25cIlxuICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgIG1vcmVcbiAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICBjbGFzcz1cInNlYXJjaHN0YXgtZmFjZXRzLW1vYmlsZS1vdmVybGF5LWRvbmVcIlxuICAgICAgICAgICAgKGNsaWNrKT1cImNsb3NlT3ZlcmxheShjb250ZXh0KVwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAgRG9uZVxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvbmctdGVtcGxhdGU+XG4gIGAsXG59KVxuZXhwb3J0IGNsYXNzIEZhY2V0TW9iaWxlVGVtcGxhdGVDb21wb25lbnQge1xuICBAVmlld0NoaWxkKFwidGVtcGxhdGVPdmVycmlkZU1vYmlsZVwiKVxuICB0ZW1wbGF0ZU92ZXJyaWRlTW9iaWxlITogVGVtcGxhdGVSZWY8YW55Pjtcbn1cbiJdfQ==

package/esm2022/lib/components/templates/searchstax-search-input-template.mjs

@@ -0,0 +1,126 @@
+// reusable-template.component.ts
+import { Component, ViewChild } from "@angular/core";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "../searchstax-search-location/searchstax-search-location.component";
+export class InputTemplateComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputTemplateComponent, selector: "app-input-template", viewQueries: [{ propertyName: "inputTemplate", first: true, predicate: ["inputTemplate"], descendants: true }], ngImport: i0, template: `
+    <ng-template
+      #inputTemplate
+      let-suggestions="suggestions"
+      let-onMouseLeave="onMouseLeave"
+      let-onMouseOver="onMouseOver"
+      let-onMouseClick="onMouseClick"
+      let-context="context"
+      let-locationWidgetConfig="locationWidgetConfig"
+    >
+      <div class="searchstax-search-input-wrapper">
+        <input
+          type="text"
+          id="searchstax-search-input"
+          class="searchstax-search-input"
+          placeholder="SEARCH FOR..."
+          aria-label="search"
+        />
+        <div
+          class="searchstax-autosuggest-container"
+          [ngClass]="{ hidden: suggestions.length === 0 }"
+          (mouseleave)="onMouseLeave(context)"
+        >
+          <div
+            class="searchstax-autosuggest-item"
+            *ngFor="let suggestion of suggestions"
+          >
+            <div
+              class="searchstax-autosuggest-item-term-container"
+              [innerHtml]="suggestion.term"
+              (mouseover)="onMouseOver(suggestion, context)"
+              tabindex="0"
+              (click)="onMouseClick($event, context)"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <app-searchstax-search-location
+        [locationDecode]="locationWidgetConfig.locationDecode"
+        [locationDecodeCoordinatesToAddress]="
+          locationWidgetConfig.locationDecodeCoordinatesToAddress
+        "
+        [locationSearchEnabled]="locationWidgetConfig.locationSearchEnabled"
+        [locationValuesOverride]="locationWidgetConfig.locationValuesOverride"
+      >
+      </app-searchstax-search-location>
+      <button
+        class="searchstax-spinner-icon"
+        id="searchstax-search-input-action-button"
+        role="button"
+        aria-label="search"
+      ></button>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.SearchstaxSearchLocationWidget, selector: "app-searchstax-search-location", inputs: ["templateOverride", "locationSearchEnabled", "locationValuesOverride", "locationDecode", "locationDecodeCoordinatesToAddress"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-input-template",
+                    template: `
+    <ng-template
+      #inputTemplate
+      let-suggestions="suggestions"
+      let-onMouseLeave="onMouseLeave"
+      let-onMouseOver="onMouseOver"
+      let-onMouseClick="onMouseClick"
+      let-context="context"
+      let-locationWidgetConfig="locationWidgetConfig"
+    >
+      <div class="searchstax-search-input-wrapper">
+        <input
+          type="text"
+          id="searchstax-search-input"
+          class="searchstax-search-input"
+          placeholder="SEARCH FOR..."
+          aria-label="search"
+        />
+        <div
+          class="searchstax-autosuggest-container"
+          [ngClass]="{ hidden: suggestions.length === 0 }"
+          (mouseleave)="onMouseLeave(context)"
+        >
+          <div
+            class="searchstax-autosuggest-item"
+            *ngFor="let suggestion of suggestions"
+          >
+            <div
+              class="searchstax-autosuggest-item-term-container"
+              [innerHtml]="suggestion.term"
+              (mouseover)="onMouseOver(suggestion, context)"
+              tabindex="0"
+              (click)="onMouseClick($event, context)"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <app-searchstax-search-location
+        [locationDecode]="locationWidgetConfig.locationDecode"
+        [locationDecodeCoordinatesToAddress]="
+          locationWidgetConfig.locationDecodeCoordinatesToAddress
+        "
+        [locationSearchEnabled]="locationWidgetConfig.locationSearchEnabled"
+        [locationValuesOverride]="locationWidgetConfig.locationValuesOverride"
+      >
+      </app-searchstax-search-location>
+      <button
+        class="searchstax-spinner-icon"
+        id="searchstax-search-input-action-button"
+        role="button"
+        aria-label="search"
+      ></button>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { inputTemplate: [{
+                type: ViewChild,
+                args: ["inputTemplate"]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoc3RheC1zZWFyY2gtaW5wdXQtdGVtcGxhdGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zZWFyY2hzdGF4LWluYy9zZWFyY2hzdHVkaW8tdXgtYW5ndWxhci9zcmMvbGliL2NvbXBvbmVudHMvdGVtcGxhdGVzL3NlYXJjaHN0YXgtc2VhcmNoLWlucHV0LXRlbXBsYXRlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGlDQUFpQztBQUNqQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBZSxNQUFNLGVBQWUsQ0FBQzs7OztBQTJEbEUsTUFBTSxPQUFPLHNCQUFzQjsrR0FBdEIsc0JBQXNCO21HQUF0QixzQkFBc0IsMEtBdkR2Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FxRFQ7OzRGQUVVLHNCQUFzQjtrQkF6RGxDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtvQkFDOUIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXFEVDtpQkFDRjs4QkFFNkIsYUFBYTtzQkFBeEMsU0FBUzt1QkFBQyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiLy8gcmV1c2FibGUtdGVtcGxhdGUuY29tcG9uZW50LnRzXG5pbXBvcnQgeyBDb21wb25lbnQsIFZpZXdDaGlsZCwgVGVtcGxhdGVSZWYgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwiYXBwLWlucHV0LXRlbXBsYXRlXCIsXG4gIHRlbXBsYXRlOiBgXG4gICAgPG5nLXRlbXBsYXRlXG4gICAgICAjaW5wdXRUZW1wbGF0ZVxuICAgICAgbGV0LXN1Z2dlc3Rpb25zPVwic3VnZ2VzdGlvbnNcIlxuICAgICAgbGV0LW9uTW91c2VMZWF2ZT1cIm9uTW91c2VMZWF2ZVwiXG4gICAgICBsZXQtb25Nb3VzZU92ZXI9XCJvbk1vdXNlT3ZlclwiXG4gICAgICBsZXQtb25Nb3VzZUNsaWNrPVwib25Nb3VzZUNsaWNrXCJcbiAgICAgIGxldC1jb250ZXh0PVwiY29udGV4dFwiXG4gICAgICBsZXQtbG9jYXRpb25XaWRnZXRDb25maWc9XCJsb2NhdGlvbldpZGdldENvbmZpZ1wiXG4gICAgPlxuICAgICAgPGRpdiBjbGFzcz1cInNlYXJjaHN0YXgtc2VhcmNoLWlucHV0LXdyYXBwZXJcIj5cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICAgIGlkPVwic2VhcmNoc3RheC1zZWFyY2gtaW5wdXRcIlxuICAgICAgICAgIGNsYXNzPVwic2VhcmNoc3RheC1zZWFyY2gtaW5wdXRcIlxuICAgICAgICAgIHBsYWNlaG9sZGVyPVwiU0VBUkNIIEZPUi4uLlwiXG4gICAgICAgICAgYXJpYS1sYWJlbD1cInNlYXJjaFwiXG4gICAgICAgIC8+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzcz1cInNlYXJjaHN0YXgtYXV0b3N1Z2dlc3QtY29udGFpbmVyXCJcbiAgICAgICAgICBbbmdDbGFzc109XCJ7IGhpZGRlbjogc3VnZ2VzdGlvbnMubGVuZ3RoID09PSAwIH1cIlxuICAgICAgICAgIChtb3VzZWxlYXZlKT1cIm9uTW91c2VMZWF2ZShjb250ZXh0KVwiXG4gICAgICAgID5cbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjbGFzcz1cInNlYXJjaHN0YXgtYXV0b3N1Z2dlc3QtaXRlbVwiXG4gICAgICAgICAgICAqbmdGb3I9XCJsZXQgc3VnZ2VzdGlvbiBvZiBzdWdnZXN0aW9uc1wiXG4gICAgICAgICAgPlxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICBjbGFzcz1cInNlYXJjaHN0YXgtYXV0b3N1Z2dlc3QtaXRlbS10ZXJtLWNvbnRhaW5lclwiXG4gICAgICAgICAgICAgIFtpbm5lckh0bWxdPVwic3VnZ2VzdGlvbi50ZXJtXCJcbiAgICAgICAgICAgICAgKG1vdXNlb3Zlcik9XCJvbk1vdXNlT3ZlcihzdWdnZXN0aW9uLCBjb250ZXh0KVwiXG4gICAgICAgICAgICAgIHRhYmluZGV4PVwiMFwiXG4gICAgICAgICAgICAgIChjbGljayk9XCJvbk1vdXNlQ2xpY2soJGV2ZW50LCBjb250ZXh0KVwiXG4gICAgICAgICAgICA+PC9kaXY+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8YXBwLXNlYXJjaHN0YXgtc2VhcmNoLWxvY2F0aW9uXG4gICAgICAgIFtsb2NhdGlvbkRlY29kZV09XCJsb2NhdGlvbldpZGdldENvbmZpZy5sb2NhdGlvbkRlY29kZVwiXG4gICAgICAgIFtsb2NhdGlvbkRlY29kZUNvb3JkaW5hdGVzVG9BZGRyZXNzXT1cIlxuICAgICAgICAgIGxvY2F0aW9uV2lkZ2V0Q29uZmlnLmxvY2F0aW9uRGVjb2RlQ29vcmRpbmF0ZXNUb0FkZHJlc3NcbiAgICAgICAgXCJcbiAgICAgICAgW2xvY2F0aW9uU2VhcmNoRW5hYmxlZF09XCJsb2NhdGlvbldpZGdldENvbmZpZy5sb2NhdGlvblNlYXJjaEVuYWJsZWRcIlxuICAgICAgICBbbG9jYXRpb25WYWx1ZXNPdmVycmlkZV09XCJsb2NhdGlvbldpZGdldENvbmZpZy5sb2NhdGlvblZhbHVlc092ZXJyaWRlXCJcbiAgICAgID5cbiAgICAgIDwvYXBwLXNlYXJjaHN0YXgtc2VhcmNoLWxvY2F0aW9uPlxuICAgICAgPGJ1dHRvblxuICAgICAgICBjbGFzcz1cInNlYXJjaHN0YXgtc3Bpbm5lci1pY29uXCJcbiAgICAgICAgaWQ9XCJzZWFyY2hzdGF4LXNlYXJjaC1pbnB1dC1hY3Rpb24tYnV0dG9uXCJcbiAgICAgICAgcm9sZT1cImJ1dHRvblwiXG4gICAgICAgIGFyaWEtbGFiZWw9XCJzZWFyY2hcIlxuICAgICAgPjwvYnV0dG9uPlxuICAgIDwvbmctdGVtcGxhdGU+XG4gIGAsXG59KVxuZXhwb3J0IGNsYXNzIElucHV0VGVtcGxhdGVDb21wb25lbnQge1xuICBAVmlld0NoaWxkKFwiaW5wdXRUZW1wbGF0ZVwiKSBpbnB1dFRlbXBsYXRlITogVGVtcGxhdGVSZWY8YW55Pjtcbn1cbiJdfQ==

package/esm2022/lib/components/templates/searchstax-search-location-template.mjs

@@ -0,0 +1,152 @@
+// reusable-template.component.ts
+import { Component, ViewChild } from "@angular/core";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+export class LocationTemplateComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocationTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LocationTemplateComponent, selector: "app-location-template", viewQueries: [{ propertyName: "locationTemplate", first: true, predicate: ["locationTemplate"], descendants: true }], ngImport: i0, template: `
+    <ng-template
+      #locationTemplate
+      let-context="context"
+      let-locationData="locationData"
+      let-inputValue="inputValue"
+      let-selectValue="selectValue"
+      let-radiusChange="radiusChange"
+      let-inputChange="inputChange"
+      let-locationBlur="locationBlur"
+      let-locationError="locationError"
+      let-getCurrentLocation="getCurrentLocation"
+    >
+      <div
+        class="searchstax-location-input-container"
+        data-test-id="searchstax-location-input-container"
+        *ngIf="locationData"
+      >
+        <div class="searchstax-location-input-wrapper">
+          <span class="searchstax-location-input-label">NEAR</span>
+          <div class="searchstax-location-input-wrapper-inner">
+            <input
+              type="text"
+              id="searchstax-location-input"
+              class="searchstax-location-input"
+              [ngClass]="{
+                'searchstax-input-location-error': locationError
+              }"
+              placeholder="Zip, Postal Code or City..."
+              aria-label="Search Location Input"
+              data-test-id="searchstax-location-input"
+              [value]="inputValue"
+              (change)="inputChange($event, context)"
+              (blur)="locationBlur(context)"
+            />
+            <button
+              (click)="getCurrentLocation(context)"
+              class="searchstax-get-current-location-button"
+            >
+              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"
+            >
+              {{ value.label }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocationTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-location-template",
+                    template: `
+    <ng-template
+      #locationTemplate
+      let-context="context"
+      let-locationData="locationData"
+      let-inputValue="inputValue"
+      let-selectValue="selectValue"
+      let-radiusChange="radiusChange"
+      let-inputChange="inputChange"
+      let-locationBlur="locationBlur"
+      let-locationError="locationError"
+      let-getCurrentLocation="getCurrentLocation"
+    >
+      <div
+        class="searchstax-location-input-container"
+        data-test-id="searchstax-location-input-container"
+        *ngIf="locationData"
+      >
+        <div class="searchstax-location-input-wrapper">
+          <span class="searchstax-location-input-label">NEAR</span>
+          <div class="searchstax-location-input-wrapper-inner">
+            <input
+              type="text"
+              id="searchstax-location-input"
+              class="searchstax-location-input"
+              [ngClass]="{
+                'searchstax-input-location-error': locationError
+              }"
+              placeholder="Zip, Postal Code or City..."
+              aria-label="Search Location Input"
+              data-test-id="searchstax-location-input"
+              [value]="inputValue"
+              (change)="inputChange($event, context)"
+              (blur)="locationBlur(context)"
+            />
+            <button
+              (click)="getCurrentLocation(context)"
+              class="searchstax-get-current-location-button"
+            >
+              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"
+            >
+              {{ value.label }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { locationTemplate: [{
+                type: ViewChild,
+                args: ["locationTemplate"]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoc3RheC1zZWFyY2gtbG9jYXRpb24tdGVtcGxhdGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zZWFyY2hzdGF4LWluYy9zZWFyY2hzdHVkaW8tdXgtYW5ndWxhci9zcmMvbGliL2NvbXBvbmVudHMvdGVtcGxhdGVzL3NlYXJjaHN0YXgtc2VhcmNoLWxvY2F0aW9uLXRlbXBsYXRlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGlDQUFpQztBQUNqQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBZSxNQUFNLGVBQWUsQ0FBQzs7OztBQXdFbEUsTUFBTSxPQUFPLHlCQUF5QjsrR0FBekIseUJBQXlCO21HQUF6Qix5QkFBeUIsbUxBcEUxQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBa0VUOzs0RkFFVSx5QkFBeUI7a0JBdEVyQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx1QkFBdUI7b0JBQ2pDLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBa0VUO2lCQUNGOzhCQUVnQyxnQkFBZ0I7c0JBQTlDLFNBQVM7dUJBQUMsa0JBQWtCIiwic291cmNlc0NvbnRlbnQiOlsiLy8gcmV1c2FibGUtdGVtcGxhdGUuY29tcG9uZW50LnRzXG5pbXBvcnQgeyBDb21wb25lbnQsIFZpZXdDaGlsZCwgVGVtcGxhdGVSZWYgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwiYXBwLWxvY2F0aW9uLXRlbXBsYXRlXCIsXG4gIHRlbXBsYXRlOiBgXG4gICAgPG5nLXRlbXBsYXRlXG4gICAgICAjbG9jYXRpb25UZW1wbGF0ZVxuICAgICAgbGV0LWNvbnRleHQ9XCJjb250ZXh0XCJcbiAgICAgIGxldC1sb2NhdGlvbkRhdGE9XCJsb2NhdGlvbkRhdGFcIlxuICAgICAgbGV0LWlucHV0VmFsdWU9XCJpbnB1dFZhbHVlXCJcbiAgICAgIGxldC1zZWxlY3RWYWx1ZT1cInNlbGVjdFZhbHVlXCJcbiAgICAgIGxldC1yYWRpdXNDaGFuZ2U9XCJyYWRpdXNDaGFuZ2VcIlxuICAgICAgbGV0LWlucHV0Q2hhbmdlPVwiaW5wdXRDaGFuZ2VcIlxuICAgICAgbGV0LWxvY2F0aW9uQmx1cj1cImxvY2F0aW9uQmx1clwiXG4gICAgICBsZXQtbG9jYXRpb25FcnJvcj1cImxvY2F0aW9uRXJyb3JcIlxuICAgICAgbGV0LWdldEN1cnJlbnRMb2NhdGlvbj1cImdldEN1cnJlbnRMb2NhdGlvblwiXG4gICAgPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cInNlYXJjaHN0YXgtbG9jYXRpb24taW5wdXQtY29udGFpbmVyXCJcbiAgICAgICAgZGF0YS10ZXN0LWlkPVwic2VhcmNoc3RheC1sb2NhdGlvbi1pbnB1dC1jb250YWluZXJcIlxuICAgICAgICAqbmdJZj1cImxvY2F0aW9uRGF0YVwiXG4gICAgICA+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzZWFyY2hzdGF4LWxvY2F0aW9uLWlucHV0LXdyYXBwZXJcIj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInNlYXJjaHN0YXgtbG9jYXRpb24taW5wdXQtbGFiZWxcIj5ORUFSPC9zcGFuPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJzZWFyY2hzdGF4LWxvY2F0aW9uLWlucHV0LXdyYXBwZXItaW5uZXJcIj5cbiAgICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgICAgICAgIGlkPVwic2VhcmNoc3RheC1sb2NhdGlvbi1pbnB1dFwiXG4gICAgICAgICAgICAgIGNsYXNzPVwic2VhcmNoc3RheC1sb2NhdGlvbi1pbnB1dFwiXG4gICAgICAgICAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgICAgICAgICAnc2VhcmNoc3RheC1pbnB1dC1sb2NhdGlvbi1lcnJvcic6IGxvY2F0aW9uRXJyb3JcbiAgICAgICAgICAgICAgfVwiXG4gICAgICAgICAgICAgIHBsYWNlaG9sZGVyPVwiWmlwLCBQb3N0YWwgQ29kZSBvciBDaXR5Li4uXCJcbiAgICAgICAgICAgICAgYXJpYS1sYWJlbD1cIlNlYXJjaCBMb2NhdGlvbiBJbnB1dFwiXG4gICAgICAgICAgICAgIGRhdGEtdGVzdC1pZD1cInNlYXJjaHN0YXgtbG9jYXRpb24taW5wdXRcIlxuICAgICAgICAgICAgICBbdmFsdWVdPVwiaW5wdXRWYWx1ZVwiXG4gICAgICAgICAgICAgIChjaGFuZ2UpPVwiaW5wdXRDaGFuZ2UoJGV2ZW50LCBjb250ZXh0KVwiXG4gICAgICAgICAgICAgIChibHVyKT1cImxvY2F0aW9uQmx1cihjb250ZXh0KVwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAoY2xpY2spPVwiZ2V0Q3VycmVudExvY2F0aW9uKGNvbnRleHQpXCJcbiAgICAgICAgICAgICAgY2xhc3M9XCJzZWFyY2hzdGF4LWdldC1jdXJyZW50LWxvY2F0aW9uLWJ1dHRvblwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIFVzZSBteSBjdXJyZW50IGxvY2F0aW9uXG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8c3BhblxuICAgICAgICAgICAgKm5nSWY9XCJsb2NhdGlvbkRhdGEuc2hvdWxkU2hvd0xvY2F0aW9uRGlzdGFuY2VEcm9wZG93blwiXG4gICAgICAgICAgICBjbGFzcz1cInNlYXJjaHN0YXgtbG9jYXRpb24taW5wdXQtbGFiZWxcIlxuICAgICAgICAgICAgPldJVEhJTjwvc3BhblxuICAgICAgICAgID5cbiAgICAgICAgICA8c2VsZWN0XG4gICAgICAgICAgICAqbmdJZj1cImxvY2F0aW9uRGF0YS5zaG91bGRTaG93TG9jYXRpb25EaXN0YW5jZURyb3Bkb3duXCJcbiAgICAgICAgICAgIGlkPVwic2VhcmNoc3RheC1sb2NhdGlvbi1yYWRpdXMtc2VsZWN0XCJcbiAgICAgICAgICAgIGNsYXNzPVwic2VhcmNoc3RheC1sb2NhdGlvbi1yYWRpdXMtc2VsZWN0XCJcbiAgICAgICAgICAgIGFyaWEtbGFiZWw9XCJTZWFyY2ggTG9jYXRpb24gUmFkaXVzIFNlbGVjdFwiXG4gICAgICAgICAgICBkYXRhLXRlc3QtaWQ9XCJzZWFyY2hzdGF4LWxvY2F0aW9uLXJhZGl1cy1zZWxlY3RcIlxuICAgICAgICAgICAgKGNoYW5nZSk9XCJyYWRpdXNDaGFuZ2UoJGV2ZW50LCBjb250ZXh0KVwiXG4gICAgICAgICAgICBbKG5nTW9kZWwpXT1cImNvbnRleHQuc2VsZWN0VmFsdWVcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxvcHRpb25cbiAgICAgICAgICAgICAgKm5nRm9yPVwibGV0IHZhbHVlIG9mIGxvY2F0aW9uRGF0YS5sb2NhdGlvblNlYXJjaERpc3RhbmNlVmFsdWVzXCJcbiAgICAgICAgICAgICAgW3ZhbHVlXT1cInZhbHVlLnZhbHVlXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3sgdmFsdWUubGFiZWwgfX1cbiAgICAgICAgICAgIDwvb3B0aW9uPlxuICAgICAgICAgIDwvc2VsZWN0PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvbmctdGVtcGxhdGU+XG4gIGAsXG59KVxuZXhwb3J0IGNsYXNzIExvY2F0aW9uVGVtcGxhdGVDb21wb25lbnQge1xuICBAVmlld0NoaWxkKFwibG9jYXRpb25UZW1wbGF0ZVwiKSBsb2NhdGlvblRlbXBsYXRlITogVGVtcGxhdGVSZWY8YW55Pjtcbn1cbiJdfQ==