@justeattakeaway/pie-card 0.20.0 → 0.21.0

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 +44 -0
  2. package/dist/index.d.ts +27 -0
  3. package/dist/index.js +117 -75
  4. package/dist/react.d.ts +27 -0
  5. package/dist/react.js +13 -18
  6. package/package.json +2 -2
  7. package/src/card.scss +4 -4
  8. package/src/index.ts +57 -3
package/custom-elements.json CHANGED
@@ -163,6 +163,14 @@
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
+ },
166
174
  {
167
175
  "kind": "method",
168
176
  "name": "renderAnchor",
@@ -192,6 +200,42 @@
192
200
  }
193
201
  },
194
202
  "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"
203
+ },
204
+ {
205
+ "kind": "method",
206
+ "name": "handleSlotChange",
207
+ "privacy": "private",
208
+ "description": "Handles the slot change event and applies/removes opacity to images based on the `disabled` state."
209
+ },
210
+ {
211
+ "kind": "method",
212
+ "name": "updateImagesOpacity",
213
+ "privacy": "private",
214
+ "return": {
215
+ "type": {
216
+ "text": "void"
217
+ }
218
+ },
219
+ "description": "Updates opacity of all images (slotted and non-slotted) based on the `disabled` property."
220
+ },
221
+ {
222
+ "kind": "method",
223
+ "name": "applyOpacityToImages",
224
+ "privacy": "private",
225
+ "return": {
226
+ "type": {
227
+ "text": "void"
228
+ }
229
+ },
230
+ "parameters": [
231
+ {
232
+ "name": "images",
233
+ "type": {
234
+ "text": "NodeListOf<HTMLImageElement>"
235
+ }
236
+ }
237
+ ],
238
+ "description": "Applies or removes opacity from the given images based on the `disabled` property."
195
239
  }
196
240
  ],
197
241
  "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,7 @@ 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?;
72
74
  /**
73
75
  * Renders the card as an anchor element.
74
76
  *
@@ -86,6 +88,31 @@ export declare class PieCard extends LitElement implements CardProps {
86
88
  * @private
87
89
  */
88
90
  private generatePaddingCSS;
91
+ /**
92
+ * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
93
+ *
94
+ * @private
95
+ */
96
+ private handleSlotChange;
97
+ /**
98
+ * Updates opacity of all images (slotted and non-slotted) based on the `disabled` property.
99
+ *
100
+ * @private
101
+ */
102
+ private updateImagesOpacity;
103
+ /**
104
+ * Applies or removes opacity from the given images based on the `disabled` property.
105
+ *
106
+ * @param images
107
+ * @private
108
+ */
109
+ private applyOpacityToImages;
110
+ /**
111
+ * Observes changes in the `disabled` property and triggers the update of images' opacity.
112
+ *
113
+ * @param changedProperties
114
+ */
115
+ updated(changedProperties: PropertyValues<this>): void;
89
116
  render(): TemplateResult;
90
117
  static styles: CSSResult;
91
118
  }
package/dist/index.js CHANGED
@@ -1,45 +1,43 @@
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 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: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-dark);--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-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-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-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card.c-card--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.c-card--outline-inverse:hover:not(.c-card--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.c-card--outline-inverse:active:not(.c-card--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.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
- `, x = ["default", "outline", "inverse", "outline-inverse"], C = ["a", "button"], h = ["a", "b", "c", "d", "e", "f", "g"], P = h.flatMap((i) => [i, ...h.map((o) => `${i},${o}`)]), l = {
1
+ import { LitElement as y, html as u, nothing as v, unsafeCSS as S } from "lit";
2
+ import { classMap as f } from "lit/directives/class-map.js";
3
+ import { ifDefined as $ } from "lit/directives/if-defined.js";
4
+ import { property as d, queryAssignedElements as x } from "lit/decorators.js";
5
+ import { validPropertyValues as p, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
6
+ 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 = {
8
7
  disabled: !1,
9
8
  variant: "default",
10
9
  isDraggable: !1,
11
10
  tag: "button"
12
11
  };
13
- var D = Object.defineProperty, w = Object.getOwnPropertyDescriptor, d = (i, o, e, r) => {
14
- for (var a = r > 1 ? void 0 : r ? w(o, e) : o, n = i.length - 1, s; n >= 0; n--)
15
- (s = i[n]) && (a = (r ? s(o, e, a) : s(a)) || a);
16
- return r && a && D(o, e, a), a;
12
+ var A = Object.defineProperty, c = (l, r, a, o) => {
13
+ for (var e = void 0, n = l.length - 1, s; n >= 0; n--)
14
+ (s = l[n]) && (e = s(r, a, e) || e);
15
+ return e && A(r, a, e), e;
17
16
  };
18
- const b = "pie-card";
19
- class c extends y {
17
+ const g = "pie-card", b = class b extends y {
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 = i.tag, this.variant = i.variant, this.disabled = i.disabled, this.isDraggable = i.isDraggable;
22
20
  }
23
21
  /**
24
22
  * Renders the card as an anchor element.
25
23
  *
26
24
  * @private
27
25
  */
28
- renderAnchor(o) {
29
- var r;
30
- const e = this.generatePaddingCSS();
26
+ renderAnchor(r) {
27
+ var o;
28
+ const a = this.generatePaddingCSS();
31
29
  return u`
32
30
  <a
33
- class="${p(o)}"
31
+ class="${f(r)}"
34
32
  data-test-id="pie-card"
35
33
  ?disabled=${this.disabled}
36
34
  href=${this.href || ""}
37
35
  target=${this.target || v}
38
36
  rel=${this.rel || v}
39
37
  role="link"
40
- aria-label=${((r = this.aria) == null ? void 0 : r.label) || v}
38
+ aria-label=${((o = this.aria) == null ? void 0 : o.label) || v}
41
39
  aria-disabled=${this.disabled ? "true" : "false"}
42
- style=${S(e)}>
40
+ style=${$(a)}>
43
41
  <slot></slot>
44
42
  </div>
45
43
  </a>`;
@@ -55,76 +53,120 @@ class c extends y {
55
53
  * @private
56
54
  */
57
55
  generatePaddingCSS() {
58
- const { padding: o } = this;
59
- let e = "";
60
- if (!o)
56
+ const { padding: r } = this;
57
+ let a = "";
58
+ if (!r)
61
59
  return "";
62
- const r = o.split(",").map((a) => a.trim()).filter((a) => /^[a-g]$/.test(a));
63
- return r.length > 0 && r.length <= 2 && (e += `var(--dt-spacing-${r[0]})`, r.length > 1 && (e += ` var(--dt-spacing-${r[1]})`)), e ? `padding: ${e}` : "";
60
+ const o = r.split(",").map((e) => e.trim()).filter((e) => /^[a-g]$/.test(e));
61
+ 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}` : "";
62
+ }
63
+ /**
64
+ * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
65
+ *
66
+ * @private
67
+ */
68
+ handleSlotChange() {
69
+ this.updateImagesOpacity();
70
+ }
71
+ /**
72
+ * Updates opacity of all images (slotted and non-slotted) based on the `disabled` property.
73
+ *
74
+ * @private
75
+ */
76
+ updateImagesOpacity() {
77
+ this.assignedElements && this.assignedElements.forEach((a) => {
78
+ const o = a.querySelectorAll("img");
79
+ this.applyOpacityToImages(o);
80
+ });
81
+ const r = this.querySelectorAll("img");
82
+ this.applyOpacityToImages(r);
83
+ }
84
+ /**
85
+ * Applies or removes opacity from the given images based on the `disabled` property.
86
+ *
87
+ * @param images
88
+ * @private
89
+ */
90
+ applyOpacityToImages(r) {
91
+ r.forEach((a) => {
92
+ a.style.opacity = this.disabled ? "0.5" : "";
93
+ });
94
+ }
95
+ /**
96
+ * Observes changes in the `disabled` property and triggers the update of images' opacity.
97
+ *
98
+ * @param changedProperties
99
+ */
100
+ updated(r) {
101
+ r.has("disabled") && this.updateImagesOpacity();
64
102
  }
65
103
  render() {
66
104
  const {
67
- variant: o,
68
- disabled: e,
69
- tag: r,
70
- aria: a,
105
+ variant: r,
106
+ disabled: a,
107
+ tag: o,
108
+ aria: e,
71
109
  isDraggable: n
72
- } = this, s = this.generatePaddingCSS(), f = {
110
+ } = this, s = this.generatePaddingCSS(), h = {
73
111
  "c-card": !0,
74
- [`c-card--${o}`]: !0,
112
+ [`c-card--${r}`]: !0,
75
113
  "c-card--draggable": n,
76
- "c-card--disabled": e
114
+ "c-card--disabled": a
77
115
  };
78
- return r === "a" ? this.renderAnchor(f) : u`
116
+ return o === "a" ? this.renderAnchor(h) : u`
79
117
  <div
80
- class="${p(f)}"
118
+ class="${f(h)}"
81
119
  data-test-id="pie-card"
82
120
  role="button"
83
121
  tabindex="0"
84
- aria-label=${(a == null ? void 0 : a.label) || v}
85
- aria-disabled=${e ? "true" : "false"}
122
+ aria-label=${(e == null ? void 0 : e.label) || v}
123
+ aria-disabled=${a ? "true" : "false"}
86
124
  style=${s || ""}>
87
- <slot></slot>
125
+ <slot @slotchange=${this.handleSlotChange}></slot>
88
126
  </div>
89
127
  </div>`;
90
128
  }
91
- }
92
- c.styles = m(k);
93
- d([
94
- t(),
95
- g(b, C, l.tag)
96
- ], c.prototype, "tag", 2);
97
- d([
98
- t(),
99
- g(b, x, 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, P, void 0)
122
- ], c.prototype, "padding", 2);
123
- $(b, c);
129
+ };
130
+ b.styles = S(E);
131
+ let t = b;
132
+ c([
133
+ d(),
134
+ p(g, I, i.tag)
135
+ ], t.prototype, "tag");
136
+ c([
137
+ d(),
138
+ p(g, O, i.variant)
139
+ ], t.prototype, "variant");
140
+ c([
141
+ d({ type: String, reflect: !0 })
142
+ ], t.prototype, "href");
143
+ c([
144
+ d({ type: String, reflect: !0 })
145
+ ], t.prototype, "target");
146
+ c([
147
+ d({ type: String, reflect: !0 })
148
+ ], t.prototype, "rel");
149
+ c([
150
+ d({ type: Boolean })
151
+ ], t.prototype, "disabled");
152
+ c([
153
+ d({ type: Object })
154
+ ], t.prototype, "aria");
155
+ c([
156
+ d({ type: Boolean })
157
+ ], t.prototype, "isDraggable");
158
+ c([
159
+ d({ type: String }),
160
+ p(g, k, void 0)
161
+ ], t.prototype, "padding");
162
+ c([
163
+ x({ flatten: !0 })
164
+ ], t.prototype, "assignedElements");
165
+ C(g, t);
124
166
  export {
125
- c as PieCard,
126
- l as defaultProps,
127
- P as paddingValues,
128
- C as tags,
129
- x as variants
167
+ t as PieCard,
168
+ i as defaultProps,
169
+ k as paddingValues,
170
+ I as tags,
171
+ O as variants
130
172
  };
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,7 @@ 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?;
75
77
  /**
76
78
  * Renders the card as an anchor element.
77
79
  *
@@ -89,6 +91,31 @@ declare class PieCard_2 extends LitElement implements CardProps {
89
91
  * @private
90
92
  */
91
93
  private generatePaddingCSS;
94
+ /**
95
+ * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
96
+ *
97
+ * @private
98
+ */
99
+ private handleSlotChange;
100
+ /**
101
+ * Updates opacity of all images (slotted and non-slotted) based on the `disabled` property.
102
+ *
103
+ * @private
104
+ */
105
+ private updateImagesOpacity;
106
+ /**
107
+ * Applies or removes opacity from the given images based on the `disabled` property.
108
+ *
109
+ * @param images
110
+ * @private
111
+ */
112
+ private applyOpacityToImages;
113
+ /**
114
+ * Observes changes in the `disabled` property and triggers the update of images' opacity.
115
+ *
116
+ * @param changedProperties
117
+ */
118
+ updated(changedProperties: PropertyValues<this>): void;
92
119
  render(): TemplateResult;
93
120
  static styles: CSSResult;
94
121
  }
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.0",
3
+ "version": "0.21.0",
4
4
  "description": "PIE Design System Card built using Web Components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -37,7 +37,7 @@
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
  },
package/src/card.scss CHANGED
@@ -70,21 +70,21 @@
70
70
  }
71
71
 
72
72
  &.c-card--inverse {
73
- --card-bg-color: var(--dt-color-container-dark);
73
+ --card-bg-color: var(--dt-color-container-inverse);
74
74
  --card-color: var(--dt-color-content-inverse);
75
75
 
76
76
  box-shadow: var(--dt-elevation-dark-card);
77
77
 
78
- @include card-interactive-states('--dt-color-container-dark', 'inverse');
78
+ @include card-interactive-states('--dt-color-container-inverse', 'inverse');
79
79
  }
80
80
 
81
81
  &.c-card--outline-inverse {
82
- --card-bg-color: var(--dt-color-container-dark);
82
+ --card-bg-color: var(--dt-color-container-inverse);
83
83
  --card-color: var(--dt-color-content-inverse);
84
84
 
85
85
  border-color: var(--dt-color-border-inverse);
86
86
 
87
- @include card-interactive-states('--dt-color-container-dark', 'inverse');
87
+ @include card-interactive-states('--dt-color-container-inverse', 'inverse');
88
88
  }
89
89
 
90
90
  &.c-card--inverse.c-card--disabled,
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,9 @@ 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
+
56
59
  /**
57
60
  * Renders the card as an anchor element.
58
61
  *
@@ -117,6 +120,57 @@ export class PieCard extends LitElement implements CardProps {
117
120
  return `padding: ${paddingCSS}`;
118
121
  }
119
122
 
123
+ /**
124
+ * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
125
+ *
126
+ * @private
127
+ */
128
+ private handleSlotChange () {
129
+ this.updateImagesOpacity();
130
+ }
131
+
132
+ /**
133
+ * Updates opacity of all images (slotted and non-slotted) based on the `disabled` property.
134
+ *
135
+ * @private
136
+ */
137
+ private updateImagesOpacity (): void {
138
+ if (this.assignedElements) {
139
+ // Handle images nested inside slotted elements
140
+ this.assignedElements.forEach((element) => {
141
+ const images = element.querySelectorAll('img');
142
+ this.applyOpacityToImages(images);
143
+ });
144
+ }
145
+
146
+ // Handle directly slotted images
147
+ const directImages = this.querySelectorAll('img');
148
+ this.applyOpacityToImages(directImages);
149
+ }
150
+
151
+ /**
152
+ * Applies or removes opacity from the given images based on the `disabled` property.
153
+ *
154
+ * @param images
155
+ * @private
156
+ */
157
+ private applyOpacityToImages (images: NodeListOf<HTMLImageElement>): void {
158
+ images.forEach((img) => {
159
+ img.style.opacity = this.disabled ? '0.5' : '';
160
+ });
161
+ }
162
+
163
+ /**
164
+ * Observes changes in the `disabled` property and triggers the update of images' opacity.
165
+ *
166
+ * @param changedProperties
167
+ */
168
+ updated (changedProperties: PropertyValues<this>) : void {
169
+ if (changedProperties.has('disabled')) {
170
+ this.updateImagesOpacity(); // Re-apply styles when disabled state changes
171
+ }
172
+ }
173
+
120
174
  render () {
121
175
  const {
122
176
  variant,
@@ -146,7 +200,7 @@ export class PieCard extends LitElement implements CardProps {
146
200
  aria-label=${aria?.label || nothing}
147
201
  aria-disabled=${disabled ? 'true' : 'false'}
148
202
  style=${paddingCSS || ''}>
149
- <slot></slot>
203
+ <slot @slotchange=${this.handleSlotChange}></slot>
150
204
  </div>
151
205
  </div>`;
152
206
  }