@justeattakeaway/pie-thumbnail 0.6.2 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/custom-elements.json +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +104 -91
  4. package/dist/react.d.ts +2 -2
  5. package/package.json +11 -4
  6. package/src/index.ts +3 -3
  7. package/src/thumbnail.scss +1 -1
package/custom-elements.json CHANGED
@@ -302,8 +302,8 @@
302
302
  }
303
303
  ],
304
304
  "superclass": {
305
- "name": "LitElement",
306
- "package": "lit"
305
+ "name": "PieElement",
306
+ "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
307
307
  },
308
308
  "tagName": "pie-thumbnail",
309
309
  "customElement": true
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
- import type { LitElement } from 'lit';
3
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
4
  import type { TemplateResult } from 'lit-html';
5
5
 
6
6
  export declare const aspectRatios: readonly ["1by1", "4by3", "16by9"];
@@ -16,7 +16,7 @@ export declare const defaultProps: DefaultProps;
16
16
  /**
17
17
  * @tagname pie-thumbnail
18
18
  */
19
- export declare class PieThumbnail extends LitElement implements ThumbnailProps {
19
+ export declare class PieThumbnail extends PieElement implements ThumbnailProps {
20
20
  variant: "default" | "outline";
21
21
  size: number;
22
22
  aspectRatio: "1by1" | "4by3" | "16by9";
package/dist/index.js CHANGED
@@ -1,28 +1,41 @@
1
- import { LitElement as k, html as _, unsafeCSS as S } from "lit";
2
- import { validPropertyValues as h, defineCustomElement as P } from "@justeattakeaway/pie-webc-core";
3
- import { classMap as E } from "lit/directives/class-map.js";
4
- import { property as l, query as z, state as C } from "lit/decorators.js";
5
- const I = [
1
+ import { LitElement as k, html as P, unsafeCSS as S } from "lit";
2
+ import { property as n, query as E, state as z } from "lit/decorators.js";
3
+ import { validPropertyValues as h, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
4
+ import { classMap as I } from "lit/directives/class-map.js";
5
+ var x = Object.defineProperty, D = (c, t, a, o) => {
6
+ for (var e = void 0, s = c.length - 1, d; s >= 0; s--)
7
+ (d = c[s]) && (e = d(t, a, e) || e);
8
+ return e && x(t, a, e), e;
9
+ };
10
+ class p extends k {
11
+ constructor() {
12
+ super(...arguments), this.v = "0.7.0";
13
+ }
14
+ }
15
+ D([
16
+ n({ type: String, reflect: !0 })
17
+ ], p.prototype, "v");
18
+ const $ = [
6
19
  "default",
7
20
  "outline"
8
- ], D = [
21
+ ], j = [
9
22
  "default",
10
23
  "subtle",
11
24
  "strong",
12
25
  "dark",
13
26
  "inverse",
14
27
  "inverse-alternative"
15
- ], x = {
28
+ ], w = {
16
29
  default: "c-thumbnail--backgroundDefault",
17
30
  subtle: "c-thumbnail--backgroundSubtle",
18
31
  strong: "c-thumbnail--backgroundStrong",
19
32
  dark: "c-thumbnail--backgroundDark",
20
33
  inverse: "c-thumbnail--backgroundInverse",
21
34
  "inverse-alternative": "c-thumbnail--backgroundInverseAlternative"
22
- }, $ = ["1by1", "4by3", "16by9"], m = 8, g = 24, w = 128, R = Object.freeze(Array.from(
23
- { length: (w - g) / m + 1 },
24
- (u, t) => g + t * m
25
- )), r = {
35
+ }, R = ["1by1", "4by3", "16by9"], m = 8, g = 24, A = 128, B = Object.freeze(Array.from(
36
+ { length: (A - g) / m + 1 },
37
+ (c, t) => g + t * m
38
+ )), i = {
26
39
  variant: "default",
27
40
  size: 48,
28
41
  src: "",
@@ -36,22 +49,22 @@ const I = [
36
49
  src: "",
37
50
  alt: ""
38
51
  }
39
- }, j = ".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.c-thumbnail--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)}", A = "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";
40
- var B = Object.defineProperty, i = (u, t, e, o) => {
41
- for (var n = void 0, c = u.length - 1, d; c >= 0; c--)
42
- (d = u[c]) && (n = d(t, e, n) || n);
43
- return n && B(t, e, n), n;
52
+ }, M = ".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)}", N = "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";
53
+ var O = Object.defineProperty, l = (c, t, a, o) => {
54
+ for (var e = void 0, s = c.length - 1, d; s >= 0; s--)
55
+ (d = c[s]) && (e = d(t, a, e) || e);
56
+ return e && O(t, a, e), e;
44
57
  };
45
- const s = "pie-thumbnail", b = class b extends k {
58
+ const u = "pie-thumbnail", b = class b extends p {
46
59
  constructor() {
47
- 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;
60
+ super(...arguments), this.variant = i.variant, this.size = i.size, this.aspectRatio = i.aspectRatio, this.src = i.src, this.alt = i.alt, this.disabled = i.disabled, this.hasPadding = i.hasPadding, this.hideDefaultPlaceholder = i.hideDefaultPlaceholder, this.backgroundColor = i.backgroundColor, this.placeholder = i.placeholder, this._hasError = !1;
48
61
  }
49
62
  /**
50
63
  * Determines if the default placeholder should be displayed.
51
64
  */
52
65
  get _isDefaultPlaceholderVisible() {
53
- const { _hasError: t, placeholder: e, hideDefaultPlaceholder: o } = this;
54
- return t && !(e != null && e.src) && !o;
66
+ const { _hasError: t, placeholder: a, hideDefaultPlaceholder: o } = this;
67
+ return t && !(a != null && a.src) && !o;
55
68
  }
56
69
  /**
57
70
  * Returns the appropriate image props based on the following order:
@@ -62,7 +75,7 @@ const s = "pie-thumbnail", b = class b extends k {
62
75
  */
63
76
  get _controlledSrc() {
64
77
  var t;
65
- return this._hasError ? (t = this.placeholder) != null && t.src ? this.placeholder.src : this.hideDefaultPlaceholder ? this.src : A : this.src;
78
+ return this._hasError ? (t = this.placeholder) != null && t.src ? this.placeholder.src : this.hideDefaultPlaceholder ? this.src : N : this.src;
66
79
  }
67
80
  get _controlledAlt() {
68
81
  var t;
@@ -73,10 +86,10 @@ const s = "pie-thumbnail", b = class b extends k {
73
86
  */
74
87
  _generateSizeStyles() {
75
88
  const { size: t } = this;
76
- let e = "--dt-radius-rounded-c", o = "--dt-spacing-d";
77
- return t <= 40 ? (e = "--dt-radius-rounded-a", o = "--dt-spacing-a") : t <= 56 && (e = "--dt-radius-rounded-b", o = "--dt-spacing-b"), `
89
+ let a = "--dt-radius-rounded-c", o = "--dt-spacing-d";
90
+ return t <= 40 ? (a = "--dt-radius-rounded-a", o = "--dt-spacing-a") : t <= 56 && (a = "--dt-radius-rounded-b", o = "--dt-spacing-b"), `
78
91
  --thumbnail-size: ${t}px;
79
- --thumbnail-border-radius: var(${e});
92
+ --thumbnail-border-radius: var(${a});
80
93
  --thumbnail-default-placeholder-padding: var(${o});
81
94
  `;
82
95
  }
@@ -92,8 +105,8 @@ const s = "pie-thumbnail", b = class b extends k {
92
105
  */
93
106
  _checkImageError() {
94
107
  if (this.img) {
95
- const { complete: t, naturalHeight: e } = this.img;
96
- t && e === 0 && this._handleImageError.call(this);
108
+ const { complete: t, naturalHeight: a } = this.img;
109
+ t && a === 0 && this._handleImageError.call(this);
97
110
  }
98
111
  }
99
112
  firstUpdated() {
@@ -102,29 +115,29 @@ const s = "pie-thumbnail", b = class b extends k {
102
115
  render() {
103
116
  const {
104
117
  variant: t,
105
- _controlledSrc: e,
118
+ _controlledSrc: a,
106
119
  _controlledAlt: o,
107
- disabled: n,
108
- hasPadding: c,
120
+ disabled: e,
121
+ hasPadding: s,
109
122
  _isDefaultPlaceholderVisible: d,
110
- backgroundColor: p,
111
- aspectRatio: f
112
- } = this, v = {
123
+ backgroundColor: f,
124
+ aspectRatio: v
125
+ } = this, y = {
113
126
  "c-thumbnail": !0,
114
127
  [`c-thumbnail--${t}`]: !0,
115
- [`c-thumbnail--${f}`]: !0,
116
- [x[p]]: !0,
117
- "c-thumbnail--disabled": n,
118
- "c-thumbnail--padding": c,
128
+ [`c-thumbnail--${v}`]: !0,
129
+ [w[f]]: !0,
130
+ "is-disabled": e,
131
+ "c-thumbnail--padding": s,
119
132
  "c-thumbnail--defaultPlaceholder": d
120
- }, y = this._generateSizeStyles();
121
- return _`
133
+ }, _ = this._generateSizeStyles();
134
+ return P`
122
135
  <div data-test-id="pie-thumbnail"
123
- class="${E(v)}"
124
- style="${y}">
136
+ class="${I(y)}"
137
+ style="${_}">
125
138
  <img
126
139
  data-test-id="pie-thumbnail-img"
127
- src="${e}"
140
+ src="${a}"
128
141
  alt="${o}"
129
142
  class="c-thumbnail-img"
130
143
  @error="${this._handleImageError}"
@@ -133,55 +146,55 @@ const s = "pie-thumbnail", b = class b extends k {
133
146
  `;
134
147
  }
135
148
  };
136
- b.styles = S(j);
137
- let a = b;
138
- i([
139
- l({ type: String }),
140
- h(s, I, r.variant)
141
- ], a.prototype, "variant");
142
- i([
143
- l({ type: Number }),
144
- h(s, R, r.size)
145
- ], a.prototype, "size");
146
- i([
147
- l({ type: String }),
148
- h(s, $, r.aspectRatio)
149
- ], a.prototype, "aspectRatio");
150
- i([
151
- l({ type: String })
152
- ], a.prototype, "src");
153
- i([
154
- l({ type: String })
155
- ], a.prototype, "alt");
156
- i([
157
- l({ type: Boolean })
158
- ], a.prototype, "disabled");
159
- i([
160
- l({ type: Boolean })
161
- ], a.prototype, "hasPadding");
162
- i([
163
- l({ type: Boolean })
164
- ], a.prototype, "hideDefaultPlaceholder");
165
- i([
166
- l({ type: String }),
167
- h(s, D, r.backgroundColor)
168
- ], a.prototype, "backgroundColor");
169
- i([
170
- l({ type: Object })
171
- ], a.prototype, "placeholder");
172
- i([
173
- z("img")
174
- ], a.prototype, "img");
175
- i([
176
- C()
177
- ], a.prototype, "_hasError");
178
- P(s, a);
149
+ b.styles = S(M);
150
+ let r = b;
151
+ l([
152
+ n({ type: String }),
153
+ h(u, $, i.variant)
154
+ ], r.prototype, "variant");
155
+ l([
156
+ n({ type: Number }),
157
+ h(u, B, i.size)
158
+ ], r.prototype, "size");
159
+ l([
160
+ n({ type: String }),
161
+ h(u, R, i.aspectRatio)
162
+ ], r.prototype, "aspectRatio");
163
+ l([
164
+ n({ type: String })
165
+ ], r.prototype, "src");
166
+ l([
167
+ n({ type: String })
168
+ ], r.prototype, "alt");
169
+ l([
170
+ n({ type: Boolean })
171
+ ], r.prototype, "disabled");
172
+ l([
173
+ n({ type: Boolean })
174
+ ], r.prototype, "hasPadding");
175
+ l([
176
+ n({ type: Boolean })
177
+ ], r.prototype, "hideDefaultPlaceholder");
178
+ l([
179
+ n({ type: String }),
180
+ h(u, j, i.backgroundColor)
181
+ ], r.prototype, "backgroundColor");
182
+ l([
183
+ n({ type: Object })
184
+ ], r.prototype, "placeholder");
185
+ l([
186
+ E("img")
187
+ ], r.prototype, "img");
188
+ l([
189
+ z()
190
+ ], r.prototype, "_hasError");
191
+ C(u, r);
179
192
  export {
180
- a as PieThumbnail,
181
- $ as aspectRatios,
182
- x as backgroundColorClassNames,
183
- D as backgroundColors,
184
- r as defaultProps,
185
- R as sizes,
186
- I as variants
193
+ r as PieThumbnail,
194
+ R as aspectRatios,
195
+ w as backgroundColorClassNames,
196
+ j as backgroundColors,
197
+ i as defaultProps,
198
+ B as sizes,
199
+ $ as variants
187
200
  };
package/dist/react.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
- import type { LitElement } from 'lit';
3
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
4
  import * as React_2 from 'react';
5
5
  import type { TemplateResult } from 'lit-html';
6
6
 
@@ -19,7 +19,7 @@ export declare const PieThumbnail: React_2.ForwardRefExoticComponent<ThumbnailPr
19
19
  /**
20
20
  * @tagname pie-thumbnail
21
21
  */
22
- declare class PieThumbnail_2 extends LitElement implements ThumbnailProps {
22
+ declare class PieThumbnail_2 extends PieElement implements ThumbnailProps {
23
23
  variant: "default" | "outline";
24
24
  size: number;
25
25
  aspectRatio: "1by1" | "4by3" | "16by9";
package/package.json CHANGED
@@ -1,7 +1,13 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-thumbnail",
3
3
  "description": "PIE Design System Thumbnail built using Web Components",
4
- "version": "0.6.2",
4
+ "version": "0.7.0",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/justeattakeaway/pie",
8
+ "directory": "packages/components/pie-thumbnail"
9
+ },
10
+ "homepage": "https://pie.design/components/thumbnail/code/",
5
11
  "type": "module",
6
12
  "main": "dist/index.js",
7
13
  "module": "dist/index.js",
@@ -33,12 +39,13 @@
33
39
  "license": "Apache-2.0",
34
40
  "devDependencies": {
35
41
  "@custom-elements-manifest/analyzer": "0.9.0",
36
- "@justeattakeaway/pie-components-config": "0.18.0",
37
- "@justeattakeaway/pie-css": "0.14.1",
42
+ "@justeattakeaway/pie-components-config": "0.19.0",
43
+ "@justeattakeaway/pie-css": "0.16.0",
44
+ "@justeattakeaway/pie-monorepo-utils": "0.5.0",
38
45
  "cem-plugin-module-file-extensions": "0.0.5"
39
46
  },
40
47
  "dependencies": {
41
- "@justeattakeaway/pie-webc-core": "0.24.2"
48
+ "@justeattakeaway/pie-webc-core": "0.25.0"
42
49
  },
43
50
  "volta": {
44
51
  "extends": "../../../package.json"
package/src/index.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import {
2
- LitElement,
3
2
  html,
4
3
  unsafeCSS,
5
4
  } from 'lit';
5
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
6
6
  import { defineCustomElement, 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';
@@ -26,7 +26,7 @@ const componentSelector = 'pie-thumbnail';
26
26
  /**
27
27
  * @tagname pie-thumbnail
28
28
  */
29
- export class PieThumbnail extends LitElement implements ThumbnailProps {
29
+ export class PieThumbnail extends PieElement implements ThumbnailProps {
30
30
  @property({ type: String })
31
31
  @validPropertyValues(componentSelector, variants, defaultProps.variant)
32
32
  public variant = defaultProps.variant;
@@ -158,7 +158,7 @@ export class PieThumbnail extends LitElement implements ThumbnailProps {
158
158
  [`c-thumbnail--${variant}`]: true,
159
159
  [`c-thumbnail--${aspectRatio}`]: true,
160
160
  [backgroundColorClassNames[backgroundColor]]: true,
161
- 'c-thumbnail--disabled': disabled,
161
+ 'is-disabled': disabled,
162
162
  'c-thumbnail--padding': hasPadding,
163
163
  'c-thumbnail--defaultPlaceholder': _isDefaultPlaceholderVisible,
164
164
  };
package/src/thumbnail.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  border: 1px solid var(--dt-color-border-default);
22
22
  }
23
23
 
24
- &.c-thumbnail--disabled {
24
+ &.is-disabled {
25
25
  opacity: 0.5;
26
26
  }
27
27