@justeattakeaway/pie-card 0.26.23 → 0.27.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/custom-elements.json +76 -11
- package/dist/index.d.ts +0 -0
- package/dist/index.js +2 -2
- package/dist/react.d.ts +0 -0
- package/dist/react.js +0 -0
- package/package.json +3 -6
- package/src/card.scss +1 -0
package/custom-elements.json
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"type": {
|
|
39
39
|
"text": "DefaultProps"
|
|
40
40
|
},
|
|
41
|
-
"default": "{
|
|
41
|
+
"default": "{ disabled: false, variant: 'default', isDraggable: false, tag: 'button', }"
|
|
42
42
|
}
|
|
43
43
|
],
|
|
44
44
|
"exports": [
|
|
@@ -88,12 +88,14 @@
|
|
|
88
88
|
{
|
|
89
89
|
"kind": "field",
|
|
90
90
|
"name": "tag",
|
|
91
|
-
"privacy": "public"
|
|
91
|
+
"privacy": "public",
|
|
92
|
+
"attribute": "tag"
|
|
92
93
|
},
|
|
93
94
|
{
|
|
94
95
|
"kind": "field",
|
|
95
96
|
"name": "variant",
|
|
96
|
-
"privacy": "public"
|
|
97
|
+
"privacy": "public",
|
|
98
|
+
"attribute": "variant"
|
|
97
99
|
},
|
|
98
100
|
{
|
|
99
101
|
"kind": "field",
|
|
@@ -101,7 +103,9 @@
|
|
|
101
103
|
"type": {
|
|
102
104
|
"text": "CardProps['href']"
|
|
103
105
|
},
|
|
104
|
-
"privacy": "public"
|
|
106
|
+
"privacy": "public",
|
|
107
|
+
"attribute": "href",
|
|
108
|
+
"reflects": true
|
|
105
109
|
},
|
|
106
110
|
{
|
|
107
111
|
"kind": "field",
|
|
@@ -109,7 +113,9 @@
|
|
|
109
113
|
"type": {
|
|
110
114
|
"text": "CardProps['target']"
|
|
111
115
|
},
|
|
112
|
-
"privacy": "public"
|
|
116
|
+
"privacy": "public",
|
|
117
|
+
"attribute": "target",
|
|
118
|
+
"reflects": true
|
|
113
119
|
},
|
|
114
120
|
{
|
|
115
121
|
"kind": "field",
|
|
@@ -117,12 +123,15 @@
|
|
|
117
123
|
"type": {
|
|
118
124
|
"text": "CardProps['rel']"
|
|
119
125
|
},
|
|
120
|
-
"privacy": "public"
|
|
126
|
+
"privacy": "public",
|
|
127
|
+
"attribute": "rel",
|
|
128
|
+
"reflects": true
|
|
121
129
|
},
|
|
122
130
|
{
|
|
123
131
|
"kind": "field",
|
|
124
132
|
"name": "disabled",
|
|
125
|
-
"privacy": "public"
|
|
133
|
+
"privacy": "public",
|
|
134
|
+
"attribute": "disabled"
|
|
126
135
|
},
|
|
127
136
|
{
|
|
128
137
|
"kind": "field",
|
|
@@ -130,12 +139,14 @@
|
|
|
130
139
|
"type": {
|
|
131
140
|
"text": "CardProps['aria']"
|
|
132
141
|
},
|
|
133
|
-
"privacy": "public"
|
|
142
|
+
"privacy": "public",
|
|
143
|
+
"attribute": "aria"
|
|
134
144
|
},
|
|
135
145
|
{
|
|
136
146
|
"kind": "field",
|
|
137
147
|
"name": "isDraggable",
|
|
138
|
-
"privacy": "public"
|
|
148
|
+
"privacy": "public",
|
|
149
|
+
"attribute": "isDraggable"
|
|
139
150
|
},
|
|
140
151
|
{
|
|
141
152
|
"kind": "field",
|
|
@@ -143,7 +154,8 @@
|
|
|
143
154
|
"type": {
|
|
144
155
|
"text": "CardProps['padding']"
|
|
145
156
|
},
|
|
146
|
-
"privacy": "public"
|
|
157
|
+
"privacy": "public",
|
|
158
|
+
"attribute": "padding"
|
|
147
159
|
},
|
|
148
160
|
{
|
|
149
161
|
"kind": "field",
|
|
@@ -233,6 +245,59 @@
|
|
|
233
245
|
"description": "Applies or removes opacity from the given images based on the `disabled` property."
|
|
234
246
|
}
|
|
235
247
|
],
|
|
248
|
+
"attributes": [
|
|
249
|
+
{
|
|
250
|
+
"name": "tag",
|
|
251
|
+
"fieldName": "tag"
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
"name": "variant",
|
|
255
|
+
"fieldName": "variant"
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
"name": "href",
|
|
259
|
+
"type": {
|
|
260
|
+
"text": "CardProps['href']"
|
|
261
|
+
},
|
|
262
|
+
"fieldName": "href"
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
"name": "target",
|
|
266
|
+
"type": {
|
|
267
|
+
"text": "CardProps['target']"
|
|
268
|
+
},
|
|
269
|
+
"fieldName": "target"
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"name": "rel",
|
|
273
|
+
"type": {
|
|
274
|
+
"text": "CardProps['rel']"
|
|
275
|
+
},
|
|
276
|
+
"fieldName": "rel"
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"name": "disabled",
|
|
280
|
+
"fieldName": "disabled"
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
"name": "aria",
|
|
284
|
+
"type": {
|
|
285
|
+
"text": "CardProps['aria']"
|
|
286
|
+
},
|
|
287
|
+
"fieldName": "aria"
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
"name": "isDraggable",
|
|
291
|
+
"fieldName": "isDraggable"
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
"name": "padding",
|
|
295
|
+
"type": {
|
|
296
|
+
"text": "CardProps['padding']"
|
|
297
|
+
},
|
|
298
|
+
"fieldName": "padding"
|
|
299
|
+
}
|
|
300
|
+
],
|
|
236
301
|
"superclass": {
|
|
237
302
|
"name": "PieElement",
|
|
238
303
|
"package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
|
|
@@ -247,7 +312,7 @@
|
|
|
247
312
|
"name": "*",
|
|
248
313
|
"declaration": {
|
|
249
314
|
"name": "*",
|
|
250
|
-
"
|
|
315
|
+
"module": "src/defs"
|
|
251
316
|
}
|
|
252
317
|
},
|
|
253
318
|
{
|
package/dist/index.d.ts
CHANGED
|
File without changes
|
package/dist/index.js
CHANGED
|
@@ -8,9 +8,9 @@ const b = class b extends y {
|
|
|
8
8
|
this.getAttribute("v") || this.setAttribute("v", b.v);
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
|
-
b.v = "0.
|
|
11
|
+
b.v = "0.27.0";
|
|
12
12
|
let g = b;
|
|
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 = {
|
|
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;height:100%;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,
|
package/dist/react.d.ts
CHANGED
|
File without changes
|
package/dist/react.js
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-card",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.27.0",
|
|
4
4
|
"description": "PIE Design System Card built using Web Components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -43,17 +43,14 @@
|
|
|
43
43
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
44
44
|
"license": "Apache-2.0",
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@justeattakeaway/pie-components-config": "0.21.
|
|
46
|
+
"@justeattakeaway/pie-components-config": "0.21.2",
|
|
47
47
|
"@justeattakeaway/pie-css": "1.1.1",
|
|
48
|
-
"@justeattakeaway/pie-monorepo-utils": "0.9.
|
|
48
|
+
"@justeattakeaway/pie-monorepo-utils": "0.9.1",
|
|
49
49
|
"@justeattakeaway/pie-wrapper-react": "0.14.4"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@justeattakeaway/pie-webc-core": "14.0.1"
|
|
53
53
|
},
|
|
54
|
-
"volta": {
|
|
55
|
-
"extends": "../../../package.json"
|
|
56
|
-
},
|
|
57
54
|
"customElements": "custom-elements.json",
|
|
58
55
|
"sideEffects": [
|
|
59
56
|
"dist/*.js"
|