@bridgeline-digital/hawksearch-handlebars-ui 5.2.0 → 5.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/changelog.md +7 -1
- package/dist/components/base.component.d.ts +139 -0
- package/dist/components/content/content-types/base-content.component.d.ts +9 -0
- package/dist/components/content/content-types/custom-content/custom-content.component.d.ts +21 -0
- package/dist/components/content/content-types/featured-items-content/featured-items-content.component.d.ts +22 -0
- package/dist/components/content/content-types/featured-items-content-item/featured-items-content-item.component.d.ts +39 -0
- package/dist/components/content/content-types/image-content/image-content.component.d.ts +22 -0
- package/dist/components/content/content-types/index.d.ts +6 -0
- package/dist/components/content/content-types/popular-queries-content/popular-queries-content.component.d.ts +22 -0
- package/dist/components/content/content-zone/content-zone.component.d.ts +44 -0
- package/dist/components/content/index.d.ts +2 -0
- package/dist/components/general/date-picker/date-picker.component.d.ts +117 -0
- package/dist/components/general/icon/icon.component.d.ts +38 -0
- package/dist/components/general/index.d.ts +5 -0
- package/dist/components/general/range-slider/range-slider.component.d.ts +54 -0
- package/dist/components/general/rating/rating.component.d.ts +39 -0
- package/dist/components/general/tooltip/tooltip.component.d.ts +32 -0
- package/dist/components/index.d.ts +231 -0
- package/dist/components/landing-pages/index.d.ts +1 -0
- package/dist/components/landing-pages/landing-page/landing-page.component.d.ts +32 -0
- package/dist/components/recommendations/index.d.ts +2 -0
- package/dist/components/recommendations/recommendations/recommendations.component.d.ts +87 -0
- package/dist/components/recommendations/recommendations-item/recommendations-item.component.d.ts +40 -0
- package/dist/components/search/autocomplete/autocomplete.component.d.ts +59 -0
- package/dist/components/search/facet-types/base-facet.component.d.ts +44 -0
- package/dist/components/search/facet-types/checkbox-list-facet/checkbox-list-facet.component.d.ts +36 -0
- package/dist/components/search/facet-types/color-facet/color-facet.component.d.ts +24 -0
- package/dist/components/search/facet-types/date-range-facet/date-range-facet.component.d.ts +33 -0
- package/dist/components/search/facet-types/index.d.ts +11 -0
- package/dist/components/search/facet-types/linked-list-facet/link-list-facet.component.d.ts +24 -0
- package/dist/components/search/facet-types/numeric-range-facet/numeric-range-facet.component.d.ts +32 -0
- package/dist/components/search/facet-types/range-slider-facet/range-slider-facet.component.d.ts +34 -0
- package/dist/components/search/facet-types/recent-searches-facet/recent-searches-facet.component.d.ts +29 -0
- package/dist/components/search/facet-types/related-searches-facet/related-searches-facet.component.d.ts +29 -0
- package/dist/components/search/facet-types/search-within-facet/search-within-facet.component.d.ts +29 -0
- package/dist/components/search/facet-types/size-facet/size-facet.component.d.ts +24 -0
- package/dist/components/search/facet-wrapper/facet-wrapper.component.d.ts +47 -0
- package/dist/components/search/facets-list/facets-list.component.d.ts +32 -0
- package/dist/components/search/index.d.ts +15 -0
- package/dist/components/search/modified-query/modified-query.component.d.ts +32 -0
- package/dist/components/search/page-size/page-size.component.d.ts +32 -0
- package/dist/components/search/pagination/pagination.component.d.ts +43 -0
- package/dist/components/search/query-suggestions/query-suggestions.component.d.ts +38 -0
- package/dist/components/search/search-field/search-field.component.d.ts +40 -0
- package/dist/components/search/search-results/search-results.component.d.ts +34 -0
- package/dist/components/search/search-results-item/search-results-item.component.d.ts +38 -0
- package/dist/components/search/search-results-list/search-results-list.component.d.ts +23 -0
- package/dist/components/search/selected-facets/selected-facets.component.d.ts +31 -0
- package/dist/components/search/sorting/sorting.component.d.ts +30 -0
- package/dist/components/search/tabs/dist/tabs.component.spec.d.ts +1 -0
- package/dist/components/search/tabs/tabs.component.d.ts +30 -0
- package/dist/components/variants/index.d.ts +1 -0
- package/dist/components/variants/variant-selector/variant-selector.component.d.ts +23 -0
- package/dist/configuration/configuration.models.d.ts +609 -0
- package/dist/configuration/index.d.ts +4 -0
- package/dist/helpers/helpers.d.ts +221 -0
- package/dist/helpers/index.d.ts +4 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +3 -0
- package/dist/index.js.LICENSE.txt +26 -0
- package/dist/index.js.map +1 -0
- package/dist/models/autocomplete.models.d.ts +85 -0
- package/dist/models/base.models.d.ts +50 -0
- package/dist/models/component.models.d.ts +453 -0
- package/dist/models/content.models.d.ts +94 -0
- package/dist/models/index.d.ts +11 -0
- package/dist/models/raw/index.d.ts +4 -0
- package/dist/models/raw/raw-autocomplete.models.d.ts +51 -0
- package/dist/models/raw/raw-base.models.d.ts +8 -0
- package/dist/models/raw/raw-recommendation.models.d.ts +39 -0
- package/dist/models/raw/raw-search.models.d.ts +191 -0
- package/dist/models/recommendation.models.d.ts +31 -0
- package/dist/models/search.models.d.ts +237 -0
- package/dist/models/tracking.models.d.ts +42 -0
- package/dist/placeholder.c99b7374b9bf579d0fd0.png +0 -0
- package/dist/services/autocomplete.service.d.ts +11 -0
- package/dist/services/base.service.d.ts +63 -0
- package/dist/services/index.d.ts +8 -0
- package/dist/services/recommendations.service.d.ts +10 -0
- package/dist/services/search.service.d.ts +53 -0
- package/dist/services/tracking.service.d.ts +29 -0
- package/dist/styles.65c0ab8e75ac4bcab10e99f66a160664.css +1 -0
- package/dist/utilities/colors.d.ts +1 -0
- package/dist/utilities/dates.d.ts +4 -0
- package/dist/utilities/decodes.d.ts +1 -0
- package/dist/utilities/formatters.d.ts +4 -0
- package/dist/utilities/index.d.ts +7 -0
- package/package.json +1 -1
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ## Overriding Component Templates
|
|
3
|
+
*
|
|
4
|
+
* This library was designed to be flexible and allow total customization of the markup used by all components.
|
|
5
|
+
*
|
|
6
|
+
* There are two ways to replace the Handlebars template used by a component:
|
|
7
|
+
*
|
|
8
|
+
* - Pass a template HTML string containing a Handlebars template.
|
|
9
|
+
* - Pass the ID of a template element containing a Handlebars template.
|
|
10
|
+
*
|
|
11
|
+
* *Note: To avoid conflicts with BigCommerce and other systems that Handlebars for server-side rendering, this library also supports an alternate `[[value]]` syntax to work the same as the default Handlerbars `{{value}}` syntax.*
|
|
12
|
+
*
|
|
13
|
+
* ### Passing an HTML string
|
|
14
|
+
*
|
|
15
|
+
* In your HTML file, define the template content directly in the configuration options:
|
|
16
|
+
*
|
|
17
|
+
* ```html
|
|
18
|
+
* <!DOCTYPE html>
|
|
19
|
+
* <html>
|
|
20
|
+
* <head>
|
|
21
|
+
* <meta charset="utf-8" />
|
|
22
|
+
* <title>HawkSearch Handlebars UI</title>
|
|
23
|
+
* <meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
24
|
+
* <script type="text/javascript">
|
|
25
|
+
* var HawkSearch = HawkSearch || {};
|
|
26
|
+
*
|
|
27
|
+
* HawkSearch.config = {
|
|
28
|
+
* clientId: "YOUR_CLIENTID_HERE",
|
|
29
|
+
* components: {
|
|
30
|
+
* pageSize: {
|
|
31
|
+
* template: `
|
|
32
|
+
* <div class='page-size'>
|
|
33
|
+
* <select hawksearch-page-size>
|
|
34
|
+
* {{#each options}}
|
|
35
|
+
* <option value='{{pageSize}}' {{attribute 'selected' selected}}>{{title}}</option>
|
|
36
|
+
* {{/each}}
|
|
37
|
+
* </select>
|
|
38
|
+
* </div>`
|
|
39
|
+
* }
|
|
40
|
+
* }
|
|
41
|
+
* };
|
|
42
|
+
* </script>
|
|
43
|
+
* <script src="node_modules/@bridgeline-digital/hawksearch-handlebars-ui/dist/handlebars-ui.js" defer ></script>
|
|
44
|
+
* </head>
|
|
45
|
+
* <body>
|
|
46
|
+
* <h1>HawkSearch Handlebars UI</h1>
|
|
47
|
+
* <hawksearch-search></hawksearch-search>
|
|
48
|
+
* <hawksearch-results></hawksearch-results>
|
|
49
|
+
* </body>
|
|
50
|
+
* </html>
|
|
51
|
+
* ```
|
|
52
|
+
*
|
|
53
|
+
* ### Creating a script or template element
|
|
54
|
+
*
|
|
55
|
+
* In your HTML file, add the custom markup to either a `script` element with `type` attribute set to `text/x-handlebars-template` or a `template` element and pass the ID in the configuration options:
|
|
56
|
+
*
|
|
57
|
+
* ```html
|
|
58
|
+
* <!DOCTYPE html>
|
|
59
|
+
* <html>
|
|
60
|
+
* <head>
|
|
61
|
+
* <meta charset="utf-8" />
|
|
62
|
+
* <title>HawkSearch Handlebars UI</title>
|
|
63
|
+
* <meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
64
|
+
* <script type="text/javascript">
|
|
65
|
+
* var HawkSearch = HawkSearch || {};
|
|
66
|
+
*
|
|
67
|
+
* HawkSearch.config = {
|
|
68
|
+
* clientId: "f51060e1c38446f0bacdf283390c37e8",
|
|
69
|
+
* components: {
|
|
70
|
+
* pageSize: {
|
|
71
|
+
* template: 'page-size-template'
|
|
72
|
+
* }
|
|
73
|
+
* }
|
|
74
|
+
* };
|
|
75
|
+
* </script>
|
|
76
|
+
* <script src="node_modules/@bridgeline-digital/hawksearch-handlebars-ui/dist/handlebars-ui.js" defer ></script>
|
|
77
|
+
* </head>
|
|
78
|
+
* <body>
|
|
79
|
+
* <h1>HawkSearch Handlebars UI</h1>
|
|
80
|
+
* <hawksearch-search></hawksearch-search>
|
|
81
|
+
* <hawksearch-results></hawksearch-results>
|
|
82
|
+
* <script id="page-size-template" type="text/x-handlebars-template">
|
|
83
|
+
* <div class='page-size'>
|
|
84
|
+
* <select hawksearch-page-size>
|
|
85
|
+
* {{#each options}}
|
|
86
|
+
* <option value='{{pageSize}}' {{attribute 'selected' selected}}>{{title}}</option>
|
|
87
|
+
* {{/each}}
|
|
88
|
+
* </select>
|
|
89
|
+
* </div>
|
|
90
|
+
* </script>
|
|
91
|
+
* </body>
|
|
92
|
+
* </html>
|
|
93
|
+
* ```
|
|
94
|
+
*
|
|
95
|
+
* * *Note: `script` elements are preferred over `template` elements as they prevent some browser parsing behavior which can conflict with Handlebars directives in some edge cases.*
|
|
96
|
+
*
|
|
97
|
+
* *Note: This approach tends to be easier to manage than the previous option as it is more compatible with popular HTML editors and templates can potentially be loaded from separate files using Server-side Includes (SSI).*
|
|
98
|
+
*
|
|
99
|
+
* ## Customizing CSS
|
|
100
|
+
* By default, a neutral interface is rendered to get your search instance up and running quickly. However, this library was designed to be customizable and allow developers to use both custom markup and custom CSS.
|
|
101
|
+
*
|
|
102
|
+
* For developers who only wish to tweak the default UI rather than create something from scratch, there are some variables and utility methods defined in the default CSS that are available for use.
|
|
103
|
+
*
|
|
104
|
+
* ### Variables
|
|
105
|
+
* Although all components in this library utilize the Shadow DOM, CSS variables are able to cross this boundary in a way that normal CSS rules are not. The following variables can be customized in the host DOM to easily customize some of the default styles:
|
|
106
|
+
*
|
|
107
|
+
* | Variable | Default Value |
|
|
108
|
+
* | :- | :- |
|
|
109
|
+
* | --hawksearch-container-background--alternate | `var(--color-secondary-light)` |
|
|
110
|
+
* | --hawksearch-container-border | `solid 1px var(--color-secondary)` |
|
|
111
|
+
* | --hawksearch-default-line-height | `1.25` |
|
|
112
|
+
* | --hawksearch-default-font-color | `#333333` |
|
|
113
|
+
* | --hawksearch-default-font-color--inverse | `#ffffff` |
|
|
114
|
+
* | --hawksearch-default-font-family | `Arial, sans-serif` |
|
|
115
|
+
* | --hawksearch-default-font-size | `16px` |
|
|
116
|
+
* | --hawksearch-button-background | `var(--color-accent)` |
|
|
117
|
+
* | --hawksearch-button-border-radius | `5px` |
|
|
118
|
+
* | --hawksearch-button-font-color | `#ffffff` |
|
|
119
|
+
* | --hawksearch-form-element-background | `var(--color-background)` |
|
|
120
|
+
* | --hawksearch-form-element-border | `solid 1px var(--color-secondary)` |
|
|
121
|
+
* | --hawksearch-form-element-border--focus | `solid 1px var(--color-accent)` |
|
|
122
|
+
* | --hawksearch-form-element-border-radius | `0` |
|
|
123
|
+
* | --hawksearch-form-element-placeholder-color | `var(--color-secondary-dark)` |
|
|
124
|
+
* | --hawksearch-margin | `32px` |
|
|
125
|
+
* | --hawksearch-margin-sm | `calc(var(--margin) / 2)` |
|
|
126
|
+
* | --hawksearch-padding | `24px` |
|
|
127
|
+
* | --hawksearch-padding-xs | `calc(var(--padding) / 4)` |
|
|
128
|
+
* | --hawksearch-padding-sm | `calc(var(--padding) / 2)` |
|
|
129
|
+
* | --hawksearch-secondary-font-color | `var(--color-secondary-dark)` |
|
|
130
|
+
*
|
|
131
|
+
* *Note: Internally, all variables omit the hawksearch- prefix. This prefix is used only to override the default values.*
|
|
132
|
+
*
|
|
133
|
+
* ### Breakpoints
|
|
134
|
+
*
|
|
135
|
+
* This library uses responsive design with the following breakpoints defined:
|
|
136
|
+
*
|
|
137
|
+
* | Name | Suffix | Minimum Width |
|
|
138
|
+
* | :- | :- | :- |
|
|
139
|
+
* | | | `0px` |
|
|
140
|
+
* | small | `-sm` | `740px` |
|
|
141
|
+
* | medium | `-md` | `990px` |
|
|
142
|
+
* | large | `-lg` | `1260px` |
|
|
143
|
+
* | extra-large | `-xl` | `1800px` |
|
|
144
|
+
*
|
|
145
|
+
* ### Grid System
|
|
146
|
+
*
|
|
147
|
+
* This library uses a 12-column, responsive grid system. To use this system, all columns must have a `column` class and be the direct children of an element with a `row` class. The number of columns each column elements spans can be controlled with `column--XX` classes.
|
|
148
|
+
*
|
|
149
|
+
* For example, the following will render two equal columns that are stacked until the browser window reaches the `Medium` breakpoint:
|
|
150
|
+
*
|
|
151
|
+
* ```html
|
|
152
|
+
* <div class="row">
|
|
153
|
+
* <div class="column column--12 column-md--6">Column 1</div>
|
|
154
|
+
* <div class="column column--12 column-md--6">Column 2</div>
|
|
155
|
+
* </div>
|
|
156
|
+
* ```
|
|
157
|
+
*
|
|
158
|
+
* #### Row Modifiers
|
|
159
|
+
* The following CSS classes can be added to modify the row display:
|
|
160
|
+
*
|
|
161
|
+
* | CSS Class | Description |
|
|
162
|
+
* | :- | :- |
|
|
163
|
+
* | `row--reverse` | This will cause all columns to be rendered in the reverse order that they are defined |
|
|
164
|
+
* | `row--tight` | This will reduce the space between columns to use `var(--padding-xs)` |
|
|
165
|
+
*
|
|
166
|
+
* #### Column Modifiers
|
|
167
|
+
* The following CSS classes can be added to modify the column display:
|
|
168
|
+
*
|
|
169
|
+
* | CSS Class | Description |
|
|
170
|
+
* | :- | :- |
|
|
171
|
+
* | `column--pull-right` | This will force the column to pull to be aligned to the end of the row |
|
|
172
|
+
*
|
|
173
|
+
* ### Utility Classes
|
|
174
|
+
* There are several basic utility classes available to quickly customize the display of elements.
|
|
175
|
+
*
|
|
176
|
+
* *Note: All utility classes support the suffixes defined in Breakpoints. For example, `display-block` and `display-sm-none` are both valid.*
|
|
177
|
+
*
|
|
178
|
+
* * #### Display
|
|
179
|
+
*
|
|
180
|
+
* | CSS Class | Description |
|
|
181
|
+
* | :- | :- |
|
|
182
|
+
* | display-block | This will display an element |
|
|
183
|
+
* | display-none | This will hide an element |
|
|
184
|
+
*
|
|
185
|
+
* #### Flex Vertical
|
|
186
|
+
*
|
|
187
|
+
* | CSS Class | Description |
|
|
188
|
+
* | :- | :- |
|
|
189
|
+
* | flex-vertical-center | This will vertically center the children of an element |
|
|
190
|
+
*
|
|
191
|
+
* #### Flex Gap
|
|
192
|
+
*
|
|
193
|
+
* | CSS Class | Description |
|
|
194
|
+
* | :- | :- |
|
|
195
|
+
* | flex-gap | This will add equal `var(--padding)` spacing between each child element and allow wrapping onto the next row when necessary |
|
|
196
|
+
* | flex-gap--none | This modifier class eliminates the spacing between each child element |
|
|
197
|
+
* | flex-gap--sm | This modifier class reduces the spacing between each element to `var(--padding-sm)` |
|
|
198
|
+
* | flex-gap--xs | This modifier class reduces the spacing between each element to `var(--padding-xs)` |
|
|
199
|
+
*
|
|
200
|
+
* #### Margin
|
|
201
|
+
*
|
|
202
|
+
* | CSS Class | Description |
|
|
203
|
+
* | :- | :- |
|
|
204
|
+
* | margin | This adds bottom margin of `var(--margin)` |
|
|
205
|
+
* | margin-none | This removes bottom margin |
|
|
206
|
+
* | margin-sm | This adds bottom margin of `var(--margin-sm)` |
|
|
207
|
+
*
|
|
208
|
+
* #### Width
|
|
209
|
+
*
|
|
210
|
+
* | CSS Class | Description |
|
|
211
|
+
* | :- | :- |
|
|
212
|
+
* | width-auto | This allows an elements content to determine its width |
|
|
213
|
+
* | width-full | This forces an element’s width to match its parent element |
|
|
214
|
+
*
|
|
215
|
+
* #### Text Align
|
|
216
|
+
*
|
|
217
|
+
* | CSS Class | Description |
|
|
218
|
+
* | :- | :- |
|
|
219
|
+
* | text-align-left | This aligns descendant content to the left |
|
|
220
|
+
* | text-align-center | This aligns descendant content to the center |
|
|
221
|
+
* | text-align-right | This aligns descendant content to the right |
|
|
222
|
+
*
|
|
223
|
+
* @module Components
|
|
224
|
+
*/
|
|
225
|
+
export * from './base.component';
|
|
226
|
+
export * from './content';
|
|
227
|
+
export * from './general';
|
|
228
|
+
export * from './landing-pages';
|
|
229
|
+
export * from './recommendations';
|
|
230
|
+
export * from './search';
|
|
231
|
+
export * from './variants';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './landing-page/landing-page.component';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { BaseComponent } from '@components';
|
|
2
|
+
import { HawkSearchComponents, LandingPageComponentConfig } from '@configuration';
|
|
3
|
+
import { LandingPageComponentModel, SearchResponse } from '@models';
|
|
4
|
+
/**
|
|
5
|
+
* The Landing page component displays either a search results interface to display a subset of products, or a custom layout to display content items.
|
|
6
|
+
*
|
|
7
|
+
* ## Tag
|
|
8
|
+
* The tag for this component is `<hawksearch-landing-page>`.
|
|
9
|
+
*
|
|
10
|
+
* ## Attributes
|
|
11
|
+
* | Name | Value | Required |
|
|
12
|
+
* | :- | :- | :- |
|
|
13
|
+
* | url | `string` | No |
|
|
14
|
+
*
|
|
15
|
+
* By default, the URL sent to the HawkSearch API matches the current browser URL as reflected in `window.location.pathname`. This attribute can be used to override this with a custom value.
|
|
16
|
+
*
|
|
17
|
+
* ## Default Template
|
|
18
|
+
* The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.
|
|
19
|
+
* {@embed ./landing-page.component.hbs}
|
|
20
|
+
*
|
|
21
|
+
* @category Landing Pages
|
|
22
|
+
*/
|
|
23
|
+
export declare class LandingPageComponent extends BaseComponent<LandingPageComponentConfig, SearchResponse, LandingPageComponentModel> {
|
|
24
|
+
protected componentName: keyof HawkSearchComponents;
|
|
25
|
+
protected defaultHtml: any;
|
|
26
|
+
protected bindFromEvent: boolean;
|
|
27
|
+
protected get url(): string;
|
|
28
|
+
constructor();
|
|
29
|
+
protected renderContent(): boolean;
|
|
30
|
+
protected getContentModel(): LandingPageComponentModel;
|
|
31
|
+
private processCustomLayout;
|
|
32
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { BaseComponent } from '@components';
|
|
2
|
+
import { HawkSearchComponents, RecommendationsComponentConfig } from '@configuration';
|
|
3
|
+
import { RecommendationsComponentModel, RecommendationsWidget } from '@models';
|
|
4
|
+
/**
|
|
5
|
+
* The Recommendations component displays a list of products determined by the rules configured in the HawkSearch admin.
|
|
6
|
+
*
|
|
7
|
+
* ## Tag
|
|
8
|
+
* The tag for this component is `<hawksearch-recommendations>`.
|
|
9
|
+
*
|
|
10
|
+
* ## Attributes
|
|
11
|
+
* | Name | Value | Required |
|
|
12
|
+
* | :- | :- | :- |
|
|
13
|
+
* | widget-id | `string` | Yes |
|
|
14
|
+
*
|
|
15
|
+
* This attribute specifies which recommendation configuration created in the HawkSearch admin is retrieved from the API.
|
|
16
|
+
*
|
|
17
|
+
* ## Event-Binding Attributes
|
|
18
|
+
*
|
|
19
|
+
* | Name | Value |
|
|
20
|
+
* | :- | :- |
|
|
21
|
+
* | hawksearch-carousel | |
|
|
22
|
+
*
|
|
23
|
+
* This attribute should be placed on the element that contains each individual item element of a carousel. This is used to bind touch events.
|
|
24
|
+
*
|
|
25
|
+
* | Name | Value |
|
|
26
|
+
* | :- | :- |
|
|
27
|
+
* | hawksearch-carousel-item | `number` |
|
|
28
|
+
*
|
|
29
|
+
* When an element with this attribute is clicked, the carousel will move to display the range of items starting with the given index. This is typically used within pagination for the carousel.
|
|
30
|
+
*
|
|
31
|
+
* | Name | Value |
|
|
32
|
+
* | :- | :- |
|
|
33
|
+
* | hawksearch-next | |
|
|
34
|
+
*
|
|
35
|
+
* When an element with this attribute is clicked, the carousel will display the next range of items.
|
|
36
|
+
*
|
|
37
|
+
* | Name | Value |
|
|
38
|
+
* | :- | :- |
|
|
39
|
+
* | hawksearch-previous | |
|
|
40
|
+
*
|
|
41
|
+
* When an element with this attribute is clicked, the carousel will display the previous range of items.
|
|
42
|
+
*
|
|
43
|
+
* ## Default Template
|
|
44
|
+
* The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.
|
|
45
|
+
* {@embed ./recommendations.component.hbs}
|
|
46
|
+
*
|
|
47
|
+
* @category Recommendations
|
|
48
|
+
*/
|
|
49
|
+
export declare class RecommendationsComponent extends BaseComponent<RecommendationsComponentConfig, RecommendationsWidget, RecommendationsComponentModel> {
|
|
50
|
+
static get observedAttributes(): Array<string>;
|
|
51
|
+
protected componentName: keyof HawkSearchComponents;
|
|
52
|
+
protected defaultHtml: any;
|
|
53
|
+
protected bindFromEvent: boolean;
|
|
54
|
+
private widgetId;
|
|
55
|
+
private itemId;
|
|
56
|
+
private requestTimer;
|
|
57
|
+
private get carousel();
|
|
58
|
+
private get carouselPosition();
|
|
59
|
+
private get displayType();
|
|
60
|
+
private get itemsToDisplay();
|
|
61
|
+
private get itemWidth();
|
|
62
|
+
private selectedIndex;
|
|
63
|
+
private autorotationTimer?;
|
|
64
|
+
private dragElement?;
|
|
65
|
+
private dragOffset?;
|
|
66
|
+
private dragOrigin?;
|
|
67
|
+
private previousDisplayType?;
|
|
68
|
+
private touchMoveEventHandler;
|
|
69
|
+
private touchEndEventHandler;
|
|
70
|
+
private windowResizeEventHandler;
|
|
71
|
+
constructor();
|
|
72
|
+
connectedCallback(): void;
|
|
73
|
+
disconnectedCallback(): void;
|
|
74
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
75
|
+
protected renderContent(): boolean;
|
|
76
|
+
protected getContentModel(): RecommendationsComponentModel;
|
|
77
|
+
protected bindChildElements(): void;
|
|
78
|
+
protected onRender(): void;
|
|
79
|
+
private toggleAutorotation;
|
|
80
|
+
private previous;
|
|
81
|
+
private next;
|
|
82
|
+
private getSelected;
|
|
83
|
+
private displayItem;
|
|
84
|
+
private onWindowResize;
|
|
85
|
+
private onTouchMove;
|
|
86
|
+
private onTouchEnd;
|
|
87
|
+
}
|
package/dist/components/recommendations/recommendations-item/recommendations-item.component.d.ts
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { BaseComponent } from '@components';
|
|
2
|
+
import { HawkSearchComponents, RecommendationsItemComponentConfig } from '@configuration';
|
|
3
|
+
import { RecommendationsItem, RecommendationsItemComponentModel } from '@models';
|
|
4
|
+
/**
|
|
5
|
+
* The Recommendations Item component displays information for an individual product or page.
|
|
6
|
+
*
|
|
7
|
+
* ## Tag
|
|
8
|
+
* The tag for this component is `<hawksearch-recommendations-item>`.
|
|
9
|
+
*
|
|
10
|
+
* *Note: This component should only be used within the context of the {@link Components.RecommendationsComponent | Recommendations component}.
|
|
11
|
+
*
|
|
12
|
+
* ## Event-Binding Attributes
|
|
13
|
+
* | Name | Value |
|
|
14
|
+
* | :- | :- |
|
|
15
|
+
* | hawksearch-image | |
|
|
16
|
+
*
|
|
17
|
+
* Image elements with this attribute will have their `src` value replaced with a placeholder image URL if the image fails to load.
|
|
18
|
+
*
|
|
19
|
+
* | Name | Value |
|
|
20
|
+
* | :- | :- |
|
|
21
|
+
* | hawksearch-link | |
|
|
22
|
+
*
|
|
23
|
+
* Anchor elements with this attribute will be tracked when clicked.
|
|
24
|
+
*
|
|
25
|
+
* ## Default Template
|
|
26
|
+
* The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.
|
|
27
|
+
* {@embed ./recommendations-item.component.hbs}
|
|
28
|
+
*
|
|
29
|
+
* @category Recommendations
|
|
30
|
+
*/
|
|
31
|
+
export declare class RecommendationsItemComponent extends BaseComponent<RecommendationsItemComponentConfig, RecommendationsItem, RecommendationsItemComponentModel> {
|
|
32
|
+
protected componentName: keyof HawkSearchComponents;
|
|
33
|
+
protected defaultHtml: any;
|
|
34
|
+
protected bindFromEvent: boolean;
|
|
35
|
+
private get widgetId();
|
|
36
|
+
private get requestId();
|
|
37
|
+
protected renderContent(): boolean;
|
|
38
|
+
protected getContentModel(): RecommendationsItemComponentModel;
|
|
39
|
+
protected onRender(): void;
|
|
40
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { BaseComponent } from '@components';
|
|
2
|
+
import { AutocompleteComponentConfig, HawkSearchComponents } from '@configuration';
|
|
3
|
+
import { AutocompleteComponentModel, AutocompleteResponse } from '@models';
|
|
4
|
+
/**
|
|
5
|
+
* The Autocomplete component displays a preview of search results after a user begins to type a query in the {@link Components.SearchFieldComponent}.
|
|
6
|
+
*
|
|
7
|
+
* ## Tag
|
|
8
|
+
* The tag for this component is `<hawksearch-autocomplete>`.
|
|
9
|
+
*
|
|
10
|
+
* ## Event-Binding Attributes
|
|
11
|
+
* ### Categories
|
|
12
|
+
* | Name | Value |
|
|
13
|
+
* | :- | :- |
|
|
14
|
+
* | hawksearch-category-field | {@link Models.AutocompleteCategory.field} |
|
|
15
|
+
* | hawksearch-category-field | {@link Models.AutocompleteCategory.value} |
|
|
16
|
+
*
|
|
17
|
+
* ### Content Results
|
|
18
|
+
* | Name | Value |
|
|
19
|
+
* | :- | :- |
|
|
20
|
+
* | hawksearch-content | {@link Models.AutocompleteProductResult.id } |
|
|
21
|
+
*
|
|
22
|
+
* When an element with this attribute is clicked, the click will be tracked and the user will be redirected to the page corresponding to that content item.
|
|
23
|
+
*
|
|
24
|
+
* ### Product Results
|
|
25
|
+
* | Name | Value |
|
|
26
|
+
* | :- | :- |
|
|
27
|
+
* | hawksearch-product | {@link Models.AutocompleteProductResult.id } |
|
|
28
|
+
*
|
|
29
|
+
* When an element with this attribute is clicked, the click will be tracked and the user will be redirected to the page corresponding to that content item.
|
|
30
|
+
*
|
|
31
|
+
* ### Query Results (Popular Queries)
|
|
32
|
+
* | Name | Value |
|
|
33
|
+
* | :- | :- |
|
|
34
|
+
* | hawksearch-query | {@link Models.AutocompleteQuery.query } |
|
|
35
|
+
*
|
|
36
|
+
* When an element with this attribute is clicked, the click will be tracked and the user will be redirected to the page corresponding to that product.
|
|
37
|
+
*
|
|
38
|
+
* ### View All Results
|
|
39
|
+
* | Name | Value |
|
|
40
|
+
* | :- | :- |
|
|
41
|
+
* | hawksearch-view-all | |
|
|
42
|
+
*
|
|
43
|
+
* When an element with this attribute is clicked, a new search will be executed with the query entered in the search box.
|
|
44
|
+
*
|
|
45
|
+
* ## Default Template
|
|
46
|
+
* The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.
|
|
47
|
+
* {@embed ./autocomplete.component.hbs}
|
|
48
|
+
*
|
|
49
|
+
* @category Search
|
|
50
|
+
*/
|
|
51
|
+
export declare class AutocompleteComponent extends BaseComponent<AutocompleteComponentConfig, AutocompleteResponse, AutocompleteComponentModel> {
|
|
52
|
+
protected bindFromEvent: boolean;
|
|
53
|
+
protected componentName: keyof HawkSearchComponents;
|
|
54
|
+
protected defaultHtml: any;
|
|
55
|
+
protected renderContent(): boolean;
|
|
56
|
+
protected getContentModel(): AutocompleteComponentModel;
|
|
57
|
+
protected onRender(): void;
|
|
58
|
+
private close;
|
|
59
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { BaseComponent } from '@components';
|
|
2
|
+
import { BaseComponentConfig } from '@configuration';
|
|
3
|
+
import { BaseComponentModel, Facet, FacetState } from '@models';
|
|
4
|
+
/**
|
|
5
|
+
* The Base Facet component is inherited by all facet type copmonents.
|
|
6
|
+
*
|
|
7
|
+
* ## Event-Binding Attributes
|
|
8
|
+
* The following attributes are common to all facet type components. Individual facet types may support additional attribute bindings.
|
|
9
|
+
*
|
|
10
|
+
* | Name | Value |
|
|
11
|
+
* | :- | :- |
|
|
12
|
+
* | hawksearch-facet-value | `string` (if applicable) |
|
|
13
|
+
*
|
|
14
|
+
* When a checkbox input element with this attribute is checked or unchecked, the value of that element will be added or removed from the search request as appropriate. For non-input elements, the attribute value will be used instead of a form element value.
|
|
15
|
+
*
|
|
16
|
+
* | Name | Value |
|
|
17
|
+
* | :- | :- |
|
|
18
|
+
* | hawksearch-facet-value-exclude | `string` |
|
|
19
|
+
*
|
|
20
|
+
* When an element with this attribute is clicked, search results with the corresponding attribute value will be excluded from search results.
|
|
21
|
+
*
|
|
22
|
+
* | Name | Value |
|
|
23
|
+
* | :- | :- |
|
|
24
|
+
* | hawksearch-facet-value-include | `string` |
|
|
25
|
+
*
|
|
26
|
+
* When an element with this attribute is clicked, search results with the corresponding attribute value will no longer be excluded from search results.
|
|
27
|
+
*
|
|
28
|
+
* *Note: Elements with this attribute value should only be displayed for facet values that are excluded.*
|
|
29
|
+
*
|
|
30
|
+
* | Name | Value |
|
|
31
|
+
* | :- | :- |
|
|
32
|
+
* | hawksearch-facet-value-toggle | |
|
|
33
|
+
*
|
|
34
|
+
* When an element with this attribute is clicked, child facet values will be displayed or hidden as appropriate.
|
|
35
|
+
*
|
|
36
|
+
* *Note: This attribute should only be used for facets that support nested values.*
|
|
37
|
+
*
|
|
38
|
+
* @category Facet Types
|
|
39
|
+
*/
|
|
40
|
+
export declare abstract class BaseFacetComponent<TConfig extends BaseComponentConfig, TModel extends BaseComponentModel> extends BaseComponent<TConfig, Facet, TModel> {
|
|
41
|
+
protected bindFromEvent: boolean;
|
|
42
|
+
state: FacetState;
|
|
43
|
+
protected onRender(): void;
|
|
44
|
+
}
|
package/dist/components/search/facet-types/checkbox-list-facet/checkbox-list-facet.component.d.ts
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { CheckboxListFacetComponentConfig, HawkSearchComponents } from '@configuration';
|
|
2
|
+
import { CheckboxListFacetComponentModel } from '@models';
|
|
3
|
+
import { BaseFacetComponent } from '../base-facet.component';
|
|
4
|
+
/**
|
|
5
|
+
* The Checkbox List Facet component renders a checkbox for each facet and may be nested depending on the configuration in the HawkSearch admin.
|
|
6
|
+
*
|
|
7
|
+
* ## Tag
|
|
8
|
+
* The tag for this component is `<hawksearch-checkbox-list-facet>`.
|
|
9
|
+
*
|
|
10
|
+
* ## Event-Binding Attributes
|
|
11
|
+
* *Note: For Event-Binding attributes common to all facet type components, see {@link Components.BaseFacetComponent}.*
|
|
12
|
+
*
|
|
13
|
+
* ## Handlebars Partials
|
|
14
|
+
* | Name | Parameter |
|
|
15
|
+
* | :- | :- |
|
|
16
|
+
* | facet-checkbox-list | `Array<CheckboxListFacetValue>` |
|
|
17
|
+
*
|
|
18
|
+
* This partial renders a checkbox for each facet value along with any applicable actions (include, exclude, toggle).
|
|
19
|
+
*
|
|
20
|
+
* *Note: For more information, see {@link Models.CheckboxListFacetValue}.*
|
|
21
|
+
*
|
|
22
|
+
* {@embed ./facet-checkbox-list.partial.hbs}
|
|
23
|
+
*
|
|
24
|
+
* ## Default Template
|
|
25
|
+
* The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.
|
|
26
|
+
* {@embed ./checkbox-list-facet.component.hbs}
|
|
27
|
+
*
|
|
28
|
+
* @category Facet Types
|
|
29
|
+
*/
|
|
30
|
+
export declare class CheckboxListFacetComponent extends BaseFacetComponent<CheckboxListFacetComponentConfig, CheckboxListFacetComponentModel> {
|
|
31
|
+
protected componentName: keyof HawkSearchComponents;
|
|
32
|
+
protected defaultHtml: any;
|
|
33
|
+
protected registerHelpers(): void;
|
|
34
|
+
protected renderContent(): boolean;
|
|
35
|
+
protected getContentModel(): CheckboxListFacetComponentModel;
|
|
36
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { ColorFacetComponentConfig, HawkSearchComponents } from '@configuration';
|
|
2
|
+
import { ColorFacetComponentModel } from '@models';
|
|
3
|
+
import { BaseFacetComponent } from '../base-facet.component';
|
|
4
|
+
/**
|
|
5
|
+
* The Color Facet component renders a box with color preview for each value.
|
|
6
|
+
*
|
|
7
|
+
* ## Tag
|
|
8
|
+
* The tag for this component is `<hawksearch-color-facet>`.
|
|
9
|
+
*
|
|
10
|
+
* ## Event-Binding Attributes
|
|
11
|
+
* *Note: For Event-Binding attributes common to all facet type components, see {@link Components.BaseFacetComponent}.*
|
|
12
|
+
*
|
|
13
|
+
* ## Default Template
|
|
14
|
+
* The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.
|
|
15
|
+
* {@embed ./color-facet.component.hbs}
|
|
16
|
+
*
|
|
17
|
+
* @category Facet Types
|
|
18
|
+
*/
|
|
19
|
+
export declare class ColorFacetComponent extends BaseFacetComponent<ColorFacetComponentConfig, ColorFacetComponentModel> {
|
|
20
|
+
protected componentName: keyof HawkSearchComponents;
|
|
21
|
+
protected defaultHtml: any;
|
|
22
|
+
protected renderContent(): boolean;
|
|
23
|
+
protected getContentModel(): ColorFacetComponentModel;
|
|
24
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { DateRangeFacetComponentConfig, HawkSearchComponents } from '@configuration';
|
|
2
|
+
import { DateRangeFacetComponentModel } from '@models';
|
|
3
|
+
import { BaseFacetComponent } from '../base-facet.component';
|
|
4
|
+
/**
|
|
5
|
+
* The Date Range Facet component renders number input elements for minimum and maximum value.
|
|
6
|
+
*
|
|
7
|
+
* ## Tag
|
|
8
|
+
* The tag for this component is `<hawksearch-date-range-facet>`.
|
|
9
|
+
*
|
|
10
|
+
* ## Event-Binding Attributes
|
|
11
|
+
* | Name | Value |
|
|
12
|
+
* | :- | :- |
|
|
13
|
+
* | hawksearch-start | |
|
|
14
|
+
* | hawksearch-end | |
|
|
15
|
+
*
|
|
16
|
+
* These attributes should be placed on {@link Components.DatePickerComponent | Date Picker} elements. When these elements lose focus (blurred), the entered range will be applied as a facet value.
|
|
17
|
+
*
|
|
18
|
+
* ## Default Template
|
|
19
|
+
* The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.
|
|
20
|
+
* {@embed ./date-range-facet.component.hbs}
|
|
21
|
+
*
|
|
22
|
+
* @category Facet Types
|
|
23
|
+
*/
|
|
24
|
+
export declare class DateRangeFacetComponent extends BaseFacetComponent<DateRangeFacetComponentConfig, DateRangeFacetComponentModel> {
|
|
25
|
+
protected componentName: keyof HawkSearchComponents;
|
|
26
|
+
protected defaultHtml: any;
|
|
27
|
+
private get range();
|
|
28
|
+
protected renderContent(): boolean;
|
|
29
|
+
protected getContentModel(): DateRangeFacetComponentModel;
|
|
30
|
+
protected onRender(): void;
|
|
31
|
+
private updateInputElements;
|
|
32
|
+
private setFacetValue;
|
|
33
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export * from './base-facet.component';
|
|
2
|
+
export * from './checkbox-list-facet/checkbox-list-facet.component';
|
|
3
|
+
export * from './color-facet/color-facet.component';
|
|
4
|
+
export * from './date-range-facet/date-range-facet.component';
|
|
5
|
+
export * from './linked-list-facet/link-list-facet.component';
|
|
6
|
+
export * from './numeric-range-facet/numeric-range-facet.component';
|
|
7
|
+
export * from './range-slider-facet/range-slider-facet.component';
|
|
8
|
+
export * from './recent-searches-facet/recent-searches-facet.component';
|
|
9
|
+
export * from './related-searches-facet/related-searches-facet.component';
|
|
10
|
+
export * from './search-within-facet/search-within-facet.component';
|
|
11
|
+
export * from './size-facet/size-facet.component';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { HawkSearchComponents, LinkListFacetComponentConfig } from '@configuration';
|
|
2
|
+
import { LinkListFacetComponentModel } from '@models';
|
|
3
|
+
import { BaseFacetComponent } from '../base-facet.component';
|
|
4
|
+
/**
|
|
5
|
+
* The Linked List Facet component renders a hyperlink for each value.
|
|
6
|
+
*
|
|
7
|
+
* ## Tag
|
|
8
|
+
* The tag for this component is `<hawksearch-link-list-facet>`.
|
|
9
|
+
*
|
|
10
|
+
* ## Event-Binding Attributes
|
|
11
|
+
* *Note: For Event-Binding attributes common to all facet type components, see {@link Components.BaseFacetComponent}.*
|
|
12
|
+
*
|
|
13
|
+
* ## Default Template
|
|
14
|
+
* The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.
|
|
15
|
+
* {@embed ./link-list-facet.component.hbs}
|
|
16
|
+
*
|
|
17
|
+
* @category Facet Types
|
|
18
|
+
*/
|
|
19
|
+
export declare class LinkListFacetComponent extends BaseFacetComponent<LinkListFacetComponentConfig, LinkListFacetComponentModel> {
|
|
20
|
+
protected componentName: keyof HawkSearchComponents;
|
|
21
|
+
protected defaultHtml: any;
|
|
22
|
+
protected renderContent(): boolean;
|
|
23
|
+
protected getContentModel(): LinkListFacetComponentModel;
|
|
24
|
+
}
|
package/dist/components/search/facet-types/numeric-range-facet/numeric-range-facet.component.d.ts
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { HawkSearchComponents, NumericRangeFacetComponentConfig } from '@configuration';
|
|
2
|
+
import { NumericRangeFacetComponentModel } from '@models';
|
|
3
|
+
import { BaseFacetComponent } from '../base-facet.component';
|
|
4
|
+
/**
|
|
5
|
+
* The Numeric Range Facet component renders number input elements for minimum and maximum value.
|
|
6
|
+
*
|
|
7
|
+
* ## Tag
|
|
8
|
+
* The tag for this component is `<hawksearch-numeric-range-facet>`.
|
|
9
|
+
*
|
|
10
|
+
* ## Event-Binding Attributes
|
|
11
|
+
* | Name | Value |
|
|
12
|
+
* | :- | :- |
|
|
13
|
+
* | hawksearch-start | |
|
|
14
|
+
* | hawksearch-end | |
|
|
15
|
+
*
|
|
16
|
+
* These attributes should be placed on number input elements. When these elements lose focus (blurred), the entered range will be applied as a facet value.
|
|
17
|
+
*
|
|
18
|
+
* ## Default Template
|
|
19
|
+
* The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.
|
|
20
|
+
* {@embed ./numeric-range-facet.component.hbs}
|
|
21
|
+
*
|
|
22
|
+
* @category Facet Types
|
|
23
|
+
*/
|
|
24
|
+
export declare class NumericRangeFacetComponent extends BaseFacetComponent<NumericRangeFacetComponentConfig, NumericRangeFacetComponentModel> {
|
|
25
|
+
protected componentName: keyof HawkSearchComponents;
|
|
26
|
+
protected defaultHtml: any;
|
|
27
|
+
private get range();
|
|
28
|
+
protected renderContent(): boolean;
|
|
29
|
+
protected getContentModel(): NumericRangeFacetComponentModel;
|
|
30
|
+
protected onRender(): void;
|
|
31
|
+
private setFacetValue;
|
|
32
|
+
}
|