@aidenlx/player/dist-prod/ui/toggle-button/ToggleButtonElement.js

Headless web components that make integrating media on the a web a breeze.

import {
  __decorateClass
} from "../../chunks/chunk.LNH2V2XS.js";
import {
  eventListener,
  focusVisiblePolyfill,
  isKeyboardClick,
  isKeyboardEvent,
  setAttribute,
  setAttributeIfEmpty
} from "@vidstack/foundation";
import {
  html,
  LitElement
} from "lit";
import { property } from "lit/decorators.js";
import { toggleButtonElementStyles } from "./styles";
class ToggleButtonElement extends LitElement {
  constructor() {
    super();
    this.pressed = false;
    this.disabled = false;
    this._handleButtonClickCapture = eventListener(this, "click", (event) => {
      if (this.disabled) {
        event.preventDefault();
        event.stopImmediatePropagation();
      }
    }, { capture: true });
    if (false)
      logElementLifecycle(this);
    focusVisiblePolyfill(this);
    ["pointerdown", "keydown"].forEach((eventType) => {
      eventListener(this, eventType, (event) => {
        if (this.disabled || isKeyboardEvent(event) && !isKeyboardClick(event)) {
          return;
        }
        this._handleButtonClick(event);
      });
    });
  }
  static get styles() {
    return [toggleButtonElementStyles];
  }
  static get parts() {
    return [];
  }
  connectedCallback() {
    super.connectedCallback();
    setAttributeIfEmpty(this, "tabindex", "0");
    setAttributeIfEmpty(this, "role", "button");
    this._updateAriaPressedAttr();
  }
  updated(changedProperties) {
    if (changedProperties.has("pressed")) {
      this._updateAriaPressedAttr();
    }
  }
  _updateAriaPressedAttr() {
    setAttribute(this, "aria-pressed", this.pressed ? "true" : "false");
  }
  render() {
    return this._renderDefaultSlot();
  }
  _renderDefaultSlot() {
    return html`<slot></slot>`;
  }
  _handleButtonClick(event) {
    this.pressed = !this.pressed;
  }
}
__decorateClass([
  property({ type: Boolean })
], ToggleButtonElement.prototype, "pressed", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], ToggleButtonElement.prototype, "disabled", 2);
export {
  ToggleButtonElement
};