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} > ${this.caret ? n2` ` : ""} ${this.loading ? n2`` : ""} `; } }; 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 };