@melodicdev/components 1.5.11 → 1.5.12

package/assets/melodic-components.min.js

@@ -4171,32 +4171,49 @@ lt = v([_({
   attributes: ["size", "label"]
 })], lt);
 function ol(e) {
-  return i`
-		<button
-			type="${e.type}"
-			class=${g({
+  const t = g({
     "ml-button": !0,
     [`ml-button--${e.variant}`]: !0,
     [`ml-button--${e.size}`]: !0,
     "ml-button--disabled": e.isDisabled,
     "ml-button--loading": e.loading,
     "ml-button--full-width": e.fullWidth
-  })}
+  }), r = i`
+		${d(e.loading, () => i`
+				<span class="ml-button__spinner">
+					<ml-spinner size="sm"></ml-spinner>
+				</span>
+			`)}
+		<span class="ml-button__content">
+			<slot name="icon-start"></slot>
+			<slot></slot>
+			<slot name="icon-end"></slot>
+		</span>
+	`;
+  return e.href != null ? i`
+			<a
+				href=${e.isDisabled ? void 0 : e.href}
+				target=${e.target ?? void 0}
+				rel=${e.rel ?? void 0}
+				download=${e.download ?? void 0}
+				class=${t}
+				role="button"
+				@click=${e.handleClick}
+				aria-disabled=${e.isDisabled ? "true" : "false"}
+				aria-busy=${e.loading ? "true" : "false"}
+			>
+				${r}
+			</a>
+		` : i`
+		<button
+			type="${e.type}"
+			class=${t}
 			?disabled=${e.isDisabled}
 			@click=${e.handleClick}
 			aria-disabled=${e.isDisabled ? "true" : "false"}
 			aria-busy=${e.loading ? "true" : "false"}
 		>
-			${d(e.loading, () => i`
-					<span class="ml-button__spinner">
-						<ml-spinner size="sm"></ml-spinner>
-					</span>
-				`)}
-			<span class="ml-button__content">
-				<slot name="icon-start"></slot>
-				<slot></slot>
-				<slot name="icon-end"></slot>
-			</span>
+			${r}
 		</button>
 	`;
 }
@@ -4455,7 +4472,7 @@ const il = () => w`
 `;
 var ot = class {
   constructor() {
-    this.variant = "primary", this.size = "md", this.type = "button", this.disabled = !1, this.loading = !1, this.fullWidth = !1, this.handleClick = (t) => {
+    this.variant = "primary", this.size = "md", this.type = "button", this.disabled = !1, this.loading = !1, this.fullWidth = !1, this.href = null, this.target = null, this.rel = null, this.download = null, this.handleClick = (t) => {
       if (this.isDisabled) {
         t.preventDefault(), t.stopPropagation();
         return;
@@ -4485,7 +4502,11 @@ ot = v([_({
     "type",
     "disabled",
     "loading",
-    "full-width"
+    "full-width",
+    "href",
+    "target",
+    "rel",
+    "download"
   ]
 })], ot);
 function sl(e) {

package/lib/components/forms/button/button.component.d.ts

@@ -34,6 +34,14 @@ export declare class ButtonComponent implements IElementRef, OnInit {
     loading: boolean;
     /** Make button full width */
     fullWidth: boolean;
+    /** If set, renders as an anchor tag instead of a button */
+    href: string | null;
+    /** Anchor target (only used when href is set) */
+    target: string | null;
+    /** Anchor rel (only used when href is set) */
+    rel: string | null;
+    /** Anchor download (only used when href is set) */
+    download: string | null;
     onInit(): void;
     /** Whether the button is effectively disabled */
     get isDisabled(): boolean;

package/lib/components/forms/button/button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,6CAA6C,CAAC;AAIrD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAMa,eAAgB,YAAW,WAAW,EAAE,MAAM;IACnD,UAAU,EAAG,WAAW,CAAC;IAEhC,2BAA2B;IACpB,OAAO,EAAE,aAAa,CAAa;IAE1C,kBAAkB;IACX,IAAI,EAAE,IAAI,CAAQ;IAEzB,uBAAuB;IAChB,IAAI,EAAE,UAAU,CAAY;IAEnC,yBAAyB;IAClB,QAAQ,UAAS;IAExB,yBAAyB;IAClB,OAAO,UAAS;IAEvB,6BAA6B;IACtB,SAAS,UAAS;IAElB,MAAM,IAAI,IAAI;IAOrB,iDAAiD;IACjD,IAAW,UAAU,IAAI,OAAO,CAE/B;IAED,0BAA0B;IACnB,WAAW,GAAI,OAAO,UAAU,KAAG,IAAI,CAe5C;CACF"}
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,6CAA6C,CAAC;AAIrD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAMa,eAAgB,YAAW,WAAW,EAAE,MAAM;IACnD,UAAU,EAAG,WAAW,CAAC;IAEhC,2BAA2B;IACpB,OAAO,EAAE,aAAa,CAAa;IAE1C,kBAAkB;IACX,IAAI,EAAE,IAAI,CAAQ;IAEzB,uBAAuB;IAChB,IAAI,EAAE,UAAU,CAAY;IAEnC,yBAAyB;IAClB,QAAQ,UAAS;IAExB,yBAAyB;IAClB,OAAO,UAAS;IAEvB,6BAA6B;IACtB,SAAS,UAAS;IAEzB,2DAA2D;IACpD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAElC,iDAAiD;IAC1C,MAAM,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC,8CAA8C;IACvC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEjC,mDAAmD;IAC5C,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE/B,MAAM,IAAI,IAAI;IAOrB,iDAAiD;IACjD,IAAW,UAAU,IAAI,OAAO,CAE/B;IAED,0BAA0B;IACnB,WAAW,GAAI,OAAO,UAAU,KAAG,IAAI,CAe5C;CACF"}

package/lib/components/forms/button/button.component.js

@@ -41,6 +41,14 @@ let ButtonComponent = class ButtonComponent {
         this.loading = false;
         /** Make button full width */
         this.fullWidth = false;
+        /** If set, renders as an anchor tag instead of a button */
+        this.href = null;
+        /** Anchor target (only used when href is set) */
+        this.target = null;
+        /** Anchor rel (only used when href is set) */
+        this.rel = null;
+        /** Anchor download (only used when href is set) */
+        this.download = null;
         /** Handle click events */
         this.handleClick = (event) => {
             if (this.isDisabled) {
@@ -72,7 +80,7 @@ ButtonComponent = __decorate([
         selector: 'ml-button',
         template: buttonTemplate,
         styles: buttonStyles,
-        attributes: ['variant', 'size', 'type', 'disabled', 'loading', 'full-width']
+        attributes: ['variant', 'size', 'type', 'disabled', 'loading', 'full-width', 'href', 'target', 'rel', 'download']
     })
 ], ButtonComponent);
 export { ButtonComponent };

package/lib/components/forms/button/button.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,wBAAgB,cAAc,CAAC,CAAC,EAAE,eAAe,6CAgChD"}
+{"version":3,"file":"button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,wBAAgB,cAAc,CAAC,CAAC,EAAE,eAAe,6CAwDhD"}

package/lib/components/forms/button/button.template.js

@@ -1,31 +1,52 @@
 import { html, classMap, when } from '@melodicdev/core';
 export function buttonTemplate(c) {
-    return html `
-		<button
-			type="${c.type}"
-			class=${classMap({
+    const classes = classMap({
         'ml-button': true,
         [`ml-button--${c.variant}`]: true,
         [`ml-button--${c.size}`]: true,
         'ml-button--disabled': c.isDisabled,
         'ml-button--loading': c.loading,
         'ml-button--full-width': c.fullWidth
-    })}
+    });
+    const content = html `
+		${when(c.loading, () => html `
+				<span class="ml-button__spinner">
+					<ml-spinner size="sm"></ml-spinner>
+				</span>
+			`)}
+		<span class="ml-button__content">
+			<slot name="icon-start"></slot>
+			<slot></slot>
+			<slot name="icon-end"></slot>
+		</span>
+	`;
+    if (c.href != null) {
+        return html `
+			<a
+				href=${c.isDisabled ? undefined : c.href}
+				target=${c.target ?? undefined}
+				rel=${c.rel ?? undefined}
+				download=${c.download ?? undefined}
+				class=${classes}
+				role="button"
+				@click=${c.handleClick}
+				aria-disabled=${c.isDisabled ? 'true' : 'false'}
+				aria-busy=${c.loading ? 'true' : 'false'}
+			>
+				${content}
+			</a>
+		`;
+    }
+    return html `
+		<button
+			type="${c.type}"
+			class=${classes}
 			?disabled=${c.isDisabled}
 			@click=${c.handleClick}
 			aria-disabled=${c.isDisabled ? 'true' : 'false'}
 			aria-busy=${c.loading ? 'true' : 'false'}
 		>
-			${when(c.loading, () => html `
-					<span class="ml-button__spinner">
-						<ml-spinner size="sm"></ml-spinner>
-					</span>
-				`)}
-			<span class="ml-button__content">
-				<slot name="icon-start"></slot>
-				<slot></slot>
-				<slot name="icon-end"></slot>
-			</span>
+			${content}
 		</button>
 	`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@melodicdev/components",
-	"version": "1.5.11",
+	"version": "1.5.12",
 	"description": "Themeable UI component library built on the Melodic Framework",
 	"license": "MIT",
 	"author": "Melodic Development",