@internetarchive/collection-browser 2.18.3-alpha-webdev7768.9 → 2.19.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.
- package/dist/src/collection-browser.js +683 -683
- package/dist/src/collection-browser.js.map +1 -1
- package/dist/src/collection-facets/smart-facets/smart-facet-bar.js +75 -75
- package/dist/src/collection-facets/smart-facets/smart-facet-bar.js.map +1 -1
- package/dist/src/collection-facets/smart-facets/smart-facet-dropdown.js +54 -54
- package/dist/src/collection-facets/smart-facets/smart-facet-dropdown.js.map +1 -1
- package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js +118 -118
- package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.js +200 -200
- package/dist/src/tiles/tile-dispatcher.js.map +1 -1
- package/package.json +2 -2
- package/src/collection-browser.ts +2725 -2725
- package/src/collection-facets/smart-facets/smart-facet-bar.ts +437 -437
- package/src/collection-facets/smart-facets/smart-facet-dropdown.ts +185 -185
- package/src/tiles/grid/styles/tile-grid-shared-styles.ts +129 -129
- package/src/tiles/tile-dispatcher.ts +486 -486
|
@@ -5,123 +5,123 @@ import { srOnlyStyle } from '../../../styles/sr-only';
|
|
|
5
5
|
*/
|
|
6
6
|
const tileBackgroundColor = css `var(--tileBackgroundColor, #ffffff)`;
|
|
7
7
|
const tileCornerRadius = css `var(--tileCornerRadius, 4px)`;
|
|
8
|
-
export const baseTileStyles = css `
|
|
9
|
-
/* Include .sr-only styles for all tiles */
|
|
10
|
-
${srOnlyStyle}
|
|
11
|
-
|
|
12
|
-
.container {
|
|
13
|
-
background-color: ${tileBackgroundColor};
|
|
14
|
-
border: 1px #2c2c2c;
|
|
15
|
-
border-radius: ${tileCornerRadius};
|
|
16
|
-
box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
|
|
17
|
-
box-sizing: border-box;
|
|
18
|
-
height: 100%;
|
|
19
|
-
display: flex;
|
|
20
|
-
flex-direction: column;
|
|
21
|
-
width: 100%;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
image-block {
|
|
25
|
-
display: block;
|
|
26
|
-
position: relative;
|
|
27
|
-
text-align: center;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.tile-details {
|
|
31
|
-
display: flex;
|
|
32
|
-
flex-direction: column;
|
|
33
|
-
height: 100%;
|
|
34
|
-
row-gap: 10px;
|
|
35
|
-
font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.item-info {
|
|
39
|
-
display: flex;
|
|
40
|
-
flex-direction: column;
|
|
41
|
-
row-gap: 5px;
|
|
42
|
-
flex-grow: 1;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
#title {
|
|
46
|
-
padding: 0 5px;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.created-by,
|
|
50
|
-
.date-sorted-by,
|
|
51
|
-
.volume-issue,
|
|
52
|
-
.archivist-since {
|
|
53
|
-
display: flex;
|
|
54
|
-
justify-content: left;
|
|
55
|
-
align-items: flex-start;
|
|
56
|
-
padding: 0 5px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.truncated {
|
|
60
|
-
flex: 1;
|
|
61
|
-
color: #2c2c2c;
|
|
62
|
-
min-width: 0; /* Important for long words! */
|
|
63
|
-
text-align: left;
|
|
64
|
-
line-height: 15px;
|
|
65
|
-
text-overflow: ellipsis;
|
|
66
|
-
overflow: hidden;
|
|
67
|
-
word-wrap: break-word;
|
|
68
|
-
-webkit-line-clamp: 3;
|
|
69
|
-
-webkit-box-orient: vertical;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
h4.truncated {
|
|
73
|
-
display: -webkit-box;
|
|
74
|
-
margin: 0px;
|
|
75
|
-
line-height: 15px;
|
|
76
|
-
font-size: 14px;
|
|
77
|
-
font-weight: 500;
|
|
78
|
-
padding-bottom: 1px;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
span {
|
|
82
|
-
display: -webkit-box;
|
|
83
|
-
font-size: 1.4rem;
|
|
84
|
-
line-height: 15px;
|
|
85
|
-
overflow: hidden;
|
|
86
|
-
word-wrap: break-word;
|
|
87
|
-
-webkit-line-clamp: 1;
|
|
88
|
-
-webkit-box-orient: vertical;
|
|
89
|
-
padding-bottom: 1px;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.container:hover > .tile-details > .item-info > #title > .truncated {
|
|
93
|
-
text-decoration: underline;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
/** this is a workaround for Safari 15 where the hover effects are not working */
|
|
97
|
-
#title:hover > .truncated {
|
|
98
|
-
text-decoration: underline;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.info-button {
|
|
102
|
-
position: absolute;
|
|
103
|
-
right: 10px;
|
|
104
|
-
top: 10px;
|
|
105
|
-
margin: 0;
|
|
106
|
-
padding: 0;
|
|
107
|
-
border: none;
|
|
108
|
-
border-radius: 50%;
|
|
109
|
-
display: flex;
|
|
110
|
-
justify-content: center;
|
|
111
|
-
align-items: center;
|
|
112
|
-
background: rgba(220, 220, 220, 0.5);
|
|
113
|
-
color: white;
|
|
114
|
-
font-size: 2rem;
|
|
115
|
-
font-weight: bold;
|
|
116
|
-
line-height: 1;
|
|
117
|
-
text-shadow: black 1px 1px 3px;
|
|
118
|
-
overflow: visible;
|
|
119
|
-
aspect-ratio: 1 / 1;
|
|
120
|
-
z-index: 1;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.hidden {
|
|
124
|
-
display: none;
|
|
125
|
-
}
|
|
8
|
+
export const baseTileStyles = css `
|
|
9
|
+
/* Include .sr-only styles for all tiles */
|
|
10
|
+
${srOnlyStyle}
|
|
11
|
+
|
|
12
|
+
.container {
|
|
13
|
+
background-color: ${tileBackgroundColor};
|
|
14
|
+
border: 1px #2c2c2c;
|
|
15
|
+
border-radius: ${tileCornerRadius};
|
|
16
|
+
box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
height: 100%;
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
width: 100%;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
image-block {
|
|
25
|
+
display: block;
|
|
26
|
+
position: relative;
|
|
27
|
+
text-align: center;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.tile-details {
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
height: 100%;
|
|
34
|
+
row-gap: 10px;
|
|
35
|
+
font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.item-info {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
row-gap: 5px;
|
|
42
|
+
flex-grow: 1;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
#title {
|
|
46
|
+
padding: 0 5px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.created-by,
|
|
50
|
+
.date-sorted-by,
|
|
51
|
+
.volume-issue,
|
|
52
|
+
.archivist-since {
|
|
53
|
+
display: flex;
|
|
54
|
+
justify-content: left;
|
|
55
|
+
align-items: flex-start;
|
|
56
|
+
padding: 0 5px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.truncated {
|
|
60
|
+
flex: 1;
|
|
61
|
+
color: #2c2c2c;
|
|
62
|
+
min-width: 0; /* Important for long words! */
|
|
63
|
+
text-align: left;
|
|
64
|
+
line-height: 15px;
|
|
65
|
+
text-overflow: ellipsis;
|
|
66
|
+
overflow: hidden;
|
|
67
|
+
word-wrap: break-word;
|
|
68
|
+
-webkit-line-clamp: 3;
|
|
69
|
+
-webkit-box-orient: vertical;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
h4.truncated {
|
|
73
|
+
display: -webkit-box;
|
|
74
|
+
margin: 0px;
|
|
75
|
+
line-height: 15px;
|
|
76
|
+
font-size: 14px;
|
|
77
|
+
font-weight: 500;
|
|
78
|
+
padding-bottom: 1px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
span {
|
|
82
|
+
display: -webkit-box;
|
|
83
|
+
font-size: 1.4rem;
|
|
84
|
+
line-height: 15px;
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
word-wrap: break-word;
|
|
87
|
+
-webkit-line-clamp: 1;
|
|
88
|
+
-webkit-box-orient: vertical;
|
|
89
|
+
padding-bottom: 1px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.container:hover > .tile-details > .item-info > #title > .truncated {
|
|
93
|
+
text-decoration: underline;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/** this is a workaround for Safari 15 where the hover effects are not working */
|
|
97
|
+
#title:hover > .truncated {
|
|
98
|
+
text-decoration: underline;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.info-button {
|
|
102
|
+
position: absolute;
|
|
103
|
+
right: 10px;
|
|
104
|
+
top: 10px;
|
|
105
|
+
margin: 0;
|
|
106
|
+
padding: 0;
|
|
107
|
+
border: none;
|
|
108
|
+
border-radius: 50%;
|
|
109
|
+
display: flex;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
align-items: center;
|
|
112
|
+
background: rgba(220, 220, 220, 0.5);
|
|
113
|
+
color: white;
|
|
114
|
+
font-size: 2rem;
|
|
115
|
+
font-weight: bold;
|
|
116
|
+
line-height: 1;
|
|
117
|
+
text-shadow: black 1px 1px 3px;
|
|
118
|
+
overflow: visible;
|
|
119
|
+
aspect-ratio: 1 / 1;
|
|
120
|
+
z-index: 1;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.hidden {
|
|
124
|
+
display: none;
|
|
125
|
+
}
|
|
126
126
|
`;
|
|
127
127
|
//# sourceMappingURL=tile-grid-shared-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-grid-shared-styles.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/styles/tile-grid-shared-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;GAEG;AAEH,MAAM,mBAAmB,GAAG,GAAG,CAAA,qCAAqC,CAAC;AACrE,MAAM,gBAAgB,GAAG,GAAG,CAAA,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;IAE7B,WAAW;;;wBAGS,mBAAmB;;qBAEtB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GpC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { srOnlyStyle } from '../../../styles/sr-only';\n\n/**\n * Base tile styles\n */\n\nconst tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;\nconst tileCornerRadius = css`var(--tileCornerRadius, 4px)`;\n\nexport const baseTileStyles = css`\n /* Include .sr-only styles for all tiles */\n ${srOnlyStyle}\n\n .container {\n background-color: ${tileBackgroundColor};\n border: 1px #2c2c2c;\n border-radius: ${tileCornerRadius};\n box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);\n box-sizing: border-box;\n height: 100%;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n image-block {\n display: block;\n position: relative;\n text-align: center;\n }\n\n .tile-details {\n display: flex;\n flex-direction: column;\n height: 100%;\n row-gap: 10px;\n font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n }\n\n .item-info {\n display: flex;\n flex-direction: column;\n row-gap: 5px;\n flex-grow: 1;\n }\n\n #title {\n padding: 0 5px;\n }\n\n .created-by,\n .date-sorted-by,\n .volume-issue,\n .archivist-since {\n display: flex;\n justify-content: left;\n align-items: flex-start;\n padding: 0 5px;\n }\n\n .truncated {\n flex: 1;\n color: #2c2c2c;\n min-width: 0; /* Important for long words! */\n text-align: left;\n line-height: 15px;\n text-overflow: ellipsis;\n overflow: hidden;\n word-wrap: break-word;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n }\n\n h4.truncated {\n display: -webkit-box;\n margin: 0px;\n line-height: 15px;\n font-size: 14px;\n font-weight: 500;\n padding-bottom: 1px;\n }\n\n span {\n display: -webkit-box;\n font-size: 1.4rem;\n line-height: 15px;\n overflow: hidden;\n word-wrap: break-word;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n padding-bottom: 1px;\n }\n\n .container:hover > .tile-details > .item-info > #title > .truncated {\n text-decoration: underline;\n }\n\n /** this is a workaround for Safari 15 where the hover effects are not working */\n #title:hover > .truncated {\n text-decoration: underline;\n }\n\n .info-button {\n position: absolute;\n right: 10px;\n top: 10px;\n margin: 0;\n padding: 0;\n border: none;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(220, 220, 220, 0.5);\n color: white;\n font-size: 2rem;\n font-weight: bold;\n line-height: 1;\n text-shadow: black 1px 1px 3px;\n overflow: visible;\n aspect-ratio: 1 / 1;\n z-index: 1;\n }\n\n .hidden {\n display: none;\n }\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"tile-grid-shared-styles.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/styles/tile-grid-shared-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;GAEG;AAEH,MAAM,mBAAmB,GAAG,GAAG,CAAA,qCAAqC,CAAC;AACrE,MAAM,gBAAgB,GAAG,GAAG,CAAA,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;IAE7B,WAAW;;;wBAGS,mBAAmB;;qBAEtB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GpC,CAAC","sourcesContent":["import { css } from 'lit';\r\nimport { srOnlyStyle } from '../../../styles/sr-only';\r\n\r\n/**\r\n * Base tile styles\r\n */\r\n\r\nconst tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;\r\nconst tileCornerRadius = css`var(--tileCornerRadius, 4px)`;\r\n\r\nexport const baseTileStyles = css`\r\n /* Include .sr-only styles for all tiles */\r\n ${srOnlyStyle}\r\n\r\n .container {\r\n background-color: ${tileBackgroundColor};\r\n border: 1px #2c2c2c;\r\n border-radius: ${tileCornerRadius};\r\n box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);\r\n box-sizing: border-box;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n }\r\n\r\n image-block {\r\n display: block;\r\n position: relative;\r\n text-align: center;\r\n }\r\n\r\n .tile-details {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n row-gap: 10px;\r\n font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\r\n }\r\n\r\n .item-info {\r\n display: flex;\r\n flex-direction: column;\r\n row-gap: 5px;\r\n flex-grow: 1;\r\n }\r\n\r\n #title {\r\n padding: 0 5px;\r\n }\r\n\r\n .created-by,\r\n .date-sorted-by,\r\n .volume-issue,\r\n .archivist-since {\r\n display: flex;\r\n justify-content: left;\r\n align-items: flex-start;\r\n padding: 0 5px;\r\n }\r\n\r\n .truncated {\r\n flex: 1;\r\n color: #2c2c2c;\r\n min-width: 0; /* Important for long words! */\r\n text-align: left;\r\n line-height: 15px;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n word-wrap: break-word;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n }\r\n\r\n h4.truncated {\r\n display: -webkit-box;\r\n margin: 0px;\r\n line-height: 15px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n padding-bottom: 1px;\r\n }\r\n\r\n span {\r\n display: -webkit-box;\r\n font-size: 1.4rem;\r\n line-height: 15px;\r\n overflow: hidden;\r\n word-wrap: break-word;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n padding-bottom: 1px;\r\n }\r\n\r\n .container:hover > .tile-details > .item-info > #title > .truncated {\r\n text-decoration: underline;\r\n }\r\n\r\n /** this is a workaround for Safari 15 where the hover effects are not working */\r\n #title:hover > .truncated {\r\n text-decoration: underline;\r\n }\r\n\r\n .info-button {\r\n position: absolute;\r\n right: 10px;\r\n top: 10px;\r\n margin: 0;\r\n padding: 0;\r\n border: none;\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: rgba(220, 220, 220, 0.5);\r\n color: white;\r\n font-size: 2rem;\r\n font-weight: bold;\r\n line-height: 1;\r\n text-shadow: black 1px 1px 3px;\r\n overflow: visible;\r\n aspect-ratio: 1 / 1;\r\n z-index: 1;\r\n }\r\n\r\n .hidden {\r\n display: none;\r\n }\r\n`;\r\n"]}
|