import {
  __decorateClass,
  __privateAdd,
  __privateGet,
  __privateSet
} from "../../chunks/chunk.QU3DSPNU.js";
var _isIconButton, _Button_instances, isLink_get, defaultRel_get, _mainSlotChange, _handleClick, _handleKeyDown;
import { nothing } from "lit";
import { property, query } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { when } from "lit/directives/when.js";
import { literal, html as staticHtml } from "lit/static-html.js";
import { GdsRipple } from "../../primitives/ripple/ripple.component.js";
import { html as customElementHtml, gdsCustomElement } from "../../scoping.js";
import { tokens } from "../../tokens.style.js";
import { TransitionalStyles } from "../../transitional-styles.js";
import { observeLightDOM } from "../../utils/decorators/index.js";
import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
import { forwardAttributes } from "../../utils/directives/index.js";
import { stripWhitespace } from "../../utils/helpers/strip-white-space.js";
import {
  withLayoutChildProps,
  withMarginProps,
  withSizeXProps
} from "../../utils/mixins/declarative-layout-mixins.js";
import { GdsFormControlElement } from "../form/form-control.js";
import ButtonStyles from "./button.styles.js";
const ariaForwards = ["aria-label", "aria-haspopup", "aria-expanded"];
const html = stripWhitespace(customElementHtml);
class Button extends GdsFormControlElement {
  constructor() {
    super(...arguments);
    __privateAdd(this, _Button_instances);
    this.disabled = false;
    this.rank = "primary";
    this.variant = "neutral";
    this.size = "medium";
    this.label = "";
    this.wrapped = false;
    this.href = "";
    __privateAdd(this, _isIconButton, false);
    // Check if the button is an icon button.
    __privateAdd(this, _mainSlotChange, () => {
      const assignedElements = this._mainSlot?.assignedElements() ?? [];
      __privateSet(this, _isIconButton, assignedElements.length === 1 && (assignedElements[0].tagName.toLowerCase().startsWith("gds-icon") || assignedElements[0].getAttribute("name") === "icon"));
      this.requestUpdate();
    });
    __privateAdd(this, _handleClick, (e) => {
      this.dispatchCustomEvent("gds-click", {
        bubbles: true,
        composed: true,
        detail: e
      });
      if (this.form && !__privateGet(this, _Button_instances, isLink_get)) {
        if (this.type === "submit") {
          this.form.requestSubmit();
        } else if (this.type === "reset") {
          this.form.reset();
        }
      }
    });
    __privateAdd(this, _handleKeyDown, (e) => {
      if (this.disabled) return;
      if ((e.code === "Space" || e.key === "Enter") && !e.repeat) {
        const ripple = this._ripple;
        if (ripple) {
          ripple.triggerRipple();
        }
      }
    });
  }
  focus(options) {
    this._getValidityAnchor()?.focus(options);
  }
  click() {
    this._getValidityAnchor()?.click();
  }
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute("role", "none");
    TransitionalStyles.instance.apply(this, "gds-button");
  }
  render() {
    const buttonClasses = {
      button: true,
      circle: __privateGet(this, _isIconButton),
      icon: __privateGet(this, _isIconButton),
      xs: this.size === "xs",
      small: this.size === "small",
      large: this.size === "large",
      brand: this.variant === "brand",
      positive: this.variant === "positive",
      negative: this.variant === "negative",
      notice: this.variant === "notice",
      warning: this.variant === "warning",
      primary: this.rank === "primary",
      secondary: this.rank === "secondary",
      tertiary: this.rank === "tertiary",
      wrapped: this.wrapped
    };
    const tag = __privateGet(this, _Button_instances, isLink_get) ? literal`a` : literal`button`;
    return staticHtml`
      <${tag}
        class=${classMap(buttonClasses)}
        type="${ifDefined(__privateGet(this, _Button_instances, isLink_get) ? void 0 : this.type)}"
        ?disabled="${this.disabled}"
        aria-label=${this.label || nothing}
        href=${ifDefined(__privateGet(this, _Button_instances, isLink_get) ? this.href : void 0)}
        target=${ifDefined(__privateGet(this, _Button_instances, isLink_get) ? this.target : void 0)}
        rel=${ifDefined(__privateGet(this, _Button_instances, isLink_get) ? this.rel || __privateGet(this, _Button_instances, defaultRel_get) : void 0)}
        download=${ifDefined(__privateGet(this, _Button_instances, isLink_get) ? this.download : void 0)}
        part="_button"
        @click="${__privateGet(this, _handleClick)}"
        @keydown="${__privateGet(this, _handleKeyDown)}"
        ${forwardAttributes(
      (attr) => attr.name.startsWith("gds-aria") || attr.name === "gds-role" || ariaForwards.includes(attr.name)
    )}
      >
        <slot name="lead"></slot>
        <slot @slotchange=${__privateGet(this, _mainSlotChange)}></slot>
        <slot name="trail"></slot>
        ${when(
      !this._isUsingTransitionalStyles,
      () => html`<gds-ripple part="_ripple"></gds-ripple>`
    )}
      </${tag}>
      `;
  }
  _getValidityAnchor() {
    return this._button;
  }
  _attributeChanged() {
    this.requestUpdate();
  }
}
_isIconButton = new WeakMap();
_Button_instances = new WeakSet();
isLink_get = function() {
  return this.href.length > 0;
};
defaultRel_get = function() {
  return this.target === "_blank" ? "noreferrer noopener" : void 0;
};
_mainSlotChange = new WeakMap();
_handleClick = new WeakMap();
_handleKeyDown = new WeakMap();
Button.styles = [tokens, ButtonStyles];
/**
 * @internal
 */
Button.shadowRootOptions = {
  mode: "open",
  delegatesFocus: true
};
__decorateClass([
  property({ type: Boolean, reflect: true })
], Button.prototype, "disabled", 2);
__decorateClass([
  styleExpressionProperty({
    selector: ".button"
  })
], Button.prototype, "justify-content", 2);
__decorateClass([
  property({ reflect: true })
], Button.prototype, "type", 2);
__decorateClass([
  property({ reflect: true })
], Button.prototype, "rank", 2);
__decorateClass([
  property({ reflect: true })
], Button.prototype, "variant", 2);
__decorateClass([
  property({ reflect: true })
], Button.prototype, "size", 2);
__decorateClass([
  property()
], Button.prototype, "label", 2);
__decorateClass([
  property({
    attribute: "wrapped",
    type: Boolean,
    reflect: true
  })
], Button.prototype, "wrapped", 2);
__decorateClass([
  property()
], Button.prototype, "href", 2);
__decorateClass([
  property()
], Button.prototype, "target", 2);
__decorateClass([
  property()
], Button.prototype, "rel", 2);
__decorateClass([
  property()
], Button.prototype, "download", 2);
__decorateClass([
  query("slot:not([name])")
], Button.prototype, "_mainSlot", 2);
__decorateClass([
  query(".button")
], Button.prototype, "_button", 2);
__decorateClass([
  query("gds-ripple")
], Button.prototype, "_ripple", 2);
__decorateClass([
  observeLightDOM({
    attributes: true,
    childList: false,
    subtree: false,
    characterData: false
  })
], Button.prototype, "_attributeChanged", 1);
let GdsButton = class extends withSizeXProps(
  withMarginProps(withLayoutChildProps(Button))
) {
};
GdsButton = __decorateClass([
  gdsCustomElement("gds-button", { dependsOn: [GdsRipple] })
], GdsButton);
export {
  GdsButton
};
