@justeattakeaway/pie-chip 0.11.4 → 0.12.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 +93 -16
- package/custom-elements.json +2 -2
- package/dist/index.js +68 -72
- package/package.json +4 -4
- package/src/index.ts +3 -3
package/README.md
CHANGED
|
@@ -1,37 +1,114 @@
|
|
|
1
|
-
|
|
2
|
-
<img align="center" src="../../../readme_image.png" height="200" alt="">
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-chip
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-chip) | [Design Documentation](https://pie.design/components/chip) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-chip)
|
|
4
|
+
<p>
|
|
6
5
|
<a href="https://www.npmjs.com/@justeattakeaway/pie-chip">
|
|
7
6
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-chip.svg">
|
|
8
7
|
</a>
|
|
9
8
|
</p>
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
`pie-chip` is a Web Component built using the Lit library.
|
|
10
|
+
`@justeattakeaway/pie-chip` is a Web Component built using the Lit library. It offers a simple and accessible chip component for web applications.
|
|
14
11
|
|
|
15
|
-
|
|
12
|
+
## Table of Contents
|
|
16
13
|
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Documentation](#documentation)
|
|
16
|
+
- [Properties](#properties)
|
|
17
|
+
- [Slots](#slots)
|
|
18
|
+
- [CSS Variables](#css-variables)
|
|
19
|
+
- [Events](#events)
|
|
20
|
+
- [Usage Examples](#usage-examples)
|
|
21
|
+
- [Questions and Support](#questions-and-support)
|
|
22
|
+
- [Contributing](#contributing)
|
|
17
23
|
|
|
18
24
|
## Installation
|
|
19
25
|
|
|
20
|
-
To install
|
|
26
|
+
> To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
|
|
21
27
|
|
|
22
|
-
|
|
23
|
-
npm i @justeattakeaway/pie-chip
|
|
24
|
-
|
|
25
|
-
yarn add @justeattakeaway/pie-chip
|
|
26
|
-
```
|
|
28
|
+
Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
|
|
27
29
|
|
|
28
30
|
## Documentation
|
|
29
31
|
|
|
32
|
+
### Properties
|
|
33
|
+
|
|
34
|
+
| Prop | Options | Description | Default |
|
|
35
|
+
|----------------|------------------------------------------------------|--------------------------------------------------------------------------------------------------------------|-------------|
|
|
36
|
+
| `variant` | `"default"`, `"outline"`, `"ghost"` | Sets the variant of the chip. | `"default"` |
|
|
37
|
+
| `disabled` | `true`, `false` | If true, disables the chip. | `false` |
|
|
38
|
+
| `isSelected` | `true`, `false` | If true, the chip component will apply the selected styles. | `false` |
|
|
39
|
+
| `isDismissible`| `true`, `false` | If true, displays a close icon. Can be only used if `isSelected` is set to true. | `false` |
|
|
40
|
+
| `isLoading` | `true`, `false` | If true, displays a loading indicator inside the chip. | `false` |
|
|
41
|
+
| `aria` | `{ label?: string, close?: string }` | Aria properties for the chip to help with making it accessible. | `undefined` |
|
|
42
|
+
|
|
43
|
+
### Slots
|
|
44
|
+
|
|
45
|
+
| Slot | Description |
|
|
46
|
+
|-----------|-----------------------------------------------------------|
|
|
47
|
+
| `default` | The default slot is used to pass text into the chip component. |
|
|
48
|
+
| `icon` | Used to pass an icon into the chip component. |
|
|
49
|
+
|
|
50
|
+
### CSS Variables
|
|
51
|
+
This component does not expose any CSS variables for style overrides.
|
|
52
|
+
|
|
53
|
+
### Events
|
|
54
|
+
|
|
55
|
+
| Event | Type | Description |
|
|
56
|
+
|-------------------|---------------|-----------------------------------------------------|
|
|
57
|
+
| `pie-chip-close` | `CustomEvent` | Triggered when the user interacts with the close icon. |
|
|
58
|
+
|
|
30
59
|
Visit [Chip | PIE Design System](https://pie.design/components/chip) to view more information on this component.
|
|
31
60
|
|
|
32
|
-
##
|
|
61
|
+
## Usage Examples
|
|
62
|
+
|
|
63
|
+
**For HTML:**
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
// import as module into a js file e.g. main.js
|
|
67
|
+
import '@justeattakeaway/pie-webc/components/chip.js'
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<pie-chip>String</pie-chip>
|
|
72
|
+
|
|
73
|
+
<script type="module" src="/main.js"></script>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
**For Native JS Applications, Vue, Angular, Svelte etc.:**
|
|
77
|
+
|
|
78
|
+
```js
|
|
79
|
+
// Vue templates (using Nuxt 3)
|
|
80
|
+
import '@justeattakeaway/pie-webc/components/chip.js';
|
|
81
|
+
|
|
82
|
+
<pie-chip>String</pie-chip>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
**For React Applications:**
|
|
86
|
+
|
|
87
|
+
```jsx
|
|
88
|
+
import { PieChip } from '@justeattakeaway/pie-webc/react/chip.js';
|
|
89
|
+
|
|
90
|
+
<PieChip>String</PieChip>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Icons
|
|
94
|
+
|
|
95
|
+
We recommend using [@justeattakeaway/pie-icons-webc](https://www.npmjs.com/package/@justeattakeaway/pie-icons-webc) when using the `icon` slot. Here is an example of how you would do this:
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<!--
|
|
99
|
+
Note that pie-chip and the icons that you want to use will need to be imported as components into your application.
|
|
100
|
+
See the `pie-icons-webc` README for more info on importing these icons.
|
|
101
|
+
-->
|
|
102
|
+
<pie-chip>
|
|
103
|
+
<icon-vegan slot="icon"></icon-vegan>
|
|
104
|
+
String
|
|
105
|
+
</pie-chip>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
## Questions and Support
|
|
33
110
|
|
|
34
|
-
|
|
111
|
+
If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
|
|
35
112
|
|
|
36
113
|
## Contributing
|
|
37
114
|
|
package/custom-elements.json
CHANGED
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"type": {
|
|
36
36
|
"text": "DefaultProps"
|
|
37
37
|
},
|
|
38
|
-
"default": "{\n variant: 'default',\n disabled: false,\n isSelected: false,\n isLoading: false,\n isDismissible: false,\n}"
|
|
38
|
+
"default": "{\r\n variant: 'default',\r\n disabled: false,\r\n isSelected: false,\r\n isLoading: false,\r\n isDismissible: false,\r\n}"
|
|
39
39
|
}
|
|
40
40
|
],
|
|
41
41
|
"exports": [
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
137
|
],
|
|
138
|
-
"description": "Handler to prevent click events\nwhen the chip is disabled or dismissible"
|
|
138
|
+
"description": "Handler to prevent click events\r\nwhen the chip is disabled or dismissible"
|
|
139
139
|
},
|
|
140
140
|
{
|
|
141
141
|
"kind": "method",
|
package/dist/index.js
CHANGED
|
@@ -1,36 +1,31 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as
|
|
1
|
+
import { LitElement as u, unsafeCSS as f, html as v, nothing as g } from "lit";
|
|
2
|
+
import { property as d } from "lit/decorators.js";
|
|
3
3
|
import { ifDefined as p } from "lit/directives/if-defined.js";
|
|
4
|
-
import { classMap as
|
|
5
|
-
import {
|
|
4
|
+
import { classMap as x } from "lit/directives/class-map.js";
|
|
5
|
+
import { validPropertyValues as y, safeCustomElement as k, dispatchCustomEvent as w } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js";
|
|
7
7
|
import "@justeattakeaway/pie-spinner";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
(
|
|
11
|
-
return i && S(e, t, i), i;
|
|
12
|
-
};
|
|
13
|
-
class g extends x {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments), this.v = "0.11.4";
|
|
8
|
+
const h = class h extends u {
|
|
9
|
+
willUpdate() {
|
|
10
|
+
this.getAttribute("v") || this.setAttribute("v", h.v);
|
|
16
11
|
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
const _ = "*,*:after,*:before{box-sizing:inherit}.c-chip{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--chip-cursor: pointer;--chip-close-btn-cursor: pointer;--icon-display-override: block;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--chip-gap);padding-block-start:var(--chip-padding-block);padding-block-end:var(--chip-padding-block);padding-inline-start:var(--chip-padding-inline);padding-inline-end:var(--chip-padding-inline);background-color:var(--int-states-mixin-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:1px solid;border-color:var(--chip-border-color);cursor:var(--chip-cursor);-webkit-user-select:none;user-select:none;min-width:var(--chip-min-width);font-size:calc(var(--dt-font-interactive-xs-size) * 1px);line-height:calc(var(--dt-font-interactive-xs-line-height) * 1px);font-weight:var(--dt-font-weight-bold)}.c-chip: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-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip: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-interactive-secondary))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.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-interactive-secondary))}}.c-chip.c-chip--outline:not(.is-disabled,.c-chip--selected){--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--int-states-mixin-bg-color: transparent}.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost: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-transparent))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost.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-transparent))}}.c-chip.c-chip--selected{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.c-chip.c-chip--selected:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-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)))}.c-chip.c-chip--selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--selected.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip.c-chip--selected: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-interactive-primary))}.c-chip.c-chip--selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--selected.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-interactive-primary))}}.c-chip.is-loading>*:not(.c-chip-spinner){visibility:hidden}.c-chip.is-loading .c-chip-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-chip.is-disabled{--int-states-mixin-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);--chip-cursor: not-allowed;--chip-close-btn-cursor: not-allowed}.c-chip.is-disabled.c-chip--ghost{--int-states-mixin-bg-color: transparent}.c-chip.is-dismissible{--chip-cursor: text;padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible);-webkit-user-select:auto;user-select:auto}.c-chip.is-dismissible .c-chip-closeBtn{display:inline-flex;-webkit-user-select:none;user-select:none;outline:none;border:none;color:inherit;background-color:inherit;border-radius:inherit;cursor:var(--chip-close-btn-cursor);padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip.is-dismissible .c-chip-closeBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-chip: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){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", D = ["default", "outline", "ghost"], z = "pie-chip-close", l = {
|
|
12
|
+
};
|
|
13
|
+
h.v = "0.12.1";
|
|
14
|
+
let b = h;
|
|
15
|
+
const C = "*,*:after,*:before{box-sizing:inherit}.c-chip{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--chip-cursor: pointer;--chip-close-btn-cursor: pointer;--icon-display-override: block;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--chip-gap);padding-block-start:var(--chip-padding-block);padding-block-end:var(--chip-padding-block);padding-inline-start:var(--chip-padding-inline);padding-inline-end:var(--chip-padding-inline);background-color:var(--int-states-mixin-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:1px solid;border-color:var(--chip-border-color);cursor:var(--chip-cursor);-webkit-user-select:none;user-select:none;min-width:var(--chip-min-width);font-size:calc(var(--dt-font-interactive-xs-size) * 1px);line-height:calc(var(--dt-font-interactive-xs-line-height) * 1px);font-weight:var(--dt-font-weight-bold)}.c-chip: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-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip: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-interactive-secondary))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.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-interactive-secondary))}}.c-chip.c-chip--outline:not(.is-disabled,.c-chip--selected){--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--int-states-mixin-bg-color: transparent}.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost: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-transparent))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost.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-transparent))}}.c-chip.c-chip--selected{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.c-chip.c-chip--selected:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-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)))}.c-chip.c-chip--selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--selected.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip.c-chip--selected: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-interactive-primary))}.c-chip.c-chip--selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--selected.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-interactive-primary))}}.c-chip.is-loading>*:not(.c-chip-spinner){visibility:hidden}.c-chip.is-loading .c-chip-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-chip.is-disabled{--int-states-mixin-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);--chip-cursor: not-allowed;--chip-close-btn-cursor: not-allowed}.c-chip.is-disabled.c-chip--ghost{--int-states-mixin-bg-color: transparent}.c-chip.is-dismissible{--chip-cursor: text;padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible);-webkit-user-select:auto;user-select:auto}.c-chip.is-dismissible .c-chip-closeBtn{display:inline-flex;-webkit-user-select:none;user-select:none;outline:none;border:none;color:inherit;background-color:inherit;border-radius:inherit;cursor:var(--chip-close-btn-cursor);padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip.is-dismissible .c-chip-closeBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-chip: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){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", $ = ["default", "outline", "ghost"], S = "pie-chip-close", l = {
|
|
22
16
|
variant: "default",
|
|
23
17
|
disabled: !1,
|
|
24
18
|
isSelected: !1,
|
|
25
19
|
isLoading: !1,
|
|
26
20
|
isDismissible: !1
|
|
27
21
|
};
|
|
28
|
-
var
|
|
29
|
-
for (var
|
|
30
|
-
(
|
|
31
|
-
return
|
|
22
|
+
var B = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (i, t, c, s) => {
|
|
23
|
+
for (var e = s > 1 ? void 0 : s ? D(t, c) : t, r = i.length - 1, n; r >= 0; r--)
|
|
24
|
+
(n = i[r]) && (e = (s ? n(t, c, e) : n(e)) || e);
|
|
25
|
+
return s && e && B(t, c, e), e;
|
|
32
26
|
};
|
|
33
|
-
const
|
|
27
|
+
const _ = "pie-chip";
|
|
28
|
+
let o = class extends b {
|
|
34
29
|
constructor() {
|
|
35
30
|
super(...arguments), this.variant = l.variant, this.disabled = l.disabled, this.isSelected = l.isSelected, this.isLoading = l.isLoading, this.isDismissible = l.isDismissible;
|
|
36
31
|
}
|
|
@@ -40,8 +35,8 @@ const u = "pie-chip", v = class v extends g {
|
|
|
40
35
|
*
|
|
41
36
|
* @private
|
|
42
37
|
*/
|
|
43
|
-
onClickHandler(
|
|
44
|
-
(this.disabled || this.isDismissible) && (
|
|
38
|
+
onClickHandler(i) {
|
|
39
|
+
(this.disabled || this.isDismissible) && (i.preventDefault(), i.stopPropagation());
|
|
45
40
|
}
|
|
46
41
|
/**
|
|
47
42
|
* Template for the loading state
|
|
@@ -49,12 +44,12 @@ const u = "pie-chip", v = class v extends g {
|
|
|
49
44
|
* @private
|
|
50
45
|
*/
|
|
51
46
|
renderSpinner() {
|
|
52
|
-
const { isSelected:
|
|
53
|
-
return
|
|
47
|
+
const { isSelected: i } = this;
|
|
48
|
+
return v`
|
|
54
49
|
<pie-spinner
|
|
55
50
|
class="c-chip-spinner"
|
|
56
51
|
size="small"
|
|
57
|
-
variant="${
|
|
52
|
+
variant="${i ? "inverse" : "secondary"}">
|
|
58
53
|
</pie-spinner>`;
|
|
59
54
|
}
|
|
60
55
|
/**
|
|
@@ -63,7 +58,7 @@ const u = "pie-chip", v = class v extends g {
|
|
|
63
58
|
* @private
|
|
64
59
|
*/
|
|
65
60
|
_handleCloseButtonClick() {
|
|
66
|
-
w(this,
|
|
61
|
+
w(this, S);
|
|
67
62
|
}
|
|
68
63
|
/**
|
|
69
64
|
* Template for the dismissible state
|
|
@@ -71,77 +66,78 @@ const u = "pie-chip", v = class v extends g {
|
|
|
71
66
|
* @private
|
|
72
67
|
*/
|
|
73
68
|
renderCloseButton() {
|
|
74
|
-
var
|
|
75
|
-
return
|
|
69
|
+
var i;
|
|
70
|
+
return v`
|
|
76
71
|
<button
|
|
77
72
|
@click="${this._handleCloseButtonClick}"
|
|
78
73
|
?disabled=${this.disabled}
|
|
79
|
-
aria-label="${p((
|
|
74
|
+
aria-label="${p((i = this.aria) == null ? void 0 : i.close)}"
|
|
80
75
|
class="c-chip-closeBtn"
|
|
81
76
|
data-test-id="chip-close-button">
|
|
82
77
|
<icon-close-circle-filled size="m"></icon-close-circle-filled>
|
|
83
78
|
</button>`;
|
|
84
79
|
}
|
|
85
80
|
render() {
|
|
86
|
-
var
|
|
81
|
+
var m;
|
|
87
82
|
const {
|
|
88
|
-
variant:
|
|
83
|
+
variant: i,
|
|
89
84
|
disabled: t,
|
|
90
|
-
isSelected:
|
|
91
|
-
isLoading:
|
|
92
|
-
isDismissible:
|
|
93
|
-
} = this, r =
|
|
85
|
+
isSelected: c,
|
|
86
|
+
isLoading: s,
|
|
87
|
+
isDismissible: e
|
|
88
|
+
} = this, r = e && c, n = {
|
|
94
89
|
"c-chip": !0,
|
|
95
|
-
[`c-chip--${
|
|
96
|
-
"c-chip--selected":
|
|
90
|
+
[`c-chip--${i}`]: !0,
|
|
91
|
+
"c-chip--selected": c,
|
|
97
92
|
"is-dismissible": r,
|
|
98
93
|
"is-disabled": t,
|
|
99
|
-
"is-loading":
|
|
94
|
+
"is-loading": s
|
|
100
95
|
};
|
|
101
|
-
return
|
|
96
|
+
return v`
|
|
102
97
|
<div
|
|
103
98
|
role="${p(r ? void 0 : "button")}"
|
|
104
99
|
tabindex="${p(r ? void 0 : "0")}"
|
|
105
100
|
aria-atomic="true"
|
|
106
|
-
aria-busy="${
|
|
107
|
-
aria-current="${
|
|
108
|
-
aria-label="${p((
|
|
101
|
+
aria-busy="${s}"
|
|
102
|
+
aria-current="${c}"
|
|
103
|
+
aria-label="${p((m = this.aria) == null ? void 0 : m.label)}"
|
|
109
104
|
aria-live="polite"
|
|
110
|
-
class=${
|
|
105
|
+
class=${x(n)}
|
|
111
106
|
data-test-id="pie-chip"
|
|
112
107
|
@click="${this.onClickHandler}">
|
|
113
108
|
<slot name="icon"></slot>
|
|
114
|
-
${
|
|
109
|
+
${s ? this.renderSpinner() : g}
|
|
115
110
|
<slot></slot>
|
|
116
|
-
${r ? this.renderCloseButton() :
|
|
111
|
+
${r ? this.renderCloseButton() : g}
|
|
117
112
|
</div>`;
|
|
118
113
|
}
|
|
119
114
|
};
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
d(
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
d(
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
d(
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
d(
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
d(
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
d(
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
115
|
+
o.styles = f(C);
|
|
116
|
+
a([
|
|
117
|
+
d({ type: String }),
|
|
118
|
+
y(_, $, l.variant)
|
|
119
|
+
], o.prototype, "variant", 2);
|
|
120
|
+
a([
|
|
121
|
+
d({ type: Boolean })
|
|
122
|
+
], o.prototype, "disabled", 2);
|
|
123
|
+
a([
|
|
124
|
+
d({ type: Boolean })
|
|
125
|
+
], o.prototype, "isSelected", 2);
|
|
126
|
+
a([
|
|
127
|
+
d({ type: Boolean })
|
|
128
|
+
], o.prototype, "isLoading", 2);
|
|
129
|
+
a([
|
|
130
|
+
d({ type: Boolean })
|
|
131
|
+
], o.prototype, "isDismissible", 2);
|
|
132
|
+
a([
|
|
133
|
+
d({ type: Object })
|
|
134
|
+
], o.prototype, "aria", 2);
|
|
135
|
+
o = a([
|
|
136
|
+
k("pie-chip")
|
|
137
|
+
], o);
|
|
142
138
|
export {
|
|
143
|
-
|
|
144
|
-
|
|
139
|
+
S as ON_CHIP_CLOSE_EVENT,
|
|
140
|
+
o as PieChip,
|
|
145
141
|
l as defaultProps,
|
|
146
|
-
|
|
142
|
+
$ as variants
|
|
147
143
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-chip",
|
|
3
3
|
"description": "PIE Design System Chip built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.12.1",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -45,9 +45,9 @@
|
|
|
45
45
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
49
|
-
"@justeattakeaway/pie-spinner": "1.
|
|
50
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
48
|
+
"@justeattakeaway/pie-icons-webc": "1.10.0",
|
|
49
|
+
"@justeattakeaway/pie-spinner": "1.2.0",
|
|
50
|
+
"@justeattakeaway/pie-webc-core": "0.26.0"
|
|
51
51
|
},
|
|
52
52
|
"volta": {
|
|
53
53
|
"extends": "../../../package.json"
|
package/src/index.ts
CHANGED
|
@@ -7,7 +7,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
7
7
|
import { classMap } from 'lit/directives/class-map.js';
|
|
8
8
|
|
|
9
9
|
import {
|
|
10
|
-
validPropertyValues,
|
|
10
|
+
validPropertyValues, dispatchCustomEvent,
|
|
11
|
+
safeCustomElement,
|
|
11
12
|
} from '@justeattakeaway/pie-webc-core';
|
|
12
13
|
import styles from './chip.scss?inline';
|
|
13
14
|
import {
|
|
@@ -27,6 +28,7 @@ const componentSelector = 'pie-chip';
|
|
|
27
28
|
* @slot - Default slot
|
|
28
29
|
* @event {CustomEvent} pie-chip-close - when a user clicks close button.
|
|
29
30
|
*/
|
|
31
|
+
@safeCustomElement('pie-chip')
|
|
30
32
|
export class PieChip extends PieElement implements ChipProps {
|
|
31
33
|
@property({ type: String })
|
|
32
34
|
@validPropertyValues(componentSelector, variants, defaultProps.variant)
|
|
@@ -145,8 +147,6 @@ export class PieChip extends PieElement implements ChipProps {
|
|
|
145
147
|
static styles = unsafeCSS(styles);
|
|
146
148
|
}
|
|
147
149
|
|
|
148
|
-
defineCustomElement(componentSelector, PieChip);
|
|
149
|
-
|
|
150
150
|
declare global {
|
|
151
151
|
interface HTMLElementTagNameMap {
|
|
152
152
|
[componentSelector]: PieChip;
|