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

package/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+**/*.d.ts

package/.eslintrc.json

@@ -0,0 +1,153 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
+    "extends": ["eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+    "rules": {
+        "array-bracket-spacing": "off",
+        "array-element-newline": "off",
+        "arrow-spacing": "off",
+        "block-scoped-var": ["warn"],
+        "block-spacing": "off",
+        "brace-style": "off",
+        "camelcase": ["warn"],
+        "comma-dangle": "off",
+        "comma-spacing": "off",
+        "comma-style": "off",
+        "computed-property-spacing": "off",
+        "consistent-return": ["warn"],
+        "consistent-this": ["error"],
+        "curly": "off",
+        "default-case": ["off"],
+        "default-case-last": ["warn"],
+        "default-param-last": ["error"],
+        "dot-location": "off",
+        "eol-last": "off",
+        "func-call-spacing": "off",
+        "func-name-matching": ["warn"],
+        "func-names": ["warn", "never"],
+        "function-call-argument-newline": "off",
+        "function-paren-newline": "off",
+        "grouped-accessor-pairs": ["warn", "getBeforeSet"],
+        "guard-for-in": ["error"],
+        "implicit-arrow-linebreak": "off",
+        "indent": "off",
+        "jsx-quotes": "off",
+        "key-spacing": "off",
+        "keyword-spacing": "off",
+        "lines-between-class-members": [
+            "warn",
+            "always",
+            {
+                "exceptAfterSingleLine": true
+            }
+        ],
+        "multiline-comment-style": ["warn", "starred-block"],
+        "multiline-ternary": "off",
+        "new-cap": [
+            "warn",
+            {
+                "capIsNewExceptions": [
+                    "Component",
+                    "ContentChild",
+                    "ContentChildren",
+                    "Directive",
+                    "HostBinding",
+                    "HostListener",
+                    "Inject",
+                    "Injectable",
+                    "Input",
+                    "NgModule",
+                    "Optional",
+                    "Output",
+                    "Pipe",
+                    "Self",
+                    "ViewChild",
+                    "ViewChildren"
+                ]
+            }
+        ],
+        "new-parens": "off",
+        "newline-per-chained-call": "off",
+        "no-alert": ["error"],
+        "no-array-constructor": ["error"],
+        "no-constructor-return": ["error"],
+        "no-duplicate-imports": ["error"],
+        // "no-empty-function": ["warn", {
+        //     "allow": ["constructors"]
+        // }],
+        "no-eq-null": ["warn"],
+        "no-eval": ["error"],
+        "no-extend-native": ["error"],
+        "no-extra-bind": ["warn"],
+        "no-extra-parens": "off",
+        "no-labels": ["error"],
+        "no-lone-blocks": ["warn"],
+        "no-lonely-if": ["warn"],
+        "no-loop-func": ["warn"],
+        "no-multi-assign": ["error"],
+        "no-multi-spaces": "off",
+        "no-multiple-empty-lines": "off",
+        "no-nested-ternary": ["error"],
+        "no-new-wrappers": ["warn"],
+        "no-promise-executor-return": ["error"],
+        "no-self-compare": ["error"],
+        "no-template-curly-in-string": ["warn"],
+        "no-throw-literal": ["error"],
+        "no-trailing-spaces": "off",
+        "no-underscore-dangle": "off",
+        "no-unmodified-loop-condition": ["warn"],
+        "no-unneeded-ternary": ["warn"],
+        "no-unreachable-loop": ["warn"],
+        "no-unused-expressions": ["warn"],
+        "no-unused-private-class-members": ["warn"],
+        "no-useless-call": ["error"],
+        "no-useless-catch": ["error"],
+        "no-useless-computed-key": ["error"],
+        "no-useless-concat": ["warn"],
+        // "no-useless-constructor": ["warn"],
+        "no-useless-escape": ["warn"],
+        "no-useless-rename": ["warn"],
+        "no-useless-return": ["warn"],
+        "no-var": ["warn"],
+        "no-whitespace-before-property": "off",
+        "nonblock-statement-body-position": "off",
+        "object-curly-newline": "off",
+        "object-curly-spacing": "off",
+        "operator-linebreak": "off",
+        "one-var": ["warn", "never"],
+        "padded-blocks": "off",
+        "padding-line-between-statements": ["warn"],
+        "quote-props": "off",
+        "quotes": "off",
+        "rest-spread-spacing": "off",
+        "require-await": ["warn"],
+        "semi": "off",
+        "semi-spacing": "off",
+        "semi-style": "off",
+        "space-before-blocks": "off",
+        "space-before-function-paren": "off",
+        "space-in-parens": "off",
+        "space-infix-ops": "off",
+        "sort-imports": [
+            "warn",
+            {
+                "ignoreCase": false,
+                "ignoreDeclarationSort": true
+            }
+        ],
+        "spaced-comment": ["warn", "always"],
+        "switch-colon-spacing": "off",
+        "template-curly-spacing": "off",
+        "template-tag-spacing": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-empty-interface": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "unicode-bom": "off",
+        "vars-on-top": ["warn"],
+        "wrap-iife": "off"
+    }
+}

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx tsc
+npx lint-staged --concurrent false

package/.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+    "*.ts": "eslint --fix",
+    "*": "prettier --write ."
+}

package/.prettierignore

@@ -0,0 +1,7 @@
+.husky
+dist
+node_modules
+*.hbs
+*.png
+*.svg
+.prettierignore

package/.prettierrc.json

@@ -0,0 +1,19 @@
+{
+    "arrowParens": "always",
+    "bracketSameLine": false,
+    "bracketSpacing": true,
+    "embeddedLanguageFormatting": "auto",
+    "endOfLine": "lf",
+    "htmlWhitespaceSensitivity": "css",
+    "importOrder": ["^@(?:assets|components|helpers|models|services)", "^[./]"],
+    "importOrderParserPlugins": ["typescript", "decorators-legacy"],
+    "jsxSingleQuote": false,
+    "printWidth": 160,
+    "proseWrap": "preserve",
+    "quoteProps": "as-needed",
+    "semi": true,
+    "singleAttributePerLine": false,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "none"
+}

package/.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-msedge",
+            "request": "launch",
+            "name": "Launch Edge against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

package/custom1.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Hawksearch Demo (custom - nested)</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <style type="text/css">
+            body {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 16px;
+            }
+
+            .layout-container {
+                margin: 0 auto;
+                min-width: 340px;
+                max-width: 1280px;
+            }
+        </style>
+        <script type="text/javascript">
+            var Hawksearch = Hawksearch || {};
+
+            Hawksearch.config = {
+                clientId: 'f51060e1c38446f0bacdf283390c37e8'
+            };
+        </script>
+    </head>
+
+    <body>
+        <h1>Hawksearch Demo (custom - nested)</h1>
+        <hawksearch-pagination></hawksearch-pagination>
+        <hawksearch-results>
+            {{{{exclude}}}}
+            <hawksearch-results-list>
+                <h2>Custom List: {{test}}</h2>
+                {{#each items}} {{{{exclude}}}}
+                <hawksearch-results-item>
+                    <div>Custom item: {{title}}</div>
+                </hawksearch-results-item>
+                {{{{/exclude}}}} {{/each}}
+            </hawksearch-results-list>
+            {{{{/exclude}}}} {{{{exclude}}}}
+            <hawksearch-pagination>
+                {{#if displayFirstLink}}
+                <a hawksearch-page="1">FIRST</a>
+                {{/if}} {{#if displayLastLink}}
+                <a hawksearch-page="{{totalPages}}">LAST</a>
+                {{/if}}
+            </hawksearch-pagination>
+            {{{{/exclude}}}}
+        </hawksearch-results>
+    </body>
+</html>

package/custom2.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Hawksearch Demo (custom - override)</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <style type="text/css">
+            body {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 16px;
+            }
+
+            .layout-container {
+                margin: 0 auto;
+                min-width: 340px;
+                max-width: 1280px;
+            }
+        </style>
+        <script type="text/javascript">
+            var Hawksearch = Hawksearch || {};
+
+            Hawksearch.config = {
+                clientId: 'f51060e1c38446f0bacdf283390c37e8'
+            };
+
+            Hawksearch.templates = {
+                pagination: `
+                <div class="pagination">
+                    This is a custom pagination template. Display first item: <strong>{{displayFirstLink}}</strong>
+                </div>
+            `,
+                searchResultsItem: 'search-results-item-template'
+            };
+        </script>
+    </head>
+
+    <body>
+        <h1>Hawksearch Demo (custom - override)</h1>
+        <hawksearch-results></hawksearch-results>
+        <template id="search-results-item-template">
+            <div>Custom override: <strong>{{title}}</strong></div>
+        </template>
+    </body>
+</html>

package/gulpfile.js

@@ -0,0 +1,73 @@
+const del = require('del');
+const { dest, series, src } = require('gulp');
+const path = require('path');
+const cheerio = require('gulp-cheerio');
+const rename = require('gulp-rename');
+const svgMin = require('gulp-svgmin');
+const svgStore = require('gulp-svgstore');
+
+const paths = {
+    build: './build',
+    svg: {
+        source: './src/assets/icons',
+        output: './src/assets/images'
+    }
+};
+
+function cleanup() {
+    return del(paths.build);
+}
+
+function compileSvg() {
+    return src(path.join(paths.svg.source, '*.svg'))
+        .pipe(
+            cheerio({
+                run: ($) => {
+                    // Needed to prevent svgMin from removing viewBox attributes, regardless of removeViewBox override
+                    $('svg').removeAttr('width').removeAttr('height');
+
+                    // Needed to support custom CSS fill color
+                    $('*').removeAttr('fill');
+                },
+                parserOptions: {
+                    xmlMode: true
+                }
+            })
+        )
+        .pipe(
+            svgMin({
+                plugins: [
+                    {
+                        name: 'preset-default',
+                        params: {
+                            overrides: {
+                                removeViewBox: false,
+                                cleanupIDs: false,
+                                removeUnknownsAndDefaults: false
+                            }
+                        }
+                    },
+                    'removeUselessStrokeAndFill',
+                    'mergePaths',
+                    'cleanupEnableBackground',
+                    'removeStyleElement'
+                ]
+            })
+        )
+        .pipe(
+            svgStore({
+                inlineSvg: true
+            })
+        )
+        .pipe(
+            rename({
+                basename: 'icons'
+            })
+        )
+        .pipe(dest(paths.svg.output));
+}
+
+const svg = series(compileSvg, cleanup);
+
+exports.build = series(svg);
+exports.svg = svg;

package/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Hawksearch Demo (default)</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <style type="text/css">
+            body {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 16px;
+            }
+
+            .layout-container {
+                margin: 0 auto;
+                min-width: 340px;
+                max-width: 1280px;
+            }
+        </style>
+        <script type="text/javascript">
+            var Hawksearch = Hawksearch || {};
+
+            Hawksearch.config = {
+                clientId: 'f51060e1c38446f0bacdf283390c37e8',
+                urlPrefixes: {
+                    assets: 'http://dev.hawksearch.net',
+                    content: 'https://preview-dev.hawksearch.net/elasticdemo'
+                }
+            };
+        </script>
+    </head>
+
+    <body>
+        <div class="layout-container">
+            <h1>Hawksearch Demo (default)</h1>
+            <hawksearch-search></hawksearch-search>
+            <hawksearch-results></hawksearch-results>
+        </div>
+    </body>
+</html>

package/package.json

@@ -0,0 +1,57 @@
+{
+    "name": "@bridgeline-digital/hawksearch-handlebars-ui",
+    "version": "1.0.0-beta.0",
+    "description": "",
+    "private": false,
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "npm run gulp && webpack",
+        "build:prod": "npm run gulp && webpack --mode=production",
+        "eslint": "eslint . --ext .ts --max-warnings=0 --fix",
+        "gulp": "gulp build",
+        "gulp:svg": "gulp svg",
+        "lint": "npm run eslint && npm run prettier",
+        "prepare": "husky install",
+        "prettier": "prettier --write .",
+        "serve": "webpack serve --open",
+        "watch": "webpack --watch"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "@trivago/prettier-plugin-sort-imports": "^3.2.0",
+        "@types/lodash": "^4.14.182",
+        "@typescript-eslint/eslint-plugin": "^5.30.0",
+        "css-loader": "^6.7.1",
+        "del": "^6.1.1",
+        "eslint": "^8.18.0",
+        "eslint-config-prettier": "^8.5.0",
+        "gulp": "^4.0.2",
+        "gulp-cheerio": "^1.0.0",
+        "gulp-rename": "^2.0.0",
+        "gulp-svgmin": "^4.1.0",
+        "gulp-svgstore": "^9.0.0",
+        "html-loader": "^4.1.0",
+        "html-webpack-plugin": "^5.5.0",
+        "husky": "^8.0.1",
+        "lint-staged": "^13.0.3",
+        "prettier": "^2.7.1",
+        "raw-loader": "^4.0.2",
+        "sass": "^1.52.1",
+        "sass-loader": "^13.0.0",
+        "style-loader": "^3.3.1",
+        "ts-loader": "^9.2.8",
+        "tsconfig-paths-webpack-plugin": "^3.5.2",
+        "typescript": "^4.6.3",
+        "webpack": "^5.72.0",
+        "webpack-cli": "^4.9.2",
+        "webpack-dev-server": "^4.8.1"
+    },
+    "dependencies": {
+        "handlebars": "^4.7.7",
+        "lodash": "^4.17.21"
+    }
+}

package/src/assets/icons/chevron-back.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.70319 5.33126C10.0976 5.71782 10.104 6.35095 9.71748 6.7454L6.41429 10.116L9.70304 13.3376C10.0976 13.7241 10.1041 14.3573 9.71762 14.7518C9.33114 15.1463 8.69801 15.1528 8.30348 14.7664L4.30022 10.8448C4.11073 10.6592 4.00276 10.4059 4.00005 10.1406C3.99735 9.8754 4.10013 9.61996 4.28579 9.43051L8.28905 5.34554C8.67561 4.95109 9.30874 4.9447 9.70319 5.33126Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8174 5.33126C15.2119 5.71782 15.2183 6.35095 14.8317 6.7454L11.5285 10.116L14.8173 13.3376C15.2118 13.7241 15.2184 14.3573 14.8319 14.7518C14.4454 15.1463 13.8123 15.1528 13.4177 14.7664L9.41448 10.8448C9.22499 10.6592 9.11702 10.4059 9.11431 10.1406C9.1116 9.87541 9.21439 9.61996 9.40004 9.43051L13.4033 5.34554C13.7899 4.95109 14.423 4.9447 14.8174 5.33126Z" fill="black"/>
+</svg>

package/src/assets/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.8383 10.1111C6.22883 9.72055 6.86199 9.72055 7.25252 10.1111L12 14.8585L16.7474 10.1111C17.1379 9.72055 17.7711 9.72055 18.1616 10.1111C18.5521 10.5016 18.5521 11.1348 18.1616 11.5253L12.7071 16.9798C12.3165 17.3704 11.6834 17.3704 11.2928 16.9798L5.8383 11.5253C5.44778 11.1348 5.44778 10.5016 5.8383 10.1111Z" fill="black"/>
+</svg>

package/src/assets/icons/chevron-forward.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.45989 14.7662C9.06545 14.3797 9.05905 13.7465 9.44561 13.3521L12.7488 9.98147L9.46004 6.75983C9.06551 6.37335 9.05899 5.74022 9.44547 5.34569C9.83194 4.95116 10.4651 4.94464 10.8596 5.33112L14.8629 9.25268C15.0524 9.4383 15.1603 9.6916 15.163 9.95684C15.1657 10.2221 15.063 10.4775 14.8773 10.667L10.874 14.7519C10.4875 15.1464 9.85434 15.1528 9.45989 14.7662Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.34564 14.7662C3.95119 14.3797 3.94479 13.7465 4.33135 13.3521L7.63454 9.98147L4.34579 6.75983C3.95126 6.37335 3.94473 5.74022 4.33121 5.34569C4.71769 4.95116 5.35082 4.94464 5.74535 5.33112L9.74861 9.25268C9.93809 9.4383 10.0461 9.6916 10.0488 9.95684C10.0515 10.2221 9.9487 10.4775 9.76304 10.667L5.75978 14.7519C5.37322 15.1464 4.74009 15.1528 4.34564 14.7662Z" fill="black"/>
+</svg>

package/src/assets/icons/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6897 18.2241C14.2897 18.605 13.6567 18.5896 13.2759 18.1897L8.27586 12.9397C7.90804 12.5534 7.90804 11.9465 8.27586 11.5603L13.2759 6.31034C13.6567 5.91041 14.2897 5.89497 14.6897 6.27586C15.0896 6.65675 15.105 7.28972 14.7241 7.68965L10.381 12.25L14.7241 16.8103C15.105 17.2103 15.0896 17.8433 14.6897 18.2241Z" fill="black"/>
+</svg>

package/src/assets/icons/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.31035 18.2241C7.91041 17.8432 7.89498 17.2103 8.27586 16.8103L12.619 12.25L8.27586 7.68965C7.89498 7.28972 7.91041 6.65675 8.31034 6.27586C8.71027 5.89497 9.34325 5.91041 9.72414 6.31034L14.7241 11.5603C15.092 11.9465 15.092 12.5534 14.7241 12.9397L9.72414 18.1897C9.34325 18.5896 8.71028 18.605 8.31035 18.2241Z" fill="black"/>
+</svg>

package/src/assets/icons/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1558 16.5311C17.7621 16.9184 17.1289 16.9132 16.7417 16.5194L12 11.6988L7.25842 16.5194C6.87114 16.9132 6.238 16.9184 5.84426 16.5311C5.45052 16.1438 5.44529 15.5107 5.83257 15.1169L11.2871 9.57148C11.4751 9.38036 11.732 9.27272 12 9.27272C12.2681 9.27272 12.525 9.38036 12.713 9.57148L18.1675 15.1169C18.5548 15.5107 18.5496 16.1438 18.1558 16.5311Z" fill="black"/>
+</svg>

package/src/assets/icons/cross.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2908 3.92249L16.1117 2.74416L10.035 8.82166L3.95749 2.74416L2.77832 3.92249L8.85582 9.99999L2.77832 16.0775L3.95749 17.2558L10.035 11.1783L16.1117 17.2558L17.2908 16.0775L11.2133 9.99999L17.2908 3.92249Z" fill="black"/>
+</svg>

package/src/assets/icons/help.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99984 18.3333C5.40484 18.3333 1.6665 14.5958 1.6665 10C1.6665 5.40584 5.40484 1.66667 9.99984 1.66667C14.5948 1.66667 18.3332 5.40501 18.3332 10C18.3332 14.5958 14.5948 18.3333 9.99984 18.3333ZM9.99984 3.33334C6.324 3.33334 3.33317 6.32417 3.33317 10C3.33317 13.6758 6.324 16.6667 9.99984 16.6667C13.6757 16.6667 16.6665 13.6758 16.6665 10C16.6665 6.32417 13.6757 3.33334 9.99984 3.33334Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8332 12.5H9.1665V10H9.99984C10.9198 10 11.6665 9.2525 11.6665 8.33333C11.6665 7.41333 10.9198 6.66667 9.99984 6.66667C9.07984 6.66667 8.33317 7.41333 8.33317 8.33333H6.6665C6.6665 6.49583 8.16234 5 9.99984 5C11.8373 5 13.3332 6.49583 13.3332 8.33333C13.3332 9.88333 12.269 11.19 10.8332 11.5625V12.5ZM10.7364 13.4301C11.1432 13.8369 11.1432 14.4965 10.7364 14.9033C10.3296 15.3101 9.6701 15.3101 9.2633 14.9033C8.8565 14.4965 8.8565 13.8369 9.2633 13.4301C9.67009 13.0233 10.3296 13.0233 10.7364 13.4301Z" fill="black"/>
+</svg>

package/src/assets/icons/minus.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8332 10.8333H4.1665V9.16667H15.8332V10.8333Z" fill="black"/>
+</svg>

package/src/assets/icons/plus.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<path d="M16,9h-5V4c0-0.6-0.4-1-1-1S9,3.4,9,4v5H4c-0.6,0-1,0.4-1,1s0.4,1,1,1h5v5c0,0.6,0.4,1,1,1s1-0.4,1-1v-5h5c0.6,0,1-0.4,1-1
+	S16.6,9,16,9z"/>
+</svg>

package/src/assets/images/icons.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol id="chevron-back" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.703 5.331a1 1 0 0 1 .014 1.414l-3.303 3.371 3.289 3.222a1 1 0 0 1-1.4 1.428L4.3 10.845a1 1 0 0 1-.014-1.414l4.003-4.085a1 1 0 0 1 1.414-.015Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.817 5.331a1 1 0 0 1 .015 1.414l-3.304 3.371 3.29 3.222a1 1 0 0 1-1.4 1.428l-4.004-3.921A1 1 0 0 1 9.4 9.43l4.003-4.085a1 1 0 0 1 1.414-.015Z"/></symbol><symbol id="chevron-down" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.838 10.111a1 1 0 0 1 1.415 0L12 14.858l4.747-4.747a1 1 0 1 1 1.415 1.414l-5.455 5.455a1 1 0 0 1-1.414 0l-5.455-5.455a1 1 0 0 1 0-1.414Z"/></symbol><symbol id="chevron-forward" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.46 14.766a1 1 0 0 1-.014-1.414l3.303-3.37L9.46 6.76a1 1 0 0 1 1.4-1.429l4.003 3.922a1 1 0 0 1 .014 1.414l-4.003 4.085a1 1 0 0 1-1.414.014Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.346 14.766a1 1 0 0 1-.015-1.414l3.304-3.37-3.29-3.222a1 1 0 1 1 1.4-1.429L9.75 9.253a1 1 0 0 1 .014 1.414L5.76 14.752a1 1 0 0 1-1.414.014Z"/></symbol><symbol id="chevron-left" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.69 18.224a1 1 0 0 1-1.414-.034l-5-5.25a1 1 0 0 1 0-1.38l5-5.25a1 1 0 1 1 1.448 1.38l-4.343 4.56 4.343 4.56a1 1 0 0 1-.034 1.414Z"/></symbol><symbol id="chevron-right" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.31 18.224a1 1 0 0 1-.034-1.414l4.343-4.56-4.343-4.56a1 1 0 0 1 1.448-1.38l5 5.25a1 1 0 0 1 0 1.38l-5 5.25a1 1 0 0 1-1.414.034Z"/></symbol><symbol id="chevron-up" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.156 16.531a1 1 0 0 1-1.414-.012L12 11.7l-4.742 4.82a1 1 0 1 1-1.425-1.402l5.454-5.546a1 1 0 0 1 1.426 0l5.455 5.546a1 1 0 0 1-.012 1.414Z"/></symbol><symbol id="cross" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="m17.29 3.922-1.178-1.178-6.077 6.078-6.078-6.078-1.179 1.178L8.856 10l-6.078 6.078 1.18 1.178 6.077-6.078 6.077 6.078 1.179-1.178L11.213 10l6.078-6.078Z"/></symbol><symbol id="help" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.333c-4.595 0-8.333-3.737-8.333-8.333 0-4.594 3.738-8.333 8.333-8.333 4.595 0 8.333 3.738 8.333 8.333 0 4.596-3.738 8.333-8.333 8.333Zm0-15A6.674 6.674 0 0 0 3.333 10 6.674 6.674 0 0 0 10 16.667 6.674 6.674 0 0 0 16.666 10 6.674 6.674 0 0 0 10 3.333Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.833 12.5H9.166V10H10a1.668 1.668 0 0 0 0-3.333c-.92 0-1.667.746-1.667 1.666H6.666A3.338 3.338 0 0 1 10 5a3.338 3.338 0 0 1 3.333 3.333 3.343 3.343 0 0 1-2.5 3.23v.937Zm-.097.93a1.042 1.042 0 1 1-1.473 1.473 1.042 1.042 0 0 1 1.473-1.473Z"/></symbol><symbol id="minus" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.833 10.833H4.167V9.167h11.666v1.666Z"/></symbol><symbol id="plus" viewBox="0 0 20 20"><g style="enable-background:new 0 0 20 20"><path d="M16 9h-5V4c0-.6-.4-1-1-1s-1 .4-1 1v5H4c-.6 0-1 .4-1 1s.4 1 1 1h5v5c0 .6.4 1 1 1s1-.4 1-1v-5h5c.6 0 1-.4 1-1s-.4-1-1-1z"/></g></symbol></svg>

package/src/components/autocomplete/autocomplete.component.hbs

@@ -0,0 +1,60 @@
+<div class='autocomplete'>
+    <div class='row'>
+        {{#if products.results.length}}
+            <div class='column column--12 column-md--8'>
+                <span class='autocomplete__title autocomplete__title--products'>{{products.title}}</span>
+                <div class='row autocomplete__products'>
+                    {{#each products.results}}
+                        <div class='column column--12 column-sm--4'>
+                            <div class='autocomplete__product'>
+                                <a hawksearch-product='{{id}}' href='{{url}}' class='autocomplete__product__image'>
+                                    <img hawksearch-image src='{{imageUrl}}' alt='' />
+                                </a>
+                                <span class='autocomplete__product__title'>
+                                    <a hawksearch-product='{{id}}' href='{{url}}'>{{html title}}</a>
+                                </span>
+                            </div>
+                        </div>
+                    {{/each}}
+                </div>
+            </div>
+        {{/if}}
+        {{#if (or categories.results.length content.results.length queries.results.length)}}
+            <div class='column column--12 column-md--4'>
+                {{#if categories.results.length}}
+                    <span class='autocomplete__title autocomplete__title--categories'>{{categories.title}}</span>
+                    <ul class='autocomplete__list'>
+                        {{#each categories.results}}
+                            <li>
+                                <a hawksearch-category-field='{{field}}' hawksearch-category-value='{{value}}' href='{{url}}'>{{html title}}</a>
+                            </li>
+                        {{/each}}
+                    </ul>
+                {{/if}}
+                {{#if content.results.length}}
+                    <span class='autocomplete__title autocomplete__title--content'>{{content.title}}</span>
+                    <ul class='autocomplete__list'>
+                        {{#each content.results}}
+                            <li>
+                                <a hawksearch-content='{{id}}' href='{{url}}'>{{html title}}</a>
+                            </li>
+                        {{/each}}
+                    </ul>
+                {{/if}}
+                {{#if queries.results.length}}
+                    <span class='autocomplete__title autocomplete__title--queries'>{{queries.title}}</span>
+                    <ul class='autocomplete__list'>
+                        {{#each queries.results}}
+                            <li>
+                                <a hawksearch-query='{{query}}' href='{{url}}'>{{query}}</a>
+                            </li>
+                        {{/each}}
+                    </ul>
+                {{/if}}
+            </div>
+        {{/if}}
+    </div>
+    <div class='autocomplete__view-all'>
+        <a hawksearch-view-all>{{viewAllText}}</a>
+    </div>
+</div>