@justeattakeaway/pie-button 0.15.0 → 0.16.1
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 +10 -10
- package/CHANGELOG.md +12 -0
- package/README.md +52 -50
- package/dist/index.js +68 -52
- package/dist/react.js +209 -223
- package/dist/types/packages/components/pie-button/src/defs.d.ts +31 -20
- package/dist/types/packages/components/pie-button/src/defs.d.ts.map +1 -1
- package/dist/types/packages/components/pie-button/src/index.d.ts +5 -5
- package/dist/types/packages/components/pie-button/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/defs.ts +48 -20
- package/src/index.ts +15 -9
- package/test/accessibility/pie-button.spec.ts +10 -11
- package/test/component/pie-button.spec.ts +7 -5
- package/test/visual/pie-button.spec.ts +6 -5
- package/vite.config.js +1 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
[
|
|
1
|
+
[2:38:37 PM] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
2
|
react wrapper has been added!
|
|
3
|
-
|
|
3
|
+
[36mvite v4.3.9 [32mbuilding for production...[36m[39m
|
|
4
4
|
transforming...
|
|
5
|
-
|
|
5
|
+
[32m✓[39m 28 modules transformed.
|
|
6
6
|
rendering chunks...
|
|
7
7
|
computing gzip size...
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
[vite:dts] Start generate declaration files
|
|
12
|
-
✓ built in
|
|
13
|
-
[vite:dts] Declaration files built in
|
|
14
|
-
|
|
8
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m 7.96 kB[22m[1m[22m[2m │ gzip: 2.10 kB[22m
|
|
9
|
+
[2mdist/[22m[36mreact.js [39m[1m[2m59.01 kB[22m[1m[22m[2m │ gzip: 15.91 kB[22m
|
|
10
|
+
[32m
|
|
11
|
+
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
+
[32m✓ built in 22.93s[39m
|
|
13
|
+
[32m[36m[vite:dts][32m Declaration files built in 21054ms.
|
|
14
|
+
[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.16.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [Changed] - Updated defs to use different array type syntax ([#566](https://github.com/justeattakeaway/pie/pull/566)) by [@ashleynolan](https://github.com/ashleynolan)
|
|
8
|
+
|
|
9
|
+
## 0.16.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [Updated] - enum types to string union types to string union types ([#508](https://github.com/justeattakeaway/pie/pull/508)) by [@FayeCarter](https://github.com/FayeCarter)
|
|
14
|
+
|
|
3
15
|
## 0.15.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -17,54 +17,71 @@
|
|
|
17
17
|
- [HTML example](#html)
|
|
18
18
|
- [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
|
|
19
19
|
- [React example (using Next 13)](#react-templates-using-next-13)
|
|
20
|
-
5. [
|
|
21
|
-
6. [Testing](#testing)
|
|
20
|
+
5. [Testing](#testing)
|
|
22
21
|
- [Browser Tests](#browser-tests)
|
|
23
22
|
- [Visual Tests](#visual-tests)
|
|
24
23
|
|
|
25
24
|
|
|
26
25
|
## `pie-button`
|
|
27
26
|
|
|
28
|
-
`pie-button` is a Web Component built using the Lit library. It offers a simple and accessible button component for web applications.
|
|
27
|
+
`pie-button` is a Web Component built using the Lit library. It offers a simple and accessible button component for web applications.
|
|
28
|
+
|
|
29
|
+
This component can be easily integrated into various frontend frameworks and customized through a set of properties.
|
|
29
30
|
|
|
30
31
|
## Local development
|
|
31
32
|
|
|
32
|
-
Install dependencies
|
|
33
|
-
|
|
33
|
+
Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
34
36
|
yarn
|
|
35
37
|
```
|
|
36
38
|
|
|
37
|
-
|
|
38
|
-
```
|
|
39
|
-
cd packages/components/pie-button
|
|
40
|
-
yarn build
|
|
41
|
-
```
|
|
39
|
+
To build the `pie-button` package, run the following command:
|
|
42
40
|
|
|
43
|
-
|
|
41
|
+
```bash
|
|
42
|
+
yarn build --filter=pie-button
|
|
44
43
|
```
|
|
45
|
-
|
|
44
|
+
|
|
45
|
+
If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
yarn watch --filter=pie-button
|
|
49
|
+
|
|
50
|
+
# in a separate terminal tab, run
|
|
51
|
+
yarn dev --filter=pie-storybook
|
|
46
52
|
```
|
|
47
53
|
|
|
48
54
|
### Importing the component
|
|
49
55
|
|
|
50
56
|
```js
|
|
51
|
-
//
|
|
57
|
+
// Default – for Native JS Applications, Vue, Angular, Svelte etc.
|
|
52
58
|
import { PieButton } from '@justeattakeaway/pie-button';
|
|
53
59
|
|
|
54
|
-
//
|
|
60
|
+
// React
|
|
61
|
+
// For React, you will need to import our React specific component build
|
|
62
|
+
// Which wraps the web component using the @lit-labs/react package
|
|
55
63
|
import { PieButton } from '@justeattakeaway/pie-button/dist/react';
|
|
56
64
|
```
|
|
57
65
|
|
|
58
66
|
## Props
|
|
59
67
|
|
|
60
|
-
| Property | Type | Default | Description
|
|
61
|
-
|
|
62
|
-
| size | `String` | `
|
|
63
|
-
| type | `String` | `
|
|
64
|
-
| variant | `String` | `
|
|
65
|
-
| disabled | `Boolean` | `false` | If `true`, disables the button.
|
|
66
|
-
| isFullWidth | `Boolean` | `false` | If `true`, sets the button width to 100% of it's container.
|
|
68
|
+
| Property | Type | Default | Description |
|
|
69
|
+
|-------------|-----------|-----------------|----------------------------------------------------------------------------------------------------------------|
|
|
70
|
+
| size | `String` | `medium` | Size of the button, one of `buttonSizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large` |
|
|
71
|
+
| type | `String` | `submit` | Type of the button, one of `buttonTypes` – `submit`, `button`, `reset`, `menu` |
|
|
72
|
+
| variant | `String` | `primary` | Variant of the button, one of `buttonVariants`– `primary`, `secondary`, `outline`, `ghost` |
|
|
73
|
+
| disabled | `Boolean` | `false` | If `true`, disables the button. |
|
|
74
|
+
| isFullWidth | `Boolean` | `false` | If `true`, sets the button width to 100% of it's container. |
|
|
67
75
|
|
|
76
|
+
In your markup or JSX, you can then use these to set the properties for the `pie-button` component:
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<!-- Native HTML -->
|
|
80
|
+
<pie-button size='medium' type='button' variant='primary'>Click me!</pie-button>
|
|
81
|
+
|
|
82
|
+
<!-- JSX -->
|
|
83
|
+
<PieButton size='medium' type='button' variant='primary'>Click me!</PieButton>
|
|
84
|
+
```
|
|
68
85
|
|
|
69
86
|
## Events
|
|
70
87
|
|
|
@@ -73,73 +90,58 @@ This component does not use any custom event handlers. In order to add event lis
|
|
|
73
90
|
For example, to add a click handler in various templates:
|
|
74
91
|
|
|
75
92
|
### HTML
|
|
93
|
+
|
|
76
94
|
```html
|
|
77
95
|
<!-- Other attributes omitted for clarity -->
|
|
78
96
|
<pie-button onclick="e => console.log(e)">Click me!</pie-button>
|
|
79
97
|
```
|
|
80
98
|
|
|
81
99
|
### Vue templates (using Nuxt 3)
|
|
100
|
+
|
|
82
101
|
```html
|
|
83
102
|
<!-- Other attributes omitted for clarity -->
|
|
84
103
|
<pie-button @click="handleClick">Click me!</pie-button>
|
|
85
104
|
```
|
|
86
105
|
|
|
87
106
|
### React templates (using Next 13)
|
|
107
|
+
|
|
88
108
|
```html
|
|
89
109
|
<!-- Other attributes omitted for clarity -->
|
|
90
110
|
<PieButton onClick={handleClick}>increment</PieButton>
|
|
91
111
|
|
|
92
112
|
```
|
|
93
113
|
|
|
94
|
-
## TypeScript Enum Exports
|
|
95
|
-
|
|
96
|
-
For TypeScript projects, we export three enums related to button properties: `BUTTON_SIZE`, `BUTTON_TYPE`, and `BUTTON_VARIANT`. You can import and use these enums to set the corresponding property values for the `pie-button` component. This ensures better type safety and autocompletion in your project.
|
|
97
|
-
|
|
98
|
-
Here's an example of how to import and use the enums in a TypeScript project:
|
|
99
|
-
|
|
100
|
-
```typescript
|
|
101
|
-
import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from '@justeattakeaway/pie-button';
|
|
102
|
-
|
|
103
|
-
// Using the enums to set property values
|
|
104
|
-
const myButtonSize = BUTTON_SIZE.LARGE;
|
|
105
|
-
const myButtonType = BUTTON_TYPE.RESET;
|
|
106
|
-
const myButtonVariant = BUTTON_VARIANT.SECONDARY;
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
In your markup or JSX, you can then use these variables to set the properties for the pie-button component:
|
|
110
|
-
|
|
111
|
-
```html
|
|
112
|
-
<PieButton size={myButtonSize} type={myButtonType} variant={myButtonVariant}>Click me!</PieButton>
|
|
113
|
-
```
|
|
114
|
-
|
|
115
114
|
|
|
116
115
|
## Testing
|
|
117
116
|
|
|
118
117
|
### Browser tests
|
|
119
118
|
|
|
120
|
-
|
|
121
|
-
|
|
119
|
+
To run the browser tests, run the following command from the root of the monorepo:
|
|
120
|
+
|
|
121
|
+
```bash
|
|
122
122
|
yarn test:browsers --filter=pie-button
|
|
123
123
|
```
|
|
124
124
|
|
|
125
125
|
### Visual tests
|
|
126
126
|
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
To run the visual regression tests, run the following command from the root of the monorepo:
|
|
128
|
+
|
|
129
|
+
```bash
|
|
129
130
|
yarn test:visual --filter=pie-button
|
|
130
131
|
```
|
|
131
132
|
|
|
132
133
|
Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
|
|
133
134
|
|
|
134
|
-
Setup via bash
|
|
135
|
+
#### Setup via bash
|
|
135
136
|
|
|
136
|
-
```
|
|
137
|
+
```bash
|
|
137
138
|
export PERCY_TOKEN_PIE_BUTTON=abcde
|
|
138
139
|
```
|
|
139
140
|
|
|
140
|
-
Setup via package.json
|
|
141
|
+
#### Setup via package.json
|
|
141
142
|
|
|
142
143
|
Under scripts `test:visual` replace the environment variable with the below:
|
|
143
144
|
|
|
144
|
-
```
|
|
145
|
+
```bash
|
|
145
146
|
PERCY_TOKEN_PIE_BUTTON=abcde
|
|
147
|
+
```
|
package/dist/index.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
1
|
+
import { unsafeCSS as h, LitElement as f, html as v } from "lit";
|
|
2
2
|
import { property as c } from "lit/decorators.js";
|
|
3
3
|
import "lit/decorators/property.js";
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
Object.defineProperty(
|
|
4
|
+
const b = (i, o, e) => function(r, t) {
|
|
5
|
+
const n = `#${t}`;
|
|
6
|
+
Object.defineProperty(r, t, {
|
|
7
7
|
get() {
|
|
8
|
-
return this[
|
|
8
|
+
return this[n];
|
|
9
9
|
},
|
|
10
|
-
set(
|
|
11
|
-
const
|
|
12
|
-
o.includes(
|
|
13
|
-
`<${
|
|
10
|
+
set(a) {
|
|
11
|
+
const g = this[n];
|
|
12
|
+
o.includes(a) ? this[n] = a : (console.error(
|
|
13
|
+
`<${i}> Invalid value "${a}" provided for property "${t}".`,
|
|
14
14
|
`Must be one of: ${o.join(" | ")}.`,
|
|
15
|
-
`Falling back to default value: "${
|
|
16
|
-
), this[
|
|
15
|
+
`Falling back to default value: "${e}"`
|
|
16
|
+
), this[n] = e), this.requestUpdate(t, g);
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
},
|
|
19
|
+
}, m = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
|
|
20
20
|
`;
|
|
21
|
-
var
|
|
22
|
-
for (var
|
|
23
|
-
(
|
|
24
|
-
return
|
|
21
|
+
var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, z = (i, o, e, r) => {
|
|
22
|
+
for (var t = r > 1 ? void 0 : r ? x(o, e) : o, n = i.length - 1, a; n >= 0; n--)
|
|
23
|
+
(a = i[n]) && (t = (r ? a(o, e, t) : a(t)) || t);
|
|
24
|
+
return r && t && y(o, e, t), t;
|
|
25
25
|
};
|
|
26
|
-
class
|
|
26
|
+
class p extends f {
|
|
27
27
|
constructor() {
|
|
28
28
|
super(...arguments), this.propKeyValues = "";
|
|
29
29
|
}
|
|
@@ -33,13 +33,13 @@ class f extends y {
|
|
|
33
33
|
// <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
|
|
34
34
|
_renderPropKeyValues() {
|
|
35
35
|
return this.propKeyValues.split(",").map((o) => {
|
|
36
|
-
const [
|
|
37
|
-
return
|
|
36
|
+
const [e, r] = o.split(":");
|
|
37
|
+
return v`<p class="c-webComponentTestWrapper-label"><b>${e}</b>: <code>${r}</code></p>`;
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
40
|
// eslint-disable-next-line class-methods-use-this
|
|
41
41
|
render() {
|
|
42
|
-
return
|
|
42
|
+
return v`
|
|
43
43
|
<div class="c-webComponentTestWrapper">
|
|
44
44
|
${this._renderPropKeyValues()}
|
|
45
45
|
<div class="c-webComponentTestWrapper-slot">
|
|
@@ -48,56 +48,72 @@ class f extends y {
|
|
|
48
48
|
</div>`;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
p.styles = h(m);
|
|
52
|
+
z([
|
|
53
53
|
c({ type: String })
|
|
54
|
-
],
|
|
55
|
-
const
|
|
56
|
-
customElements.get(
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
54
|
+
], p.prototype, "propKeyValues", 2);
|
|
55
|
+
const u = "web-component-test-wrapper";
|
|
56
|
+
customElements.get(u) || customElements.define(u, p);
|
|
57
|
+
const $ = `.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)}
|
|
58
|
+
`, w = [
|
|
59
|
+
"xsmall",
|
|
60
|
+
"small-expressive",
|
|
61
|
+
"small-productive",
|
|
62
|
+
"medium",
|
|
63
|
+
"large"
|
|
64
|
+
], k = [
|
|
65
|
+
"primary",
|
|
66
|
+
"secondary",
|
|
67
|
+
"outline",
|
|
68
|
+
"ghost"
|
|
69
|
+
], P = [
|
|
70
|
+
"submit",
|
|
71
|
+
"button",
|
|
72
|
+
"reset",
|
|
73
|
+
"menu"
|
|
74
|
+
];
|
|
75
|
+
var _ = Object.defineProperty, W = Object.getOwnPropertyDescriptor, s = (i, o, e, r) => {
|
|
76
|
+
for (var t = r > 1 ? void 0 : r ? W(o, e) : o, n = i.length - 1, a; n >= 0; n--)
|
|
77
|
+
(a = i[n]) && (t = (r ? a(o, e, t) : a(t)) || t);
|
|
78
|
+
return r && t && _(o, e, t), t;
|
|
63
79
|
};
|
|
64
|
-
const
|
|
65
|
-
class l extends
|
|
80
|
+
const d = "pie-button";
|
|
81
|
+
class l extends f {
|
|
66
82
|
constructor() {
|
|
67
|
-
super(...arguments), this.size =
|
|
83
|
+
super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.disabled = !1, this.isFullWidth = !1;
|
|
68
84
|
}
|
|
69
85
|
render() {
|
|
70
86
|
const {
|
|
71
87
|
type: o,
|
|
72
|
-
disabled:
|
|
73
|
-
isFullWidth:
|
|
74
|
-
variant:
|
|
75
|
-
size:
|
|
88
|
+
disabled: e,
|
|
89
|
+
isFullWidth: r,
|
|
90
|
+
variant: t,
|
|
91
|
+
size: n
|
|
76
92
|
} = this;
|
|
77
|
-
return
|
|
93
|
+
return v`
|
|
78
94
|
<button
|
|
79
95
|
class="o-btn"
|
|
80
96
|
type=${o}
|
|
81
|
-
variant=${
|
|
82
|
-
size=${
|
|
83
|
-
?disabled=${
|
|
84
|
-
?isFullWidth=${
|
|
97
|
+
variant=${t}
|
|
98
|
+
size=${n}
|
|
99
|
+
?disabled=${e}
|
|
100
|
+
?isFullWidth=${r}>
|
|
85
101
|
<slot></slot>
|
|
86
102
|
</button>`;
|
|
87
103
|
}
|
|
88
104
|
}
|
|
89
|
-
l.styles =
|
|
105
|
+
l.styles = h($);
|
|
90
106
|
s([
|
|
91
107
|
c(),
|
|
92
|
-
|
|
108
|
+
b(d, w, "medium")
|
|
93
109
|
], l.prototype, "size", 2);
|
|
94
110
|
s([
|
|
95
111
|
c(),
|
|
96
|
-
|
|
112
|
+
b(d, P, "submit")
|
|
97
113
|
], l.prototype, "type", 2);
|
|
98
114
|
s([
|
|
99
115
|
c(),
|
|
100
|
-
|
|
116
|
+
b(d, k, "primary")
|
|
101
117
|
], l.prototype, "variant", 2);
|
|
102
118
|
s([
|
|
103
119
|
c({ type: Boolean })
|
|
@@ -105,10 +121,10 @@ s([
|
|
|
105
121
|
s([
|
|
106
122
|
c({ type: Boolean })
|
|
107
123
|
], l.prototype, "isFullWidth", 2);
|
|
108
|
-
customElements.define(
|
|
124
|
+
customElements.define(d, l);
|
|
109
125
|
export {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
126
|
+
l as PieButton,
|
|
127
|
+
w as buttonSizes,
|
|
128
|
+
P as buttonTypes,
|
|
129
|
+
k as buttonVariants
|
|
114
130
|
};
|