@justeattakeaway/pie-thumbnail 0.7.0 → 0.7.1

package/declaration.d.ts

@@ -1,13 +1,3 @@
-declare module '*.scss' {
-    const content: Record<string, string>;
-    export default content;
-}
-
-declare module '*.scss?inline' {
-    const content: Record<string, string>;
-    export default content;
-}
-
 declare module '*.svg?inline' {
     const content: string;
     export default content;

package/dist/index.js

@@ -1,19 +1,19 @@
 import { LitElement as k, html as P, unsafeCSS as S } from "lit";
-import { property as n, query as E, state as z } from "lit/decorators.js";
-import { validPropertyValues as h, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
+import { property as o, query as E, state as z } from "lit/decorators.js";
+import { validPropertyValues as u, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
 import { classMap as I } from "lit/directives/class-map.js";
-var x = Object.defineProperty, D = (c, t, a, o) => {
+var x = Object.defineProperty, D = (c, t, a, n) => {
   for (var e = void 0, s = c.length - 1, d; s >= 0; s--)
     (d = c[s]) && (e = d(t, a, e) || e);
   return e && x(t, a, e), e;
 };
 class p extends k {
   constructor() {
-    super(...arguments), this.v = "0.7.0";
+    super(...arguments), this.v = "0.7.1";
   }
 }
 D([
-  n({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], p.prototype, "v");
 const $ = [
   "default",
@@ -50,12 +50,12 @@ const $ = [
     alt: ""
   }
 }, 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";
-var O = Object.defineProperty, l = (c, t, a, o) => {
+var O = Object.defineProperty, l = (c, t, a, n) => {
   for (var e = void 0, s = c.length - 1, d; s >= 0; s--)
     (d = c[s]) && (e = d(t, a, e) || e);
   return e && O(t, a, e), e;
 };
-const u = "pie-thumbnail", b = class b extends p {
+const h = "pie-thumbnail", b = class b extends p {
   constructor() {
     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;
   }
@@ -63,8 +63,8 @@ const u = "pie-thumbnail", b = class b extends p {
    * Determines if the default placeholder should be displayed.
    */
   get _isDefaultPlaceholderVisible() {
-    const { _hasError: t, placeholder: a, hideDefaultPlaceholder: o } = this;
-    return t && !(a != null && a.src) && !o;
+    const { _hasError: t, placeholder: a, hideDefaultPlaceholder: n } = this;
+    return t && !(a != null && a.src) && !n;
   }
   /**
    * Returns the appropriate image props based on the following order:
@@ -86,11 +86,11 @@ const u = "pie-thumbnail", b = class b extends p {
    */
   _generateSizeStyles() {
     const { size: t } = this;
-    let a = "--dt-radius-rounded-c", o = "--dt-spacing-d";
-    return t <= 40 ? (a = "--dt-radius-rounded-a", o = "--dt-spacing-a") : t <= 56 && (a = "--dt-radius-rounded-b", o = "--dt-spacing-b"), `
+    let a = "--dt-radius-rounded-c", n = "--dt-spacing-d";
+    return t <= 40 ? (a = "--dt-radius-rounded-a", n = "--dt-spacing-a") : t <= 56 && (a = "--dt-radius-rounded-b", n = "--dt-spacing-b"), `
             --thumbnail-size: ${t}px;
             --thumbnail-border-radius: var(${a});
-            --thumbnail-default-placeholder-padding: var(${o});
+            --thumbnail-default-placeholder-padding: var(${n});
         `;
   }
   /**
@@ -116,17 +116,17 @@ const u = "pie-thumbnail", b = class b extends p {
     const {
       variant: t,
       _controlledSrc: a,
-      _controlledAlt: o,
+      _controlledAlt: n,
       disabled: e,
       hasPadding: s,
       _isDefaultPlaceholderVisible: d,
-      backgroundColor: f,
-      aspectRatio: v
+      backgroundColor: v,
+      aspectRatio: f
     } = this, y = {
       "c-thumbnail": !0,
       [`c-thumbnail--${t}`]: !0,
-      [`c-thumbnail--${v}`]: !0,
-      [w[f]]: !0,
+      [`c-thumbnail--${f}`]: !0,
+      [w[v]]: !0,
       "is-disabled": e,
       "c-thumbnail--padding": s,
       "c-thumbnail--defaultPlaceholder": d
@@ -138,7 +138,7 @@ const u = "pie-thumbnail", b = class b extends p {
                 <img
                     data-test-id="pie-thumbnail-img"
                     src="${a}"
-                    alt="${o}"
+                    alt="${n}"
                     class="c-thumbnail-img"
                     @error="${this._handleImageError}"
                 />
@@ -149,38 +149,38 @@ const u = "pie-thumbnail", b = class b extends p {
 b.styles = S(M);
 let r = b;
 l([
-  n({ type: String }),
-  h(u, $, i.variant)
+  o({ type: String }),
+  u(h, $, i.variant)
 ], r.prototype, "variant");
 l([
-  n({ type: Number }),
-  h(u, B, i.size)
+  o({ type: Number }),
+  u(h, B, i.size)
 ], r.prototype, "size");
 l([
-  n({ type: String }),
-  h(u, R, i.aspectRatio)
+  o({ type: String }),
+  u(h, R, i.aspectRatio)
 ], r.prototype, "aspectRatio");
 l([
-  n({ type: String })
+  o({ type: String })
 ], r.prototype, "src");
 l([
-  n({ type: String })
+  o({ type: String })
 ], r.prototype, "alt");
 l([
-  n({ type: Boolean })
+  o({ type: Boolean })
 ], r.prototype, "disabled");
 l([
-  n({ type: Boolean })
+  o({ type: Boolean })
 ], r.prototype, "hasPadding");
 l([
-  n({ type: Boolean })
+  o({ type: Boolean })
 ], r.prototype, "hideDefaultPlaceholder");
 l([
-  n({ type: String }),
-  h(u, j, i.backgroundColor)
+  o({ type: String }),
+  u(h, j, i.backgroundColor)
 ], r.prototype, "backgroundColor");
 l([
-  n({ type: Object })
+  o({ type: Object })
 ], r.prototype, "placeholder");
 l([
   E("img")
@@ -188,7 +188,7 @@ l([
 l([
   z()
 ], r.prototype, "_hasError");
-C(u, r);
+C(h, r);
 export {
   r as PieThumbnail,
   R as aspectRatios,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-thumbnail",
   "description": "PIE Design System Thumbnail built using Web Components",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -39,13 +39,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.19.0",
+    "@justeattakeaway/pie-components-config": "0.19.1",
     "@justeattakeaway/pie-css": "0.16.0",
     "@justeattakeaway/pie-monorepo-utils": "0.5.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.25.0"
+    "@justeattakeaway/pie-webc-core": "0.25.1"
   },
   "volta": {
     "extends": "../../../package.json"