/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import{e as m}from"./EH5576ZY.js";import"./7QZVR2UR.js";import"./ZNBKMZP7.js";import{O as d,U as h,b as c}from"./GRFF5Y4R.js";import"./ALDX5YZO.js";export default $arcgis.t(([$,{watch:u}])=>{var b=["Auto"],f=[.25,.5,1,1.5,2],p=new $([255,127,0]);function s(n,t){return`${t.format(n)}x`}var o=class extends d{constructor(){super(...arguments),this._color=null,this._speed=1,this._quality="Auto",this._direction=m(),this._disabled=!1}static{this.properties={_disabled:16,_active:16,viewModel:0,messages:0}}loaded(){this.manager.onLifecycle(()=>[u(()=>this.viewModel.state,t=>{this._disabled=t==="not-ready"||t==="waiting"},{initial:!0})])}render(){let{viewModel:t,messages:e}=this,l=this._direction==="rtl"?"chevron-left":"chevron-right",a=new Intl.NumberFormat(this.messages._lang,{minimumFractionDigits:0,maximumFractionDigits:2}),g=c`<calcite-flow-item .heading=${e.playbackSpeed} .selected=${this._active==="speed"} @calciteFlowItemBack=${()=>this._active=void 0}><calcite-list .label=${e.playbackSpeed} selection-mode=single-persist>${f.map(i=>c`<calcite-list-item .disabled=${t?.layer?.isLive&&i!==1} .label=${s(i,a)} @click=${()=>{this._speed=i,t.changePlaybackSpeed(i)}} .selected=${i===this._speed}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`,v=c`<calcite-flow-item .heading=${e.quality} .selected=${this._active==="quality"} @calciteFlowItemBack=${()=>this._active=void 0}><calcite-list .label=${e.quality} selection-mode=single-persist>${b.map(i=>c`<calcite-list-item .label=${i} @click=${()=>this._quality=i} .selected=${i===this._quality}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`,_=c`<calcite-flow-item .heading=${e.graphics} .selected=${this._active==="color"} @calciteFlowItemBack=${()=>this._active=void 0}><calcite-block .heading=${e.color} expanded><calcite-color-picker channels-disabled format=hex saved-disabled scale=s .value=${this._color?.toHex()??p.toHex()} @calciteColorPickerChange=${({currentTarget:i})=>{let r=i.value?.toString()??null;this._color=r?new $(r):null,this._color&&t.changeGraphicsColor(this._color)}}></calcite-color-picker></calcite-block></calcite-flow-item>`;return c`<div><calcite-popover auto-close .label=${e.settings} overlay-positioning=fixed placement=top-end pointer-disabled reference-element=settings-action scale=s @calcitePopoverClose=${()=>this._active=void 0}><calcite-flow><calcite-flow-item .heading=${e.settings} .selected=${!this._active}><calcite-list .label=${e.settings}><calcite-list-item .label=${e.speed} @click=${()=>this._active="speed"}><div slot=content-end><calcite-chip .label=${s(this._speed,a)} scale=s>${s(this._speed,a)}</calcite-chip></div><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item><calcite-list-item .label=${e.quality} @click=${()=>this._active="quality"}><div slot=content-end><calcite-chip .label=${this._quality} scale=s>${this._quality}</calcite-chip></div><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item><calcite-list-item .label=${e.graphics} @click=${()=>this._active="color"}><calcite-color-picker-swatch .color=${this._color?.toString()??p.toString()} scale=s slot=content-end></calcite-color-picker-swatch><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item></calcite-list></calcite-flow-item>${this._active==="speed"?g:null}${this._active==="quality"?v:null}${this._active==="color"?_:null}</calcite-flow></calcite-popover><calcite-action alignment=center .disabled=${this._disabled} icon=sliders id=settings-action scale=s slot=trigger .text=${e.settings}></calcite-action></div>`}};h("arcgis-video-player-settings",o);return o},"Color","core/reactiveUtils")