@justeattakeaway/pie-card 0.20.1 → 0.21.1

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 (8) hide show
  1. package/custom-elements.json +57 -0
  2. package/dist/index.d.ts +28 -0
  3. package/dist/index.js +134 -85
  4. package/dist/react.d.ts +28 -0
  5. package/dist/react.js +13 -18
  6. package/package.json +3 -3
  7. package/src/card.scss +4 -4
  8. package/src/index.ts +77 -13
package/custom-elements.json CHANGED
@@ -163,6 +163,27 @@
163
163
  "privacy": "public",
164
164
  "attribute": "padding"
165
165
  },
166
+ {
167
+ "kind": "field",
168
+ "name": "assignedElements",
169
+ "type": {
170
+ "text": "HTMLElement[] | undefined"
171
+ },
172
+ "privacy": "private"
173
+ },
174
+ {
175
+ "kind": "method",
176
+ "name": "onClickHandler",
177
+ "privacy": "private",
178
+ "parameters": [
179
+ {
180
+ "name": "event",
181
+ "type": {
182
+ "text": "Event"
183
+ }
184
+ }
185
+ ]
186
+ },
166
187
  {
167
188
  "kind": "method",
168
189
  "name": "renderAnchor",
@@ -192,6 +213,42 @@
192
213
  }
193
214
  },
194
215
  "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"
216
+ },
217
+ {
218
+ "kind": "method",
219
+ "name": "handleSlotChange",
220
+ "privacy": "private",
221
+ "description": "Handles the slot change event and applies/removes opacity to images based on the `disabled` state."
222
+ },
223
+ {
224
+ "kind": "method",
225
+ "name": "updateImagesOpacity",
226
+ "privacy": "private",
227
+ "return": {
228
+ "type": {
229
+ "text": "void"
230
+ }
231
+ },
232
+ "description": "Updates opacity of all images (slotted and non-slotted) based on the `disabled` property."
233
+ },
234
+ {
235
+ "kind": "method",
236
+ "name": "applyOpacityToImages",
237
+ "privacy": "private",
238
+ "return": {
239
+ "type": {
240
+ "text": "void"
241
+ }
242
+ },
243
+ "parameters": [
244
+ {
245
+ "name": "images",
246
+ "type": {
247
+ "text": "NodeListOf<HTMLImageElement>"
248
+ }
249
+ }
250
+ ],
251
+ "description": "Applies or removes opacity from the given images based on the `disabled` property."
195
252
  }
196
253
  ],
197
254
  "attributes": [
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
3
  import type { LitElement } from 'lit';
4
+ import type { PropertyValues } from 'lit';
4
5
  import type { TemplateResult } from 'lit';
5
6
 
6
7
  export declare type AriaProps = {
@@ -69,6 +70,8 @@ export declare class PieCard extends LitElement implements CardProps {
69
70
  aria?: CardProps['aria'];
70
71
  isDraggable: boolean;
71
72
  padding?: CardProps['padding'];
73
+ private assignedElements?;
74
+ private onClickHandler;
72
75
  /**
73
76
  * Renders the card as an anchor element.
74
77
  *
@@ -86,6 +89,31 @@ export declare class PieCard extends LitElement implements CardProps {
86
89
  * @private
87
90
  */
88
91
  private generatePaddingCSS;
92
+ /**
93
+ * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
94
+ *
95
+ * @private
96
+ */
97
+ private handleSlotChange;
98
+ /**
99
+ * Updates opacity of all images (slotted and non-slotted) based on the `disabled` property.
100
+ *
101
+ * @private
102
+ */
103
+ private updateImagesOpacity;
104
+ /**
105
+ * Applies or removes opacity from the given images based on the `disabled` property.
106
+ *
107
+ * @param images
108
+ * @private
109
+ */
110
+ private applyOpacityToImages;
111
+ /**
112
+ * Observes changes in the `disabled` property and triggers the update of images' opacity.
113
+ *
114
+ * @param changedProperties
115
+ */
116
+ updated(changedProperties: PropertyValues<this>): void;
89
117
  render(): TemplateResult;
90
118
  static styles: CSSResult;
91
119
  }
package/dist/index.js CHANGED
@@ -1,47 +1,51 @@
1
- import { unsafeCSS as m, LitElement as y, html as u, nothing as v } from "lit";
2
- import { classMap as p } from "lit/directives/class-map.js";
3
- import { ifDefined as S } from "lit/directives/if-defined.js";
4
- import { property as t } from "lit/decorators.js";
5
- import { validPropertyValues as g, defineCustomElement as $ } from "@justeattakeaway/pie-webc-core";
6
- const x = `.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)}
7
- `, C = ["default", "outline", "inverse", "outline-inverse"], P = ["a", "button"], h = ["a", "b", "c", "d", "e", "f", "g"], D = h.flatMap((i) => [i, ...h.map((e) => `${i},${e}`)]), l = {
1
+ import { LitElement as S, html as u, nothing as g, unsafeCSS as $ } from "lit";
2
+ import { classMap as f } from "lit/directives/class-map.js";
3
+ import { ifDefined as m } from "lit/directives/if-defined.js";
4
+ import { property as d, queryAssignedElements as C } from "lit/decorators.js";
5
+ import { validPropertyValues as b, defineCustomElement as x } from "@justeattakeaway/pie-webc-core";
6
+ const k = ".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.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)}.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}", E = ["default", "outline", "inverse", "outline-inverse"], O = ["a", "button"], y = ["a", "b", "c", "d", "e", "f", "g"], D = y.flatMap((v) => [v, ...y.map((r) => `${v},${r}`)]), s = {
8
7
  disabled: !1,
9
8
  variant: "default",
10
9
  isDraggable: !1,
11
10
  tag: "button"
12
11
  };
13
- var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, d = (i, e, o, r) => {
14
- for (var a = r > 1 ? void 0 : r ? _(e, o) : e, n = i.length - 1, s; n >= 0; n--)
15
- (s = i[n]) && (a = (r ? s(e, o, a) : s(a)) || a);
16
- return r && a && w(e, o, a), a;
12
+ var I = Object.defineProperty, c = (v, r, a, o) => {
13
+ for (var e = void 0, i = v.length - 1, l; i >= 0; i--)
14
+ (l = v[i]) && (e = l(r, a, e) || e);
15
+ return e && I(r, a, e), e;
17
16
  };
18
- const b = "pie-card";
19
- class c extends y {
17
+ const p = "pie-card", h = class h extends S {
20
18
  constructor() {
21
- super(...arguments), this.tag = l.tag, this.variant = l.variant, this.disabled = l.disabled, this.isDraggable = l.isDraggable;
19
+ super(...arguments), this.tag = s.tag, this.variant = s.variant, this.disabled = s.disabled, this.isDraggable = s.isDraggable;
20
+ }
21
+ onClickHandler(r) {
22
+ this.disabled && (r.preventDefault(), r.stopPropagation());
22
23
  }
23
24
  /**
24
25
  * Renders the card as an anchor element.
25
26
  *
26
27
  * @private
27
28
  */
28
- renderAnchor(e) {
29
- var r;
30
- const o = this.generatePaddingCSS();
29
+ renderAnchor(r) {
30
+ const a = this.generatePaddingCSS(), {
31
+ href: o,
32
+ rel: e,
33
+ target: i,
34
+ disabled: l,
35
+ aria: n
36
+ } = this;
31
37
  return u`
32
38
  <a
33
- class="${p(e)}"
39
+ class="${f(r)}"
34
40
  data-test-id="pie-card"
35
- ?disabled=${this.disabled}
36
- href=${this.href || ""}
37
- target=${this.target || v}
38
- rel=${this.rel || v}
41
+ href=${m(o && !l ? o : void 0)}
42
+ target=${i || g}
43
+ rel=${e || g}
39
44
  role="link"
40
- aria-label=${((r = this.aria) == null ? void 0 : r.label) || v}
41
- aria-disabled=${this.disabled ? "true" : "false"}
42
- style=${S(o)}>
43
- <slot></slot>
44
- </div>
45
+ aria-label=${(n == null ? void 0 : n.label) || g}
46
+ aria-disabled=${l ? "true" : "false"}
47
+ style=${m(a)}>
48
+ <slot @slotchange=${this.handleSlotChange}></slot>
45
49
  </a>`;
46
50
  }
47
51
  /**
@@ -55,76 +59,121 @@ class c extends y {
55
59
  * @private
56
60
  */
57
61
  generatePaddingCSS() {
58
- const { padding: e } = this;
59
- let o = "";
60
- if (!e)
62
+ const { padding: r } = this;
63
+ let a = "";
64
+ if (!r)
61
65
  return "";
62
- const r = e.split(",").map((a) => a.trim()).filter((a) => /^[a-g]$/.test(a));
63
- return r.length > 0 && r.length <= 2 && (o += `var(--dt-spacing-${r[0]})`, r.length > 1 && (o += ` var(--dt-spacing-${r[1]})`)), o ? `padding: ${o}` : "";
66
+ const o = r.split(",").map((e) => e.trim()).filter((e) => /^[a-g]$/.test(e));
67
+ 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}` : "";
68
+ }
69
+ /**
70
+ * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
71
+ *
72
+ * @private
73
+ */
74
+ handleSlotChange() {
75
+ this.updateImagesOpacity();
76
+ }
77
+ /**
78
+ * Updates opacity of all images (slotted and non-slotted) based on the `disabled` property.
79
+ *
80
+ * @private
81
+ */
82
+ updateImagesOpacity() {
83
+ this.assignedElements && this.assignedElements.forEach((a) => {
84
+ const o = a.querySelectorAll("img");
85
+ this.applyOpacityToImages(o);
86
+ });
87
+ const r = this.querySelectorAll("img");
88
+ this.applyOpacityToImages(r);
89
+ }
90
+ /**
91
+ * Applies or removes opacity from the given images based on the `disabled` property.
92
+ *
93
+ * @param images
94
+ * @private
95
+ */
96
+ applyOpacityToImages(r) {
97
+ r.forEach((a) => {
98
+ a.style.opacity = this.disabled ? "0.5" : "";
99
+ });
100
+ }
101
+ /**
102
+ * Observes changes in the `disabled` property and triggers the update of images' opacity.
103
+ *
104
+ * @param changedProperties
105
+ */
106
+ updated(r) {
107
+ r.has("disabled") && this.updateImagesOpacity();
64
108
  }
65
109
  render() {
66
110
  const {
67
- variant: e,
68
- disabled: o,
69
- tag: r,
70
- aria: a,
71
- isDraggable: n
72
- } = this, s = this.generatePaddingCSS(), f = {
111
+ variant: r,
112
+ disabled: a,
113
+ tag: o,
114
+ aria: e,
115
+ isDraggable: i
116
+ } = this, l = this.generatePaddingCSS(), n = {
73
117
  "c-card": !0,
74
- [`c-card--${e}`]: !0,
75
- "c-card--draggable": n,
76
- "c-card--disabled": o
118
+ [`c-card--${r}`]: !0,
119
+ "c-card--draggable": i,
120
+ "c-card--disabled": a
77
121
  };
78
- return r === "a" ? this.renderAnchor(f) : u`
122
+ return o === "a" ? this.renderAnchor(n) : u`
79
123
  <div
80
- class="${p(f)}"
124
+ class="${f(n)}"
81
125
  data-test-id="pie-card"
82
126
  role="button"
83
- tabindex="0"
84
- aria-label=${(a == null ? void 0 : a.label) || v}
85
- aria-disabled=${o ? "true" : "false"}
86
- style=${s || ""}>
87
- <slot></slot>
127
+ tabindex=${a ? "-1" : "0"}
128
+ aria-label=${(e == null ? void 0 : e.label) || g}
129
+ aria-disabled=${a ? "true" : "false"}
130
+ style=${l || ""}
131
+ @click=${this.onClickHandler}>
132
+ <slot @slotchange=${this.handleSlotChange}></slot>
88
133
  </div>
89
134
  </div>`;
90
135
  }
91
- }
92
- c.styles = m(x);
93
- d([
94
- t(),
95
- g(b, P, l.tag)
96
- ], c.prototype, "tag", 2);
97
- d([
98
- t(),
99
- g(b, C, l.variant)
100
- ], c.prototype, "variant", 2);
101
- d([
102
- t({ type: String, reflect: !0 })
103
- ], c.prototype, "href", 2);
104
- d([
105
- t({ type: String, reflect: !0 })
106
- ], c.prototype, "target", 2);
107
- d([
108
- t({ type: String, reflect: !0 })
109
- ], c.prototype, "rel", 2);
110
- d([
111
- t({ type: Boolean })
112
- ], c.prototype, "disabled", 2);
113
- d([
114
- t({ type: Object })
115
- ], c.prototype, "aria", 2);
116
- d([
117
- t({ type: Boolean })
118
- ], c.prototype, "isDraggable", 2);
119
- d([
120
- t({ type: String }),
121
- g(b, D, void 0)
122
- ], c.prototype, "padding", 2);
123
- $(b, c);
136
+ };
137
+ h.styles = $(k);
138
+ let t = h;
139
+ c([
140
+ d(),
141
+ b(p, O, s.tag)
142
+ ], t.prototype, "tag");
143
+ c([
144
+ d(),
145
+ b(p, E, s.variant)
146
+ ], t.prototype, "variant");
147
+ c([
148
+ d({ type: String, reflect: !0 })
149
+ ], t.prototype, "href");
150
+ c([
151
+ d({ type: String, reflect: !0 })
152
+ ], t.prototype, "target");
153
+ c([
154
+ d({ type: String, reflect: !0 })
155
+ ], t.prototype, "rel");
156
+ c([
157
+ d({ type: Boolean })
158
+ ], t.prototype, "disabled");
159
+ c([
160
+ d({ type: Object })
161
+ ], t.prototype, "aria");
162
+ c([
163
+ d({ type: Boolean })
164
+ ], t.prototype, "isDraggable");
165
+ c([
166
+ d({ type: String }),
167
+ b(p, D, void 0)
168
+ ], t.prototype, "padding");
169
+ c([
170
+ C({ flatten: !0 })
171
+ ], t.prototype, "assignedElements");
172
+ x(p, t);
124
173
  export {
125
- c as PieCard,
126
- l as defaultProps,
174
+ t as PieCard,
175
+ s as defaultProps,
127
176
  D as paddingValues,
128
- P as tags,
129
- C as variants
177
+ O as tags,
178
+ E as variants
130
179
  };
package/dist/react.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
3
  import type { LitElement } from 'lit';
4
+ import type { PropertyValues } from 'lit';
4
5
  import * as React_2 from 'react';
5
6
  import type { TemplateResult } from 'lit';
6
7
 
@@ -72,6 +73,8 @@ declare class PieCard_2 extends LitElement implements CardProps {
72
73
  aria?: CardProps['aria'];
73
74
  isDraggable: boolean;
74
75
  padding?: CardProps['padding'];
76
+ private assignedElements?;
77
+ private onClickHandler;
75
78
  /**
76
79
  * Renders the card as an anchor element.
77
80
  *
@@ -89,6 +92,31 @@ declare class PieCard_2 extends LitElement implements CardProps {
89
92
  * @private
90
93
  */
91
94
  private generatePaddingCSS;
95
+ /**
96
+ * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
97
+ *
98
+ * @private
99
+ */
100
+ private handleSlotChange;
101
+ /**
102
+ * Updates opacity of all images (slotted and non-slotted) based on the `disabled` property.
103
+ *
104
+ * @private
105
+ */
106
+ private updateImagesOpacity;
107
+ /**
108
+ * Applies or removes opacity from the given images based on the `disabled` property.
109
+ *
110
+ * @param images
111
+ * @private
112
+ */
113
+ private applyOpacityToImages;
114
+ /**
115
+ * Observes changes in the `disabled` property and triggers the update of images' opacity.
116
+ *
117
+ * @param changedProperties
118
+ */
119
+ updated(changedProperties: PropertyValues<this>): void;
92
120
  render(): TemplateResult;
93
121
  static styles: CSSResult;
94
122
  }
package/dist/react.js CHANGED
@@ -1,23 +1,18 @@
1
- import * as r from "react";
2
- import { createComponent as a } from "@lit/react";
3
- import { PieCard as e } from "./index.js";
4
- import { defaultProps as f, paddingValues as l, tags as g, variants as u } from "./index.js";
5
- import "lit";
6
- import "lit/directives/class-map.js";
7
- import "lit/directives/if-defined.js";
8
- import "lit/decorators.js";
9
- import "@justeattakeaway/pie-webc-core";
10
- const t = a({
1
+ import * as a from "react";
2
+ import { createComponent as e } from "@lit/react";
3
+ import { PieCard as r } from "./index.js";
4
+ import { defaultProps as p, paddingValues as n, tags as c, variants as C } from "./index.js";
5
+ const t = e({
11
6
  displayName: "PieCard",
12
- elementClass: e,
13
- react: r,
7
+ elementClass: r,
8
+ react: a,
14
9
  tagName: "pie-card",
15
10
  events: {}
16
- }), c = t;
11
+ }), s = t;
17
12
  export {
18
- c as PieCard,
19
- f as defaultProps,
20
- l as paddingValues,
21
- g as tags,
22
- u as variants
13
+ s as PieCard,
14
+ p as defaultProps,
15
+ n as paddingValues,
16
+ c as tags,
17
+ C as variants
23
18
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-card",
3
- "version": "0.20.1",
3
+ "version": "0.21.1",
4
4
  "description": "PIE Design System Card built using Web Components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -37,12 +37,12 @@
37
37
  "devDependencies": {
38
38
  "@custom-elements-manifest/analyzer": "0.9.0",
39
39
  "@justeattakeaway/pie-components-config": "0.18.0",
40
- "@justeattakeaway/pie-css": "0.12.1",
40
+ "@justeattakeaway/pie-css": "0.13.0",
41
41
  "@justeattakeaway/pie-wrapper-react": "0.14.1",
42
42
  "cem-plugin-module-file-extensions": "0.0.5"
43
43
  },
44
44
  "dependencies": {
45
- "@justeattakeaway/pie-webc-core": "0.24.0"
45
+ "@justeattakeaway/pie-webc-core": "0.24.1"
46
46
  },
47
47
  "volta": {
48
48
  "extends": "../../../package.json"
package/src/card.scss CHANGED
@@ -39,10 +39,6 @@
39
39
  outline: none;
40
40
  text-decoration: none;
41
41
 
42
- &:focus-visible {
43
- @include p.focus;
44
- }
45
-
46
42
  &.c-card--disabled {
47
43
  --card-bg-color: var(--dt-color-disabled-01);
48
44
 
@@ -95,4 +91,8 @@
95
91
  &.c-card--draggable {
96
92
  @extend %has-grab-cursor;
97
93
  }
94
+
95
+ &:focus-visible {
96
+ @include p.focus;
97
+ }
98
98
  }
package/src/index.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import {
2
- html, LitElement, unsafeCSS, nothing, TemplateResult,
2
+ html, LitElement, unsafeCSS, nothing, TemplateResult, type PropertyValues,
3
3
  } from 'lit';
4
4
  import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
5
5
  import { ifDefined } from 'lit/directives/if-defined.js';
6
- import { property } from 'lit/decorators.js';
6
+ import { property, queryAssignedElements } from 'lit/decorators.js';
7
7
  import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
8
8
  import styles from './card.scss?inline';
9
9
  import {
@@ -53,6 +53,17 @@ export class PieCard extends LitElement implements CardProps {
53
53
  @validPropertyValues(componentSelector, paddingValues, undefined)
54
54
  public padding?: CardProps['padding'];
55
55
 
56
+ @queryAssignedElements({ flatten: true })
57
+ private assignedElements?: HTMLElement[];
58
+
59
+ private onClickHandler (event: Event) {
60
+ if (this.disabled) {
61
+ // needed to intercept/prevent click events when the card is disabled.
62
+ event.preventDefault();
63
+ event.stopPropagation();
64
+ }
65
+ }
66
+
56
67
  /**
57
68
  * Renders the card as an anchor element.
58
69
  *
@@ -60,21 +71,22 @@ export class PieCard extends LitElement implements CardProps {
60
71
  */
61
72
  private renderAnchor (classes: ClassInfo): TemplateResult {
62
73
  const paddingCSS = this.generatePaddingCSS();
74
+ const {
75
+ href, rel, target, disabled, aria,
76
+ } = this;
63
77
 
64
78
  return html`
65
79
  <a
66
80
  class="${classMap(classes)}"
67
81
  data-test-id="pie-card"
68
- ?disabled=${this.disabled}
69
- href=${this.href || ''}
70
- target=${this.target || nothing}
71
- rel=${this.rel || nothing}
82
+ href=${ifDefined(href && !disabled ? href : undefined)}
83
+ target=${target || nothing}
84
+ rel=${rel || nothing}
72
85
  role="link"
73
- aria-label=${this.aria?.label || nothing}
74
- aria-disabled=${this.disabled ? 'true' : 'false'}
86
+ aria-label=${aria?.label || nothing}
87
+ aria-disabled=${disabled ? 'true' : 'false'}
75
88
  style=${ifDefined(paddingCSS)}>
76
- <slot></slot>
77
- </div>
89
+ <slot @slotchange=${this.handleSlotChange}></slot>
78
90
  </a>`;
79
91
  }
80
92
 
@@ -117,6 +129,57 @@ export class PieCard extends LitElement implements CardProps {
117
129
  return `padding: ${paddingCSS}`;
118
130
  }
119
131
 
132
+ /**
133
+ * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
134
+ *
135
+ * @private
136
+ */
137
+ private handleSlotChange () {
138
+ this.updateImagesOpacity();
139
+ }
140
+
141
+ /**
142
+ * Updates opacity of all images (slotted and non-slotted) based on the `disabled` property.
143
+ *
144
+ * @private
145
+ */
146
+ private updateImagesOpacity (): void {
147
+ if (this.assignedElements) {
148
+ // Handle images nested inside slotted elements
149
+ this.assignedElements.forEach((element) => {
150
+ const images = element.querySelectorAll('img');
151
+ this.applyOpacityToImages(images);
152
+ });
153
+ }
154
+
155
+ // Handle directly slotted images
156
+ const directImages = this.querySelectorAll('img');
157
+ this.applyOpacityToImages(directImages);
158
+ }
159
+
160
+ /**
161
+ * Applies or removes opacity from the given images based on the `disabled` property.
162
+ *
163
+ * @param images
164
+ * @private
165
+ */
166
+ private applyOpacityToImages (images: NodeListOf<HTMLImageElement>): void {
167
+ images.forEach((img) => {
168
+ img.style.opacity = this.disabled ? '0.5' : '';
169
+ });
170
+ }
171
+
172
+ /**
173
+ * Observes changes in the `disabled` property and triggers the update of images' opacity.
174
+ *
175
+ * @param changedProperties
176
+ */
177
+ updated (changedProperties: PropertyValues<this>) : void {
178
+ if (changedProperties.has('disabled')) {
179
+ this.updateImagesOpacity(); // Re-apply styles when disabled state changes
180
+ }
181
+ }
182
+
120
183
  render () {
121
184
  const {
122
185
  variant,
@@ -142,11 +205,12 @@ export class PieCard extends LitElement implements CardProps {
142
205
  class="${classMap(classes)}"
143
206
  data-test-id="pie-card"
144
207
  role="button"
145
- tabindex="0"
208
+ tabindex=${disabled ? '-1' : '0'}
146
209
  aria-label=${aria?.label || nothing}
147
210
  aria-disabled=${disabled ? 'true' : 'false'}
148
- style=${paddingCSS || ''}>
149
- <slot></slot>
211
+ style=${paddingCSS || ''}
212
+ @click=${this.onClickHandler}>
213
+ <slot @slotchange=${this.handleSlotChange}></slot>
150
214
  </div>
151
215
  </div>`;
152
216
  }