v4web-components/dist/components/lab-ds-button2.js

Stencil Component Starter

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './lab-ds-icon-not-selectable2.js';

const labDsButtonCss = ":host{display:block}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}button.max-width{width:100%}button{position:relative;background-color:rgba(0, 0, 0, 0);border-style:solid;cursor:pointer;outline:none}button .label{display:flex;justify-content:center;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.icon{font-family:Material Symbols Outlined;animation:spin 1s linear infinite;font-size:var(--lab-ds-semantic-size-icon-s)}.large .icon{font-size:var(--lab-ds-semantic-size-icon-sm)}.icon-loading{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}button .icon{display:none}button.loading .label{opacity:0}button.loading .icon{display:flex;color:var(--lab-ds-semantic-color-bg-default);animation:spin 1s linear infinite}.leading-icon{margin-top:-0.5rem;margin-bottom:-0.5rem}.step-icon{margin-top:-0.5rem;margin-bottom:-0.5rem}.button.small{padding-top:var(--lab-ds-semantic-selectable-space-padding-s);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-s);padding-left:var(--lab-ds-semantic-selectable-space-padding-xl);padding-right:var(--lab-ds-semantic-selectable-space-padding-xl);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);gap:var(--lab-ds-semantic-selectable-space-gap-s);font:var(--lab-ds-component-button-typography-none-decoration-small);font-family:var(--lab-ds-component-button-font-family);font-size:var(--lab-ds-component-button-font-size-small);font-weight:var(--lab-ds-component-button-font-weight);line-height:var(--lab-ds-component-button-font-line-height-small);text-transform:var(--lab-ds-core-font-letter-case-02)}.button.medium{padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-xxxl);padding-right:var(--lab-ds-semantic-selectable-space-padding-xxxl);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);gap:var(--lab-ds-semantic-selectable-space-gap-s);font:var(--lab-ds-component-button-typography-none-decoration-medium);font-family:var(--lab-ds-component-button-font-family);font-size:var(--lab-ds-component-button-font-size-medium);font-weight:var(--lab-ds-component-button-font-weight);line-height:var(--lab-ds-component-button-font-line-height-medium);text-transform:var(--lab-ds-core-font-letter-case-02)}.button.large{padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-xxxl);padding-right:var(--lab-ds-semantic-selectable-space-padding-xxxl);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);gap:var(--lab-ds-semantic-selectable-space-gap-s);font:var(--lab-ds-component-button-typography-none-decoration-large);font-family:var(--lab-ds-component-button-font-family);font-size:var(--lab-ds-component-button-font-size-large);font-weight:var(--lab-ds-component-button-font-weight);line-height:var(--lab-ds-component-button-font-line-height-large);text-transform:var(--lab-ds-core-font-letter-case-02)}.primary{background-color:var(--lab-ds-semantic-selectable-color-primary-default);border-color:var(--lab-ds-semantic-selectable-color-primary-default);color:var(--lab-ds-semantic-color-fg-contrast-primary)}.primary:focus:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-m);outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs)}.primary:hover:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-hover);border-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.primary:active:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-press);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.primary:disabled{background-color:var(--lab-ds-semantic-color-bg-disabled);border-color:var(--lab-ds-semantic-color-bg-disabled);color:var(--lab-ds-semantic-color-fg-disabled);cursor:not-allowed}.primary.loading{background-color:var(--lab-ds-semantic-selectable-color-primary-loading);border-color:var(--lab-ds-semantic-selectable-color-primary-loading)}.outlined{color:var(--lab-ds-semantic-selectable-color-primary-default);border-color:var(--lab-ds-semantic-selectable-color-primary-default);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs)}.outlined:hover:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-hover);color:var(--lab-ds-semantic-color-fg-default);border-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.outlined:focus:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-m);outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);color:var(--lab-ds-semantic-color-fg-default)}.outlined:active:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-color-fg-default)}.outlined:disabled{background-color:none;color:var(--lab-ds-semantic-color-fg-disabled);border-color:var(--lab-ds-semantic-color-fg-disabled);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);cursor:not-allowed}.outlined.loading{background-color:var(--lab-ds-semantic-selectable-color-primary-loading);border:none}.link-button{color:var(--lab-ds-semantic-color-fg-default);border:none}.link-button.small .label-text{font:var(--lab-ds-component-button-typography-underlined-small);text-decoration:underline}.link-button.medium .label-text{font:var(--lab-ds-component-button-typography-underlined-medium);text-decoration:underline}.link-button.large .label-text{font:var(--lab-ds-component-button-typography-underlined-large);text-decoration:underline}.link-button:hover:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-bg-hover);color:var(--lab-ds-semantic-color-fg-default);border:none}.link-button:focus:not([disabled]){border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-m);outline-style:solid;outline-color:var(--lab-ds-semantic-color-fg-default);outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);color:var(--lab-ds-semantic-color-fg-default)}.link-button:active:not([disabled]){background-color:var(--lab-ds-semantic-color-bg-cloudy);color:var(--lab-ds-semantic-color-fg-default);border:none;outline:none}.link-button:disabled{color:var(--lab-ds-semantic-color-fg-disabled);border-color:var(--lab-ds-semantic-color-fg-disabled);cursor:not-allowed}.link-button.loading{background-color:var(--lab-ds-semantic-color-bg-cloudy)}.link-button && .small{font:var(--lab-ds-component-button-typography-underlined-small)}.link-button && .medium{font:var(--lab-ds-component-button-typography-underlined-medium)}.link-button && .large{font:var(--lab-ds-component-button-typography-underlined-large)}.cta{background-color:var(--lab-ds-semantic-selectable-color-primary-default);color:var(--lab-ds-semantic-color-fg-default);border:none;animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.cta:hover:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-hover);color:var(--lab-ds-semantic-color-fg-default);box-shadow:var(--lab-ds-semantic-selectable-shadow-s);animation:none}.cta:focus:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-m);outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);color:var(--lab-ds-semantic-color-fg-default)}.cta:active:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-color-fg-default)}.cta:disabled{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);color:var(--lab-ds-semantic-color-fg-disabled);animation:none;cursor:not-allowed}.cta.loading{background-color:var(--lab-ds-semantic-selectable-color-primary-loading);animation:none}.danger-primary{background-color:var(--lab-ds-semantic-selectable-color-bg-dark-error);border-color:var(--lab-ds-semantic-selectable-color-bg-dark-error);color:var(--lab-ds-semantic-selectable-color-bg-pure)}.danger-primary:hover:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-error-hover);border-color:var(--lab-ds-semantic-selectable-color-error-hover);color:var(--lab-ds-semantic-color-bg-default)}.danger-primary:focus:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-bg-dark-error);border-color:var(--lab-ds-semantic-selectable-color-bg-dark-error);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-m);outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-error-focus);outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);color:var(--lab-ds-semantic-color-bg-default)}.danger-primary:active:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-error-press);border-color:var(--lab-ds-semantic-selectable-color-error-press);color:var(--lab-ds-semantic-color-bg-default)}.danger-primary:disabled{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);border-color:var(--lab-ds-semantic-selectable-color-bg-disabled);color:var(--lab-ds-semantic-color-fg-disabled);cursor:not-allowed}.danger-primary.loading{background-color:var(--lab-ds-semantic-selectable-color-error-loading);border-color:var(--lab-ds-semantic-selectable-color-error-loading)}.danger-outlined{color:var(--lab-ds-semantic-selectable-color-bg-dark-error);border-color:var(--lab-ds-semantic-selectable-color-border-dark-error);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs)}.danger-outlined:hover:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-error-hover);color:var(--lab-ds-semantic-selectable-color-bg-pure);border-color:rgba(0, 0, 0, 0)}.danger-outlined:focus:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-bg-dark-error);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-m);outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-error-focus);outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);color:var(--lab-ds-semantic-color-bg-default)}.danger-outlined:active:not([disabled]){background-color:var(--lab-ds-semantic-selectable-color-error-press);color:var(--lab-ds-semantic-color-bg-default)}.danger-outlined:disabled{color:var(--lab-ds-semantic-color-fg-disabled);border-color:var(--lab-ds-semantic-color-bg-disabled);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);cursor:not-allowed}.danger-outlined.loading{background-color:var(--lab-ds-semantic-selectable-color-error-loading);color:var(--lab-ds-semantic-color-bg-default);border-color:var(--lab-ds-semantic-selectable-color-error-loading)}";

const LabDsButton = /*@__PURE__*/ proxyCustomElement(class LabDsButton extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.handleButton = createEvent(this, "handleButton", 7);
    this.size = 'medium';
    this.type = 'button';
    this.variant = 'primary';
    this.disabled = undefined;
    this.loading = undefined;
    this.leadingIcon = undefined;
    this.stepIcon = undefined;
    this.label = undefined;
    this.maxWidth = false;
  }
  handleClick() {
    this.handleButton.emit();
  }
  render() {
    return (h("button", { disabled: this.disabled || this.loading, onClick: () => this.handleClick(), type: this.type, class: `button ${this.maxWidth ? 'max-width' : ''} ${this.variant} ${this.size} ${this.loading && 'loading'}` }, h("span", { class: "label" }, this.leadingIcon && h("lab-ds-icon-not-selectable", { class: "leading-icon", size: this.size === 'large' ? 's-medium' : 'small', icon: this.leadingIcon }), this.label && h("span", { class: "label-text" }, this.label), this.stepIcon && h("lab-ds-icon-not-selectable", { class: "step-icon", size: this.size === 'large' ? 's-medium' : 'small', icon: this.stepIcon })), h("div", { class: "icon-loading" }, h("span", { class: "material-symbols-outlined icon" }, "progress_activity"))));
  }
  static get style() { return labDsButtonCss; }
}, [1, "lab-ds-button", {
    "size": [1],
    "type": [1],
    "variant": [1],
    "disabled": [4],
    "loading": [4],
    "leadingIcon": [1, "leading-icon"],
    "stepIcon": [1, "step-icon"],
    "label": [1],
    "maxWidth": [4, "max-width"]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-button", "lab-ds-icon-not-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-button":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsButton);
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { LabDsButton as L, defineCustomElement as d };

//# sourceMappingURL=lab-ds-button2.js.map