@internetarchive/elements 0.2.5 → 0.2.6-alpha-webdev8447.0

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.
Files changed (14) hide show
  1. package/LICENSE +661 -661
  2. package/README.md +320 -320
  3. package/dist/src/elements/ia-combo-box/caret-closed.svg +8 -8
  4. package/dist/src/elements/ia-combo-box/caret-open.svg +8 -8
  5. package/dist/src/elements/ia-combo-box/clear.svg +8 -8
  6. package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js +165 -165
  7. package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js.map +1 -1
  8. package/dist/src/elements/ia-dropdown-search-bar/models.js.map +1 -1
  9. package/dist/src/elements/ia-dropdown-search-bar/search.svg +10 -10
  10. package/dist/src/elements/index.js.map +1 -1
  11. package/dist/src/labs/ia-snow/flake.svg +1 -1
  12. package/dist/src/themes/theme-styles.js +87 -87
  13. package/dist/src/themes/theme-styles.js.map +1 -1
  14. package/package.json +120 -120
package/dist/src/elements/ia-combo-box/caret-closed.svg CHANGED
@@ -1,8 +1,8 @@
1
- <svg
2
- viewBox="0 0 8 4"
3
- xmlns="http://www.w3.org/2000/svg"
4
- >
5
- <path
6
- d="m6.7226499.58397485c.22976435-.15317623.54019902-.09108929.69337525.13867505.13615665.20423498.10222882.47220947-.06836249.63681849l-.07031256.05655676-3.2773501 2.18490006-3.2773501-2.18490006c-.22976434-.15317623-.29185128-.4636109-.13867505-.69337525.13615665-.20423497.39656688-.27598409.61412572-.18182636l.07924953.04315131 2.7226499 1.81402515z"
7
- ></path>
8
- </svg>
1
+ <svg
2
+ viewBox="0 0 8 4"
3
+ xmlns="http://www.w3.org/2000/svg"
4
+ >
5
+ <path
6
+ d="m6.7226499.58397485c.22976435-.15317623.54019902-.09108929.69337525.13867505.13615665.20423498.10222882.47220947-.06836249.63681849l-.07031256.05655676-3.2773501 2.18490006-3.2773501-2.18490006c-.22976434-.15317623-.29185128-.4636109-.13867505-.69337525.13615665-.20423497.39656688-.27598409.61412572-.18182636l.07924953.04315131 2.7226499 1.81402515z"
7
+ ></path>
8
+ </svg>
package/dist/src/elements/ia-combo-box/caret-open.svg CHANGED
@@ -1,8 +1,8 @@
1
- <svg
2
- viewBox="0 0 8 4"
3
- xmlns="http://www.w3.org/2000/svg"
4
- >
5
- <path
6
- d="m6.7226499 3.51689722c.22976435.15317623.54019902.0910893.69337525-.13867505.13615665-.20423497.10222882-.47220946-.06836249-.63681849l-.07031256-.05655675-3.2773501-2.18490007-3.2773501 2.18490007c-.22976434.15317623-.29185128.4636109-.13867505.69337524.13615665.20423498.39656688.27598409.61412572.18182636l.07924953-.04315131 2.7226499-1.81402514z"
7
- ></path>
8
- </svg>
1
+ <svg
2
+ viewBox="0 0 8 4"
3
+ xmlns="http://www.w3.org/2000/svg"
4
+ >
5
+ <path
6
+ d="m6.7226499 3.51689722c.22976435.15317623.54019902.0910893.69337525-.13867505.13615665-.20423497.10222882-.47220946-.06836249-.63681849l-.07031256-.05655675-3.2773501-2.18490007-3.2773501 2.18490007c-.22976434.15317623-.29185128.4636109-.13867505.69337524.13615665.20423498.39656688.27598409.61412572.18182636l.07924953-.04315131 2.7226499-1.81402514z"
7
+ ></path>
8
+ </svg>
package/dist/src/elements/ia-combo-box/clear.svg CHANGED
@@ -1,9 +1,9 @@
1
- <svg
2
- viewBox="0 0 100 100"
3
- xmlns="http://www.w3.org/2000/svg"
4
- >
5
- <path
6
- d="m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z"
7
- fill-rule="evenodd"
8
- ></path>
1
+ <svg
2
+ viewBox="0 0 100 100"
3
+ xmlns="http://www.w3.org/2000/svg"
4
+ >
5
+ <path
6
+ d="m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z"
7
+ fill-rule="evenodd"
8
+ ></path>
9
9
  </svg>
package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js CHANGED
@@ -33,80 +33,80 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
33
33
  return this.selectedCategory ?? this.categories?.[0]?.id ?? '';
34
34
  }
35
35
  render() {
36
- return html `
37
- <div id="container" part="container" role="search">
38
- <div
39
- id="main-bar"
40
- part="main-bar"
41
- class=${this.hideDropdown ? 'no-dropdown' : nothing}
42
- >
43
- ${this.hideDropdown ? nothing : this.dropdownTemplate}
44
- ${this.textBoxTemplate} ${this.searchButtonTemplate}
45
- </div>
46
- </div>
36
+ return html `
37
+ <div id="container" part="container" role="search">
38
+ <div
39
+ id="main-bar"
40
+ part="main-bar"
41
+ class=${this.hideDropdown ? 'no-dropdown' : nothing}
42
+ >
43
+ ${this.hideDropdown ? nothing : this.dropdownTemplate}
44
+ ${this.textBoxTemplate} ${this.searchButtonTemplate}
45
+ </div>
46
+ </div>
47
47
  `;
48
48
  }
49
49
  /**
50
50
  * Template for the category dropdown on the left side of the search bar.
51
51
  */
52
52
  get dropdownTemplate() {
53
- return html `
54
- <ia-dropdown
55
- id="category-dropdown"
56
- part="category-dropdown"
57
- displayCaret
58
- includeSelectedOption
59
- closeOnSelect
60
- closeOnEscape
61
- closeOnBackdropClick
62
- openViaButton
63
- .selectedOption=${this.resolvedCategory}
64
- .options=${this.categories}
65
- @optionSelected=${this.handleCategorySelected}
66
- >
67
- <span slot="dropdown-label" part="category-dropdown-label"
68
- >${this.selectedCategoryLabel}</span
69
- >
70
- </ia-dropdown>
53
+ return html `
54
+ <ia-dropdown
55
+ id="category-dropdown"
56
+ part="category-dropdown"
57
+ displayCaret
58
+ includeSelectedOption
59
+ closeOnSelect
60
+ closeOnEscape
61
+ closeOnBackdropClick
62
+ openViaButton
63
+ .selectedOption=${this.resolvedCategory}
64
+ .options=${this.categories}
65
+ @optionSelected=${this.handleCategorySelected}
66
+ >
67
+ <span slot="dropdown-label" part="category-dropdown-label"
68
+ >${this.selectedCategoryLabel}</span
69
+ >
70
+ </ia-dropdown>
71
71
  `;
72
72
  }
73
73
  /**
74
74
  * Template for the main text entry box of the search bar.
75
75
  */
76
76
  get textBoxTemplate() {
77
- return html `
78
- <ia-clearable-text-input
79
- id="search-input"
80
- part="search-input"
81
- .value=${this.spacedQuery}
82
- placeholder=${this.placeholder}
83
- clearButtonScreenReaderLabel=${msg('Clear search query')}
84
- screenReaderLabel=${msg('Search the Archive. Filters and Advanced Search available below.')}
85
- @clear=${this.searchFieldCleared}
86
- @submit=${this.handleSubmit}
87
- ></ia-clearable-text-input>
77
+ return html `
78
+ <ia-clearable-text-input
79
+ id="search-input"
80
+ part="search-input"
81
+ .value=${this.spacedQuery}
82
+ placeholder=${this.placeholder}
83
+ clearButtonScreenReaderLabel=${msg('Clear search query')}
84
+ screenReaderLabel=${msg('Search the Archive. Filters and Advanced Search available below.')}
85
+ @clear=${this.searchFieldCleared}
86
+ @submit=${this.handleSubmit}
87
+ ></ia-clearable-text-input>
88
88
  `;
89
89
  }
90
90
  /**
91
91
  * Template for the "magnifying glass" search button to the right of the search bar.
92
92
  */
93
93
  get searchButtonTemplate() {
94
- return html `
95
- <button
96
- id="search-button"
97
- part="search-button"
98
- class=${this.loading ? 'loading' : nothing}
99
- type="button"
100
- aria-label=${msg('Search')}
101
- @click=${this.handleSubmit}
102
- >
94
+ return html `
95
+ <button
96
+ id="search-button"
97
+ part="search-button"
98
+ class=${this.loading ? 'loading' : nothing}
99
+ type="button"
100
+ aria-label=${msg('Search')}
101
+ @click=${this.handleSubmit}
102
+ >
103
103
  ${this.loading
104
- ? html `<ia-status-indicator
105
- mode="loading"
106
- class="search-button-loading-icon"
104
+ ? html `<ia-status-indicator
105
+ mode="loading"
106
+ class="search-button-loading-icon"
107
107
  ></ia-status-indicator>`
108
- : html `<img src=${searchIcon} alt="" />`}
109
- </button>
108
+ : html `<img src=${searchIcon} alt="" />`}
109
+ </button>
110
110
  `;
111
111
  }
112
112
  /**
@@ -165,117 +165,117 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
165
165
  }));
166
166
  }
167
167
  static get styles() {
168
- const ownStyles = css `
169
- :host {
170
- --search-bar-height--: var(--search-bar-height, 30px);
171
- --search-bar-width--: var(--search-bar-width, 300px);
172
- --search-bar-internal-padding--: var(--padding-sm, 5px);
173
- --clear-button-offset--: var(--clear-button-offset, 0);
174
- }
175
-
176
- #container {
177
- display: inline-block;
178
- width: var(--search-bar-width--);
179
- }
180
-
181
- #main-bar {
182
- display: flex;
183
- height: var(--search-bar-height--, 30px);
184
- flex: 1;
185
- }
186
-
187
- #category-dropdown {
188
- display: flex;
189
- flex-shrink: 0;
190
- height: 100%;
191
- box-sizing: border-box;
192
-
193
- background-color: #f5f5f7;
194
- border: 1px solid #999;
195
- border-radius: 5px 0 0 5px;
196
-
197
- --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);
198
- --dropdownBgColor: #2c2c2c;
199
- --dropdownTextColor: #fff;
200
- --dropdownBorderColor: #ddd;
201
- --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
202
- --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
203
- --dropdownHoverTextColor: #fff;
204
- --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
205
- --dropdownSelectedTextColor: #fff;
206
- --dropdownWhiteSpace: nowrap;
207
- --dropdownOffsetTop: 2px;
208
- --caretHeight: 8px;
209
- --caretWidth: 12px;
210
- --caretPadding: 0 0 0 5px;
211
- --dropdownFontSize: inherit;
212
- --dropdownBorderRadius: 4px;
213
- --buttonSlotPaddingRight: 0;
214
- --dropdownTextAlign: left;
215
- }
216
-
217
- #category-dropdown [slot='dropdown-label'] {
218
- color: var(--ia-theme-primary-text-color, #2c2c2c);
219
- font-size: 1.4rem;
220
- font-family: inherit;
221
- white-space: nowrap;
222
- }
223
-
224
- .no-dropdown #search-input {
225
- border-left: 1px solid #999;
226
- border-radius: 5px 0 0 5px;
227
- overflow: hidden;
228
- }
229
-
230
- #search-input {
231
- width: 100%;
232
- height: 100%;
233
- box-sizing: border-box;
234
- border-top: 1px solid #999;
235
- border-bottom: 1px solid #999;
236
- font-size: inherit;
237
-
238
- --input-height: calc(var(--search-bar-height--) - 2px);
239
- --input-padding: 0 var(--search-bar-internal-padding--, 5px);
240
- --input-background-color: var(
241
- --ia-theme-secondary-background-color,
242
- #fff
243
- );
244
- --input-border-radius: 0;
245
- --input-border-width: 0;
246
- --input-box-shadow: none;
247
- --input-focused-box-shadow: none;
248
- --input-font-size: auto;
249
- --clear-button-top: var(--clear-button-offset--, 0);
250
- --clear-button-right: 2px;
251
- }
252
-
253
- #search-button {
254
- appearance: none;
255
- box-sizing: border-box;
256
- border-radius: 0 5px 5px 0;
257
- background-color: var(--ia-theme-secondary-background-color, #fff);
258
- border: 1px solid #999;
259
- border-left: 0;
260
- padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;
261
- min-width: 30px;
262
- height: 100%;
263
- cursor: pointer;
264
- display: flex;
265
- align-items: center;
266
- justify-content: center;
267
- flex-shrink: 0;
268
- }
269
-
270
- #search-button img {
271
- width: 18px;
272
- height: 18px;
273
- }
274
-
275
- .search-button-loading-icon {
276
- --icon-width: 20px;
277
- margin-top: 2px;
278
- }
168
+ const ownStyles = css `
169
+ :host {
170
+ --search-bar-height--: var(--search-bar-height, 30px);
171
+ --search-bar-width--: var(--search-bar-width, 300px);
172
+ --search-bar-internal-padding--: var(--padding-sm, 5px);
173
+ --clear-button-offset--: var(--clear-button-offset, 0);
174
+ }
175
+
176
+ #container {
177
+ display: inline-block;
178
+ width: var(--search-bar-width--);
179
+ }
180
+
181
+ #main-bar {
182
+ display: flex;
183
+ height: var(--search-bar-height--, 30px);
184
+ flex: 1;
185
+ }
186
+
187
+ #category-dropdown {
188
+ display: flex;
189
+ flex-shrink: 0;
190
+ height: 100%;
191
+ box-sizing: border-box;
192
+
193
+ background-color: #f5f5f7;
194
+ border: 1px solid #999;
195
+ border-radius: 5px 0 0 5px;
196
+
197
+ --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);
198
+ --dropdownBgColor: #2c2c2c;
199
+ --dropdownTextColor: #fff;
200
+ --dropdownBorderColor: #ddd;
201
+ --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
202
+ --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
203
+ --dropdownHoverTextColor: #fff;
204
+ --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
205
+ --dropdownSelectedTextColor: #fff;
206
+ --dropdownWhiteSpace: nowrap;
207
+ --dropdownOffsetTop: 2px;
208
+ --caretHeight: 8px;
209
+ --caretWidth: 12px;
210
+ --caretPadding: 0 0 0 5px;
211
+ --dropdownFontSize: inherit;
212
+ --dropdownBorderRadius: 4px;
213
+ --buttonSlotPaddingRight: 0;
214
+ --dropdownTextAlign: left;
215
+ }
216
+
217
+ #category-dropdown [slot='dropdown-label'] {
218
+ color: var(--ia-theme-primary-text-color, #2c2c2c);
219
+ font-size: 1.4rem;
220
+ font-family: inherit;
221
+ white-space: nowrap;
222
+ }
223
+
224
+ .no-dropdown #search-input {
225
+ border-left: 1px solid #999;
226
+ border-radius: 5px 0 0 5px;
227
+ overflow: hidden;
228
+ }
229
+
230
+ #search-input {
231
+ width: 100%;
232
+ height: 100%;
233
+ box-sizing: border-box;
234
+ border-top: 1px solid #999;
235
+ border-bottom: 1px solid #999;
236
+ font-size: inherit;
237
+
238
+ --input-height: calc(var(--search-bar-height--) - 2px);
239
+ --input-padding: 0 var(--search-bar-internal-padding--, 5px);
240
+ --input-background-color: var(
241
+ --ia-theme-secondary-background-color,
242
+ #fff
243
+ );
244
+ --input-border-radius: 0;
245
+ --input-border-width: 0;
246
+ --input-box-shadow: none;
247
+ --input-focused-box-shadow: none;
248
+ --input-font-size: auto;
249
+ --clear-button-top: var(--clear-button-offset--, 0);
250
+ --clear-button-right: 2px;
251
+ }
252
+
253
+ #search-button {
254
+ appearance: none;
255
+ box-sizing: border-box;
256
+ border-radius: 0 5px 5px 0;
257
+ background-color: var(--ia-theme-secondary-background-color, #fff);
258
+ border: 1px solid #999;
259
+ border-left: 0;
260
+ padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;
261
+ min-width: 30px;
262
+ height: 100%;
263
+ cursor: pointer;
264
+ display: flex;
265
+ align-items: center;
266
+ justify-content: center;
267
+ flex-shrink: 0;
268
+ }
269
+
270
+ #search-button img {
271
+ width: 18px;
272
+ height: 18px;
273
+ }
274
+
275
+ .search-button-loading-icon {
276
+ --icon-width: 20px;
277
+ margin-top: 2px;
278
+ }
279
279
  `;
280
280
  return [themeStyles, ownStyles];
281
281
  }
package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ia-dropdown-search-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { msg } from '@lit/localize';\nimport { css, html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\nimport type { optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SearchCategory, SearchRequestedDetail } from './models';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport searchIcon from './search.svg';\n\nimport '@internetarchive/ia-clearable-text-input';\nimport '@internetarchive/ia-dropdown';\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n CategoryChanged: 'categoryChanged',\n SearchRequested: 'searchRequested',\n};\n\n@customElement('ia-dropdown-search-bar')\nexport class IADropdownSearchBar extends LitElement {\n /** The query that appears in the search bar */\n @property({ type: String }) query?: string;\n\n /** Dropdown menu options (tab IDs + labels) */\n @property({ type: Array }) categories: SearchCategory[] = [];\n\n /** The currently selected dropdown category ID */\n @property({ type: String }) selectedCategory?: string;\n\n /** Placeholder text for the search input */\n @property({ type: String }) placeholder = msg('Search');\n\n /** Whether to use the mobile layout */\n @property({ type: Boolean }) useMobileView = false;\n\n /** Whether to hide the category dropdown to the left of the search bar */\n @property({ type: Boolean }) hideDropdown = false;\n\n /** Whether the search button should show its loading state */\n @property({ type: Boolean }) loading = false;\n\n @query('#search-input')\n private searchInput!: IaClearableTextInput;\n\n /** The effective selected category, falling back to the first in the list. */\n private get resolvedCategory(): string {\n return this.selectedCategory ?? this.categories?.[0]?.id ?? '';\n }\n\n render(): TemplateResult {\n return html`\n <div id=\"container\" part=\"container\" role=\"search\">\n <div\n id=\"main-bar\"\n part=\"main-bar\"\n class=${this.hideDropdown ? 'no-dropdown' : nothing}\n >\n ${this.hideDropdown ? nothing : this.dropdownTemplate}\n ${this.textBoxTemplate} ${this.searchButtonTemplate}\n </div>\n </div>\n `;\n }\n\n /**\n * Template for the category dropdown on the left side of the search bar.\n */\n private get dropdownTemplate(): TemplateResult {\n return html`\n <ia-dropdown\n id=\"category-dropdown\"\n part=\"category-dropdown\"\n displayCaret\n includeSelectedOption\n closeOnSelect\n closeOnEscape\n closeOnBackdropClick\n openViaButton\n .selectedOption=${this.resolvedCategory}\n .options=${this.categories}\n @optionSelected=${this.handleCategorySelected}\n >\n <span slot=\"dropdown-label\" part=\"category-dropdown-label\"\n >${this.selectedCategoryLabel}</span\n >\n </ia-dropdown>\n `;\n }\n\n /**\n * Template for the main text entry box of the search bar.\n */\n private get textBoxTemplate(): TemplateResult {\n return html`\n <ia-clearable-text-input\n id=\"search-input\"\n part=\"search-input\"\n .value=${this.spacedQuery}\n placeholder=${this.placeholder}\n clearButtonScreenReaderLabel=${msg('Clear search query')}\n screenReaderLabel=${msg(\n 'Search the Archive. Filters and Advanced Search available below.',\n )}\n @clear=${this.searchFieldCleared}\n @submit=${this.handleSubmit}\n ></ia-clearable-text-input>\n `;\n }\n\n /**\n * Template for the \"magnifying glass\" search button to the right of the search bar.\n */\n private get searchButtonTemplate(): TemplateResult {\n return html`\n <button\n id=\"search-button\"\n part=\"search-button\"\n class=${this.loading ? 'loading' : nothing}\n type=\"button\"\n aria-label=${msg('Search')}\n @click=${this.handleSubmit}\n >\n ${this.loading\n ? html`<ia-status-indicator\n mode=\"loading\"\n class=\"search-button-loading-icon\"\n ></ia-status-indicator>`\n : html`<img src=${searchIcon} alt=\"\" />`}\n </button>\n `;\n }\n\n /**\n * The display label for the currently selected category.\n */\n private get selectedCategoryLabel(): string | TemplateResult {\n const match = this.categories.find((c) => c.id === this.resolvedCategory);\n return match?.label ?? this.resolvedCategory;\n }\n\n /**\n * The current search query with +'s replaced by spaces.\n */\n private get spacedQuery(): string {\n return this.query?.replace(/\\+/g, ' ') ?? '';\n }\n\n /**\n * Handler for when the search bar's clear button is pressed.\n */\n private searchFieldCleared(): void {\n if (this.query) {\n this.emitSearchRequested();\n }\n }\n\n /**\n * Handler for Enter key or search button click.\n */\n private handleSubmit(): void {\n this.emitSearchRequested();\n }\n\n /**\n * Handler for when the user selects a category from the dropdown.\n *\n * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled\n * pattern). The parent also binds this property and may re-set it on re-render.\n */\n private handleCategorySelected(\n e: CustomEvent<{ option: optionInterface }>,\n ): void {\n const newCategoryId = e.detail.option.id;\n if (newCategoryId === this.resolvedCategory) return;\n\n this.selectedCategory = newCategoryId;\n\n // On next tick, focus the text input bar (seemingly fails in Safari without the delay)\n setTimeout(() => this.searchInput.focus());\n\n this.dispatchEvent(\n new CustomEvent<string>(Events.CategoryChanged, {\n detail: newCategoryId,\n }),\n );\n }\n\n /**\n * Emits a `searchRequested` event with the current query and category.\n */\n private emitSearchRequested(): void {\n this.dispatchEvent(\n new CustomEvent<SearchRequestedDetail>(Events.SearchRequested, {\n detail: {\n query: this.searchInput.value,\n category: this.resolvedCategory,\n },\n }),\n );\n }\n\n static get styles() {\n const ownStyles = css`\n :host {\n --search-bar-height--: var(--search-bar-height, 30px);\n --search-bar-width--: var(--search-bar-width, 300px);\n --search-bar-internal-padding--: var(--padding-sm, 5px);\n --clear-button-offset--: var(--clear-button-offset, 0);\n }\n\n #container {\n display: inline-block;\n width: var(--search-bar-width--);\n }\n\n #main-bar {\n display: flex;\n height: var(--search-bar-height--, 30px);\n flex: 1;\n }\n\n #category-dropdown {\n display: flex;\n flex-shrink: 0;\n height: 100%;\n box-sizing: border-box;\n\n background-color: #f5f5f7;\n border: 1px solid #999;\n border-radius: 5px 0 0 5px;\n\n --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);\n --dropdownBgColor: #2c2c2c;\n --dropdownTextColor: #fff;\n --dropdownBorderColor: #ddd;\n --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n --dropdownHoverTextColor: #fff;\n --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n --dropdownSelectedTextColor: #fff;\n --dropdownWhiteSpace: nowrap;\n --dropdownOffsetTop: 2px;\n --caretHeight: 8px;\n --caretWidth: 12px;\n --caretPadding: 0 0 0 5px;\n --dropdownFontSize: inherit;\n --dropdownBorderRadius: 4px;\n --buttonSlotPaddingRight: 0;\n --dropdownTextAlign: left;\n }\n\n #category-dropdown [slot='dropdown-label'] {\n color: var(--ia-theme-primary-text-color, #2c2c2c);\n font-size: 1.4rem;\n font-family: inherit;\n white-space: nowrap;\n }\n\n .no-dropdown #search-input {\n border-left: 1px solid #999;\n border-radius: 5px 0 0 5px;\n overflow: hidden;\n }\n\n #search-input {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-top: 1px solid #999;\n border-bottom: 1px solid #999;\n font-size: inherit;\n\n --input-height: calc(var(--search-bar-height--) - 2px);\n --input-padding: 0 var(--search-bar-internal-padding--, 5px);\n --input-background-color: var(\n --ia-theme-secondary-background-color,\n #fff\n );\n --input-border-radius: 0;\n --input-border-width: 0;\n --input-box-shadow: none;\n --input-focused-box-shadow: none;\n --input-font-size: auto;\n --clear-button-top: var(--clear-button-offset--, 0);\n --clear-button-right: 2px;\n }\n\n #search-button {\n appearance: none;\n box-sizing: border-box;\n border-radius: 0 5px 5px 0;\n background-color: var(--ia-theme-secondary-background-color, #fff);\n border: 1px solid #999;\n border-left: 0;\n padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;\n min-width: 30px;\n height: 100%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n #search-button img {\n width: 18px;\n height: 18px;\n }\n\n .search-button-loading-icon {\n --icon-width: 20px;\n margin-top: 2px;\n }\n `;\n\n return [themeStyles, ownStyles];\n }\n}\n"]}
1
+ {"version":3,"file":"ia-dropdown-search-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { msg } from '@lit/localize';\r\nimport { css, html, LitElement, nothing, TemplateResult } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\r\nimport type { optionInterface } from '@internetarchive/ia-dropdown';\r\nimport type { SearchCategory, SearchRequestedDetail } from './models';\r\n\r\nimport themeStyles from '@src/themes/theme-styles';\r\nimport searchIcon from './search.svg';\r\n\r\nimport '@internetarchive/ia-clearable-text-input';\r\nimport '@internetarchive/ia-dropdown';\r\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\r\n\r\n/**\r\n * Event names emitted by this component\r\n */\r\nconst Events = {\r\n CategoryChanged: 'categoryChanged',\r\n SearchRequested: 'searchRequested',\r\n};\r\n\r\n@customElement('ia-dropdown-search-bar')\r\nexport class IADropdownSearchBar extends LitElement {\r\n /** The query that appears in the search bar */\r\n @property({ type: String }) query?: string;\r\n\r\n /** Dropdown menu options (tab IDs + labels) */\r\n @property({ type: Array }) categories: SearchCategory[] = [];\r\n\r\n /** The currently selected dropdown category ID */\r\n @property({ type: String }) selectedCategory?: string;\r\n\r\n /** Placeholder text for the search input */\r\n @property({ type: String }) placeholder = msg('Search');\r\n\r\n /** Whether to use the mobile layout */\r\n @property({ type: Boolean }) useMobileView = false;\r\n\r\n /** Whether to hide the category dropdown to the left of the search bar */\r\n @property({ type: Boolean }) hideDropdown = false;\r\n\r\n /** Whether the search button should show its loading state */\r\n @property({ type: Boolean }) loading = false;\r\n\r\n @query('#search-input')\r\n private searchInput!: IaClearableTextInput;\r\n\r\n /** The effective selected category, falling back to the first in the list. */\r\n private get resolvedCategory(): string {\r\n return this.selectedCategory ?? this.categories?.[0]?.id ?? '';\r\n }\r\n\r\n render(): TemplateResult {\r\n return html`\r\n <div id=\"container\" part=\"container\" role=\"search\">\r\n <div\r\n id=\"main-bar\"\r\n part=\"main-bar\"\r\n class=${this.hideDropdown ? 'no-dropdown' : nothing}\r\n >\r\n ${this.hideDropdown ? nothing : this.dropdownTemplate}\r\n ${this.textBoxTemplate} ${this.searchButtonTemplate}\r\n </div>\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Template for the category dropdown on the left side of the search bar.\r\n */\r\n private get dropdownTemplate(): TemplateResult {\r\n return html`\r\n <ia-dropdown\r\n id=\"category-dropdown\"\r\n part=\"category-dropdown\"\r\n displayCaret\r\n includeSelectedOption\r\n closeOnSelect\r\n closeOnEscape\r\n closeOnBackdropClick\r\n openViaButton\r\n .selectedOption=${this.resolvedCategory}\r\n .options=${this.categories}\r\n @optionSelected=${this.handleCategorySelected}\r\n >\r\n <span slot=\"dropdown-label\" part=\"category-dropdown-label\"\r\n >${this.selectedCategoryLabel}</span\r\n >\r\n </ia-dropdown>\r\n `;\r\n }\r\n\r\n /**\r\n * Template for the main text entry box of the search bar.\r\n */\r\n private get textBoxTemplate(): TemplateResult {\r\n return html`\r\n <ia-clearable-text-input\r\n id=\"search-input\"\r\n part=\"search-input\"\r\n .value=${this.spacedQuery}\r\n placeholder=${this.placeholder}\r\n clearButtonScreenReaderLabel=${msg('Clear search query')}\r\n screenReaderLabel=${msg(\r\n 'Search the Archive. Filters and Advanced Search available below.',\r\n )}\r\n @clear=${this.searchFieldCleared}\r\n @submit=${this.handleSubmit}\r\n ></ia-clearable-text-input>\r\n `;\r\n }\r\n\r\n /**\r\n * Template for the \"magnifying glass\" search button to the right of the search bar.\r\n */\r\n private get searchButtonTemplate(): TemplateResult {\r\n return html`\r\n <button\r\n id=\"search-button\"\r\n part=\"search-button\"\r\n class=${this.loading ? 'loading' : nothing}\r\n type=\"button\"\r\n aria-label=${msg('Search')}\r\n @click=${this.handleSubmit}\r\n >\r\n ${this.loading\r\n ? html`<ia-status-indicator\r\n mode=\"loading\"\r\n class=\"search-button-loading-icon\"\r\n ></ia-status-indicator>`\r\n : html`<img src=${searchIcon} alt=\"\" />`}\r\n </button>\r\n `;\r\n }\r\n\r\n /**\r\n * The display label for the currently selected category.\r\n */\r\n private get selectedCategoryLabel(): string | TemplateResult {\r\n const match = this.categories.find((c) => c.id === this.resolvedCategory);\r\n return match?.label ?? this.resolvedCategory;\r\n }\r\n\r\n /**\r\n * The current search query with +'s replaced by spaces.\r\n */\r\n private get spacedQuery(): string {\r\n return this.query?.replace(/\\+/g, ' ') ?? '';\r\n }\r\n\r\n /**\r\n * Handler for when the search bar's clear button is pressed.\r\n */\r\n private searchFieldCleared(): void {\r\n if (this.query) {\r\n this.emitSearchRequested();\r\n }\r\n }\r\n\r\n /**\r\n * Handler for Enter key or search button click.\r\n */\r\n private handleSubmit(): void {\r\n this.emitSearchRequested();\r\n }\r\n\r\n /**\r\n * Handler for when the user selects a category from the dropdown.\r\n *\r\n * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled\r\n * pattern). The parent also binds this property and may re-set it on re-render.\r\n */\r\n private handleCategorySelected(\r\n e: CustomEvent<{ option: optionInterface }>,\r\n ): void {\r\n const newCategoryId = e.detail.option.id;\r\n if (newCategoryId === this.resolvedCategory) return;\r\n\r\n this.selectedCategory = newCategoryId;\r\n\r\n // On next tick, focus the text input bar (seemingly fails in Safari without the delay)\r\n setTimeout(() => this.searchInput.focus());\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<string>(Events.CategoryChanged, {\r\n detail: newCategoryId,\r\n }),\r\n );\r\n }\r\n\r\n /**\r\n * Emits a `searchRequested` event with the current query and category.\r\n */\r\n private emitSearchRequested(): void {\r\n this.dispatchEvent(\r\n new CustomEvent<SearchRequestedDetail>(Events.SearchRequested, {\r\n detail: {\r\n query: this.searchInput.value,\r\n category: this.resolvedCategory,\r\n },\r\n }),\r\n );\r\n }\r\n\r\n static get styles() {\r\n const ownStyles = css`\r\n :host {\r\n --search-bar-height--: var(--search-bar-height, 30px);\r\n --search-bar-width--: var(--search-bar-width, 300px);\r\n --search-bar-internal-padding--: var(--padding-sm, 5px);\r\n --clear-button-offset--: var(--clear-button-offset, 0);\r\n }\r\n\r\n #container {\r\n display: inline-block;\r\n width: var(--search-bar-width--);\r\n }\r\n\r\n #main-bar {\r\n display: flex;\r\n height: var(--search-bar-height--, 30px);\r\n flex: 1;\r\n }\r\n\r\n #category-dropdown {\r\n display: flex;\r\n flex-shrink: 0;\r\n height: 100%;\r\n box-sizing: border-box;\r\n\r\n background-color: #f5f5f7;\r\n border: 1px solid #999;\r\n border-radius: 5px 0 0 5px;\r\n\r\n --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);\r\n --dropdownBgColor: #2c2c2c;\r\n --dropdownTextColor: #fff;\r\n --dropdownBorderColor: #ddd;\r\n --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\r\n --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\r\n --dropdownHoverTextColor: #fff;\r\n --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\r\n --dropdownSelectedTextColor: #fff;\r\n --dropdownWhiteSpace: nowrap;\r\n --dropdownOffsetTop: 2px;\r\n --caretHeight: 8px;\r\n --caretWidth: 12px;\r\n --caretPadding: 0 0 0 5px;\r\n --dropdownFontSize: inherit;\r\n --dropdownBorderRadius: 4px;\r\n --buttonSlotPaddingRight: 0;\r\n --dropdownTextAlign: left;\r\n }\r\n\r\n #category-dropdown [slot='dropdown-label'] {\r\n color: var(--ia-theme-primary-text-color, #2c2c2c);\r\n font-size: 1.4rem;\r\n font-family: inherit;\r\n white-space: nowrap;\r\n }\r\n\r\n .no-dropdown #search-input {\r\n border-left: 1px solid #999;\r\n border-radius: 5px 0 0 5px;\r\n overflow: hidden;\r\n }\r\n\r\n #search-input {\r\n width: 100%;\r\n height: 100%;\r\n box-sizing: border-box;\r\n border-top: 1px solid #999;\r\n border-bottom: 1px solid #999;\r\n font-size: inherit;\r\n\r\n --input-height: calc(var(--search-bar-height--) - 2px);\r\n --input-padding: 0 var(--search-bar-internal-padding--, 5px);\r\n --input-background-color: var(\r\n --ia-theme-secondary-background-color,\r\n #fff\r\n );\r\n --input-border-radius: 0;\r\n --input-border-width: 0;\r\n --input-box-shadow: none;\r\n --input-focused-box-shadow: none;\r\n --input-font-size: auto;\r\n --clear-button-top: var(--clear-button-offset--, 0);\r\n --clear-button-right: 2px;\r\n }\r\n\r\n #search-button {\r\n appearance: none;\r\n box-sizing: border-box;\r\n border-radius: 0 5px 5px 0;\r\n background-color: var(--ia-theme-secondary-background-color, #fff);\r\n border: 1px solid #999;\r\n border-left: 0;\r\n padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;\r\n min-width: 30px;\r\n height: 100%;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n }\r\n\r\n #search-button img {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n .search-button-loading-icon {\r\n --icon-width: 20px;\r\n margin-top: 2px;\r\n }\r\n `;\r\n\r\n return [themeStyles, ownStyles];\r\n }\r\n}\r\n"]}
package/dist/src/elements/ia-dropdown-search-bar/models.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"models.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/models.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit';\n\n/**\n * A category to include in the dropdown. Consists of an internal `id` string that is\n * emitted on selection, and a human-readable `label` to display in the dropdown.\n */\nexport type SearchCategory = {\n id: string;\n label: string | TemplateResult;\n};\n\n/**\n * Detail object emitted with `searchRequested` events.\n */\nexport type SearchRequestedDetail = {\n query: string;\n category: string;\n};\n"]}
1
+ {"version":3,"file":"models.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/models.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit';\r\n\r\n/**\r\n * A category to include in the dropdown. Consists of an internal `id` string that is\r\n * emitted on selection, and a human-readable `label` to display in the dropdown.\r\n */\r\nexport type SearchCategory = {\r\n id: string;\r\n label: string | TemplateResult;\r\n};\r\n\r\n/**\r\n * Detail object emitted with `searchRequested` events.\r\n */\r\nexport type SearchRequestedDetail = {\r\n query: string;\r\n category: string;\r\n};\r\n"]}
package/dist/src/elements/ia-dropdown-search-bar/search.svg CHANGED
@@ -1,10 +1,10 @@
1
- <svg
2
- viewBox="0 0 100 100"
3
- xmlns="http://www.w3.org/2000/svg">
4
- <path
5
- class="fill-color"
6
- d="m17.0555551 41.3194459c0-12.7430552 10.3541664-23.1027772 23.0847216-23.1027772 12.7166664 0 23.0777773 10.359722 23.0777773 23.1027772 0 12.7361108-10.3611109 23.0986106-23.0777773 23.0986106-12.7305552 0-23.0847216-10.3624998-23.0847216-23.0986106zm-17.24305512 0c0 22.2916661 18.04583292 40.3472213 40.32777672 40.3472213 8.9208332 0 17.145833-2.9319449 23.8194439-7.8527776l24.1513883 24.0777771c1.2125 1.1402778 2.8430555 1.8430556 4.6374999 1.8430556 3.7444443 0 6.7805554-3.0361111 6.7805554-6.7791665 0-2.0652778-.9222222-3.9069444-2.3736111-5.1499999l-23.718055-23.7458328c4.4152777-6.4791665 7.0152776-14.3055552 7.0152776-22.7402772 0-22.2791661-18.0458328-40.34861006-40.312499-40.34861006-22.2819438 0-40.32777672 18.06944396-40.32777672 40.34861006z"
7
- fill="#2c2c2c"
8
- fill-rule="evenodd"
9
- />
10
- </svg>
1
+ <svg
2
+ viewBox="0 0 100 100"
3
+ xmlns="http://www.w3.org/2000/svg">
4
+ <path
5
+ class="fill-color"
6
+ d="m17.0555551 41.3194459c0-12.7430552 10.3541664-23.1027772 23.0847216-23.1027772 12.7166664 0 23.0777773 10.359722 23.0777773 23.1027772 0 12.7361108-10.3611109 23.0986106-23.0777773 23.0986106-12.7305552 0-23.0847216-10.3624998-23.0847216-23.0986106zm-17.24305512 0c0 22.2916661 18.04583292 40.3472213 40.32777672 40.3472213 8.9208332 0 17.145833-2.9319449 23.8194439-7.8527776l24.1513883 24.0777771c1.2125 1.1402778 2.8430555 1.8430556 4.6374999 1.8430556 3.7444443 0 6.7805554-3.0361111 6.7805554-6.7791665 0-2.0652778-.9222222-3.9069444-2.3736111-5.1499999l-23.718055-23.7458328c4.4152777-6.4791665 7.0152776-14.3055552 7.0152776-22.7402772 0-22.2791661-18.0458328-40.34861006-40.312499-40.34861006-22.2819438 0-40.32777672 18.06944396-40.32777672 40.34861006z"
7
+ fill="#2c2c2c"
8
+ fill-rule="evenodd"
9
+ />
10
+ </svg>
package/dist/src/elements/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC","sourcesContent":["export * from './ia-button/ia-button';\nexport * from './ia-combo-box/ia-combo-box';\nexport * from './ia-dropdown-search-bar/ia-dropdown-search-bar';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC","sourcesContent":["export * from './ia-button/ia-button';\r\nexport * from './ia-combo-box/ia-combo-box';\r\nexport * from './ia-dropdown-search-bar/ia-dropdown-search-bar';\r\n"]}
package/dist/src/labs/ia-snow/flake.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="36.283" height="36.283"><path d="M35.531 17.391h-3.09l.845-1.464a.748.748 0 1 0-1.297-.75l-1.276 2.214H28.61l2.515-4.354a.751.751 0 0 0-.272-1.024.75.75 0 0 0-1.024.274l-2.948 5.104h-2.023a6.751 6.751 0 0 0-2.713-4.684l1.019-1.76 5.896-.002a.75.75 0 0 0 0-1.5l-5.029.002 1.051-1.82 2.557.002a.75.75 0 0 0 0-1.5l-1.689-.002 1.545-2.676a.75.75 0 1 0-1.302-.75l-1.547 2.676-.844-1.463a.749.749 0 1 0-1.297.75l1.278 2.213-1.051 1.818-2.514-4.354a.75.75 0 0 0-1.298.75l2.946 5.104-1.016 1.758a6.692 6.692 0 0 0-2.706-.57 6.74 6.74 0 0 0-2.707.568l-1.013-1.754 2.946-5.105a.75.75 0 0 0-1.298-.75L13.56 8.697l-1.05-1.818 1.278-2.217a.749.749 0 0 0-1.298-.75l-.845 1.465-1.551-2.678a.75.75 0 0 0-1.024-.273.748.748 0 0 0-.274 1.023l1.545 2.678H8.652a.75.75 0 0 0 0 1.5h2.556l1.05 1.818H7.231a.75.75 0 0 0 0 1.5h5.894l1.017 1.762a6.755 6.755 0 0 0-2.712 4.684H9.406l-2.95-5.104a.75.75 0 1 0-1.299.75l2.516 4.354H5.569l-1.277-2.213a.75.75 0 0 0-1.298.75l.845 1.463H.75a.75.75 0 0 0 0 1.5h3.09l-.845 1.465a.747.747 0 0 0 .275 1.022.75.75 0 0 0 .374.103.75.75 0 0 0 .65-.375l1.277-2.215h2.103l-2.516 4.354a.75.75 0 0 0 1.299.75l2.949-5.104h2.024a6.761 6.761 0 0 0 2.712 4.685l-1.017 1.762H7.232a.75.75 0 0 0 0 1.5h5.026l-1.05 1.818H8.651a.75.75 0 0 0 0 1.5h1.69l-1.545 2.676a.75.75 0 0 0 1.299.75l1.546-2.676.846 1.465a.755.755 0 0 0 .65.375.737.737 0 0 0 .375-.103.747.747 0 0 0 .274-1.022l-1.279-2.215 1.05-1.82 2.515 4.354a.75.75 0 0 0 1.299-.75l-2.947-5.104 1.013-1.756a6.72 6.72 0 0 0 5.415 0l1.014 1.756-2.947 5.104a.75.75 0 0 0 1.298.75l2.515-4.354 1.053 1.82-1.277 2.213a.75.75 0 0 0 1.298.75l.844-1.463 1.545 2.678c.141.24.393.375.65.375a.75.75 0 0 0 .649-1.125l-1.548-2.678h1.689a.75.75 0 0 0 0-1.5h-2.557l-1.051-1.82 5.029.002a.75.75 0 0 0 0-1.5l-5.896-.002-1.019-1.76a6.75 6.75 0 0 0 2.711-4.685h2.023l2.947 5.104a.753.753 0 0 0 1.025.273.749.749 0 0 0 .272-1.023l-2.515-4.354h2.104l1.279 2.215a.75.75 0 0 0 .649.375c.127 0 .256-.03.375-.103a.748.748 0 0 0 .273-1.022l-.848-1.465h3.092a.75.75 0 0 0 .003-1.5zm-12.136.75c0 .257-.041.502-.076.75a5.223 5.223 0 0 1-1.943 3.358 5.242 5.242 0 0 1-1.291.766 5.224 5.224 0 0 1-1.949.384 5.157 5.157 0 0 1-3.239-1.15 5.22 5.22 0 0 1-1.943-3.358c-.036-.247-.076-.493-.076-.75s.04-.503.076-.75a5.22 5.22 0 0 1 1.944-3.359c.393-.312.82-.576 1.291-.765a5.219 5.219 0 0 1 1.948-.384c.69 0 1.344.142 1.948.384.471.188.898.454 1.291.765a5.222 5.222 0 0 1 1.943 3.359c.035.247.076.493.076.75z" fill=":color:"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="36.283" height="36.283"><path d="M35.531 17.391h-3.09l.845-1.464a.748.748 0 1 0-1.297-.75l-1.276 2.214H28.61l2.515-4.354a.751.751 0 0 0-.272-1.024.75.75 0 0 0-1.024.274l-2.948 5.104h-2.023a6.751 6.751 0 0 0-2.713-4.684l1.019-1.76 5.896-.002a.75.75 0 0 0 0-1.5l-5.029.002 1.051-1.82 2.557.002a.75.75 0 0 0 0-1.5l-1.689-.002 1.545-2.676a.75.75 0 1 0-1.302-.75l-1.547 2.676-.844-1.463a.749.749 0 1 0-1.297.75l1.278 2.213-1.051 1.818-2.514-4.354a.75.75 0 0 0-1.298.75l2.946 5.104-1.016 1.758a6.692 6.692 0 0 0-2.706-.57 6.74 6.74 0 0 0-2.707.568l-1.013-1.754 2.946-5.105a.75.75 0 0 0-1.298-.75L13.56 8.697l-1.05-1.818 1.278-2.217a.749.749 0 0 0-1.298-.75l-.845 1.465-1.551-2.678a.75.75 0 0 0-1.024-.273.748.748 0 0 0-.274 1.023l1.545 2.678H8.652a.75.75 0 0 0 0 1.5h2.556l1.05 1.818H7.231a.75.75 0 0 0 0 1.5h5.894l1.017 1.762a6.755 6.755 0 0 0-2.712 4.684H9.406l-2.95-5.104a.75.75 0 1 0-1.299.75l2.516 4.354H5.569l-1.277-2.213a.75.75 0 0 0-1.298.75l.845 1.463H.75a.75.75 0 0 0 0 1.5h3.09l-.845 1.465a.747.747 0 0 0 .275 1.022.75.75 0 0 0 .374.103.75.75 0 0 0 .65-.375l1.277-2.215h2.103l-2.516 4.354a.75.75 0 0 0 1.299.75l2.949-5.104h2.024a6.761 6.761 0 0 0 2.712 4.685l-1.017 1.762H7.232a.75.75 0 0 0 0 1.5h5.026l-1.05 1.818H8.651a.75.75 0 0 0 0 1.5h1.69l-1.545 2.676a.75.75 0 0 0 1.299.75l1.546-2.676.846 1.465a.755.755 0 0 0 .65.375.737.737 0 0 0 .375-.103.747.747 0 0 0 .274-1.022l-1.279-2.215 1.05-1.82 2.515 4.354a.75.75 0 0 0 1.299-.75l-2.947-5.104 1.013-1.756a6.72 6.72 0 0 0 5.415 0l1.014 1.756-2.947 5.104a.75.75 0 0 0 1.298.75l2.515-4.354 1.053 1.82-1.277 2.213a.75.75 0 0 0 1.298.75l.844-1.463 1.545 2.678c.141.24.393.375.65.375a.75.75 0 0 0 .649-1.125l-1.548-2.678h1.689a.75.75 0 0 0 0-1.5h-2.557l-1.051-1.82 5.029.002a.75.75 0 0 0 0-1.5l-5.896-.002-1.019-1.76a6.75 6.75 0 0 0 2.711-4.685h2.023l2.947 5.104a.753.753 0 0 0 1.025.273.749.749 0 0 0 .272-1.023l-2.515-4.354h2.104l1.279 2.215a.75.75 0 0 0 .649.375c.127 0 .256-.03.375-.103a.748.748 0 0 0 .273-1.022l-.848-1.465h3.092a.75.75 0 0 0 .003-1.5zm-12.136.75c0 .257-.041.502-.076.75a5.223 5.223 0 0 1-1.943 3.358 5.242 5.242 0 0 1-1.291.766 5.224 5.224 0 0 1-1.949.384 5.157 5.157 0 0 1-3.239-1.15 5.22 5.22 0 0 1-1.943-3.358c-.036-.247-.076-.493-.076-.75s.04-.503.076-.75a5.22 5.22 0 0 1 1.944-3.359c.393-.312.82-.576 1.291-.765a5.219 5.219 0 0 1 1.948-.384c.69 0 1.344.142 1.948.384.471.188.898.454 1.291.765a5.222 5.222 0 0 1 1.943 3.359c.035.247.076.493.076.75z" fill=":color:"/></svg>