@wolf-scope/wolf-ui/dist/components/button/button.mjs

UI library for web applications using Lit

import { property as l } from "lit/decorators.js";
import { unsafeCSS as i, LitElement as w, html as u } from "lit";
import "../typography/register.mjs";
import "../typography/typography.mjs";
const b = `:host{display:block}:host .wolf-button{display:inline-flex;align-items:center;justify-content:center;padding:var(--wolf-spacing-md) calc(var(--wolf-spacing-md) * 2);border-radius:var(--wolf-border-radius);font-size:var(--wolf-font-size-md);user-select:none;font-weight:500;cursor:pointer;transition:background-color .3s ease,border-color .3s ease;--wolf-button-color: var(--wolf-color-primary);--wolf-button-hover-color: var(--wolf-color-primary-hover);--wolf-button-active-color: var(--wolf-color-primary-active);--wolf-color-button-text: #ffffff}:host .wolf-button .text{margin:0 auto}:host .wolf-button:focus{outline:none;box-shadow:0 0 0 3px #2196f380}:host .wolf-button.wolf-button-primary{--wolf-button-color: var(--wolf-color-primary);--wolf-button-hover-color: var(--wolf-color-primary-hover);--wolf-button-active-color: var(--wolf-color-primary-active)}:host .wolf-button.wolf-button-danger{--wolf-button-color: var(--wolf-color-danger);--wolf-button-hover-color: var(--wolf-color-danger-hover);--wolf-button-active-color: var(--wolf-color-danger-active)}:host .wolf-button.wolf-button-success{--wolf-button-color: var(--wolf-color-success);--wolf-button-hover-color: var(--wolf-color-success-hover);--wolf-button-active-color: var(--wolf-color-success-active)}:host .wolf-button.wolf-button-warning{--wolf-button-color: var(--wolf-color-warning);--wolf-button-hover-color: var(--wolf-color-warning-hover);--wolf-button-active-color: var(--wolf-color-warning-active)}:host .wolf-button.wolf-button-info{--wolf-button-color: var(--wolf-color-info);--wolf-button-hover-color: var(--wolf-color-info-hover);--wolf-button-active-color: var(--wolf-color-info-active)}:host .wolf-button.wolf-button-text{--wolf-color-button-text: var(--wolf-color-text);--wolf-button-color: transparent;--wolf-button-hover-color: transparent;--wolf-button-active-color: transparent}:host .wolf-button.wolf-button-link{--wolf-color-button-text: var(--wolf-color-primary);--wolf-button-color: transparent;--wolf-button-hover-color: transparent;--wolf-button-active-color: transparent}:host .wolf-button.wolf-button-link a{text-decoration:none;width:100%;display:block}:host .wolf-button slot:not([name]){margin-left:8px;margin-right:8px}:host .wolf-button slot[name=icon-start],:host .wolf-button slot[name=icon-end]{display:inline-flex;margin-left:4px;margin-right:4px}:host([size=small]) .wolf-button{padding:var(--wolf-spacing-sm) var(--wolf-spacing-md)}:host([size=small]) .wolf-button .text{font-size:var(--wolf-font-size-sm)}:host([size=medium]) .wolf-button{padding:var(--wolf-spacing-md) calc(var(--wolf-spacing-md) * 2)}:host([size=medium]) .wolf-button .text{font-size:var(--wolf-font-size-md)}:host([size=large]) .wolf-button{padding:var(--wolf-spacing-lg) calc(var(--wolf-spacing-md) * 4)}:host([size=large]) .wolf-button .text{font-size:var(--wolf-font-size-lg)}:host wolf-typography{--wolf-color-text: var(--wolf-color-button-text);width:max-content}:host([outlined]) .wolf-button{background-color:transparent;border:2px solid var(--wolf-button-color, #ffffff);--wolf-color-button-text: var(--wolf-button-color, #ffffff)}:host([outlined]) .wolf-button:hover{--wolf-color-button-text: #ffffff}:host .wolf-button{background-color:var(--wolf-button-color);color:var(--wolf-color-button-text);border:2px solid var(--wolf-button-color)}:host .wolf-button:hover{background-color:var(--wolf-button-hover-color);border-color:var(--wolf-button-hover-color)}:host .wolf-button:active{background-color:var(--wolf-button-active-color);border-color:var(--wolf-button-hover-color)}:host([stretch]){width:100%}:host([stretch]) .wolf-button{display:flex}:host([stretch]) .wolf-button wolf-typography{vertical-align:top}:host([disabled]){pointer-events:none;opacity:.5}
`;
var v = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (a, o, f, e) => {
  for (var t = e > 1 ? void 0 : e ? h(o, f) : o, c = a.length - 1, s; c >= 0; c--)
    (s = a[c]) && (t = (e ? s(o, f, t) : s(t)) || t);
  return e && t && v(o, f, t), t;
};
const y = "wolf-button";
class r extends w {
  constructor() {
    super(...arguments), this.variant = "primary", this.size = "medium", this.stretch = !1, this.outlined = !1, this.href = "", this.external = !1;
  }
  connectedCallback() {
    super.connectedCallback(), this.onclick = this.handleClick;
  }
  handleClick() {
    if (this.href)
      if (this.external)
        window.open(this.href);
      else {
        const o = document.createElement("a");
        o.href = this.href, document.body.appendChild(o), o.click(), document.body.removeChild(o);
      }
  }
  render() {
    return u`<div class="wolf-button wolf-button-${this.variant}">
      <slot name="icon-start"></slot>
      <wolf-typography class="text" variant="body-default"><slot></slot></wolf-typography>
      <slot name="icon-end"></slot>
    </div>`;
  }
}
r.styles = i(b);
n([
  l()
], r.prototype, "variant", 2);
n([
  l()
], r.prototype, "size", 2);
n([
  l({ type: Boolean })
], r.prototype, "stretch", 2);
n([
  l({ type: Boolean })
], r.prototype, "outlined", 2);
n([
  l()
], r.prototype, "href", 2);
n([
  l({ type: Boolean })
], r.prototype, "external", 2);
export {
  r as WolfButton,
  y as tagName
};