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

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

@@ -0,0 +1,107 @@
+import { RangeSliderEventData } from '@models';
+import { searchService } from '@services';
+import { BaseFacetComponent } from '../base-facet.component';
+import defaultHtml from './range-slider-facet.component.hbs';
+
+export class RangeSliderFacetComponent extends BaseFacetComponent {
+    protected customTemplatePropertyName = 'rangeSliderFacet';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data || this.data.rangeMin === undefined || this.data.rangeMax === undefined) {
+            return '';
+        }
+
+        const range = this.data.rangeMax - this.data.rangeMin;
+        const minValue = Math.floor(this.data.rangeStart || this.data.rangeMin || 0);
+        const maxValue = Math.ceil(this.data.rangeEnd || this.data.rangeMax || 0);
+
+        const html = template({
+            id: this.data.id,
+            field: this.data.field,
+            minValue: minValue,
+            maxValue: maxValue,
+            sliderMin: Math.floor(((minValue - this.data.rangeMin ?? 0) / range) * 100),
+            sliderMax: Math.ceil((maxValue / range) * 100)
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('[hawksearch-min]').forEach((e) => {
+            e.addEventListener('blur', (event: Event) => {
+                const element = event.currentTarget as HTMLInputElement;
+                let value = parseFloat(element.value);
+
+                if (isNaN(value)) {
+                    value = 0;
+                }
+
+                if (value != this.data!.rangeStart && value <= this.data!.rangeEnd!) {
+                    this.setFacetValue(value, this.data!.rangeEnd!);
+                }
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-max]').forEach((e) => {
+            e.addEventListener('blur', (event: Event) => {
+                const element = event.currentTarget as HTMLInputElement;
+                let value = parseFloat(element.value);
+
+                if (isNaN(value)) {
+                    value = 0;
+                }
+
+                if (value != this.data!.rangeEnd && value >= this.data!.rangeStart!) {
+                    this.setFacetValue(this.data!.rangeStart!, value);
+                }
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll('hawksearch-range-slider').forEach((e) => {
+            e.addEventListener('hawksearch:range-slider-dragging', ((event: CustomEvent): void => {
+                const data: RangeSliderEventData = event.detail;
+                const range = this.getRange(data.min, data.max);
+
+                this.updateInputElements(range.min, range.max);
+            }) as EventListener);
+
+            e.addEventListener('hawksearch:range-slider-changed', ((event: CustomEvent): void => {
+                const data: RangeSliderEventData = event.detail;
+                const range = this.getRange(data.min, data.max);
+
+                this.setFacetValue(range.min, range.max);
+            }) as EventListener);
+        });
+    }
+
+    private getRange(sliderMin: number, sliderMax: number): { min: number; max: number } {
+        const rangeMin = Math.floor(this.data?.rangeMin ?? 0);
+        const rangeMax = Math.ceil(this.data?.rangeMax ?? 0);
+        const range = rangeMax - rangeMin;
+        const min = Math.floor((range * sliderMin) / 100 + rangeMin);
+        const max = Math.ceil((rangeMax * sliderMax) / 100);
+
+        return { min: min, max: max };
+    }
+
+    private updateInputElements(min: number, max: number): void {
+        const minElement = this.shadowRoot?.querySelector('[hawksearch-min]') as HTMLInputElement | null;
+        const maxElement = this.shadowRoot?.querySelector('[hawksearch-max]') as HTMLInputElement | null;
+
+        if (minElement) {
+            minElement.value = min.toString();
+        }
+
+        if (maxElement) {
+            maxElement.value = max.toString();
+        }
+    }
+
+    private setFacetValue(min: number, max: number): void {
+        this.updateInputElements(min, max);
+
+        searchService.setFacetValue(this.data!.field!, `${min.toFixed(2)},${max.toFixed(2)}`);
+    }
+}

package/src/components/facet-types/search-within-facet/search-within-facet.component.hbs

@@ -0,0 +1,3 @@
+<div class='search-within-facet'>
+    <input type='text' hawksearch-input value='{{value}}' class='search-within-facet__input' />
+</div>

package/src/components/facet-types/search-within-facet/search-within-facet.component.ts

@@ -0,0 +1,33 @@
+import { searchService } from '@services';
+import { BaseFacetComponent } from '../base-facet.component';
+import defaultHtml from './search-within-facet.component.hbs';
+
+export class SearchWithinFacetComponent extends BaseFacetComponent {
+    protected customTemplatePropertyName = 'searchWithinFacet';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data) {
+            return '';
+        }
+
+        const html = template({
+            value: this.data.searchWithin ?? ''
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('[hawksearch-input]').forEach((e) => {
+            e.addEventListener('change', (event: Event) => {
+                event.preventDefault();
+
+                const element = event.currentTarget as HTMLInputElement;
+                const value = element.value.trim();
+
+                searchService.searchWithin(value);
+            });
+        });
+    }
+}

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

@@ -0,0 +1,29 @@
+<div class='size-facet'>
+    <div class='row row--tight size-facet__items'>
+        {{#each values}}
+            {{#if visible}}
+                <div class='column column--3 size-facet__item{{attribute ' size-facet__item--selected' selected}}'>
+                    <div hawksearch-facet-value='{{value}}' class='size-facet__item__outer'>
+                        <div hawksearch-facet-value='{{value}}' class='size-facet__item__inner'>
+                            {{title}}
+                        </div>
+                    </div>
+                    <span class='size-facet__item__actions'>
+                        {{#if excluded}}
+                            <span hawksearch-facet-value-include='{{value}}' class='size-facet__item__actions__item' title='Include'>
+                                <hawksearch-icon name='plus'></hawksearch-icon>
+                            </span>
+                        {{else}}
+                            <span hawksearch-facet-value-exclude='{{value}}' class='size-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/size-facet/size-facet.component.ts

@@ -0,0 +1,30 @@
+import { BaseFacetComponent } from '../base-facet.component';
+import defaultHtml from './size-facet.component.hbs';
+
+export class SizeFacetComponent extends BaseFacetComponent {
+    protected customTemplatePropertyName = 'colorFacet';
+    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({
+            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,
+            toggleText: this.state.toggled ? 'Show fewer' : 'Show more',
+            expanded: this.state.toggled
+        });
+
+        return html;
+    }
+}

package/src/components/facet-wrapper/facet-wrapper.component.hbs

@@ -0,0 +1,36 @@
+<div class='facet'>
+    <div hawksearch-facet-heading class='facet__heading{{attribute " facet__heading--collapsible" collapsible}}'>
+        {{title}}
+        {{#if tooltip}}
+            <hawksearch-tooltip text='{{tooltip}}'></hawksearch-tooltip>
+        {{/if}}
+        {{#if collapsible}}
+            <hawksearch-icon name='{{if-else collapsed "chevron-right" "chevron-down"}}' size='1.5em' class='facet__heading__toggle'></hawksearch-icon>
+        {{/if}}
+    </div>
+    {{#unless collapsed}}
+        <div class='facet__content'>
+            {{#if searchable}}
+                <input type='text' placeholder='Quick Lookup' hawksearch-facet-search value='{{filter}}' class='facet__search' />
+            {{/if}}
+            {{#if (eq type 'checkbox')}}
+                <hawksearch-checkbox-list-facet hawksearch-facet></hawksearch-checkbox-list-facet>
+            {{/if}}
+            {{#if (eq type 'color')}}
+                <hawksearch-color-facet hawksearch-facet></hawksearch-color-facet>
+            {{/if}}
+            {{#if (eq type 'link')}}
+                <hawksearch-link-list-facet hawksearch-facet></hawksearch-link-list-facet>
+            {{/if}}
+            {{#if (eq type 'range-slider')}}
+                <hawksearch-range-slider-facet hawksearch-facet></hawksearch-range-slider-facet>
+            {{/if}}
+            {{#if (eq type 'search')}}
+                <hawksearch-search-within-facet hawksearch-facet></hawksearch-search-within-facet>
+            {{/if}}
+            {{#if (eq type 'size')}}
+                <hawksearch-size-facet hawksearch-facet></hawksearch-size-facet>
+            {{/if}}
+        </div>
+    {{/unless}}
+</div>

package/src/components/facet-wrapper/facet-wrapper.component.ts

@@ -0,0 +1,62 @@
+import { Facet, FacetState } from '@models';
+import { BaseComponent } from '../base.component';
+import { BaseFacetComponent } from '../facet-types/base-facet.component';
+import defaultHtml from './facet-wrapper.component.hbs';
+
+export class FacetWrapperComponent extends BaseComponent<Facet> {
+    protected bindEvent = undefined;
+    protected customTemplatePropertyName = 'facetWrapper';
+    protected defaultHtml = defaultHtml;
+
+    state!: FacetState;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data) {
+            return '';
+        }
+
+        const html = template({
+            ...this.data,
+            collapsed: this.state.collapsed ?? this.data.collapsed ?? false,
+            filter: this.state.filter ?? ''
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('[hawksearch-facet-heading]').forEach((e) => {
+            e.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+
+                if (this.data?.collapsible) {
+                    this.state.collapsed = !this.state.collapsed;
+
+                    this.renderContent();
+                }
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-facet-search]').forEach((e) => {
+            e.addEventListener('keyup', (event: Event) => {
+                const element = event.currentTarget as HTMLInputElement;
+                const value = element.value?.trim();
+
+                this.state.filter = value ? value : undefined;
+
+                this.rebindChildElements();
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll<BaseFacetComponent>('[hawksearch-facet]').forEach((component) => {
+            component.data = this.data;
+            component.state = this.state;
+        });
+    }
+
+    private rebindChildElements(): void {
+        this.shadowRoot?.querySelectorAll<BaseFacetComponent>('[hawksearch-facet]').forEach((component) => {
+            component.renderContent();
+        });
+    }
+}

package/src/components/facets-list/facets-list.component.hbs

@@ -0,0 +1,11 @@
+<div class='facets{{attribute " facets--expanded" expanded}}'>
+    <div hawksearch-mobile-toggle class='facets__heading'>
+        Narrow Results
+        <hawksearch-icon name='{{if-else expanded "chevron-down" "chevron-right"}}' size='1.5rem' class='facets__heading__mobile-toggle'></hawksearch-icon>
+    </div>
+    <div class='facets__content'>
+        {{#each facets}}
+            <hawksearch-facet-wrapper hawksearch-facet-id='{{id}}'></hawksearch-facet-wrapper>
+        {{/each}}
+    </div>
+</div>

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

@@ -0,0 +1,92 @@
+import { Facet, FacetState, FacetType, FacetValue } from '@models';
+import { BaseComponent } from '../base.component';
+import { FacetWrapperComponent } from '../facet-wrapper/facet-wrapper.component';
+import defaultHtml from './facets-list.component.hbs';
+
+export class FacetsListComponent extends BaseComponent<Array<Facet>> {
+    protected bindEvent = 'hawksearch:bind-facets-list';
+    protected customTemplatePropertyName = 'facetsList';
+    protected defaultHtml = defaultHtml;
+
+    private readonly state: {
+        [key: number]: FacetState;
+        expanded: boolean;
+    } = {
+        expanded: false
+    };
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data) {
+            return '';
+        }
+
+        const supportedTypes: Array<FacetType> = ['checkbox', 'color', 'link', 'range-slider', 'search', 'size'];
+
+        const html = template({
+            facets: this.data.filter((f) => supportedTypes.includes(f.type)),
+            expanded: this.state.expanded
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('[hawksearch-mobile-toggle]').forEach((e) => {
+            e.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+
+                this.state.expanded = !this.state.expanded;
+
+                this.renderContent();
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll<FacetWrapperComponent>('hawksearch-facet-wrapper[hawksearch-facet-id]').forEach((component) => {
+            const id = parseInt(component.getAttribute('hawksearch-facet-id') ?? '');
+            const facet = this.data?.find((f) => f.id === id);
+
+            let facetValues: Array<string> | undefined;
+
+            if (facet?.values) {
+                facetValues = [];
+
+                const addValues = (values: Array<FacetValue> | undefined): void => {
+                    values?.forEach((v) => {
+                        if (v.value) {
+                            facetValues!.push(v.value);
+                        }
+
+                        addValues(v.children);
+                    });
+                };
+
+                addValues(facet.values);
+            }
+
+            let facetState = this.state[id];
+
+            if (!facetState) {
+                facetState = {
+                    id: id,
+                    toggled: false,
+                    values: {}
+                };
+
+                this.state[id] = facetState;
+            }
+
+            facetValues?.forEach((v) => {
+                const state = facetState.values![v];
+
+                if (!state) {
+                    facetState.values![v] = {
+                        toggled: false
+                    };
+                }
+            });
+
+            component.data = facet;
+            component.state = facetState;
+        });
+    }
+}

package/src/components/icon/icon.component.hbs

@@ -0,0 +1,3 @@
+<svg height='{{height}}' width='{{width}}' focusable='false' aria-hidden='true' class='icon'>
+    <use href='{{url}}'></use>
+</svg>

package/src/components/icon/icon.component.ts

@@ -0,0 +1,40 @@
+import iconsUrl from '@assets/images/icons.svg';
+import { IconName } from '@models';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './icon.component.hbs';
+
+export class IconComponent extends BaseComponent<never> {
+    protected bindEvent = undefined;
+    protected customTemplatePropertyName = 'icon';
+    protected defaultHtml = defaultHtml;
+
+    private get size(): string {
+        const size = this.getAttribute('size');
+
+        if (!size) {
+            return '1em';
+        }
+
+        if (isNaN(Number(size))) {
+            return size;
+        }
+
+        return `${size}px`;
+    }
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        const name = this.getAttribute('name') as IconName | null;
+
+        if (!name) {
+            return '';
+        }
+
+        const html = template({
+            url: `${iconsUrl}#${name}`,
+            height: this.size,
+            width: this.size
+        });
+
+        return html;
+    }
+}

package/src/components/index.ts

@@ -0,0 +1,18 @@
+export * from './autocomplete/autocomplete.component';
+export * from './facet-types';
+export * from './facet-wrapper/facet-wrapper.component';
+export * from './facets-list/facets-list.component';
+export * from './icon/icon.component';
+export * from './modified-query/modified-query.component';
+export * from './page-size/page-size.component';
+export * from './pagination/pagination.component';
+export * from './query-suggestions/query-suggestions.component';
+export * from './range-slider/range-slider.component';
+export * from './search/search.component';
+export * from './search-results-item/search-results-item.component';
+export * from './search-results-list/search-results-list.component';
+export * from './search-results/search-results.component';
+export * from './selected-facets/selected-facets.component';
+export * from './sorting/sorting.component';
+export * from './tabs/tabs.component';
+export * from './tooltip/tooltip.component';

package/src/components/modified-query/modified-query.component.hbs

@@ -0,0 +1,7 @@
+<div class='modified-query'>
+    <p>
+        Showing results for
+        <span class='modified-query__modified'>{{modifiedQuery}}</span>. Search instead for
+        <a class='modified-query__original' hawksearch-query='{{query}}'>{{query}}</a>.
+    </p>
+</div>

package/src/components/modified-query/modified-query.component.ts

@@ -0,0 +1,38 @@
+import { ModifiedQueryData } from '@models';
+import { searchService } from '@services';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './modified-query.component.hbs';
+
+export class ModifiedQueryComponent extends BaseComponent<ModifiedQueryData> {
+    protected bindEvent = 'hawksearch:bind-modified-query';
+    protected customTemplatePropertyName = 'modifiedQuery';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data || !this.data.display || !this.data.query || !this.data.modifiedQuery) {
+            return '';
+        }
+
+        const html = template({
+            query: this.data.query,
+            modifiedQuery: this.data.modifiedQuery
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        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) {
+                    searchService.query(query, true);
+                }
+            });
+        });
+    }
+}

package/src/components/page-size/page-size.component.hbs

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

package/src/components/page-size/page-size.component.ts

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

package/src/components/pagination/pagination.component.hbs

@@ -0,0 +1,34 @@
+<div class='pagination'>
+    {{#if summary}}
+        <div class='pagination__summary'>{{summary}}</div>
+    {{/if}}
+    <div class='pagination__pages'>
+        {{#if displayFirstLink}}
+            <a hawksearch-page='1' class='pagination__page pagination__page--first' title='First'>
+                <hawksearch-icon name='chevron-back' size='1.2em'></hawksearch-icon>
+            </a>
+        {{/if}}
+        {{#if displayPreviousLink}}
+            <a hawksearch-page='{{subtract page 1}}' class='pagination__page pagination__page--previous' title='Previous'>
+                <hawksearch-icon name='chevron-left' size='1.2em'></hawksearch-icon>
+            </a>
+        {{/if}}
+        {{#each pages}}
+            {{#if (eq this @root.page)}}
+                <span class='pagination__page pagination__page--selected'>{{this}}</span>
+            {{else}}
+                <a hawksearch-page='{{this}}' class='pagination__page'>{{this}}</a>
+            {{/if}}
+        {{/each}}
+        {{#if displayNextLink}}
+            <a hawksearch-page='{{add page 1}}' class='pagination__page pagination__page--next' title='Next'>
+                <hawksearch-icon name='chevron-right' size='1.2em'></hawksearch-icon>
+            </a>
+        {{/if}}
+        {{#if displayLastLink}}
+            <a hawksearch-page='{{totalPages}}' class='pagination__page pagination__page--last' title='Last'>
+                <hawksearch-icon name='chevron-forward' size='1.2em'></hawksearch-icon>
+            </a>
+        {{/if}}
+    </div>
+</div>