@nysds/nys-button
Version:
The Button component from the NYS Design System.
253 lines (252 loc) • 24.2 kB
JavaScript
import { LitElement as y, unsafeCSS as d, html as e } from "lit";
import { property as r } from "lit/decorators.js";
import { ifDefined as s } from "lit/directives/if-defined.js";
/*!
* █▄ █ █ █ █▀▀▀█ █▀▀▄ █▀▀▀█
* █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
* █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
*
* Button Component v1.16.0
* Part of the New York State Design System
* Repository: https://github.com/its-hcd/nysds
* License: MIT
*/
const v = ':host{--_nys-button-width: fit-content;--_nys-button-height: var(--nys-size-600, 48px);--_nys-button-border-radius--start: var(--nys-radius-xl, 12px);--_nys-button-border-radius--end: var(--nys-radius-xl, 12px);--_nys-button-padding--y: calc(var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px));--_nys-button-padding--x: calc(var(--nys-space-250, 20px) - var(--nys-border-width-md, 2px));--_nys-button-gap: var(--nys-space-100, 8px);--_nys-button-justify-content: center;--_nys-button-border-width: var(--nys-border-width-md, 2px);--_nys-button-outline-width: var(--nys-border-width-md, 2px);--_nys-button-outline-offset: var(--nys-space-2px, 2px);--_nys-button-outline-color: var(--nys-color-focus, #004dd1);--_nys-button-background-color: var(--nys-button-background-color, var(--nys-color-theme, #154973));--_nys-button-color: var(--nys-button-color, var(--nys-color-text-reverse, #ffffff));--_nys-button-border-color: var(--nys-button-border-color, var(--nys-color-theme, #154973));--_nys-button-background-color--hover: var(--nys-button-background-color--hover, var(--nys-color-theme-strong, #0e324f));--_nys-button-color--hover: var(--nys-button-color--hover, var(--nys-color-text-reverse, #ffffff));--_nys-button-border-color--hover: var(--nys-button-border-color--hover, var(--nys-color-theme-strong, #0e324f));--_nys-button-background-color--active: var(--nys-button-background-color--active, var(--nys-color-theme-stronger, #081b2b));--_nys-button-color--active: var(--nys-button-color--active, var(--nys-color-text-reverse, #ffffff));--_nys-button-border-color--active: var(--nys-button-border-color--active, var(--nys-color-theme-stronger, #081b2b));--_nys-button-background-color--disabled: var(--nys-color-neutral-10, #f6f6f6);--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-neutral-10, #f6f6f6);--_nys-button-font-size: var(--nys-font-size-ui-md, 16px);--_nys-button-font-weight: var(--nys-font-weight-semibold, 600);--_nys-button-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-button-font-family: var(--nys-font-family-ui, var(--nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif));display:inline-flex;width:fit-content}:host([size=sm]){--_nys-button-height: var(--nys-size-500, 40px);--_nys-button-padding--y: calc(var(--nys-space-100, 8px) - var(--nys-border-width-md, 2px));--_nys-button-padding--x: calc(var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px))}:host([size=md]){--_nys-button-height: var(--nys-size-600, 48px);--_nys-button-padding--y: calc(var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px));--_nys-button-padding--x: calc(var(--nys-space-250, 20px) - var(--nys-border-width-md, 2px))}:host([size=lg]){--_nys-button-height: var(--nys-size-700, 56px);--_nys-button-padding--y: calc(var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px));--_nys-button-padding--x: calc(var(--nys-space-300, 24px) - var(--nys-border-width-md, 2px))}:host([fullWidth]){width:100%}:host([fullWidth]) .nys-button{width:100%}:host([variant=filled]){--_nys-button-background-color: var(--nys-button-background-color, var(--nys-color-theme, #154973));--_nys-button-color: var(--nys-button-color, var(--nys-color-text-reverse, #ffffff));--_nys-button-border-color: var(--nys-button-border-color, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--hover: var(--nys-button-background-color--hover, var(--nys-color-theme-strong, #0e324f));--_nys-button-color--hover: var(--nys-button-color--hover, var(--nys-color-text-reverse, #ffffff));--_nys-button-background-color--active: var(--nys-button-background-color--active, var(--nys-color-theme-stronger, #081b2b));--_nys-button-color--active: var(--nys-button-color--active, var(--nys-color-text-reverse, #ffffff));--_nys-button-background-color--disabled: var(--nys-color-neutral-10, #f6f6f6);--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1)}:host([variant=outline]){--_nys-button-background-color: var(--nys-button-background-color, var(--nys-color-surface, #ffffff));--_nys-button-color: var(--nys-button-color, var(--nys-color-theme, #154973));--_nys-button-border-color: var(--nys-button-border-color, var(--nys-color-theme, #154973));--_nys-button-background-color--hover: var(--nys-button-background-color--hover, var(--nys-color-theme-weaker, #eff6fb));--_nys-button-color--hover: var(--nys-button-color--hover, var(--nys-color-theme, #154973));--_nys-button-border-color--hover: var(--nys-button-border-color--hover, var(--nys-color-theme, #154973));--_nys-button-background-color--active: var(--nys-button-background-color--active, var(--nys-color-theme-weak, #cddde9));--_nys-button-color--active: var(--nys-button-color--active, var(--nys-color-theme, #154973));--_nys-button-border-color--active: var(--nys-button-border-color--active, var(--nys-color-theme, #154973));--_nys-button-background-color--disabled: var(--nys-color-surface, #ffffff);--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-neutral-100, #d0d0ce)}:host([variant=text]){--_nys-button-height: fit-content;--_nys-button-border-radius--start: var(--nys-radius-md, 4px);--_nys-button-border-radius--end: var(--nys-radius-md, 4px);--_nys-button-padding--y: var(--nys-space-2px, 2px);--_nys-button-padding--x: var(--nys-space-50, 4px);--_nys-button-border-width: 0px;--_nys-button-text-decoration: underline;--_nys-button-background-color: var(--nys-button-background-color, var(--nys-color-transparent, #ffffff00));--_nys-button-color: var(--nys-button-color, var(--nys-color-link, #004dd1));--_nys-button-border-color: var(--nys-button-border-color, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--hover: var(--nys-button-background-color--hover, var(--nys-color-transparent, #ffffff00));--_nys-button-color--hover: var(--nys-button-color--hover, var(--nys-color-link-strong, #003ba1));--_nys-button-border-color--hover: var(--nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--active: var(--nys-button-background-color--active, var(--nys-color-transparent, #ffffff00));--_nys-button-color--active: var(--nys-button-color--active, var(--nys-color-link-strongest, #002971));--_nys-button-border-color--active: var(--nys-button-border-color--active, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--disabled: var(--nys-color-transparent, #ffffff00);--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([variant=ghost]){--_nys-button-background-color: var(--nys-button-background-color, var(--nys-color-transparent, #ffffff00));--_nys-button-color: var(--nys-button-color, var(--nys-color-text, #1b1b1b));--_nys-button-border-color: var(--nys-button-border-color, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--hover: var(--nys-button-background-color--hover, var(--nys-color-black-transparent-100, #0000001a));--_nys-button-color--hover: var(--nys-button-color--hover, var(--nys-color-text, #1b1b1b));--_nys-button-border-color--hover: var(--nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--active: var(--nys-button-background-color--active, var(--nys-color-black-transparent-200, #00000033));--_nys-button-color--active: var(--nys-button-color--active, var(--nys-color-text, #1b1b1b));--_nys-button-border-color--active: var(--nys-button-border-color--active, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--disabled: var(--nys-color-transparent, #ffffff00);--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([variant=filled][inverted]){--_nys-button-background-color: var(--nys-button-background-color, var(--nys-color-surface, #ffffff));--_nys-button-color: var(--nys-button-color, var(--nys-color-text, #1b1b1b));--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00);--_nys-button-background-color--hover: var(--nys-button-background-color--hover, var(--nys-color-neutral-100, #d0d0ce));--_nys-button-color--hover: var(--nys-button-color--hover, var(--nys-color-text, #1b1b1b));--_nys-button-background-color--active: var(--nys-button-background-color--active, var(--nys-color-neutral-300, #a7a9ab));--_nys-button-color--active: var(--nys-button-color--active, var(--nys-color-text, #1b1b1b));--_nys-button-background-color--disabled: var(--nys-color-text, #1b1b1b);--_nys-button-color--disabled: var(--nys-color-text-disabled, #62666a)}:host([variant=outline][inverted]){--_nys-button-background-color: var(--nys-button-background-color, var(--nys-color-surface-reverse, #1b1b1b));--_nys-button-color: var(--nys-button-color, var(--nys-color-text-reverse, #ffffff));--_nys-button-border-color: var(--nys-button-border-color, var(--nys-color-ink-reverse, #ffffff));--_nys-button-background-color--hover: var(--nys-button-background-color--hover, var(--nys-color-surface-reverse, #1b1b1b));--_nys-button-color--hover: var(--nys-button-color--hover, var(--nys-color-text-reverse-weak, #d0d0ce));--_nys-button-border-color--hover: var(--nys-button-border-color--hover, var(--nys-color-neutral-100, #d0d0ce));--_nys-button-background-color--active: var(--nys-button-background-color--active, var(--nys-color-surface-reverse, #1b1b1b));--_nys-button-color--active: var(--nys-button-color--active, var(--nys-color-text-reverse-weaker, #bec0c1));--_nys-button-border-color--active: var(--nys-button-border-color--active, var(--nys-color-neutral-300, #a7a9ab));--_nys-button-background-color--disabled: var(--nys-color-surface-reverse, #1b1b1b);--_nys-button-color--disabled: var(--nys-color-text-reverse-disabled, #62666a);--_nys-button-border-color--disabled: var(--nys-color-neutral-600, #62666a)}:host([variant=text][inverted]){--_nys-button-height: fit-content;--_nys-button-border-radius--start: var(--nys-radius-md, 4px);--_nys-button-border-radius--end: var(--nys-radius-md, 4px);--_nys-button-padding--y: var(--nys-space-2px, 2px);--_nys-button-padding--x: var(--nys-space-50, 4px);--_nys-button-border-width: 0px;--_nys-button-text-decoration: underline;--_nys-button-background-color: var(--nys-button-background-color, var(--nys-color-transparent, #ffffff00));--_nys-button-color: var(--nys-button-color, var(--nys-color-link-reverse, #a7a9ab));--_nys-button-border-color: var(--nys-button-border-color, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--hover: var(--nys-button-background-color--hover, var(--nys-color-transparent, #ffffff00));--_nys-button-color--hover: var(--nys-button-color--hover, var(--nys-color-link-reverse-strong, #ededed));--_nys-button-border-color--hover: var(--nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--active: var(--nys-button-background-color--active, var(--nys-color-transparent, #ffffff00));--_nys-button-color--active: var(--nys-button-color--active, var(--nys-color-reverse-strongest, #ffffff));--_nys-button-border-color--active: var(--nys-button-border-color--active, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--disabled: var(--nys-color-transparent, #ffffff00);--_nys-button-color--disabled: var(--nys-color-text-reverse-disabled, #62666a);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([variant=ghost][inverted]){--_nys-button-background-color: var(--nys-button-background-color, var(--nys-color-transparent, #ffffff00));--_nys-button-color: var(--nys-button-color, var(--nys-color-text-reverse, #ffffff));--_nys-button-border-color: var(--nys-button-border-color, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--hover: var(--nys-button-background-color--hover, var(--nys-color-white-transparent-200, #ffffff33));--_nys-button-color--hover: var(--nys-button-color--hover, var(--nys-color-text-reverse, #ffffff));--_nys-button-border-color--hover: var(--nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--active: var(--nys-button-background-color--active, var(--nys-color-white-transparent-300, #ffffff4d));--_nys-button-color--active: var(--nys-button-color--active, var(--nys-color-text-reverse, #ffffff));--_nys-button-border-color--active: var(--nys-button-border-color--active, var(--nys-color-transparent, #ffffff00));--_nys-button-background-color--disabled: var(--nys-color-transparent, #ffffff00);--_nys-button-color--disabled: var(--nys-color-text-disabled, #62666a);--_nys-button-border-color--disabled: var(--nys-color-transparent, #ffffff00)}:host([inverted]){--_nys-button-outline-color: var(--nys-color-focus-reverse, #7aa5e7)}:host([circle]){--_nys-button-width: var(--_nys-button-height);--_nys-button-border-radius--start: var(--nys-radius-round, 1776px);--_nys-button-border-radius--end: var(--nys-radius-round, 1776px);--_nys-button-padding--y: 0;--_nys-button-padding--x: 0}.nys-button{width:var(--_nys-button-width);min-height:var(--_nys-button-height);border-start-start-radius:var(--_nys-button-border-radius--start);border-end-start-radius:var(--_nys-button-border-radius--start);border-start-end-radius:var(--_nys-button-border-radius--end);border-end-end-radius:var(--_nys-button-border-radius--end);padding:var(--_nys-button-padding--y) var(--_nys-button-padding--x);display:flex;align-items:center;justify-content:var(--_nys-button-justify-content);gap:var(--_nys-button-gap);font-family:var(--_nys-button-font-family);font-size:var(--_nys-button-font-size);font-weight:var(--_nys-button-font-weight);line-height:var(--_nys-button-line-height);text-decoration:var(--_nys-button-text-decoration);box-sizing:border-box;background-color:var(--_nys-button-background-color);color:var(--_nys-button-color);border:solid var(--_nys-button-border-width) var(--_nys-button-border-color);cursor:var(--_nys-button-cursor, pointer)}:host([circle]) .nys-button{max-width:var(--_nys-button-height);max-height:var(--_nys-button-height)}.nys-button:hover{background-color:var(--_nys-button-background-color--hover);color:var(--_nys-button-color--hover);border-color:var(--_nys-button-border-color--hover)}.nys-button:active{background-color:var(--_nys-button-background-color--active);color:var(--_nys-button-color--active);border-color:var(--_nys-button-border-color--active)}.nys-button:disabled,a[disabled]{background-color:var(--_nys-button-background-color--disabled);color:var(--_nys-button-color--disabled);border-color:var(--_nys-button-border-color--disabled);cursor:not-allowed}.nys-button__linkwrapper:has([disabled]){cursor:not-allowed;width:fit-content}a[disabled]{pointer-events:none}a[disabled]:hover{background-color:var(--_nys-button-background-color--disabled);color:var(--_nys-button-color--disabled);border-color:var(--_nys-button-border-color--disabled)}.nys-button *{cursor:var(--_nys-button-cursor, pointer)}.nys-button:disabled *{cursor:not-allowed}.nys-button:focus-visible{outline-offset:var(--_nys-button-outline-offset);outline:solid var(--_nys-button-outline-width) var(--_nys-button-outline-color)}.nys-button__text{display:flex;align-items:center;-webkit-user-select:none;user-select:none}';
var f = Object.defineProperty, n = (b, t, a, p) => {
for (var c = void 0, i = b.length - 1, u; i >= 0; i--)
(u = b[i]) && (c = u(t, a, c) || c);
return c && f(t, a, c), c;
};
let h = 0;
const l = class l extends y {
// allows use of elementInternals' API
constructor() {
super(), this.id = "", this.name = "", this.size = "md", this.fullWidth = !1, this.variant = "filled", this.inverted = !1, this.label = "", this.ariaLabel = "", this.ariaControls = "", this.prefixIcon = "", this.suffixIcon = "", this.circle = !1, this.icon = "", this.disabled = !1, this.form = null, this.value = "", this.ariaDescription = "", this.type = "button", this.onClick = null, this.href = "", this.target = "_self", this._internals = this.attachInternals();
}
connectedCallback() {
super.connectedCallback(), this.id || (this.id = this._generateUniqueId());
}
/**
* Functions
* --------------------------------------------------------------------------
*/
_generateUniqueId() {
return `nys-button-${Date.now()}-${h++}`;
}
_manageFormAction() {
typeof this.onClick == "function" && this.onClick !== null && this.onClick(new Event("click"));
const t = this._internals.form;
if (t)
switch (this.type) {
case "submit":
t.requestSubmit();
break;
case "reset":
t.reset();
break;
}
}
/**
* Event Handlers
* --------------------------------------------------------------------------
*/
_handleFocus() {
this.dispatchEvent(
new Event("nys-focus", { bubbles: !0, composed: !0 })
);
}
_handleBlur() {
this.shadowRoot?.querySelector(".nys-button")?.classList.remove("active-focus"), this.dispatchEvent(
new Event("nys-blur", { bubbles: !0, composed: !0 })
);
}
_handleClick(t) {
if (this.disabled) {
t.preventDefault();
return;
}
this._manageFormAction(), this.dispatchEvent(
new Event("nys-click", { bubbles: !0, composed: !0 })
);
}
_handleKeydown(t) {
if (t.code === "Space" || t.code === "Enter" || t.key === " " || t.key === "Enter") {
if (this.disabled) return;
if (t.preventDefault(), this.href) {
const a = this.renderRoot.querySelector(
"a.nys-button"
);
a && a.click();
} else
this._handleAnyAttributeFunction(), this._handleClick(t);
}
}
/**
* A Solution to the Vanilla JS & Native HTML keydown:
*
* Handles inline onClick attributes set as strings in vanilla HTML
* (e.g. <nys-button onClick="doSomething()">).
*
* When onClick is set this way, it is a DOM attribute (not a property)
* so this.onClick remains null. Native clicks execute the attribute
* automatically, but keydown events do not, so we invoke it manually here.
*/
_handleAnyAttributeFunction() {
const t = this.getAttribute("onClick");
t && new Function("return " + t)();
}
// Public Methods
focus(t) {
const a = this.renderRoot.querySelector(
this.href ? "a.nys-button" : "button.nys-button"
);
a ? a.focus(t) : super.focus(t);
}
render() {
return e`
${this.href ? e`
<div class="nys-button__linkwrapper">
<a
class="nys-button"
name=${s(this.name ? this.name : void 0)}
?disabled=${this.disabled}
aria-disabled="${this.disabled ? "true" : "false"}"
value=${s(this.value ? this.value : void 0)}
href=${this.href}
target=${this.target}
=${this._handleClick}
="${this._handleFocus}"
="${this._handleBlur}"
="${this._handleKeydown}"
tabindex="${this.disabled ? -1 : 0}"
aria-label=${s(
this.ariaLabel || this.label || (this.circle ? this.icon : null) || "button"
)}
aria-description=${s(this.ariaDescription || void 0)}
>
${this.prefixIcon && this.variant !== "text" ? e`<slot name="prefix-icon">
<nys-icon size="16" name=${this.prefixIcon}></nys-icon>
</slot>` : ""}
${this.label && !this.circle ? e`<div class="nys-button__text">${this.label}</div>` : ""}
${this.suffixIcon && this.variant !== "text" ? e`<slot name="suffix-icon">
<nys-icon size="16" name=${this.suffixIcon}></nys-icon>
</slot>` : ""}
${this.circle && this.icon ? e`<slot name="circle-icon"
><nys-icon
size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
name=${this.icon}
></nys-icon
></slot>` : ""}
</a>
</div>
` : e`
<button
class="nys-button"
name=${s(this.name ? this.name : void 0)}
?disabled=${this.disabled}
form=${s(this.form || void 0)}
value=${s(this.value ? this.value : void 0)}
type=${this.type}
aria-controls=${s(this.ariaControls || void 0)}
=${this._handleClick}
="${this._handleFocus}"
="${this._handleBlur}"
="${this._handleKeydown}"
tabindex="${this.disabled ? -1 : 0}"
aria-label=${s(
this.ariaLabel || this.label || (this.circle ? this.icon : null) || this.prefixIcon || this.suffixIcon || "button"
)}
aria-description=${s(this.ariaDescription || void 0)}
role="button"
>
${this.prefixIcon && this.variant !== "text" ? e`<slot name="prefix-icon">
<nys-icon size="16" name=${this.prefixIcon}></nys-icon>
</slot>` : ""}
${this.label && !this.circle ? e`<div class="nys-button__text">${this.label}</div>` : ""}
${this.suffixIcon && this.variant !== "text" ? e`<slot name="suffix-icon">
<nys-icon size="16" name=${this.suffixIcon}></nys-icon>
</slot>` : ""}
${this.circle && this.icon ? e`<slot name="circle-icon">
<nys-icon
size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
name=${this.icon}
></nys-icon>
</slot>` : ""}
</button>
`}
`;
}
};
l.styles = d(v), l.shadowRootOptions = {
...y.shadowRootOptions,
delegatesFocus: !0
}, l.formAssociated = !0;
let o = l;
n([
r({ type: String, reflect: !0 })
], o.prototype, "id");
n([
r({ type: String, reflect: !0 })
], o.prototype, "name");
n([
r({ type: String, reflect: !0 })
], o.prototype, "size");
n([
r({ type: Boolean, reflect: !0 })
], o.prototype, "fullWidth");
n([
r({ type: String, reflect: !0 })
], o.prototype, "variant");
n([
r({ type: Boolean, reflect: !0 })
], o.prototype, "inverted");
n([
r({ type: String })
], o.prototype, "label");
n([
r({ type: String })
], o.prototype, "ariaLabel");
n([
r({ type: String })
], o.prototype, "ariaControls");
n([
r({ type: String })
], o.prototype, "prefixIcon");
n([
r({ type: String })
], o.prototype, "suffixIcon");
n([
r({ type: Boolean, reflect: !0 })
], o.prototype, "circle");
n([
r({ type: String })
], o.prototype, "icon");
n([
r({ type: Boolean, reflect: !0 })
], o.prototype, "disabled");
n([
r({ type: String, reflect: !0 })
], o.prototype, "form");
n([
r({ type: String })
], o.prototype, "value");
n([
r({ type: String })
], o.prototype, "ariaDescription");
n([
r({ type: String, reflect: !0 })
], o.prototype, "type");
n([
r({ attribute: !1 })
], o.prototype, "onClick");
n([
r({ type: String })
], o.prototype, "href");
n([
r({ type: String, reflect: !0 })
], o.prototype, "target");
customElements.get("nys-button") || customElements.define("nys-button", o);
export {
o as NysButton
};
//# sourceMappingURL=nys-button.js.map