@digital-realty/ix-button 3.2.4 → 3.2.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/IxButton.d.ts +2 -0
- package/dist/IxButton.js +46 -26
- package/dist/IxButton.js.map +1 -1
- package/dist/ix-button-styles.js +1 -8
- package/dist/ix-button-styles.js.map +1 -1
- package/package.json +2 -2
package/dist/IxButton.d.ts
CHANGED
|
@@ -30,9 +30,11 @@ export declare class IxButton extends LitElement {
|
|
|
30
30
|
* Whether to display the icon or not.
|
|
31
31
|
*/
|
|
32
32
|
hasIcon: boolean;
|
|
33
|
+
icon: string;
|
|
33
34
|
text: string;
|
|
34
35
|
type: 'button' | 'submit' | 'reset';
|
|
35
36
|
appearance: 'elevated' | 'filled' | 'filled-tonal' | 'outlined' | 'text';
|
|
36
37
|
onClick: (event: MouseEvent) => void;
|
|
38
|
+
private renderContent;
|
|
37
39
|
render(): import("lit-html").TemplateResult<1>;
|
|
38
40
|
}
|
package/dist/IxButton.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { html, LitElement } from 'lit';
|
|
2
|
+
import { html, LitElement, nothing } from 'lit';
|
|
3
3
|
import { property } from 'lit/decorators.js';
|
|
4
4
|
import '@material/web/button/text-button.js';
|
|
5
5
|
import '@material/web/button/elevated-button.js';
|
|
@@ -33,6 +33,7 @@ export class IxButton extends LitElement {
|
|
|
33
33
|
* Whether to display the icon or not.
|
|
34
34
|
*/
|
|
35
35
|
this.hasIcon = false;
|
|
36
|
+
this.icon = '';
|
|
36
37
|
this.text = 'Submit';
|
|
37
38
|
this.type = 'button';
|
|
38
39
|
this.appearance = 'filled';
|
|
@@ -41,6 +42,12 @@ export class IxButton extends LitElement {
|
|
|
41
42
|
static get styles() {
|
|
42
43
|
return [];
|
|
43
44
|
}
|
|
45
|
+
renderContent() {
|
|
46
|
+
const icon = html `<md-icon slot="icon">${this.icon}</md-icon>`;
|
|
47
|
+
this.trailingIcon = true;
|
|
48
|
+
return html ` ${this.trailingIcon ? icon : nothing} ${this.text}
|
|
49
|
+
${this.trailingIcon ? nothing : icon}`;
|
|
50
|
+
}
|
|
44
51
|
render() {
|
|
45
52
|
let comp;
|
|
46
53
|
if (this.appearance === 'elevated') {
|
|
@@ -49,11 +56,13 @@ export class IxButton extends LitElement {
|
|
|
49
56
|
.disabled=${this.disabled}
|
|
50
57
|
.target=${this.target}
|
|
51
58
|
.href=${this.href}
|
|
52
|
-
.
|
|
53
|
-
.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
59
|
+
.value=${this.text}
|
|
60
|
+
.icon=${this.icon}
|
|
61
|
+
?has-icon=${this.hasIcon}
|
|
62
|
+
?trailing-icon=${this.trailingIcon}
|
|
63
|
+
>
|
|
64
|
+
${this.hasIcon ? this.renderContent() : this.text}
|
|
65
|
+
</md-elevated-button>`;
|
|
57
66
|
}
|
|
58
67
|
else if (this.appearance === 'filled') {
|
|
59
68
|
comp = html `<md-filled-button
|
|
@@ -61,11 +70,13 @@ export class IxButton extends LitElement {
|
|
|
61
70
|
.disabled=${this.disabled}
|
|
62
71
|
.target=${this.target}
|
|
63
72
|
.href=${this.href}
|
|
64
|
-
.
|
|
65
|
-
.
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
73
|
+
.value=${this.text}
|
|
74
|
+
.icon=${this.icon}
|
|
75
|
+
?has-icon=${this.hasIcon}
|
|
76
|
+
?trailing-icon=${this.trailingIcon}
|
|
77
|
+
>
|
|
78
|
+
${this.hasIcon ? this.renderContent() : this.text}
|
|
79
|
+
</md-filled-button>`;
|
|
69
80
|
}
|
|
70
81
|
else if (this.appearance === 'filled-tonal') {
|
|
71
82
|
comp = html `<md-filled-tonal-button
|
|
@@ -73,11 +84,13 @@ export class IxButton extends LitElement {
|
|
|
73
84
|
.disabled=${this.disabled}
|
|
74
85
|
.target=${this.target}
|
|
75
86
|
.href=${this.href}
|
|
76
|
-
.
|
|
77
|
-
.
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
87
|
+
.value=${this.text}
|
|
88
|
+
.icon=${this.icon}
|
|
89
|
+
?has-icon=${this.hasIcon}
|
|
90
|
+
?trailing-icon=${this.trailingIcon}
|
|
91
|
+
>
|
|
92
|
+
${this.hasIcon ? this.renderContent() : this.text}
|
|
93
|
+
</md-filled-tonal-button>`;
|
|
81
94
|
}
|
|
82
95
|
else if (this.appearance === 'outlined') {
|
|
83
96
|
comp = html `<md-outlined-button
|
|
@@ -85,11 +98,13 @@ export class IxButton extends LitElement {
|
|
|
85
98
|
.disabled=${this.disabled}
|
|
86
99
|
.target=${this.target}
|
|
87
100
|
.href=${this.href}
|
|
88
|
-
.
|
|
89
|
-
.
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
101
|
+
.value=${this.text}
|
|
102
|
+
.icon=${this.icon}
|
|
103
|
+
?has-icon=${this.hasIcon}
|
|
104
|
+
?trailing-icon=${this.trailingIcon}
|
|
105
|
+
>
|
|
106
|
+
${this.hasIcon ? this.renderContent() : this.text}
|
|
107
|
+
</md-outlined-button>`;
|
|
93
108
|
}
|
|
94
109
|
else if (this.appearance === 'text') {
|
|
95
110
|
comp = html `<md-text-button
|
|
@@ -97,11 +112,13 @@ export class IxButton extends LitElement {
|
|
|
97
112
|
.disabled=${this.disabled}
|
|
98
113
|
.target=${this.target}
|
|
99
114
|
.href=${this.href}
|
|
100
|
-
.
|
|
101
|
-
.
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
115
|
+
.value=${this.text}
|
|
116
|
+
.icon=${this.icon}
|
|
117
|
+
?has-icon=${this.hasIcon}
|
|
118
|
+
?trailing-icon=${this.trailingIcon}
|
|
119
|
+
>
|
|
120
|
+
${this.hasIcon ? this.renderContent() : this.text}
|
|
121
|
+
</md-text-button>`;
|
|
105
122
|
}
|
|
106
123
|
return html `${comp}`;
|
|
107
124
|
}
|
|
@@ -121,6 +138,9 @@ __decorate([
|
|
|
121
138
|
__decorate([
|
|
122
139
|
property({ type: Boolean, attribute: 'has-icon' })
|
|
123
140
|
], IxButton.prototype, "hasIcon", void 0);
|
|
141
|
+
__decorate([
|
|
142
|
+
property()
|
|
143
|
+
], IxButton.prototype, "icon", void 0);
|
|
124
144
|
__decorate([
|
|
125
145
|
property()
|
|
126
146
|
], IxButton.prototype, "text", void 0);
|
package/dist/IxButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxButton.js","sourceRoot":"","sources":["../src/IxButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"IxButton.js","sourceRoot":"","sources":["../src/IxButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '@material/web/button/text-button.js';\nimport '@material/web/button/elevated-button.js';\nimport '@material/web/button/filled-button.js';\nimport '@material/web/button/outlined-button.js';\nimport '@material/web/button/filled-tonal-button.js';\n\nexport class IxButton extends LitElement {\n static get styles() {\n return [];\n }\n\n /**\n * Whether or not the button is disabled.\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href = '';\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n /**\n * Whether to render the icon at the inline end of the label rather than the\n * inline start.\n *\n * _Note:_ Link buttons cannot have trailing icons.\n */\n @property({ type: Boolean, attribute: 'trailing-icon' }) trailingIcon = false;\n\n /**\n * Whether to display the icon or not.\n */\n @property({ type: Boolean, attribute: 'has-icon' }) hasIcon = false;\n\n @property() icon = '';\n\n @property()\n text: string = 'Submit';\n\n @property()\n type: 'button' | 'submit' | 'reset' = 'button';\n\n @property()\n appearance: 'elevated' | 'filled' | 'filled-tonal' | 'outlined' | 'text' =\n 'filled';\n\n @property()\n onClick: (event: MouseEvent) => void = () => {};\n\n private renderContent() {\n const icon = html`<md-icon slot=\"icon\">${this.icon}</md-icon>`;\n\n this.trailingIcon = true;\n\n return html` ${this.trailingIcon ? icon : nothing} ${this.text}\n ${this.trailingIcon ? nothing : icon}`;\n }\n\n render() {\n let comp;\n if (this.appearance === 'elevated') {\n comp = html`<md-elevated-button\n @click=${this.onClick}\n .disabled=${this.disabled}\n .target=${this.target}\n .href=${this.href}\n .value=${this.text}\n .icon=${this.icon}\n ?has-icon=${this.hasIcon}\n ?trailing-icon=${this.trailingIcon}\n >\n ${this.hasIcon ? this.renderContent() : this.text}\n </md-elevated-button>`;\n } else if (this.appearance === 'filled') {\n comp = html`<md-filled-button\n @click=${this.onClick}\n .disabled=${this.disabled}\n .target=${this.target}\n .href=${this.href}\n .value=${this.text}\n .icon=${this.icon}\n ?has-icon=${this.hasIcon}\n ?trailing-icon=${this.trailingIcon}\n >\n ${this.hasIcon ? this.renderContent() : this.text}\n </md-filled-button>`;\n } else if (this.appearance === 'filled-tonal') {\n comp = html`<md-filled-tonal-button\n @click=${this.onClick}\n .disabled=${this.disabled}\n .target=${this.target}\n .href=${this.href}\n .value=${this.text}\n .icon=${this.icon}\n ?has-icon=${this.hasIcon}\n ?trailing-icon=${this.trailingIcon}\n >\n ${this.hasIcon ? this.renderContent() : this.text}\n </md-filled-tonal-button>`;\n } else if (this.appearance === 'outlined') {\n comp = html`<md-outlined-button\n @click=${this.onClick}\n .disabled=${this.disabled}\n .target=${this.target}\n .href=${this.href}\n .value=${this.text}\n .icon=${this.icon}\n ?has-icon=${this.hasIcon}\n ?trailing-icon=${this.trailingIcon}\n >\n ${this.hasIcon ? this.renderContent() : this.text}\n </md-outlined-button>`;\n } else if (this.appearance === 'text') {\n comp = html`<md-text-button\n @click=${this.onClick}\n .disabled=${this.disabled}\n .target=${this.target}\n .href=${this.href}\n .value=${this.text}\n .icon=${this.icon}\n ?has-icon=${this.hasIcon}\n ?trailing-icon=${this.trailingIcon}\n >\n ${this.hasIcon ? this.renderContent() : this.text}\n </md-text-button>`;\n }\n return html`${comp}`;\n }\n}\n"]}
|
package/dist/ix-button-styles.js
CHANGED
|
@@ -1,10 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const IxButtonStyles = css
|
|
3
|
-
:host {
|
|
4
|
-
font-family: var(--ix-button-font-family, 'Museo-300', Arial, sans-serif);
|
|
5
|
-
}
|
|
6
|
-
button {
|
|
7
|
-
font-family: var(--ix-button-font-family, 'Museo-300', Arial, sans-serif);
|
|
8
|
-
}
|
|
9
|
-
`;
|
|
2
|
+
export const IxButtonStyles = css ``;
|
|
10
3
|
//# sourceMappingURL=ix-button-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-button-styles.js","sourceRoot":"","sources":["../src/ix-button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ix-button-styles.js","sourceRoot":"","sources":["../src/ix-button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxButtonStyles = css``;\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-button following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "3.2.
|
|
6
|
+
"version": "3.2.5",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -100,5 +100,5 @@
|
|
|
100
100
|
"README.md",
|
|
101
101
|
"LICENSE"
|
|
102
102
|
],
|
|
103
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "8b801892bdb92ec0c653961b76f4a144cc35a4f1"
|
|
104
104
|
}
|