import { s as m, x as a, r as b, i as v, e as R } from "./query-assigned-elements-D930kELM.mjs";
import { b as o } from "./tslib.es6-CJ7TUrOc.mjs";
import { e as f, R as $ } from "./ripple-handlers-_gEIkKpx.mjs";
import { a as h } from "./aria-property-6O5bK0tV.mjs";
import { n as p } from "./property-DJzm_oB9.mjs";
import { t as y } from "./state-B_tK3mBm.mjs";
import { e as c } 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 $(() => (this.shouldRenderRipple = !0, this.ripple));
  }
  /** @soyTemplate */
  renderRipple() {
    return this.shouldRenderRipple ? a`
            <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 a`<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 ? a`<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([
  p({ type: Boolean, reflect: !0 })
], t.prototype, "disabled", void 0);
o([
  p({ type: String })
], t.prototype, "icon", void 0);
o([
  h,
  p({ type: String, attribute: "aria-label" })
], t.prototype, "ariaLabel", void 0);
o([
  h,
  p({ 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([
  y()
], t.prototype, "shouldRenderRipple", void 0);
o([
  c({ passive: !0 })
], t.prototype, "handleRippleMouseDown", null);
o([
  c({ passive: !0 })
], t.prototype, "handleRippleTouchStart", null);
const E = ':host{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}';
var g = Object.getOwnPropertyDescriptor, L = (n, e, s, u) => {
  for (var i = u > 1 ? void 0 : u ? g(e, s) : e, l = n.length - 1, d; l >= 0; l--)
    (d = n[l]) && (i = d(i) || i);
  return i;
};
let r = class extends t {
};
r.styles = [D, v`${b(E)}`];
r = L([
  R("cv-icon-button")
], r);
const T = r;
export {
  r as CovalentIconButton,
  T as default
};
