@justeattakeaway/pie-card 0.14.1 → 0.14.2-next.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.
- package/dist/index.d.ts +0 -0
- package/dist/index.js +22 -22
- package/dist/react.d.ts +1 -1
- package/dist/react.js +36 -59
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
File without changes
|
package/dist/index.js
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import { unsafeCSS as p, LitElement as
|
|
1
|
+
import { unsafeCSS as p, LitElement as h, html as u, nothing as s } from "lit";
|
|
2
2
|
import { property as n } from "lit/decorators.js";
|
|
3
|
-
const
|
|
3
|
+
const g = (t, r, a) => function(e, c) {
|
|
4
4
|
const i = `#${c}`;
|
|
5
5
|
Object.defineProperty(e, c, {
|
|
6
6
|
get() {
|
|
7
7
|
return this[i];
|
|
8
8
|
},
|
|
9
9
|
set(b) {
|
|
10
|
-
const h = this[i];
|
|
11
10
|
r.includes(b) ? this[i] = b : (console.error(
|
|
12
11
|
`<${t}> Invalid value "${b}" provided for property "${c}".`,
|
|
13
12
|
`Must be one of: ${r.join(" | ")}.`,
|
|
14
13
|
`Falling back to default value: "${a}"`
|
|
15
|
-
), this[i] = a)
|
|
16
|
-
}
|
|
14
|
+
), this[i] = a);
|
|
15
|
+
},
|
|
16
|
+
configurable: !0
|
|
17
17
|
});
|
|
18
18
|
};
|
|
19
|
-
function
|
|
19
|
+
function m(t, r) {
|
|
20
20
|
customElements.get(t) ? console.warn(`PIE Web Component: "${t}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(t, r);
|
|
21
21
|
}
|
|
22
|
-
const
|
|
23
|
-
`,
|
|
24
|
-
var
|
|
25
|
-
for (var e = o > 1 ? void 0 : o ?
|
|
22
|
+
const $ = `.c-card[isdraggable]{cursor:grab}.c-card[isdraggable]:active{cursor:grabbing}*,*:before,*:after{box-sizing:border-box}.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;user-select:none;outline:none;text-decoration:none}.c-card[variant=default]{box-shadow:var(--dt-elevation-card)}.c-card[variant=default]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card[variant=default]:active:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card[variant=outline]{border-color:var(--dt-color-border-strong)}.c-card[variant=outline]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card[variant=outline]:active:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card[variant=inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card[variant=inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[variant=outline-inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card[variant=outline-inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=outline-inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[disabled]{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card[disabled] ::slotted(*){color:var(--dt-color-content-disabled)}.c-card[disabled] img{opacity:.5}.c-card[disabled][variant=inverse],.c-card[disabled][variant=outline-inverse]{--card-bg-color: var(--dt-color-disabled-01-inverse)}.c-card:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}
|
|
23
|
+
`, y = ["default", "outline", "inverse", "outline-inverse"], S = ["a", "button"], f = ["a", "b", "c", "d", "e", "f", "g"], k = f.flatMap((t) => [t, ...f.map((r) => `${t},${r}`)]);
|
|
24
|
+
var P = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (t, r, a, o) => {
|
|
25
|
+
for (var e = o > 1 ? void 0 : o ? x(r, a) : r, c = t.length - 1, i; c >= 0; c--)
|
|
26
26
|
(i = t[c]) && (e = (o ? i(r, a, e) : i(e)) || e);
|
|
27
|
-
return o && e &&
|
|
27
|
+
return o && e && P(r, a, e), e;
|
|
28
28
|
};
|
|
29
29
|
const v = "pie-card";
|
|
30
|
-
class d extends
|
|
30
|
+
class d extends h {
|
|
31
31
|
constructor() {
|
|
32
32
|
super(...arguments), this.tag = "button", this.variant = "default", this.disabled = !1, this.isDraggable = !1;
|
|
33
33
|
}
|
|
@@ -39,7 +39,7 @@ class d extends m {
|
|
|
39
39
|
renderAnchor() {
|
|
40
40
|
var a;
|
|
41
41
|
const r = this.generatePaddingCSS();
|
|
42
|
-
return
|
|
42
|
+
return u`
|
|
43
43
|
<a
|
|
44
44
|
class="c-card"
|
|
45
45
|
data-test-id="pie-card"
|
|
@@ -84,7 +84,7 @@ class d extends m {
|
|
|
84
84
|
aria: e,
|
|
85
85
|
isDraggable: c
|
|
86
86
|
} = this, i = this.generatePaddingCSS();
|
|
87
|
-
return o === "a" ? this.renderAnchor() :
|
|
87
|
+
return o === "a" ? this.renderAnchor() : u`
|
|
88
88
|
<div
|
|
89
89
|
class="c-card"
|
|
90
90
|
data-test-id="pie-card"
|
|
@@ -102,14 +102,14 @@ class d extends m {
|
|
|
102
102
|
</div>`;
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
|
-
d.styles = p(
|
|
105
|
+
d.styles = p($);
|
|
106
106
|
l([
|
|
107
107
|
n(),
|
|
108
|
-
|
|
108
|
+
g(v, S, "button")
|
|
109
109
|
], d.prototype, "tag", 2);
|
|
110
110
|
l([
|
|
111
111
|
n(),
|
|
112
|
-
|
|
112
|
+
g(v, y, "default")
|
|
113
113
|
], d.prototype, "variant", 2);
|
|
114
114
|
l([
|
|
115
115
|
n({ type: String, reflect: !0 })
|
|
@@ -131,12 +131,12 @@ l([
|
|
|
131
131
|
], d.prototype, "isDraggable", 2);
|
|
132
132
|
l([
|
|
133
133
|
n({ type: String }),
|
|
134
|
-
|
|
134
|
+
g(v, k, void 0)
|
|
135
135
|
], d.prototype, "padding", 2);
|
|
136
|
-
|
|
136
|
+
m(v, d);
|
|
137
137
|
export {
|
|
138
138
|
d as PieCard,
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
139
|
+
k as paddingValues,
|
|
140
|
+
S as tags,
|
|
141
|
+
y as variants
|
|
142
142
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
2
|
import type { LitElement } from 'lit';
|
|
3
|
-
import type { ReactWebComponent } from '@lit
|
|
3
|
+
import type { ReactWebComponent } from '@lit/react';
|
|
4
4
|
import type { TemplateResult } from 'lit';
|
|
5
5
|
|
|
6
6
|
export declare type AriaProps = {
|
package/dist/react.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { PieCard as
|
|
3
|
-
import { paddingValues as
|
|
1
|
+
import * as y from "react";
|
|
2
|
+
import { PieCard as E } from "./index.js";
|
|
3
|
+
import { paddingValues as k, tags as M, variants as j } from "./index.js";
|
|
4
4
|
import "lit";
|
|
5
5
|
import "lit/decorators.js";
|
|
6
6
|
/**
|
|
@@ -8,66 +8,43 @@ import "lit/decorators.js";
|
|
|
8
8
|
* Copyright 2018 Google LLC
|
|
9
9
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
10
10
|
*/
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
let
|
|
15
|
-
|
|
16
|
-
let
|
|
17
|
-
|
|
18
|
-
})(t,
|
|
19
|
-
},
|
|
20
|
-
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
constructor() {
|
|
32
|
-
super(...arguments), this.o = null;
|
|
33
|
-
}
|
|
34
|
-
t(e) {
|
|
35
|
-
if (this.o !== null)
|
|
36
|
-
for (const u in this.i)
|
|
37
|
-
b(this.o, u, this.props[u], e ? e[u] : void 0, p);
|
|
38
|
-
}
|
|
39
|
-
componentDidMount() {
|
|
11
|
+
const N = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), v = /* @__PURE__ */ new WeakMap(), g = (t, i, o, u, l) => {
|
|
12
|
+
const d = l == null ? void 0 : l[i];
|
|
13
|
+
d === void 0 || o === u ? (t[i] = o, o == null && i in HTMLElement.prototype && t.removeAttribute(i)) : ((c, n, a) => {
|
|
14
|
+
let s = v.get(c);
|
|
15
|
+
s === void 0 && v.set(c, s = /* @__PURE__ */ new Map());
|
|
16
|
+
let r = s.get(n);
|
|
17
|
+
a !== void 0 ? r === void 0 ? (s.set(n, r = { handleEvent: a }), c.addEventListener(n, r)) : r.handleEvent = a : r !== void 0 && (s.delete(n), c.removeEventListener(n, r));
|
|
18
|
+
})(t, d, o);
|
|
19
|
+
}, C = ({ react: t, tagName: i, elementClass: o, events: u, displayName: l }) => {
|
|
20
|
+
const d = new Set(Object.keys(u ?? {})), c = t.forwardRef((n, a) => {
|
|
21
|
+
const s = t.useRef(null), r = t.useRef(null), m = {}, p = {};
|
|
22
|
+
for (const [e, f] of Object.entries(n))
|
|
23
|
+
N.has(e) ? m[e === "className" ? "class" : e] = f : d.has(e) || e in o.prototype ? p[e] = f : m[e] = f;
|
|
24
|
+
return t.useLayoutEffect(() => {
|
|
25
|
+
if (r.current !== null) {
|
|
26
|
+
for (const e in p)
|
|
27
|
+
g(r.current, e, n[e], s.current ? s.current[e] : void 0, u);
|
|
28
|
+
s.current = n;
|
|
29
|
+
}
|
|
30
|
+
}), t.useLayoutEffect(() => {
|
|
40
31
|
var e;
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
this.h !== e && (this.u = (n) => {
|
|
49
|
-
e !== null && M(e, n), this.o = n, this.h = e;
|
|
50
|
-
}), this.i = {};
|
|
51
|
-
const v = { ref: this.u };
|
|
52
|
-
for (const [n, y] of Object.entries(u))
|
|
53
|
-
E.has(n) ? v[n === "className" ? "class" : n] = y : l.has(n) || n in s.prototype ? this.i[n] = y : v[n] = y;
|
|
54
|
-
return v.suppressHydrationWarning = !0, r(a, v);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
f.displayName = m ?? s.name;
|
|
58
|
-
const N = o.forwardRef((d, e) => r(f, { ...d, _$Gl: e }, d == null ? void 0 : d.children));
|
|
59
|
-
return N.displayName = f.displayName, N;
|
|
60
|
-
}
|
|
61
|
-
const $ = P({
|
|
32
|
+
(e = r.current) == null || e.removeAttribute("defer-hydration");
|
|
33
|
+
}, []), m.suppressHydrationWarning = !0, t.createElement(i, { ...m, ref: t.useCallback((e) => {
|
|
34
|
+
r.current = e, typeof a == "function" ? a(e) : a !== null && (a.current = e);
|
|
35
|
+
}, [a]) });
|
|
36
|
+
});
|
|
37
|
+
return c.displayName = l ?? o.name, c;
|
|
38
|
+
}, L = C({
|
|
62
39
|
displayName: "PieCard",
|
|
63
|
-
elementClass:
|
|
64
|
-
react:
|
|
40
|
+
elementClass: E,
|
|
41
|
+
react: y,
|
|
65
42
|
tagName: "pie-card",
|
|
66
43
|
events: {}
|
|
67
44
|
});
|
|
68
45
|
export {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
46
|
+
L as PieCard,
|
|
47
|
+
k as paddingValues,
|
|
48
|
+
M as tags,
|
|
49
|
+
j as variants
|
|
73
50
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-card",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.2-next.0",
|
|
4
4
|
"description": "PIE Design System Card built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
29
29
|
"license": "Apache-2.0",
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
31
|
+
"@justeattakeaway/pie-components-config": "0.6.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
34
|
+
"@justeattakeaway/pie-webc-core": "0.12.0-next.0"
|
|
35
35
|
},
|
|
36
36
|
"volta": {
|
|
37
37
|
"extends": "../../../package.json"
|