@melodicdev/components 1.5.11 → 1.5.12
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/assets/melodic-components.js +43 -16
- package/assets/melodic-components.js.map +1 -1
- package/assets/melodic-components.min.js +38 -17
- package/lib/components/forms/button/button.component.d.ts +8 -0
- package/lib/components/forms/button/button.component.d.ts.map +1 -1
- package/lib/components/forms/button/button.component.js +9 -1
- package/lib/components/forms/button/button.template.d.ts.map +1 -1
- package/lib/components/forms/button/button.template.js +36 -15
- package/package.json +1 -1
|
@@ -5144,32 +5144,51 @@ SpinnerComponent = __decorate([MelodicComponent({
|
|
|
5144
5144
|
attributes: ["size", "label"]
|
|
5145
5145
|
})], SpinnerComponent);
|
|
5146
5146
|
function buttonTemplate(c) {
|
|
5147
|
-
|
|
5148
|
-
<button
|
|
5149
|
-
type="${c.type}"
|
|
5150
|
-
class=${classMap({
|
|
5147
|
+
const classes = classMap({
|
|
5151
5148
|
"ml-button": true,
|
|
5152
5149
|
[`ml-button--${c.variant}`]: true,
|
|
5153
5150
|
[`ml-button--${c.size}`]: true,
|
|
5154
5151
|
"ml-button--disabled": c.isDisabled,
|
|
5155
5152
|
"ml-button--loading": c.loading,
|
|
5156
5153
|
"ml-button--full-width": c.fullWidth
|
|
5157
|
-
})
|
|
5154
|
+
});
|
|
5155
|
+
const content = html`
|
|
5156
|
+
${when(c.loading, () => html`
|
|
5157
|
+
<span class="ml-button__spinner">
|
|
5158
|
+
<ml-spinner size="sm"></ml-spinner>
|
|
5159
|
+
</span>
|
|
5160
|
+
`)}
|
|
5161
|
+
<span class="ml-button__content">
|
|
5162
|
+
<slot name="icon-start"></slot>
|
|
5163
|
+
<slot></slot>
|
|
5164
|
+
<slot name="icon-end"></slot>
|
|
5165
|
+
</span>
|
|
5166
|
+
`;
|
|
5167
|
+
if (c.href != null) return html`
|
|
5168
|
+
<a
|
|
5169
|
+
href=${c.isDisabled ? void 0 : c.href}
|
|
5170
|
+
target=${c.target ?? void 0}
|
|
5171
|
+
rel=${c.rel ?? void 0}
|
|
5172
|
+
download=${c.download ?? void 0}
|
|
5173
|
+
class=${classes}
|
|
5174
|
+
role="button"
|
|
5175
|
+
@click=${c.handleClick}
|
|
5176
|
+
aria-disabled=${c.isDisabled ? "true" : "false"}
|
|
5177
|
+
aria-busy=${c.loading ? "true" : "false"}
|
|
5178
|
+
>
|
|
5179
|
+
${content}
|
|
5180
|
+
</a>
|
|
5181
|
+
`;
|
|
5182
|
+
return html`
|
|
5183
|
+
<button
|
|
5184
|
+
type="${c.type}"
|
|
5185
|
+
class=${classes}
|
|
5158
5186
|
?disabled=${c.isDisabled}
|
|
5159
5187
|
@click=${c.handleClick}
|
|
5160
5188
|
aria-disabled=${c.isDisabled ? "true" : "false"}
|
|
5161
5189
|
aria-busy=${c.loading ? "true" : "false"}
|
|
5162
5190
|
>
|
|
5163
|
-
${
|
|
5164
|
-
<span class="ml-button__spinner">
|
|
5165
|
-
<ml-spinner size="sm"></ml-spinner>
|
|
5166
|
-
</span>
|
|
5167
|
-
`)}
|
|
5168
|
-
<span class="ml-button__content">
|
|
5169
|
-
<slot name="icon-start"></slot>
|
|
5170
|
-
<slot></slot>
|
|
5171
|
-
<slot name="icon-end"></slot>
|
|
5172
|
-
</span>
|
|
5191
|
+
${content}
|
|
5173
5192
|
</button>
|
|
5174
5193
|
`;
|
|
5175
5194
|
}
|
|
@@ -5434,6 +5453,10 @@ var ButtonComponent = class ButtonComponent$1 {
|
|
|
5434
5453
|
this.disabled = false;
|
|
5435
5454
|
this.loading = false;
|
|
5436
5455
|
this.fullWidth = false;
|
|
5456
|
+
this.href = null;
|
|
5457
|
+
this.target = null;
|
|
5458
|
+
this.rel = null;
|
|
5459
|
+
this.download = null;
|
|
5437
5460
|
this.handleClick = (event) => {
|
|
5438
5461
|
if (this.isDisabled) {
|
|
5439
5462
|
event.preventDefault();
|
|
@@ -5464,7 +5487,11 @@ ButtonComponent = __decorate([MelodicComponent({
|
|
|
5464
5487
|
"type",
|
|
5465
5488
|
"disabled",
|
|
5466
5489
|
"loading",
|
|
5467
|
-
"full-width"
|
|
5490
|
+
"full-width",
|
|
5491
|
+
"href",
|
|
5492
|
+
"target",
|
|
5493
|
+
"rel",
|
|
5494
|
+
"download"
|
|
5468
5495
|
]
|
|
5469
5496
|
})], ButtonComponent);
|
|
5470
5497
|
function buttonGroupTemplate(c) {
|