@justeattakeaway/pie-card 0.26.1 → 0.26.3
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.js +21 -21
- package/package.json +9 -4
- package/src/card.scss +0 -4
package/dist/index.js
CHANGED
|
@@ -8,17 +8,17 @@ const b = class b extends y {
|
|
|
8
8
|
this.getAttribute("v") || this.setAttribute("v", b.v);
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
|
-
b.v = "0.26.
|
|
11
|
+
b.v = "0.26.3";
|
|
12
12
|
let g = b;
|
|
13
|
-
const w = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--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;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
|
|
13
|
+
const w = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--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;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((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,
|
|
20
|
-
for (var o = a > 1 ? void 0 : a ? A(e, i) : e, l = r.length - 1,
|
|
21
|
-
(
|
|
19
|
+
var P = Object.defineProperty, A = Object.getOwnPropertyDescriptor, c = (r, e, i, a) => {
|
|
20
|
+
for (var o = a > 1 ? void 0 : a ? A(e, i) : e, l = r.length - 1, d; l >= 0; l--)
|
|
21
|
+
(d = r[l]) && (o = (a ? d(e, i, o) : d(o)) || o);
|
|
22
22
|
return a && o && P(e, i, o), o;
|
|
23
23
|
};
|
|
24
24
|
const p = "pie-card";
|
|
@@ -40,7 +40,7 @@ let t = class extends g {
|
|
|
40
40
|
rel: a,
|
|
41
41
|
target: o,
|
|
42
42
|
disabled: l,
|
|
43
|
-
aria:
|
|
43
|
+
aria: d
|
|
44
44
|
} = this;
|
|
45
45
|
return h`
|
|
46
46
|
<a
|
|
@@ -50,7 +50,7 @@ let t = class extends g {
|
|
|
50
50
|
target=${o || v}
|
|
51
51
|
rel=${a || v}
|
|
52
52
|
role="link"
|
|
53
|
-
aria-label=${(
|
|
53
|
+
aria-label=${(d == null ? void 0 : d.label) || v}
|
|
54
54
|
aria-disabled=${l ? "true" : "false"}
|
|
55
55
|
style=${f(e)}>
|
|
56
56
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
@@ -121,15 +121,15 @@ let t = class extends g {
|
|
|
121
121
|
tag: i,
|
|
122
122
|
aria: a,
|
|
123
123
|
isDraggable: o
|
|
124
|
-
} = this, l = this.generatePaddingCSS(),
|
|
124
|
+
} = this, l = this.generatePaddingCSS(), d = {
|
|
125
125
|
"c-card": !0,
|
|
126
126
|
[`c-card--${r}`]: !0,
|
|
127
127
|
"c-card--draggable": o,
|
|
128
128
|
"is-disabled": e
|
|
129
129
|
};
|
|
130
|
-
return i === "a" ? this.renderAnchor(
|
|
130
|
+
return i === "a" ? this.renderAnchor(d) : h`
|
|
131
131
|
<div
|
|
132
|
-
class="${m(
|
|
132
|
+
class="${m(d)}"
|
|
133
133
|
data-test-id="pie-card-button"
|
|
134
134
|
role="button"
|
|
135
135
|
tabindex=${e ? "-1" : "0"}
|
|
@@ -143,40 +143,40 @@ let t = class extends g {
|
|
|
143
143
|
}
|
|
144
144
|
};
|
|
145
145
|
t.styles = S(w);
|
|
146
|
-
|
|
146
|
+
c([
|
|
147
147
|
s({ type: String }),
|
|
148
148
|
u(p, O, n.tag)
|
|
149
149
|
], t.prototype, "tag", 2);
|
|
150
|
-
|
|
150
|
+
c([
|
|
151
151
|
s({ type: String }),
|
|
152
152
|
u(p, k, n.variant)
|
|
153
153
|
], t.prototype, "variant", 2);
|
|
154
|
-
|
|
154
|
+
c([
|
|
155
155
|
s({ type: String, reflect: !0 })
|
|
156
156
|
], t.prototype, "href", 2);
|
|
157
|
-
|
|
157
|
+
c([
|
|
158
158
|
s({ type: String, reflect: !0 })
|
|
159
159
|
], t.prototype, "target", 2);
|
|
160
|
-
|
|
160
|
+
c([
|
|
161
161
|
s({ type: String, reflect: !0 })
|
|
162
162
|
], t.prototype, "rel", 2);
|
|
163
|
-
|
|
163
|
+
c([
|
|
164
164
|
s({ type: Boolean })
|
|
165
165
|
], t.prototype, "disabled", 2);
|
|
166
|
-
|
|
166
|
+
c([
|
|
167
167
|
s({ type: Object })
|
|
168
168
|
], t.prototype, "aria", 2);
|
|
169
|
-
|
|
169
|
+
c([
|
|
170
170
|
s({ type: Boolean })
|
|
171
171
|
], t.prototype, "isDraggable", 2);
|
|
172
|
-
|
|
172
|
+
c([
|
|
173
173
|
s({ type: String }),
|
|
174
174
|
u(p, D, void 0)
|
|
175
175
|
], t.prototype, "padding", 2);
|
|
176
|
-
|
|
176
|
+
c([
|
|
177
177
|
$({ flatten: !0 })
|
|
178
178
|
], t.prototype, "assignedElements", 2);
|
|
179
|
-
t =
|
|
179
|
+
t = c([
|
|
180
180
|
C("pie-card")
|
|
181
181
|
], t);
|
|
182
182
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-card",
|
|
3
|
-
"version": "0.26.
|
|
3
|
+
"version": "0.26.3",
|
|
4
4
|
"description": "PIE Design System Card built using Web Components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -19,7 +19,12 @@
|
|
|
19
19
|
"**/*.d.ts"
|
|
20
20
|
],
|
|
21
21
|
"pieMetadata": {
|
|
22
|
-
"componentStatus": "beta"
|
|
22
|
+
"componentStatus": "beta",
|
|
23
|
+
"replaces": {
|
|
24
|
+
"snacks": [
|
|
25
|
+
"Card"
|
|
26
|
+
]
|
|
27
|
+
}
|
|
23
28
|
},
|
|
24
29
|
"scripts": {
|
|
25
30
|
"build": "run -T vite build",
|
|
@@ -40,13 +45,13 @@
|
|
|
40
45
|
"devDependencies": {
|
|
41
46
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
47
|
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
43
|
-
"@justeattakeaway/pie-css": "0.
|
|
48
|
+
"@justeattakeaway/pie-css": "0.23.0",
|
|
44
49
|
"@justeattakeaway/pie-monorepo-utils": "0.7.0",
|
|
45
50
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
46
51
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
47
52
|
},
|
|
48
53
|
"dependencies": {
|
|
49
|
-
"@justeattakeaway/pie-webc-core": "
|
|
54
|
+
"@justeattakeaway/pie-webc-core": "3.0.0"
|
|
50
55
|
},
|
|
51
56
|
"volta": {
|
|
52
57
|
"extends": "../../../package.json"
|