@bridgeline-digital/hawksearch-handlebars-ui 1.0.0-beta.0

package/src/components/selected-facets/selected-facets.component.ts

@@ -0,0 +1,81 @@
+import { formatCurrency } from '@helpers';
+import { SelectedFacet } from '@models';
+import { searchService } from '@services';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './selected-facets.component.hbs';
+
+export class SelectedFacetsComponent extends BaseComponent<Array<SelectedFacet>> {
+    protected bindEvent = 'hawksearch:bind-selected-facets';
+    protected customTemplatePropertyName = 'selectedFacets';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data?.length) {
+            return '';
+        }
+
+        const selections: Array<{
+            field: string;
+            title: string;
+            selectionTitle: string;
+            selectionValue: string;
+            excluded: boolean;
+        }> = [];
+
+        this.data.forEach((facet) => {
+            facet.values.forEach((value) => {
+                let selectionTitle = value.title;
+
+                const priceRange = /^(?<min>\d+(?:\.\d+)),(?<max>\d+(?:\.\d+))$/.exec(value.value);
+
+                if (priceRange) {
+                    const min = parseFloat(priceRange.groups!.min);
+                    const max = parseFloat(priceRange.groups!.max);
+
+                    selectionTitle = `${formatCurrency(min, 0)}-${formatCurrency(max, 0)}`;
+                }
+
+                selections.push({
+                    field: facet.field,
+                    title: facet.title,
+                    selectionTitle: selectionTitle,
+                    selectionValue: value.value,
+                    excluded: value.excluded
+                });
+            });
+        });
+
+        selections.sort((x, y) => {
+            if (x.field == y.field) {
+                return x.selectionTitle.localeCompare(y.selectionTitle);
+            }
+
+            return x.title.localeCompare(y.title);
+        });
+
+        const html = template({
+            facets: this.data,
+            selections: selections
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('[hawksearch-facet-field][hawksearch-facet-value]').forEach((e) => {
+            e.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+
+                const element = event.currentTarget as HTMLElement;
+                const field = element.getAttribute('hawksearch-facet-field');
+                const value = element.getAttribute('hawksearch-facet-value');
+
+                if (!(field && value)) {
+                    return;
+                }
+
+                searchService.removeFacetValue(field, value);
+            });
+        });
+    }
+}

package/src/components/sorting/sorting.component.hbs

@@ -0,0 +1,7 @@
+<div class='sorting'>
+    <select hawksearch-sort>
+        {{#each options}}
+            <option value='{{value}}' {{attribute 'selected' selected}}>{{title}}</option>
+        {{/each}}
+    </select>
+</div>

package/src/components/sorting/sorting.component.ts

@@ -0,0 +1,33 @@
+import { Sorting } from '@models';
+import { searchService } from '@services';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './sorting.component.hbs';
+
+export class SortingComponent extends BaseComponent<Sorting> {
+    protected bindEvent = 'hawksearch:bind-sorting';
+    protected customTemplatePropertyName = 'sorting';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data?.options?.length) {
+            return '';
+        }
+
+        const html = template(this.data);
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('[hawksearch-sort]').forEach((e) => {
+            e.addEventListener('change', (event: Event) => {
+                event.preventDefault();
+
+                const element = event.currentTarget as HTMLSelectElement;
+                const value = element.value;
+
+                searchService.sort(value);
+            });
+        });
+    }
+}

package/src/components/tabs/tabs.component.hbs

@@ -0,0 +1,7 @@
+{{#if values.length}}
+    <ul class='tabs{{attribute " tabs--list" (gt values.length 4)}}'>
+        {{#each values}}
+            <li class='tabs__item{{attribute " tabs__item--selected" selected}}' hawksearch-tab-value={{value}}>{{title}} ({{count}})</li>
+        {{/each}}
+    </ul>
+{{/if}}

package/src/components/tabs/tabs.component.ts

@@ -0,0 +1,35 @@
+import { Facet } from '@models';
+import { searchService } from '@services';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './tabs.component.hbs';
+
+export class TabsComponent extends BaseComponent<Facet> {
+    protected bindEvent = 'hawksearch:bind-tabs';
+    protected customTemplatePropertyName = 'tabs';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data?.values?.length) {
+            return '';
+        }
+
+        const html = template({
+            values: this.data.values
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('[hawksearch-tab-value]').forEach((e) => {
+            e.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+
+                const element = event.currentTarget as HTMLElement;
+                const value = element.getAttribute('hawksearch-tab-value');
+
+                searchService.selectTab(value ?? undefined);
+            });
+        });
+    }
+}

package/src/components/tooltip/tooltip.component.hbs

@@ -0,0 +1,6 @@
+<span class='tooltip' hawksearch-tooltip>
+    <span class='tooltip__icon'>
+        <hawksearch-icon name='help' class='facet__heading__tooltip'></hawksearch-icon>
+    </span>
+    <span class='tooltip__content' hawksearch-tooltip-content>{{text}}</span>
+</span>

package/src/components/tooltip/tooltip.component.ts

@@ -0,0 +1,48 @@
+import { BaseComponent } from '../base.component';
+import defaultHtml from './tooltip.component.hbs';
+
+export class TooltipComponent extends BaseComponent<string> {
+    protected bindEvent = undefined;
+    protected customTemplatePropertyName = 'tooltip';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        const text = this.getAttribute('text') as string | null;
+
+        if (!text) {
+            return '';
+        }
+
+        const html = template({
+            text: text
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelector('[hawksearch-tooltip]')?.addEventListener('mouseover', (event: Event) => {
+            const element = event.currentTarget as HTMLElement;
+            const contentElement = this.shadowRoot?.querySelector('[hawksearch-tooltip-content]') as HTMLElement;
+
+            if (!contentElement) {
+                return;
+            }
+
+            contentElement.style.removeProperty('top');
+            contentElement.style.removeProperty('right');
+
+            const windowWidth = window.innerWidth;
+            const boundingRect = element.getBoundingClientRect();
+            const rightPosition = boundingRect.x + boundingRect.width;
+            const maxWidth = 350;
+            const margin = 20;
+
+            contentElement.style.top = `${boundingRect.top}px`;
+
+            if (windowWidth - rightPosition < maxWidth + margin) {
+                contentElement.style.right = `${margin}px`;
+            }
+        });
+    }
+}

package/src/helpers/formatters.ts

@@ -0,0 +1,15 @@
+import { HawksearchGlobal } from '@models';
+
+declare let Hawksearch: HawksearchGlobal;
+
+export function formatCurrency(value: number, decimals = 2): string {
+    const cultureIsoCode = Hawksearch.config.formatting?.cultureIsoCode || 'en-US';
+    const currencyIsoCode = Hawksearch.config.formatting?.currencyIsoCode?.toUpperCase() || 'USD';
+
+    return value.toLocaleString(cultureIsoCode, {
+        style: 'currency',
+        currency: currencyIsoCode,
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+    });
+}

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './formatters';

package/src/index.ts

@@ -0,0 +1,125 @@
+// @ts-ignore
+import * as Handlebars from 'handlebars/dist/handlebars';
+import {
+    AutocompleteComponent,
+    CheckboxListFacetComponent,
+    ColorFacetComponent,
+    FacetWrapperComponent,
+    FacetsListComponent,
+    IconComponent,
+    LinkListFacetComponent,
+    ModifiedQueryComponent,
+    PageSizeComponent,
+    PaginationComponent,
+    QuerySuggestionsComponent,
+    RangeSliderComponent,
+    RangeSliderFacetComponent,
+    SearchComponent,
+    SearchResultsComponent,
+    SearchResultsItemComponent,
+    SearchResultsListComponent,
+    SearchWithinFacetComponent,
+    SelectedFacetsComponent,
+    SizeFacetComponent,
+    SortingComponent,
+    TabsComponent,
+    TooltipComponent
+} from './components';
+import { HawksearchGlobal, HawksearchState, PageType } from './models';
+import { searchService, trackingService } from './services';
+
+declare let Hawksearch: HawksearchGlobal;
+
+if (!Hawksearch) {
+    Hawksearch = {} as HawksearchGlobal;
+}
+
+Hawksearch.service = searchService;
+Hawksearch.handlebars = Handlebars.noConflict();
+
+Hawksearch.handlebars.registerHelper('add', function (value1: number, value2: number): number {
+    return value1 + value2;
+});
+
+Hawksearch.handlebars.registerHelper('attribute', function (attribute: string, condition: any): string {
+    return condition ? attribute : '';
+});
+
+Hawksearch.handlebars.registerHelper('eq', function (value1: any, value2: any): boolean {
+    return value1 === value2;
+});
+
+Hawksearch.handlebars.registerHelper('exclude', function (options): any {
+    return options.fn();
+});
+
+Hawksearch.handlebars.registerHelper('html', function (html: string): Handlebars.SafeString {
+    return new Hawksearch.handlebars.SafeString(html);
+});
+
+Hawksearch.handlebars.registerHelper('if-else', function (condition: any, trueValue: any, falseValue: any): any {
+    return condition ? trueValue : falseValue;
+});
+
+Hawksearch.handlebars.registerHelper('lt', function (value1: any, value2: any): boolean {
+    return value1 < value2;
+});
+
+Hawksearch.handlebars.registerHelper('lte', function (value1: any, value2: any): boolean {
+    return value1 <= value2;
+});
+
+Hawksearch.handlebars.registerHelper('gt', function (value1: any, value2: any): boolean {
+    return value1 > value2;
+});
+
+Hawksearch.handlebars.registerHelper('gte', function (value1: any, value2: any): boolean {
+    return value1 >= value2;
+});
+
+Hawksearch.handlebars.registerHelper('or', function (...values: Array<any>): boolean {
+    return values.slice(0, -1).some((v) => !!v); // Omit last argument as that is Handlebars options which would always resolve to true
+});
+
+Hawksearch.handlebars.registerHelper('subtract', function (value1: number, value2: number): number {
+    return value1 - value2;
+});
+
+customElements.define('hawksearch-autocomplete', AutocompleteComponent);
+customElements.define('hawksearch-checkbox-list-facet', CheckboxListFacetComponent);
+customElements.define('hawksearch-color-facet', ColorFacetComponent);
+customElements.define('hawksearch-facet-wrapper', FacetWrapperComponent);
+customElements.define('hawksearch-facets-list', FacetsListComponent);
+customElements.define('hawksearch-icon', IconComponent);
+customElements.define('hawksearch-link-list-facet', LinkListFacetComponent);
+customElements.define('hawksearch-modified-query', ModifiedQueryComponent);
+customElements.define('hawksearch-page-size', PageSizeComponent);
+customElements.define('hawksearch-pagination', PaginationComponent);
+customElements.define('hawksearch-query-suggestions', QuerySuggestionsComponent);
+customElements.define('hawksearch-results', SearchResultsComponent);
+customElements.define('hawksearch-range-slider', RangeSliderComponent);
+customElements.define('hawksearch-range-slider-facet', RangeSliderFacetComponent);
+customElements.define('hawksearch-results-list', SearchResultsListComponent);
+customElements.define('hawksearch-results-item', SearchResultsItemComponent);
+customElements.define('hawksearch-search', SearchComponent);
+customElements.define('hawksearch-search-within-facet', SearchWithinFacetComponent);
+customElements.define('hawksearch-selected-facets', SelectedFacetsComponent);
+customElements.define('hawksearch-size-facet', SizeFacetComponent);
+customElements.define('hawksearch-sorting', SortingComponent);
+customElements.define('hawksearch-tabs', TabsComponent);
+customElements.define('hawksearch-tooltip', TooltipComponent);
+
+addEventListener('popstate', (event) => {
+    const state: HawksearchState = event.state;
+
+    Hawksearch.searchRequest = state.searchRequest;
+    Hawksearch.searchResponse = state.searchResponse;
+
+    searchService.bindComponents(state.searchResponse);
+});
+
+trackingService.trackPageLoad(PageType.Custom);
+
+const searchRequest = searchService.getRequestFromUrl();
+
+searchService.search(searchRequest);

package/src/models/autocomplete.models.ts

@@ -0,0 +1,71 @@
+export interface AutocompleteRequest {
+    query: string;
+}
+
+export interface AutocompleteCategory {
+    title: string;
+    field: string;
+    value: string;
+    url: string;
+}
+
+export interface AutocompleteCategories {
+    title: string;
+    results: Array<AutocompleteCategory>;
+}
+
+export interface AutocompleteContentResult {
+    id: string;
+    title: string;
+    url: string;
+    pinned: boolean;
+    score: number;
+    attributes?: {
+        [key: string]: Array<string>;
+    };
+}
+
+export interface AutocompleteContent {
+    title: string;
+    results: Array<AutocompleteContentResult>;
+    totalRecords: number;
+}
+
+export interface AutocompleteQuery {
+    query: string;
+    url: string;
+}
+
+export interface AutocompleteQueries {
+    title: string;
+    results: Array<AutocompleteQuery>;
+}
+
+export interface AutocompleteProductResult {
+    id: string;
+    title: string;
+    sku?: string;
+    imageUrl?: string;
+    url: string;
+    pinned: boolean;
+    score: number;
+    attributes?: {
+        [key: string]: Array<string>;
+    };
+}
+
+export interface AutocompleteProducts {
+    title: string;
+    results: Array<AutocompleteProductResult>;
+    totalRecords: number;
+}
+
+export interface AutocompleteResponse {
+    query: string;
+    categories: AutocompleteCategories;
+    content: AutocompleteContent;
+    products: AutocompleteProducts;
+    queries: AutocompleteQueries;
+    totalRecords: number;
+    viewAllText: string;
+}

package/src/models/component.models.ts

@@ -0,0 +1,27 @@
+export type IconName =
+    | 'chevron-back'
+    | 'chevron-down'
+    | 'chevron-forward'
+    | 'chevron-left'
+    | 'chevron-right'
+    | 'chevron-up'
+    | 'cross'
+    | 'help'
+    | 'minus'
+    | 'plus';
+
+export interface ModifiedQueryData {
+    display: boolean;
+    query?: string;
+    modifiedQuery?: string;
+}
+
+export interface QuerySuggestionsData {
+    display: boolean;
+    querySuggestions?: Array<string>;
+}
+
+export interface RangeSliderEventData {
+    min: number;
+    max: number;
+}

package/src/models/global.models.ts

@@ -0,0 +1,78 @@
+import * as Handlebars from 'handlebars';
+import { SearchService } from '../services';
+import { SearchRequest, SearchResponse } from './search.models';
+
+export interface HawksearchConfig {
+    clientId: string;
+    customCssUrl?: string;
+    defaultStyles?: boolean;
+    endpoints?: {
+        search: string;
+        tracking: string;
+    };
+    fieldMappings?: {
+        imageUrl?: string;
+        price?: string;
+        salePrice?: string;
+        title?: string;
+        type?: string;
+        url?: string;
+    };
+    formatting?: {
+        cultureIsoCode?: string;
+        currencyIsoCode?: string;
+    };
+    placeholderImageUrl?: string;
+    queryStringMappings?: {
+        disableSpellcheck?: string;
+        facet?: string;
+        page?: string;
+        pageSize?: string;
+        query?: string;
+        searchWithin?: string;
+        sort?: string;
+    };
+    trackingEnabled?: boolean;
+    urlPrefixes?: {
+        assets?: string;
+        content?: string;
+    };
+}
+
+export interface HawksearchTemplates {
+    checkboxListFacet?: string;
+    colorFacet?: string;
+    facetsList?: string;
+    facetWrapper?: string;
+    icon?: string;
+    linkListFacet?: string;
+    modifiedQuery?: string;
+    pageSize?: string;
+    pagination?: string;
+    querySuggestions?: string;
+    rangeSlider?: string;
+    rangeSliderFacet?: string;
+    search?: string;
+    searchResults?: string;
+    searchResultsItem?: string;
+    searchResultsList?: string;
+    searchWithinFacet?: string;
+    selectedFacets?: string;
+    sorting?: string;
+    tabs?: string;
+    tooltip?: string;
+}
+
+export interface HawksearchGlobal {
+    config: HawksearchConfig;
+    handlebars: typeof Handlebars;
+    searchRequest?: SearchRequest;
+    searchResponse?: SearchResponse;
+    service?: SearchService;
+    templates?: HawksearchTemplates;
+}
+
+export interface HawksearchState {
+    searchRequest?: SearchRequest;
+    searchResponse: SearchResponse;
+}

package/src/models/index.ts

@@ -0,0 +1,7 @@
+export * from './autocomplete.models';
+export * from './component.models';
+export * from './global.models';
+export * from './raw-autocomplete.models';
+export * from './raw-search.models';
+export * from './search.models';
+export * from './tracking.models';

package/src/models/raw-autocomplete.models.ts

@@ -0,0 +1,46 @@
+import { RawSearchResultsItem } from './raw-search.models';
+
+export interface RawAutocompleteRequest {
+    ClientGuid: string;
+    Keyword: string;
+    DisplayFullResponse?: boolean;
+}
+
+export interface RawAutocompleteCategory {
+    Url: string;
+    Value: string;
+    FieldQSName: string;
+    FieldQSValue: string;
+}
+
+export interface RawAutocompleteContent {
+    Value: string;
+    Url: string;
+    Results: RawSearchResultsItem;
+}
+
+export interface RawAutocompleteProduct {
+    ProductName: string;
+    Sku: string;
+    Thumb?: {
+        AltText: string;
+        Url: string;
+    };
+    Url: string;
+    Results: RawSearchResultsItem;
+}
+
+export interface RawAutocompleteResponse {
+    Categories: Array<RawAutocompleteCategory>;
+    CategoryHeading: string;
+    Content: Array<RawAutocompleteContent>;
+    ContentCount: number;
+    ContentHeading: string;
+    Count: number;
+    Popular: Array<string>;
+    PopularHeading: string;
+    ProductHeading: string;
+    ProductCount: number;
+    Products: Array<RawAutocompleteProduct>;
+    ViewAllButtonLabel: string;
+}