@justeattakeaway/pie-icon-button 0.27.5 → 0.27.7
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 +11 -11
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { unsafeCSS as h, LitElement as m, html as v } from "lit";
|
|
|
2
2
|
import { property as n } from "lit/decorators.js";
|
|
3
3
|
import { validPropertyValues as b, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
|
|
4
4
|
import "@justeattakeaway/pie-spinner";
|
|
5
|
-
const g =
|
|
5
|
+
const g = `*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default: 48px;--icon-size-override: 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);--icon-display-override: block;block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));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;-webkit-user-select:none;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(--icon-size-override);width:var(--icon-size-override)}.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;--icon-size-override: 20px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--icon-size-override: 28px}
|
|
6
6
|
`, p = ["xsmall", "small", "medium", "large"], u = [
|
|
7
7
|
"primary",
|
|
8
8
|
"secondary",
|
|
@@ -12,10 +12,10 @@ const g = `:host{--btn-dimension-default: 48px;--icon-size-override: 24px}.o-ico
|
|
|
12
12
|
"inverse",
|
|
13
13
|
"ghost-inverse"
|
|
14
14
|
];
|
|
15
|
-
var y = Object.defineProperty, B = Object.getOwnPropertyDescriptor, c = (l, o,
|
|
16
|
-
for (var r =
|
|
17
|
-
(d = l[e]) && (r = (
|
|
18
|
-
return
|
|
15
|
+
var y = Object.defineProperty, B = Object.getOwnPropertyDescriptor, c = (l, o, t, i) => {
|
|
16
|
+
for (var r = i > 1 ? void 0 : i ? B(o, t) : o, e = l.length - 1, d; e >= 0; e--)
|
|
17
|
+
(d = l[e]) && (r = (i ? d(o, t, r) : d(r)) || r);
|
|
18
|
+
return i && r && y(o, t, r), r;
|
|
19
19
|
};
|
|
20
20
|
const s = "pie-icon-button";
|
|
21
21
|
class a extends m {
|
|
@@ -28,9 +28,9 @@ class a extends m {
|
|
|
28
28
|
* @private
|
|
29
29
|
*/
|
|
30
30
|
renderSpinner() {
|
|
31
|
-
const { variant: o, size:
|
|
31
|
+
const { variant: o, size: t, disabled: i } = this, r = t === "xsmall" ? "small" : "medium";
|
|
32
32
|
let e = "brand";
|
|
33
|
-
return o != null && o.includes("secondary") && (e = "secondary"), (o === "primary" && !
|
|
33
|
+
return o != null && o.includes("secondary") && (e = "secondary"), (o === "primary" && !i || o === "ghost-inverse") && (e = "inverse"), v`
|
|
34
34
|
<pie-spinner
|
|
35
35
|
size="${r}"
|
|
36
36
|
variant="${e}"
|
|
@@ -39,15 +39,15 @@ class a extends m {
|
|
|
39
39
|
render() {
|
|
40
40
|
const {
|
|
41
41
|
disabled: o,
|
|
42
|
-
size:
|
|
43
|
-
variant:
|
|
42
|
+
size: t,
|
|
43
|
+
variant: i,
|
|
44
44
|
isLoading: r
|
|
45
45
|
} = this;
|
|
46
46
|
return v`
|
|
47
47
|
<button
|
|
48
48
|
class="o-iconBtn"
|
|
49
|
-
size="${
|
|
50
|
-
variant="${
|
|
49
|
+
size="${t || "medium"}"
|
|
50
|
+
variant="${i || "primary"}"
|
|
51
51
|
?disabled="${o}"
|
|
52
52
|
?isLoading="${r}">
|
|
53
53
|
${r ? this.renderSpinner() : v`<slot></slot>`}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.27.
|
|
3
|
+
"version": "0.27.7",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
39
|
-
"@justeattakeaway/pie-spinner": "0.5.
|
|
40
|
-
"@justeattakeaway/pie-webc-core": "0.19.
|
|
38
|
+
"@justeattakeaway/pie-icons-webc": "0.19.1",
|
|
39
|
+
"@justeattakeaway/pie-spinner": "0.5.5",
|
|
40
|
+
"@justeattakeaway/pie-webc-core": "0.19.1"
|
|
41
41
|
},
|
|
42
42
|
"volta": {
|
|
43
43
|
"extends": "../../../package.json"
|