@justeattakeaway/pie-icon-button 0.14.0 → 0.15.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 +13 -14
- package/dist/react.js +42 -1565
- package/package.json +5 -4
- package/src/iconButton.scss +3 -2
package/dist/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { unsafeCSS as h, LitElement as f, html as p } from "lit";
|
|
2
2
|
import { property as d } from "lit/decorators.js";
|
|
3
|
-
|
|
4
|
-
const b = (i, o, n) => function(t, r) {
|
|
3
|
+
const b = (c, o, n) => function(t, r) {
|
|
5
4
|
const a = `#${r}`;
|
|
6
5
|
Object.defineProperty(t, r, {
|
|
7
6
|
get() {
|
|
@@ -10,21 +9,21 @@ const b = (i, o, n) => function(t, r) {
|
|
|
10
9
|
set(l) {
|
|
11
10
|
const u = this[a];
|
|
12
11
|
o.includes(l) ? this[a] = l : (console.error(
|
|
13
|
-
`<${
|
|
12
|
+
`<${c}> Invalid value "${l}" provided for property "${r}".`,
|
|
14
13
|
`Must be one of: ${o.join(" | ")}.`,
|
|
15
14
|
`Falling back to default value: "${n}"`
|
|
16
15
|
), this[a] = n), this.requestUpdate(r, u);
|
|
17
16
|
}
|
|
18
17
|
});
|
|
19
|
-
}, g = `: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);--btn-focus: var(--dt-color-focus-outer);min-block-size:var(--btn-dimension);aspect-ratio:1/1;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center}@supports not (aspect-ratio: 1/1){.o-iconBtn{min-inline-size:var(--btn-dimension)}}.o-iconBtn:focus-visible{
|
|
18
|
+
}, g = `: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);--btn-focus: var(--dt-color-focus-outer);min-block-size:var(--btn-dimension);aspect-ratio:1/1;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center}@supports not (aspect-ratio: 1/1){.o-iconBtn{min-inline-size:var(--btn-dimension)}}.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){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=primary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}.o-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){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=secondary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-active-01)))}.o-iconBtn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=outline] .o-iconBtn{border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=outline]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-iconBtn[variant=ghost]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=ghost]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=ghost-secondary]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-iconBtn[disabled]{--btn-bg-color: var(--dt-color-disabled-01) !important;--btn-icon-fill: var(--dt-color-content-disabled) !important}.o-iconBtn[disabled] .o-iconBtn{border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}.o-iconBtn[disabled][variant=outline] .o-iconBtn{outline:none}.o-iconBtn[disabled][variant=ghost],.o-iconBtn[disabled][variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-default)}.o-iconBtn[disabled][variant=ghost] .o-iconBtn,.o-iconBtn[disabled][variant=ghost-secondary] .o-iconBtn{outline:none;border:none}.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}
|
|
20
19
|
`, m = ["xsmall", "small", "medium", "large"], B = ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
|
|
21
|
-
var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (
|
|
22
|
-
for (var t = e > 1 ? void 0 : e ? x(o, n) : o, r =
|
|
23
|
-
(a =
|
|
20
|
+
var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (c, o, n, e) => {
|
|
21
|
+
for (var t = e > 1 ? void 0 : e ? x(o, n) : o, r = c.length - 1, a; r >= 0; r--)
|
|
22
|
+
(a = c[r]) && (t = (e ? a(o, n, t) : a(t)) || t);
|
|
24
23
|
return e && t && y(o, n, t), t;
|
|
25
24
|
};
|
|
26
25
|
const v = "pie-icon-button";
|
|
27
|
-
class
|
|
26
|
+
class i extends f {
|
|
28
27
|
constructor() {
|
|
29
28
|
super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1;
|
|
30
29
|
}
|
|
@@ -44,21 +43,21 @@ class c extends f {
|
|
|
44
43
|
</button>`;
|
|
45
44
|
}
|
|
46
45
|
}
|
|
47
|
-
|
|
46
|
+
i.styles = h(g);
|
|
48
47
|
s([
|
|
49
48
|
d(),
|
|
50
49
|
b(v, m, "medium")
|
|
51
|
-
],
|
|
50
|
+
], i.prototype, "size", 2);
|
|
52
51
|
s([
|
|
53
52
|
d(),
|
|
54
53
|
b(v, B, "primary")
|
|
55
|
-
],
|
|
54
|
+
], i.prototype, "variant", 2);
|
|
56
55
|
s([
|
|
57
56
|
d({ type: Boolean })
|
|
58
|
-
],
|
|
59
|
-
customElements.define(v,
|
|
57
|
+
], i.prototype, "disabled", 2);
|
|
58
|
+
customElements.define(v, i);
|
|
60
59
|
export {
|
|
61
|
-
|
|
60
|
+
i as PieIconButton,
|
|
62
61
|
m as sizes,
|
|
63
62
|
B as variants
|
|
64
63
|
};
|