@justeattakeaway/pie-thumbnail 0.7.1 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +9 -9
- package/dist/index.js +86 -90
- package/package.json +4 -4
- package/src/index.ts +2 -3
package/custom-elements.json
CHANGED
|
@@ -16,17 +16,17 @@
|
|
|
16
16
|
"kind": "variable",
|
|
17
17
|
"name": "variants",
|
|
18
18
|
"type": {
|
|
19
|
-
"text": "[\n 'default', 'outline',\n]"
|
|
19
|
+
"text": "[\r\n 'default', 'outline',\r\n]"
|
|
20
20
|
},
|
|
21
|
-
"default": "[\n 'default', 'outline',\n]"
|
|
21
|
+
"default": "[\r\n 'default', 'outline',\r\n]"
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
"kind": "variable",
|
|
25
25
|
"name": "backgroundColors",
|
|
26
26
|
"type": {
|
|
27
|
-
"text": "[\n 'default', 'subtle', 'strong', 'dark', 'inverse', 'inverse-alternative'\n]"
|
|
27
|
+
"text": "[\r\n 'default', 'subtle', 'strong', 'dark', 'inverse', 'inverse-alternative'\r\n]"
|
|
28
28
|
},
|
|
29
|
-
"default": "[\n 'default', 'subtle', 'strong', 'dark', 'inverse', 'inverse-alternative'\n]"
|
|
29
|
+
"default": "[\r\n 'default', 'subtle', 'strong', 'dark', 'inverse', 'inverse-alternative'\r\n]"
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
32
|
"kind": "variable",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"type": {
|
|
35
35
|
"text": "Record<typeof backgroundColors[number], string>"
|
|
36
36
|
},
|
|
37
|
-
"default": "{\n default: 'c-thumbnail--backgroundDefault',\n subtle: 'c-thumbnail--backgroundSubtle',\n strong: 'c-thumbnail--backgroundStrong',\n dark: 'c-thumbnail--backgroundDark',\n inverse: 'c-thumbnail--backgroundInverse',\n 'inverse-alternative': 'c-thumbnail--backgroundInverseAlternative',\n}"
|
|
37
|
+
"default": "{\r\n default: 'c-thumbnail--backgroundDefault',\r\n subtle: 'c-thumbnail--backgroundSubtle',\r\n strong: 'c-thumbnail--backgroundStrong',\r\n dark: 'c-thumbnail--backgroundDark',\r\n inverse: 'c-thumbnail--backgroundInverse',\r\n 'inverse-alternative': 'c-thumbnail--backgroundInverseAlternative',\r\n}"
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
"kind": "variable",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
{
|
|
48
48
|
"kind": "variable",
|
|
49
49
|
"name": "sizes",
|
|
50
|
-
"default": "Object.freeze(Array.from(\n { length: (SIZE_MAX - SIZE_MIN) / SIZE_INCREMENT_BY + 1 },\n (_, i) => SIZE_MIN + i * SIZE_INCREMENT_BY,\n))"
|
|
50
|
+
"default": "Object.freeze(Array.from(\r\n { length: (SIZE_MAX - SIZE_MIN) / SIZE_INCREMENT_BY + 1 },\r\n (_, i) => SIZE_MIN + i * SIZE_INCREMENT_BY,\r\n))"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"kind": "variable",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"type": {
|
|
56
56
|
"text": "DefaultProps"
|
|
57
57
|
},
|
|
58
|
-
"default": "{\n variant: 'default',\n size: 48,\n src: '',\n alt: '',\n disabled: false,\n hasPadding: false,\n hideDefaultPlaceholder: false,\n backgroundColor: 'default',\n aspectRatio: '1by1',\n placeholder: {\n src: '',\n alt: '',\n },\n}"
|
|
58
|
+
"default": "{\r\n variant: 'default',\r\n size: 48,\r\n src: '',\r\n alt: '',\r\n disabled: false,\r\n hasPadding: false,\r\n hideDefaultPlaceholder: false,\r\n backgroundColor: 'default',\r\n aspectRatio: '1by1',\r\n placeholder: {\r\n src: '',\r\n alt: '',\r\n },\r\n}"
|
|
59
59
|
}
|
|
60
60
|
],
|
|
61
61
|
"exports": [
|
|
@@ -215,7 +215,7 @@
|
|
|
215
215
|
"text": "string"
|
|
216
216
|
},
|
|
217
217
|
"privacy": "private",
|
|
218
|
-
"description": "Returns the appropriate image props based on the following order:\n1. If there is no error, return the provided image props.\n2. If there is an error and a custom placeholder is provided, return the placeholder props.\n3. If there is an error and no custom placeholder is provided, return the component default placeholder.\n4. Otherwise, fall back to the provided src (resulting in a broken image).",
|
|
218
|
+
"description": "Returns the appropriate image props based on the following order:\r\n1. If there is no error, return the provided image props.\r\n2. If there is an error and a custom placeholder is provided, return the placeholder props.\r\n3. If there is an error and no custom placeholder is provided, return the component default placeholder.\r\n4. Otherwise, fall back to the provided src (resulting in a broken image).",
|
|
219
219
|
"readonly": true
|
|
220
220
|
},
|
|
221
221
|
{
|
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
"kind": "method",
|
|
254
254
|
"name": "_checkImageError",
|
|
255
255
|
"privacy": "private",
|
|
256
|
-
"description": "Checks the image load status and triggers error handling if needed.\nThis is needed as the `onerror` event is not triggered in SSR."
|
|
256
|
+
"description": "Checks the image load status and triggers error handling if needed.\r\nThis is needed as the `onerror` event is not triggered in SSR."
|
|
257
257
|
}
|
|
258
258
|
],
|
|
259
259
|
"attributes": [
|
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.1";
|
|
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.1";
|
|
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 h = "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 h = "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 h = "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:
|
|
124
|
-
aspectRatio:
|
|
125
|
-
} = this,
|
|
114
|
+
_controlledAlt: l,
|
|
115
|
+
disabled: s,
|
|
116
|
+
hasPadding: n,
|
|
117
|
+
_isDefaultPlaceholderVisible: c,
|
|
118
|
+
backgroundColor: d,
|
|
119
|
+
aspectRatio: v
|
|
120
|
+
} = this, f = {
|
|
126
121
|
"c-thumbnail": !0,
|
|
127
122
|
[`c-thumbnail--${t}`]: !0,
|
|
128
|
-
[`c-thumbnail--${
|
|
129
|
-
[w[
|
|
130
|
-
"is-disabled":
|
|
131
|
-
"c-thumbnail--padding":
|
|
132
|
-
"c-thumbnail--defaultPlaceholder":
|
|
133
|
-
},
|
|
134
|
-
return
|
|
123
|
+
[`c-thumbnail--${v}`]: !0,
|
|
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 h = "pie-thumbnail", b = class b extends p {
|
|
|
146
141
|
`;
|
|
147
142
|
}
|
|
148
143
|
};
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
l([
|
|
144
|
+
e.styles = P(A);
|
|
145
|
+
i([
|
|
152
146
|
o({ type: String }),
|
|
153
|
-
u(
|
|
154
|
-
],
|
|
155
|
-
|
|
147
|
+
u(b, D, r.variant)
|
|
148
|
+
], e.prototype, "variant", 2);
|
|
149
|
+
i([
|
|
156
150
|
o({ type: Number }),
|
|
157
|
-
u(
|
|
158
|
-
],
|
|
159
|
-
|
|
151
|
+
u(b, j, r.size)
|
|
152
|
+
], e.prototype, "size", 2);
|
|
153
|
+
i([
|
|
160
154
|
o({ type: String }),
|
|
161
|
-
u(
|
|
162
|
-
],
|
|
163
|
-
|
|
155
|
+
u(b, x, r.aspectRatio)
|
|
156
|
+
], e.prototype, "aspectRatio", 2);
|
|
157
|
+
i([
|
|
164
158
|
o({ type: String })
|
|
165
|
-
],
|
|
166
|
-
|
|
159
|
+
], e.prototype, "src", 2);
|
|
160
|
+
i([
|
|
167
161
|
o({ type: String })
|
|
168
|
-
],
|
|
169
|
-
|
|
162
|
+
], e.prototype, "alt", 2);
|
|
163
|
+
i([
|
|
170
164
|
o({ type: Boolean })
|
|
171
|
-
],
|
|
172
|
-
|
|
165
|
+
], e.prototype, "disabled", 2);
|
|
166
|
+
i([
|
|
173
167
|
o({ type: Boolean })
|
|
174
|
-
],
|
|
175
|
-
|
|
168
|
+
], e.prototype, "hasPadding", 2);
|
|
169
|
+
i([
|
|
176
170
|
o({ type: Boolean })
|
|
177
|
-
],
|
|
178
|
-
|
|
171
|
+
], e.prototype, "hideDefaultPlaceholder", 2);
|
|
172
|
+
i([
|
|
179
173
|
o({ type: String }),
|
|
180
|
-
u(
|
|
181
|
-
],
|
|
182
|
-
|
|
174
|
+
u(b, I, r.backgroundColor)
|
|
175
|
+
], e.prototype, "backgroundColor", 2);
|
|
176
|
+
i([
|
|
183
177
|
o({ type: Object })
|
|
184
|
-
],
|
|
185
|
-
|
|
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.1",
|
|
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": "1.0.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;
|