@justeattakeaway/pie-button 0.13.0 → 0.14.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/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +8 -0
- package/dist/index.js +27 -23
- package/dist/react.js +1 -1
- package/dist/types/packages/components/pie-button/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/button.scss +65 -69
- package/src/index.ts +6 -4
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
[
|
|
1
|
+
[7:49:27 AM] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
2
|
react wrapper has been added!
|
|
3
3
|
[36mvite v4.2.1 [32mbuilding for production...[36m[39m
|
|
4
4
|
transforming...
|
|
5
5
|
[32m✓[39m 19 modules transformed.
|
|
6
6
|
rendering chunks...
|
|
7
7
|
computing gzip size...
|
|
8
|
-
[2mdist/[22m[36mindex.js [39m[1m[2m 6.
|
|
8
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m 6.40 kB[22m[1m[22m[2m │ gzip: 1.78 kB[22m
|
|
9
9
|
[2mdist/[22m[36mreact.js [39m[1m[2m59.13 kB[22m[1m[22m[2m │ gzip: 15.94 kB[22m
|
|
10
10
|
[32m
|
|
11
11
|
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
-
[32m✓[39m built in
|
|
13
|
-
[32m[36m[vite:dts][32m Declaration files built in
|
|
12
|
+
[32m✓[39m built in 15.39s
|
|
13
|
+
[32m[36m[vite:dts][32m Declaration files built in 14137ms.
|
|
14
14
|
[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.14.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [Changed] - customElement.define parameter to string ([#507](https://github.com/justeattakeaway/pie/pull/507)) by [@LTurns](https://github.com/LTurns)
|
|
8
|
+
|
|
9
|
+
- [Fixed] – Encapsulated styles and removed reflect ([#507](https://github.com/justeattakeaway/pie/pull/507)) by [@LTurns](https://github.com/LTurns)
|
|
10
|
+
|
|
3
11
|
## 0.13.0
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
package/dist/index.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
import { unsafeCSS as f, LitElement as g, html as m } from "lit";
|
|
2
2
|
import { property as c } from "lit/decorators.js";
|
|
3
3
|
import "lit/decorators/property.js";
|
|
4
|
-
const u = (t,
|
|
5
|
-
const
|
|
6
|
-
Object.defineProperty(
|
|
4
|
+
const u = (t, e, n) => function(a, o) {
|
|
5
|
+
const r = `#${o}`;
|
|
6
|
+
Object.defineProperty(a, o, {
|
|
7
7
|
get() {
|
|
8
|
-
return this[
|
|
8
|
+
return this[r];
|
|
9
9
|
},
|
|
10
10
|
set(i) {
|
|
11
|
-
const p = this[
|
|
12
|
-
|
|
11
|
+
const p = this[r];
|
|
12
|
+
e.includes(i) ? this[r] = i : (console.error(
|
|
13
13
|
`<${t}> Invalid value "${i}" provided for property "${o}".`,
|
|
14
|
-
`Must be one of: ${
|
|
15
|
-
`Falling back to default value: "${
|
|
16
|
-
), this[
|
|
14
|
+
`Must be one of: ${e.join(" | ")}.`,
|
|
15
|
+
`Falling back to default value: "${n}"`
|
|
16
|
+
), this[r] = n), this.requestUpdate(o, p);
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
}, y =
|
|
19
|
+
}, y = `.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-padding: 10px var(--dt-spacing-e);--btn-min-height: 48px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);min-block-size:var(--btn-min-block-size);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none}.o-btn:focus-visible{outline:2px solid var(--btn-focus)}.o-btn[variant=primary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.o-btn[variant=primary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-hover-01)))}.o-btn[variant=secondary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-active-01)))}.o-btn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-interactive-tertiary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-btn[variant=outline]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-btn[variant=ghost]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-btn[variant=ghost]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-btn[isFullWidth]{inline-size:100%}.o-btn[disabled]{--btn-bg-color: var(--dt-color-disabled-01);--btn-text-color: var(--dt-color-content-disabled);border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}.o-btn[disabled][variant=ghost]{--btn-bg-color: var(--dt-color-container-default);outline:none}.o-btn[size=xsmall]{--btn-padding: 6px var(--dt-spacing-b);--btn-min-block-size: 32px;--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px)}.o-btn[size=small]{--btn-padding: 8px var(--dt-spacing-d);--btn-min-block-size: 40px;--btn-font-size: calc(var(--dt-font-size-19) * 1px);--btn-line-height: calc(var(--dt-font-size-19-line-height) * 1px)}.o-btn[size=large]{--btn-padding: 14px var(--dt-spacing-e);--btn-min-block-size: 56px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px)}
|
|
20
20
|
`;
|
|
21
|
-
var s = /* @__PURE__ */ ((t) => (t.XSMALL = "xsmall", t.SMALL_EXPRESSIVE = "small-expressive", t.SMALL_PRODUCTIVE = "small-productive", t.MEDIUM = "medium", t.LARGE = "large", t))(s || {}), v = /* @__PURE__ */ ((t) => (t.SUBMIT = "submit", t.BUTTON = "button", t.RESET = "reset", t.MENU = "menu", t))(v || {}), b = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.OUTLINE = "outline", t.GHOST = "ghost", t))(b || {}), x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, d = (t,
|
|
22
|
-
for (var o =
|
|
23
|
-
(i = t[
|
|
24
|
-
return
|
|
21
|
+
var s = /* @__PURE__ */ ((t) => (t.XSMALL = "xsmall", t.SMALL_EXPRESSIVE = "small-expressive", t.SMALL_PRODUCTIVE = "small-productive", t.MEDIUM = "medium", t.LARGE = "large", t))(s || {}), v = /* @__PURE__ */ ((t) => (t.SUBMIT = "submit", t.BUTTON = "button", t.RESET = "reset", t.MENU = "menu", t))(v || {}), b = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.OUTLINE = "outline", t.GHOST = "ghost", t))(b || {}), x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, d = (t, e, n, a) => {
|
|
22
|
+
for (var o = a > 1 ? void 0 : a ? z(e, n) : e, r = t.length - 1, i; r >= 0; r--)
|
|
23
|
+
(i = t[r]) && (o = (a ? i(e, n, o) : i(o)) || o);
|
|
24
|
+
return a && o && x(e, n, o), o;
|
|
25
25
|
};
|
|
26
26
|
const h = "pie-button";
|
|
27
27
|
class l extends g {
|
|
@@ -30,16 +30,20 @@ class l extends g {
|
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
32
|
const {
|
|
33
|
-
type:
|
|
34
|
-
disabled:
|
|
35
|
-
isFullWidth:
|
|
33
|
+
type: e,
|
|
34
|
+
disabled: n,
|
|
35
|
+
isFullWidth: a,
|
|
36
|
+
variant: o,
|
|
37
|
+
size: r
|
|
36
38
|
} = this;
|
|
37
39
|
return m`
|
|
38
40
|
<button
|
|
39
41
|
class="o-btn"
|
|
40
|
-
type=${
|
|
41
|
-
|
|
42
|
-
|
|
42
|
+
type=${e}
|
|
43
|
+
variant=${o}
|
|
44
|
+
size=${r}
|
|
45
|
+
?disabled=${n}
|
|
46
|
+
?isFullWidth=${a}>
|
|
43
47
|
<slot></slot>
|
|
44
48
|
</button>`;
|
|
45
49
|
}
|
|
@@ -58,12 +62,12 @@ d([
|
|
|
58
62
|
u(h, Object.values(b), b.PRIMARY)
|
|
59
63
|
], l.prototype, "variant", 2);
|
|
60
64
|
d([
|
|
61
|
-
c({ type: Boolean
|
|
65
|
+
c({ type: Boolean })
|
|
62
66
|
], l.prototype, "disabled", 2);
|
|
63
67
|
d([
|
|
64
|
-
c({ type: Boolean
|
|
68
|
+
c({ type: Boolean })
|
|
65
69
|
], l.prototype, "isFullWidth", 2);
|
|
66
|
-
customElements.define(
|
|
70
|
+
customElements.define("pie-button", l);
|
|
67
71
|
export {
|
|
68
72
|
s as BUTTON_SIZE,
|
|
69
73
|
v as BUTTON_TYPE,
|
package/dist/react.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AAEpD,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC,qBAAa,SAAU,SAAQ,UAAU;IAGjC,IAAI,EAAG,WAAW,CAAsB;IAIxC,IAAI,EAAG,WAAW,CAAsB;IAIxC,OAAO,EAAG,cAAc,CAA0B;IAGlD,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAExB,MAAM;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AAEpD,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC,qBAAa,SAAU,SAAQ,UAAU;IAGjC,IAAI,EAAG,WAAW,CAAsB;IAIxC,IAAI,EAAG,WAAW,CAAsB;IAIxC,OAAO,EAAG,cAAc,CAA0B;IAGlD,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAExB,MAAM;IAkBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;KAClC;CACJ"}
|
package/package.json
CHANGED
package/src/button.scss
CHANGED
|
@@ -1,4 +1,19 @@
|
|
|
1
|
-
|
|
1
|
+
// Defines button interactive states for hover and active using HSL & calc
|
|
2
|
+
// Takes a color token name as an argument
|
|
3
|
+
@mixin button-interactive-states($bg-color) {
|
|
4
|
+
&:hover:not(:disabled) {
|
|
5
|
+
background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-hover-01)));
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
&:active:not(:disabled) {
|
|
9
|
+
background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-active-01)));
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// Base button styles
|
|
14
|
+
.o-btn {
|
|
15
|
+
// Custom Property Declarations
|
|
16
|
+
// These are defined here instead of :host to encapsulate them inside Shadow DOM
|
|
2
17
|
--btn-border-radius: var(--dt-radius-rounded-e);
|
|
3
18
|
--btn-font-family: var(--dt-font-interactive-m-family);
|
|
4
19
|
--btn-font-weight: var(--dt-font-interactive-m-weight);
|
|
@@ -14,20 +29,7 @@
|
|
|
14
29
|
--btn-bg-color: var(--dt-color-interactive-brand);
|
|
15
30
|
--btn-text-color: var(--dt-color-content-interactive-primary);
|
|
16
31
|
--btn-focus: var(--dt-color-focus-outer);
|
|
17
|
-
}
|
|
18
32
|
|
|
19
|
-
@mixin button-interactive-states($bg-color) {
|
|
20
|
-
& .o-btn:hover:not(:disabled) {
|
|
21
|
-
background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-hover-01)));
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
& .o-btn:active:not(:disabled) {
|
|
25
|
-
background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-active-01)));
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
// Base button styles
|
|
30
|
-
.o-btn {
|
|
31
33
|
min-block-size: var(--btn-min-block-size);
|
|
32
34
|
padding: var(--btn-padding);
|
|
33
35
|
border: none;
|
|
@@ -46,82 +48,76 @@
|
|
|
46
48
|
// TODO - Need to update to use the latest focus styling
|
|
47
49
|
outline: 2px solid var(--btn-focus);
|
|
48
50
|
}
|
|
49
|
-
}
|
|
50
51
|
|
|
51
|
-
//
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
52
|
+
// Variant
|
|
53
|
+
&[variant='primary'] {
|
|
54
|
+
@include button-interactive-states('--dt-color-interactive-brand');
|
|
55
|
+
}
|
|
55
56
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
&[variant='secondary'] {
|
|
58
|
+
--btn-bg-color: var(--dt-color-interactive-secondary);
|
|
59
|
+
--btn-text-color: var(--dt-color-content-interactive-secondary);
|
|
59
60
|
|
|
60
|
-
|
|
61
|
-
}
|
|
61
|
+
@include button-interactive-states('--dt-color-interactive-secondary');
|
|
62
|
+
}
|
|
62
63
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
&[variant='outline'] {
|
|
65
|
+
--btn-bg-color: var(--dt-color-container-default);
|
|
66
|
+
--btn-text-color: var(--dt-color-content-interactive-tertiary);
|
|
66
67
|
|
|
67
|
-
& .o-btn {
|
|
68
68
|
border: 1px solid var(--dt-color-border-strong);
|
|
69
|
+
|
|
70
|
+
@include button-interactive-states('--dt-color-container-default');
|
|
69
71
|
}
|
|
70
72
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
&[variant='ghost'] {
|
|
74
|
+
--btn-bg-color: var(--dt-color-container-default);
|
|
75
|
+
--btn-text-color: var(--dt-color-content-link);
|
|
73
76
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
--btn-text-color: var(--dt-color-content-link);
|
|
77
|
+
@include button-interactive-states('--dt-color-container-default');
|
|
78
|
+
}
|
|
77
79
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
+
// Additional modifiers
|
|
81
|
+
&[isFullWidth] {
|
|
82
|
+
inline-size: 100%;
|
|
83
|
+
}
|
|
80
84
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
85
|
+
&[disabled] {
|
|
86
|
+
--btn-bg-color: var(--dt-color-disabled-01);
|
|
87
|
+
--btn-text-color: var(--dt-color-content-disabled);
|
|
84
88
|
|
|
85
|
-
& .o-btn {
|
|
86
89
|
border: 1px solid var(--dt-color-disabled-01);
|
|
87
90
|
cursor: not-allowed;
|
|
88
91
|
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// Additional modifiers
|
|
92
|
-
:host([isFullWidth]) .o-btn {
|
|
93
|
-
inline-size: 100%;
|
|
94
|
-
}
|
|
95
92
|
|
|
96
|
-
|
|
97
|
-
|
|
93
|
+
&[disabled][variant='ghost'] {
|
|
94
|
+
--btn-bg-color: var(--dt-color-container-default);
|
|
98
95
|
|
|
99
|
-
& .o-btn {
|
|
100
96
|
outline: none;
|
|
101
97
|
}
|
|
102
|
-
}
|
|
103
98
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
99
|
+
&[size='xsmall'] {
|
|
100
|
+
--btn-padding: 6px var(--dt-spacing-b);
|
|
101
|
+
--btn-min-block-size: 32px;
|
|
102
|
+
--btn-font-size: calc(var(--dt-font-size-14) * 1px);
|
|
103
|
+
--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
|
|
104
|
+
}
|
|
110
105
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
}
|
|
106
|
+
&[size='small'] {
|
|
107
|
+
--btn-padding: 8px var(--dt-spacing-d);
|
|
108
|
+
--btn-min-block-size: 40px;
|
|
109
|
+
--btn-font-size: calc(var(--dt-font-size-19) * 1px);
|
|
110
|
+
--btn-line-height: calc(var(--dt-font-size-19-line-height) * 1px);
|
|
111
|
+
}
|
|
117
112
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
}
|
|
113
|
+
&[size='medium'] {
|
|
114
|
+
/* Same as default styles */
|
|
115
|
+
}
|
|
121
116
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
117
|
+
&[size='large'] {
|
|
118
|
+
--btn-padding: 14px var(--dt-spacing-e);
|
|
119
|
+
--btn-min-block-size: 56px;
|
|
120
|
+
--btn-font-size: calc(var(--dt-font-size-20) * 1px);
|
|
121
|
+
--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
|
|
122
|
+
}
|
|
127
123
|
}
|
package/src/index.ts
CHANGED
|
@@ -23,21 +23,23 @@ export class PieButton extends LitElement {
|
|
|
23
23
|
@validPropertyValues(componentSelector, Object.values(BUTTON_VARIANT), BUTTON_VARIANT.PRIMARY)
|
|
24
24
|
variant : BUTTON_VARIANT = BUTTON_VARIANT.PRIMARY;
|
|
25
25
|
|
|
26
|
-
@property({ type: Boolean
|
|
26
|
+
@property({ type: Boolean })
|
|
27
27
|
disabled = false;
|
|
28
28
|
|
|
29
|
-
@property({ type: Boolean
|
|
29
|
+
@property({ type: Boolean })
|
|
30
30
|
isFullWidth = false;
|
|
31
31
|
|
|
32
32
|
render () {
|
|
33
33
|
const {
|
|
34
|
-
type, disabled, isFullWidth,
|
|
34
|
+
type, disabled, isFullWidth, variant, size,
|
|
35
35
|
} = this;
|
|
36
36
|
|
|
37
37
|
return html`
|
|
38
38
|
<button
|
|
39
39
|
class="o-btn"
|
|
40
40
|
type=${type}
|
|
41
|
+
variant=${variant}
|
|
42
|
+
size=${size}
|
|
41
43
|
?disabled=${disabled}
|
|
42
44
|
?isFullWidth=${isFullWidth}>
|
|
43
45
|
<slot></slot>
|
|
@@ -48,7 +50,7 @@ export class PieButton extends LitElement {
|
|
|
48
50
|
static styles = unsafeCSS(styles);
|
|
49
51
|
}
|
|
50
52
|
|
|
51
|
-
customElements.define(
|
|
53
|
+
customElements.define('pie-button', PieButton);
|
|
52
54
|
|
|
53
55
|
declare global {
|
|
54
56
|
interface HTMLElementTagNameMap {
|