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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bridgeline-digital/hawksearch-handlebars-ui",
-    "version": "1.0.0-beta.0",
+    "version": "1.0.0-beta.1",
     "description": "",
     "private": false,
     "publishConfig": {
@@ -15,7 +15,9 @@
         "lint": "npm run eslint && npm run prettier",
         "prepare": "husky install",
         "prettier": "prettier --write .",
+        "publish": "npm run version && npm run build && npm publish",
         "serve": "webpack serve --open",
+        "version": "npm version patch",
         "watch": "webpack --watch"
     },
     "keywords": [],

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

@@ -3,11 +3,11 @@ 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 {
+interface CheckboxListFacetValue extends FacetValue {
     visible: boolean;
     toggled: boolean;
     hasChildren: boolean;
-    children?: Array<FacetValueWithState>;
+    children?: Array<CheckboxListFacetValue>;
 }
 
 export class CheckboxListFacetComponent extends BaseFacetComponent {
@@ -39,7 +39,7 @@ export class CheckboxListFacetComponent extends BaseFacetComponent {
             return value.children?.some((v) => filtered(v)) || false;
         };
 
-        const getValues = (values: Array<FacetValue> | undefined, parent: FacetValueWithState | undefined): Array<FacetValueWithState> | undefined => {
+        const getValues = (values: Array<FacetValue> | undefined, parent: CheckboxListFacetValue | undefined): Array<CheckboxListFacetValue> | undefined => {
             return values?.map((v, i) => {
                 const valueWithState = {
                     ...v,

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

@@ -1,6 +1,11 @@
+import { FacetValue } from '@models';
 import { BaseFacetComponent } from '../base-facet.component';
 import defaultHtml from './color-facet.component.hbs';
 
+interface ColorFacetValue extends FacetValue {
+    visible: boolean;
+}
+
 export class ColorFacetComponent extends BaseFacetComponent {
     protected customTemplatePropertyName = 'colorFacet';
     protected defaultHtml = defaultHtml;
@@ -12,10 +17,12 @@ export class ColorFacetComponent extends BaseFacetComponent {
 
         const html = template({
             values:
-                this.data.values?.map((v, i) => ({
-                    ...v,
-                    visible: this.state.toggled || !this.data?.truncateThreshold || i < this.data?.truncateThreshold
-                })) ?? [],
+                this.data.values?.map(
+                    (v, i): ColorFacetValue => ({
+                        ...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

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

@@ -1,6 +1,11 @@
+import { FacetValue } from '@models';
 import { BaseFacetComponent } from '../base-facet.component';
 import defaultHtml from './link-list-facet.component.hbs';
 
+interface LinkListFacetValue extends FacetValue {
+    visible: boolean;
+}
+
 export class LinkListFacetComponent extends BaseFacetComponent {
     protected customTemplatePropertyName = 'linkListFacet';
     protected defaultHtml = defaultHtml;
@@ -16,12 +21,14 @@ export class LinkListFacetComponent extends BaseFacetComponent {
             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 ?? ''))
-                })) ?? [],
+                this.data.values?.map(
+                    (v, i): LinkListFacetValue => ({
+                        ...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

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

@@ -1,6 +1,11 @@
+import { FacetValue } from '@models';
 import { BaseFacetComponent } from '../base-facet.component';
 import defaultHtml from './size-facet.component.hbs';
 
+interface SizeFacetValue extends FacetValue {
+    visible: boolean;
+}
+
 export class SizeFacetComponent extends BaseFacetComponent {
     protected customTemplatePropertyName = 'colorFacet';
     protected defaultHtml = defaultHtml;
@@ -14,12 +19,14 @@ export class SizeFacetComponent extends BaseFacetComponent {
 
         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 ?? ''))
-                })) ?? [],
+                this.data.values?.map(
+                    (v, i): SizeFacetValue => ({
+                        ...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

package/src/components/index.ts

@@ -1,18 +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';
+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/query-suggestions/query-suggestions.component.ts

@@ -16,7 +16,7 @@ export class QuerySuggestionsComponent extends BaseComponent<QuerySuggestionsDat
 
         this.handlebars.registerHelper('query-suggestions', function (querySuggestions: Array<string>): SafeString {
             function linkFunction(query: string): string {
-                return `<a hawksearch-query="${encodeURIComponent(query)}">${query}</a>`;
+                return `<a hawksearch-query="${encodeURIComponent(query)}" class="query-suggestions__link">${query}</a>`;
             }
 
             if (querySuggestions.length <= 2) {

package/src/components/search-results/search-results.component.ts

@@ -1,17 +1,17 @@
-import { SearchResponse } from '@models';
-import { BaseComponent } from '../base.component';
-import defaultHtml from './search-results.component.hbs';
-
-export class SearchResultsComponent extends BaseComponent<SearchResponse> {
-    protected bindEvent = 'hawksearch:bind-search-results';
-    protected customTemplatePropertyName = 'searchResults';
-    protected defaultHtml = defaultHtml;
-
-    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
-        const html = template({
-            data: this.data
-        });
-
-        return html;
-    }
-}
+import { SearchResponse } from '@models';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './search-results.component.hbs';
+
+export class SearchResultsComponent extends BaseComponent<SearchResponse> {
+    protected bindEvent = 'hawksearch:bind-search-results';
+    protected customTemplatePropertyName = 'searchResults';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        const html = template({
+            data: this.data
+        });
+
+        return html;
+    }
+}

package/src/components/search-results-list/search-results-list.component.hbs

@@ -1,15 +1,13 @@
-{{#if items.length}}
-    <div class='row'>
-        {{#each items}}
-            {{#if (eq type 'content')}}
-                <div class='column column--12'>
-                    <hawksearch-results-item></hawksearch-results-item>
-                </div>
-            {{else}}
-                <div class='column column--12 column-sm--6 column-lg--4'>
-                    <hawksearch-results-item></hawksearch-results-item>
-                </div>
-            {{/if}}
-        {{/each}}
-    </div>
-{{/if}}
+<div class='row'>
+    {{#each items}}
+        {{#if (eq type 'content')}}
+            <div class='column column--12'>
+                <hawksearch-results-item></hawksearch-results-item>
+            </div>
+        {{else}}
+            <div class='column column--12 column-sm--6 column-lg--4'>
+                <hawksearch-results-item></hawksearch-results-item>
+            </div>
+        {{/if}}
+    {{/each}}
+</div>

package/src/components/search-results-list/search-results-list.component.ts

@@ -9,8 +9,12 @@ export class SearchResultsListComponent extends BaseComponent<Array<SearchResult
     protected defaultHtml = defaultHtml;
 
     protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data?.length) {
+            return '';
+        }
+
         const html = template({
-            items: this.data ?? []
+            items: this.data
         });
 
         return html;

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

@@ -1,7 +1,5 @@
-{{#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}}
+<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>

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

@@ -13,9 +13,7 @@ export class TabsComponent extends BaseComponent<Facet> {
             return '';
         }
 
-        const html = template({
-            values: this.data.values
-        });
+        const html = template(this.data);
 
         return html;
     }

package/src/index.ts

@@ -1,125 +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);
+// @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);