import { s as m, x as l, r as v, i as b, e as R } from "./query-assigned-elements-D930kELM.mjs";
import { _ as o } from "./tslib.es6-pPsSiLLK.mjs";
import { e as f, R as y } from "./ripple-handlers-BzwD98Ty.mjs";
import { a as c } from "./aria-property-6O5bK0tV.mjs";
import { n } from "./property-DJzm_oB9.mjs";
import { t as $ } from "./state-B_tK3mBm.mjs";
import { e as h } from "./event-options-C7DvXRgq.mjs";
import { i as H } from "./query-CDOd1Kwm.mjs";
import { l as w } from "./if-defined-DGrxuPYz.mjs";
import { s as D } from "./mwc-icon-button.css-DosQIdlt.mjs";
/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
class t extends m {
  constructor() {
    super(...arguments), this.disabled = !1, this.icon = "", this.shouldRenderRipple = !1, this.rippleHandlers = new y(() => (this.shouldRenderRipple = !0, this.ripple));
  }
  /** @soyTemplate */
  renderRipple() {
    return this.shouldRenderRipple ? l`
            <mwc-ripple
                .disabled="${this.disabled}"
                unbounded>
            </mwc-ripple>` : "";
  }
  focus() {
    const e = this.buttonElement;
    e && (this.rippleHandlers.startFocus(), e.focus());
  }
  blur() {
    const e = this.buttonElement;
    e && (this.rippleHandlers.endFocus(), e.blur());
  }
  /** @soyTemplate */
  render() {
    return l`<button
        class="mdc-icon-button mdc-icon-button--display-flex"
        aria-label="${this.ariaLabel || this.icon}"
        aria-haspopup="${w(this.ariaHasPopup)}"
        ?disabled="${this.disabled}"
        @focus="${this.handleRippleFocus}"
        @blur="${this.handleRippleBlur}"
        @mousedown="${this.handleRippleMouseDown}"
        @mouseenter="${this.handleRippleMouseEnter}"
        @mouseleave="${this.handleRippleMouseLeave}"
        @touchstart="${this.handleRippleTouchStart}"
        @touchend="${this.handleRippleDeactivate}"
        @touchcancel="${this.handleRippleDeactivate}"
    >${this.renderRipple()}
    ${this.icon ? l`<i class="material-icons">${this.icon}</i>` : ""}
    <span
      ><slot></slot
    ></span>
  </button>`;
  }
  handleRippleMouseDown(e) {
    const s = () => {
      window.removeEventListener("mouseup", s), this.handleRippleDeactivate();
    };
    window.addEventListener("mouseup", s), this.rippleHandlers.startPress(e);
  }
  handleRippleTouchStart(e) {
    this.rippleHandlers.startPress(e);
  }
  handleRippleDeactivate() {
    this.rippleHandlers.endPress();
  }
  handleRippleMouseEnter() {
    this.rippleHandlers.startHover();
  }
  handleRippleMouseLeave() {
    this.rippleHandlers.endHover();
  }
  handleRippleFocus() {
    this.rippleHandlers.startFocus();
  }
  handleRippleBlur() {
    this.rippleHandlers.endFocus();
  }
}
o([
  n({ type: Boolean, reflect: !0 })
], t.prototype, "disabled", void 0);
o([
  n({ type: String })
], t.prototype, "icon", void 0);
o([
  c,
  n({ type: String, attribute: "aria-label" })
], t.prototype, "ariaLabel", void 0);
o([
  c,
  n({ type: String, attribute: "aria-haspopup" })
], t.prototype, "ariaHasPopup", void 0);
o([
  H("button")
], t.prototype, "buttonElement", void 0);
o([
  f("mwc-ripple")
], t.prototype, "ripple", void 0);
o([
  $()
], t.prototype, "shouldRenderRipple", void 0);
o([
  h({ passive: !0 })
], t.prototype, "handleRippleMouseDown", null);
o([
  h({ passive: !0 })
], t.prototype, "handleRippleTouchStart", null);
const E = ':host{--mdc-icon-button-size: calc(48px + var(--cv-density-mode, 0) * var(--cv-density-interval, 4px));color:var(--mdc-theme-text-icon-on-background)}:host .mdc-icon-button{cursor:var(--cv-icon-button-cursor, pointer)}:host .mdc-icon-button:active,:host .mdc-icon-button:focus{font-variation-settings:"FILL" 1}:host .mdc-icon-button:disabled{cursor:default;color:var(--cv-theme-on-surface-38)}';
var g = Object.getOwnPropertyDescriptor, x = (p, e, s, d) => {
  for (var i = d > 1 ? void 0 : d ? g(e, s) : e, a = p.length - 1, u; a >= 0; a--)
    (u = p[a]) && (i = u(i) || i);
  return i;
};
let r = class extends t {
};
r.styles = [D, b`${v(E)}`];
r = x([
  R("cv-icon-button")
], r);
const T = r;
export {
  r as CovalentIconButton,
  T as default
};
