@justeattakeaway/pie-icon-button 0.21.2 → 0.21.3-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +17 -17
- package/dist/react.d.ts +1 -1
- package/dist/react.js +32 -55
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
1
|
+
import { unsafeCSS as f, LitElement as m, html as s } from "lit";
|
|
2
2
|
import { property as l } from "lit/decorators.js";
|
|
3
3
|
import "@justeattakeaway/pie-spinner";
|
|
4
4
|
const h = (i, o, t) => function(r, n) {
|
|
@@ -8,20 +8,20 @@ const h = (i, o, t) => function(r, n) {
|
|
|
8
8
|
return this[a];
|
|
9
9
|
},
|
|
10
10
|
set(v) {
|
|
11
|
-
const f = this[a];
|
|
12
11
|
o.includes(v) ? this[a] = v : (console.error(
|
|
13
12
|
`<${i}> Invalid value "${v}" provided for property "${n}".`,
|
|
14
13
|
`Must be one of: ${o.join(" | ")}.`,
|
|
15
14
|
`Falling back to default value: "${t}"`
|
|
16
|
-
), this[a] = t)
|
|
17
|
-
}
|
|
15
|
+
), this[a] = t);
|
|
16
|
+
},
|
|
17
|
+
configurable: !0
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
|
-
function
|
|
20
|
+
function g(i, o) {
|
|
21
21
|
customElements.get(i) ? console.warn(`PIE Web Component: "${i}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(i, o);
|
|
22
22
|
}
|
|
23
|
-
const
|
|
24
|
-
`,
|
|
23
|
+
const p = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);block-size:var(--btn-dimension);inline-size:var(--btn-dimension);border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.o-iconBtn[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-iconBtn[variant=primary]:active:not(:disabled),.o-iconBtn[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-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[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-iconBtn[variant=secondary]:active:not(:disabled),.o-iconBtn[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-iconBtn[variant=outline]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn[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-iconBtn[variant=outline]:active:not(:disabled),.o-iconBtn[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-iconBtn[variant=ghost]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[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-iconBtn[variant=ghost]:active:not(:disabled),.o-iconBtn[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-iconBtn[variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]: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-iconBtn[variant=ghost-secondary]:active:not(:disabled),.o-iconBtn[variant=ghost-secondary][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-iconBtn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[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-iconBtn[variant=inverse]:active:not(:disabled),.o-iconBtn[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-iconBtn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn[variant=ghost-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-iconBtn[variant=ghost-inverse]:active:not(:disabled),.o-iconBtn[variant=ghost-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-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not([variant=ghost],[variant=ghost-secondary],[variant=ghost-inverse]){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)}.o-iconBtn[size=xsmall]{--btn-dimension: 32px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--btn-icon-size: 28px}
|
|
24
|
+
`, u = ["xsmall", "small", "medium", "large"], y = [
|
|
25
25
|
"primary",
|
|
26
26
|
"secondary",
|
|
27
27
|
"outline",
|
|
@@ -30,13 +30,13 @@ const u = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-bo
|
|
|
30
30
|
"inverse",
|
|
31
31
|
"ghost-inverse"
|
|
32
32
|
];
|
|
33
|
-
var
|
|
34
|
-
for (var r = e > 1 ? void 0 : e ?
|
|
33
|
+
var B = Object.defineProperty, z = Object.getOwnPropertyDescriptor, d = (i, o, t, e) => {
|
|
34
|
+
for (var r = e > 1 ? void 0 : e ? z(o, t) : o, n = i.length - 1, a; n >= 0; n--)
|
|
35
35
|
(a = i[n]) && (r = (e ? a(o, t, r) : a(r)) || r);
|
|
36
|
-
return e && r &&
|
|
36
|
+
return e && r && B(o, t, r), r;
|
|
37
37
|
};
|
|
38
38
|
const b = "pie-icon-button";
|
|
39
|
-
class c extends
|
|
39
|
+
class c extends m {
|
|
40
40
|
constructor() {
|
|
41
41
|
super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1, this.isLoading = !1;
|
|
42
42
|
}
|
|
@@ -72,14 +72,14 @@ class c extends g {
|
|
|
72
72
|
</button>`;
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
|
-
c.styles =
|
|
75
|
+
c.styles = f(p);
|
|
76
76
|
d([
|
|
77
77
|
l(),
|
|
78
|
-
h(b,
|
|
78
|
+
h(b, u, "medium")
|
|
79
79
|
], c.prototype, "size", 2);
|
|
80
80
|
d([
|
|
81
81
|
l(),
|
|
82
|
-
h(b,
|
|
82
|
+
h(b, y, "primary")
|
|
83
83
|
], c.prototype, "variant", 2);
|
|
84
84
|
d([
|
|
85
85
|
l({ type: Boolean })
|
|
@@ -87,9 +87,9 @@ d([
|
|
|
87
87
|
d([
|
|
88
88
|
l({ type: Boolean })
|
|
89
89
|
], c.prototype, "isLoading", 2);
|
|
90
|
-
|
|
90
|
+
g(b, c);
|
|
91
91
|
export {
|
|
92
92
|
c as PieIconButton,
|
|
93
|
-
|
|
94
|
-
|
|
93
|
+
u as sizes,
|
|
94
|
+
y as variants
|
|
95
95
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
2
|
import type { LitElement } from 'lit';
|
|
3
|
-
import type { ReactWebComponent } from '@lit
|
|
3
|
+
import type { ReactWebComponent } from '@lit/react';
|
|
4
4
|
import type { TemplateResult } from 'lit';
|
|
5
5
|
|
|
6
6
|
export declare interface IconButtonProps {
|
package/dist/react.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as y from "react";
|
|
2
2
|
import { PieIconButton as E } from "./index.js";
|
|
3
|
-
import { sizes as k, variants as
|
|
3
|
+
import { sizes as k, variants as C } from "./index.js";
|
|
4
4
|
import "lit";
|
|
5
5
|
import "lit/decorators.js";
|
|
6
6
|
import "@justeattakeaway/pie-spinner";
|
|
@@ -9,65 +9,42 @@ import "@justeattakeaway/pie-spinner";
|
|
|
9
9
|
* Copyright 2018 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
11
|
*/
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
let
|
|
16
|
-
|
|
17
|
-
let
|
|
18
|
-
|
|
19
|
-
})(t,
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
constructor() {
|
|
33
|
-
super(...arguments), this.o = null;
|
|
34
|
-
}
|
|
35
|
-
t(e) {
|
|
36
|
-
if (this.o !== null)
|
|
37
|
-
for (const h in this.i)
|
|
38
|
-
B(this.o, h, this.props[h], e ? e[h] : void 0, p);
|
|
39
|
-
}
|
|
40
|
-
componentDidMount() {
|
|
12
|
+
const N = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), v = /* @__PURE__ */ new WeakMap(), b = (t, i, a, l, u) => {
|
|
13
|
+
const m = u == null ? void 0 : u[i];
|
|
14
|
+
m === void 0 || a === l ? (t[i] = a, a == null && i in HTMLElement.prototype && t.removeAttribute(i)) : ((c, r, o) => {
|
|
15
|
+
let s = v.get(c);
|
|
16
|
+
s === void 0 && v.set(c, s = /* @__PURE__ */ new Map());
|
|
17
|
+
let n = s.get(r);
|
|
18
|
+
o !== void 0 ? n === void 0 ? (s.set(r, n = { handleEvent: o }), c.addEventListener(r, n)) : n.handleEvent = o : n !== void 0 && (s.delete(r), c.removeEventListener(r, n));
|
|
19
|
+
})(t, m, a);
|
|
20
|
+
}, h = ({ react: t, tagName: i, elementClass: a, events: l, displayName: u }) => {
|
|
21
|
+
const m = new Set(Object.keys(l ?? {})), c = t.forwardRef((r, o) => {
|
|
22
|
+
const s = t.useRef(null), n = t.useRef(null), f = {}, p = {};
|
|
23
|
+
for (const [e, d] of Object.entries(r))
|
|
24
|
+
N.has(e) ? f[e === "className" ? "class" : e] = d : m.has(e) || e in a.prototype ? p[e] = d : f[e] = d;
|
|
25
|
+
return t.useLayoutEffect(() => {
|
|
26
|
+
if (n.current !== null) {
|
|
27
|
+
for (const e in p)
|
|
28
|
+
b(n.current, e, r[e], s.current ? s.current[e] : void 0, l);
|
|
29
|
+
s.current = r;
|
|
30
|
+
}
|
|
31
|
+
}), t.useLayoutEffect(() => {
|
|
41
32
|
var e;
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
this.h !== e && (this.u = (i) => {
|
|
50
|
-
e !== null && I(e, i), this.o = i, this.h = e;
|
|
51
|
-
}), this.i = {};
|
|
52
|
-
const v = { ref: this.u };
|
|
53
|
-
for (const [i, y] of Object.entries(h))
|
|
54
|
-
b.has(i) ? v[i === "className" ? "class" : i] = y : l.has(i) || i in n.prototype ? this.i[i] = y : v[i] = y;
|
|
55
|
-
return v.suppressHydrationWarning = !0, a(r, v);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
f.displayName = d ?? n.name;
|
|
59
|
-
const N = s.forwardRef((c, e) => a(f, { ...c, _$Gl: e }, c == null ? void 0 : c.children));
|
|
60
|
-
return N.displayName = f.displayName, N;
|
|
61
|
-
}
|
|
62
|
-
const R = M({
|
|
33
|
+
(e = n.current) == null || e.removeAttribute("defer-hydration");
|
|
34
|
+
}, []), f.suppressHydrationWarning = !0, t.createElement(i, { ...f, ref: t.useCallback((e) => {
|
|
35
|
+
n.current = e, typeof o == "function" ? o(e) : o !== null && (o.current = e);
|
|
36
|
+
}, [o]) });
|
|
37
|
+
});
|
|
38
|
+
return c.displayName = u ?? a.name, c;
|
|
39
|
+
}, I = h({
|
|
63
40
|
displayName: "PieIconButton",
|
|
64
41
|
elementClass: E,
|
|
65
|
-
react:
|
|
42
|
+
react: y,
|
|
66
43
|
tagName: "pie-icon-button",
|
|
67
44
|
events: {}
|
|
68
45
|
});
|
|
69
46
|
export {
|
|
70
|
-
|
|
47
|
+
I as PieIconButton,
|
|
71
48
|
k as sizes,
|
|
72
|
-
|
|
49
|
+
C as variants
|
|
73
50
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.21.
|
|
3
|
+
"version": "0.21.3-next.0",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"license": "Apache-2.0",
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@justeattakeaway/pie-icons-webc": "0.11.1",
|
|
30
|
-
"@justeattakeaway/pie-spinner": "0.2.
|
|
31
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
30
|
+
"@justeattakeaway/pie-spinner": "0.2.2-next.0",
|
|
31
|
+
"@justeattakeaway/pie-webc-core": "0.12.0-next.0"
|
|
32
32
|
},
|
|
33
33
|
"volta": {
|
|
34
34
|
"extends": "../../../package.json"
|