@justeattakeaway/pie-thumbnail 0.7.0 → 0.8.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/declaration.d.ts +0 -10
- package/dist/index.js +94 -98
- package/package.json +4 -4
- package/src/index.ts +2 -3
package/declaration.d.ts
CHANGED
|
@@ -1,13 +1,3 @@
|
|
|
1
|
-
declare module '*.scss' {
|
|
2
|
-
const content: Record<string, string>;
|
|
3
|
-
export default content;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
declare module '*.scss?inline' {
|
|
7
|
-
const content: Record<string, string>;
|
|
8
|
-
export default content;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
1
|
declare module '*.svg?inline' {
|
|
12
2
|
const content: string;
|
|
13
3
|
export default content;
|
package/dist/index.js
CHANGED
|
@@ -1,24 +1,18 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
(
|
|
8
|
-
return e && x(t, a, e), e;
|
|
9
|
-
};
|
|
10
|
-
class p extends k {
|
|
11
|
-
constructor() {
|
|
12
|
-
super(...arguments), this.v = "0.7.0";
|
|
1
|
+
import { LitElement as _, unsafeCSS as P, html as k } from "lit";
|
|
2
|
+
import { validPropertyValues as u, safeCustomElement as S } from "@justeattakeaway/pie-webc-core";
|
|
3
|
+
import { classMap as z } from "lit/directives/class-map.js";
|
|
4
|
+
import { property as o, query as E, state as C } from "lit/decorators.js";
|
|
5
|
+
const h = class h extends _ {
|
|
6
|
+
willUpdate() {
|
|
7
|
+
this.getAttribute("v") || this.setAttribute("v", h.v);
|
|
13
8
|
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const $ = [
|
|
9
|
+
};
|
|
10
|
+
h.v = "0.8.0";
|
|
11
|
+
let m = h;
|
|
12
|
+
const D = [
|
|
19
13
|
"default",
|
|
20
14
|
"outline"
|
|
21
|
-
],
|
|
15
|
+
], I = [
|
|
22
16
|
"default",
|
|
23
17
|
"subtle",
|
|
24
18
|
"strong",
|
|
@@ -32,10 +26,10 @@ const $ = [
|
|
|
32
26
|
dark: "c-thumbnail--backgroundDark",
|
|
33
27
|
inverse: "c-thumbnail--backgroundInverse",
|
|
34
28
|
"inverse-alternative": "c-thumbnail--backgroundInverseAlternative"
|
|
35
|
-
},
|
|
36
|
-
{ length: (
|
|
37
|
-
(
|
|
38
|
-
)),
|
|
29
|
+
}, x = ["1by1", "4by3", "16by9"], g = 8, p = 24, $ = 128, j = Object.freeze(Array.from(
|
|
30
|
+
{ length: ($ - p) / g + 1 },
|
|
31
|
+
(t, a) => p + a * g
|
|
32
|
+
)), r = {
|
|
39
33
|
variant: "default",
|
|
40
34
|
size: 48,
|
|
41
35
|
src: "",
|
|
@@ -49,22 +43,23 @@ const $ = [
|
|
|
49
43
|
src: "",
|
|
50
44
|
alt: ""
|
|
51
45
|
}
|
|
52
|
-
},
|
|
53
|
-
var O = Object.defineProperty,
|
|
54
|
-
for (var
|
|
55
|
-
(d = c
|
|
56
|
-
return
|
|
46
|
+
}, A = ".c-thumbnail{--thumbnail-size: 48px;--thumbnail-border-radius: var(--dt-radius-rounded-b);--thumbnail-bg-color: var(--dt-color-container-default);--thumbnail-padding: calc(var(--dt-spacing-a) / 2);--thumbnail-default-placeholder-padding: var(--dt-spacing-b);--thumbnail-img-border-radius: unset;--thumbnail-img-object-fit: cover;display:flex;justify-content:center;align-items:center;box-sizing:border-box;overflow:hidden;width:var(--thumbnail-size);height:var(--thumbnail-size);border-radius:var(--thumbnail-border-radius);background-color:var(--thumbnail-bg-color)}.c-thumbnail.c-thumbnail--outline{border:1px solid var(--dt-color-border-default)}.c-thumbnail.is-disabled{opacity:.5}.c-thumbnail.c-thumbnail--backgroundSubtle{--thumbnail-bg-color: var(--dt-color-container-subtle)}.c-thumbnail.c-thumbnail--backgroundStrong{--thumbnail-bg-color: var(--dt-color-container-strong)}.c-thumbnail.c-thumbnail--backgroundDark{--thumbnail-bg-color: var(--dt-color-container-dark)}.c-thumbnail.c-thumbnail--backgroundInverse{--thumbnail-bg-color: var(--dt-color-container-inverse)}.c-thumbnail.c-thumbnail--backgroundInverseAlternative{--thumbnail-bg-color: var(--dt-color-container-inverse-alternative)}.c-thumbnail.c-thumbnail--padding{--thumbnail-img-border-radius: calc(var(--thumbnail-border-radius) - var(--thumbnail-padding));padding:var(--thumbnail-padding)}.c-thumbnail.c-thumbnail--4by3{height:calc(var(--thumbnail-size) * 3 / 4)}.c-thumbnail.c-thumbnail--16by9{height:calc(var(--thumbnail-size) * 9 / 16)}.c-thumbnail .c-thumbnail-img{width:100%;height:100%;border-radius:var(--thumbnail-img-border-radius);object-fit:var(--thumbnail-img-object-fit)}.c-thumbnail.c-thumbnail--defaultPlaceholder{--thumbnail-bg-color: var(--dt-color-container-default);--thumbnail-img-object-fit: fill;padding:var(--thumbnail-default-placeholder-padding)}", R = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2033%2032'%3e%3cpath%20d='M32.399%2015.493c-.102-.255-1.495-2.753-4.081-5.888a.507.507%200%200%201-.119-.267%2048.162%2048.162%200%200%200-.778-5.436.88.88%200%200%200-.282-.467.928.928%200%200%200-.509-.221l-2.679-.323a.84.84%200%200%200-.071%200c-.15%200-.294.058-.401.161s-.166.243-.166.389v.906c0%20.009-.004.017-.011.023s-.015.01-.025.01c-.015-.003-.018-.006-.021-.008A37.89%2037.89%200%200%200%2017.829.395%202.43%202.43%200%200%200%2016.493%200c-.473%200-.936.138-1.328.395C5.887%205.956.782%2015.005.585%2015.493a.87.87%200%200%200%20.004.757.9.9%200%200%200%20.246.306.93.93%200%200%200%20.356.176l2.672.5c.177.047.335.144.454.279s.193.302.213.479c.023.457.527%2010.691%201.162%2013.345a.89.89%200%200%200%20.328.479c.161.12.358.186.561.185h.02l4.528-.084h.129c.079-.001.155-.032.211-.086s.087-.128.087-.205l-.306-5.093c0-.054-.007-.121-.01-.176a.54.54%200%200%200-.08-.254.56.56%200%200%200-.193-.188c-.407-.236-.747-.566-.992-.96s-.385-.841-.41-1.3c-.142-3.589-.211-7.735-.008-10.981.003-.138.062-.27.165-.366a.545.545%200%200%201%20.76.016c.099.1.152.234.149.372v.041c-.132%202.163-.142%204.72-.095%207.244a.61.61%200%200%200%20.195.435.65.65%200%200%200%20.454.174.65.65%200%200%200%20.448-.189.61.61%200%200%200%20.179-.441c-.048-2.54-.035-5.114.099-7.285.003-.138.062-.27.165-.366a.545.545%200%200%201%20.76.016c.099.1.152.234.149.372v.041c-.132%202.152-.142%204.694-.096%207.204a.61.61%200%200%200%20.194.435.65.65%200%200%200%20.454.175.65.65%200%200%200%20.448-.188.61.61%200%200%200%20.18-.441c-.047-2.529-.034-5.093.101-7.249.003-.138.063-.27.165-.366s.241-.148.383-.145.278.061.377.161.152.234.149.372v.041c-.193%203.154-.13%207.147%200%2010.651a.26.26%200%200%201%200%20.033v.086c0%20.455-.113.902-.331%201.305s-.533.747-.919%201.004a.54.54%200%200%200-.166.177.52.52%200%200%200-.07.229s-.067.538.179%203.144l.241%202.284c.009.067.043.128.095.172s.119.068.188.068h4.053l1.516.012c.07%200%20.137-.024.189-.069s.086-.107.094-.174c.35-3.123.434-4.879.434-4.879-.002-.075-.032-.146-.084-.201s-.123-.09-.199-.099l-1.843-.246c-.122-.015-.238-.064-.331-.142s-.161-.181-.195-.297a.83.83%200%200%201-.024-.275c.747-10.411%204.282-13.92%204.282-13.92a1.05%201.05%200%200%201%20.172-.144.575.575%200%200%201%20.491-.082.57.57%200%200%201%20.223.122.55.55%200%200%201%20.145.205.97.97%200%200%201%20.045.251c.306%203.272.157%208.842-.033%2013.186l-.353%206.583c0%20.057.023.112.065.152s.098.063.156.063l3.037.062h.021a.94.94%200%200%200%20.561-.186.892.892%200%200%200%20.328-.479c.635-2.654%201.134-12.887%201.161-13.344a.877.877%200%200%201%20.214-.479.92.92%200%200%201%20.453-.28l2.672-.5a.92.92%200%200%200%20.499-.317.873.873%200%200%200%20.194-.548.885.885%200%200%200-.101-.368z'%20fill='%23efedea'/%3e%3c/svg%3e";
|
|
47
|
+
var O = Object.defineProperty, B = Object.getOwnPropertyDescriptor, i = (t, a, l, s) => {
|
|
48
|
+
for (var n = s > 1 ? void 0 : s ? B(a, l) : a, c = t.length - 1, d; c >= 0; c--)
|
|
49
|
+
(d = t[c]) && (n = (s ? d(a, l, n) : d(n)) || n);
|
|
50
|
+
return s && n && O(a, l, n), n;
|
|
57
51
|
};
|
|
58
|
-
const
|
|
52
|
+
const b = "pie-thumbnail";
|
|
53
|
+
let e = class extends m {
|
|
59
54
|
constructor() {
|
|
60
|
-
super(...arguments), this.variant =
|
|
55
|
+
super(...arguments), this.variant = r.variant, this.size = r.size, this.aspectRatio = r.aspectRatio, this.src = r.src, this.alt = r.alt, this.disabled = r.disabled, this.hasPadding = r.hasPadding, this.hideDefaultPlaceholder = r.hideDefaultPlaceholder, this.backgroundColor = r.backgroundColor, this.placeholder = r.placeholder, this._hasError = !1;
|
|
61
56
|
}
|
|
62
57
|
/**
|
|
63
58
|
* Determines if the default placeholder should be displayed.
|
|
64
59
|
*/
|
|
65
60
|
get _isDefaultPlaceholderVisible() {
|
|
66
|
-
const { _hasError: t, placeholder: a, hideDefaultPlaceholder:
|
|
67
|
-
return t && !(a != null && a.src) && !
|
|
61
|
+
const { _hasError: t, placeholder: a, hideDefaultPlaceholder: l } = this;
|
|
62
|
+
return t && !(a != null && a.src) && !l;
|
|
68
63
|
}
|
|
69
64
|
/**
|
|
70
65
|
* Returns the appropriate image props based on the following order:
|
|
@@ -75,7 +70,7 @@ const u = "pie-thumbnail", b = class b extends p {
|
|
|
75
70
|
*/
|
|
76
71
|
get _controlledSrc() {
|
|
77
72
|
var t;
|
|
78
|
-
return this._hasError ? (t = this.placeholder) != null && t.src ? this.placeholder.src : this.hideDefaultPlaceholder ? this.src :
|
|
73
|
+
return this._hasError ? (t = this.placeholder) != null && t.src ? this.placeholder.src : this.hideDefaultPlaceholder ? this.src : R : this.src;
|
|
79
74
|
}
|
|
80
75
|
get _controlledAlt() {
|
|
81
76
|
var t;
|
|
@@ -86,11 +81,11 @@ const u = "pie-thumbnail", b = class b extends p {
|
|
|
86
81
|
*/
|
|
87
82
|
_generateSizeStyles() {
|
|
88
83
|
const { size: t } = this;
|
|
89
|
-
let a = "--dt-radius-rounded-c",
|
|
90
|
-
return t <= 40 ? (a = "--dt-radius-rounded-a",
|
|
84
|
+
let a = "--dt-radius-rounded-c", l = "--dt-spacing-d";
|
|
85
|
+
return t <= 40 ? (a = "--dt-radius-rounded-a", l = "--dt-spacing-a") : t <= 56 && (a = "--dt-radius-rounded-b", l = "--dt-spacing-b"), `
|
|
91
86
|
--thumbnail-size: ${t}px;
|
|
92
87
|
--thumbnail-border-radius: var(${a});
|
|
93
|
-
--thumbnail-default-placeholder-padding: var(${
|
|
88
|
+
--thumbnail-default-placeholder-padding: var(${l});
|
|
94
89
|
`;
|
|
95
90
|
}
|
|
96
91
|
/**
|
|
@@ -116,29 +111,29 @@ const u = "pie-thumbnail", b = class b extends p {
|
|
|
116
111
|
const {
|
|
117
112
|
variant: t,
|
|
118
113
|
_controlledSrc: a,
|
|
119
|
-
_controlledAlt:
|
|
120
|
-
disabled:
|
|
121
|
-
hasPadding:
|
|
122
|
-
_isDefaultPlaceholderVisible:
|
|
123
|
-
backgroundColor:
|
|
114
|
+
_controlledAlt: l,
|
|
115
|
+
disabled: s,
|
|
116
|
+
hasPadding: n,
|
|
117
|
+
_isDefaultPlaceholderVisible: c,
|
|
118
|
+
backgroundColor: d,
|
|
124
119
|
aspectRatio: v
|
|
125
|
-
} = this,
|
|
120
|
+
} = this, f = {
|
|
126
121
|
"c-thumbnail": !0,
|
|
127
122
|
[`c-thumbnail--${t}`]: !0,
|
|
128
123
|
[`c-thumbnail--${v}`]: !0,
|
|
129
|
-
[w[
|
|
130
|
-
"is-disabled":
|
|
131
|
-
"c-thumbnail--padding":
|
|
132
|
-
"c-thumbnail--defaultPlaceholder":
|
|
133
|
-
},
|
|
134
|
-
return
|
|
124
|
+
[w[d]]: !0,
|
|
125
|
+
"is-disabled": s,
|
|
126
|
+
"c-thumbnail--padding": n,
|
|
127
|
+
"c-thumbnail--defaultPlaceholder": c
|
|
128
|
+
}, y = this._generateSizeStyles();
|
|
129
|
+
return k`
|
|
135
130
|
<div data-test-id="pie-thumbnail"
|
|
136
|
-
class="${
|
|
137
|
-
style="${
|
|
131
|
+
class="${z(f)}"
|
|
132
|
+
style="${y}">
|
|
138
133
|
<img
|
|
139
134
|
data-test-id="pie-thumbnail-img"
|
|
140
135
|
src="${a}"
|
|
141
|
-
alt="${
|
|
136
|
+
alt="${l}"
|
|
142
137
|
class="c-thumbnail-img"
|
|
143
138
|
@error="${this._handleImageError}"
|
|
144
139
|
/>
|
|
@@ -146,55 +141,56 @@ const u = "pie-thumbnail", b = class b extends p {
|
|
|
146
141
|
`;
|
|
147
142
|
}
|
|
148
143
|
};
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
l([
|
|
144
|
+
e.styles = P(A);
|
|
145
|
+
i([
|
|
146
|
+
o({ type: String }),
|
|
147
|
+
u(b, D, r.variant)
|
|
148
|
+
], e.prototype, "variant", 2);
|
|
149
|
+
i([
|
|
150
|
+
o({ type: Number }),
|
|
151
|
+
u(b, j, r.size)
|
|
152
|
+
], e.prototype, "size", 2);
|
|
153
|
+
i([
|
|
154
|
+
o({ type: String }),
|
|
155
|
+
u(b, x, r.aspectRatio)
|
|
156
|
+
], e.prototype, "aspectRatio", 2);
|
|
157
|
+
i([
|
|
158
|
+
o({ type: String })
|
|
159
|
+
], e.prototype, "src", 2);
|
|
160
|
+
i([
|
|
161
|
+
o({ type: String })
|
|
162
|
+
], e.prototype, "alt", 2);
|
|
163
|
+
i([
|
|
164
|
+
o({ type: Boolean })
|
|
165
|
+
], e.prototype, "disabled", 2);
|
|
166
|
+
i([
|
|
167
|
+
o({ type: Boolean })
|
|
168
|
+
], e.prototype, "hasPadding", 2);
|
|
169
|
+
i([
|
|
170
|
+
o({ type: Boolean })
|
|
171
|
+
], e.prototype, "hideDefaultPlaceholder", 2);
|
|
172
|
+
i([
|
|
173
|
+
o({ type: String }),
|
|
174
|
+
u(b, I, r.backgroundColor)
|
|
175
|
+
], e.prototype, "backgroundColor", 2);
|
|
176
|
+
i([
|
|
177
|
+
o({ type: Object })
|
|
178
|
+
], e.prototype, "placeholder", 2);
|
|
179
|
+
i([
|
|
186
180
|
E("img")
|
|
187
|
-
],
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
],
|
|
191
|
-
|
|
181
|
+
], e.prototype, "img", 2);
|
|
182
|
+
i([
|
|
183
|
+
C()
|
|
184
|
+
], e.prototype, "_hasError", 2);
|
|
185
|
+
e = i([
|
|
186
|
+
S("pie-thumbnail")
|
|
187
|
+
], e);
|
|
192
188
|
export {
|
|
193
|
-
|
|
194
|
-
|
|
189
|
+
e as PieThumbnail,
|
|
190
|
+
x as aspectRatios,
|
|
195
191
|
w as backgroundColorClassNames,
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
192
|
+
I as backgroundColors,
|
|
193
|
+
r as defaultProps,
|
|
194
|
+
j as sizes,
|
|
195
|
+
D as variants
|
|
200
196
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-thumbnail",
|
|
3
3
|
"description": "PIE Design System Thumbnail built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.8.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -39,13 +39,13 @@
|
|
|
39
39
|
"license": "Apache-2.0",
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
42
|
+
"@justeattakeaway/pie-components-config": "0.20.1",
|
|
43
43
|
"@justeattakeaway/pie-css": "0.16.0",
|
|
44
|
-
"@justeattakeaway/pie-monorepo-utils": "0.5.
|
|
44
|
+
"@justeattakeaway/pie-monorepo-utils": "0.5.1",
|
|
45
45
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
48
|
+
"@justeattakeaway/pie-webc-core": "0.26.0"
|
|
49
49
|
},
|
|
50
50
|
"volta": {
|
|
51
51
|
"extends": "../../../package.json"
|
package/src/index.ts
CHANGED
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
unsafeCSS,
|
|
4
4
|
} from 'lit';
|
|
5
5
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
6
|
-
import {
|
|
6
|
+
import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
|
|
7
7
|
import { classMap } from 'lit/directives/class-map.js';
|
|
8
8
|
import { property, query, state } from 'lit/decorators.js';
|
|
9
9
|
import {
|
|
@@ -26,6 +26,7 @@ const componentSelector = 'pie-thumbnail';
|
|
|
26
26
|
/**
|
|
27
27
|
* @tagname pie-thumbnail
|
|
28
28
|
*/
|
|
29
|
+
@safeCustomElement('pie-thumbnail')
|
|
29
30
|
export class PieThumbnail extends PieElement implements ThumbnailProps {
|
|
30
31
|
@property({ type: String })
|
|
31
32
|
@validPropertyValues(componentSelector, variants, defaultProps.variant)
|
|
@@ -184,8 +185,6 @@ export class PieThumbnail extends PieElement implements ThumbnailProps {
|
|
|
184
185
|
static styles = unsafeCSS(styles);
|
|
185
186
|
}
|
|
186
187
|
|
|
187
|
-
defineCustomElement(componentSelector, PieThumbnail);
|
|
188
|
-
|
|
189
188
|
declare global {
|
|
190
189
|
interface HTMLElementTagNameMap {
|
|
191
190
|
[componentSelector]: PieThumbnail;
|