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

package/src/components/autocomplete/autocomplete.component.ts

@@ -0,0 +1,124 @@
+import placeholderUrl from '@assets/images/placeholder.png';
+import { AutocompleteItemType, AutocompleteResponse, HawksearchGlobal, SelectedFacets } from '@models';
+import { searchService, trackingService } from '@services';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './autocomplete.component.hbs';
+
+declare let Hawksearch: HawksearchGlobal;
+
+export class AutocompleteComponent extends BaseComponent<AutocompleteResponse> {
+    protected bindEvent = 'hawksearch:bind-autocomplete';
+    protected customTemplatePropertyName = 'search';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data || !(this.data.categories?.results?.length || this.data.content?.results?.length || this.data.products?.results?.length)) {
+            return '';
+        }
+
+        const html = template({
+            ...this.data,
+            AutocompleteItemType: AutocompleteItemType
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('[hawksearch-image]').forEach((e) => {
+            e.addEventListener('error', (event: Event): void => {
+                const element = event.currentTarget as HTMLImageElement;
+
+                element.src = Hawksearch.config.placeholderImageUrl || placeholderUrl;
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-category-field][hawksearch-category-value]').forEach((e) => {
+            e.addEventListener('click', ((event: PointerEvent): void => {
+                event.preventDefault();
+
+                const element = event.currentTarget as HTMLElement;
+                const field = element.getAttribute('hawksearch-category-field');
+                const value = element.getAttribute('hawksearch-category-value');
+                const category = this.data!.categories?.results?.find((r) => r.field === field && r.value === value);
+
+                if (!category) {
+                    return;
+                }
+
+                trackingService.trackAutocompleteClick(this.data!.query, AutocompleteItemType.Category, category.title, category.url);
+
+                const facets: SelectedFacets = {
+                    [category.field]: [category.value]
+                };
+
+                searchService.modifySearch(undefined, facets);
+
+                this.close();
+            }) as EventListener);
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-content]').forEach((e) => {
+            e.addEventListener('click', ((event: PointerEvent): void => {
+                const element = event.currentTarget as HTMLElement;
+                const id = element.getAttribute('hawksearch-content');
+                const content = this.data!.content?.results?.find((r) => r.id === id);
+
+                if (!content) {
+                    return;
+                }
+
+                trackingService.trackAutocompleteClick(this.data!.query, AutocompleteItemType.Content, content.title, content.url);
+            }) as EventListener);
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-product]').forEach((e) => {
+            e.addEventListener('click', ((event: PointerEvent): void => {
+                const element = event.currentTarget as HTMLElement;
+                const id = element.getAttribute('hawksearch-product');
+                const product = this.data!.products?.results?.find((r) => r.id === id);
+
+                if (!product) {
+                    return;
+                }
+
+                trackingService.trackAutocompleteClick(this.data!.query, AutocompleteItemType.Product, product.title, product.url);
+            }) as EventListener);
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-query]').forEach((e) => {
+            e.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+
+                const element = event.currentTarget as HTMLElement;
+                const query = element.getAttribute('hawksearch-query');
+
+                if (!query) {
+                    return;
+                }
+
+                const queryResult = this.data!.queries?.results.find((q) => q.query === query);
+
+                if (queryResult) {
+                    trackingService.trackAutocompleteClick(this.data!.query, AutocompleteItemType.Search, queryResult.query, queryResult.url);
+                }
+
+                searchService.query(query);
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-view-all]').forEach((e) => {
+            e.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+
+                searchService.query(this.data!.query);
+            });
+        });
+    }
+
+    private close(): void {
+        const event = new Event('hawksearch:close-autocomplete');
+
+        this.dispatchEvent(event);
+    }
+}

package/src/components/base.component.ts

@@ -0,0 +1,120 @@
+import { HawksearchGlobal } from '../models';
+import hawksearchCss from '../scss/hawksearch.scss';
+
+declare let Hawksearch: HawksearchGlobal;
+
+export abstract class BaseComponent<TData> extends HTMLElement {
+    protected handlebars = Hawksearch.handlebars;
+
+    protected abstract bindEvent: string | undefined;
+    protected abstract customTemplatePropertyName: string | undefined;
+    protected abstract defaultHtml: string;
+
+    data?: TData;
+
+    get hasCustomTemplate(): boolean {
+        return !!this.innerHTML.trim().length;
+    }
+
+    private bindEventHandler?: EventListener;
+    private template!: HandlebarsTemplateDelegate;
+
+    connectedCallback(): void {
+        this.attachShadow({
+            mode: 'open'
+        });
+
+        this.registerHelpers();
+
+        const customTemplateHtml = this.getCustomTemplateHtml();
+        const templateHtml = customTemplateHtml ?? this.defaultHtml;
+
+        this.template = this.handlebars.compile(templateHtml);
+
+        setTimeout(() => {
+            this.renderContent();
+        });
+
+        if (this.bindEvent) {
+            this.bindEventHandler = ((event: CustomEvent): void => {
+                this.data = event.detail;
+
+                this.renderContent();
+            }) as EventListener;
+
+            addEventListener(this.bindEvent, this.bindEventHandler);
+        }
+    }
+
+    disconnectedCallback(): void {
+        if (this.bindEvent && this.bindEventHandler) {
+            removeEventListener(this.bindEvent, this.bindEventHandler);
+        }
+    }
+
+    protected registerHelpers(): void {}
+
+    public renderContent(): void {
+        if (!this.template) {
+            return;
+        }
+
+        const elements: Array<Node> = [];
+
+        if (Hawksearch.config.defaultStyles !== false) {
+            const defaultStyles = document.createElement('style');
+
+            defaultStyles.innerHTML = hawksearchCss;
+
+            elements.push(defaultStyles);
+        }
+
+        if (Hawksearch.config.customCssUrl) {
+            const customStyles = document.createElement('link');
+
+            customStyles.type = 'text/css';
+            customStyles.rel = 'stylesheet';
+            customStyles.href = Hawksearch.config.customCssUrl;
+
+            elements.push(customStyles);
+        }
+
+        const templateElement = document.createElement('template');
+
+        templateElement.innerHTML = this.getContentHtml(this.template);
+
+        const content = templateElement.content.cloneNode(true);
+
+        elements.push(content);
+
+        this.shadowRoot?.replaceChildren(...elements);
+
+        this.bindChildElements();
+    }
+
+    protected abstract getContentHtml(template: HandlebarsTemplateDelegate): string;
+
+    protected bindChildElements(): void {}
+
+    private getCustomTemplateHtml(): string | undefined {
+        let customTemplate: string | undefined;
+
+        if (this.hasCustomTemplate) {
+            customTemplate = this.innerHTML;
+        } else {
+            if (this.customTemplatePropertyName) {
+                customTemplate = (Hawksearch.templates as any)?.[this.customTemplatePropertyName];
+            }
+
+            if (customTemplate) {
+                const customTemplateElement = document.getElementById(customTemplate);
+
+                if (customTemplateElement instanceof HTMLTemplateElement) {
+                    customTemplate = customTemplateElement.innerHTML;
+                }
+            }
+        }
+
+        return customTemplate;
+    }
+}

package/src/components/facet-types/base-facet.component.ts

@@ -0,0 +1,114 @@
+import { searchService } from '@services';
+import { Facet, FacetState } from '../../models';
+import { BaseComponent } from '../base.component';
+
+export abstract class BaseFacetComponent extends BaseComponent<Facet> {
+    protected bindEvent = undefined;
+
+    state!: FacetState;
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('input[hawksearch-facet-value]').forEach((e) => {
+            e.addEventListener('change', (event: Event) => {
+                event.stopPropagation();
+
+                const element = event.currentTarget as HTMLInputElement;
+                const field = this.data!.field!;
+                const value = element.value;
+
+                if (element.checked) {
+                    searchService.addFacetValue(field, value);
+                } else {
+                    searchService.removeFacetValue(field, value);
+                }
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-facet-value]:not(input)').forEach((e) => {
+            e.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+                event.stopPropagation();
+
+                const element = event.currentTarget as HTMLElement;
+                const value = element.getAttribute('hawksearch-facet-value');
+                const facetValue = this.data!.values?.find((v) => v.value === value);
+
+                if (!facetValue) {
+                    return;
+                }
+
+                if (facetValue.selected) {
+                    searchService.removeFacetValue(this.data!.field!, value!);
+                } else {
+                    searchService.addFacetValue(this.data!.field!, value!);
+                }
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-facet-value-include]').forEach((e) => {
+            e.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+                event.stopPropagation();
+
+                const element = event.currentTarget as HTMLElement;
+                const field = this.data!.field!;
+
+                let value = element.getAttribute('hawksearch-facet-value-include');
+
+                if (!value) {
+                    return;
+                }
+
+                value = `@${value}`;
+
+                searchService.removeFacetValue(field, value);
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-facet-value-exclude]').forEach((e) => {
+            e.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+                event.stopPropagation();
+
+                const element = event.currentTarget as HTMLElement;
+                const field = this.data!.field!;
+                const value = element.getAttribute('hawksearch-facet-value-exclude');
+
+                if (!value) {
+                    return;
+                }
+
+                searchService.excludeFacetValue(field, value);
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-facet-value-toggle]').forEach((e) => {
+            e.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+                event.stopPropagation();
+
+                const element = event.currentTarget as HTMLElement;
+                const value = element.getAttribute('hawksearch-facet-value-toggle');
+
+                if (!value) {
+                    return;
+                }
+
+                this.state.values![value].toggled = !this.state.values![value].toggled;
+
+                this.renderContent();
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-facet-toggle]').forEach((e) => {
+            e.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+                event.stopPropagation();
+
+                this.state.toggled = !this.state.toggled;
+
+                this.renderContent();
+            });
+        });
+    }
+}

package/src/components/facet-types/checkbox-list-facet/checkbox-list-facet.component.hbs

@@ -0,0 +1,6 @@
+<div class="checkbox-list-facet">
+    {{> facet-checkbox-list values}}
+    {{#if showToggle}}
+        <a hawksearch-facet-toggle class='facet__toggle'>{{toggleText}}</a>
+    {{/if}}
+</div>

package/src/components/facet-types/checkbox-list-facet/checkbox-list-facet.component.ts

@@ -0,0 +1,73 @@
+import { FacetValue } from '@models';
+import { BaseFacetComponent } from '../base-facet.component';
+import defaultHtml from './checkbox-list-facet.component.hbs';
+import checkboxListPartialHtml from './checkbox-list.partial.hbs';
+
+interface FacetValueWithState extends FacetValue {
+    visible: boolean;
+    toggled: boolean;
+    hasChildren: boolean;
+    children?: Array<FacetValueWithState>;
+}
+
+export class CheckboxListFacetComponent extends BaseFacetComponent {
+    protected customTemplatePropertyName = 'checkboxListFacet';
+    protected defaultHtml = defaultHtml;
+
+    protected registerHelpers(): void {
+        super.registerHelpers();
+
+        this.handlebars.registerPartial('facet-checkbox-list', checkboxListPartialHtml);
+    }
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data || !this.data.values?.length) {
+            return '';
+        }
+
+        const filterRegex = this.state.filter ? new RegExp(this.state.filter, 'i') : undefined;
+
+        const filtered = (value: FacetValue): boolean => {
+            if (!filterRegex) {
+                return false;
+            }
+
+            return filterRegex.test(value.title);
+        };
+
+        const containsFiltered = (value: FacetValue): boolean => {
+            return value.children?.some((v) => filtered(v)) || false;
+        };
+
+        const getValues = (values: Array<FacetValue> | undefined, parent: FacetValueWithState | undefined): Array<FacetValueWithState> | undefined => {
+            return values?.map((v, i) => {
+                const valueWithState = {
+                    ...v,
+                    visible:
+                        (!parent && !filterRegex && (this.state.toggled || !this.data!.truncateThreshold || i < this.data!.truncateThreshold!)) ||
+                        filtered(v) ||
+                        containsFiltered(v) ||
+                        (!filterRegex && !!parent?.toggled),
+                    hasChildren: !!v.children?.length,
+                    children: undefined,
+                    toggled: (v.value && v.children?.length ? this.state.values?.[v.value!]?.toggled ?? false : false) || containsFiltered(v)
+                };
+
+                (valueWithState as any).children = getValues(v.children, valueWithState);
+
+                return valueWithState;
+            });
+        };
+
+        const html = template({
+            id: this.data.id,
+            field: this.data.field,
+            values: getValues(this.data.values, undefined),
+            showToggle: !!this.data.truncateThreshold && (this.data.values?.length ?? 0) > this.data.truncateThreshold && !this.state.filter,
+            toggleText: this.state.toggled ? 'Show fewer' : 'Show more',
+            expanded: this.state.toggled
+        });
+
+        return html;
+    }
+}

package/src/components/facet-types/checkbox-list-facet/checkbox-list.partial.hbs

@@ -0,0 +1,42 @@
+{{#if length}}
+    <ul class='checkbox-list-facet__list'>
+        {{#each this}}
+            {{#if visible}}
+                <li class='checkbox-list-facet__list__item{{attribute ' checkbox-list-facet__list__item--excluded' excluded}}{{attribute ' checkbox-list-facet__list__item--collapsible' hasChildren}}'>
+                    <div class='checkbox-list-facet__list__item__content'>
+                        <input
+                            id='{{@root.id}}-{{value}}'
+                            type='checkbox'
+                            {{attribute 'checked' selected}}
+                            hawksearch-facet-value
+                            value='{{value}}'
+                        />
+                        <label for='{{@root.id}}-{{value}}' class='facet__value'>
+                            <span class='facet__value__title checkbox-list-facet__list__item__title'>{{title}}</span>
+                            <span class='facet__value__count checkbox-list-facet__list__item__count'>({{count}})</span>
+                        </label>
+                        {{#if toggled}}
+                            {{> facet-checkbox-list children}}
+                        {{/if}}
+                    </div>
+                    <div class='checkbox-list-facet__list__item__actions'>
+                        {{#if excluded}}
+                            <span hawksearch-facet-value-include='{{value}}' class='checkbox-list-facet__list__item__actions__item' title='Include'>
+                                <hawksearch-icon name='plus' class='facet__heading__actions__item'></hawksearch-icon>
+                            </span>
+                        {{else}}
+                            <span hawksearch-facet-value-exclude='{{value}}' class='checkbox-list-facet__list__item__actions__item' title='Exclude'>
+                                <hawksearch-icon name='minus' class='facet__heading__actions__item'></hawksearch-icon>
+                            </span>
+                        {{/if}}
+                        {{#if hasChildren}}
+                            <span hawksearch-facet-value-toggle='{{value}}' class='checkbox-list-facet__list__item__actions__item' title='Toggle'>
+                                <hawksearch-icon name='{{if-else toggled 'chevron-down' 'chevron-right'}}' class='facet__heading__toggle'></hawksearch-icon>
+                            </span>
+                        {{/if}}
+                    </div>
+                </li>
+            {{/if}}
+        {{/each}}
+    </ul>
+{{/if}}

package/src/components/facet-types/color-facet/color-facet.component.hbs

@@ -0,0 +1,29 @@
+<div class='color-facet'>
+    <div class='row row--tight color-facet__items'>
+        {{#each values}}
+            {{#if visible}}
+                <div hawksearch-facet-value='{{value}}' class='column column--2 color-facet__item{{attribute ' color-facet__item--selected' selected}}'>
+                    {{#if color.imageUrl}}
+                        <img src='{{color.imageUrl}}' class='color-facet__item__image' alt='{{color.name}}' title='{{color.name}}' />
+                    {{else}}
+                        <div class='color-facet__item__box' style='background: {{color.hex}};'></div>
+                    {{/if}}
+                    <span class='color-facet__item__actions'>
+                        {{#if excluded}}
+                            <span hawksearch-facet-value-include='{{value}}' class='color-facet__item__actions__item' title='Include'>
+                                <hawksearch-icon name='plus'></hawksearch-icon>
+                            </span>
+                        {{else}}
+                            <span hawksearch-facet-value-exclude='{{value}}' class='color-facet__item__actions__item' title='Exclude'>
+                                <hawksearch-icon name='minus'></hawksearch-icon>
+                            </span>
+                        {{/if}}
+                    </span>
+                </div>
+            {{/if}}
+        {{/each}}
+    </div>
+    {{#if showToggle}}
+        <a hawksearch-facet-toggle class='facet__toggle'>{{toggleText}}</a>
+    {{/if}}
+</div>

package/src/components/facet-types/color-facet/color-facet.component.ts

@@ -0,0 +1,26 @@
+import { BaseFacetComponent } from '../base-facet.component';
+import defaultHtml from './color-facet.component.hbs';
+
+export class ColorFacetComponent extends BaseFacetComponent {
+    protected customTemplatePropertyName = 'colorFacet';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data) {
+            return '';
+        }
+
+        const html = template({
+            values:
+                this.data.values?.map((v, i) => ({
+                    ...v,
+                    visible: this.state.toggled || !this.data?.truncateThreshold || i < this.data?.truncateThreshold
+                })) ?? [],
+            showToggle: !!this.data.truncateThreshold && (this.data.values?.length ?? 0) > this.data.truncateThreshold,
+            toggleText: this.state.toggled ? 'Show fewer' : 'Show more',
+            expanded: this.state.toggled
+        });
+
+        return html;
+    }
+}

package/src/components/facet-types/index.ts

@@ -0,0 +1,6 @@
+export * from './checkbox-list-facet/checkbox-list-facet.component';
+export * from './color-facet/color-facet.component';
+export * from './linked-list-facet/link-list-facet.component';
+export * from './range-slider-facet/range-slider-facet.component';
+export * from './search-within-facet/search-within-facet.component';
+export * from './size-facet/size-facet.component';

package/src/components/facet-types/linked-list-facet/link-list-facet.component.hbs

@@ -0,0 +1,17 @@
+<div class='link-list-facet'>
+    <ul class='link-list-facet__list'>
+        {{#each values}}
+            {{#if visible}}
+                <li class='link-list-facet__list__item'>
+                    <a hawksearch-facet-value='{{value}}' class='facet__value'>
+                        <span class='facet__value__title'>{{title}}</span>
+                        <span class='facet__value__count'>({{count}})</span>
+                    </a>
+                </li>
+            {{/if}}
+        {{/each}}
+    </ul>
+    {{#if showToggle}}
+        <a hawksearch-facet-toggle class='facet__toggle'>{{toggleText}}</a>
+    {{/if}}
+</div>

package/src/components/facet-types/linked-list-facet/link-list-facet.component.ts

@@ -0,0 +1,32 @@
+import { BaseFacetComponent } from '../base-facet.component';
+import defaultHtml from './link-list-facet.component.hbs';
+
+export class LinkListFacetComponent extends BaseFacetComponent {
+    protected customTemplatePropertyName = 'linkListFacet';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data) {
+            return '';
+        }
+
+        const filterRegex = this.state.filter ? new RegExp(this.state.filter ?? '', 'i') : undefined;
+
+        const html = template({
+            id: this.data.id,
+            field: this.data.field,
+            values:
+                this.data.values?.map((v, i) => ({
+                    ...v,
+                    visible:
+                        (!filterRegex && (this.state.toggled || !this.data!.truncateThreshold || i < this.data!.truncateThreshold!)) ||
+                        (!!filterRegex && filterRegex.test(v.title ?? ''))
+                })) ?? [],
+            showToggle: !!this.data.truncateThreshold && (this.data.values?.length ?? 0) > this.data.truncateThreshold && !this.state.filter,
+            toggleText: this.state.toggled ? 'Show fewer' : 'Show more',
+            expanded: this.state.toggled
+        });
+
+        return html;
+    }
+}

package/src/components/facet-types/range-slider-facet/range-slider-facet.component.hbs

@@ -0,0 +1,11 @@
+<div class='range-slider-facet'>
+    <div class='row'>
+        <div class='column column--6'>
+            <input type='number' hawksearch-min value='{{minValue}}' />
+        </div>
+        <div class='column column--6'>
+            <input type='number' hawksearch-max value='{{maxValue}}' />
+        </div>
+    </div>
+    <hawksearch-range-slider min='{{sliderMin}}' max={{sliderMax}}></hawksearch-range-slider>
+</div>