@justeattakeaway/pie-chip 0.8.3 → 0.8.5
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/dist/index.js +64 -65
- package/dist/react.js +10 -17
- package/package.json +5 -5
- package/src/defs-react.ts +1 -1
- package/src/index.ts +2 -2
- package/src/react.ts +2 -2
package/dist/index.js
CHANGED
|
@@ -1,27 +1,25 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { property as
|
|
3
|
-
import { ifDefined as
|
|
4
|
-
import { classMap as
|
|
5
|
-
import {
|
|
1
|
+
import { LitElement as f, html as n, nothing as b, unsafeCSS as u } from "lit";
|
|
2
|
+
import { property as t } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as g } from "lit/directives/if-defined.js";
|
|
4
|
+
import { classMap as y } from "lit/directives/class-map.js";
|
|
5
|
+
import { dispatchCustomEvent as k, validPropertyValues as x, defineCustomElement as w } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js";
|
|
7
7
|
import "@justeattakeaway/pie-spinner";
|
|
8
|
-
const
|
|
9
|
-
`, C = ["default", "outline", "ghost"], S = "pie-chip-close", a = {
|
|
8
|
+
const S = "*,*:after,*:before{box-sizing:inherit}.c-chip{--chip-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);--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(--chip-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:1px solid;border-color:var(--chip-border-color);cursor:pointer;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]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--chip-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]),.c-chip.is-loading:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--chip-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)))}.c-chip.c-chip--outline:not([disabled],.c-chip--selected){--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--chip-bg-color: transparent}.c-chip.c-chip--outline:hover:not([disabled]),.c-chip.c-chip--ghost:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-chip.c-chip--outline:active:not([disabled]),.c-chip.c-chip--outline.is-loading:not([disabled]),.c-chip.c-chip--ghost:active:not([disabled]),.c-chip.c-chip--ghost.is-loading:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-chip.c-chip--selected{--chip-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.c-chip.c-chip--selected:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-02);--chip-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]),.c-chip.c-chip--selected.is-loading:not([disabled]){--active-modifier: var(--dt-color-active-02);--chip-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)))}.c-chip.c-chip--dismissible.c-chip--selected{padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible)}.c-chip.c-chip--dismissible.c-chip--selected .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:pointer;padding:0;margin-inline-start:var(--chip-dismissible-offset)}.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[disabled]{--chip-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);cursor:not-allowed}.c-chip[disabled].c-chip--ghost{--chip-bg-color: transparent}.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"], B = "pie-chip-close", o = {
|
|
10
9
|
variant: "default",
|
|
11
10
|
disabled: !1,
|
|
12
11
|
isSelected: !1,
|
|
13
12
|
isLoading: !1,
|
|
14
13
|
isDismissible: !1
|
|
15
14
|
};
|
|
16
|
-
var
|
|
17
|
-
for (var
|
|
18
|
-
(d =
|
|
19
|
-
return
|
|
15
|
+
var C = Object.defineProperty, a = (h, e, l, s) => {
|
|
16
|
+
for (var i = void 0, r = h.length - 1, d; r >= 0; r--)
|
|
17
|
+
(d = h[r]) && (i = d(e, l, i) || i);
|
|
18
|
+
return i && C(e, l, i), i;
|
|
20
19
|
};
|
|
21
|
-
const
|
|
22
|
-
class r extends f {
|
|
20
|
+
const m = "pie-chip", p = class p extends f {
|
|
23
21
|
constructor() {
|
|
24
|
-
super(...arguments), this.variant =
|
|
22
|
+
super(...arguments), this.variant = o.variant, this.disabled = o.disabled, this.isSelected = o.isSelected, this.isLoading = o.isLoading, this.isDismissible = o.isDismissible;
|
|
25
23
|
}
|
|
26
24
|
/**
|
|
27
25
|
* Template for the loading state
|
|
@@ -29,12 +27,12 @@ class r extends f {
|
|
|
29
27
|
* @private
|
|
30
28
|
*/
|
|
31
29
|
renderSpinner() {
|
|
32
|
-
const { isSelected:
|
|
33
|
-
return
|
|
30
|
+
const { isSelected: e } = this;
|
|
31
|
+
return n`
|
|
34
32
|
<pie-spinner
|
|
35
33
|
class="c-chip-spinner"
|
|
36
34
|
size="small"
|
|
37
|
-
variant="${
|
|
35
|
+
variant="${e ? "inverse" : "secondary"}">
|
|
38
36
|
</pie-spinner>`;
|
|
39
37
|
}
|
|
40
38
|
/**
|
|
@@ -43,7 +41,7 @@ class r extends f {
|
|
|
43
41
|
* @private
|
|
44
42
|
*/
|
|
45
43
|
_handleCloseButtonClick() {
|
|
46
|
-
|
|
44
|
+
k(this, B);
|
|
47
45
|
}
|
|
48
46
|
/**
|
|
49
47
|
* Template for the dismissible state
|
|
@@ -51,75 +49,76 @@ class r extends f {
|
|
|
51
49
|
* @private
|
|
52
50
|
*/
|
|
53
51
|
renderCloseButton() {
|
|
54
|
-
var
|
|
55
|
-
return
|
|
52
|
+
var e;
|
|
53
|
+
return n`
|
|
56
54
|
<button
|
|
57
55
|
@click="${this._handleCloseButtonClick}"
|
|
58
56
|
?disabled=${this.disabled}
|
|
59
|
-
aria-label="${
|
|
57
|
+
aria-label="${g((e = this.aria) == null ? void 0 : e.close)}"
|
|
60
58
|
class="c-chip-closeBtn"
|
|
61
59
|
data-test-id="chip-close-button">
|
|
62
60
|
<icon-close-circle-filled size="m"></icon-close-circle-filled>
|
|
63
61
|
</button>`;
|
|
64
62
|
}
|
|
65
63
|
render() {
|
|
66
|
-
var
|
|
64
|
+
var v;
|
|
67
65
|
const {
|
|
68
|
-
variant:
|
|
69
|
-
disabled:
|
|
70
|
-
isSelected:
|
|
71
|
-
isLoading:
|
|
72
|
-
isDismissible:
|
|
66
|
+
variant: e,
|
|
67
|
+
disabled: l,
|
|
68
|
+
isSelected: s,
|
|
69
|
+
isLoading: i,
|
|
70
|
+
isDismissible: r
|
|
73
71
|
} = this, d = {
|
|
74
72
|
"c-chip": !0,
|
|
75
|
-
[`c-chip--${
|
|
76
|
-
"c-chip--selected":
|
|
77
|
-
"c-chip--dismissible":
|
|
78
|
-
"is-loading":
|
|
73
|
+
[`c-chip--${e}`]: !0,
|
|
74
|
+
"c-chip--selected": s,
|
|
75
|
+
"c-chip--dismissible": r,
|
|
76
|
+
"is-loading": i
|
|
79
77
|
};
|
|
80
|
-
return
|
|
78
|
+
return n`
|
|
81
79
|
<div
|
|
82
80
|
aria-atomic="true"
|
|
83
|
-
aria-busy="${
|
|
84
|
-
aria-current="${
|
|
85
|
-
aria-label="${
|
|
81
|
+
aria-busy="${i}"
|
|
82
|
+
aria-current="${s}"
|
|
83
|
+
aria-label="${g((v = this.aria) == null ? void 0 : v.label)}"
|
|
86
84
|
aria-live="polite"
|
|
87
|
-
class=${
|
|
85
|
+
class=${y(d)}
|
|
88
86
|
data-test-id="pie-chip"
|
|
89
87
|
tabindex="0"
|
|
90
88
|
role="button"
|
|
91
|
-
?disabled="${
|
|
89
|
+
?disabled="${l}">
|
|
92
90
|
<slot name="icon"></slot>
|
|
93
|
-
${
|
|
91
|
+
${i ? this.renderSpinner() : b}
|
|
94
92
|
<slot></slot>
|
|
95
|
-
${
|
|
93
|
+
${r && s ? this.renderCloseButton() : b}
|
|
96
94
|
</div>`;
|
|
97
95
|
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
96
|
+
};
|
|
97
|
+
p.styles = u(S);
|
|
98
|
+
let c = p;
|
|
99
|
+
a([
|
|
100
|
+
t(),
|
|
101
|
+
x(m, $, o.variant)
|
|
102
|
+
], c.prototype, "variant");
|
|
103
|
+
a([
|
|
104
|
+
t({ type: Boolean })
|
|
105
|
+
], c.prototype, "disabled");
|
|
106
|
+
a([
|
|
107
|
+
t({ type: Boolean })
|
|
108
|
+
], c.prototype, "isSelected");
|
|
109
|
+
a([
|
|
110
|
+
t({ type: Boolean })
|
|
111
|
+
], c.prototype, "isLoading");
|
|
112
|
+
a([
|
|
113
|
+
t({ type: Boolean })
|
|
114
|
+
], c.prototype, "isDismissible");
|
|
115
|
+
a([
|
|
116
|
+
t({ type: Object })
|
|
117
|
+
], c.prototype, "aria");
|
|
118
|
+
w(m, c);
|
|
120
119
|
export {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
120
|
+
B as ON_CHIP_CLOSE_EVENT,
|
|
121
|
+
c as PieChip,
|
|
122
|
+
o as defaultProps,
|
|
123
|
+
$ as variants
|
|
125
124
|
};
|
package/dist/react.js
CHANGED
|
@@ -1,27 +1,20 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { createComponent as
|
|
1
|
+
import * as e from "react";
|
|
2
|
+
import { createComponent as i } from "@lit/react";
|
|
3
3
|
import { PieChip as p } from "./index.js";
|
|
4
|
-
import { ON_CHIP_CLOSE_EVENT as
|
|
5
|
-
|
|
6
|
-
import "lit/decorators.js";
|
|
7
|
-
import "lit/directives/if-defined.js";
|
|
8
|
-
import "lit/directives/class-map.js";
|
|
9
|
-
import "@justeattakeaway/pie-webc-core";
|
|
10
|
-
import "@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js";
|
|
11
|
-
import "@justeattakeaway/pie-spinner";
|
|
12
|
-
const o = e({
|
|
4
|
+
import { ON_CHIP_CLOSE_EVENT as C, defaultProps as c, variants as h } from "./index.js";
|
|
5
|
+
const o = i({
|
|
13
6
|
displayName: "PieChip",
|
|
14
7
|
elementClass: p,
|
|
15
|
-
react:
|
|
8
|
+
react: e,
|
|
16
9
|
tagName: "pie-chip",
|
|
17
10
|
events: {
|
|
18
11
|
onPieChipClose: "pie-chip-close"
|
|
19
12
|
// when a user clicks close button.
|
|
20
13
|
}
|
|
21
|
-
}),
|
|
14
|
+
}), r = o;
|
|
22
15
|
export {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
16
|
+
C as ON_CHIP_CLOSE_EVENT,
|
|
17
|
+
r as PieChip,
|
|
18
|
+
c as defaultProps,
|
|
19
|
+
h as variants
|
|
27
20
|
};
|
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.8.
|
|
4
|
+
"version": "0.8.5",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -37,13 +37,13 @@
|
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
39
39
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
40
|
-
"@justeattakeaway/pie-css": "0.
|
|
40
|
+
"@justeattakeaway/pie-css": "0.13.1",
|
|
41
41
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@justeattakeaway/pie-icons-webc": "0.25.
|
|
45
|
-
"@justeattakeaway/pie-spinner": "0.7.
|
|
46
|
-
"@justeattakeaway/pie-webc-core": "0.24.
|
|
44
|
+
"@justeattakeaway/pie-icons-webc": "0.25.3",
|
|
45
|
+
"@justeattakeaway/pie-spinner": "0.7.2",
|
|
46
|
+
"@justeattakeaway/pie-webc-core": "0.24.2"
|
|
47
47
|
},
|
|
48
48
|
"volta": {
|
|
49
49
|
"extends": "../../../package.json"
|
package/src/defs-react.ts
CHANGED
package/src/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
-
LitElement, html, unsafeCSS, TemplateResult, nothing,
|
|
2
|
+
LitElement, html, unsafeCSS, type TemplateResult, nothing,
|
|
3
3
|
} from 'lit';
|
|
4
4
|
import { property } from 'lit/decorators.js';
|
|
5
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
} from '@justeattakeaway/pie-webc-core';
|
|
11
11
|
import styles from './chip.scss?inline';
|
|
12
12
|
import {
|
|
13
|
-
ChipProps, variants, ON_CHIP_CLOSE_EVENT, defaultProps,
|
|
13
|
+
type ChipProps, variants, ON_CHIP_CLOSE_EVENT, defaultProps,
|
|
14
14
|
} from './defs';
|
|
15
15
|
import '@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js';
|
|
16
16
|
import '@justeattakeaway/pie-spinner';
|
package/src/react.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { createComponent, EventName } from '@lit/react';
|
|
2
|
+
import { createComponent, type EventName } from '@lit/react';
|
|
3
3
|
import { PieChip as PieChipLit } from './index';
|
|
4
|
-
import { ChipProps } from './defs';
|
|
4
|
+
import { type ChipProps } from './defs';
|
|
5
5
|
|
|
6
6
|
export * from './defs';
|
|
7
7
|
|