@justeattakeaway/pie-card - npm Package Compare versions

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

custom-elements.json

@@ -167,2 +167,10 @@ {
             {
+              "kind": "field",
+              "name": "assignedElements",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private"
+            },
+            {
               "kind": "method",
@@ -176,2 +184,10 @@ "name": "renderAnchor",
               },
+              "parameters": [
+                {
+                  "name": "classes",
+                  "type": {
+                    "text": "ClassInfo"
+                  }
+                }
+              ],
               "description": "Renders the card as an anchor element."
@@ -189,2 +205,38 @@ },
               "description": "Generates padding for the component based on `padding` values passed\nby the consumer.\n\n\nExample: 'a' or 'a, b'\nSingle values i.e `'a'` applies to all sides and `'a, b'` applies to: top & bottom, left & right"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "description": "Handles the slot change event and applies/removes opacity to images based on the `disabled` state."
+            },
+            {
+              "kind": "method",
+              "name": "updateImagesOpacity",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Updates opacity of all images (slotted and non-slotted) based on the `disabled` property."
+            },
+            {
+              "kind": "method",
+              "name": "applyOpacityToImages",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "images",
+                  "type": {
+                    "text": "NodeListOf<HTMLImageElement>"
+                  }
+                }
+              ],
+              "description": "Applies or removes opacity from the given images based on the `disabled` property."
             }
@@ -191,0 +243,0 @@ ],

dist/index.d.ts

 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import type { TemplateResult } from 'lit';
@@ -72,2 +73,3 @@
     padding?: CardProps['padding'];
+    private assignedElements;
     /**
@@ -90,2 +92,27 @@ * Renders the card as an anchor element.
     private generatePaddingCSS;
+    /**
+     * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
+     *
+     * @private
+     */
+    private handleSlotChange;
+    /**
+     * Updates opacity of all images (slotted and non-slotted) based on the `disabled` property.
+     *
+     * @private
+     */
+    private updateImagesOpacity;
+    /**
+     * Applies or removes opacity from the given images based on the `disabled` property.
+     *
+     * @param images
+     * @private
+     */
+    private applyOpacityToImages;
+    /**
+     * Observes changes in the `disabled` property and triggers the update of images' opacity.
+     *
+     * @param changedProperties
+     */
+    updated(changedProperties: PropertyValues<this>): void;
     render(): TemplateResult;
@@ -92,0 +119,0 @@ static styles: CSSResult;

dist/index.js

@@ -1,7 +0,7 @@
-import { unsafeCSS as p, LitElement as h, html as f, nothing as v } from "lit";
-import { ifDefined as m } from "lit/directives/if-defined.js";
-import { property as d } from "lit/decorators.js";
-import { validPropertyValues as g, defineCustomElement as y } from "@justeattakeaway/pie-webc-core";
-const $ = `.c-card[isdraggable]{cursor:grab}.c-card[isdraggable]: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[variant=default]{box-shadow:var(--dt-elevation-card)}.c-card[variant=default]:hover:not([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[variant=default]:active:not([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[variant=outline]{border-color:var(--dt-color-border-strong)}.c-card[variant=outline]:hover:not([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[variant=outline]:active:not([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[variant=inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card[variant=inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[variant=outline-inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card[variant=outline-inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=outline-inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[disabled]{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card[disabled] ::slotted(*){color:var(--dt-color-content-disabled)}.c-card[disabled] img{opacity:.5}.c-card[disabled][variant=inverse],.c-card[disabled][variant=outline-inverse]{--card-bg-color: var(--dt-color-disabled-01-inverse)}.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}
-`, S = ["default", "outline", "inverse", "outline-inverse"], k = ["a", "button"], u = ["a", "b", "c", "d", "e", "f", "g"], x = u.flatMap((i) => [i, ...u.map((e) => `${i},${e}`)]), l = {
+import { LitElement as y, html as h, nothing as v, unsafeCSS as S } from "lit";
+import { classMap as f } from "lit/directives/class-map.js";
+import { ifDefined as $ } from "lit/directives/if-defined.js";
+import { property as d, queryAssignedElements as x } from "lit/decorators.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 = {
   disabled: !1,
@@ -12,11 +12,10 @@ variant: "default",
 };
-var D = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (i, e, a, o) => {
-  for (var r = o > 1 ? void 0 : o ? C(e, a) : e, n = i.length - 1, s; n >= 0; n--)
-    (s = i[n]) && (r = (o ? s(e, a, r) : s(r)) || r);
-  return o && r && D(e, a, r), r;
+var A = Object.defineProperty, c = (l, r, a, o) => {
+  for (var e = void 0, n = l.length - 1, s; n >= 0; n--)
+    (s = l[n]) && (e = s(r, a, e) || e);
+  return e && A(r, a, e), e;
 };
-const b = "pie-card";
-class t extends h {
+const g = "pie-card", b = class b extends y {
   constructor() {
-    super(...arguments), this.tag = l.tag, this.variant = l.variant, this.disabled = l.disabled, this.isDraggable = l.isDraggable;
+    super(...arguments), this.tag = i.tag, this.variant = i.variant, this.disabled = i.disabled, this.isDraggable = i.isDraggable;
   }
@@ -28,12 +27,9 @@ /**
    */
-  renderAnchor() {
-    var a;
-    const e = this.generatePaddingCSS();
-    return f`
+  renderAnchor(r) {
+    var o;
+    const a = this.generatePaddingCSS();
+    return h`
             <a
-                class="c-card"
+                class="${f(r)}"
                 data-test-id="pie-card"
-                tag=${this.tag || "a"}
-                ?isDraggable="${this.isDraggable}"
-                variant=${this.variant || "default"}
                 ?disabled=${this.disabled}
@@ -44,5 +40,5 @@ href=${this.href || ""}
                 role="link"
-                aria-label=${((a = this.aria) == null ? void 0 : a.label) || v}
+                aria-label=${((o = this.aria) == null ? void 0 : o.label) || v}
                 aria-disabled=${this.disabled ? "true" : "false"}
-                style=${m(e)}>
+                style=${$(a)}>
                     <slot></slot>
@@ -63,73 +59,118 @@ </div>
   generatePaddingCSS() {
-    const { padding: e } = this;
+    const { padding: r } = this;
     let a = "";
-    if (!e)
+    if (!r)
       return "";
-    const o = e.split(",").map((r) => r.trim()).filter((r) => /^[a-g]$/.test(r));
+    const o = r.split(",").map((e) => e.trim()).filter((e) => /^[a-g]$/.test(e));
     return o.length > 0 && o.length <= 2 && (a += `var(--dt-spacing-${o[0]})`, o.length > 1 && (a += ` var(--dt-spacing-${o[1]})`)), a ? `padding: ${a}` : "";
   }
+  /**
+   * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
+   *
+   * @private
+   */
+  handleSlotChange() {
+    this.updateImagesOpacity();
+  }
+  /**
+   * Updates opacity of all images (slotted and non-slotted) based on the `disabled` property.
+   *
+   * @private
+   */
+  updateImagesOpacity() {
+    this.assignedElements.forEach((a) => {
+      const o = a.querySelectorAll("img");
+      this.applyOpacityToImages(o);
+    });
+    const r = this.querySelectorAll("img");
+    this.applyOpacityToImages(r);
+  }
+  /**
+   * Applies or removes opacity from the given images based on the `disabled` property.
+   *
+   * @param images
+   * @private
+   */
+  applyOpacityToImages(r) {
+    r.forEach((a) => {
+      a.style.opacity = this.disabled ? "0.5" : "";
+    });
+  }
+  /**
+   * Observes changes in the `disabled` property and triggers the update of images' opacity.
+   *
+   * @param changedProperties
+   */
+  updated(r) {
+    r.has("disabled") && this.updateImagesOpacity();
+  }
   render() {
     const {
-      variant: e,
+      variant: r,
       disabled: a,
       tag: o,
-      aria: r,
+      aria: e,
       isDraggable: n
-    } = this, s = this.generatePaddingCSS();
-    return o === "a" ? this.renderAnchor() : f`
+    } = this, s = this.generatePaddingCSS(), u = {
+      "c-card": !0,
+      [`c-card--${r}`]: !0,
+      "c-card--draggable": n,
+      "c-card--disabled": a
+    };
+    return o === "a" ? this.renderAnchor(u) : h`
                 <div
-                    class="c-card"
+                    class="${f(u)}"
                     data-test-id="pie-card"
-                    tag=${o || "button"}
-                    ?isDraggable="${n}"
-                    variant=${e || "default"}
-                    ?disabled=${a}
                     role="button"
                     tabindex="0"
-                    aria-label=${(r == null ? void 0 : r.label) || v}
+                    aria-label=${(e == null ? void 0 : e.label) || v}
                     aria-disabled=${a ? "true" : "false"}
                     style=${s || ""}>
-                        <slot></slot>
+                        <slot @slotchange=${this.handleSlotChange}></slot>
                     </div>
                 </div>`;
   }
-}
-t.styles = p($);
+};
+b.styles = S(O);
+let t = b;
 c([
   d(),
-  g(b, k, l.tag)
-], t.prototype, "tag", 2);
+  p(g, I, i.tag)
+], t.prototype, "tag");
 c([
   d(),
-  g(b, S, l.variant)
-], t.prototype, "variant", 2);
+  p(g, E, i.variant)
+], t.prototype, "variant");
 c([
   d({ type: String, reflect: !0 })
-], t.prototype, "href", 2);
+], t.prototype, "href");
 c([
   d({ type: String, reflect: !0 })
-], t.prototype, "target", 2);
+], t.prototype, "target");
 c([
   d({ type: String, reflect: !0 })
-], t.prototype, "rel", 2);
+], t.prototype, "rel");
 c([
   d({ type: Boolean })
-], t.prototype, "disabled", 2);
+], t.prototype, "disabled");
 c([
   d({ type: Object })
-], t.prototype, "aria", 2);
+], t.prototype, "aria");
 c([
   d({ type: Boolean })
-], t.prototype, "isDraggable", 2);
+], t.prototype, "isDraggable");
 c([
   d({ type: String }),
-  g(b, x, void 0)
-], t.prototype, "padding", 2);
-y(b, t);
+  p(g, k, void 0)
+], t.prototype, "padding");
+c([
+  x({ flatten: !0 })
+], t.prototype, "assignedElements");
+C(g, t);
 export {
   t as PieCard,
-  l as defaultProps,
-  x as paddingValues,
-  k as tags,
-  S as variants
+  i as defaultProps,
+  k as paddingValues,
+  I as tags,
+  E as variants
 };

dist/react.d.ts

 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
@@ -75,2 +76,3 @@ import type { TemplateResult } from 'lit';
     padding?: CardProps['padding'];
+    private assignedElements;
     /**
@@ -93,2 +95,27 @@ * Renders the card as an anchor element.
     private generatePaddingCSS;
+    /**
+     * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
+     *
+     * @private
+     */
+    private handleSlotChange;
+    /**
+     * Updates opacity of all images (slotted and non-slotted) based on the `disabled` property.
+     *
+     * @private
+     */
+    private updateImagesOpacity;
+    /**
+     * Applies or removes opacity from the given images based on the `disabled` property.
+     *
+     * @param images
+     * @private
+     */
+    private applyOpacityToImages;
+    /**
+     * Observes changes in the `disabled` property and triggers the update of images' opacity.
+     *
+     * @param changedProperties
+     */
+    updated(changedProperties: PropertyValues<this>): void;
     render(): TemplateResult;
@@ -95,0 +122,0 @@ static styles: CSSResult;

dist/react.js

 import * as a from "react";
 import { createComponent as e } from "@lit/react";
 import { PieCard as r } from "./index.js";
-import { defaultProps as P, paddingValues as f, tags as l, variants as g } from "./index.js";
-import "lit";
-import "lit/directives/if-defined.js";
-import "lit/decorators.js";
-import "@justeattakeaway/pie-webc-core";
+import { defaultProps as p, paddingValues as n, tags as c, variants as C } from "./index.js";
 const t = e({
@@ -15,9 +11,9 @@ displayName: "PieCard",
   events: {}
-}), n = t;
+}), s = t;
 export {
-  n as PieCard,
-  P as defaultProps,
-  f as paddingValues,
-  l as tags,
-  g as variants
+  s as PieCard,
+  p as defaultProps,
+  n as paddingValues,
+  c as tags,
+  C as variants
 };

package.json

 {
   "name": "@justeattakeaway/pie-card",
-  "version": "0.0.0-snapshot-release-20240709100447",
+  "version": "0.0.0-snapshot-release-20240924135956",
   "description": "PIE Design System Card built using Web Components",
@@ -39,3 +39,4 @@ "type": "module",
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.16.0",
+    "@justeattakeaway/pie-components-config": "0.18.0",
+    "@justeattakeaway/pie-css": "0.13.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
@@ -45,3 +46,3 @@ "cem-plugin-module-file-extensions": "0.0.5"
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240709100447"
+    "@justeattakeaway/pie-webc-core": "0.24.0"
   },
@@ -48,0 +49,0 @@ "volta": {

src/index.ts

 import {
-    html, LitElement, unsafeCSS, nothing, TemplateResult,
+    html, LitElement, unsafeCSS, nothing, TemplateResult, type PropertyValues,
 } from 'lit';
+import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { property } from 'lit/decorators.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
@@ -55,2 +56,5 @@ import styles from './card.scss?inline';
 
+    @queryAssignedElements({ flatten: true })
+    private assignedElements!: HTMLElement[];
+
     /**
@@ -61,3 +65,3 @@ * Renders the card as an anchor element.
      */
-    private renderAnchor (): TemplateResult {
+    private renderAnchor (classes: ClassInfo): TemplateResult {
         const paddingCSS = this.generatePaddingCSS();
@@ -67,7 +71,4 @@
             <a
-                class="c-card"
+                class="${classMap(classes)}"
                 data-test-id="pie-card"
-                tag=${this.tag || 'a'}
-                ?isDraggable="${this.isDraggable}"
-                variant=${this.variant || 'default'}
                 ?disabled=${this.disabled}
@@ -125,2 +126,51 @@ href=${this.href || ''}
 
+    /**
+     * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
+     *
+     * @private
+     */
+    private handleSlotChange () {
+        this.updateImagesOpacity();
+    }
+
+    /**
+     * Updates opacity of all images (slotted and non-slotted) based on the `disabled` property.
+     *
+     * @private
+     */
+    private updateImagesOpacity (): void {
+        // Handle slotted images
+        this.assignedElements.forEach((element) => {
+            const images = element.querySelectorAll('img');
+            this.applyOpacityToImages(images);
+        });
+
+        // Handle non-slotted direct content images
+        const directImages = this.querySelectorAll('img');
+        this.applyOpacityToImages(directImages);
+    }
+
+    /**
+     * Applies or removes opacity from the given images based on the `disabled` property.
+     *
+     * @param images
+     * @private
+     */
+    private applyOpacityToImages (images: NodeListOf<HTMLImageElement>): void {
+        images.forEach((img) => {
+            img.style.opacity = this.disabled ? '0.5' : '';
+        });
+    }
+
+    /**
+     * Observes changes in the `disabled` property and triggers the update of images' opacity.
+     *
+     * @param changedProperties
+     */
+    updated (changedProperties: PropertyValues<this>) : void {
+        if (changedProperties.has('disabled')) {
+            this.updateImagesOpacity(); // Re-apply styles when disabled state changes
+        }
+    }
+
     render () {
@@ -137,12 +187,15 @@ const {
 
-        if (tag === 'a') return this.renderAnchor();
+        const classes = {
+            'c-card': true,
+            [`c-card--${variant}`]: true,
+            'c-card--draggable': isDraggable,
+            'c-card--disabled': disabled,
+        };
 
+        if (tag === 'a') return this.renderAnchor(classes);
+
         return html`
                 <div
-                    class="c-card"
+                    class="${classMap(classes)}"
                     data-test-id="pie-card"
-                    tag=${tag || 'button'}
-                    ?isDraggable="${isDraggable}"
-                    variant=${variant || 'default'}
-                    ?disabled=${disabled}
                     role="button"
@@ -153,3 +206,3 @@ tabindex="0"
                     style=${paddingCSS || ''}>
-                        <slot></slot>
+                        <slot @slotchange=${this.handleSlotChange}></slot>
                     </div>
@@ -156,0 +209,0 @@ </div>`;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41270

increased by17%

Lines of code

1027

increased by22.7%

Worsened metrics

Dev dependency count

5

increased by25%

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• + Added@justeattakeaway/pie-webc-core@0.24.0(transitive)

• - Removed@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240709100447(transitive)

• Updated@justeattakeaway/pie-webc-core@0.24.0