@internetarchive/elements 0.2.7-alpha-webdev8429.1 → 0.2.7-alpha-webdev8429.3
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/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.d.ts +3 -1
- package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.d.ts.map +1 -1
- package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js +181 -175
- package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js.map +1 -1
- package/dist/src/elements/ia-dropdown-search-bar/models.js.map +1 -1
- package/dist/src/elements/index.js.map +1 -1
- package/dist/src/themes/theme-styles.js +87 -87
- package/dist/src/themes/theme-styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement, TemplateResult } from 'lit';
|
|
1
|
+
import { LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
2
2
|
import type { SearchCategory } from './models.js';
|
|
3
3
|
import '@internetarchive/ia-clearable-text-input';
|
|
4
4
|
import '@internetarchive/ia-dropdown';
|
|
@@ -19,9 +19,11 @@ export declare class IADropdownSearchBar extends LitElement {
|
|
|
19
19
|
/** Whether the search button should show its loading state */
|
|
20
20
|
loading: boolean;
|
|
21
21
|
private searchInput;
|
|
22
|
+
private categoryDropdown?;
|
|
22
23
|
/** The effective selected category, falling back to the first in the list. */
|
|
23
24
|
private get resolvedCategory();
|
|
24
25
|
render(): TemplateResult;
|
|
26
|
+
willUpdate(changed: PropertyValues): void;
|
|
25
27
|
/**
|
|
26
28
|
* Template for the category dropdown on the left side of the search bar.
|
|
27
29
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-dropdown-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"ia-dropdown-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,UAAU,EAEV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAIb,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,UAAU,CAAC;AAKtE,OAAO,0CAA0C,CAAC;AAClD,OAAO,8BAA8B,CAAC;AACtC,OAAO,uDAAuD,CAAC;AAU/D,qBACa,mBAAoB,SAAQ,UAAU;IACjD,+CAA+C;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAE3C,+CAA+C;IACpB,UAAU,EAAE,cAAc,EAAE,CAAM;IAE7D,kDAAkD;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEtD,4CAA4C;IAChB,WAAW,SAAiB;IAExD,uCAAuC;IACV,aAAa,UAAS;IAEnD,0EAA0E;IAC7C,YAAY,UAAS;IAElD,8DAA8D;IACjC,OAAO,UAAS;IAG7C,OAAO,CAAC,WAAW,CAAwB;IAG3C,OAAO,CAAC,gBAAgB,CAAC,CAAa;IAEtC,8EAA8E;IAC9E,OAAO,KAAK,gBAAgB,GAE3B;IAED,MAAM,IAAI,cAAc;IAexB,UAAU,CAAC,OAAO,EAAE,cAAc;IAelC;;OAEG;IACH,OAAO,KAAK,gBAAgB,GAoB3B;IAED;;OAEG;IACH,OAAO,KAAK,eAAe,GAe1B;IAED;;OAEG;IACH,OAAO,KAAK,oBAAoB,GAkB/B;IAED;;OAEG;IACH,OAAO,KAAK,qBAAqB,GAGhC;IAED;;OAEG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB;IAkB9B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B,MAAM,KAAK,MAAM,8BAmHhB;CACF"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { msg } from '@lit/localize';
|
|
3
|
-
import { css, html, LitElement, nothing } from 'lit';
|
|
4
|
-
import { customElement, property,
|
|
3
|
+
import { css, html, LitElement, nothing, } from 'lit';
|
|
4
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
|
5
5
|
import themeStyles from '../../themes/theme-styles.js';
|
|
6
6
|
import searchIcon from './search.svg';
|
|
7
7
|
import '@internetarchive/ia-clearable-text-input';
|
|
@@ -33,86 +33,92 @@ 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
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
49
|
+
willUpdate(changed) {
|
|
50
|
+
// Push the new categories down to the inner dropdown immediately, since ia-dropdown
|
|
51
|
+
// mutates its own selected option on interaction which can cause Lit's
|
|
52
|
+
// property-binding diff to miss the change in certain cases.
|
|
53
|
+
if (changed.has('selectedCategory') || changed.has('categories')) {
|
|
54
|
+
const resolved = this.resolvedCategory;
|
|
55
|
+
if (this.categoryDropdown &&
|
|
56
|
+
this.categoryDropdown.selectedOption !== resolved) {
|
|
57
|
+
this.categoryDropdown.selectedOption = resolved;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
55
61
|
/**
|
|
56
62
|
* Template for the category dropdown on the left side of the search bar.
|
|
57
63
|
*/
|
|
58
64
|
get dropdownTemplate() {
|
|
59
|
-
return html `
|
|
60
|
-
<ia-dropdown
|
|
61
|
-
id="category-dropdown"
|
|
62
|
-
part="category-dropdown"
|
|
63
|
-
displayCaret
|
|
64
|
-
includeSelectedOption
|
|
65
|
-
closeOnSelect
|
|
66
|
-
closeOnEscape
|
|
67
|
-
closeOnBackdropClick
|
|
68
|
-
openViaButton
|
|
69
|
-
.selectedOption=${this.resolvedCategory}
|
|
70
|
-
.options=${this.categories}
|
|
71
|
-
@optionSelected=${this.handleCategorySelected}
|
|
72
|
-
>
|
|
73
|
-
<span slot="dropdown-label" part="category-dropdown-label"
|
|
74
|
-
>${this.selectedCategoryLabel}</span
|
|
75
|
-
>
|
|
76
|
-
</ia-dropdown>
|
|
65
|
+
return html `
|
|
66
|
+
<ia-dropdown
|
|
67
|
+
id="category-dropdown"
|
|
68
|
+
part="category-dropdown"
|
|
69
|
+
displayCaret
|
|
70
|
+
includeSelectedOption
|
|
71
|
+
closeOnSelect
|
|
72
|
+
closeOnEscape
|
|
73
|
+
closeOnBackdropClick
|
|
74
|
+
openViaButton
|
|
75
|
+
.selectedOption=${this.resolvedCategory}
|
|
76
|
+
.options=${this.categories}
|
|
77
|
+
@optionSelected=${this.handleCategorySelected}
|
|
78
|
+
>
|
|
79
|
+
<span slot="dropdown-label" part="category-dropdown-label"
|
|
80
|
+
>${this.selectedCategoryLabel}</span
|
|
81
|
+
>
|
|
82
|
+
</ia-dropdown>
|
|
77
83
|
`;
|
|
78
84
|
}
|
|
79
85
|
/**
|
|
80
86
|
* Template for the main text entry box of the search bar.
|
|
81
87
|
*/
|
|
82
88
|
get textBoxTemplate() {
|
|
83
|
-
return html `
|
|
84
|
-
<ia-clearable-text-input
|
|
85
|
-
id="search-input"
|
|
86
|
-
part="search-input"
|
|
87
|
-
.value=${this.spacedQuery}
|
|
88
|
-
placeholder=${this.placeholder}
|
|
89
|
-
clearButtonScreenReaderLabel=${msg('Clear search query')}
|
|
90
|
-
screenReaderLabel=${msg('Search the Archive. Filters and Advanced Search available below.')}
|
|
91
|
-
@clear=${this.searchFieldCleared}
|
|
92
|
-
@submit=${this.handleSubmit}
|
|
93
|
-
></ia-clearable-text-input>
|
|
89
|
+
return html `
|
|
90
|
+
<ia-clearable-text-input
|
|
91
|
+
id="search-input"
|
|
92
|
+
part="search-input"
|
|
93
|
+
.value=${this.spacedQuery}
|
|
94
|
+
placeholder=${this.placeholder}
|
|
95
|
+
clearButtonScreenReaderLabel=${msg('Clear search query')}
|
|
96
|
+
screenReaderLabel=${msg('Search the Archive. Filters and Advanced Search available below.')}
|
|
97
|
+
@clear=${this.searchFieldCleared}
|
|
98
|
+
@submit=${this.handleSubmit}
|
|
99
|
+
></ia-clearable-text-input>
|
|
94
100
|
`;
|
|
95
101
|
}
|
|
96
102
|
/**
|
|
97
103
|
* Template for the "magnifying glass" search button to the right of the search bar.
|
|
98
104
|
*/
|
|
99
105
|
get searchButtonTemplate() {
|
|
100
|
-
return html `
|
|
101
|
-
<button
|
|
102
|
-
id="search-button"
|
|
103
|
-
part="search-button"
|
|
104
|
-
class=${this.loading ? 'loading' : nothing}
|
|
105
|
-
type="button"
|
|
106
|
-
aria-label=${msg('Search')}
|
|
107
|
-
@click=${this.handleSubmit}
|
|
108
|
-
>
|
|
106
|
+
return html `
|
|
107
|
+
<button
|
|
108
|
+
id="search-button"
|
|
109
|
+
part="search-button"
|
|
110
|
+
class=${this.loading ? 'loading' : nothing}
|
|
111
|
+
type="button"
|
|
112
|
+
aria-label=${msg('Search')}
|
|
113
|
+
@click=${this.handleSubmit}
|
|
114
|
+
>
|
|
109
115
|
${this.loading
|
|
110
|
-
? html `<ia-status-indicator
|
|
111
|
-
mode="loading"
|
|
112
|
-
class="search-button-loading-icon"
|
|
116
|
+
? html `<ia-status-indicator
|
|
117
|
+
mode="loading"
|
|
118
|
+
class="search-button-loading-icon"
|
|
113
119
|
></ia-status-indicator>`
|
|
114
|
-
: html `<img src=${searchIcon} alt="" />`}
|
|
115
|
-
</button>
|
|
120
|
+
: html `<img src=${searchIcon} alt="" />`}
|
|
121
|
+
</button>
|
|
116
122
|
`;
|
|
117
123
|
}
|
|
118
124
|
/**
|
|
@@ -171,117 +177,117 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
|
|
|
171
177
|
}));
|
|
172
178
|
}
|
|
173
179
|
static get styles() {
|
|
174
|
-
const ownStyles = css `
|
|
175
|
-
:host {
|
|
176
|
-
--search-bar-height--: var(--search-bar-height, 30px);
|
|
177
|
-
--search-bar-width--: var(--search-bar-width, 300px);
|
|
178
|
-
--search-bar-internal-padding--: var(--padding-sm, 5px);
|
|
179
|
-
--clear-button-offset--: var(--clear-button-offset, 0);
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
#container {
|
|
183
|
-
display: inline-block;
|
|
184
|
-
width: var(--search-bar-width--);
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
#main-bar {
|
|
188
|
-
display: flex;
|
|
189
|
-
height: var(--search-bar-height--, 30px);
|
|
190
|
-
flex: 1;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
#category-dropdown {
|
|
194
|
-
display: flex;
|
|
195
|
-
flex-shrink: 0;
|
|
196
|
-
height: 100%;
|
|
197
|
-
box-sizing: border-box;
|
|
198
|
-
|
|
199
|
-
background-color: #f5f5f7;
|
|
200
|
-
border: 1px solid #999;
|
|
201
|
-
border-radius: 5px 0 0 5px;
|
|
202
|
-
|
|
203
|
-
--dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);
|
|
204
|
-
--dropdownBgColor: #2c2c2c;
|
|
205
|
-
--dropdownTextColor: #fff;
|
|
206
|
-
--dropdownBorderColor: #ddd;
|
|
207
|
-
--dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
|
|
208
|
-
--dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
|
|
209
|
-
--dropdownHoverTextColor: #fff;
|
|
210
|
-
--dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
|
|
211
|
-
--dropdownSelectedTextColor: #fff;
|
|
212
|
-
--dropdownWhiteSpace: nowrap;
|
|
213
|
-
--dropdownOffsetTop: 2px;
|
|
214
|
-
--caretHeight: 8px;
|
|
215
|
-
--caretWidth: 12px;
|
|
216
|
-
--caretPadding: 0 0 0 5px;
|
|
217
|
-
--dropdownFontSize: inherit;
|
|
218
|
-
--dropdownBorderRadius: 4px;
|
|
219
|
-
--buttonSlotPaddingRight: 0;
|
|
220
|
-
--dropdownTextAlign: left;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
#category-dropdown [slot='dropdown-label'] {
|
|
224
|
-
color: var(--ia-theme-primary-text-color, #2c2c2c);
|
|
225
|
-
font-size: 1.4rem;
|
|
226
|
-
font-family: inherit;
|
|
227
|
-
white-space: nowrap;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.no-dropdown #search-input {
|
|
231
|
-
border-left: 1px solid #999;
|
|
232
|
-
border-radius: 5px 0 0 5px;
|
|
233
|
-
overflow: hidden;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
#search-input {
|
|
237
|
-
width: 100%;
|
|
238
|
-
height: 100%;
|
|
239
|
-
box-sizing: border-box;
|
|
240
|
-
border-top: 1px solid #999;
|
|
241
|
-
border-bottom: 1px solid #999;
|
|
242
|
-
font-size: inherit;
|
|
243
|
-
|
|
244
|
-
--input-height: calc(var(--search-bar-height--) - 2px);
|
|
245
|
-
--input-padding: 0 var(--search-bar-internal-padding--, 5px);
|
|
246
|
-
--input-background-color: var(
|
|
247
|
-
--ia-theme-secondary-background-color,
|
|
248
|
-
#fff
|
|
249
|
-
);
|
|
250
|
-
--input-border-radius: 0;
|
|
251
|
-
--input-border-width: 0;
|
|
252
|
-
--input-box-shadow: none;
|
|
253
|
-
--input-focused-box-shadow: none;
|
|
254
|
-
--input-font-size: auto;
|
|
255
|
-
--clear-button-top: var(--clear-button-offset--, 0);
|
|
256
|
-
--clear-button-right: 2px;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
#search-button {
|
|
260
|
-
appearance: none;
|
|
261
|
-
box-sizing: border-box;
|
|
262
|
-
border-radius: 0 5px 5px 0;
|
|
263
|
-
background-color: var(--ia-theme-secondary-background-color, #fff);
|
|
264
|
-
border: 1px solid #999;
|
|
265
|
-
border-left: 0;
|
|
266
|
-
padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;
|
|
267
|
-
min-width: 30px;
|
|
268
|
-
height: 100%;
|
|
269
|
-
cursor: pointer;
|
|
270
|
-
display: flex;
|
|
271
|
-
align-items: center;
|
|
272
|
-
justify-content: center;
|
|
273
|
-
flex-shrink: 0;
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
#search-button img {
|
|
277
|
-
width: 18px;
|
|
278
|
-
height: 18px;
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
.search-button-loading-icon {
|
|
282
|
-
--icon-width: 20px;
|
|
283
|
-
margin-top: 2px;
|
|
284
|
-
}
|
|
180
|
+
const ownStyles = css `
|
|
181
|
+
:host {
|
|
182
|
+
--search-bar-height--: var(--search-bar-height, 30px);
|
|
183
|
+
--search-bar-width--: var(--search-bar-width, 300px);
|
|
184
|
+
--search-bar-internal-padding--: var(--padding-sm, 5px);
|
|
185
|
+
--clear-button-offset--: var(--clear-button-offset, 0);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
#container {
|
|
189
|
+
display: inline-block;
|
|
190
|
+
width: var(--search-bar-width--);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
#main-bar {
|
|
194
|
+
display: flex;
|
|
195
|
+
height: var(--search-bar-height--, 30px);
|
|
196
|
+
flex: 1;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
#category-dropdown {
|
|
200
|
+
display: flex;
|
|
201
|
+
flex-shrink: 0;
|
|
202
|
+
height: 100%;
|
|
203
|
+
box-sizing: border-box;
|
|
204
|
+
|
|
205
|
+
background-color: #f5f5f7;
|
|
206
|
+
border: 1px solid #999;
|
|
207
|
+
border-radius: 5px 0 0 5px;
|
|
208
|
+
|
|
209
|
+
--dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);
|
|
210
|
+
--dropdownBgColor: #2c2c2c;
|
|
211
|
+
--dropdownTextColor: #fff;
|
|
212
|
+
--dropdownBorderColor: #ddd;
|
|
213
|
+
--dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
|
|
214
|
+
--dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
|
|
215
|
+
--dropdownHoverTextColor: #fff;
|
|
216
|
+
--dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
|
|
217
|
+
--dropdownSelectedTextColor: #fff;
|
|
218
|
+
--dropdownWhiteSpace: nowrap;
|
|
219
|
+
--dropdownOffsetTop: 2px;
|
|
220
|
+
--caretHeight: 8px;
|
|
221
|
+
--caretWidth: 12px;
|
|
222
|
+
--caretPadding: 0 0 0 5px;
|
|
223
|
+
--dropdownFontSize: inherit;
|
|
224
|
+
--dropdownBorderRadius: 4px;
|
|
225
|
+
--buttonSlotPaddingRight: 0;
|
|
226
|
+
--dropdownTextAlign: left;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
#category-dropdown [slot='dropdown-label'] {
|
|
230
|
+
color: var(--ia-theme-primary-text-color, #2c2c2c);
|
|
231
|
+
font-size: 1.4rem;
|
|
232
|
+
font-family: inherit;
|
|
233
|
+
white-space: nowrap;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.no-dropdown #search-input {
|
|
237
|
+
border-left: 1px solid #999;
|
|
238
|
+
border-radius: 5px 0 0 5px;
|
|
239
|
+
overflow: hidden;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
#search-input {
|
|
243
|
+
width: 100%;
|
|
244
|
+
height: 100%;
|
|
245
|
+
box-sizing: border-box;
|
|
246
|
+
border-top: 1px solid #999;
|
|
247
|
+
border-bottom: 1px solid #999;
|
|
248
|
+
font-size: inherit;
|
|
249
|
+
|
|
250
|
+
--input-height: calc(var(--search-bar-height--) - 2px);
|
|
251
|
+
--input-padding: 0 var(--search-bar-internal-padding--, 5px);
|
|
252
|
+
--input-background-color: var(
|
|
253
|
+
--ia-theme-secondary-background-color,
|
|
254
|
+
#fff
|
|
255
|
+
);
|
|
256
|
+
--input-border-radius: 0;
|
|
257
|
+
--input-border-width: 0;
|
|
258
|
+
--input-box-shadow: none;
|
|
259
|
+
--input-focused-box-shadow: none;
|
|
260
|
+
--input-font-size: auto;
|
|
261
|
+
--clear-button-top: var(--clear-button-offset--, 0);
|
|
262
|
+
--clear-button-right: 2px;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
#search-button {
|
|
266
|
+
appearance: none;
|
|
267
|
+
box-sizing: border-box;
|
|
268
|
+
border-radius: 0 5px 5px 0;
|
|
269
|
+
background-color: var(--ia-theme-secondary-background-color, #fff);
|
|
270
|
+
border: 1px solid #999;
|
|
271
|
+
border-left: 0;
|
|
272
|
+
padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;
|
|
273
|
+
min-width: 30px;
|
|
274
|
+
height: 100%;
|
|
275
|
+
cursor: pointer;
|
|
276
|
+
display: flex;
|
|
277
|
+
align-items: center;
|
|
278
|
+
justify-content: center;
|
|
279
|
+
flex-shrink: 0;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
#search-button img {
|
|
283
|
+
width: 18px;
|
|
284
|
+
height: 18px;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.search-button-loading-icon {
|
|
288
|
+
--icon-width: 20px;
|
|
289
|
+
margin-top: 2px;
|
|
290
|
+
}
|
|
285
291
|
`;
|
|
286
292
|
return [themeStyles, ownStyles];
|
|
287
293
|
}
|
|
@@ -311,8 +317,8 @@ __decorate([
|
|
|
311
317
|
query('#search-input')
|
|
312
318
|
], IADropdownSearchBar.prototype, "searchInput", void 0);
|
|
313
319
|
__decorate([
|
|
314
|
-
|
|
315
|
-
], IADropdownSearchBar.prototype, "
|
|
320
|
+
query('#category-dropdown')
|
|
321
|
+
], IADropdownSearchBar.prototype, "categoryDropdown", void 0);
|
|
316
322
|
IADropdownSearchBar = __decorate([
|
|
317
323
|
customElement('ia-dropdown-search-bar')
|
|
318
324
|
], IADropdownSearchBar);
|
|
@@ -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';\r\nimport { css, html, LitElement, nothing, TemplateResult } from 'lit';\r\nimport { customElement, property, state, 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('#category-dropdown')\r\n // private dropdown!: IaDropdown;\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 @state()\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 // willUpdate(changed: PropertyValues) {\r\n // // Ensure selected category changes propagate to the dropdown immediately\r\n // if (changed.has('selectedCategory') && this.selectedCategory) {\r\n // this.dropdown.selectedOption = this.selectedCategory;\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"]}
|
|
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 {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\nimport type { IaDropdown, 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 @query('#category-dropdown')\n private categoryDropdown?: IaDropdown;\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 willUpdate(changed: PropertyValues) {\n // Push the new categories down to the inner dropdown immediately, since ia-dropdown\n // mutates its own selected option on interaction which can cause Lit's\n // property-binding diff to miss the change in certain cases.\n if (changed.has('selectedCategory') || changed.has('categories')) {\n const resolved = this.resolvedCategory;\n if (\n this.categoryDropdown &&\n this.categoryDropdown.selectedOption !== resolved\n ) {\n this.categoryDropdown.selectedOption = resolved;\n }\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/models.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit';\
|
|
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 +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';\
|
|
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,91 +1,91 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
const themeStyles = css `
|
|
3
|
-
:host {
|
|
4
|
-
/*
|
|
5
|
-
BASE STYLES
|
|
6
|
-
Default fallback values for theme styles. Assumes 16px root font size.
|
|
7
|
-
To adjust values, use theme styles below.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
/* Typography */
|
|
11
|
-
--default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
12
|
-
|
|
13
|
-
/* Sizing */
|
|
14
|
-
--default-icon-width: 1.25rem;
|
|
15
|
-
--default-padding-sm: 5px;
|
|
16
|
-
--default-combo-box-width: auto;
|
|
17
|
-
--default-search-bar-width: auto;
|
|
18
|
-
--default-search-bar-height: 30px;
|
|
19
|
-
--default-font-size-standard: 0.875rem; /* 14px with 16px root font size */
|
|
20
|
-
--default-font-size-lg: 2.25rem; /* 36px with 16px root font size */
|
|
21
|
-
|
|
22
|
-
/* Colors */
|
|
23
|
-
--true-white: #fff;
|
|
24
|
-
--off-white: #fbfbfd;
|
|
25
|
-
--dark-gray: #2c2c2c;
|
|
26
|
-
--light-gray: #666;
|
|
27
|
-
--classic-red: #e51c23;
|
|
28
|
-
--mint-green: #31a481;
|
|
29
|
-
--navy-blue: #194880;
|
|
30
|
-
--bright-blue: #4b64ff;
|
|
31
|
-
|
|
32
|
-
/*
|
|
33
|
-
ADJUSTABLE STYLES
|
|
34
|
-
To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.
|
|
35
|
-
*/
|
|
36
|
-
|
|
37
|
-
/* Text */
|
|
38
|
-
--base-font-family: var(
|
|
39
|
-
--ia-theme-base-font-family,
|
|
40
|
-
var(--default-font-family)
|
|
41
|
-
);
|
|
42
|
-
--primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));
|
|
43
|
-
--secondary-text-color: var(
|
|
44
|
-
--ia-theme-secondary-text-color,
|
|
45
|
-
var(--light-gray)
|
|
46
|
-
);
|
|
47
|
-
--link-color: var(--ia-theme-link-color, var(--bright-blue));
|
|
48
|
-
|
|
49
|
-
/* Sizing */
|
|
50
|
-
--icon-width: var(--ia-theme-icon-width, var(--default-icon-width));
|
|
51
|
-
--padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));
|
|
52
|
-
--search-bar-height: var(
|
|
53
|
-
--ia-theme-search-bar-height,
|
|
54
|
-
var(--default-search-bar-height)
|
|
55
|
-
);
|
|
56
|
-
--search-bar-width: var(
|
|
57
|
-
--ia-theme-search-bar-width,
|
|
58
|
-
var(--default-search-bar-width)
|
|
59
|
-
);
|
|
60
|
-
--combo-box-width: var(
|
|
61
|
-
--ia-theme-combo-box-width,
|
|
62
|
-
var(--default-combo-box-width)
|
|
63
|
-
);
|
|
64
|
-
--font-size-standard: var(
|
|
65
|
-
--ia-theme-font-size-standard,
|
|
66
|
-
var(--default-font-size-standard)
|
|
67
|
-
);
|
|
68
|
-
--font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));
|
|
69
|
-
|
|
70
|
-
/* Backgrounds and fills */
|
|
71
|
-
--primary-background-color: var(
|
|
72
|
-
--ia-theme-primary-background-color,
|
|
73
|
-
var(--off-white)
|
|
74
|
-
);
|
|
75
|
-
--secondary-background-color: var(
|
|
76
|
-
--ia-theme-secondary-background-color,
|
|
77
|
-
var(--true-white)
|
|
78
|
-
);
|
|
79
|
-
|
|
80
|
-
/* State colors */
|
|
81
|
-
--primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));
|
|
82
|
-
--primary-cta-text-color: var(
|
|
83
|
-
--ia-theme-primary-cta-text-color,
|
|
84
|
-
var(--true-white)
|
|
85
|
-
);
|
|
86
|
-
--color-success: var(--ia-theme-color-success, var(--mint-green));
|
|
87
|
-
--color-danger: var(--ia-theme-color-danger, var(--classic-red));
|
|
88
|
-
}
|
|
2
|
+
const themeStyles = css `
|
|
3
|
+
:host {
|
|
4
|
+
/*
|
|
5
|
+
BASE STYLES
|
|
6
|
+
Default fallback values for theme styles. Assumes 16px root font size.
|
|
7
|
+
To adjust values, use theme styles below.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
/* Typography */
|
|
11
|
+
--default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
12
|
+
|
|
13
|
+
/* Sizing */
|
|
14
|
+
--default-icon-width: 1.25rem;
|
|
15
|
+
--default-padding-sm: 5px;
|
|
16
|
+
--default-combo-box-width: auto;
|
|
17
|
+
--default-search-bar-width: auto;
|
|
18
|
+
--default-search-bar-height: 30px;
|
|
19
|
+
--default-font-size-standard: 0.875rem; /* 14px with 16px root font size */
|
|
20
|
+
--default-font-size-lg: 2.25rem; /* 36px with 16px root font size */
|
|
21
|
+
|
|
22
|
+
/* Colors */
|
|
23
|
+
--true-white: #fff;
|
|
24
|
+
--off-white: #fbfbfd;
|
|
25
|
+
--dark-gray: #2c2c2c;
|
|
26
|
+
--light-gray: #666;
|
|
27
|
+
--classic-red: #e51c23;
|
|
28
|
+
--mint-green: #31a481;
|
|
29
|
+
--navy-blue: #194880;
|
|
30
|
+
--bright-blue: #4b64ff;
|
|
31
|
+
|
|
32
|
+
/*
|
|
33
|
+
ADJUSTABLE STYLES
|
|
34
|
+
To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.
|
|
35
|
+
*/
|
|
36
|
+
|
|
37
|
+
/* Text */
|
|
38
|
+
--base-font-family: var(
|
|
39
|
+
--ia-theme-base-font-family,
|
|
40
|
+
var(--default-font-family)
|
|
41
|
+
);
|
|
42
|
+
--primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));
|
|
43
|
+
--secondary-text-color: var(
|
|
44
|
+
--ia-theme-secondary-text-color,
|
|
45
|
+
var(--light-gray)
|
|
46
|
+
);
|
|
47
|
+
--link-color: var(--ia-theme-link-color, var(--bright-blue));
|
|
48
|
+
|
|
49
|
+
/* Sizing */
|
|
50
|
+
--icon-width: var(--ia-theme-icon-width, var(--default-icon-width));
|
|
51
|
+
--padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));
|
|
52
|
+
--search-bar-height: var(
|
|
53
|
+
--ia-theme-search-bar-height,
|
|
54
|
+
var(--default-search-bar-height)
|
|
55
|
+
);
|
|
56
|
+
--search-bar-width: var(
|
|
57
|
+
--ia-theme-search-bar-width,
|
|
58
|
+
var(--default-search-bar-width)
|
|
59
|
+
);
|
|
60
|
+
--combo-box-width: var(
|
|
61
|
+
--ia-theme-combo-box-width,
|
|
62
|
+
var(--default-combo-box-width)
|
|
63
|
+
);
|
|
64
|
+
--font-size-standard: var(
|
|
65
|
+
--ia-theme-font-size-standard,
|
|
66
|
+
var(--default-font-size-standard)
|
|
67
|
+
);
|
|
68
|
+
--font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));
|
|
69
|
+
|
|
70
|
+
/* Backgrounds and fills */
|
|
71
|
+
--primary-background-color: var(
|
|
72
|
+
--ia-theme-primary-background-color,
|
|
73
|
+
var(--off-white)
|
|
74
|
+
);
|
|
75
|
+
--secondary-background-color: var(
|
|
76
|
+
--ia-theme-secondary-background-color,
|
|
77
|
+
var(--true-white)
|
|
78
|
+
);
|
|
79
|
+
|
|
80
|
+
/* State colors */
|
|
81
|
+
--primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));
|
|
82
|
+
--primary-cta-text-color: var(
|
|
83
|
+
--ia-theme-primary-cta-text-color,
|
|
84
|
+
var(--true-white)
|
|
85
|
+
);
|
|
86
|
+
--color-success: var(--ia-theme-color-success, var(--mint-green));
|
|
87
|
+
--color-danger: var(--ia-theme-color-danger, var(--classic-red));
|
|
88
|
+
}
|
|
89
89
|
`;
|
|
90
90
|
export default themeStyles;
|
|
91
91
|
//# sourceMappingURL=theme-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-styles.js","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\
|
|
1
|
+
{"version":3,"file":"theme-styles.js","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst themeStyles = css`\n :host {\n /*\n BASE STYLES\n Default fallback values for theme styles. Assumes 16px root font size.\n To adjust values, use theme styles below.\n */\n\n /* Typography */\n --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\n /* Sizing */\n --default-icon-width: 1.25rem;\n --default-padding-sm: 5px;\n --default-combo-box-width: auto;\n --default-search-bar-width: auto;\n --default-search-bar-height: 30px;\n --default-font-size-standard: 0.875rem; /* 14px with 16px root font size */\n --default-font-size-lg: 2.25rem; /* 36px with 16px root font size */\n\n /* Colors */\n --true-white: #fff;\n --off-white: #fbfbfd;\n --dark-gray: #2c2c2c;\n --light-gray: #666;\n --classic-red: #e51c23;\n --mint-green: #31a481;\n --navy-blue: #194880;\n --bright-blue: #4b64ff;\n\n /*\n ADJUSTABLE STYLES\n To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.\n */\n\n /* Text */\n --base-font-family: var(\n --ia-theme-base-font-family,\n var(--default-font-family)\n );\n --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));\n --secondary-text-color: var(\n --ia-theme-secondary-text-color,\n var(--light-gray)\n );\n --link-color: var(--ia-theme-link-color, var(--bright-blue));\n\n /* Sizing */\n --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));\n --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));\n --search-bar-height: var(\n --ia-theme-search-bar-height,\n var(--default-search-bar-height)\n );\n --search-bar-width: var(\n --ia-theme-search-bar-width,\n var(--default-search-bar-width)\n );\n --combo-box-width: var(\n --ia-theme-combo-box-width,\n var(--default-combo-box-width)\n );\n --font-size-standard: var(\n --ia-theme-font-size-standard,\n var(--default-font-size-standard)\n );\n --font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));\n\n /* Backgrounds and fills */\n --primary-background-color: var(\n --ia-theme-primary-background-color,\n var(--off-white)\n );\n --secondary-background-color: var(\n --ia-theme-secondary-background-color,\n var(--true-white)\n );\n\n /* State colors */\n --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));\n --primary-cta-text-color: var(\n --ia-theme-primary-cta-text-color,\n var(--true-white)\n );\n --color-success: var(--ia-theme-color-success, var(--mint-green));\n --color-danger: var(--ia-theme-color-danger, var(--classic-red));\n }\n`;\n\nexport default themeStyles;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@internetarchive/elements",
|
|
3
|
-
"version": "0.2.7-alpha-webdev8429.
|
|
3
|
+
"version": "0.2.7-alpha-webdev8429.3",
|
|
4
4
|
"description": "A web component library from the Internet Archive.",
|
|
5
5
|
"license": "AGPL-3.0-only",
|
|
6
6
|
"types": "./dist/src/elements/index.d.ts",
|