@justeattakeaway/pie-card 0.24.1 → 0.25.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 (3) hide show
  1. package/dist/index.js +91 -95
  2. package/package.json +4 -4
  3. package/src/index.ts +2 -3
package/dist/index.js CHANGED
@@ -1,35 +1,30 @@
1
- import { LitElement as S, nothing as b, html as m, unsafeCSS as $ } from "lit";
2
- import { property as c, queryAssignedElements as k } from "lit/decorators.js";
3
- import { classMap as h } from "lit/directives/class-map.js";
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";
4
3
  import { ifDefined as f } from "lit/directives/if-defined.js";
5
- import { validPropertyValues as u, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
6
- var w = Object.defineProperty, E = (l, r, i, a) => {
7
- for (var e = void 0, o = l.length - 1, d; o >= 0; o--)
8
- (d = l[o]) && (e = d(r, i, e) || e);
9
- return e && w(r, i, e), e;
10
- };
11
- class y extends S {
12
- constructor() {
13
- super(...arguments), this.v = "0.24.1";
4
+ import { property as s, queryAssignedElements as $ } from "lit/decorators.js";
5
+ import { validPropertyValues as u, safeCustomElement as C } from "@justeattakeaway/pie-webc-core";
6
+ const b = class b extends y {
7
+ willUpdate() {
8
+ this.getAttribute("v") || this.setAttribute("v", b.v);
14
9
  }
15
- }
16
- E([
17
- c({ type: String, reflect: !0 })
18
- ], y.prototype, "v");
19
- const O = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.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;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 ::slotted(*){color:var(--dt-color-content-disabled)}.c-card.is-disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-card)}.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-card)}.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}", P = ["default", "outline", "inverse", "outline-inverse"], D = ["a", "button"], x = ["a", "b", "c", "d", "e", "f", "g"], I = x.flatMap((l) => [l, ...x.map((r) => `${l},${r}`)]), v = {
10
+ };
11
+ b.v = "0.25.0";
12
+ let g = b;
13
+ const k = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.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;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 ::slotted(*){color:var(--dt-color-content-disabled)}.c-card.is-disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-card)}.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-card)}.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}", w = ["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 = {
20
14
  disabled: !1,
21
15
  variant: "default",
22
16
  isDraggable: !1,
23
17
  tag: "button"
24
18
  };
25
- var _ = Object.defineProperty, s = (l, r, i, a) => {
26
- for (var e = void 0, o = l.length - 1, d; o >= 0; o--)
27
- (d = l[o]) && (e = d(r, i, e) || e);
28
- return e && _(r, i, e), e;
19
+ var P = Object.defineProperty, A = Object.getOwnPropertyDescriptor, d = (r, e, i, a) => {
20
+ for (var o = a > 1 ? void 0 : a ? A(e, i) : e, l = r.length - 1, c; l >= 0; l--)
21
+ (c = r[l]) && (o = (a ? c(e, i, o) : c(o)) || o);
22
+ return a && o && P(e, i, o), o;
29
23
  };
30
- const g = "pie-card", p = class p extends y {
24
+ const p = "pie-card";
25
+ let t = class extends g {
31
26
  constructor() {
32
- super(...arguments), this.tag = v.tag, this.variant = v.variant, this.disabled = v.disabled, this.isDraggable = v.isDraggable;
27
+ super(...arguments), this.tag = n.tag, this.variant = n.variant, this.disabled = n.disabled, this.isDraggable = n.isDraggable;
33
28
  }
34
29
  onClickHandler(r) {
35
30
  this.disabled && (r.preventDefault(), r.stopPropagation());
@@ -40,24 +35,24 @@ const g = "pie-card", p = class p extends y {
40
35
  * @private
41
36
  */
42
37
  renderAnchor(r) {
43
- const i = this.generatePaddingCSS(), {
44
- href: a,
45
- rel: e,
38
+ const e = this.generatePaddingCSS(), {
39
+ href: i,
40
+ rel: a,
46
41
  target: o,
47
- disabled: d,
48
- aria: n
42
+ disabled: l,
43
+ aria: c
49
44
  } = this;
50
- return m`
45
+ return h`
51
46
  <a
52
- class="${h(r)}"
47
+ class="${m(r)}"
53
48
  data-test-id="pie-card-link"
54
- href=${f(a && !d ? a : void 0)}
55
- target=${o || b}
56
- rel=${e || b}
49
+ href=${f(i && !l ? i : void 0)}
50
+ target=${o || v}
51
+ rel=${a || v}
57
52
  role="link"
58
- aria-label=${(n == null ? void 0 : n.label) || b}
59
- aria-disabled=${d ? "true" : "false"}
60
- style=${f(i)}>
53
+ aria-label=${(c == null ? void 0 : c.label) || v}
54
+ aria-disabled=${l ? "true" : "false"}
55
+ style=${f(e)}>
61
56
  <slot @slotchange=${this.handleSlotChange}></slot>
62
57
  </a>`;
63
58
  }
@@ -73,11 +68,11 @@ const g = "pie-card", p = class p extends y {
73
68
  */
74
69
  generatePaddingCSS() {
75
70
  const { padding: r } = this;
76
- let i = "";
71
+ let e = "";
77
72
  if (!r)
78
73
  return "";
79
- const a = r.split(",").map((e) => e.trim()).filter((e) => /^[a-g]$/.test(e));
80
- return a.length > 0 && a.length <= 2 && (i += `var(--dt-spacing-${a[0]})`, a.length > 1 && (i += ` var(--dt-spacing-${a[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}` : "";
81
76
  }
82
77
  /**
83
78
  * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
@@ -93,9 +88,9 @@ const g = "pie-card", p = class p extends y {
93
88
  * @private
94
89
  */
95
90
  updateImagesOpacity() {
96
- this.assignedElements && this.assignedElements.forEach((i) => {
97
- const a = i.querySelectorAll("img");
98
- this.applyOpacityToImages(a);
91
+ this.assignedElements && this.assignedElements.forEach((e) => {
92
+ const i = e.querySelectorAll("img");
93
+ this.applyOpacityToImages(i);
99
94
  });
100
95
  const r = this.querySelectorAll("img");
101
96
  this.applyOpacityToImages(r);
@@ -107,8 +102,8 @@ const g = "pie-card", p = class p extends y {
107
102
  * @private
108
103
  */
109
104
  applyOpacityToImages(r) {
110
- r.forEach((i) => {
111
- i.style.opacity = this.disabled ? "0.5" : "";
105
+ r.forEach((e) => {
106
+ e.style.opacity = this.disabled ? "0.5" : "";
112
107
  });
113
108
  }
114
109
  /**
@@ -122,71 +117,72 @@ const g = "pie-card", p = class p extends y {
122
117
  render() {
123
118
  const {
124
119
  variant: r,
125
- disabled: i,
126
- tag: a,
127
- aria: e,
120
+ disabled: e,
121
+ tag: i,
122
+ aria: a,
128
123
  isDraggable: o
129
- } = this, d = this.generatePaddingCSS(), n = {
124
+ } = this, l = this.generatePaddingCSS(), c = {
130
125
  "c-card": !0,
131
126
  [`c-card--${r}`]: !0,
132
127
  "c-card--draggable": o,
133
- "is-disabled": i
128
+ "is-disabled": e
134
129
  };
135
- return a === "a" ? this.renderAnchor(n) : m`
130
+ return i === "a" ? this.renderAnchor(c) : h`
136
131
  <div
137
- class="${h(n)}"
132
+ class="${m(c)}"
138
133
  data-test-id="pie-card-button"
139
134
  role="button"
140
- tabindex=${i ? "-1" : "0"}
141
- aria-label=${(e == null ? void 0 : e.label) || b}
142
- aria-disabled=${i ? "true" : "false"}
143
- style=${d || ""}
135
+ tabindex=${e ? "-1" : "0"}
136
+ aria-label=${(a == null ? void 0 : a.label) || v}
137
+ aria-disabled=${e ? "true" : "false"}
138
+ style=${l || ""}
144
139
  @click=${this.onClickHandler}>
145
140
  <slot @slotchange=${this.handleSlotChange}></slot>
146
141
  </div>
147
142
  </div>`;
148
143
  }
149
144
  };
150
- p.styles = $(O);
151
- let t = p;
152
- s([
153
- c({ type: String }),
154
- u(g, D, v.tag)
155
- ], t.prototype, "tag");
156
- s([
157
- c({ type: String }),
158
- u(g, P, v.variant)
159
- ], t.prototype, "variant");
160
- s([
161
- c({ type: String, reflect: !0 })
162
- ], t.prototype, "href");
163
- s([
164
- c({ type: String, reflect: !0 })
165
- ], t.prototype, "target");
166
- s([
167
- c({ type: String, reflect: !0 })
168
- ], t.prototype, "rel");
169
- s([
170
- c({ type: Boolean })
171
- ], t.prototype, "disabled");
172
- s([
173
- c({ type: Object })
174
- ], t.prototype, "aria");
175
- s([
176
- c({ type: Boolean })
177
- ], t.prototype, "isDraggable");
178
- s([
179
- c({ type: String }),
180
- u(g, I, void 0)
181
- ], t.prototype, "padding");
182
- s([
183
- k({ flatten: !0 })
184
- ], t.prototype, "assignedElements");
185
- C(g, t);
145
+ t.styles = S(k);
146
+ d([
147
+ s({ type: String }),
148
+ u(p, O, n.tag)
149
+ ], t.prototype, "tag", 2);
150
+ d([
151
+ s({ type: String }),
152
+ u(p, w, n.variant)
153
+ ], t.prototype, "variant", 2);
154
+ d([
155
+ s({ type: String, reflect: !0 })
156
+ ], t.prototype, "href", 2);
157
+ d([
158
+ s({ type: String, reflect: !0 })
159
+ ], t.prototype, "target", 2);
160
+ d([
161
+ s({ type: String, reflect: !0 })
162
+ ], t.prototype, "rel", 2);
163
+ d([
164
+ s({ type: Boolean })
165
+ ], t.prototype, "disabled", 2);
166
+ d([
167
+ s({ type: Object })
168
+ ], t.prototype, "aria", 2);
169
+ d([
170
+ s({ type: Boolean })
171
+ ], t.prototype, "isDraggable", 2);
172
+ d([
173
+ s({ type: String }),
174
+ u(p, D, void 0)
175
+ ], t.prototype, "padding", 2);
176
+ d([
177
+ $({ flatten: !0 })
178
+ ], t.prototype, "assignedElements", 2);
179
+ t = d([
180
+ C("pie-card")
181
+ ], t);
186
182
  export {
187
183
  t as PieCard,
188
- v as defaultProps,
189
- I as paddingValues,
190
- D as tags,
191
- P as variants
184
+ n as defaultProps,
185
+ D as paddingValues,
186
+ O as tags,
187
+ w as variants
192
188
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-card",
3
- "version": "0.24.1",
3
+ "version": "0.25.0",
4
4
  "description": "PIE Design System Card built using Web Components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -39,14 +39,14 @@
39
39
  "license": "Apache-2.0",
40
40
  "devDependencies": {
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
- "@justeattakeaway/pie-components-config": "0.19.1",
42
+ "@justeattakeaway/pie-components-config": "0.20.1",
43
43
  "@justeattakeaway/pie-css": "0.16.0",
44
- "@justeattakeaway/pie-monorepo-utils": "0.5.0",
44
+ "@justeattakeaway/pie-monorepo-utils": "0.5.1",
45
45
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
46
46
  "cem-plugin-module-file-extensions": "0.0.5"
47
47
  },
48
48
  "dependencies": {
49
- "@justeattakeaway/pie-webc-core": "0.25.1"
49
+ "@justeattakeaway/pie-webc-core": "0.26.0"
50
50
  },
51
51
  "volta": {
52
52
  "extends": "../../../package.json"
package/src/index.ts CHANGED
@@ -5,7 +5,7 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
5
5
  import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
6
6
  import { ifDefined } from 'lit/directives/if-defined.js';
7
7
  import { property, queryAssignedElements } from 'lit/decorators.js';
8
- import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
8
+ import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
9
9
  import styles from './card.scss?inline';
10
10
  import {
11
11
  variants,
@@ -23,6 +23,7 @@ const componentSelector = 'pie-card';
23
23
  /**
24
24
  * @tagname pie-card
25
25
  */
26
+ @safeCustomElement('pie-card')
26
27
  export class PieCard extends PieElement implements CardProps {
27
28
  @property({ type: String })
28
29
  @validPropertyValues(componentSelector, tags, defaultProps.tag)
@@ -220,8 +221,6 @@ export class PieCard extends PieElement implements CardProps {
220
221
  static styles = unsafeCSS(styles);
221
222
  }
222
223
 
223
- defineCustomElement(componentSelector, PieCard);
224
-
225
224
  declare global {
226
225
  interface HTMLElementTagNameMap {
227
226
  [componentSelector]: PieCard;