@justeattakeaway/pie-icon-button 0.28.5 → 0.28.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/custom-elements.json +16 -20
- package/dist/index.d.ts +5 -0
- package/dist/index.js +41 -35
- package/dist/react.d.ts +5 -0
- package/dist/react.js +4 -3
- package/package.json +5 -5
- package/src/defs.ts +11 -0
- package/src/index.ts +7 -7
package/custom-elements.json
CHANGED
|
@@ -27,6 +27,14 @@
|
|
|
27
27
|
"text": "['primary', 'secondary', 'outline', 'ghost',\n 'ghost-secondary', 'inverse', 'ghost-inverse']"
|
|
28
28
|
},
|
|
29
29
|
"default": "['primary', 'secondary', 'outline', 'ghost',\n 'ghost-secondary', 'inverse', 'ghost-inverse']"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"kind": "variable",
|
|
33
|
+
"name": "defaultProps",
|
|
34
|
+
"type": {
|
|
35
|
+
"text": "DefaultProps"
|
|
36
|
+
},
|
|
37
|
+
"default": "{\n size: 'medium',\n variant: 'primary',\n disabled: false,\n isLoading: false,\n}"
|
|
30
38
|
}
|
|
31
39
|
],
|
|
32
40
|
"exports": [
|
|
@@ -45,6 +53,14 @@
|
|
|
45
53
|
"name": "variants",
|
|
46
54
|
"module": "src/defs.js"
|
|
47
55
|
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"kind": "js",
|
|
59
|
+
"name": "defaultProps",
|
|
60
|
+
"declaration": {
|
|
61
|
+
"name": "defaultProps",
|
|
62
|
+
"module": "src/defs.js"
|
|
63
|
+
}
|
|
48
64
|
}
|
|
49
65
|
]
|
|
50
66
|
},
|
|
@@ -64,7 +80,6 @@
|
|
|
64
80
|
"text": "IconButtonProps['size'] | undefined"
|
|
65
81
|
},
|
|
66
82
|
"privacy": "public",
|
|
67
|
-
"default": "'medium'",
|
|
68
83
|
"attribute": "size"
|
|
69
84
|
},
|
|
70
85
|
{
|
|
@@ -74,27 +89,18 @@
|
|
|
74
89
|
"text": "IconButtonProps['variant'] | undefined"
|
|
75
90
|
},
|
|
76
91
|
"privacy": "public",
|
|
77
|
-
"default": "'primary'",
|
|
78
92
|
"attribute": "variant"
|
|
79
93
|
},
|
|
80
94
|
{
|
|
81
95
|
"kind": "field",
|
|
82
96
|
"name": "disabled",
|
|
83
|
-
"type": {
|
|
84
|
-
"text": "boolean"
|
|
85
|
-
},
|
|
86
97
|
"privacy": "public",
|
|
87
|
-
"default": "false",
|
|
88
98
|
"attribute": "disabled"
|
|
89
99
|
},
|
|
90
100
|
{
|
|
91
101
|
"kind": "field",
|
|
92
102
|
"name": "isLoading",
|
|
93
|
-
"type": {
|
|
94
|
-
"text": "boolean"
|
|
95
|
-
},
|
|
96
103
|
"privacy": "public",
|
|
97
|
-
"default": "false",
|
|
98
104
|
"attribute": "isLoading"
|
|
99
105
|
},
|
|
100
106
|
{
|
|
@@ -115,7 +121,6 @@
|
|
|
115
121
|
"type": {
|
|
116
122
|
"text": "IconButtonProps['size'] | undefined"
|
|
117
123
|
},
|
|
118
|
-
"default": "'medium'",
|
|
119
124
|
"fieldName": "size"
|
|
120
125
|
},
|
|
121
126
|
{
|
|
@@ -123,23 +128,14 @@
|
|
|
123
128
|
"type": {
|
|
124
129
|
"text": "IconButtonProps['variant'] | undefined"
|
|
125
130
|
},
|
|
126
|
-
"default": "'primary'",
|
|
127
131
|
"fieldName": "variant"
|
|
128
132
|
},
|
|
129
133
|
{
|
|
130
134
|
"name": "disabled",
|
|
131
|
-
"type": {
|
|
132
|
-
"text": "boolean"
|
|
133
|
-
},
|
|
134
|
-
"default": "false",
|
|
135
135
|
"fieldName": "disabled"
|
|
136
136
|
},
|
|
137
137
|
{
|
|
138
138
|
"name": "isLoading",
|
|
139
|
-
"type": {
|
|
140
|
-
"text": "boolean"
|
|
141
|
-
},
|
|
142
|
-
"default": "false",
|
|
143
139
|
"fieldName": "isLoading"
|
|
144
140
|
}
|
|
145
141
|
],
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
|
+
import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
|
|
1
2
|
import type { CSSResult } from 'lit';
|
|
2
3
|
import type { LitElement } from 'lit';
|
|
3
4
|
import type { TemplateResult } from 'lit';
|
|
4
5
|
|
|
6
|
+
export declare type DefaultProps = ComponentDefaultPropsGeneric<IconButtonProps, 'size' | 'variant' | 'disabled' | 'disabled' | 'isLoading'>;
|
|
7
|
+
|
|
8
|
+
export declare const defaultProps: DefaultProps;
|
|
9
|
+
|
|
5
10
|
export declare interface IconButtonProps {
|
|
6
11
|
/**
|
|
7
12
|
* (Optional) What size the button should be.
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { property as
|
|
3
|
-
import { validPropertyValues as
|
|
1
|
+
import { unsafeCSS as m, LitElement as f, html as s } from "lit";
|
|
2
|
+
import { property as c } from "lit/decorators.js";
|
|
3
|
+
import { validPropertyValues as h, defineCustomElement as g } from "@justeattakeaway/pie-webc-core";
|
|
4
4
|
import "@justeattakeaway/pie-spinner";
|
|
5
|
-
const
|
|
6
|
-
`,
|
|
5
|
+
const p = `*,*: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
|
+
`, u = ["xsmall", "small", "medium", "large"], y = [
|
|
7
7
|
"primary",
|
|
8
8
|
"secondary",
|
|
9
9
|
"outline",
|
|
@@ -11,16 +11,21 @@ const g = `*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default:
|
|
|
11
11
|
"ghost-secondary",
|
|
12
12
|
"inverse",
|
|
13
13
|
"ghost-inverse"
|
|
14
|
-
]
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
], a = {
|
|
15
|
+
size: "medium",
|
|
16
|
+
variant: "primary",
|
|
17
|
+
disabled: !1,
|
|
18
|
+
isLoading: !1
|
|
19
19
|
};
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
var B = Object.defineProperty, z = Object.getOwnPropertyDescriptor, l = (d, o, t, i) => {
|
|
21
|
+
for (var r = i > 1 ? void 0 : i ? z(o, t) : o, e = d.length - 1, v; e >= 0; e--)
|
|
22
|
+
(v = d[e]) && (r = (i ? v(o, t, r) : v(r)) || r);
|
|
23
|
+
return i && r && B(o, t, r), r;
|
|
24
|
+
};
|
|
25
|
+
const b = "pie-icon-button";
|
|
26
|
+
class n extends f {
|
|
22
27
|
constructor() {
|
|
23
|
-
super(...arguments), this.size =
|
|
28
|
+
super(...arguments), this.size = a.size, this.variant = a.variant, this.disabled = a.disabled, this.isLoading = a.isLoading;
|
|
24
29
|
}
|
|
25
30
|
/**
|
|
26
31
|
* Template for the loading state
|
|
@@ -30,7 +35,7 @@ class a extends m {
|
|
|
30
35
|
renderSpinner() {
|
|
31
36
|
const { variant: o, size: t, disabled: i } = this, r = t === "xsmall" ? "small" : "medium";
|
|
32
37
|
let e = "brand";
|
|
33
|
-
return o != null && o.includes("secondary") && (e = "secondary"), (o === "primary" && !i || o === "ghost-inverse") && (e = "inverse"),
|
|
38
|
+
return o != null && o.includes("secondary") && (e = "secondary"), (o === "primary" && !i || o === "ghost-inverse") && (e = "inverse"), s`
|
|
34
39
|
<pie-spinner
|
|
35
40
|
size="${r}"
|
|
36
41
|
variant="${e}">
|
|
@@ -43,35 +48,36 @@ class a extends m {
|
|
|
43
48
|
variant: i,
|
|
44
49
|
isLoading: r
|
|
45
50
|
} = this;
|
|
46
|
-
return
|
|
51
|
+
return s`
|
|
47
52
|
<button
|
|
48
53
|
class="o-iconBtn"
|
|
49
54
|
size="${t || "medium"}"
|
|
50
55
|
variant="${i || "primary"}"
|
|
51
56
|
?disabled="${o}"
|
|
52
57
|
?isLoading="${r}">
|
|
53
|
-
${r ? this.renderSpinner() :
|
|
58
|
+
${r ? this.renderSpinner() : s`<slot></slot>`}
|
|
54
59
|
</button>`;
|
|
55
60
|
}
|
|
56
61
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
b
|
|
61
|
-
],
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
b
|
|
65
|
-
],
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
],
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
],
|
|
72
|
-
|
|
62
|
+
n.styles = m(p);
|
|
63
|
+
l([
|
|
64
|
+
c(),
|
|
65
|
+
h(b, u, a.size)
|
|
66
|
+
], n.prototype, "size", 2);
|
|
67
|
+
l([
|
|
68
|
+
c(),
|
|
69
|
+
h(b, y, a.variant)
|
|
70
|
+
], n.prototype, "variant", 2);
|
|
71
|
+
l([
|
|
72
|
+
c({ type: Boolean })
|
|
73
|
+
], n.prototype, "disabled", 2);
|
|
74
|
+
l([
|
|
75
|
+
c({ type: Boolean })
|
|
76
|
+
], n.prototype, "isLoading", 2);
|
|
77
|
+
g(b, n);
|
|
73
78
|
export {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
u as
|
|
79
|
+
n as PieIconButton,
|
|
80
|
+
a as defaultProps,
|
|
81
|
+
u as sizes,
|
|
82
|
+
y as variants
|
|
77
83
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
|
+
import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
|
|
1
2
|
import type { CSSResult } from 'lit';
|
|
2
3
|
import type { LitElement } from 'lit';
|
|
3
4
|
import * as React_2 from 'react';
|
|
4
5
|
import type { TemplateResult } from 'lit';
|
|
5
6
|
|
|
7
|
+
export declare type DefaultProps = ComponentDefaultPropsGeneric<IconButtonProps, 'size' | 'variant' | 'disabled' | 'disabled' | 'isLoading'>;
|
|
8
|
+
|
|
9
|
+
export declare const defaultProps: DefaultProps;
|
|
10
|
+
|
|
6
11
|
export declare interface IconButtonProps {
|
|
7
12
|
/**
|
|
8
13
|
* (Optional) What size the button should be.
|
package/dist/react.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as t from "react";
|
|
2
2
|
import { createComponent as o } from "@lit/react";
|
|
3
3
|
import { PieIconButton as e } from "./index.js";
|
|
4
|
-
import { sizes as
|
|
4
|
+
import { defaultProps as f, sizes as B, variants as I } from "./index.js";
|
|
5
5
|
import "lit";
|
|
6
6
|
import "lit/decorators.js";
|
|
7
7
|
import "@justeattakeaway/pie-webc-core";
|
|
@@ -15,6 +15,7 @@ const n = o({
|
|
|
15
15
|
}), s = n;
|
|
16
16
|
export {
|
|
17
17
|
s as PieIconButton,
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
f as defaultProps,
|
|
19
|
+
B as sizes,
|
|
20
|
+
I as variants
|
|
20
21
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.28.
|
|
3
|
+
"version": "0.28.7",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
37
37
|
"@justeattakeaway/pie-components-config": "0.16.0",
|
|
38
|
-
"@justeattakeaway/pie-wrapper-react": "0.14.
|
|
38
|
+
"@justeattakeaway/pie-wrapper-react": "0.14.1",
|
|
39
39
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
43
|
-
"@justeattakeaway/pie-spinner": "0.6.
|
|
44
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
42
|
+
"@justeattakeaway/pie-icons-webc": "0.24.1",
|
|
43
|
+
"@justeattakeaway/pie-spinner": "0.6.5",
|
|
44
|
+
"@justeattakeaway/pie-webc-core": "0.23.0"
|
|
45
45
|
},
|
|
46
46
|
"volta": {
|
|
47
47
|
"extends": "../../../package.json"
|
package/src/defs.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
|
|
2
|
+
|
|
1
3
|
export const sizes = ['xsmall', 'small', 'medium', 'large'] as const;
|
|
2
4
|
export const variants = ['primary', 'secondary', 'outline', 'ghost',
|
|
3
5
|
'ghost-secondary', 'inverse', 'ghost-inverse'] as const;
|
|
@@ -24,3 +26,12 @@ export interface IconButtonProps {
|
|
|
24
26
|
*/
|
|
25
27
|
isLoading?: boolean;
|
|
26
28
|
}
|
|
29
|
+
|
|
30
|
+
export type DefaultProps = ComponentDefaultPropsGeneric<IconButtonProps, 'size' | 'variant' | 'disabled' | 'disabled' | 'isLoading'>;
|
|
31
|
+
|
|
32
|
+
export const defaultProps: DefaultProps = {
|
|
33
|
+
size: 'medium',
|
|
34
|
+
variant: 'primary',
|
|
35
|
+
disabled: false,
|
|
36
|
+
isLoading: false,
|
|
37
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { property } from 'lit/decorators.js';
|
|
|
5
5
|
import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
6
6
|
import styles from './iconButton.scss?inline';
|
|
7
7
|
import {
|
|
8
|
-
IconButtonProps, sizes, variants,
|
|
8
|
+
IconButtonProps, sizes, variants, defaultProps,
|
|
9
9
|
} from './defs';
|
|
10
10
|
import '@justeattakeaway/pie-spinner';
|
|
11
11
|
|
|
@@ -19,18 +19,18 @@ const componentSelector = 'pie-icon-button';
|
|
|
19
19
|
*/
|
|
20
20
|
export class PieIconButton extends LitElement implements IconButtonProps {
|
|
21
21
|
@property()
|
|
22
|
-
@validPropertyValues(componentSelector, sizes,
|
|
23
|
-
public size?: IconButtonProps['size'] =
|
|
22
|
+
@validPropertyValues(componentSelector, sizes, defaultProps.size)
|
|
23
|
+
public size?: IconButtonProps['size'] = defaultProps.size;
|
|
24
24
|
|
|
25
25
|
@property()
|
|
26
|
-
@validPropertyValues(componentSelector, variants,
|
|
27
|
-
public variant?: IconButtonProps['variant'] =
|
|
26
|
+
@validPropertyValues(componentSelector, variants, defaultProps.variant)
|
|
27
|
+
public variant?: IconButtonProps['variant'] = defaultProps.variant;
|
|
28
28
|
|
|
29
29
|
@property({ type: Boolean })
|
|
30
|
-
public disabled? =
|
|
30
|
+
public disabled? = defaultProps.disabled;
|
|
31
31
|
|
|
32
32
|
@property({ type: Boolean })
|
|
33
|
-
public isLoading? =
|
|
33
|
+
public isLoading? = defaultProps.isLoading;
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
36
|
* Template for the loading state
|