@justeattakeaway/pie-card 0.23.0 → 0.24.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 +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +95 -82
- package/dist/react.d.ts +2 -2
- package/package.json +12 -5
- package/src/index.ts +3 -2
package/custom-elements.json
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import type { CSSResult } from 'lit';
|
|
3
|
-
import
|
|
3
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
4
4
|
import type { PropertyValues } from 'lit';
|
|
5
5
|
import type { TemplateResult } from 'lit';
|
|
6
6
|
|
|
@@ -60,7 +60,7 @@ export declare const paddingValues: string[];
|
|
|
60
60
|
/**
|
|
61
61
|
* @tagname pie-card
|
|
62
62
|
*/
|
|
63
|
-
export declare class PieCard extends
|
|
63
|
+
export declare class PieCard extends PieElement implements CardProps {
|
|
64
64
|
tag: "a" | "button";
|
|
65
65
|
variant: "default" | "outline" | "inverse" | "outline-inverse";
|
|
66
66
|
href: CardProps['href'];
|
package/dist/index.js
CHANGED
|
@@ -1,22 +1,35 @@
|
|
|
1
|
-
import { LitElement as
|
|
1
|
+
import { LitElement as S, html as m, nothing as b, unsafeCSS as $ } from "lit";
|
|
2
|
+
import { property as c, queryAssignedElements as k } from "lit/decorators.js";
|
|
2
3
|
import { classMap as h } from "lit/directives/class-map.js";
|
|
3
4
|
import { ifDefined as f } from "lit/directives/if-defined.js";
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
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.0";
|
|
14
|
+
}
|
|
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 = {
|
|
7
20
|
disabled: !1,
|
|
8
21
|
variant: "default",
|
|
9
22
|
isDraggable: !1,
|
|
10
23
|
tag: "button"
|
|
11
24
|
};
|
|
12
|
-
var
|
|
13
|
-
for (var
|
|
14
|
-
(
|
|
15
|
-
return
|
|
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;
|
|
16
29
|
};
|
|
17
|
-
const g = "pie-card",
|
|
30
|
+
const g = "pie-card", p = class p extends y {
|
|
18
31
|
constructor() {
|
|
19
|
-
super(...arguments), this.tag =
|
|
32
|
+
super(...arguments), this.tag = v.tag, this.variant = v.variant, this.disabled = v.disabled, this.isDraggable = v.isDraggable;
|
|
20
33
|
}
|
|
21
34
|
onClickHandler(r) {
|
|
22
35
|
this.disabled && (r.preventDefault(), r.stopPropagation());
|
|
@@ -27,24 +40,24 @@ const g = "pie-card", m = class m extends y {
|
|
|
27
40
|
* @private
|
|
28
41
|
*/
|
|
29
42
|
renderAnchor(r) {
|
|
30
|
-
const
|
|
43
|
+
const i = this.generatePaddingCSS(), {
|
|
31
44
|
href: a,
|
|
32
|
-
rel:
|
|
33
|
-
target:
|
|
34
|
-
disabled:
|
|
35
|
-
aria:
|
|
45
|
+
rel: e,
|
|
46
|
+
target: o,
|
|
47
|
+
disabled: d,
|
|
48
|
+
aria: n
|
|
36
49
|
} = this;
|
|
37
|
-
return
|
|
50
|
+
return m`
|
|
38
51
|
<a
|
|
39
52
|
class="${h(r)}"
|
|
40
53
|
data-test-id="pie-card-link"
|
|
41
|
-
href=${f(a && !
|
|
42
|
-
target=${
|
|
43
|
-
rel=${
|
|
54
|
+
href=${f(a && !d ? a : void 0)}
|
|
55
|
+
target=${o || b}
|
|
56
|
+
rel=${e || b}
|
|
44
57
|
role="link"
|
|
45
|
-
aria-label=${(
|
|
46
|
-
aria-disabled=${
|
|
47
|
-
style=${f(
|
|
58
|
+
aria-label=${(n == null ? void 0 : n.label) || b}
|
|
59
|
+
aria-disabled=${d ? "true" : "false"}
|
|
60
|
+
style=${f(i)}>
|
|
48
61
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
49
62
|
</a>`;
|
|
50
63
|
}
|
|
@@ -60,11 +73,11 @@ const g = "pie-card", m = class m extends y {
|
|
|
60
73
|
*/
|
|
61
74
|
generatePaddingCSS() {
|
|
62
75
|
const { padding: r } = this;
|
|
63
|
-
let
|
|
76
|
+
let i = "";
|
|
64
77
|
if (!r)
|
|
65
78
|
return "";
|
|
66
|
-
const a = r.split(",").map((
|
|
67
|
-
return a.length > 0 && a.length <= 2 && (
|
|
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}` : "";
|
|
68
81
|
}
|
|
69
82
|
/**
|
|
70
83
|
* Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
|
|
@@ -80,8 +93,8 @@ const g = "pie-card", m = class m extends y {
|
|
|
80
93
|
* @private
|
|
81
94
|
*/
|
|
82
95
|
updateImagesOpacity() {
|
|
83
|
-
this.assignedElements && this.assignedElements.forEach((
|
|
84
|
-
const a =
|
|
96
|
+
this.assignedElements && this.assignedElements.forEach((i) => {
|
|
97
|
+
const a = i.querySelectorAll("img");
|
|
85
98
|
this.applyOpacityToImages(a);
|
|
86
99
|
});
|
|
87
100
|
const r = this.querySelectorAll("img");
|
|
@@ -94,8 +107,8 @@ const g = "pie-card", m = class m extends y {
|
|
|
94
107
|
* @private
|
|
95
108
|
*/
|
|
96
109
|
applyOpacityToImages(r) {
|
|
97
|
-
r.forEach((
|
|
98
|
-
|
|
110
|
+
r.forEach((i) => {
|
|
111
|
+
i.style.opacity = this.disabled ? "0.5" : "";
|
|
99
112
|
});
|
|
100
113
|
}
|
|
101
114
|
/**
|
|
@@ -109,71 +122,71 @@ const g = "pie-card", m = class m extends y {
|
|
|
109
122
|
render() {
|
|
110
123
|
const {
|
|
111
124
|
variant: r,
|
|
112
|
-
disabled:
|
|
125
|
+
disabled: i,
|
|
113
126
|
tag: a,
|
|
114
|
-
aria:
|
|
115
|
-
isDraggable:
|
|
116
|
-
} = this,
|
|
127
|
+
aria: e,
|
|
128
|
+
isDraggable: o
|
|
129
|
+
} = this, d = this.generatePaddingCSS(), n = {
|
|
117
130
|
"c-card": !0,
|
|
118
131
|
[`c-card--${r}`]: !0,
|
|
119
|
-
"c-card--draggable":
|
|
120
|
-
"is-disabled":
|
|
132
|
+
"c-card--draggable": o,
|
|
133
|
+
"is-disabled": i
|
|
121
134
|
};
|
|
122
|
-
return a === "a" ? this.renderAnchor(
|
|
135
|
+
return a === "a" ? this.renderAnchor(n) : m`
|
|
123
136
|
<div
|
|
124
|
-
class="${h(
|
|
137
|
+
class="${h(n)}"
|
|
125
138
|
data-test-id="pie-card-button"
|
|
126
139
|
role="button"
|
|
127
|
-
tabindex=${
|
|
128
|
-
aria-label=${(
|
|
129
|
-
aria-disabled=${
|
|
130
|
-
style=${
|
|
140
|
+
tabindex=${i ? "-1" : "0"}
|
|
141
|
+
aria-label=${(e == null ? void 0 : e.label) || b}
|
|
142
|
+
aria-disabled=${i ? "true" : "false"}
|
|
143
|
+
style=${d || ""}
|
|
131
144
|
@click=${this.onClickHandler}>
|
|
132
145
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
133
146
|
</div>
|
|
134
147
|
</div>`;
|
|
135
148
|
}
|
|
136
149
|
};
|
|
137
|
-
|
|
138
|
-
let
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
u(g,
|
|
142
|
-
],
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
u(g,
|
|
146
|
-
],
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
],
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
],
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
],
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
],
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
],
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
],
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
u(g,
|
|
168
|
-
],
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
],
|
|
172
|
-
|
|
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);
|
|
173
186
|
export {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
187
|
+
t as PieCard,
|
|
188
|
+
v as defaultProps,
|
|
189
|
+
I as paddingValues,
|
|
190
|
+
D as tags,
|
|
191
|
+
P as variants
|
|
179
192
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import type { CSSResult } from 'lit';
|
|
3
|
-
import
|
|
3
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
4
4
|
import type { PropertyValues } from 'lit';
|
|
5
5
|
import * as React_2 from 'react';
|
|
6
6
|
import type { TemplateResult } from 'lit';
|
|
@@ -63,7 +63,7 @@ export declare const PieCard: React_2.ForwardRefExoticComponent<CardProps & Reac
|
|
|
63
63
|
/**
|
|
64
64
|
* @tagname pie-card
|
|
65
65
|
*/
|
|
66
|
-
declare class PieCard_2 extends
|
|
66
|
+
declare class PieCard_2 extends PieElement implements CardProps {
|
|
67
67
|
tag: "a" | "button";
|
|
68
68
|
variant: "default" | "outline" | "inverse" | "outline-inverse";
|
|
69
69
|
href: CardProps['href'];
|
package/package.json
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-card",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.24.0",
|
|
4
4
|
"description": "PIE Design System Card built using Web Components",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/justeattakeaway/pie",
|
|
8
|
+
"directory": "packages/components/pie-card"
|
|
9
|
+
},
|
|
10
|
+
"homepage": "https://pie.design/components/card/code/",
|
|
5
11
|
"type": "module",
|
|
6
12
|
"main": "dist/index.js",
|
|
7
13
|
"module": "dist/index.js",
|
|
@@ -33,13 +39,14 @@
|
|
|
33
39
|
"license": "Apache-2.0",
|
|
34
40
|
"devDependencies": {
|
|
35
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
36
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
37
|
-
"@justeattakeaway/pie-css": "0.
|
|
38
|
-
"@justeattakeaway/pie-
|
|
42
|
+
"@justeattakeaway/pie-components-config": "0.19.0",
|
|
43
|
+
"@justeattakeaway/pie-css": "0.16.0",
|
|
44
|
+
"@justeattakeaway/pie-monorepo-utils": "0.5.0",
|
|
45
|
+
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
39
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
40
47
|
},
|
|
41
48
|
"dependencies": {
|
|
42
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
49
|
+
"@justeattakeaway/pie-webc-core": "0.25.0"
|
|
43
50
|
},
|
|
44
51
|
"volta": {
|
|
45
52
|
"extends": "../../../package.json"
|
package/src/index.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
|
-
html,
|
|
2
|
+
html, unsafeCSS, nothing, type TemplateResult, type PropertyValues,
|
|
3
3
|
} from 'lit';
|
|
4
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
4
5
|
import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
|
|
5
6
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
7
|
import { property, queryAssignedElements } from 'lit/decorators.js';
|
|
@@ -22,7 +23,7 @@ const componentSelector = 'pie-card';
|
|
|
22
23
|
/**
|
|
23
24
|
* @tagname pie-card
|
|
24
25
|
*/
|
|
25
|
-
export class PieCard extends
|
|
26
|
+
export class PieCard extends PieElement implements CardProps {
|
|
26
27
|
@property({ type: String })
|
|
27
28
|
@validPropertyValues(componentSelector, tags, defaultProps.tag)
|
|
28
29
|
public tag = defaultProps.tag;
|