@videojs/html 10.0.0-beta.9 → 10.0.0-rc.1

package/dist/dev/ui/tooltip/tooltip-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-element.js","names":["#core","#groupConsumer","#disconnect","#tooltip","#snapshot","#cleanupPositioning","#cleanupTrigger","#findTrigger","#syncTrigger","#currentTrigger","#syncPositioning","#triggerAbort","#positionAbort","#positionTrigger","#positionFrame","#resizeObserver"],"sources":["../../../../src/ui/tooltip/tooltip-element.ts"],"sourcesContent":["import { TooltipCore, TooltipCSSVars, TooltipDataAttrs, type TooltipInput } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createTooltip,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  getPopupPositionRect,\n  resolveOffsets,\n  type TooltipApi,\n  type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { tooltipGroupContext } from './context';\n\nexport class TooltipElement extends MediaElement {\n  static readonly tagName = 'media-tooltip';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    disableHoverablePopup: { type: Boolean, attribute: 'disable-hoverable-popup' },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof TooltipCore.Props>;\n\n  open = TooltipCore.defaultProps.open;\n  defaultOpen = TooltipCore.defaultProps.defaultOpen;\n  side = TooltipCore.defaultProps.side;\n  align = TooltipCore.defaultProps.align;\n  delay = TooltipCore.defaultProps.delay;\n  closeDelay = TooltipCore.defaultProps.closeDelay;\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup;\n  disabled = TooltipCore.defaultProps.disabled;\n\n  readonly #core = new TooltipCore();\n  readonly #groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });\n  #tooltip: TooltipApi | null = null;\n  #snapshot: SnapshotController<TooltipInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n  #positionAbort: AbortController | null = null;\n  #positionFrame = 0;\n  #resizeObserver: ResizeObserver | null = null;\n  #positionTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#disconnect = new AbortController();\n\n    this.#tooltip = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n      disableHoverablePopup: () => this.disableHoverablePopup,\n      disabled: () => this.disabled,\n      // Lazy getter — group may arrive after connect via context.\n      group: () => this.#groupConsumer.value,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#tooltip.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#tooltip.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#tooltip.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#tooltip.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#tooltip?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupPositioning();\n    this.#cleanupTrigger();\n    this.#tooltip?.destroy();\n    this.#tooltip = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#tooltip && changed.has('open')) {\n      const { active: interactionOpen } = this.#tooltip.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#tooltip.open();\n        } else {\n          this.#tooltip.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#tooltip) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#findTrigger();\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#tooltip.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, TooltipDataAttrs);\n\n    // Show/hide via Popover API AFTER data attributes are applied so\n    // `data-starting-style` is present before the first visible frame.\n    if (state.open) {\n      tryShowPopover(this);\n    } else {\n      tryHidePopover(this);\n    }\n\n    // Apply trigger ARIA and anchor-name to the discovered trigger.\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n      applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#cleanupPositioning();\n      return;\n    }\n\n    // Apply positioning styles to self.\n    const posOpts = { side: state.side, align: state.align };\n\n    if (supportsAnchorPositioning()) {\n      // Native CSS Anchor Positioning — no JS rect measurements needed.\n      applyStyles(\n        this,\n        getAnchorPositionStyle(this.id, posOpts, undefined, undefined, undefined, undefined, TooltipCSSVars)\n      );\n    } else {\n      // JS fallback: measure rects and resolve CSS var offsets.\n      const triggerRect = this.#currentTrigger?.getBoundingClientRect();\n      const selfRect = getPopupPositionRect(this);\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(this, TooltipCSSVars);\n      applyStyles(\n        this,\n        getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets, TooltipCSSVars)\n      );\n    }\n\n    this.#syncPositioning();\n  }\n\n  // --- Trigger discovery ---\n\n  #findTrigger(): HTMLElement | null {\n    if (!this.id) return null;\n    const root = this.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.id}\"]`);\n  }\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#cleanupPositioning();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#tooltip?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#tooltip) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\n      // Remove ARIA attributes and anchor-name style from the old trigger.\n      applyElementProps(this.#currentTrigger, {\n        'aria-describedby': undefined,\n      });\n      this.#currentTrigger.style.removeProperty('anchor-name');\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n\n  #syncPositioning(): void {\n    if (supportsAnchorPositioning()) return;\n\n    const triggerEl = this.#currentTrigger;\n\n    if (!triggerEl) return;\n    if (this.#positionAbort && this.#positionTrigger === triggerEl) return;\n\n    this.#cleanupPositioning();\n    this.#positionAbort = new AbortController();\n    this.#positionTrigger = triggerEl;\n    const { signal } = this.#positionAbort;\n\n    const reposition = () => {\n      cancelAnimationFrame(this.#positionFrame);\n      this.#positionFrame = requestAnimationFrame(() => {\n        if (signal.aborted) return;\n        this.requestUpdate();\n      });\n    };\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true, signal });\n    window.addEventListener('resize', reposition, { signal });\n\n    if (typeof ResizeObserver === 'function') {\n      this.#resizeObserver = new ResizeObserver(() => {\n        reposition();\n      });\n      this.#resizeObserver.observe(triggerEl);\n      this.#resizeObserver.observe(this);\n    }\n\n    reposition();\n  }\n\n  #cleanupPositioning(): void {\n    this.#positionAbort?.abort();\n    this.#positionAbort = null;\n    this.#positionTrigger = null;\n    cancelAnimationFrame(this.#positionFrame);\n    this.#positionFrame = 0;\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"tooltip-element.js","names":["#core","#i18n","#groupConsumer","#containerCtx","#popupGroupCtx","#position","#disconnect","#tooltip","#snapshot","#cleanupTrigger","#syncTrigger","#currentTrigger","#syncContent","#triggerAbort","#hostHasAuthoredTooltipContent"],"sources":["../../../../src/ui/tooltip/tooltip-element.ts"],"sourcesContent":["import {\n  type ButtonState,\n  POPUP_HOST_ATTR,\n  TooltipCore,\n  TooltipCSSVars,\n  TooltipDataAttrs,\n  type TooltipInput,\n} from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createTooltip,\n  createTransition,\n  HOTKEY_SHORTCUT_CHANGE_EVENT,\n  type PositioningBoundary,\n  type TooltipApi,\n  type TooltipChangeDetails,\n  type TooltipOpenChangeReason,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { State } from '@videojs/store';\nimport { SnapshotController } from '@videojs/store/html';\nimport { listen, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\nimport { isFunction } from '@videojs/utils/predicate';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { containerContext } from '../../player/context';\nimport { popupGroupContext } from '../../player/popup-group-context';\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\nimport { tooltipGroupContext } from './context';\nimport { TooltipLabelElement } from './tooltip-label-element';\nimport { TooltipShortcutElement } from './tooltip-shortcut-element';\n\ntype TriggerElement = HTMLElement & {\n  getLabel(): Text | string | undefined;\n  getResolvedLabel?(): string | undefined;\n  getShortcut?: (() => string | undefined) | undefined;\n  $state: State<ButtonState>;\n};\n\nfunction isLabelTrigger(el: HTMLElement): el is TriggerElement {\n  return '$state' in el;\n}\n\n/** @fires open-change - Fired when the tooltip's open state changes. */\nexport class TooltipElement extends UIElement {\n  static readonly tagName = 'media-tooltip';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    disableHoverablePopup: { type: Boolean, attribute: 'disable-hoverable-popup' },\n    disabled: { type: Boolean },\n    sticky: { type: Boolean },\n    boundary: { type: String },\n    trigger: { type: String },\n  } satisfies PropertyDeclarationMap<keyof TooltipCore.Props | 'boundary' | 'trigger'>;\n\n  open = TooltipCore.defaultProps.open;\n  defaultOpen = TooltipCore.defaultProps.defaultOpen;\n  side = TooltipCore.defaultProps.side;\n  align = TooltipCore.defaultProps.align;\n  delay = TooltipCore.defaultProps.delay;\n  closeDelay = TooltipCore.defaultProps.closeDelay;\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup;\n  disabled = TooltipCore.defaultProps.disabled;\n  sticky = TooltipCore.defaultProps.sticky;\n  boundary: PositioningBoundary = 'container';\n  trigger = '';\n\n  readonly #core = new TooltipCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });\n  readonly #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });\n  readonly #popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });\n  readonly #position = new PositionController(this);\n  #tooltip: TooltipApi | null = null;\n  #snapshot: SnapshotController<TooltipInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.setAttribute(POPUP_HOST_ATTR, '');\n\n    this.#disconnect = new AbortController();\n\n    this.#tooltip = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n      disableHoverablePopup: () => this.disableHoverablePopup,\n      disabled: () => this.disabled,\n      sticky: () => this.sticky,\n      // Lazy getter — group may arrive after connect via context.\n      group: () => this.#groupConsumer.value,\n      popupGroup: () => this.#popupGroupCtx.value,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#tooltip.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#tooltip.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#tooltip.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#tooltip.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#tooltip?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#tooltip?.destroy();\n    this.#tooltip = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  close(reason: TooltipOpenChangeReason = 'imperative-action'): void {\n    this.#tooltip?.close(reason);\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#tooltip && changed.has('open')) {\n      const { active: interactionOpen } = this.#tooltip.input.current;\n\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#tooltip.open();\n        } else {\n          this.#tooltip.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#tooltip) return;\n\n    const triggerEl = this.#position.findTrigger(this.trigger);\n\n    this.#syncTrigger(triggerEl);\n\n    if (this.#currentTrigger && isLabelTrigger(this.#currentTrigger)) {\n      this.#syncContent(this.#currentTrigger);\n    }\n\n    // Derive state from core + input.\n    const input = this.#tooltip.input.current;\n\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, TooltipDataAttrs);\n\n    // Show/hide via Popover API AFTER data attributes are applied so\n    // `data-starting-style` is present before the first visible frame.\n    if (state.open) {\n      tryShowPopover(this);\n    } else {\n      tryHidePopover(this);\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#position.cleanup();\n      return;\n    }\n\n    this.#position.sync({\n      anchorName: this.id,\n      position: { side: state.side, align: state.align },\n      trigger: this.#currentTrigger,\n      boundary: this.boundary,\n      container: this.#containerCtx.value?.container ?? null,\n      cssVars: TooltipCSSVars,\n      onSideChange: (side) => this.setAttribute(TooltipDataAttrs.side, side),\n    });\n  }\n\n  // --- Trigger management ---\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#position.cleanup();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#tooltip?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#tooltip) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });\n\n      if (isLabelTrigger(triggerEl)) {\n        this.#syncContent(triggerEl);\n        triggerEl.$state.subscribe(() => this.#syncContent(triggerEl), {\n          signal: this.#triggerAbort.signal,\n        });\n        listen(triggerEl, HOTKEY_SHORTCUT_CHANGE_EVENT, () => this.#syncContent(triggerEl), {\n          signal: this.#triggerAbort.signal,\n        });\n      }\n    }\n  }\n\n  #syncContent(triggerEl: TriggerElement): void {\n    const label = triggerEl.getLabel();\n    let resolved = isFunction(triggerEl.getResolvedLabel) ? triggerEl.getResolvedLabel() : undefined;\n\n    if (resolved === undefined && label) {\n      resolved = translateText(label, this.#i18n.value);\n    }\n\n    const shortcut = triggerEl.getShortcut?.();\n\n    let labelEl = TooltipLabelElement.findIn(this);\n    let shortcutEl = TooltipShortcutElement.findIn(this);\n\n    if (!labelEl && !shortcutEl) {\n      if (this.#hostHasAuthoredTooltipContent()) return;\n\n      labelEl = TooltipLabelElement.create();\n      shortcutEl = TooltipShortcutElement.create();\n      this.replaceChildren(labelEl, shortcutEl);\n    }\n\n    labelEl?.setSyncedText(resolved ?? '');\n    shortcutEl?.setSyncedShortcut(shortcut);\n  }\n\n  #hostHasAuthoredTooltipContent(): boolean {\n    return Array.from(this.childNodes).some((node) => !!node.textContent?.trim());\n  }\n\n  #cleanupTrigger(): void {\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/tooltip/tooltip-group-element.d.ts

@@ -1,8 +1,7 @@
-import { MediaElement } from "../media-element.js";
+import { UIElement } from "../ui-element.js";
 import { PropertyValues } from "@videojs/element";
-
 //#region src/ui/tooltip/tooltip-group-element.d.ts
-declare class TooltipGroupElement extends MediaElement {
+declare class TooltipGroupElement extends UIElement {
   #private;
   static readonly tagName = "media-tooltip-group";
   static properties: {

package/dist/dev/ui/tooltip/tooltip-group-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-group-element.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-group-element.ts"],"mappings":";;;;cAOa,mBAAA,SAA4B,YAAA;EAAA;kBACvB,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;;EAMhB,KAAA;EACA,UAAA;EACA,OAAA;EAAA,UAKmB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}
+{"version":3,"file":"tooltip-group-element.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-group-element.ts"],"mappings":";;;cAOa,4BAA4B;;kBACvB;SAEA;;MACL,MAAI;;;MACC,MAAI;MAAU;;;MACjB,MAAI;;;EAGjB;EACA;EACA;YAKmB,OAAO,UAAU"}

package/dist/dev/ui/tooltip/tooltip-group-element.js

@@ -1,15 +1,19 @@
-import { MediaElement } from "../media-element.js";
+import { UIElement } from "../ui-element.js";
 import { tooltipGroupContext } from "./context.js";
-import { ContextProvider } from "@videojs/element/context";
 import { TooltipGroupCore } from "@videojs/core";
-
+import { ContextProvider } from "@videojs/element/context";
 //#region src/ui/tooltip/tooltip-group-element.ts
-var TooltipGroupElement = class extends MediaElement {
+var TooltipGroupElement = class extends UIElement {
 	constructor(..._args) {
 		super(..._args);
 		this.delay = TooltipGroupCore.defaultProps.delay;
 		this.closeDelay = TooltipGroupCore.defaultProps.closeDelay;
 		this.timeout = TooltipGroupCore.defaultProps.timeout;
+		this.#core = new TooltipGroupCore();
+		this.#provider = new ContextProvider(this, {
+			context: tooltipGroupContext,
+			initialValue: this.#core
+		});
 	}
 	static {
 		this.tagName = "media-tooltip-group";
@@ -24,18 +28,15 @@ var TooltipGroupElement = class extends MediaElement {
 			timeout: { type: Number }
 		};
 	}
-	#core = new TooltipGroupCore();
-	#provider = new ContextProvider(this, {
-		context: tooltipGroupContext,
-		initialValue: this.#core
-	});
+	#core;
+	#provider;
 	update(_changed) {
 		super.update(_changed);
 		this.#core.setProps(this);
 		this.#provider.setValue(this.#core);
 	}
 };
-
 //#endregion
 export { TooltipGroupElement };
+
 //# sourceMappingURL=tooltip-group-element.js.map

package/dist/dev/ui/tooltip/tooltip-group-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-group-element.js","names":["#core","#provider"],"sources":["../../../../src/ui/tooltip/tooltip-group-element.ts"],"sourcesContent":["import { TooltipGroupCore } from '@videojs/core';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { tooltipGroupContext } from './context';\n\nexport class TooltipGroupElement extends MediaElement {\n  static readonly tagName = 'media-tooltip-group';\n\n  static override properties = {\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    timeout: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof TooltipGroupCore.Props>;\n\n  delay = TooltipGroupCore.defaultProps.delay;\n  closeDelay = TooltipGroupCore.defaultProps.closeDelay;\n  timeout = TooltipGroupCore.defaultProps.timeout;\n\n  readonly #core = new TooltipGroupCore();\n  readonly #provider = new ContextProvider(this, { context: tooltipGroupContext, initialValue: this.#core });\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    this.#core.setProps(this);\n    this.#provider.setValue(this.#core);\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,sBAAb,cAAyC,aAAa;;;eAS5C,iBAAiB,aAAa;oBACzB,iBAAiB,aAAa;iBACjC,iBAAiB,aAAa;;;iBAVd;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,YAAY;IAAE,MAAM;IAAQ,WAAW;IAAe;GACtD,SAAS,EAAE,MAAM,QAAQ;GAC1B;;CAMD,CAASA,OAAQ,IAAI,kBAAkB;CACvC,CAASC,WAAY,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAqB,cAAc,MAAKD;EAAO,CAAC;CAE1G,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,QAAKA,KAAM,SAAS,KAAK;AACzB,QAAKC,SAAU,SAAS,MAAKD,KAAM"}
+{"version":3,"file":"tooltip-group-element.js","names":["#core","#provider"],"sources":["../../../../src/ui/tooltip/tooltip-group-element.ts"],"sourcesContent":["import { TooltipGroupCore } from '@videojs/core';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { tooltipGroupContext } from './context';\n\nexport class TooltipGroupElement extends UIElement {\n  static readonly tagName = 'media-tooltip-group';\n\n  static override properties = {\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    timeout: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof TooltipGroupCore.Props>;\n\n  delay = TooltipGroupCore.defaultProps.delay;\n  closeDelay = TooltipGroupCore.defaultProps.closeDelay;\n  timeout = TooltipGroupCore.defaultProps.timeout;\n\n  readonly #core = new TooltipGroupCore();\n  readonly #provider = new ContextProvider(this, { context: tooltipGroupContext, initialValue: this.#core });\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    this.#core.setProps(this);\n    this.#provider.setValue(this.#core);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,sBAAb,cAAyC,UAAU;;;EASzC,KAAA,QAAA,iBAAiB,aAAa;EACzB,KAAA,aAAA,iBAAiB,aAAa;EACjC,KAAA,UAAA,iBAAiB,aAAa;EAEvB,KAAA,QAAA,IAAI,iBAAiB;EACjB,KAAA,YAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAqB,cAAc,KAAKA;EAAM,CAAC;;;EAb/E,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,YAAY;IAAE,MAAM;IAAQ,WAAW;GAAc;GACrD,SAAS,EAAE,MAAM,OAAO;EAC1B;;CAMA;CACA;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EACrB,KAAKA,MAAM,SAAS,IAAI;EACxB,KAAKC,UAAU,SAAS,KAAKD,KAAK;CACpC;AACF"}

package/dist/dev/ui/tooltip/tooltip-label-element.d.ts

@@ -0,0 +1,14 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/tooltip/tooltip-label-element.d.ts
+/** Label region inside `media-tooltip`; parent syncs text from the trigger when linked to a media button. */
+declare class TooltipLabelElement extends UIElement {
+  #private;
+  static readonly tagName = "media-tooltip-label";
+  static findIn(host: HTMLElement): TooltipLabelElement | null;
+  static create(): TooltipLabelElement;
+  connectedCallback(): void;
+  setSyncedText(text: string): void;
+}
+//#endregion
+export { TooltipLabelElement };
+//# sourceMappingURL=tooltip-label-element.d.ts.map

package/dist/dev/ui/tooltip/tooltip-label-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-label-element.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-label-element.ts"],"mappings":";;;cAOa,4BAA4B;;kBACvB;SAIT,OAAO,MAAM,cAAc;SAI3B,UAAU;EAIR;EAKT,cAAc"}

package/dist/dev/ui/tooltip/tooltip-label-element.js

@@ -0,0 +1,30 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/tooltip/tooltip-label-element.ts
+function hasAuthoredContent(host) {
+	return Array.from(host.childNodes).some((node) => !!node.textContent?.trim());
+}
+/** Label region inside `media-tooltip`; parent syncs text from the trigger when linked to a media button. */
+var TooltipLabelElement = class TooltipLabelElement extends UIElement {
+	static {
+		this.tagName = "media-tooltip-label";
+	}
+	#hasAuthoredContent = false;
+	static findIn(host) {
+		return host.querySelector(TooltipLabelElement.tagName);
+	}
+	static create() {
+		return document.createElement(TooltipLabelElement.tagName);
+	}
+	connectedCallback() {
+		this.#hasAuthoredContent ||= hasAuthoredContent(this);
+		super.connectedCallback();
+	}
+	setSyncedText(text) {
+		if (this.#hasAuthoredContent) return;
+		this.textContent = text;
+	}
+};
+//#endregion
+export { TooltipLabelElement };
+
+//# sourceMappingURL=tooltip-label-element.js.map

package/dist/dev/ui/tooltip/tooltip-label-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-label-element.js","names":["#hasAuthoredContent"],"sources":["../../../../src/ui/tooltip/tooltip-label-element.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\nfunction hasAuthoredContent(host: HTMLElement): boolean {\n  return Array.from(host.childNodes).some((node) => !!node.textContent?.trim());\n}\n\n/** Label region inside `media-tooltip`; parent syncs text from the trigger when linked to a media button. */\nexport class TooltipLabelElement extends UIElement {\n  static readonly tagName = 'media-tooltip-label';\n\n  #hasAuthoredContent = false;\n\n  static findIn(host: HTMLElement): TooltipLabelElement | null {\n    return host.querySelector(TooltipLabelElement.tagName);\n  }\n\n  static create(): TooltipLabelElement {\n    return document.createElement(TooltipLabelElement.tagName) as TooltipLabelElement;\n  }\n\n  override connectedCallback(): void {\n    this.#hasAuthoredContent ||= hasAuthoredContent(this);\n    super.connectedCallback();\n  }\n\n  setSyncedText(text: string): void {\n    if (this.#hasAuthoredContent) return;\n\n    this.textContent = text;\n  }\n}\n"],"mappings":";;AAEA,SAAS,mBAAmB,MAA4B;CACtD,OAAO,MAAM,KAAK,KAAK,UAAU,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,KAAK,aAAa,KAAK,CAAC;AAC9E;;AAGA,IAAa,sBAAb,MAAa,4BAA4B,UAAU;;EACvB,KAAA,UAAA;;CAE1B,sBAAsB;CAEtB,OAAO,OAAO,MAA+C;EAC3D,OAAO,KAAK,cAAc,oBAAoB,OAAO;CACvD;CAEA,OAAO,SAA8B;EACnC,OAAO,SAAS,cAAc,oBAAoB,OAAO;CAC3D;CAEA,oBAAmC;EACjC,KAAKA,wBAAwB,mBAAmB,IAAI;EACpD,MAAM,kBAAkB;CAC1B;CAEA,cAAc,MAAoB;EAChC,IAAI,KAAKA,qBAAqB;EAE9B,KAAK,cAAc;CACrB;AACF"}

package/dist/dev/ui/tooltip/tooltip-shortcut-element.d.ts

@@ -0,0 +1,15 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/tooltip/tooltip-shortcut-element.d.ts
+/**
+ * Shortcut hint inside `media-tooltip`. CSS skins: `class="media-tooltip__kbd"`; Tailwind skins: `class` from
+ * `popup.tooltipShortcut`.
+ */
+declare class TooltipShortcutElement extends UIElement {
+  static readonly tagName = "media-tooltip-shortcut";
+  static findIn(host: HTMLElement): TooltipShortcutElement | null;
+  static create(): TooltipShortcutElement;
+  setSyncedShortcut(shortcut: string | undefined): void;
+}
+//#endregion
+export { TooltipShortcutElement };
+//# sourceMappingURL=tooltip-shortcut-element.d.ts.map

package/dist/dev/ui/tooltip/tooltip-shortcut-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-shortcut-element.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-shortcut-element.ts"],"mappings":";;;;;;cAMa,+BAA+B;kBAC1B;SAET,OAAO,MAAM,cAAc;SAI3B,UAAU;EAIjB,kBAAkB"}

package/dist/dev/ui/tooltip/tooltip-shortcut-element.js

@@ -0,0 +1,30 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/tooltip/tooltip-shortcut-element.ts
+/**
+* Shortcut hint inside `media-tooltip`. CSS skins: `class="media-tooltip__kbd"`; Tailwind skins: `class` from
+* `popup.tooltipShortcut`.
+*/
+var TooltipShortcutElement = class TooltipShortcutElement extends UIElement {
+	static {
+		this.tagName = "media-tooltip-shortcut";
+	}
+	static findIn(host) {
+		return host.querySelector(TooltipShortcutElement.tagName);
+	}
+	static create() {
+		return document.createElement(TooltipShortcutElement.tagName);
+	}
+	setSyncedShortcut(shortcut) {
+		if (shortcut) {
+			this.textContent = shortcut;
+			this.hidden = false;
+		} else {
+			this.textContent = "";
+			this.hidden = true;
+		}
+	}
+};
+//#endregion
+export { TooltipShortcutElement };
+
+//# sourceMappingURL=tooltip-shortcut-element.js.map

package/dist/dev/ui/tooltip/tooltip-shortcut-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-shortcut-element.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-shortcut-element.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\n/**\n * Shortcut hint inside `media-tooltip`. CSS skins: `class=\"media-tooltip__kbd\"`; Tailwind skins: `class` from\n * `popup.tooltipShortcut`.\n */\nexport class TooltipShortcutElement extends UIElement {\n  static readonly tagName = 'media-tooltip-shortcut';\n\n  static findIn(host: HTMLElement): TooltipShortcutElement | null {\n    return host.querySelector(TooltipShortcutElement.tagName);\n  }\n\n  static create(): TooltipShortcutElement {\n    return document.createElement(TooltipShortcutElement.tagName) as TooltipShortcutElement;\n  }\n\n  setSyncedShortcut(shortcut: string | undefined): void {\n    if (shortcut) {\n      this.textContent = shortcut;\n      this.hidden = false;\n    } else {\n      this.textContent = '';\n      this.hidden = true;\n    }\n  }\n}\n"],"mappings":";;;;;;AAMA,IAAa,yBAAb,MAAa,+BAA+B,UAAU;;EAC1B,KAAA,UAAA;;CAE1B,OAAO,OAAO,MAAkD;EAC9D,OAAO,KAAK,cAAc,uBAAuB,OAAO;CAC1D;CAEA,OAAO,SAAiC;EACtC,OAAO,SAAS,cAAc,uBAAuB,OAAO;CAC9D;CAEA,kBAAkB,UAAoC;EACpD,IAAI,UAAU;GACZ,KAAK,cAAc;GACnB,KAAK,SAAS;EAChB,OAAO;GACL,KAAK,cAAc;GACnB,KAAK,SAAS;EAChB;CACF;AACF"}

package/dist/dev/ui/ui-element.d.ts

@@ -0,0 +1,10 @@
+import { ReactiveElement } from "@videojs/element";
+import { Constructor } from "@videojs/utils/types";
+//#region src/ui/ui-element.d.ts
+declare const UIElement_base: typeof ReactiveElement & (new (...args: any[]) => import("@videojs/element").Destroyable);
+/** Base class for interactive media UI elements. */
+declare class UIElement extends UIElement_base {}
+interface UIElementConstructor extends Constructor<UIElement> {}
+//#endregion
+export { UIElement, UIElementConstructor };
+//# sourceMappingURL=ui-element.d.ts.map

package/dist/dev/ui/ui-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-element.d.ts","names":[],"sources":["../../../src/ui/ui-element.ts"],"mappings":";;;;;cAIa,kBAAkB;UAEd,6BAA6B,YAAY"}

package/dist/dev/ui/ui-element.js

@@ -0,0 +1,8 @@
+import { DestroyMixin, ReactiveElement } from "@videojs/element";
+//#region src/ui/ui-element.ts
+/** Base class for interactive media UI elements. */
+var UIElement = class extends DestroyMixin(ReactiveElement) {};
+//#endregion
+export { UIElement };
+
+//# sourceMappingURL=ui-element.js.map

package/dist/dev/ui/ui-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-element.js","names":[],"sources":["../../../src/ui/ui-element.ts"],"sourcesContent":["import { DestroyMixin, ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\n/** Base class for interactive media UI elements. */\nexport class UIElement extends DestroyMixin(ReactiveElement) {}\n\nexport interface UIElementConstructor extends Constructor<UIElement> {}\n"],"mappings":";;;AAIA,IAAa,YAAb,cAA+B,aAAa,eAAe,CAAC,CAAC,CAAC"}

package/dist/dev/ui/volume-indicator/volume-indicator-element.d.ts

@@ -0,0 +1,26 @@
+import { LiveIndicator } from "../input-indicator/live-indicator.js";
+import { InputIndicatorElement } from "../input-indicator/input-indicator-element.js";
+import { index_d_exports } from "../../index.js";
+import { VolumeIndicatorCore } from "@videojs/core";
+//#region src/ui/volume-indicator/volume-indicator-element.d.ts
+declare class VolumeIndicatorElement extends InputIndicatorElement<VolumeIndicatorCore.State> {
+  #private;
+  static readonly tagName = "media-volume-indicator";
+  static properties: {
+    closeDelay: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+  };
+  closeDelay: number | undefined;
+  protected get core(): VolumeIndicatorCore;
+  protected get transition(): index_d_exports.TransitionApi;
+  protected get liveIndicator(): LiveIndicator<import("@videojs/core").VolumeIndicatorState>;
+  protected get options(): {
+    replayOnUpdate: false;
+  };
+  protected syncCoreProps(): void;
+}
+//#endregion
+export { VolumeIndicatorElement };
+//# sourceMappingURL=volume-indicator-element.d.ts.map

package/dist/dev/ui/volume-indicator/volume-indicator-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator-element.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-element.ts"],"mappings":";;;;;cAea,+BAA+B,sBAAsB,oBAAoB;;kBACpE;SAEA;;MACA,MAAI;MAAU;;;EAG9B;gBAYc,QAAI;gBAIJ,cAJI,gBAIM;gBAIV,iBAAa,sCAAA;gBAIJ;;;YAIJ"}

package/dist/dev/ui/volume-indicator/volume-indicator-element.js

@@ -0,0 +1,56 @@
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
+import { InputIndicatorElement } from "../input-indicator/input-indicator-element.js";
+import { LiveIndicator } from "../input-indicator/live-indicator.js";
+import { VolumeIndicatorCSSVars, VolumeIndicatorCore, VolumeIndicatorDataAttrs, createInputIndicatorLabels, getVolumeIndicatorDisplayValue } from "@videojs/core";
+import { createTransition } from "@videojs/core/dom";
+//#region src/ui/volume-indicator/volume-indicator-element.ts
+var VolumeIndicatorElement = class extends InputIndicatorElement {
+	static {
+		this.tagName = "media-volume-indicator";
+	}
+	static {
+		this.properties = { closeDelay: {
+			type: Number,
+			attribute: "close-delay"
+		} };
+	}
+	#i18n = new I18nController(this, i18nContext);
+	#core = new VolumeIndicatorCore();
+	#transition = createTransition();
+	#liveIndicator = new LiveIndicator({
+		host: this,
+		dataAttrs: VolumeIndicatorDataAttrs,
+		render: renderVolumeIndicator
+	});
+	#options = { replayOnUpdate: false };
+	get core() {
+		return this.#core;
+	}
+	get transition() {
+		return this.#transition;
+	}
+	get liveIndicator() {
+		return this.#liveIndicator;
+	}
+	get options() {
+		return this.#options;
+	}
+	syncCoreProps() {
+		this.#core.setProps({
+			closeDelay: this.closeDelay,
+			labels: createInputIndicatorLabels(this.#i18n.value)
+		});
+	}
+};
+function renderVolumeIndicator(element, state) {
+	const fill = element.querySelector("media-volume-indicator-fill");
+	const value = element.querySelector("media-volume-indicator-value");
+	if (state.fill) fill?.style.setProperty(VolumeIndicatorCSSVars.fill, state.fill);
+	else fill?.style.removeProperty(VolumeIndicatorCSSVars.fill);
+	if (value) value.textContent = getVolumeIndicatorDisplayValue(state);
+}
+//#endregion
+export { VolumeIndicatorElement };
+
+//# sourceMappingURL=volume-indicator-element.js.map

package/dist/dev/ui/volume-indicator/volume-indicator-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator-element.js","names":["#i18n","#core","#transition","#liveIndicator","#options"],"sources":["../../../../src/ui/volume-indicator/volume-indicator-element.ts"],"sourcesContent":["import {\n  createInputIndicatorLabels,\n  getVolumeIndicatorDisplayValue,\n  VolumeIndicatorCore,\n  VolumeIndicatorCSSVars,\n  VolumeIndicatorDataAttrs,\n} from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { InputIndicatorElement, type InputIndicatorOptions } from '../input-indicator/input-indicator-element';\nimport { LiveIndicator } from '../input-indicator/live-indicator';\n\nexport class VolumeIndicatorElement extends InputIndicatorElement<VolumeIndicatorCore.State> {\n  static readonly tagName = 'media-volume-indicator';\n\n  static override properties = {\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'closeDelay'>;\n\n  closeDelay: number | undefined;\n\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #core = new VolumeIndicatorCore();\n  readonly #transition = createTransition();\n  readonly #liveIndicator = new LiveIndicator({\n    host: this,\n    dataAttrs: VolumeIndicatorDataAttrs,\n    render: renderVolumeIndicator,\n  });\n  readonly #options = { replayOnUpdate: false } satisfies InputIndicatorOptions;\n\n  protected get core() {\n    return this.#core;\n  }\n\n  protected get transition() {\n    return this.#transition;\n  }\n\n  protected get liveIndicator() {\n    return this.#liveIndicator;\n  }\n\n  protected override get options() {\n    return this.#options;\n  }\n\n  protected override syncCoreProps(): void {\n    this.#core.setProps({\n      closeDelay: this.closeDelay,\n      labels: createInputIndicatorLabels(this.#i18n.value),\n    });\n  }\n}\n\nfunction renderVolumeIndicator(element: HTMLElement, state: VolumeIndicatorCore.State): void {\n  const fill = element.querySelector<HTMLElement>('media-volume-indicator-fill');\n  const value = element.querySelector('media-volume-indicator-value');\n\n  if (state.fill) {\n    fill?.style.setProperty(VolumeIndicatorCSSVars.fill, state.fill);\n  } else {\n    fill?.style.removeProperty(VolumeIndicatorCSSVars.fill);\n  }\n\n  if (value) {\n    value.textContent = getVolumeIndicatorDisplayValue(state);\n  }\n}\n"],"mappings":";;;;;;;AAeA,IAAa,yBAAb,cAA4C,sBAAiD;;EACjE,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,YAAY;GAAE,MAAM;GAAQ,WAAW;EAAc,EACvD;;CAIA,QAAiB,IAAI,eAAe,MAAM,WAAW;CACrD,QAAiB,IAAI,oBAAoB;CACzC,cAAuB,iBAAiB;CACxC,iBAA0B,IAAI,cAAc;EAC1C,MAAM;EACN,WAAW;EACX,QAAQ;CACV,CAAC;CACD,WAAoB,EAAE,gBAAgB,MAAM;CAE5C,IAAc,OAAO;EACnB,OAAO,KAAKC;CACd;CAEA,IAAc,aAAa;EACzB,OAAO,KAAKC;CACd;CAEA,IAAc,gBAAgB;EAC5B,OAAO,KAAKC;CACd;CAEA,IAAuB,UAAU;EAC/B,OAAO,KAAKC;CACd;CAEA,gBAAyC;EACvC,KAAKH,MAAM,SAAS;GAClB,YAAY,KAAK;GACjB,QAAQ,2BAA2B,KAAKD,MAAM,KAAK;EACrD,CAAC;CACH;AACF;AAEA,SAAS,sBAAsB,SAAsB,OAAwC;CAC3F,MAAM,OAAO,QAAQ,cAA2B,6BAA6B;CAC7E,MAAM,QAAQ,QAAQ,cAAc,8BAA8B;CAElE,IAAI,MAAM,MACR,MAAM,MAAM,YAAY,uBAAuB,MAAM,MAAM,IAAI;MAE/D,MAAM,MAAM,eAAe,uBAAuB,IAAI;CAGxD,IAAI,OACF,MAAM,cAAc,+BAA+B,KAAK;AAE5D"}

package/dist/dev/ui/volume-indicator/volume-indicator-fill-element.d.ts

@@ -0,0 +1,8 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/volume-indicator/volume-indicator-fill-element.d.ts
+declare class VolumeIndicatorFillElement extends UIElement {
+  static readonly tagName = "media-volume-indicator-fill";
+}
+//#endregion
+export { VolumeIndicatorFillElement };
+//# sourceMappingURL=volume-indicator-fill-element.d.ts.map

package/dist/dev/ui/volume-indicator/volume-indicator-fill-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator-fill-element.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill-element.ts"],"mappings":";;cAEa,mCAAmC;kBAC9B"}

package/dist/dev/ui/volume-indicator/volume-indicator-fill-element.js

@@ -0,0 +1,11 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/volume-indicator/volume-indicator-fill-element.ts
+var VolumeIndicatorFillElement = class extends UIElement {
+	static {
+		this.tagName = "media-volume-indicator-fill";
+	}
+};
+//#endregion
+export { VolumeIndicatorFillElement };
+
+//# sourceMappingURL=volume-indicator-fill-element.js.map

package/dist/dev/ui/volume-indicator/volume-indicator-fill-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator-fill-element.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill-element.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\nexport class VolumeIndicatorFillElement extends UIElement {\n  static readonly tagName = 'media-volume-indicator-fill';\n}\n"],"mappings":";;AAEA,IAAa,6BAAb,cAAgD,UAAU;;EAC9B,KAAA,UAAA;;AAC5B"}

package/dist/dev/ui/volume-indicator/volume-indicator-value-element.d.ts

@@ -0,0 +1,8 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/volume-indicator/volume-indicator-value-element.d.ts
+declare class VolumeIndicatorValueElement extends UIElement {
+  static readonly tagName = "media-volume-indicator-value";
+}
+//#endregion
+export { VolumeIndicatorValueElement };
+//# sourceMappingURL=volume-indicator-value-element.d.ts.map

package/dist/dev/ui/volume-indicator/volume-indicator-value-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator-value-element.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-value-element.ts"],"mappings":";;cAEa,oCAAoC;kBAC/B"}

package/dist/dev/ui/volume-indicator/volume-indicator-value-element.js

@@ -0,0 +1,11 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/volume-indicator/volume-indicator-value-element.ts
+var VolumeIndicatorValueElement = class extends UIElement {
+	static {
+		this.tagName = "media-volume-indicator-value";
+	}
+};
+//#endregion
+export { VolumeIndicatorValueElement };
+
+//# sourceMappingURL=volume-indicator-value-element.js.map

package/dist/dev/ui/volume-indicator/volume-indicator-value-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator-value-element.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-value-element.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\nexport class VolumeIndicatorValueElement extends UIElement {\n  static readonly tagName = 'media-volume-indicator-value';\n}\n"],"mappings":";;AAEA,IAAa,8BAAb,cAAiD,UAAU;;EAC/B,KAAA,UAAA;;AAC5B"}

package/dist/dev/ui/volume-popover/volume-popover-element.d.ts

@@ -0,0 +1,12 @@
+import { PopoverElement } from "../popover/popover-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/volume-popover/volume-popover-element.d.ts
+/** A volume-aware popover that keeps its adjacent mute trigger available as a fallback. */
+declare class VolumePopoverElement extends PopoverElement {
+  #private;
+  static readonly tagName = "media-volume-popover";
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { VolumePopoverElement };
+//# sourceMappingURL=volume-popover-element.d.ts.map

package/dist/dev/ui/volume-popover/volume-popover-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-popover-element.d.ts","names":[],"sources":["../../../../src/ui/volume-popover/volume-popover-element.ts"],"mappings":";;;;cAmBa,6BAA6B;;kBACf;YAKN,OAAO,SAAS"}

package/dist/dev/ui/volume-popover/volume-popover-element.js

@@ -0,0 +1,46 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { PopoverElement } from "../popover/popover-element.js";
+import { VolumePopoverCore, VolumePopoverDataAttrs } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, selectVolume } from "@videojs/core/dom";
+//#region src/ui/volume-popover/volume-popover-element.ts
+const unavailableVolume = {
+	volume: 0,
+	muted: false,
+	volumeAvailability: "unsupported",
+	mutedAvailability: "unsupported",
+	setVolume: () => 0,
+	toggleMuted: () => false
+};
+/** A volume-aware popover that keeps its adjacent mute trigger available as a fallback. */
+var VolumePopoverElement = class extends PopoverElement {
+	static {
+		this.tagName = "media-volume-popover";
+	}
+	#core = new VolumePopoverCore();
+	#volume = new PlayerController(this, playerContext, selectVolume);
+	update(changed) {
+		super.update(changed);
+		this.#core.setProps(this);
+		this.#core.setInput({
+			active: this.hasAttribute("data-open"),
+			status: this.hasAttribute("data-starting-style") ? "starting" : this.hasAttribute("data-ending-style") ? "ending" : "idle"
+		});
+		this.#core.setMedia(this.#volume.value ?? unavailableVolume);
+		const state = this.#core.getState();
+		applyStateDataAttrs(this, state, VolumePopoverDataAttrs);
+		this.hidden = state.hidden;
+		if (state.hidden) {
+			this.close();
+			if (this.triggerElement) applyElementProps(this.triggerElement, {
+				"aria-expanded": void 0,
+				"aria-haspopup": void 0,
+				"aria-controls": void 0
+			});
+		}
+	}
+};
+//#endregion
+export { VolumePopoverElement };
+
+//# sourceMappingURL=volume-popover-element.js.map

package/dist/dev/ui/volume-popover/volume-popover-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-popover-element.js","names":["#core","#volume"],"sources":["../../../../src/ui/volume-popover/volume-popover-element.ts"],"sourcesContent":["import { VolumePopoverCore, VolumePopoverDataAttrs } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, selectVolume } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport type { MediaVolumeState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { PopoverElement } from '../popover/popover-element';\n\nconst unavailableVolume: MediaVolumeState = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported',\n  mutedAvailability: 'unsupported',\n  setVolume: () => 0,\n  toggleMuted: () => false,\n};\n\n/** A volume-aware popover that keeps its adjacent mute trigger available as a fallback. */\nexport class VolumePopoverElement extends PopoverElement {\n  static override readonly tagName = 'media-volume-popover';\n\n  readonly #core = new VolumePopoverCore();\n  readonly #volume = new PlayerController(this, playerContext, selectVolume);\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    this.#core.setProps(this);\n    this.#core.setInput({\n      active: this.hasAttribute('data-open'),\n      status: this.hasAttribute('data-starting-style')\n        ? 'starting'\n        : this.hasAttribute('data-ending-style')\n          ? 'ending'\n          : 'idle',\n    });\n    this.#core.setMedia(this.#volume.value ?? unavailableVolume);\n\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, VolumePopoverDataAttrs);\n    this.hidden = state.hidden;\n\n    if (state.hidden) {\n      this.close();\n\n      if (this.triggerElement) {\n        applyElementProps(this.triggerElement, {\n          'aria-expanded': undefined,\n          'aria-haspopup': undefined,\n          'aria-controls': undefined,\n        });\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;AASA,MAAM,oBAAsC;CAC1C,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,iBAAiB;CACjB,mBAAmB;AACrB;;AAGA,IAAa,uBAAb,cAA0C,eAAe;;EACpB,KAAA,UAAA;;CAEnC,QAAiB,IAAI,kBAAkB;CACvC,UAAmB,IAAI,iBAAiB,MAAM,eAAe,YAAY;CAEzE,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,KAAKA,MAAM,SAAS,IAAI;EACxB,KAAKA,MAAM,SAAS;GAClB,QAAQ,KAAK,aAAa,WAAW;GACrC,QAAQ,KAAK,aAAa,qBAAqB,IAC3C,aACA,KAAK,aAAa,mBAAmB,IACnC,WACA;EACR,CAAC;EACD,KAAKA,MAAM,SAAS,KAAKC,QAAQ,SAAS,iBAAiB;EAE3D,MAAM,QAAQ,KAAKD,MAAM,SAAS;EAElC,oBAAoB,MAAM,OAAO,sBAAsB;EACvD,KAAK,SAAS,MAAM;EAEpB,IAAI,MAAM,QAAQ;GAChB,KAAK,MAAM;GAEX,IAAI,KAAK,gBACP,kBAAkB,KAAK,gBAAgB;IACrC,iBAAiB,KAAA;IACjB,iBAAiB,KAAA;IACjB,iBAAiB,KAAA;GACnB,CAAC;EAEL;CACF;AACF"}

package/dist/dev/ui/volume-slider/volume-slider-element.d.ts

@@ -1,9 +1,12 @@
-import { MediaElement } from "../media-element.js";
+import { UIElement } from "../ui-element.js";
 import { PropertyValues } from "@videojs/element";
-import * as _videojs_core0 from "@videojs/core";
-
+import { Text } from "@videojs/core/i18n";
 //#region src/ui/volume-slider/volume-slider-element.d.ts
-declare class VolumeSliderElement extends MediaElement {
+/**
+ * @fires drag-start - Fired when a pointer drag starts.
+ * @fires drag-end - Fired when a pointer drag ends.
+ */
+declare class VolumeSliderElement extends UIElement {
   #private;
   static readonly tagName = "media-volume-slider";
   static properties: {
@@ -17,6 +20,10 @@ declare class VolumeSliderElement extends MediaElement {
       type: NumberConstructor;
       attribute: string;
     };
+    wheelStep: {
+      type: NumberConstructor;
+      attribute: string;
+    };
     orientation: {
       type: StringConstructor;
     };
@@ -28,9 +35,10 @@ declare class VolumeSliderElement extends MediaElement {
       attribute: string;
     };
   };
-  label: string | ((state: _videojs_core0.SliderState) => string);
+  label: Text | string;
   step: number;
   largeStep: number;
+  wheelStep: number;
   orientation: "horizontal" | "vertical";
   disabled: boolean;
   thumbAlignment: "center" | "edge";

package/dist/dev/ui/volume-slider/volume-slider-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"volume-slider-element.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-element.ts"],"mappings":";;;;;cAmBa,mBAAA,SAA4B,YAAA;EAAA;kBACvB,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;;;;;;;;;;;;EAShB,KAAA,aAAK,KAAA,iBAAA,WAAA;EACL,IAAA;EACA,SAAA;EACA,WAAA;EACA,QAAA;EACA,cAAA;EASS,iBAAA,CAAA;EA6CA,oBAAA,CAAA;EAMA,eAAA,CAAA;EAAA,UAKU,UAAA,CAAW,QAAA,EAAU,cAAA;EAAA,UAKrB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}
+{"version":3,"file":"volume-slider-element.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-element.ts"],"mappings":";;;;;;;;cA4Ba,4BAA4B;;kBACvB;SAEA;;MACL,MAAI;;;MACL,MAAI;;;MACC,MAAI;MAAU;;;MACd,MAAI;MAAU;;;MACZ,MAAI;;;MACP,MAAI;;;MACE,MAAI;MAAU;;;EAGlC,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EAYS;EA2DA;EAOA;YAWU,WAAW,UAAU;YAMrB,OAAO,UAAU"}