@justeattakeaway/pie-button 0.41.1 → 0.42.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/README.md +4 -170
- package/dist/index.js +26 -26
- package/package.json +3 -3
- package/src/button.scss +8 -7
- package/src/index.ts +1 -1
package/README.md
CHANGED
|
@@ -8,20 +8,6 @@
|
|
|
8
8
|
</a>
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
|
-
# Table of Contents
|
|
12
|
-
|
|
13
|
-
1. [Introduction](#pie-button)
|
|
14
|
-
2. [Installation](#installation)
|
|
15
|
-
3. [Importing the component](#importing-the-component)
|
|
16
|
-
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
-
5. [Props](#props)
|
|
18
|
-
6. [Events](#events)
|
|
19
|
-
- [HTML example](#html)
|
|
20
|
-
- [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
|
|
21
|
-
- [React example (using Next 13)](#react-templates-using-next-13)
|
|
22
|
-
7. [Forms usage](#forms-usage)
|
|
23
|
-
8. [Contributing](#contributing)
|
|
24
|
-
|
|
25
11
|
|
|
26
12
|
## pie-button
|
|
27
13
|
|
|
@@ -42,165 +28,13 @@ $ npm i @justeattakeaway/pie-button
|
|
|
42
28
|
$ yarn add @justeattakeaway/pie-button
|
|
43
29
|
```
|
|
44
30
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
### Importing the component
|
|
49
|
-
|
|
50
|
-
#### JavaScript
|
|
51
|
-
```js
|
|
52
|
-
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
53
|
-
import { PieButton } from '@justeattakeaway/pie-button';
|
|
54
|
-
|
|
55
|
-
// If you don't need to reference the imported object, you can simply
|
|
56
|
-
// import the module which registers the component as a custom element.
|
|
57
|
-
import '@justeattakeaway/pie-button';
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
#### React
|
|
61
|
-
```js
|
|
62
|
-
// React
|
|
63
|
-
// For React, you will need to import our React-specific component build
|
|
64
|
-
// which wraps the web component using @lit/react
|
|
65
|
-
import { PieButton } from '@justeattakeaway/pie-button/dist/react';
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
> [!NOTE]
|
|
69
|
-
> When using the React version of the component, please make sure to also
|
|
70
|
-
> include React as a [peer dependency](#peer-dependencies) in your project.
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
## Peer Dependencies
|
|
74
|
-
|
|
75
|
-
> [!IMPORTANT]
|
|
76
|
-
> When using `pie-button`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki for more information and how to include these in your application](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies).
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
## Props
|
|
80
|
-
|
|
81
|
-
| Property | Type | Default | Description |
|
|
82
|
-
|----------------|-----------|------------|----------------------------------------------------------------------------------------------------------------------|
|
|
83
|
-
| size | `String` | `medium` | Size of the button, one of `sizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large` |
|
|
84
|
-
| type | `String` | `submit` | Type of the button, one of `types` – `submit`, `button`, `reset`. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)|
|
|
85
|
-
| variant | `String` | `primary` | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost`, `destructive`, `destructive-ghost`, `inverse`, `ghost-inverse`, `outline-inverse` |
|
|
86
|
-
| disabled | `Boolean` | `false` | If `true`, disables the button. |
|
|
87
|
-
| isFullWidth | `Boolean` | `false` | If `true`, sets the button width to 100% of its container. |
|
|
88
|
-
| isLoading | `Boolean` | `false` | If `true`, displays a loading indicator inside the button. |
|
|
89
|
-
| isResponsive | `Boolean` | `false` | If `true`, uses the next larger size on wide viewports. |
|
|
90
|
-
| iconPlacement | `String` | `leading` | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing` |
|
|
91
|
-
| name | `String` | `undefined`| The name of the button, to be submitted with form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) |
|
|
92
|
-
| value | `String` | `undefined`| The value of the button, to be submitted with form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-value) |
|
|
93
|
-
| formaction | `String` | `undefined`| Designates an alternative URL for form data submission. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction) |
|
|
94
|
-
| formenctype | `String` | `undefined`| Specifies the form data encoding type. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formenctype) |
|
|
95
|
-
| formmethod | `String` | `undefined`| Sets the HTTP method for form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formmethod) |
|
|
96
|
-
| formnovalidate | `Boolean` | `undefined` | Ensures the form is submitted without native HTML validation. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formnovalidate) |
|
|
97
|
-
| formtarget | `String` | `undefined`| Dictates where to display the response after form submission. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formtarget) |
|
|
98
|
-
| responsiveSize | `String` | `productive`| Sets a specific size for xsmall button when rendered as responsive. It can be `productive` or `expressive`. |
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
In your markup or JSX, you can then use these to set the properties for the `pie-button` component:
|
|
102
|
-
|
|
103
|
-
```html
|
|
104
|
-
<!-- Native HTML -->
|
|
105
|
-
<pie-button size='medium' type='button' variant='primary'>Click me!</pie-button>
|
|
106
|
-
|
|
107
|
-
<!-- JSX -->
|
|
108
|
-
<PieButton size='medium' type='button' variant='primary'>Click me!</PieButton>
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
## Slots
|
|
113
|
-
|
|
114
|
-
| Slot | Description |
|
|
115
|
-
|---------------|------------------------------------------------------------------------------------------------------------------------------------|
|
|
116
|
-
| Default slot | The default slot is used to pass text into the button component. |
|
|
117
|
-
| icon | Used to pass in an icon to the button component. The icon placement can be controlled via the `iconPlacement` prop and we recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. |
|
|
118
|
-
|
|
119
|
-
### Using `pie-icons-webc` with `pie-button` icon slot
|
|
120
|
-
|
|
121
|
-
We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this:
|
|
122
|
-
|
|
123
|
-
```html
|
|
124
|
-
<!--
|
|
125
|
-
Note that pie-button and the icon that you want to use will need to be imported as components into your application.
|
|
126
|
-
See the `pie-icons-webc` README for more info on importing these icons.
|
|
127
|
-
-->
|
|
128
|
-
<pie-button>
|
|
129
|
-
<icon-plus-circle slot="icon"></icon-plus-circle>
|
|
130
|
-
Search
|
|
131
|
-
</pie-button>
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
## Events
|
|
136
|
-
|
|
137
|
-
This component does not use any custom event handlers. In order to add event listening to this component, you can treat it like a native HTML element in your application.
|
|
138
|
-
|
|
139
|
-
For example, to add a click handler in various templates:
|
|
140
|
-
|
|
141
|
-
### HTML
|
|
142
|
-
|
|
143
|
-
```html
|
|
144
|
-
<!-- Other attributes omitted for clarity -->
|
|
145
|
-
<pie-button onclick="e => console.log(e)">Click me!</pie-button>
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
### Vue templates (using Nuxt 3)
|
|
149
|
-
|
|
150
|
-
```html
|
|
151
|
-
<!-- Other attributes omitted for clarity -->
|
|
152
|
-
<pie-button @click="handleClick">Click me!</pie-button>
|
|
153
|
-
```
|
|
31
|
+
## Documentation
|
|
154
32
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
```html
|
|
158
|
-
<!-- Other attributes omitted for clarity -->
|
|
159
|
-
<PieButton onClick={handleClick}>increment</PieButton>
|
|
160
|
-
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
## Forms usage
|
|
164
|
-
|
|
165
|
-
The `pie-button` web component is designed to integrate with standard HTML forms just like a native HTML button. When positioned inside a form, the component will automatically associate itself, enabling it to directly interact with the form context.
|
|
166
|
-
|
|
167
|
-
### Button Attributes
|
|
168
|
-
|
|
169
|
-
The `pie-button` provides a set of attributes to customize its behavior within forms:
|
|
170
|
-
|
|
171
|
-
- `type`: Determines the button's function. Set to `submit` for form submissions or `reset` to clear form fields.
|
|
172
|
-
- `formaction`: Designates an alternative URL for form data submission when this specific button is clicked.
|
|
173
|
-
- `formenctype`: Specifies the form data encoding type during submission via this button.
|
|
174
|
-
- `formmethod`: Sets the HTTP method (e.g., GET or POST) for form data when initiated by this button.
|
|
175
|
-
- `formnovalidate`: If present, ensures the form is submitted without validation checks.
|
|
176
|
-
- `formtarget`: Dictates where to display the response after form submission.
|
|
177
|
-
|
|
178
|
-
Please see the [MDN docs]((https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)) for more information on these attributes.
|
|
179
|
-
|
|
180
|
-
### Integration Example
|
|
181
|
-
|
|
182
|
-
```html
|
|
183
|
-
<form action="/default-endpoint" method="post">
|
|
184
|
-
<input type="text" name="username" required>
|
|
185
|
-
<pie-button
|
|
186
|
-
type="submit"
|
|
187
|
-
formaction="/alternate-endpoint"
|
|
188
|
-
formenctype="multipart/form-data"
|
|
189
|
-
formmethod="post"
|
|
190
|
-
formnovalidate
|
|
191
|
-
formtarget="_blank">
|
|
192
|
-
Submit
|
|
193
|
-
</pie-button>
|
|
194
|
-
</form>
|
|
195
|
-
```
|
|
33
|
+
Visit [Button | PIE Design System](https://pie.design/components/button/overview) to view more information on this component.
|
|
196
34
|
|
|
197
|
-
|
|
35
|
+
## Questions
|
|
198
36
|
|
|
199
|
-
|
|
200
|
-
- It uses the multipart/form-data encoding type for form submission.
|
|
201
|
-
- The form will submit using the POST method.
|
|
202
|
-
- No validation will be performed during submission, thanks to formnovalidate.
|
|
203
|
-
- The form's submission response will be opened in a new browser tab/window because of the formtarget="_blank" attribute.
|
|
37
|
+
Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
|
|
204
38
|
|
|
205
39
|
## Contributing
|
|
206
40
|
|
package/dist/index.js
CHANGED
|
@@ -13,10 +13,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
|
|
|
13
13
|
"ghost-inverse",
|
|
14
14
|
"destructive",
|
|
15
15
|
"destructive-ghost"
|
|
16
|
-
], Lt = ["leading", "trailing"], Pt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Dt = ["post", "get", "dialog"], $t = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.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-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);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;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.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){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--btn-icon-size: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}
|
|
16
|
+
], Lt = ["leading", "trailing"], Pt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Dt = ["post", "get", "dialog"], $t = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.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-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);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;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.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){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
|
|
17
17
|
`;
|
|
18
18
|
(function() {
|
|
19
|
-
const p = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(),
|
|
19
|
+
const p = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), S = {
|
|
20
20
|
ariaAtomic: "aria-atomic",
|
|
21
21
|
ariaAutoComplete: "aria-autocomplete",
|
|
22
22
|
ariaBusy: "aria-busy",
|
|
@@ -100,7 +100,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
|
|
|
100
100
|
i.forEach((t) => {
|
|
101
101
|
const { addedNodes: e, removedNodes: r } = t, o = Array.from(e), l = Array.from(r);
|
|
102
102
|
o.forEach((n) => {
|
|
103
|
-
var
|
|
103
|
+
var b;
|
|
104
104
|
if (c.has(n) && n.constructor.formAssociated && U(n), k.has(n)) {
|
|
105
105
|
const d = k.get(n);
|
|
106
106
|
Object.keys(S).filter((w) => d[w] !== null).forEach((w) => {
|
|
@@ -121,10 +121,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
|
|
|
121
121
|
for (; w; )
|
|
122
122
|
U(w), w = E.nextNode();
|
|
123
123
|
}
|
|
124
|
-
n.localName === "fieldset" && ((
|
|
124
|
+
n.localName === "fieldset" && ((b = z.observe) == null || b.call(z, n, G), j(n, !0));
|
|
125
125
|
}), l.forEach((n) => {
|
|
126
|
-
const
|
|
127
|
-
|
|
126
|
+
const b = c.get(n);
|
|
127
|
+
b && a.get(b) && J(b), g.has(n) && g.get(n).disconnect();
|
|
128
128
|
});
|
|
129
129
|
});
|
|
130
130
|
}
|
|
@@ -178,7 +178,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
|
|
|
178
178
|
const o = y.get(i);
|
|
179
179
|
if (i.noValidate)
|
|
180
180
|
return;
|
|
181
|
-
o.size && Array.from(o).reverse().map((
|
|
181
|
+
o.size && Array.from(o).reverse().map((b) => c.get(b).reportValidity()).includes(!1) && e.preventDefault();
|
|
182
182
|
}
|
|
183
183
|
});
|
|
184
184
|
}, vt = (i) => {
|
|
@@ -224,7 +224,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
|
|
|
224
224
|
this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
|
|
225
225
|
}
|
|
226
226
|
}
|
|
227
|
-
const mt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid =
|
|
227
|
+
const mt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid = ut(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && A(e), i), ut = (i) => {
|
|
228
228
|
let t = !0;
|
|
229
229
|
for (let e in i)
|
|
230
230
|
e !== "valid" && i[e] !== !1 && (t = !1);
|
|
@@ -269,7 +269,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
|
|
|
269
269
|
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
270
270
|
return e === "m" ? r : e === "a" ? r.call(i) : r ? r.value : t.get(i);
|
|
271
271
|
}
|
|
272
|
-
function
|
|
272
|
+
function bt(i, t, e, r, o) {
|
|
273
273
|
if (r === "m")
|
|
274
274
|
throw new TypeError("Private method is not writable");
|
|
275
275
|
if (r === "a" && !o)
|
|
@@ -281,7 +281,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
|
|
|
281
281
|
var C;
|
|
282
282
|
class ft {
|
|
283
283
|
constructor(t) {
|
|
284
|
-
C.set(this, void 0),
|
|
284
|
+
C.set(this, void 0), bt(this, C, t, "f");
|
|
285
285
|
for (let e = 0; e < t.length; e++) {
|
|
286
286
|
let r = t[e];
|
|
287
287
|
this[e] = r, r.hasAttribute("name") && (this[r.getAttribute("name")] = r);
|
|
@@ -317,10 +317,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
|
|
|
317
317
|
const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
318
318
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
319
319
|
get(...l) {
|
|
320
|
-
const n = o.call(this, ...l),
|
|
321
|
-
if (
|
|
320
|
+
const n = o.call(this, ...l), b = Array.from(y.get(this) || []);
|
|
321
|
+
if (b.length === 0)
|
|
322
322
|
return n;
|
|
323
|
-
const d = Array.from(n).concat(
|
|
323
|
+
const d = Array.from(n).concat(b).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
|
|
324
324
|
return new ft(d);
|
|
325
325
|
}
|
|
326
326
|
});
|
|
@@ -396,12 +396,12 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
|
|
|
396
396
|
for (const E in t)
|
|
397
397
|
n[E] = t[E];
|
|
398
398
|
Object.keys(n).length === 0 && mt(l);
|
|
399
|
-
const
|
|
400
|
-
delete
|
|
401
|
-
const { valid: d } = pt(l,
|
|
399
|
+
const b = { ...l, ...n };
|
|
400
|
+
delete b.valid;
|
|
401
|
+
const { valid: d } = pt(l, b, this.form);
|
|
402
402
|
if (!d && !e)
|
|
403
403
|
throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
|
|
404
|
-
|
|
404
|
+
u.set(this, d ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : F.set(o, this);
|
|
405
405
|
}
|
|
406
406
|
get shadowRoot() {
|
|
407
407
|
const t = p.get(this), e = H.get(t);
|
|
@@ -409,7 +409,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
|
|
|
409
409
|
}
|
|
410
410
|
get validationMessage() {
|
|
411
411
|
const t = p.get(this);
|
|
412
|
-
return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."),
|
|
412
|
+
return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
|
|
413
413
|
}
|
|
414
414
|
get validity() {
|
|
415
415
|
const t = p.get(this);
|
|
@@ -491,9 +491,9 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
|
|
|
491
491
|
}
|
|
492
492
|
})();
|
|
493
493
|
var St = Object.defineProperty, At = Object.getOwnPropertyDescriptor, m = (p, s, a, c) => {
|
|
494
|
-
for (var
|
|
495
|
-
(g = p[f]) && (
|
|
496
|
-
return c &&
|
|
494
|
+
for (var u = c > 1 ? void 0 : c ? At(s, a) : s, f = p.length - 1, g; f >= 0; f--)
|
|
495
|
+
(g = p[f]) && (u = (c ? g(s, a, u) : g(u)) || u);
|
|
496
|
+
return c && u && St(s, a, u), u;
|
|
497
497
|
};
|
|
498
498
|
const L = "pie-button";
|
|
499
499
|
class v extends xt {
|
|
@@ -547,12 +547,12 @@ class v extends xt {
|
|
|
547
547
|
* @private
|
|
548
548
|
*/
|
|
549
549
|
renderSpinner() {
|
|
550
|
-
const { size: s, variant: a, disabled: c } = this,
|
|
550
|
+
const { size: s, variant: a, disabled: c } = this, u = s.includes("small") ? "small" : "medium";
|
|
551
551
|
let f;
|
|
552
552
|
return c ? f = a === "ghost-inverse" ? "inverse" : "secondary" : f = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", N`
|
|
553
553
|
<pie-spinner
|
|
554
|
-
size="${
|
|
555
|
-
variant="${f}"
|
|
554
|
+
size="${u}"
|
|
555
|
+
variant="${f}">
|
|
556
556
|
</pie-spinner>`;
|
|
557
557
|
}
|
|
558
558
|
render() {
|
|
@@ -560,7 +560,7 @@ class v extends xt {
|
|
|
560
560
|
type: s,
|
|
561
561
|
disabled: a,
|
|
562
562
|
isFullWidth: c,
|
|
563
|
-
variant:
|
|
563
|
+
variant: u,
|
|
564
564
|
size: f,
|
|
565
565
|
isLoading: g,
|
|
566
566
|
isResponsive: y,
|
|
@@ -572,7 +572,7 @@ class v extends xt {
|
|
|
572
572
|
@click=${this._handleClick}
|
|
573
573
|
class="o-btn"
|
|
574
574
|
type=${s}
|
|
575
|
-
variant=${
|
|
575
|
+
variant=${u}
|
|
576
576
|
size=${f}
|
|
577
577
|
responsiveSize=${Et(k)}
|
|
578
578
|
?disabled=${a}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.42.1",
|
|
4
4
|
"description": "PIE design system button built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"dist/*.js"
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@justeattakeaway/pie-spinner": "0.3.
|
|
41
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
40
|
+
"@justeattakeaway/pie-spinner": "0.3.2",
|
|
41
|
+
"@justeattakeaway/pie-webc-core": "0.14.0",
|
|
42
42
|
"element-internals-polyfill": "1.3.9"
|
|
43
43
|
}
|
|
44
44
|
}
|
package/src/button.scss
CHANGED
|
@@ -38,6 +38,7 @@ $breakpoint-wide: 768px;
|
|
|
38
38
|
--btn-height--small: 40px;
|
|
39
39
|
--btn-height--medium: 48px;
|
|
40
40
|
--btn-height--large: 56px;
|
|
41
|
+
--icon-display-override: block;
|
|
41
42
|
|
|
42
43
|
/**
|
|
43
44
|
* Mixin for updating the button styles based on the size passed in.
|
|
@@ -49,31 +50,31 @@ $breakpoint-wide: 768px;
|
|
|
49
50
|
--btn-padding: 6px var(--dt-spacing-b);
|
|
50
51
|
--btn-font-size: #{p.font-size(--dt-font-size-14)};
|
|
51
52
|
--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
|
|
52
|
-
--
|
|
53
|
+
--icon-size-override: 16px;
|
|
53
54
|
} @else if $size == 'small-expressive' {
|
|
54
55
|
--btn-height: var(--btn-height--small);
|
|
55
56
|
--btn-padding: 6px var(--dt-spacing-d);
|
|
56
57
|
--btn-font-size: #{p.font-size(--dt-font-size-20)};
|
|
57
58
|
--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
|
|
58
|
-
--
|
|
59
|
+
--icon-size-override: 20px;
|
|
59
60
|
} @else if $size == 'small-productive' {
|
|
60
61
|
--btn-height: var(--btn-height--small);
|
|
61
62
|
--btn-padding: 8px var(--dt-spacing-d);
|
|
62
63
|
--btn-font-size: #{p.font-size(--dt-font-size-16)};
|
|
63
64
|
--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
|
|
64
|
-
--
|
|
65
|
+
--icon-size-override: 20px;
|
|
65
66
|
} @else if $size == 'medium' {
|
|
66
67
|
--btn-height: var(--btn-height--medium);
|
|
67
68
|
--btn-padding: 10px var(--dt-spacing-e);
|
|
68
69
|
--btn-font-size: #{p.font-size(--dt-font-size-20)};
|
|
69
70
|
--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
|
|
70
|
-
--
|
|
71
|
+
--icon-size-override: 24px;
|
|
71
72
|
} @else if $size == 'large' {
|
|
72
73
|
--btn-height: var(--btn-height--large);
|
|
73
74
|
--btn-padding: 14px var(--dt-spacing-e);
|
|
74
75
|
--btn-font-size: #{p.font-size(--dt-font-size-20)};
|
|
75
76
|
--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
|
|
76
|
-
--
|
|
77
|
+
--icon-size-override: 24px;
|
|
77
78
|
}
|
|
78
79
|
}
|
|
79
80
|
|
|
@@ -254,6 +255,6 @@ $breakpoint-wide: 768px;
|
|
|
254
255
|
|
|
255
256
|
// Used to size an SVG if one is passed in (when not using the component icons)
|
|
256
257
|
::slotted(svg) {
|
|
257
|
-
height: var(--
|
|
258
|
-
width: var(--
|
|
258
|
+
height: var(--icon-size-override);
|
|
259
|
+
width: var(--icon-size-override);
|
|
259
260
|
}
|