import { Component , Element , h , Method , Prop , State , Watch , } from '@stencil/core' ; import { isUndefined } from '../../../../utils/unit' ; import { PlayerProps } from '../../../core/player/PlayerProps' ; import { watchComponentRegistry , withComponentRegistry , } from '../../../core/player/withComponentRegistry' ; import { withPlayerContext } from '../../../core/player/withPlayerContext' ; import { TooltipDirection , TooltipPosition } from '../../tooltip/types' ; let idCount = 0 ; /**
 * A control for toggling the visiblity of the settings menu. This control is not displayed if no
 * settings (`vime-settings`) has been provided for the current player.
 *
 * ## Visual
 *
 * <img
 *   src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/controls/settings-control/settings-control.png"
 *   alt="Vime settings control component"
 * />
 */ @ Component ( { tag : 'vm-settings-control' , styleUrl : 'settings-control.css' , shadow : true , } ) export class SettingsControl { private id ! : string ; private control ? : HTMLVmControlElement ; @ Element ( ) host ! : HTMLVmSettingsControlElement ; @ State ( ) vmSettings ? : HTMLVmSettingsElement ; @ Watch ( 'vmSettings' ) onComponentsChange ( ) { if ( ! isUndefined ( this . vmSettings ) ) { this . vmSettings . setController ( this . host ) ; } } /**
     * The name of the settings icon to resolve from the icon library.
     */ @ Prop ( ) icon = 'settings' ; /**
     * The name of an icon library to use. Defaults to the library defined by the `icons` player
     * property.
     */ @ Prop ( ) icons ? : string ; /**
     * Whether the tooltip is positioned above/below the control.
     */ @ Prop ( ) tooltipPosition : TooltipPosition = 'top' ; /**
     * The direction in which the tooltip should grow.
     */ @ Prop ( ) tooltipDirection : TooltipDirection ; /**
     * The DOM `id` of the settings menu this control is responsible for opening/closing.
     */ @ Prop ( ) menu ? : string ; /**
     * Whether the settings menu this control manages is open.
     */ @ Prop ( ) expanded = false ; internal @ Prop ( ) i18n : PlayerProps [ 'i18n' ] = { } ; constructor ( ) { withComponentRegistry ( this ) ; withPlayerContext ( this , [ 'i18n' ] ) ; } connectedCallback ( ) { idCount += 1 ; this . id = `vm-settings-control-${ idCount }` ; watchComponentRegistry ( this , 'vm-settings' , regs => { [ this . vmSettings ] = regs ; } ) ; } /**
     * Focuses the control.
     */ @ Method ( ) async focusControl ( ) { this . control ?. focusControl ( ) ; } /**
     * Removes focus from the control.
     */ @ Method ( ) async blurControl ( ) { this . control ?. blurControl ( ) ; } render ( ) { const hasSettings = ! isUndefined ( this . menu ) ; return ( < div class = { { settingsControl : true , hidden : ! hasSettings , active : hasSettings && this . expanded , } } > < vm - control identifier = { this . id } menu = { this . menu } hidden = { ! hasSettings } expanded = { this . expanded } label = { this . i18n . settings } ref = { control => { this . control = control ; } } > < vm - icon name = { this . icon } library = { this . icons } / > < vm - tooltip hidden = { this . expanded } position = { this . tooltipPosition } direction = { this . tooltipDirection } > { this . i18n . settings } < /vm-tooltip> < /vm-control> < /div>); } }