@arcgis/map-components
Version:
ArcGIS Map Components
3 lines (2 loc) • 5.5 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import{a as m}from"./HZFVK34O.js";import{h as d}from"./AKBXFBDL.js";import"./LMBRORN7.js";import{b as h}from"./PBSJQPB2.js";import{O as n,P as c,R as a,U as r,a as o,b as i,x as s}from"./WUJCCZQC.js";import"./3TTFCHAA.js";var g=o`:host{display:inline-flex;max-inline-size:100%}:host([layout="horizontal"]) slot{min-inline-size:300px;min-block-size:48px}:host([layout="vertical"]) slot{min-inline-size:300px;min-block-size:144px}slot{display:flex}slot.empty{display:none}.container{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1)}.root{display:flex;flex-direction:row;align-items:stretch}calcite-action{width:var(--calcite-font-line-height-fixed-4xl);height:var(--calcite-font-line-height-fixed-4xl)}calcite-action-bar{--calcite-action-bar-items-space: var(--calcite-space-none);--calcite-spacing-sm: var(--calcite-space-none);background-color:var(--calcite-color-foreground-1)}.separator{border-inline-end:solid 1px var(--calcite-color-border-3);width:1px}.caption{border-block-start:solid 1px var(--calcite-color-border-3);border-block-end:solid 1px var(--calcite-color-border-3);padding-block:var(--calcite-space-sm);padding-inline:var(--calcite-space-md);inline-size:var(--calcite-space-none);min-inline-size:100%;box-sizing:border-box}.caption-text{font-family:inherit;font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-font-line-height);color:var(--calcite-color-text-2);overflow-wrap:anywhere}`,l=class extends n{constructor(){super(),this.messages=m({blocking:!0}),this._isPlaying=!1,this.autoDestroyDisabled=!1,this.caption="",this.disabled=!1,this.hideNextButton=!1,this.hidePlayButton=!1,this.hidePreviousButton=!1,this.icon="list-rectangle",this.label="",this.layout="horizontal",this.loop=!1,this.playRate=1e3,this.arcgisPropertyChange=d()("layout","loop","playRate","state"),this.arcgisAnimate=s(),this.arcgisNext=s(),this.arcgisPrevious=s(),this.arcgisPlay=s(),this.arcgisPause=s(),this.arcgisSlottedElementChange=s(),this.listen("arcgisPropertyChange",()=>this.requestUpdate())}static{this.properties={_isPlaying:16,_slottedElement:16,autoDestroyDisabled:5,caption:1,disabled:5,hideNextButton:5,hidePlayButton:5,hidePreviousButton:5,icon:1,label:1,layout:3,loop:5,playRate:9,referenceElement:1,state:32}}static{this.styles=g}get state(){return this._isPlaying?"playing":"ready"}async destroy(){await this.manager.destroy()}next(){this.arcgisNext.emit(),this._slottedElement?.canNext&&this._slottedElement.step("next")}pause(){this._isPlaying=!1,this.arcgisPause.emit()}play(){this._isPlaying||(this._isPlaying=!0,this.arcgisPlay.emit(),this._startPlayRate(!0))}previous(){this.arcgisPrevious.emit(),this._slottedElement?.canPrevious&&this._slottedElement.step("previous")}disconnectedCallback(){super.disconnectedCallback(),this._isPlaying&&this.pause()}willUpdate(t){t.has("layout")&&this._isElementWithLayout(this._slottedElement)&&(this._slottedElement.layout=this.layout),t.has("disabled")&&this._isElementWithDisabled(this._slottedElement)&&(this._slottedElement.disabled=this.disabled)}_handleSlotChange(t){let[e]=h(t);this._slottedElement=e,this.arcgisSlottedElementChange.emit({slottedElement:e}),!e&&this._isPlaying&&this.pause(),this._isElementWithLayout(e)&&(e.layout=this.layout),this._isElementWithDisabled(e)&&(e.disabled=this.disabled)}_isElementWithLayout(t){return!!t&&"layout"in t}_isElementWithDisabled(t){return!!t&&"disabled"in t}_startPlayRate(t){setTimeout(()=>{if(this._isPlaying){if(!this._slottedElement?.canNext&&this.loop)this._slottedElement?.reset();else if(this._slottedElement?.step("next"),this._slottedElement&&!this._slottedElement?.canNext&&!this.loop){this.pause();return}this.arcgisAnimate.emit({first:t}),this._startPlayRate(!1)}},this.playRate)}render(){let t=!!this._slottedElement&&!this._slottedElement.hidden,e=this.state==="playing";return i`<div class="container"><div class="root"><calcite-action-bar expand-disabled .layout=${this.layout}>${!this.hidePlayButton&&i`<calcite-action alignment=center .disabled=${this.disabled||this._slottedElement&&!this._slottedElement.canPlay} .icon=${e?"pause":"play"} .text=${e?this.messages.pause:this.messages.play} title=${(e?this.messages.pause:this.messages.play)??a} =${()=>{if(this._slottedElement&&!this._slottedElement.canNext&&!this.loop){this._slottedElement.reset(),this.play();return}e?this.pause():this.play()}}></calcite-action>`||""}${!this.hidePreviousButton&&i`<calcite-action alignment=center .disabled=${this.disabled||e||this._slottedElement&&!this._slottedElement.canPrevious} .icon=${this.layout==="horizontal"?"chevron-left":"chevron-up"} .text=${this.messages.previous} title=${this.messages.previous??a} =${this.previous}></calcite-action>`||""}${!this.hideNextButton&&i`<calcite-action alignment=center .disabled=${this.disabled||e||this._slottedElement&&!this._slottedElement.canNext} .icon=${this.layout==="horizontal"?"chevron-right":"chevron-down"} .text=${this.messages.next} title=${this.messages.next??a} =${this.next}></calcite-action>`||""}</calcite-action-bar>${t&&i`<div class="separator"></div>`||""}<slot =${({currentTarget:p})=>{this._handleSlotChange(p)}} class=${c(t?"component-slot":"empty")}></slot></div>${this.caption&&i`<div class="caption"><div class="caption-text">${this.caption}</div></div>`||""}</div>`}};r("arcgis-value-picker",l);export{l as ArcgisValuePicker};