@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
299 lines (296 loc) • 9.06 kB
JavaScript
import {
SynSpinner
} from "./chunk.NX35Z53F.js";
import {
FormControlController,
validValidityState
} from "./chunk.HP2LEQRU.js";
import {
button_custom_styles_default
} from "./chunk.VWY2RG4F.js";
import {
button_styles_default
} from "./chunk.5SQ7NVBX.js";
import {
SynIcon
} from "./chunk.WFJVDRQR.js";
import {
LocalizeController
} from "./chunk.OAQRCZOO.js";
import {
HasSlotController,
getTextContent
} from "./chunk.WVVQK5TE.js";
import {
enableDefaultSettings
} from "./chunk.E5UUNP6E.js";
import {
watch
} from "./chunk.BVZQ6QSY.js";
import {
component_styles_default
} from "./chunk.NLYVOJGK.js";
import {
SynergyElement
} from "./chunk.3AZFEB6D.js";
import {
__decorateClass
} from "./chunk.Z4XV3SMG.js";
// src/components/button/button.component.ts
import { classMap } from "lit/directives/class-map.js";
import { html, literal } from "lit/static-html.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { property, query, state } from "lit/decorators.js";
var SynButton = class extends SynergyElement {
constructor() {
super(...arguments);
this.formControlController = new FormControlController(this, {
assumeInteractionOn: ["click"]
});
this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix");
this.localize = new LocalizeController(this);
this.iconOnly = false;
this.hasFocus = false;
this.invalid = false;
this.title = "";
this.variant = "outline";
this.size = "medium";
this.caret = false;
this.disabled = false;
this.loading = 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("syn-blur");
}
handleFocus() {
this.hasFocus = true;
this.emit("syn-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;
}
handleSlotChange() {
const textContent = getTextContent(this.defaultSlot).trim();
const assignedElements = this.defaultSlot.assignedElements({ flatten: true });
const iconOnlyElement = assignedElements.length === 1 && assignedElements[0].tagName.toLowerCase() === "syn-icon";
this.iconOnly = iconOnlyElement && textContent === "";
}
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 ? literal`a` : literal`button`;
return html`
<${tag}
part="base"
class=${classMap({
button: true,
"button--primary": true,
"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--disabled": this.disabled,
"button--focused": this.hasFocus,
"button--loading": this.loading,
"button--filled": this.variant === "filled",
"button--outline": this.variant === "outline",
"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=${ifDefined(isLink ? void 0 : this.disabled)}
type=${ifDefined(isLink ? void 0 : this.type)}
title=${this.title}
name=${ifDefined(isLink ? void 0 : this.name)}
value=${ifDefined(isLink ? void 0 : this.value)}
href=${ifDefined(isLink && !this.disabled ? this.href : void 0)}
target=${ifDefined(isLink ? this.target : void 0)}
download=${ifDefined(isLink ? this.download : void 0)}
rel=${ifDefined(isLink ? this.rel : void 0)}
role=${ifDefined(isLink ? void 0 : "button")}
aria-disabled=${this.disabled ? "true" : "false"}
tabindex=${this.disabled ? "-1" : "0"}
=${this.handleBlur}
=${this.handleFocus}
=${this.isButton() ? this.handleInvalid : null}
=${this.handleClick}
>
<slot name="prefix" part="prefix" class="button__prefix"></slot>
<slot part="label" class=${classMap({ "button__label": true, "button__icon-only": this.iconOnly })} =${this.handleSlotChange}></slot>
<slot name="suffix" part="suffix" class="button__suffix"></slot>
${this.caret ? html` <syn-icon part="caret" class="button__caret" library="system" name="caret"></syn-icon> ` : ""}
${this.loading ? html`<syn-spinner part="spinner"></syn-spinner>` : ""}
</${tag}>
`;
}
};
SynButton.styles = [component_styles_default, button_styles_default, button_custom_styles_default];
SynButton.dependencies = {
"syn-icon": SynIcon,
"syn-spinner": SynSpinner
};
__decorateClass([
query(".button")
], SynButton.prototype, "button", 2);
__decorateClass([
query("slot:not([name])")
], SynButton.prototype, "defaultSlot", 2);
__decorateClass([
state()
], SynButton.prototype, "iconOnly", 2);
__decorateClass([
state()
], SynButton.prototype, "hasFocus", 2);
__decorateClass([
state()
], SynButton.prototype, "invalid", 2);
__decorateClass([
property({ reflect: true })
], SynButton.prototype, "title", 2);
__decorateClass([
property({ reflect: true })
], SynButton.prototype, "variant", 2);
__decorateClass([
property({ reflect: true })
], SynButton.prototype, "size", 2);
__decorateClass([
property({ type: Boolean, reflect: true })
], SynButton.prototype, "caret", 2);
__decorateClass([
property({ type: Boolean, reflect: true })
], SynButton.prototype, "disabled", 2);
__decorateClass([
property({ type: Boolean, reflect: true })
], SynButton.prototype, "loading", 2);
__decorateClass([
property()
], SynButton.prototype, "type", 2);
__decorateClass([
property()
], SynButton.prototype, "name", 2);
__decorateClass([
property()
], SynButton.prototype, "value", 2);
__decorateClass([
property()
], SynButton.prototype, "href", 2);
__decorateClass([
property()
], SynButton.prototype, "target", 2);
__decorateClass([
property()
], SynButton.prototype, "rel", 2);
__decorateClass([
property()
], SynButton.prototype, "download", 2);
__decorateClass([
property()
], SynButton.prototype, "form", 2);
__decorateClass([
property({ attribute: "formaction" })
], SynButton.prototype, "formAction", 2);
__decorateClass([
property({ attribute: "formenctype" })
], SynButton.prototype, "formEnctype", 2);
__decorateClass([
property({ attribute: "formmethod" })
], SynButton.prototype, "formMethod", 2);
__decorateClass([
property({ attribute: "formnovalidate", type: Boolean })
], SynButton.prototype, "formNoValidate", 2);
__decorateClass([
property({ attribute: "formtarget" })
], SynButton.prototype, "formTarget", 2);
__decorateClass([
watch("disabled", { waitUntilFirstUpdate: true })
], SynButton.prototype, "handleDisabledChange", 1);
SynButton = __decorateClass([
enableDefaultSettings("SynButton")
], SynButton);
export {
SynButton
};
//# sourceMappingURL=chunk.YYEPGTYW.js.map