@justeattakeaway/pie-card 0.26.19 → 0.26.21
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 +46 -46
- package/package.json +5 -5
- package/src/card.scss +1 -1
- package/src/index.ts +1 -1
package/dist/index.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
import { LitElement as y, unsafeCSS as S, nothing as v, html as h } from "lit";
|
|
2
2
|
import { classMap as m } from "lit/directives/class-map.js";
|
|
3
3
|
import { ifDefined as f } from "lit/directives/if-defined.js";
|
|
4
|
-
import { property as
|
|
4
|
+
import { property as c, queryAssignedElements as $ } from "lit/decorators.js";
|
|
5
5
|
import { validPropertyValues as u, safeCustomElement as C } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
const b = class b extends y {
|
|
7
7
|
willUpdate() {
|
|
8
8
|
this.getAttribute("v") || this.setAttribute("v", b.v);
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
|
-
b.v = "0.26.
|
|
11
|
+
b.v = "0.26.21";
|
|
12
12
|
let g = b;
|
|
13
|
-
const w = ".c-card.
|
|
13
|
+
const w = ".c-card.is-draggable{cursor:grab}.c-card.is-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((i) => `${r},${i}`)]), 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(
|
|
21
|
-
(d = r[l]) && (o = (a ? d(
|
|
22
|
-
return a && o && P(
|
|
19
|
+
var P = Object.defineProperty, A = Object.getOwnPropertyDescriptor, s = (r, i, e, a) => {
|
|
20
|
+
for (var o = a > 1 ? void 0 : a ? A(i, e) : i, l = r.length - 1, d; l >= 0; l--)
|
|
21
|
+
(d = r[l]) && (o = (a ? d(i, e, o) : d(o)) || o);
|
|
22
|
+
return a && o && P(i, e, o), o;
|
|
23
23
|
};
|
|
24
24
|
const p = "pie-card";
|
|
25
25
|
let t = class extends g {
|
|
@@ -35,8 +35,8 @@ let t = class extends g {
|
|
|
35
35
|
* @private
|
|
36
36
|
*/
|
|
37
37
|
renderAnchor(r) {
|
|
38
|
-
const
|
|
39
|
-
href:
|
|
38
|
+
const i = this.generatePaddingCSS(), {
|
|
39
|
+
href: e,
|
|
40
40
|
rel: a,
|
|
41
41
|
target: o,
|
|
42
42
|
disabled: l,
|
|
@@ -46,13 +46,13 @@ let t = class extends g {
|
|
|
46
46
|
<a
|
|
47
47
|
class="${m(r)}"
|
|
48
48
|
data-test-id="pie-card-link"
|
|
49
|
-
href=${f(
|
|
49
|
+
href=${f(e && !l ? e : void 0)}
|
|
50
50
|
target=${o || v}
|
|
51
51
|
rel=${a || v}
|
|
52
52
|
role="link"
|
|
53
53
|
aria-label=${(d == null ? void 0 : d.label) || v}
|
|
54
54
|
aria-disabled=${l ? "true" : "false"}
|
|
55
|
-
style=${f(
|
|
55
|
+
style=${f(i)}>
|
|
56
56
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
57
57
|
</a>`;
|
|
58
58
|
}
|
|
@@ -68,11 +68,11 @@ let t = class extends g {
|
|
|
68
68
|
*/
|
|
69
69
|
generatePaddingCSS() {
|
|
70
70
|
const { padding: r } = this;
|
|
71
|
-
let
|
|
71
|
+
let i = "";
|
|
72
72
|
if (!r)
|
|
73
73
|
return "";
|
|
74
|
-
const
|
|
75
|
-
return
|
|
74
|
+
const e = r.split(",").map((a) => a.trim()).filter((a) => /^[a-g]$/.test(a));
|
|
75
|
+
return e.length > 0 && e.length <= 2 && (i += `var(--dt-spacing-${e[0]})`, e.length > 1 && (i += ` var(--dt-spacing-${e[1]})`)), i ? `padding: ${i}` : "";
|
|
76
76
|
}
|
|
77
77
|
/**
|
|
78
78
|
* Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
|
|
@@ -88,9 +88,9 @@ let t = class extends g {
|
|
|
88
88
|
* @private
|
|
89
89
|
*/
|
|
90
90
|
updateImagesOpacity() {
|
|
91
|
-
this.assignedElements && this.assignedElements.forEach((
|
|
92
|
-
const
|
|
93
|
-
this.applyOpacityToImages(
|
|
91
|
+
this.assignedElements && this.assignedElements.forEach((i) => {
|
|
92
|
+
const e = i.querySelectorAll("img");
|
|
93
|
+
this.applyOpacityToImages(e);
|
|
94
94
|
});
|
|
95
95
|
const r = this.querySelectorAll("img");
|
|
96
96
|
this.applyOpacityToImages(r);
|
|
@@ -102,8 +102,8 @@ let t = class extends g {
|
|
|
102
102
|
* @private
|
|
103
103
|
*/
|
|
104
104
|
applyOpacityToImages(r) {
|
|
105
|
-
r.forEach((
|
|
106
|
-
|
|
105
|
+
r.forEach((i) => {
|
|
106
|
+
i.style.opacity = this.disabled ? "0.5" : "";
|
|
107
107
|
});
|
|
108
108
|
}
|
|
109
109
|
/**
|
|
@@ -117,24 +117,24 @@ let t = class extends g {
|
|
|
117
117
|
render() {
|
|
118
118
|
const {
|
|
119
119
|
variant: r,
|
|
120
|
-
disabled:
|
|
121
|
-
tag:
|
|
120
|
+
disabled: i,
|
|
121
|
+
tag: e,
|
|
122
122
|
aria: a,
|
|
123
123
|
isDraggable: o
|
|
124
124
|
} = this, l = this.generatePaddingCSS(), d = {
|
|
125
125
|
"c-card": !0,
|
|
126
126
|
[`c-card--${r}`]: !0,
|
|
127
|
-
"
|
|
128
|
-
"is-disabled":
|
|
127
|
+
"is-draggable": o,
|
|
128
|
+
"is-disabled": i
|
|
129
129
|
};
|
|
130
|
-
return
|
|
130
|
+
return e === "a" ? this.renderAnchor(d) : h`
|
|
131
131
|
<div
|
|
132
132
|
class="${m(d)}"
|
|
133
133
|
data-test-id="pie-card-button"
|
|
134
134
|
role="button"
|
|
135
|
-
tabindex=${
|
|
135
|
+
tabindex=${i ? "-1" : "0"}
|
|
136
136
|
aria-label=${(a == null ? void 0 : a.label) || v}
|
|
137
|
-
aria-disabled=${
|
|
137
|
+
aria-disabled=${i ? "true" : "false"}
|
|
138
138
|
style=${l || ""}
|
|
139
139
|
@click=${this.onClickHandler}>
|
|
140
140
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
@@ -143,40 +143,40 @@ let t = class extends g {
|
|
|
143
143
|
}
|
|
144
144
|
};
|
|
145
145
|
t.styles = S(w);
|
|
146
|
-
|
|
147
|
-
|
|
146
|
+
s([
|
|
147
|
+
c({ type: String }),
|
|
148
148
|
u(p, O, n.tag)
|
|
149
149
|
], t.prototype, "tag", 2);
|
|
150
|
-
|
|
151
|
-
|
|
150
|
+
s([
|
|
151
|
+
c({ type: String }),
|
|
152
152
|
u(p, k, n.variant)
|
|
153
153
|
], t.prototype, "variant", 2);
|
|
154
|
-
|
|
155
|
-
|
|
154
|
+
s([
|
|
155
|
+
c({ type: String, reflect: !0 })
|
|
156
156
|
], t.prototype, "href", 2);
|
|
157
|
-
|
|
158
|
-
|
|
157
|
+
s([
|
|
158
|
+
c({ type: String, reflect: !0 })
|
|
159
159
|
], t.prototype, "target", 2);
|
|
160
|
-
|
|
161
|
-
|
|
160
|
+
s([
|
|
161
|
+
c({ type: String, reflect: !0 })
|
|
162
162
|
], t.prototype, "rel", 2);
|
|
163
|
-
|
|
164
|
-
|
|
163
|
+
s([
|
|
164
|
+
c({ type: Boolean })
|
|
165
165
|
], t.prototype, "disabled", 2);
|
|
166
|
-
|
|
167
|
-
|
|
166
|
+
s([
|
|
167
|
+
c({ type: Object })
|
|
168
168
|
], t.prototype, "aria", 2);
|
|
169
|
-
|
|
170
|
-
|
|
169
|
+
s([
|
|
170
|
+
c({ type: Boolean })
|
|
171
171
|
], t.prototype, "isDraggable", 2);
|
|
172
|
-
|
|
173
|
-
|
|
172
|
+
s([
|
|
173
|
+
c({ type: String }),
|
|
174
174
|
u(p, D, void 0)
|
|
175
175
|
], t.prototype, "padding", 2);
|
|
176
|
-
|
|
176
|
+
s([
|
|
177
177
|
$({ flatten: !0 })
|
|
178
178
|
], t.prototype, "assignedElements", 2);
|
|
179
|
-
t =
|
|
179
|
+
t = s([
|
|
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.21",
|
|
4
4
|
"description": "PIE Design System Card built using Web Components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -45,13 +45,13 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
47
47
|
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
48
|
-
"@justeattakeaway/pie-css": "
|
|
49
|
-
"@justeattakeaway/pie-monorepo-utils": "0.
|
|
50
|
-
"@justeattakeaway/pie-wrapper-react": "0.14.
|
|
48
|
+
"@justeattakeaway/pie-css": "1.1.0",
|
|
49
|
+
"@justeattakeaway/pie-monorepo-utils": "0.8.0",
|
|
50
|
+
"@justeattakeaway/pie-wrapper-react": "0.14.4",
|
|
51
51
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@justeattakeaway/pie-webc-core": "
|
|
54
|
+
"@justeattakeaway/pie-webc-core": "14.0.0"
|
|
55
55
|
},
|
|
56
56
|
"volta": {
|
|
57
57
|
"extends": "../../../package.json"
|
package/src/card.scss
CHANGED
package/src/index.ts
CHANGED