Archived
Template
1
Fork 0
This repository has been archived on 2024-09-04. You can view files and clone it, but cannot push or open issues or pull requests.
Contour/public/@shoelace-style/shoelace/cdn/chunks/chunk.FNXODNAY.js

300 lines
8.1 KiB
JavaScript
Raw Permalink Normal View History

2024-01-30 10:59:28 -05:00
import {
SlSpinner
} from "./chunk.TEPHFVM5.js";
import {
FormControlController,
validValidityState
} from "./chunk.NMS6LWK4.js";
import {
button_styles_default
} from "./chunk.M5IYOV74.js";
import {
n as n2,
s
} from "./chunk.LX7UG5WS.js";
import {
LocalizeController
} from "./chunk.NH3SRVOC.js";
import {
o
} from "./chunk.2URMUHDY.js";
import {
HasSlotController
} from "./chunk.NYIIDP5N.js";
import {
e
} from "./chunk.UZVKBFXH.js";
import {
SlIcon
} from "./chunk.UZYAV5H6.js";
import {
watch
} from "./chunk.FA5RT4K4.js";
import {
ShoelaceElement,
e as e2,
n,
r
} from "./chunk.SEXBCYCU.js";
import {
__decorateClass
} from "./chunk.KIILAQWQ.js";
// src/components/button/button.component.ts
var SlButton = class extends ShoelaceElement {
constructor() {
super(...arguments);
this.formControlController = new FormControlController(this, {
assumeInteractionOn: ["click"]
});
this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix");
this.localize = new LocalizeController(this);
this.hasFocus = false;
this.invalid = false;
this.title = "";
this.variant = "default";
this.size = "medium";
this.caret = false;
this.disabled = false;
this.loading = false;
this.outline = false;
this.pill = false;
this.circle = false;
this.type = "button";
this.name = "";
this.value = "";
this.href = "";
this.rel = "noreferrer noopener";
}
/** Gets the validity state object */
get validity() {
if (this.isButton()) {
return this.button.validity;
}
return validValidityState;
}
/** Gets the validation message */
get validationMessage() {
if (this.isButton()) {
return this.button.validationMessage;
}
return "";
}
firstUpdated() {
if (this.isButton()) {
this.formControlController.updateValidity();
}
}
handleBlur() {
this.hasFocus = false;
this.emit("sl-blur");
}
handleFocus() {
this.hasFocus = true;
this.emit("sl-focus");
}
handleClick() {
if (this.type === "submit") {
this.formControlController.submit(this);
}
if (this.type === "reset") {
this.formControlController.reset(this);
}
}
handleInvalid(event) {
this.formControlController.setValidity(false);
this.formControlController.emitInvalidEvent(event);
}
isButton() {
return this.href ? false : true;
}
isLink() {
return this.href ? true : false;
}
handleDisabledChange() {
if (this.isButton()) {
this.formControlController.setValidity(this.disabled);
}
}
/** Simulates a click on the button. */
click() {
this.button.click();
}
/** Sets focus on the button. */
focus(options) {
this.button.focus(options);
}
/** Removes focus from the button. */
blur() {
this.button.blur();
}
/** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
checkValidity() {
if (this.isButton()) {
return this.button.checkValidity();
}
return true;
}
/** Gets the associated form, if one exists. */
getForm() {
return this.formControlController.getForm();
}
/** Checks for validity and shows the browser's validation message if the control is invalid. */
reportValidity() {
if (this.isButton()) {
return this.button.reportValidity();
}
return true;
}
/** Sets a custom validation message. Pass an empty string to restore validity. */
setCustomValidity(message) {
if (this.isButton()) {
this.button.setCustomValidity(message);
this.formControlController.updateValidity();
}
}
render() {
const isLink = this.isLink();
const tag = isLink ? s`a` : s`button`;
return n2`
<${tag}
part="base"
class=${e({
button: true,
"button--default": this.variant === "default",
"button--primary": this.variant === "primary",
"button--success": this.variant === "success",
"button--neutral": this.variant === "neutral",
"button--warning": this.variant === "warning",
"button--danger": this.variant === "danger",
"button--text": this.variant === "text",
"button--small": this.size === "small",
"button--medium": this.size === "medium",
"button--large": this.size === "large",
"button--caret": this.caret,
"button--circle": this.circle,
"button--disabled": this.disabled,
"button--focused": this.hasFocus,
"button--loading": this.loading,
"button--standard": !this.outline,
"button--outline": this.outline,
"button--pill": this.pill,
"button--rtl": this.localize.dir() === "rtl",
"button--has-label": this.hasSlotController.test("[default]"),
"button--has-prefix": this.hasSlotController.test("prefix"),
"button--has-suffix": this.hasSlotController.test("suffix")
})}
?disabled=${o(isLink ? void 0 : this.disabled)}
type=${o(isLink ? void 0 : this.type)}
title=${this.title}
name=${o(isLink ? void 0 : this.name)}
value=${o(isLink ? void 0 : this.value)}
href=${o(isLink ? this.href : void 0)}
target=${o(isLink ? this.target : void 0)}
download=${o(isLink ? this.download : void 0)}
rel=${o(isLink ? this.rel : void 0)}
role=${o(isLink ? void 0 : "button")}
aria-disabled=${this.disabled ? "true" : "false"}
tabindex=${this.disabled ? "-1" : "0"}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
@invalid=${this.isButton() ? this.handleInvalid : null}
@click=${this.handleClick}
>
<slot name="prefix" part="prefix" class="button__prefix"></slot>
<slot part="label" class="button__label"></slot>
<slot name="suffix" part="suffix" class="button__suffix"></slot>
${this.caret ? n2` <sl-icon part="caret" class="button__caret" library="system" name="caret"></sl-icon> ` : ""}
${this.loading ? n2`<sl-spinner part="spinner"></sl-spinner>` : ""}
</${tag}>
`;
}
};
SlButton.styles = button_styles_default;
SlButton.dependencies = {
"sl-icon": SlIcon,
"sl-spinner": SlSpinner
};
__decorateClass([
e2(".button")
], SlButton.prototype, "button", 2);
__decorateClass([
r()
], SlButton.prototype, "hasFocus", 2);
__decorateClass([
r()
], SlButton.prototype, "invalid", 2);
__decorateClass([
n()
], SlButton.prototype, "title", 2);
__decorateClass([
n({ reflect: true })
], SlButton.prototype, "variant", 2);
__decorateClass([
n({ reflect: true })
], SlButton.prototype, "size", 2);
__decorateClass([
n({ type: Boolean, reflect: true })
], SlButton.prototype, "caret", 2);
__decorateClass([
n({ type: Boolean, reflect: true })
], SlButton.prototype, "disabled", 2);
__decorateClass([
n({ type: Boolean, reflect: true })
], SlButton.prototype, "loading", 2);
__decorateClass([
n({ type: Boolean, reflect: true })
], SlButton.prototype, "outline", 2);
__decorateClass([
n({ type: Boolean, reflect: true })
], SlButton.prototype, "pill", 2);
__decorateClass([
n({ type: Boolean, reflect: true })
], SlButton.prototype, "circle", 2);
__decorateClass([
n()
], SlButton.prototype, "type", 2);
__decorateClass([
n()
], SlButton.prototype, "name", 2);
__decorateClass([
n()
], SlButton.prototype, "value", 2);
__decorateClass([
n()
], SlButton.prototype, "href", 2);
__decorateClass([
n()
], SlButton.prototype, "target", 2);
__decorateClass([
n()
], SlButton.prototype, "rel", 2);
__decorateClass([
n()
], SlButton.prototype, "download", 2);
__decorateClass([
n()
], SlButton.prototype, "form", 2);
__decorateClass([
n({ attribute: "formaction" })
], SlButton.prototype, "formAction", 2);
__decorateClass([
n({ attribute: "formenctype" })
], SlButton.prototype, "formEnctype", 2);
__decorateClass([
n({ attribute: "formmethod" })
], SlButton.prototype, "formMethod", 2);
__decorateClass([
n({ attribute: "formnovalidate", type: Boolean })
], SlButton.prototype, "formNoValidate", 2);
__decorateClass([
n({ attribute: "formtarget" })
], SlButton.prototype, "formTarget", 2);
__decorateClass([
watch("disabled", { waitUntilFirstUpdate: true })
], SlButton.prototype, "handleDisabledChange", 1);
export {
SlButton
};