@justeattakeaway/pie-card 0.27.1 → 0.27.2

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 (3) hide show
  1. package/dist/index.js +66 -66
  2. package/package.json +3 -3
  3. package/src/card.scss +2 -0
package/dist/index.js CHANGED
@@ -1,28 +1,28 @@
1
- import { LitElement as y, unsafeCSS as S, nothing as v, html as h } from "lit";
2
- import { classMap as m } from "lit/directives/class-map.js";
1
+ import { LitElement as y, unsafeCSS as S, nothing as v, html as m } from "lit";
2
+ import { classMap as p } from "lit/directives/class-map.js";
3
3
  import { ifDefined as f } from "lit/directives/if-defined.js";
4
4
  import { property as c, queryAssignedElements as $ } from "lit/decorators.js";
5
- import { validPropertyValues as u, safeCustomElement as C } from "@justeattakeaway/pie-webc-core";
5
+ import { validPropertyValues as h, safeCustomElement as C } from "@justeattakeaway/pie-webc-core";
6
6
  const b = class b extends y {
7
7
  willUpdate() {
8
8
  this.getAttribute("v") || this.setAttribute("v", b.v);
9
9
  }
10
10
  };
11
- b.v = "0.27.1";
11
+ b.v = "0.27.2";
12
12
  let g = b;
13
- const w = ".c-card.is-draggable{cursor:grab}.c-card.is-draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-card{--int-states-mixin-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;height:100%;position:relative;color:var(--card-color);background-color:var(--int-states-mixin-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.is-disabled{--int-states-mixin-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card.is-disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-below-10)}.c-card.c-card--default:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--default.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.c-card.c-card--default:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}.c-card.c-card--default:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--default.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-card.c-card--outline{border-color:var(--dt-color-border-strong)}.c-card.c-card--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.c-card.c-card--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}.c-card.c-card--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-card.c-card--inverse{--int-states-mixin-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-inverse-below-10)}.c-card.c-card--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-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(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.c-card.c-card--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-container-inverse))}.c-card.c-card--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-container-inverse))}}.c-card.c-card--outline-inverse{--int-states-mixin-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(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-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(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline-inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.c-card.c-card--outline-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-container-inverse))}.c-card.c-card--outline-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline-inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-container-inverse))}}.c-card.c-card--inverse.is-disabled,.c-card.c-card--outline-inverse.is-disabled{--int-states-mixin-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}", k = ["default", "outline", "inverse", "outline-inverse"], O = ["a", "button"], x = ["a", "b", "c", "d", "e", "f", "g"], D = x.flatMap((r) => [r, ...x.map((i) => `${r},${i}`)]), n = {
13
+ const w = ".c-card.is-draggable{cursor:grab}.c-card.is-draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-card{--int-states-mixin-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;height:100%;position:relative;color:var(--card-color);background-color:var(--int-states-mixin-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 ::slotted(.c-pieIcon){pointer-events:none}.c-card.is-disabled{--int-states-mixin-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card.is-disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-below-10)}@media(hover:hover){.c-card.c-card--default:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--default.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-card.c-card--default:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-card.c-card--default:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--default.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-card.c-card--outline{border-color:var(--dt-color-border-strong)}@media(hover:hover){.c-card.c-card--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-card.c-card--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-card.c-card--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-card.c-card--inverse{--int-states-mixin-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-inverse-below-10)}@media(hover:hover){.c-card.c-card--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-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(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-card.c-card--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-container-inverse))}}.c-card.c-card--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-container-inverse))}}.c-card.c-card--outline-inverse{--int-states-mixin-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}@media(hover:hover){.c-card.c-card--outline-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-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(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline-inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-card.c-card--outline-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-container-inverse))}}.c-card.c-card--outline-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline-inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-container-inverse))}}.c-card.c-card--inverse.is-disabled,.c-card.c-card--outline-inverse.is-disabled{--int-states-mixin-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}", k = ["default", "outline", "inverse", "outline-inverse"], O = ["a", "button"], x = ["a", "b", "c", "d", "e", "f", "g"], D = x.flatMap((r) => [r, ...x.map((e) => `${r},${e}`)]), n = {
14
14
  disabled: !1,
15
15
  variant: "default",
16
16
  isDraggable: !1,
17
17
  tag: "button"
18
18
  };
19
- var P = Object.defineProperty, A = Object.getOwnPropertyDescriptor, s = (r, i, e, a) => {
20
- for (var o = a > 1 ? void 0 : a ? A(i, e) : i, l = r.length - 1, d; l >= 0; l--)
21
- (d = r[l]) && (o = (a ? d(i, e, o) : d(o)) || o);
22
- return a && o && P(i, e, o), o;
19
+ var P = Object.defineProperty, A = Object.getOwnPropertyDescriptor, d = (r, e, i, a) => {
20
+ for (var t = a > 1 ? void 0 : a ? A(e, i) : e, l = r.length - 1, s; l >= 0; l--)
21
+ (s = r[l]) && (t = (a ? s(e, i, t) : s(t)) || t);
22
+ return a && t && P(e, i, t), t;
23
23
  };
24
- const p = "pie-card";
25
- let t = class extends g {
24
+ const u = "pie-card";
25
+ let o = class extends g {
26
26
  constructor() {
27
27
  super(...arguments), this.tag = n.tag, this.variant = n.variant, this.disabled = n.disabled, this.isDraggable = n.isDraggable;
28
28
  }
@@ -35,24 +35,24 @@ let t = class extends g {
35
35
  * @private
36
36
  */
37
37
  renderAnchor(r) {
38
- const i = this.generatePaddingCSS(), {
39
- href: e,
38
+ const e = this.generatePaddingCSS(), {
39
+ href: i,
40
40
  rel: a,
41
- target: o,
41
+ target: t,
42
42
  disabled: l,
43
- aria: d
43
+ aria: s
44
44
  } = this;
45
- return h`
45
+ return m`
46
46
  <a
47
- class="${m(r)}"
47
+ class="${p(r)}"
48
48
  data-test-id="pie-card-link"
49
- href=${f(e && !l ? e : void 0)}
50
- target=${o || v}
49
+ href=${f(i && !l ? i : void 0)}
50
+ target=${t || v}
51
51
  rel=${a || v}
52
52
  role="link"
53
- aria-label=${(d == null ? void 0 : d.label) || v}
53
+ aria-label=${(s == null ? void 0 : s.label) || v}
54
54
  aria-disabled=${l ? "true" : "false"}
55
- style=${f(i)}>
55
+ style=${f(e)}>
56
56
  <slot @slotchange=${this.handleSlotChange}></slot>
57
57
  </a>`;
58
58
  }
@@ -68,11 +68,11 @@ let t = class extends g {
68
68
  */
69
69
  generatePaddingCSS() {
70
70
  const { padding: r } = this;
71
- let i = "";
71
+ let e = "";
72
72
  if (!r)
73
73
  return "";
74
- const e = r.split(",").map((a) => a.trim()).filter((a) => /^[a-g]$/.test(a));
75
- return e.length > 0 && e.length <= 2 && (i += `var(--dt-spacing-${e[0]})`, e.length > 1 && (i += ` var(--dt-spacing-${e[1]})`)), i ? `padding: ${i}` : "";
74
+ const i = r.split(",").map((a) => a.trim()).filter((a) => /^[a-g]$/.test(a));
75
+ return i.length > 0 && i.length <= 2 && (e += `var(--dt-spacing-${i[0]})`, i.length > 1 && (e += ` var(--dt-spacing-${i[1]})`)), e ? `padding: ${e}` : "";
76
76
  }
77
77
  /**
78
78
  * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
@@ -88,9 +88,9 @@ let t = class extends g {
88
88
  * @private
89
89
  */
90
90
  updateImagesOpacity() {
91
- this.assignedElements && this.assignedElements.forEach((i) => {
92
- const e = i.querySelectorAll("img");
93
- this.applyOpacityToImages(e);
91
+ this.assignedElements && this.assignedElements.forEach((e) => {
92
+ const i = e.querySelectorAll("img");
93
+ this.applyOpacityToImages(i);
94
94
  });
95
95
  const r = this.querySelectorAll("img");
96
96
  this.applyOpacityToImages(r);
@@ -102,8 +102,8 @@ let t = class extends g {
102
102
  * @private
103
103
  */
104
104
  applyOpacityToImages(r) {
105
- r.forEach((i) => {
106
- i.style.opacity = this.disabled ? "0.5" : "";
105
+ r.forEach((e) => {
106
+ e.style.opacity = this.disabled ? "0.5" : "";
107
107
  });
108
108
  }
109
109
  /**
@@ -117,24 +117,24 @@ let t = class extends g {
117
117
  render() {
118
118
  const {
119
119
  variant: r,
120
- disabled: i,
121
- tag: e,
120
+ disabled: e,
121
+ tag: i,
122
122
  aria: a,
123
- isDraggable: o
124
- } = this, l = this.generatePaddingCSS(), d = {
123
+ isDraggable: t
124
+ } = this, l = this.generatePaddingCSS(), s = {
125
125
  "c-card": !0,
126
126
  [`c-card--${r}`]: !0,
127
- "is-draggable": o,
128
- "is-disabled": i
127
+ "is-draggable": t,
128
+ "is-disabled": e
129
129
  };
130
- return e === "a" ? this.renderAnchor(d) : h`
130
+ return i === "a" ? this.renderAnchor(s) : m`
131
131
  <div
132
- class="${m(d)}"
132
+ class="${p(s)}"
133
133
  data-test-id="pie-card-button"
134
134
  role="button"
135
- tabindex=${i ? "-1" : "0"}
135
+ tabindex=${e ? "-1" : "0"}
136
136
  aria-label=${(a == null ? void 0 : a.label) || v}
137
- aria-disabled=${i ? "true" : "false"}
137
+ aria-disabled=${e ? "true" : "false"}
138
138
  style=${l || ""}
139
139
  @click=${this.onClickHandler}>
140
140
  <slot @slotchange=${this.handleSlotChange}></slot>
@@ -142,45 +142,45 @@ let t = class extends g {
142
142
  </div>`;
143
143
  }
144
144
  };
145
- t.styles = S(w);
146
- s([
145
+ o.styles = S(w);
146
+ d([
147
147
  c({ type: String }),
148
- u(p, O, n.tag)
149
- ], t.prototype, "tag", 2);
150
- s([
148
+ h(u, O, n.tag)
149
+ ], o.prototype, "tag", 2);
150
+ d([
151
151
  c({ type: String }),
152
- u(p, k, n.variant)
153
- ], t.prototype, "variant", 2);
154
- s([
152
+ h(u, k, n.variant)
153
+ ], o.prototype, "variant", 2);
154
+ d([
155
155
  c({ type: String, reflect: !0 })
156
- ], t.prototype, "href", 2);
157
- s([
156
+ ], o.prototype, "href", 2);
157
+ d([
158
158
  c({ type: String, reflect: !0 })
159
- ], t.prototype, "target", 2);
160
- s([
159
+ ], o.prototype, "target", 2);
160
+ d([
161
161
  c({ type: String, reflect: !0 })
162
- ], t.prototype, "rel", 2);
163
- s([
162
+ ], o.prototype, "rel", 2);
163
+ d([
164
164
  c({ type: Boolean })
165
- ], t.prototype, "disabled", 2);
166
- s([
165
+ ], o.prototype, "disabled", 2);
166
+ d([
167
167
  c({ type: Object })
168
- ], t.prototype, "aria", 2);
169
- s([
168
+ ], o.prototype, "aria", 2);
169
+ d([
170
170
  c({ type: Boolean })
171
- ], t.prototype, "isDraggable", 2);
172
- s([
171
+ ], o.prototype, "isDraggable", 2);
172
+ d([
173
173
  c({ type: String }),
174
- u(p, D, void 0)
175
- ], t.prototype, "padding", 2);
176
- s([
174
+ h(u, D, void 0)
175
+ ], o.prototype, "padding", 2);
176
+ d([
177
177
  $({ flatten: !0 })
178
- ], t.prototype, "assignedElements", 2);
179
- t = s([
178
+ ], o.prototype, "assignedElements", 2);
179
+ o = d([
180
180
  C("pie-card")
181
- ], t);
181
+ ], o);
182
182
  export {
183
- t as PieCard,
183
+ o as PieCard,
184
184
  n as defaultProps,
185
185
  D as paddingValues,
186
186
  O as tags,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-card",
3
- "version": "0.27.1",
3
+ "version": "0.27.2",
4
4
  "description": "PIE Design System Card built using Web Components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -44,8 +44,8 @@
44
44
  "license": "Apache-2.0",
45
45
  "devDependencies": {
46
46
  "@justeattakeaway/pie-components-config": "0.21.3",
47
- "@justeattakeaway/pie-css": "1.1.1",
48
- "@justeattakeaway/pie-monorepo-utils": "0.9.2",
47
+ "@justeattakeaway/pie-css": "1.1.3",
48
+ "@justeattakeaway/pie-monorepo-utils": "0.9.4",
49
49
  "@justeattakeaway/pie-wrapper-react": "0.14.5"
50
50
  },
51
51
  "dependencies": {
package/src/card.scss CHANGED
@@ -22,6 +22,8 @@
22
22
  outline: none;
23
23
  text-decoration: none;
24
24
 
25
+ @include p.disable-pointer-events-in-slotted-icons;
26
+
25
27
  &.is-disabled {
26
28
  --int-states-mixin-bg-color: var(--dt-color-disabled-01);
27
29