import { n as r, C as g } from "./lib-cortex-element.CVMmyPMC.js";
import { c as p } from "./component.styles.CRO4Odto.js";
import { c as h } from "./custom-element.L4WJXn1j.js";
import { L as m } from "./i18n.BABe9hN4.js";
import { r as f } from "./state.CSDxrqLd.js";
import { e as v } from "./query.BBf1UFkC.js";
import { e as y } from "./class-map.BiVq-cVR.js";
import { o as c } from "./if-defined.BRoBj_Rp.js";
import { n as k } from "./when.Dr1es41R.js";
import { i as d, u as s } from "./static.UA3G1Deq.js";
import _ from "../components/icon.js";
import w from "../components/spinner.js";
import { i as z } from "./lit-element.jLBm65_O.js";
var x = /* @__PURE__ */ ((o) => (o.Large = "large", o.Medium = "medium", o.Small = "small", o.XLarge = "x-large", o))(x || {});
const $ = z`:host{color:var(--cx-color-neutral-600);--group-divider-color:#80808054;display:inline-block}.icon-button{border-radius:var(--cx-border-radius-medium);font-size:inherit;color:inherit;padding:var(--cx-spacing-x-small);cursor:pointer;transition:var(--cx-transition-x-fast) color;background:0 0;border:none;flex:none;align-items:center;display:flex;position:relative}.icon-button:focus{outline:none}.icon-button--disabled{opacity:.5;cursor:default}.icon-button:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.icon-button__icon{pointer-events:none;margin:auto}.icon-button--small{font-size:var(--cx-font-size-x-small);padding:var(--cx-spacing-2x-small);min-height:var(--cx-input-height-small);min-width:var(--cx-input-height-small)}.icon-button--medium{font-size:var(--cx-font-size-large);padding:var(--cx-spacing-2x-small);min-height:var(--cx-input-height-medium);min-width:var(--cx-input-height-medium)}.icon-button--large{font-size:var(--cx-font-size-large);padding:var(--cx-spacing-x-small);min-height:var(--cx-input-height-large);min-width:var(--cx-input-width-large)}.icon-button--x-large{font-size:var(--cx-font-size-large);padding:var(--cx-spacing-small);min-height:var(--cx-input-height-x-large);min-width:var(--cx-input-height-x-large)}.icon-button.icon-button--default{background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.icon-button.icon-button--default:hover:not(.icon-button--disabled),.icon-button.icon-button--default.icon-button--focused:not(.icon-button--disabled){background-color:var(--cx-color-neutral-200);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral)}.icon-button.icon-button--default:active:not(.icon-button--disabled){background-color:var(--cx-color-neutral-300);border-color:var(--cx-color-neutral-300);color:var(--cx-color-neutral)}.icon-button.icon-button--text:hover:not(.icon-button--disabled),.icon-button.icon-button--text.icon-button--focused:not(.icon-button--disabled){background-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.icon-button.icon-button--text:active:not(.icon-button--disabled){background-color:var(--cx-color-neutral-300);border-color:var(--cx-color-neutral-300);color:var(--cx-color-neutral)}.icon-button.icon-button--primary{background-color:var(--cx-color-primary);border-color:var(--cx-color-primary);color:var(--cx-color-neutral-0)}.icon-button.icon-button--primary:hover:not(.icon-button--disabled),.icon-button.icon-button--primary.icon-button--focused:not(.icon-button--disabled){background-color:var(--cx-color-primary-500);border-color:var(--cx-color-primary-500);color:var(--cx-color-neutral-0)}.icon-button.icon-button--primary:active:not(.icon-button--disabled){background-color:var(--cx-color-primary-700);border-color:var(--cx-color-primary-700);color:var(--cx-color-neutral-0)}.icon-button.icon-button--success{background-color:var(--cx-color-success);border-color:var(--cx-color-success);color:var(--cx-color-neutral-0)}.icon-button.icon-button--success:hover:not(.icon-button--disabled),.icon-button.icon-button--success.icon-button--focused:not(.icon-button--disabled){background-color:var(--cx-color-success-500);border-color:var(--cx-color-success-500);color:var(--cx-color-neutral-0)}.icon-button.icon-button--success:active:not(.icon-button--disabled){background-color:var(--cx-color-success-700);border-color:var(--cx-color-success-700);color:var(--cx-color-neutral-0)}.icon-button.icon-button--warning{background-color:var(--cx-color-warning);border-color:var(--cx-color-warning);color:var(--cx-color-neutral-0)}.icon-button.icon-button--warning:hover:not(.icon-button--disabled),.icon-button.icon-button--warning.icon-button--focused:not(.icon-button--disabled){background-color:var(--cx-color-warning-500);border-color:var(--cx-color-warning-500);color:var(--cx-color-neutral-0)}.icon-button.icon-button--warning:active:not(.icon-button--disabled){background-color:var(--cx-color-warning-700);border-color:var(--cx-color-warning-700);color:var(--cx-color-neutral-0)}.icon-button.icon-button--danger{background-color:var(--cx-color-danger);border-color:var(--cx-color-danger);color:var(--cx-color-neutral-0)}.icon-button.icon-button--danger:hover:not(.icon-button--disabled),.icon-button.icon-button--danger.icon-button--focused:not(.icon-button--disabled){background-color:var(--cx-color-danger-500);border-color:var(--cx-color-danger-500);color:var(--cx-color-neutral-0)}.icon-button.icon-button--danger:active:not(.icon-button--disabled){background-color:var(--cx-color-danger-700);border-color:var(--cx-color-danger-700);color:var(--cx-color-neutral-0)}.icon-button.icon-button--custom,.icon-button.icon-button--custom:hover:not(.icon-button--disabled),.icon-button.icon-button--custom.icon-button--focused:not(.icon-button--disabled),.icon-button.icon-button--custom:active:not(.icon-button--disabled){background-color:var(--background-color);border-color:var(--background-color);color:var(--color)}.icon-button--outline{border:solid var(--cx-input-border-width);border-color:var(--cx-input-border-color);background:0 0}.icon-button--outline.icon-button--default{border-color:var(--cx-input-border-color);color:var(--cx-color-neutral)}.icon-button--outline.icon-button--default:hover:not(.icon-button--disabled),.icon-button--outline.icon-button--default.icon-button--focused:not(.icon-button--disabled),.icon-button--outline.icon-button--default.icon-button--checked:not(.icon-button--disabled){border-color:var(--cx-color-neutral-300);background-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.icon-button--outline.icon-button--default:active:not(.icon-button--disabled){border-color:var(--cx-color-neutral-300);background-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral)}.icon-button--outline.icon-button--primary{border-color:var(--cx-color-primary);color:var(--cx-color-primary)}.icon-button--outline.icon-button--primary:hover:not(.icon-button--disabled),.icon-button--outline.icon-button--primary.icon-button--focused:not(.icon-button--disabled),.icon-button--outline.icon-button--primary.icon-button--checked:not(.icon-button--disabled){background-color:var(--cx-color-primary-500);color:var(--cx-color-neutral-0)}.icon-button--outline.icon-button--primary:active:not(.icon-button--disabled){border-color:var(--cx-color-primary-700);background-color:var(--cx-color-primary-700);color:var(--cx-color-neutral-0)}.icon-button--outline.icon-button--success{border-color:var(--cx-color-success);color:var(--cx-color-success)}.icon-button--outline.icon-button--success:hover:not(.icon-button--disabled),.icon-button--outline.icon-button--success.icon-button--focused:not(.icon-button--disabled),.icon-button--outline.icon-button--success.icon-button--checked:not(.icon-button--disabled){background-color:var(--cx-color-success-500);color:var(--cx-color-neutral-0)}.icon-button--outline.icon-button--success:active:not(.icon-button--disabled){border-color:var(--cx-color-success);background-color:var(--cx-color-success);color:var(--cx-color-neutral-0)}.icon-button--outline.icon-button--warning{border-color:var(--cx-color-warning);color:var(--cx-color-warning)}.icon-button--outline.icon-button--warning:hover:not(.icon-button--disabled),.icon-button--outline.icon-button--warning.icon-button--focused:not(.icon-button--disabled),.icon-button--outline.icon-button--warning.icon-button--checked:not(.icon-button--disabled){background-color:var(--cx-color-warning-500);color:var(--cx-color-neutral-0)}.icon-button--outline.icon-button--warning:active:not(.icon-button--disabled){border-color:var(--cx-color-warning-700);background-color:var(--cx-color-warning-700);color:var(--cx-color-neutral-0)}.icon-button--outline.icon-button--danger{border-color:var(--cx-color-danger);color:var(--cx-color-danger)}.icon-button--outline.icon-button--danger:hover:not(.icon-button--disabled),.icon-button--outline.icon-button--danger.icon-button--focused:not(.icon-button--disabled),.icon-button--outline.icon-button--danger.icon-button--checked:not(.icon-button--disabled){background-color:var(--cx-color-danger-500);color:var(--cx-color-neutral-0)}.icon-button--outline.icon-button--danger:active:not(.icon-button--disabled){border-color:var(--cx-color-danger-700);background-color:var(--cx-color-danger-700);color:var(--cx-color-neutral-0)}.icon-button--tertiary{color:var(--cx-color-neutral);background-color:#0000;border-color:#0000}.icon-button--tertiary:hover:not(.icon-button--disabled),.icon-button--tertiary.icon-button--focused:not(.icon-button--disabled){background-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral);border-color:#0000}.icon-button--tertiary:focus-visible:not(.icon-button--disabled){background-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral);border-color:#0000}.icon-button--tertiary:active:not(.icon-button--disabled){background-color:var(--cx-color-neutral-300);color:var(--cx-color-neutral);border-color:#0000}.icon-button--circle{border-radius:var(--cx-border-radius-circle)}:host([data-cx-button-group__button--first]:not([data-cx-button-group__button--last])) .icon-button{border-start-end-radius:0;border-end-end-radius:0}:host([data-cx-button-group__button--inner]) .icon-button{border-radius:0}:host([data-cx-button-group__button--last]:not([data-cx-button-group__button--first])) .icon-button{border-start-start-radius:0;border-end-start-radius:0}:host([data-cx-button-group__button]:not([data-cx-button-group__button--first])){margin-inline-start:calc(-1 * var(--cx-input-border-width))}:host([data-cx-button-group__button]:not([data-cx-button-group__button--first],[data-cx-button-group__button--radio],[variant=default]):not(:hover)) .icon-button:after{content:"";top:0;inset-inline-start:0;border-left:solid 1px var(--group-divider-color);mix-blend-mode:multiply;position:absolute;bottom:0}:host([data-cx-button-group__button--hover]){z-index:1}:host([data-cx-button-group__button--focus]),:host([data-cx-button-group__button][checked]){z-index:2}.icon-button ::slotted(cx-badge){pointer-events:none;translate:50% -50%;top:0!important;left:unset!important;position:absolute!important;right:0!important}.icon-button--rtl ::slotted(cx-badge){left:0;right:auto;translate:-50% -50%}.icon-button--small ::slotted(cx-badge){--padding:.1em .32em;--font-size:var(--cx-font-size-x-small)}.icon-button--medium ::slotted(cx-badge){--font-size:var(--cx-font-size-small)}.icon-button--large ::slotted(cx-badge),.icon-button--x-large ::slotted(cx-badge){--font-size:var(--cx-font-size-medium)}.icon-button__icon-container{justify-content:center;align-items:center;width:100%;height:100%;line-height:1;display:flex;position:relative}.icon-button--loading{cursor:wait;position:relative}.icon-button--loading cx-spinner{--indicator-color:currentColor;width:1em;height:1em;font-size:1em;position:absolute;top:calc(50% - .5em);left:calc(50% - .5em)}`;
var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (o, i, l, a) => {
  for (var e = a > 1 ? void 0 : a ? S(i, l) : i, u = o.length - 1, b; u >= 0; u--)
    (b = o[u]) && (e = (a ? b(i, l, e) : b(e)) || e);
  return a && e && C(i, l, e), e;
};
let t = class extends g {
  constructor() {
    super(...arguments), this.localize = new m(this), this.hasFocus = !1, this.variant = "outlined", this.buttonVariant = "text", this.label = "", this.disabled = !1, this.loading = !1, this.iconClass = "", this.size = x.Medium, this.outline = !1, this.circle = !1;
  }
  connectedUpdatedCallback() {
    this.syncStyles(), this.styleObserver = new MutationObserver(() => this.syncStyles()), this.styleObserver.observe(this, {
      attributeFilter: ["style"],
      attributes: !0
    });
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.styleObserver?.disconnect();
  }
  syncStyles() {
    const o = this.style.fontSize;
    o && this.button && (this.icon.style.setProperty("--font-size", o), this.button.style.fontSize = "inherit", this.style.fontSize = "");
  }
  handleBlur() {
    this.hasFocus = !1, this.emit("cx-blur");
  }
  handleFocus() {
    this.hasFocus = !0, this.emit("cx-focus");
  }
  handleClick(o) {
    this.disabled && (o.preventDefault(), o.stopPropagation());
  }
  /** Simulates a click on the icon button. */
  click() {
    this.button.click();
  }
  /** Sets focus on the icon button. */
  focus(o) {
    this.button.focus(o);
  }
  /** Removes focus from the icon button. */
  blur() {
    this.button.blur();
  }
  render() {
    const o = !!this.href, i = o ? d`a` : d`button`;
    return s`<${i} part="base" class=${y({
      "icon-button": !0,
      "icon-button--circle": this.circle,
      "icon-button--custom": !!this.src,
      "icon-button--danger": this.buttonVariant === "danger",
      "icon-button--default": this.buttonVariant === "default" || this.buttonVariant === "neutral",
      "icon-button--disabled": !o && this.disabled,
      "icon-button--focused": this.hasFocus,
      "icon-button--large": this.size === "large",
      "icon-button--loading": this.loading,
      "icon-button--medium": this.size === "medium",
      "icon-button--outline": this.outline,
      "icon-button--primary": this.buttonVariant === "primary",
      "icon-button--rtl": this.localize.dir() === "rtl",
      "icon-button--small": this.size === "small",
      "icon-button--success": this.buttonVariant === "success",
      "icon-button--tertiary": this.buttonVariant === "tertiary",
      "icon-button--text": this.buttonVariant === "text",
      "icon-button--warning": this.buttonVariant === "warning",
      "icon-button--x-large": this.size === "x-large"
    })} ?disabled=${c(o ? void 0 : this.disabled)} type=${c(o ? void 0 : "button")} href=${c(o ? this.href : void 0)} target=${c(o ? this.target : void 0)} download=${c(o ? this.download : void 0)} rel=${c(
      o && this.target ? "noreferrer noopener" : void 0
    )} role=${c(o ? void 0 : "button")} aria-disabled=${this.disabled || this.loading ? "true" : "false"} aria-label=${this.label} tabindex=${this.disabled || this.loading ? "-1" : "0"} aria-busy=${this.loading ? "true" : "false"} @blur=${this.handleBlur} @focus=${this.handleFocus} @click=${this.handleClick}><div class="icon-button__icon-container">${k(
      this.loading,
      () => s`<cx-spinner part="spinner" role="status" aria-live="polite"></cx-spinner>`,
      () => s`<cx-icon class="icon-button__icon" icon-class=${c(this.iconClass)} name=${c(this.name)} variant=${this.variant} src=${c(this.src)} aria-hidden="true" part="icon"></cx-icon>`
    )}<slot name="badge"></slot></div></${i}>`;
  }
};
t.styles = [p, $];
t.dependencies = { "cx-icon": _, "cx-spinner": w };
n([
  v(".icon-button")
], t.prototype, "button", 2);
n([
  v(".icon-button__icon")
], t.prototype, "icon", 2);
n([
  f()
], t.prototype, "hasFocus", 2);
n([
  r()
], t.prototype, "name", 2);
n([
  r({ type: String })
], t.prototype, "variant", 2);
n([
  r({ attribute: "button-variant", reflect: !0, type: String })
], t.prototype, "buttonVariant", 2);
n([
  r()
], t.prototype, "src", 2);
n([
  r()
], t.prototype, "href", 2);
n([
  r()
], t.prototype, "target", 2);
n([
  r()
], t.prototype, "download", 2);
n([
  r()
], t.prototype, "label", 2);
n([
  r({ reflect: !0, type: Boolean })
], t.prototype, "disabled", 2);
n([
  r({ reflect: !0, type: Boolean })
], t.prototype, "loading", 2);
n([
  r({ attribute: "icon-class", type: String })
], t.prototype, "iconClass", 2);
n([
  r({ reflect: !0 })
], t.prototype, "size", 2);
n([
  r({ reflect: !0, type: Boolean })
], t.prototype, "outline", 2);
n([
  r({ reflect: !0, type: Boolean })
], t.prototype, "circle", 2);
t = n([
  h("cx-icon-button")
], t);
export {
  t as C,
  x as I
};
