@justeattakeaway/pie-card - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240924135956 to 0.0.0-snapshot-release-20240925100027

custom-elements.json

@@ -170,3 +170,3 @@ {
               "type": {
-                "text": "HTMLElement[]"
+                "text": "HTMLElement[] | undefined"
               },
@@ -173,0 +173,0 @@ "privacy": "private"

dist/index.d.ts

@@ -73,3 +73,3 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
     padding?: CardProps['padding'];
-    private assignedElements;
+    private assignedElements?;
     /**
@@ -76,0 +76,0 @@ * Renders the card as an anchor element.

dist/index.js

@@ -1,2 +0,2 @@
-import { LitElement as y, html as h, nothing as v, unsafeCSS as S } from "lit";
+import { LitElement as y, html as u, nothing as v, unsafeCSS as S } from "lit";
 import { classMap as f } from "lit/directives/class-map.js";
@@ -6,3 +6,3 @@ import { ifDefined as $ } from "lit/directives/if-defined.js";
 import { validPropertyValues as p, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
-const O = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.c-card{--card-bg-color: var(--dt-color-container-default);--card-color: var(--dt-color-content-default);--card-radius: var(--dt-radius-rounded-c);--card-border-color: transparent;display:block;position:relative;color:var(--card-color);background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:var(--card-radius);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none}.c-card:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-card.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card.c-card--disabled ::slotted(*){color:var(--dt-color-content-disabled)}.c-card.c-card--disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-card)}.c-card.c-card--default:hover:not(.c-card--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card.c-card--default:active:not(.c-card--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card.c-card--outline{border-color:var(--dt-color-border-strong)}.c-card.c-card--outline:hover:not(.c-card--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card.c-card--outline:active:not(.c-card--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card.c-card--inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card.c-card--inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-card.c-card--outline-inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card.c-card--outline-inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--outline-inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-card.c-card--inverse.c-card--disabled,.c-card.c-card--outline-inverse.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01-inverse)}", E = ["default", "outline", "inverse", "outline-inverse"], I = ["a", "button"], m = ["a", "b", "c", "d", "e", "f", "g"], k = m.flatMap((l) => [l, ...m.map((r) => `${l},${r}`)]), i = {
+const E = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.c-card{--card-bg-color: var(--dt-color-container-default);--card-color: var(--dt-color-content-default);--card-radius: var(--dt-radius-rounded-c);--card-border-color: transparent;display:block;position:relative;color:var(--card-color);background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:var(--card-radius);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none}.c-card:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-card.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card.c-card--disabled ::slotted(*){color:var(--dt-color-content-disabled)}.c-card.c-card--disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-card)}.c-card.c-card--default:hover:not(.c-card--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card.c-card--default:active:not(.c-card--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card.c-card--outline{border-color:var(--dt-color-border-strong)}.c-card.c-card--outline:hover:not(.c-card--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card.c-card--outline:active:not(.c-card--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card.c-card--inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card.c-card--inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-card.c-card--outline-inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card.c-card--outline-inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--outline-inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-card.c-card--inverse.c-card--disabled,.c-card.c-card--outline-inverse.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01-inverse)}", O = ["default", "outline", "inverse", "outline-inverse"], I = ["a", "button"], m = ["a", "b", "c", "d", "e", "f", "g"], k = m.flatMap((l) => [l, ...m.map((r) => `${l},${r}`)]), i = {
   disabled: !1,
@@ -30,3 +30,3 @@ variant: "default",
     const a = this.generatePaddingCSS();
-    return h`
+    return u`
             <a
@@ -79,3 +79,3 @@ class="${f(r)}"
   updateImagesOpacity() {
-    this.assignedElements.forEach((a) => {
+    this.assignedElements && this.assignedElements.forEach((a) => {
       const o = a.querySelectorAll("img");
@@ -113,3 +113,3 @@ this.applyOpacityToImages(o);
       isDraggable: n
-    } = this, s = this.generatePaddingCSS(), u = {
+    } = this, s = this.generatePaddingCSS(), h = {
       "c-card": !0,
@@ -120,5 +120,5 @@ [`c-card--${r}`]: !0,
     };
-    return o === "a" ? this.renderAnchor(u) : h`
+    return o === "a" ? this.renderAnchor(h) : u`
                 <div
-                    class="${f(u)}"
+                    class="${f(h)}"
                     data-test-id="pie-card"
@@ -135,3 +135,3 @@ role="button"
 };
-b.styles = S(O);
+b.styles = S(E);
 let t = b;
@@ -144,3 +144,3 @@ c([
   d(),
-  p(g, E, i.variant)
+  p(g, O, i.variant)
 ], t.prototype, "variant");
@@ -178,3 +178,3 @@ c([
   I as tags,
-  E as variants
+  O as variants
 };

dist/react.d.ts

@@ -76,3 +76,3 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
     padding?: CardProps['padding'];
-    private assignedElements;
+    private assignedElements?;
     /**
@@ -79,0 +79,0 @@ * Renders the card as an anchor element.

package.json

 {
   "name": "@justeattakeaway/pie-card",
-  "version": "0.0.0-snapshot-release-20240924135956",
+  "version": "0.0.0-snapshot-release-20240925100027",
   "description": "PIE Design System Card built using Web Components",
@@ -5,0 +5,0 @@ "type": "module",

src/index.ts

@@ -57,3 +57,3 @@ import {
     @queryAssignedElements({ flatten: true })
-    private assignedElements!: HTMLElement[];
+    private assignedElements?: HTMLElement[];
 
@@ -139,7 +139,9 @@ /**
     private updateImagesOpacity (): void {
-        // Handle slotted images
-        this.assignedElements.forEach((element) => {
-            const images = element.querySelectorAll('img');
-            this.applyOpacityToImages(images);
-        });
+        if (this.assignedElements) {
+            // Handle slotted images
+            this.assignedElements.forEach((element) => {
+                const images = element.querySelectorAll('img');
+                this.applyOpacityToImages(images);
+            });
+        }
 
@@ -146,0 +148,0 @@ // Handle non-slotted direct content images

No alert changes

Improved metrics

Total package byte prevSize

41376

increased by0.26%

Lines of code

1029

increased by0.19%

No dependency changes