UNPKG

@arcgis/map-components

Version:
2 lines 7.08 kB
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */ import{d as i}from"./NTESPOTX.js";import{a as z}from"./Q52QESBE.js";import{a as f}from"./HZFVK34O.js";import{f as v}from"./AKBXFBDL.js";import"./LMBRORN7.js";import"./PBSJQPB2.js";import{O as u,P as p,U as k,a as b,b as d,x as g}from"./WUJCCZQC.js";import"./3TTFCHAA.js";export default $arcgis.t(([{substitute:$}])=>{var w="compact",x=new Map([["fr","full"],["he","full"],["ja","full"],["ko","compact-wrap"],["zh-CN","full"],["zh-HK","full-wrap"],["zh-TW","full-wrap"]]),F=new Set(["compact-wrap","full-wrap"]),m={hour:"numeric",minute:"numeric",timeZone:"UTC"},y={hour:"numeric",timeZone:"UTC"},T=a=>"";function C(a){let e=new Intl.DateTimeFormat(a,m),t=new Intl.DateTimeFormat(a,{...m,hourCycle:"h24"}),l=e.resolvedOptions().hour12===!1;return n=>{let r=i(n,"minutes","milliseconds"),s=new Date(r);return r!==0&&s.getUTCHours()===0&&s.getUTCMinutes()===0&&l?t.format(s):e.format(s)}}function D(a){let e=new Intl.DateTimeFormat(a,m),t=new Intl.DateTimeFormat(a,y),l=x.get(a)??w;return n=>{let r=Math.round(i(n,"minutes","hours")),s=i(r,"hours","milliseconds"),o=new Date(s);switch(l){case"full":case"full-wrap":return e.format(o);case"compact-wrap":return _(t.format(o)," ");default:return _(t.format(o),"\xA0")}}}function S(a){return F.has(x.get(a)??w)}function _(a,e){return a.replace(/\S+/gu,I).replace(/\s+/gu,e)}function I(a){return Array.from(a).join("\u2060")}var W=b`:host{display:block}arcgis-slider{--arcgis-slider-handle-size: var(--calcite-size-2xs);--slider-default-handle-size: var(--calcite-size-2xs);--slider-thumb-label-height: var(--calcite-input-number-height, 1.5rem);--tick-label-gap: var(--calcite-space-lg);--tick-label-font-size: var(--calcite-font-size--3);--tick-label-extra-line-count: 0;--range-label-font-size: var(--calcite-font-size--2);--range-label-padding-block-start: calc(var(--calcite-space-xs) / 2);--tick-label-padding-block-end-scale-adjustment: max( 0rem, calc(var(--slider-default-handle-size) - var(--arcgis-slider-handle-size)) );--tick-label-padding-block-end-base: calc(var(--tick-label-gap) - (var(--tick-label-font-size) / 2));--tick-label-padding-block-end-wrap: calc(var(--tick-label-font-size) * var(--tick-label-extra-line-count));--tick-label-padding-block-end: calc( var(--tick-label-padding-block-end-base) + var(--tick-label-padding-block-end-scale-adjustment) + var(--tick-label-padding-block-end-wrap) );--range-label-padding-block-end-base: calc(var(--slider-thumb-label-height) + (var(--arcgis-slider-handle-size) / 2));--range-label-padding-block-end-offset: calc(var(--range-label-padding-block-start) + var(--range-label-font-size));--range-label-padding-block-end: calc( var(--range-label-padding-block-end-base) - var(--range-label-padding-block-end-offset) );--calcite-font-size-sm: var(--range-label-font-size);display:block;margin-block-start:calc((var(--arcgis-slider-handle-size) / 2 + var(--range-label-padding-block-start)) * -1);padding-block-end:var(--tick-label-padding-block-end);&.wrap-labels{--tick-label-extra-line-count: 1}}:host([visual-scale="s"]) arcgis-slider{--arcgis-slider-handle-size: var(--calcite-size-4xs);--tick-label-font-size: var(--calcite-font-size--3);--range-label-font-size: var(--calcite-font-size--3);--tick-label-gap: var(--calcite-space-md)}:host([visual-scale="l"]) arcgis-slider{--arcgis-slider-handle-size: var(--calcite-size-xs);--tick-label-font-size: var(--calcite-font-size--2);--range-label-font-size: var(--calcite-font-size--1);--tick-label-gap: var(--calcite-space-xl)}.ticks-container{position:relative;width:100%}.time-range-label{position:relative;width:100%;font-size:var(--range-label-font-size);font-variant-numeric:tabular-nums;line-height:1em;padding-block-start:var(--range-label-padding-block-start);padding-block-end:var(--range-label-padding-block-end);text-align:center}.main-ticks,.secondary-ticks{position:absolute;inset:0;--arcgis-ticks-gap: var(--tick-label-gap);--arcgis-ticks-outline-color: var(--calcite-color-foreground-1)}.main-ticks{--arcgis-ticks-tick-length: calc(var(--calcite-size-fixed-xxxs) * 2);--arcgis-ticks-font-size: var(--tick-label-font-size);--arcgis-ticks-label-width: min-content;--arcgis-ticks-label-text-align: center;white-space:nowrap;word-break:auto-phrase;font-variant-numeric:tabular-nums}.wrap-labels .main-ticks{white-space:normal}.secondary-ticks{--arcgis-ticks-tick-length: var(--calcite-size-fixed-xxxs)}`,h=class extends u{constructor(){super(...arguments),this.messages=f({blocking:!0}),this._direction=v(),this._shouldWrapLabels=!1,this._sliderLabelFormatter=T,this._tickLabelFormatter=T,this.disabled=!1,this.mode="range",this.startTime=0,this.endTime=0,this.visualScale="m",this.arcgisTimeChange=g()}static{this.properties={_shouldWrapLabels:16,_values:16,_sliderLabelFormatter:16,_tickLabelFormatter:16,disabled:7,mode:3,startTime:9,endTime:9,label:1,steps:9,visualScale:3}}static{this.styles=W}willUpdate(e){(e.has("mode")||e.has("startTime")||e.has("endTime"))&&(this._values=this.mode==="single"?[this.startTime]:[this.startTime,this.endTime]),e.has("messages")&&this._updateLabelFormatters()}_setStartTime(e){this.startTime=e,this.arcgisTimeChange.emit()}_setRange(e,t){this.startTime=e,this.endTime=t,this.arcgisTimeChange.emit()}_updateLabelFormatters(){let e=this.messages._lang;this._sliderLabelFormatter=C(e),this._tickLabelFormatter=D(e),this._shouldWrapLabels=S(e)}_isolateTimeLabel(e){return this._direction==="rtl"?`\u2068${e}\u2069`:e}render(){let e=this.mode==="single"&&!this.disabled;return z(this.messages._lang,d`<arcgis-slider .ariaLabel=${this.label} class=${p({"wrap-labels":this._shouldWrapLabels})} .disabled=${this.disabled} fill-placement=none .labelFormatter=${this._sliderLabelFormatter} layout=horizontal min=0 .max=${c} .steps=${this.steps??1} .valueLabelsDisplay=${this.mode==="range"?"hidden":"always"} value-labels-placement=start .values=${this._values} @arcgisInput=${({currentTarget:{values:t}})=>{this.mode==="single"?this._setStartTime(t[0]):this._setRange(t[0],t[1])}}>${this.mode==="range"?this._renderTimeRange():void 0}<div class="ticks-container" slot=content-end><arcgis-ticks class="main-ticks" .interactive=${e} .labelFormatter=${this._tickLabelFormatter} layout=horizontal min=0 .max=${c} mode=value show-labels .values=${L} @arcgisTickClick=${t=>this._setStartTime(t.detail.value)}></arcgis-ticks><arcgis-ticks class="secondary-ticks" layout=horizontal min=0 .max=${c} mode=value .values=${R} @arcgisTickClick=${t=>this._setStartTime(t.detail.value)}></arcgis-ticks></div></arcgis-slider>`)}_renderTimeRange(){let e=this._isolateTimeLabel(this._sliderLabelFormatter(this.startTime)),t=this._isolateTimeLabel(this._sliderLabelFormatter(this.endTime)),l=this.messages?.timeRange;return d`<div class="time-range-label" aria-live=polite slot=content-start>${$(l??"{start} \u2014 {end}",{start:e,end:t})}</div>`}},c=i(24,"hours","minutes")-1,L=[0,6,12,18].map(a=>i(a,"hours","minutes"));L.push(c);var R=[2,4,8,10,14,16,20,22].map(a=>i(a,"hours","minutes"));k("arcgis-time-of-day-slider",h);return h},"intl")