import {
  HasSlotController
} from "./chunk.IVMQWO2L.js";
import {
  LocalizeController
} from "./chunk.X3FE7OHE.js";
import {
  SolidElement,
  customElement
} from "./chunk.H53WQBDK.js";
import {
  __decorateClass
} from "./chunk.S3NI7NKU.js";

// src/components/video/video.ts
import { css, html } from "lit";
import { property, query } from "lit/decorators.js";
import cx from "classix";
var SdVideo = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.localize = new LocalizeController(this);
    this.playing = false;
    this.isBelowBreakpoint = false;
    this.hasSlotController = new HasSlotController(this, "[default]", "play-icon", "poster");
  }
  /** Getter for optional poster slot. */
  get poster() {
    const slot = this.shadowRoot.querySelector("slot[name=poster]");
    if ((slot == null ? void 0 : slot.assignedElements().length) > 0) {
      return slot.assignedElements()[0];
    }
    return null;
  }
  get video() {
    return this.querySelector("video");
  }
  /** Hide poster after initial play & fadeout. */
  async hidePoster() {
    if (!(this.poster instanceof HTMLImageElement)) return;
    this.poster.style.opacity = "0";
    await new Promise((resolve) => setTimeout(resolve, this.token("--sd-duration-medium", 300)));
    this.poster.style.display = "none";
  }
  setVideoInert(inert) {
    var _a, _b;
    if (inert) {
      (_a = this.video) == null ? void 0 : _a.setAttribute("inert", "");
    } else {
      (_b = this.video) == null ? void 0 : _b.removeAttribute("inert");
    }
  }
  /** Utility function to group play behaviors. */
  play() {
    var _a;
    this.emit("sd-play");
    this.playing = true;
    (_a = this.video) == null ? void 0 : _a.play();
    this.hidePoster();
    this.setVideoInert(false);
  }
  /** Restrict keydown control to enter and space bar to mimic the native video tag behavior. If a KeyboardEvent is used, refocus on the native video element to give the user seamless keyboard control. */
  handleKeydown(e) {
    if (e instanceof KeyboardEvent && (e.key === "Enter" || e.key === " ")) {
      this.play();
      setTimeout(() => {
        var _a;
        (_a = this.video) == null ? void 0 : _a.focus();
      });
    }
  }
  /** Resize the play-button-bg when passing host element width breakpoint 414px. */
  handleButtonResize() {
    if (this.hostEl.clientWidth <= 414 && !this.isBelowBreakpoint) {
      this.isBelowBreakpoint = true;
    }
    if (this.hostEl.clientWidth > 414 && this.isBelowBreakpoint) {
      this.isBelowBreakpoint = false;
    }
  }
  connectedCallback() {
    super.connectedCallback();
    this.setVideoInert(true);
    this.resizeObserver = new ResizeObserver(() => this.handleButtonResize());
    this.updateComplete.then(() => {
      this.resizeObserver.observe(this.hostEl);
    });
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.resizeObserver.unobserve(this.hostEl);
  }
  render() {
    return html`<div part="base" class="cursor-pointer"><button part="play-button" aria-label="${this.localize.term("playVideo")}" tabindex="0" @click="${this.play}" @keydown="${this.handleKeydown}" class="${cx(
      this.playing && "pointer-events-none",
      "group w-full h-full absolute top-0 left-0 z-30 sd-interactive outline-hidden focus-visible:focus-outline"
    )}"><div part="play-button-bg" class="${cx(
      this.playing ? "opacity-0" : "opacity-100",
      this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
      "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white/75 rounded-full play-pause-transition group-focus-visible:outline-2 group-focus-visible:outline-offset-2"
    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-6-22-0-icon id="default-play-icon" library="_internal" name="start"></sd-6-22-0-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<div part="poster-wrapper" class="absolute left-0 top-0 w-full z-10 overflow-hidden"><slot name="poster" role="presentation"></slot></div>` : null}<slot></slot></div>`;
  }
};
SdVideo.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
:host{position:relative;display:inline-block;overflow:hidden}.play-pause-transition,::slotted([slot=poster]){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);transition-property:opacity,scale;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms));--tw-duration:var(--sd-duration-medium, 300ms);transition-duration:var(--sd-duration-medium,300ms);--tw-ease:var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}#default-play-icon,::slotted([slot=play-icon]){position:absolute;top:calc(1 / 2 * 100%);left:calc(1 / 2 * 100%);--tw-translate-x:calc(calc(1 / 2 * 100%) * -1)!important;--tw-translate-y:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important;transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}:has([part=play-button]:hover) ::slotted([slot=poster]){--tw-scale-x:110%!important;--tw-scale-y:110%!important;--tw-scale-z:110%!important;scale:var(--tw-scale-x) var(--tw-scale-y)!important}[part=play-button-bg]{color:rgba(var(--sd-video--play-button-color-icon-fill));background-color:rgba(var(--sd-video--play-button-color-background))}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}`
];
__decorateClass([
  query("[part=base]")
], SdVideo.prototype, "hostEl", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdVideo.prototype, "playing", 2);
__decorateClass([
  property({ type: Boolean })
], SdVideo.prototype, "isBelowBreakpoint", 2);
SdVideo = __decorateClass([
  customElement("sd-6-22-0-video")
], SdVideo);

export {
  SdVideo
};
