@searchstax-inc/searchstudio-ux-js 0.0.1
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 +15 -0
- package/LICENSE.md +9 -0
- package/README.md +61 -0
- package/dist/@searchstax-inc/searchstudio-ux-js.cjs +69 -0
- package/dist/@searchstax-inc/searchstudio-ux-js.d.ts +163 -0
- package/dist/@searchstax-inc/searchstudio-ux-js.iife.js +69 -0
- package/dist/@searchstax-inc/searchstudio-ux-js.mjs +995 -0
- package/dist/styles/mainTheme.css +153 -0
- package/package.json +60 -0
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
.searchstax-search-input-container {
|
|
2
|
+
position: relative;
|
|
3
|
+
border: 1px solid #e6e9ec;
|
|
4
|
+
padding: 15px 20px 10px 20px;
|
|
5
|
+
border-radius: 80px;
|
|
6
|
+
height: 40px; }
|
|
7
|
+
.searchstax-search-input-container .searchstax-search-icon,
|
|
8
|
+
.searchstax-search-input-container .searchstax-search-close,
|
|
9
|
+
.searchstax-search-input-container .searchstax-spinner-icon {
|
|
10
|
+
margin-top: 3px; }
|
|
11
|
+
.searchstax-search-input-container .searchstax-search-icon:focus,
|
|
12
|
+
.searchstax-search-input-container .searchstax-search-close:focus,
|
|
13
|
+
.searchstax-search-input-container .searchstax-spinner-icon:focus {
|
|
14
|
+
outline: none !important; }
|
|
15
|
+
.searchstax-search-input-container .searchstax-search-input {
|
|
16
|
+
width: calc(100% - 8px);
|
|
17
|
+
height: 30px;
|
|
18
|
+
font-size: 18px;
|
|
19
|
+
z-index: 2;
|
|
20
|
+
border: none; }
|
|
21
|
+
.searchstax-search-input-container .searchstax-search-input:focus {
|
|
22
|
+
box-shadow: none;
|
|
23
|
+
outline: none; }
|
|
24
|
+
.searchstax-search-input-container .searchstax-search-input-wrapper {
|
|
25
|
+
display: flex; }
|
|
26
|
+
.searchstax-search-input-container .searchstax-search-input-wrapper .searchstax-search-input {
|
|
27
|
+
flex: 1; }
|
|
28
|
+
.searchstax-search-input-container .searchstax-autosuggest-container {
|
|
29
|
+
position: absolute;
|
|
30
|
+
z-index: 1;
|
|
31
|
+
left: 0;
|
|
32
|
+
margin-top: 50px;
|
|
33
|
+
width: 100%;
|
|
34
|
+
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.14902);
|
|
35
|
+
background-color: #fff; }
|
|
36
|
+
.searchstax-search-input-container .searchstax-autosuggest-container.hidden {
|
|
37
|
+
display: none; }
|
|
38
|
+
.searchstax-search-input-container .searchstax-autosuggest-container .searchstax-autosuggest-item {
|
|
39
|
+
width: 100%;
|
|
40
|
+
cursor: pointer; }
|
|
41
|
+
.searchstax-search-input-container .searchstax-autosuggest-container .searchstax-autosuggest-item.active {
|
|
42
|
+
background-color: #fc6730;
|
|
43
|
+
color: white; }
|
|
44
|
+
.searchstax-search-input-container .searchstax-autosuggest-container .searchstax-autosuggest-item.active .searchstax-autosuggest-item-term-container {
|
|
45
|
+
color: white; }
|
|
46
|
+
.searchstax-search-input-container .searchstax-autosuggest-container .searchstax-autosuggest-item .searchstax-autosuggest-item-term-container {
|
|
47
|
+
width: calc(100% - 40px);
|
|
48
|
+
height: 40px;
|
|
49
|
+
font-size: 14px;
|
|
50
|
+
line-height: 40px;
|
|
51
|
+
padding-left: 20px;
|
|
52
|
+
padding-right: 20px; }
|
|
53
|
+
|
|
54
|
+
.searchstax-search-icon,
|
|
55
|
+
.searchstax-search-close {
|
|
56
|
+
max-width: 28px;
|
|
57
|
+
height: 28px;
|
|
58
|
+
width: 28px;
|
|
59
|
+
display: block;
|
|
60
|
+
background: none;
|
|
61
|
+
background-size: 100%;
|
|
62
|
+
background-position: center center;
|
|
63
|
+
background-repeat: no-repeat;
|
|
64
|
+
border: none; }
|
|
65
|
+
|
|
66
|
+
.searchstax-search-icon {
|
|
67
|
+
background-image: url("data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNzJweCIgaGVpZ2h0PSI3MnB4IiB2aWV3Qm94PSIwIDAgNzIgNzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDcyIDcyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGQzY3MzAiIGQ9Ik01NC4wMzYsNDguMDM4TDcxLjQxOSw2NS40M2wtNS41NTEsNC45NjNMNDkuNTEyLDU0LjAzM2MtNS4yMiw0LjIzLTExLjg3MSw2Ljc1OS0xOS4xMSw2Ljc1OQ0KCUMxMy42MTMsNjAuNzkyLDAsNDcuMTgxLDAsMzAuMzk3QzAsMTMuNjA5LDEzLjYxMywwLDMwLjQwMSwwYzE2Ljc4NiwwLDMwLjM5NiwxMy42MDksMzAuMzk2LDMwLjM5Nw0KCWMwLDcuMjQyLTIuNTM0LDEzLjg4OC02Ljc2MiwxOS4xMTFWNDguMDM4eiBNMzAuNDE0LDUyLjcxYzEyLjMzOSwwLDIyLjM0Mi0xMCwyMi4zNDItMjIuMzQxYzAtMTIuMzM5LTEwLjAwMy0yMi4zMzktMjIuMzQyLTIyLjMzOQ0KCWMtMTIuMzQxLDAtMjIuMzQxLDEwLTIyLjM0MSwyMi4zMzlDOC4wNzMsNDIuNzEsMTguMDczLDUyLjcxLDMwLjQxNCw1Mi43MSIvPg0KPC9zdmc+DQo="); }
|
|
68
|
+
|
|
69
|
+
.searchstax-search-close {
|
|
70
|
+
background-image: url("data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkY3OTU5O30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTI2LjksMjQuMWw2LjQsNi40YzAuOCwwLjgsMC44LDIsMCwyLjhjLTAuOCwwLjgtMiwwLjgtMi44LDBMMjQsMjYuOWwtNi40LDYuNGMtMC44LDAuOC0yLDAuOC0yLjgsMAoJYy0wLjgtMC44LTAuOC0yLDAtMi44bDYuNC02LjRsLTYuNC02LjRjLTAuOC0wLjgtMC44LTIsMC0yLjhjMC44LTAuOCwyLTAuOCwyLjgsMGw2LjQsNi40bDYuNC02LjRjMC44LTAuOCwyLTAuOCwyLjgsMAoJYzAuOCwwLjgsMC44LDIsMCwyLjhMMjYuOSwyNC4xeiBNMjQsNDguMWMtMTMuMywwLTI0LTEwLjctMjQtMjRzMTAuNy0yNCwyNC0yNHMyNCwxMC43LDI0LDI0UzM3LjMsNDguMSwyNCw0OC4xeiBNMjQsNDMuNAoJYzEwLjcsMCwxOS40LTguNywxOS40LTE5LjRTMzQuNyw0LjcsMjQsNC43UzQuNiwxMy4zLDQuNiwyNC4xUzEzLjMsNDMuNCwyNCw0My40eiIvPgo8L3N2Zz4K"); }
|
|
71
|
+
|
|
72
|
+
@keyframes spinner-border {
|
|
73
|
+
to {
|
|
74
|
+
transform: rotate(360deg); } }
|
|
75
|
+
|
|
76
|
+
.searchstax-spinner-icon {
|
|
77
|
+
display: inline-block;
|
|
78
|
+
width: 28px;
|
|
79
|
+
height: 28px;
|
|
80
|
+
vertical-align: text-bottom;
|
|
81
|
+
border: 3px solid #fc6730;
|
|
82
|
+
border-right-color: #fc6730;
|
|
83
|
+
border-right-color: transparent;
|
|
84
|
+
border-radius: 50%;
|
|
85
|
+
-webkit-animation: spinner-border 0.75s linear infinite;
|
|
86
|
+
animation: spinner-border 0.75s linear infinite;
|
|
87
|
+
background: none; }
|
|
88
|
+
|
|
89
|
+
.searchstax-no-results .searchstax-suggestion-term {
|
|
90
|
+
color: #fc6730; }
|
|
91
|
+
|
|
92
|
+
.searchstax-search-result {
|
|
93
|
+
position: relative;
|
|
94
|
+
position: relative;
|
|
95
|
+
padding: 39px 12px 28px 12px;
|
|
96
|
+
margin-bottom: 20px;
|
|
97
|
+
color: #33475a;
|
|
98
|
+
border: none;
|
|
99
|
+
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.14902); }
|
|
100
|
+
.searchstax-search-result .searchstax-result-item-link {
|
|
101
|
+
position: absolute;
|
|
102
|
+
width: 100%;
|
|
103
|
+
height: 100%;
|
|
104
|
+
margin-top: -39px;
|
|
105
|
+
margin-left: -12px;
|
|
106
|
+
cursor: pointer; }
|
|
107
|
+
.searchstax-search-result .searchstax-search-result-image-container {
|
|
108
|
+
height: 75px;
|
|
109
|
+
width: 75px;
|
|
110
|
+
overflow: hidden; }
|
|
111
|
+
.searchstax-search-result .searchstax-search-result-image-container .searchstax-result-image {
|
|
112
|
+
width: 100%;
|
|
113
|
+
height: auto; }
|
|
114
|
+
.searchstax-search-result .searchstax-search-result-ribbon {
|
|
115
|
+
position: absolute;
|
|
116
|
+
left: 0;
|
|
117
|
+
top: 0;
|
|
118
|
+
display: flex;
|
|
119
|
+
align-items: center;
|
|
120
|
+
text-align: left;
|
|
121
|
+
padding: 0 10px;
|
|
122
|
+
min-width: 135px;
|
|
123
|
+
min-height: 24px;
|
|
124
|
+
color: #e6e9ec;
|
|
125
|
+
font-family: 'Roboto';
|
|
126
|
+
font-weight: 500;
|
|
127
|
+
text-transform: uppercase;
|
|
128
|
+
font-size: 12px;
|
|
129
|
+
text-transform: uppercase;
|
|
130
|
+
border-radius: 3px 0 0 0;
|
|
131
|
+
background-color: #33475a; }
|
|
132
|
+
.searchstax-search-result .searchstax-search-result-title-container .searchstax-search-result-title {
|
|
133
|
+
overflow: hidden;
|
|
134
|
+
text-overflow: ellipsis;
|
|
135
|
+
display: -webkit-box;
|
|
136
|
+
-webkit-line-clamp: 2;
|
|
137
|
+
-webkit-box-orient: vertical;
|
|
138
|
+
padding: 0;
|
|
139
|
+
color: #33475a;
|
|
140
|
+
font-size: 18px; }
|
|
141
|
+
.searchstax-search-result .searchstax-search-result-common {
|
|
142
|
+
width: 100%;
|
|
143
|
+
font-family: Roboto;
|
|
144
|
+
font-weight: 300;
|
|
145
|
+
font-size: 14px;
|
|
146
|
+
line-height: 21px;
|
|
147
|
+
margin-bottom: 5px; }
|
|
148
|
+
.searchstax-search-result .searchstax-search-result-description {
|
|
149
|
+
overflow: hidden;
|
|
150
|
+
text-overflow: ellipsis;
|
|
151
|
+
display: -webkit-box;
|
|
152
|
+
-webkit-line-clamp: 3;
|
|
153
|
+
-webkit-box-orient: vertical; }
|
package/package.json
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@searchstax-inc/searchstudio-ux-js",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "0.0.1",
|
|
5
|
+
"files": [
|
|
6
|
+
"dist"
|
|
7
|
+
],
|
|
8
|
+
"main": "./dist/@searchstax-inc/searchstudio-ux-js.cjs",
|
|
9
|
+
"module": "./dist/@searchstax-inc/searchstudio-ux-js.mjs",
|
|
10
|
+
"types": "./dist/@searchstax-inc/searchstudio-ux-js.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"require": "./dist/@searchstax-inc/searchstudio-ux-js.cjs",
|
|
14
|
+
"import": "./dist/@searchstax-inc/searchstudio-ux-js.mjs"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"scripts": {
|
|
18
|
+
"dev": "vite --host",
|
|
19
|
+
"build": "tsc && vite build && dts-bundle-generator --config ./dts-bundle-generator.config.ts && npm run sass",
|
|
20
|
+
"test": "vitest",
|
|
21
|
+
"sass": "node-sass ./src/style.scss ./dist/styles/mainTheme.css",
|
|
22
|
+
"test:coverage": "vitest --coverage",
|
|
23
|
+
"lint:scripts": "eslint . --ext .ts",
|
|
24
|
+
"lint:styles": "stylelint ./**/*.{css,scss}",
|
|
25
|
+
"format:scripts": "prettier . --write",
|
|
26
|
+
"format:styles": "stylelint ./**/*.{css,scss} --fix",
|
|
27
|
+
"format": "npm run format:scripts && npm run format:styles",
|
|
28
|
+
"prepare": "husky install && husky set .husky/pre-commit 'npx lint-staged' && git add .husky/pre-commit",
|
|
29
|
+
"uninstall-husky": "npm uninstall husky --no-save && git config --unset core.hooksPath && npx rimraf .husky"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@types/jsdom": "^20.0.1",
|
|
33
|
+
"@types/mustache": "^4.2.2",
|
|
34
|
+
"@types/node": "^18.11.18",
|
|
35
|
+
"@typescript-eslint/eslint-plugin": "^5.48.2",
|
|
36
|
+
"@typescript-eslint/parser": "^5.48.2",
|
|
37
|
+
"@vitest/coverage-c8": "^0.29.8",
|
|
38
|
+
"dts-bundle-generator": "^7.1.0",
|
|
39
|
+
"eslint": "^8.32.0",
|
|
40
|
+
"eslint-config-prettier": "^8.6.0",
|
|
41
|
+
"eslint-plugin-prettier": "^4.2.1",
|
|
42
|
+
"husky": "^8.0.3",
|
|
43
|
+
"lint-staged": "^13.1.0",
|
|
44
|
+
"postcss": "^8.4.21",
|
|
45
|
+
"postcss-scss": "^4.0.6",
|
|
46
|
+
"prettier": "^2.8.3",
|
|
47
|
+
"stylelint": "^14.16.1",
|
|
48
|
+
"stylelint-config-prettier": "^9.0.5",
|
|
49
|
+
"stylelint-config-recommended": "^9.0.0",
|
|
50
|
+
"stylelint-config-sass-guidelines": "^9.0.1",
|
|
51
|
+
"stylelint-prettier": "^3.0.0",
|
|
52
|
+
"ts-node": "^10.9.1",
|
|
53
|
+
"typescript": "^4.9.4",
|
|
54
|
+
"vite": "^4.0.4",
|
|
55
|
+
"vitest": "^0.29.8"
|
|
56
|
+
},
|
|
57
|
+
"dependencies": {
|
|
58
|
+
"mustache": "^4.2.0"
|
|
59
|
+
}
|
|
60
|
+
}
|