@arcgis/map-components 5.1.0-next.82 → 5.1.0-next.84

package/dist/components/arcgis-time-slider/customElement.js

@@ -1,51 +1,703 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as i } from "../../chunks/runtime.js";
-import { usePropertyChange as r } from "@arcgis/lumina/controllers";
-import { reEmitEvent as t } from "@arcgis/lumina/controllers/accessor";
-import o from "@arcgis/core/widgets/TimeSlider.js";
-import { LitElement as s, createEvent as a } from "@arcgis/lumina";
-import { m as l } from "../../chunks/useWidget.js";
-import { css as n } from "lit";
-import { when as d } from "@arcgis/core/core/reactiveUtils.js";
-const c = n`@keyframes esri-basemap-slide{0%{opacity:0;margin-top:0;margin-left:0}75%{opacity:0;margin-top:0;margin-left:0}to{opacity:1;margin-top:5px;margin-left:5px}}@keyframes esri-docking-animation{0%{opacity:0}25%{opacity:0}to{opacity:1}}@keyframes popup-intro-animation-down{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translate(0)}}@keyframes popup-intro-animation-up{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translate(0)}}@supports (-ms-ime-align: auto){.esri-slider__anchor:focus{outline:1px dotted #000}}@keyframes esri-spinner--start-animation{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes esri-spinner--finish-animation{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes esri-spinner--rotate-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion){.esri-utility-network-trace__reset-prompt{animation:none!important}}@media(prefers-reduced-motion){.esri-popup--aligned-top-center,.esri-popup--aligned-top-left,.esri-popup--aligned-top-right,.esri-popup--aligned-bottom-center,.esri-popup--aligned-bottom-left,.esri-popup--aligned-bottom-right,.esri-popup--is-docked{animation:none!important}}@media(prefers-reduced-motion:reduce){.esri-fov-overlay{animation:none!important}}@keyframes esri-fade-in-down{0%{opacity:0;transform:translateY(-5px)}25%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translate(0)}}@keyframes esri-fade-in-up{0%{opacity:0;transform:translateY(5px)}25%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translate(0)}}@keyframes esri-fade-in{0%{opacity:0}25%{opacity:0}to{opacity:1}}@keyframes esri-fade-in-scale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes looping-progresss-bar-ani{0%{width:0;left:0}20%{width:20%;left:0}80%{width:20%;left:80%}to{width:0;left:100%}}@keyframes esri-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes panel-advance{0%{opacity:0;transform:translate(50px) scale(.99)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes panel-retreat{0%{opacity:0;transform:translate(-50px) scale(.99)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes panel-advance--rtl{0%{opacity:0;transform:translate(-50px) scale(.99)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes panel-retreat--rtl{0%{opacity:0;transform:translate(50px) scale(.99)}to{opacity:1;transform:translate(0) scale(1)}}.esri-button{box-sizing:border-box;cursor:pointer;white-space:normal;word-break:normal;color:var(--calcite-color-text-1);background-color:var(--calcite-color-status-info);border:var(--calcite-spacing-px) solid var(--calcite-color-status-info);justify-content:center;align-items:center;width:100%;min-height:var(--calcite-spacing-xxxl);padding:6px 7px;font-family:inherit;font-size:var(--calcite-font-size);transition:background-color .125s ease-in-out,border .125s ease-in-out;display:flex;overflow:hidden;&:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-status-info-hover);border:var(--calcite-spacing-px) solid var(--calcite-color-status-info-hover)}}.esri-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-text-2);border:1px solid var(--calcite-color-text-2)}.esri-button.esri-button--small{min-height:var(--calcite-spacing-xl);font-size:var(--calcite-font-size-sm)}.esri-button.esri-button--half{width:50%;display:inline-block}.esri-button.esri-button--third{width:33%;display:inline-block}.esri-button--secondary{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1)}.esri-button--tertiary{color:var(--calcite-color-brand);background-color:var(--calcite-color-transparent);border-color:var(--calcite-color-transparent)}.esri-button--tertiary:hover{color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-foreground-2);border-color:var(--calcite-color-transparent)}.esri-button--disabled{opacity:.4;pointer-events:none}.esri-button--drill-in{outline-offset:-4px;cursor:pointer;text-align:unset;background-color:var(--calcite-color-foreground-1);border:none;border-radius:2px;justify-content:space-between;align-items:center;margin:var(--calcite-spacing-md) 7px;padding:var(--calcite-spacing-md) 7px;text-decoration:none;transition:background-color .125s ease-in-out;display:flex;box-shadow:0 0 0 1px #adadad4d}.esri-button--drill-in:hover,.esri-button--drill-in:focus{background-color:var(--calcite-color-foreground-2)}.esri-button--drill-in__title{font-size:var(--calcite-font-size)}.esri-button--drill-in [class^=esri-icon-],.esri-button--drill-in [class*=" esri-icon-"]{padding:0 7px}.esri-widget--button{cursor:pointer;text-align:center;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);flex-flow:row;justify-content:center;align-items:center;width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl);margin:0;padding:0;font-size:var(--calcite-font-size);transition:background-color .125s ease-in-out;display:flex;overflow:hidden}.esri-widget--button:is(calcite-button):not(:hover){--calcite-icon-color: var(--calcite-color-text-3)}.esri-widget--button:not([appearance]),.esri-widget--button[appearance=solid]{--calcite-color-foreground-3: var(--calcite-color-foreground-1)}.esri-widget--button:is(calcite-button){--calcite-offset-invert-focus: 1}.esri-widget--button calcite-loader[inline]{margin:auto}.esri-button--secondary{color:var(--calcite-color-brand);background-color:var(--calcite-color-foreground-1);&:hover{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-status-info);border:1px solid var(--calcite-color-status-info)}}.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}.esri-widget{box-sizing:border-box;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget *,.esri-widget :before,.esri-widget :after{box-sizing:inherit}.esri-widget.esri-widget--disabled>*{opacity:.4;pointer-events:none}.esri-widget.esri-widget--compact{--esri-widget-padding-y: 0;--esri-widget-padding-x: 0}.esri-widget__anchor{color:var(--calcite-color-text-2)}.esri-widget__anchor:hover{color:var(--calcite-color-text-3)}.esri-widget__anchor:hover,.esri-widget__anchor:focus{text-decoration:underline}.esri-widget__anchor--disabled{opacity:.4;pointer-events:none}.esri-widget__header{background-color:var(--calcite-color-foreground-1);flex:1 0 100%;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:12px 0 12px 15px;display:flex}.esri-widget__heading{word-break:break-word}.esri-widget__header .esri-widget__heading{width:calc(100% - 48px);text-align:initial;color:var(--calcite-color-text-1);align-items:center;margin:0;padding:0;display:flex}.esri-widget__header-button{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);border:none;flex:0 0 48px;justify-content:center;align-self:stretch;align-items:center;width:48px;padding:0;display:flex}.esri-widget__footer{background-color:var(--calcite-color-foreground-1);justify-content:center;align-items:center;width:100%;min-height:48px;display:flex}.esri-widget__footer-pagination{color:var(--calcite-color-text-2);justify-content:space-between;align-items:center;display:flex}.esri-widget__footer-pagination-previous-button,.esri-widget__footer-pagination-next-button{cursor:pointer;background-color:var(--calcite-color-foreground-1);border:0;margin:0 7px;padding:12px 15px;transition:background-color .125s ease-in-out}.esri-widget__footer-pagination-previous-button:hover,.esri-widget__footer-pagination-previous-button:focus,.esri-widget__footer-pagination-next-button:hover,.esri-widget__footer-pagination-next-button:focus{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1)}.esri-menu{visibility:hidden;z-index:1;background-clip:padding;background-color:var(--calcite-color-foreground-1);background-clip:padding-box;width:100%;max-height:0;margin:2px 0 0;padding:0;font-size:var(--calcite-font-size);line-height:var(--calcite-spacing-xl);position:absolute;top:100%;left:0;overflow:hidden;box-shadow:0 1px 2px #0000004d}.esri-menu .esri-menu__header{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-inverse);padding:6px 12px}.esri-menu__list{margin:0;padding:0;list-style:none}.esri-menu__list-item{cursor:pointer;border-top:1px solid #adadad4d;border-left:3px solid #0000;padding:.8em 1em}.esri-menu__list-item [class^=esri-icon-],.esri-menu__list-item [class*=" esri-icon-"]{padding-right:2.8px}.esri-menu__list-item:first-child{border-top:none}.esri-menu__list-item--focus,.esri-menu__list-item:hover,.esri-menu__list-item:focus{background-color:var(--calcite-color-foreground-1)}.esri-menu__list-item:active{background-color:var(--calcite-color-foreground-current)}.esri-menu__list-item--active,.esri-menu__list-item--active:hover,.esri-menu__list-item--active:focus{background-color:var(--calcite-color-foreground-1);border-left-color:var(--calcite-color-brand)}.esri-widget__table{border-collapse:collapse;color:var(--calcite-color-text-1);border:none;width:100%;line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget__table tr:nth-child(odd){background-color:var(--calcite-color-transparent)}.esri-widget__table tr:nth-child(2n){background-color:var(--calcite-color-transparent-press)}.esri-widget__table tr a{color:var(--calcite-color-text-2)}.esri-widget__table tr a:hover,.esri-widget__table tr a:focus{color:var(--calcite-color-text-1)}.esri-widget__table tr td,.esri-widget__table tr th{vertical-align:top;word-break:break-word;padding:.5em .7em;font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-regular)}.esri-widget__table tr th{text-align:left;border-right:3px solid #0000000d;width:50%}.esri-widget__table tr td{width:50%}.esri-input{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1);border:1px solid #959595;font-size:var(--calcite-font-size)}.esri-input::-ms-clear{display:none}.esri-input::placeholder{opacity:1;color:var(--calcite-color-text-2)}.esri-input:placeholder-shown{text-overflow:ellipsis}.esri-input[type=text],.esri-input[type=password],.esri-input[type=number]{height:32px;padding:0 .5em}calcite-combobox.esri-input{border:none}.esri-widget__content--empty{text-align:center;color:var(--calcite-color-border-input);flex-flow:column wrap;align-items:center;padding:18px 22px;display:flex}.esri-widget__content--empty h1.esri-widget__heading,.esri-widget__content--empty h2.esri-widget__heading,.esri-widget__content--empty h3.esri-widget__heading,.esri-widget__content--empty h4.esri-widget__heading,.esri-widget__content--empty h5.esri-widget__heading{font-weight:var(--calcite-font-weight-regular)}.esri-widget__content-illustration--empty{width:128px;padding:1rem 0}.esri-widget__content-icon--empty{width:32px;padding:.5rem 0}.esri-select{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background:var(--calcite-color-foreground-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 32 32' width='32' height='32'%3E%3Cpath d='M8 11.207l-4-4V5.793l4 4 4-4v1.414z' fill='%23adadad' fillrule='nonzero'/%3E%3C/svg%3E") 100% no-repeat;border:1px solid #959595;border-radius:0;width:100%;height:32px;margin:0;padding:0 .5em;font-family:inherit;font-size:.85em;display:block}.esri-select[disabled]{cursor:auto}.esri-select::-ms-expand{display:none}.esri-disabled a,.esri-disabled [role=menu],.esri-disabled [role=checkbox],.esri-disabled [class^=esri-icon-],.esri-disabled [class*=" esri-icon-"]{color:var(--calcite-color-text-3)}.keynav-mode .esri-widget:focus,.keynav-mode .esri-widget :focus{z-index:1;outline-offset:2px;outline:2px solid #adadad}.esri-widget__loader-animation{border:.15em solid #adadad4d;border-top-color:var(--calcite-color-border-input);border-radius:100%;width:1em;height:1em;font-size:var(--calcite-font-size-md);animation:1.25s linear infinite esri-rotate;display:block;transform:translateZ(0)}:dir(rtl) .esri-widget__table th{text-align:right;border-left:3px solid #0000000d;border-right:none}:dir(rtl) .esri-select{background-position:0}:dir(rtl) .esri-menu__list-item{border-left:none;border-right:3px solid #0000}:dir(rtl) .esri-menu__list-item [class^=esri-icon-],:dir(rtl) .esri-menu__list-item [class*=" esri-icon-"]{padding-left:2px;padding-right:0}:dir(rtl) .esri-menu__list-item--active{border-right-color:var(--calcite-color-brand)}.esri-icon-font-fallback-text{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.esri-rotating{animation:1.25s linear infinite esri-rotate;transform:translateZ(0)}.esri-clearfix:before,.esri-clearfix:after{content:" ";display:table}.esri-clearfix:after{clear:both}.esri-interactive{cursor:pointer}.esri-hidden{display:none!important}.esri-invisible{visibility:hidden!important}.esri-offscreen{position:absolute;top:-999em;left:-999em}.esri-match-height{flex-direction:column;flex:auto;display:flex;overflow:hidden}@supports (-ms-ime-align: auto){.esri-slider__anchor:focus{outline:1px dotted var(--calcite-color-foreground-current)}}.esri-slider{-webkit-user-select:none;user-select:none;direction:ltr;width:100%;height:100%;display:flex}.esri-disabled{pointer-events:none}.esri-disabled .esri-slider__content,.esri-disabled .esri-slider__min,.esri-disabled .esri-slider__max{opacity:var(--calcite-opacity-light)}.esri-slider--reversed.esri-slider--horizontal{flex-direction:row-reverse}.esri-slider--reversed.esri-slider--vertical{flex-direction:column}.esri-slider--horizontal{flex-direction:row}.esri-slider--horizontal .esri-slider__content{height:auto}.esri-slider--horizontal .esri-slider__track{width:100%;height:2px}.esri-slider--horizontal .esri-slider__segment--interactive:hover{cursor:ew-resize}.esri-slider--horizontal .esri-slider__anchor{width:1px;height:100%}.esri-slider--horizontal .esri-slider__label{text-align:center;margin:0 11px;top:-30px;left:-50px}.esri-slider--horizontal .esri-slider__label-input{text-align:center}.esri-slider--horizontal .esri-slider__max,.esri-slider--horizontal .esri-slider__min{flex:none;width:50px;height:auto;margin:auto}.esri-slider--horizontal .esri-slider__ticks{width:100%;margin:9px 0 0;top:100%;left:0}.esri-slider--horizontal .esri-slider__tick{width:1px;height:5px}.esri-slider--horizontal .esri-slider__tick-label{margin-top:18px}.esri-slider--vertical{flex-direction:column-reverse}.esri-slider--vertical .esri-slider__content{flex-direction:column;width:auto}.esri-slider--vertical .esri-slider__track{flex-direction:column;flex:1 0 0;width:2px;height:100%}.esri-slider--vertical .esri-slider__segment--interactive:hover{cursor:ns-resize}.esri-slider--vertical .esri-slider__anchor{width:100%;height:1px}.esri-slider--vertical .esri-slider__label{text-align:left;top:-10px;left:20px}.esri-slider--vertical .esri-slider__max,.esri-slider--vertical .esri-slider__min{flex:0 0 22px;width:100%;margin:auto}.esri-slider--vertical .esri-slider__ticks{margin:0 0 0 11px;top:0;left:100%}.esri-slider--vertical .esri-slider__tick{width:5px;height:1px}.esri-slider--vertical .esri-slider__tick-label{margin-left:30px}.esri-slider__content{z-index:0;flex:1 0 auto;justify-content:center;align-items:center;margin:auto;line-height:0;display:flex;position:relative}.esri-slider__track{touch-action:none;background-color:var(--calcite-color-border-ghost);display:inline-block;position:relative}.esri-slider__segment{transform-origin:0 0;will-change:transform;touch-action:none;width:100%;height:100%;position:absolute;top:0;left:0}.esri-slider__segment:hover{cursor:pointer}.esri-slider__anchor{touch-action:none;-webkit-user-select:none;user-select:none;background-color:var(--calcite-color-brand);position:absolute}.esri-slider__anchor:focus .esri-slider__thumb,.esri-slider__anchor:focus .esri-slider__label{outline:inherit}.esri-slider__anchor--moving:focus .esri-slider__thumb{cursor:grabbing;border:3px solid var(--calcite-color-brand-press)}.esri-slider__anchor--moving .esri-slider__label:hover,.esri-slider__anchor--moving .esri-slider__label--interactive:hover{cursor:grabbing}.esri-slider__thumb{box-sizing:border-box;z-index:1;touch-action:none;background-color:var(--calcite-color-foreground-2);border:2px solid var(--calcite-color-brand);border-radius:16px;width:16px;height:16px;transition:all .125s ease-in-out;position:absolute;top:-7px;left:-7px}.esri-slider__thumb:hover{cursor:grab;border-width:3px;border-color:var(--calcite-color-brand-press);width:19.2px;height:19.2px;top:-8.6px;left:-8.6px}.esri-slider__label{min-width:80px;line-height:var(--calcite-font-line-height-fixed-xl);position:absolute}.esri-slider__label:hover{cursor:grab}.esri-slider__label--interactive:hover,.esri-slider__max--interactive:hover,.esri-slider__min--interactive:hover{cursor:pointer;text-decoration:underline}.esri-slider__label-input{z-index:1;width:100%;position:relative}.esri-slider__extra-content{display:inline-block}.esri-slider__max,.esri-slider__min{text-align:center;justify-content:center;align-items:center;height:22px;line-height:var(--calcite-font-line-height-fixed-xl);display:flex}.esri-slider__max--interactive:hover,.esri-slider__min--interactive:hover{background-color:var(--calcite-color-foreground-2)}.esri-slider__range-input{text-align:center;width:100%;padding:1px 0}.esri-slider__ticks{z-index:0;height:100%;display:inline-block;position:absolute}.esri-slider__tick{background:var(--calcite-color-foreground-1);position:absolute}.esri-slider__tick-label{width:max-content;position:absolute}:dir(rtl) .esri-slider__label,:dir(rtl) .esri-slider__max,:dir(rtl) .esri-slider__min,:dir(rtl) .esri-slider__tick-label{direction:rtl;unicode-bidi:plaintext}:dir(rtl) .esri-slider__range-input,:dir(rtl) .esri-slider__label-input{unicode-bidi:plaintext}.esri-time-slider{min-width:375px;box-shadow:0 1px 2px #0000004d}.esri-time-slider__layout--wide .esri-time-slider__row{height:88px}.esri-time-slider__layout--wide .esri-time-slider__playback-controls{direction:ltr;flex:auto;display:flex}.esri-time-slider__layout--wide .esri-time-slider__play{width:64px}.esri-time-slider__layout--wide .esri-time-slider__time-extent{flex-flow:column;justify-content:center;align-items:center;width:110px;display:flex}.esri-time-slider__layout--wide .esri-time-slider__time-extent-separator{opacity:var(--calcite-opacity-disabled);margin-top:var(--calcite-spacing-fixed-xxs);margin-bottom:var(--calcite-spacing-fixed-xs);background-color:var(--calcite-color-brand);width:75px;height:var(--calcite-size-px)}.esri-time-slider__layout--wide .esri-time-slider__time-extent,.esri-time-slider__layout--wide .esri-time-slider__min,.esri-time-slider__layout--wide .esri-time-slider__previous,.esri-time-slider__layout--wide .esri-time-slider__actions{border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-1)}.esri-time-slider__layout--wide .esri-time-slider__min,.esri-time-slider__layout--wide .esri-time-slider__max{align-items:center;width:110px}.esri-time-slider__layout--wide .esri-time-slider__slider{flex:auto;overflow:hidden}.esri-time-slider__layout--wide .esri-time-slider__previous,.esri-time-slider__layout--wide .esri-time-slider__next{width:42px}.esri-time-slider__layout--wide .esri-time-slider__warning{flex-flow:column}.esri-time-slider__layout--compact.esri-time-slider--has-actions .esri-time-slider__time-extent{padding-inline-start:48px}.esri-time-slider__layout--compact .esri-time-slider__row:first-child,.esri-time-slider__layout--compact .esri-time-slider__row:nth-child(3){height:36px}.esri-time-slider__layout--compact .esri-time-slider__row:nth-child(2){height:88px;overflow:hidden}.esri-time-slider__layout--compact .esri-time-slider__play{width:35px}.esri-time-slider__layout--compact .esri-time-slider__time-extent{flex-flow:row;flex:auto;justify-content:center;align-items:center;display:flex}.esri-time-slider__layout--compact .esri-time-slider__time-extent-separator{opacity:var(--calcite-opacity-disabled);background-color:var(--calcite-color-brand);width:var(--calcite-size-px);height:var(--calcite-spacing-xxl);margin-inline:7px}.esri-time-slider__layout--compact .esri-time-slider__min,.esri-time-slider__layout--compact .esri-time-slider__max,.esri-time-slider__layout--compact .esri-time-slider__slider{flex:auto}.esri-time-slider__layout--compact .esri-time-slider__min{align-items:flex-start;margin-inline-start:35px}.esri-time-slider__layout--compact .esri-time-slider__max{align-items:flex-end;margin-inline-end:35px}.esri-time-slider__layout--compact .esri-time-slider__previous,.esri-time-slider__layout--compact .esri-time-slider__next{width:35px}.esri-time-slider__layout--compact .esri-time-slider__warning{flex-flow:row}.esri-time-slider__layout--compact .esri-time-slider__warning-label{margin-inline-start:var(--calcite-spacing-xs)}.esri-time-slider__row{display:flex}.esri-time-slider__mode--instant .esri-slider__segment-0,.esri-time-slider__mode--instant .esri-slider__segment-1{background-color:var(--calcite-color-border-input)}.esri-time-slider__mode--time-window .esri-slider__segment-1{background-color:var(--calcite-color-brand);height:var(--calcite-spacing-xs);margin-top:-1px}.esri-time-slider__mode--time-window .esri-slider__segment-0,.esri-time-slider__mode--time-window .esri-slider__segment-2{background-color:var(--calcite-color-border-input)}.esri-time-slider__mode--time-window.esri-time-slider--out-of-bounds .esri-slider__segment-1{background-color:var(--calcite-color-status-danger)}.esri-time-slider__mode--cumulative-from-start .esri-slider__segment-0{background-color:var(--calcite-color-brand);height:var(--calcite-spacing-xs);margin-top:-1px}.esri-time-slider__mode--cumulative-from-start .esri-slider__segment-1{background-color:var(--calcite-color-border-input)}.esri-time-slider__mode--cumulative-from-start.esri-time-slider--out-of-bounds .esri-slider__segment-0{background-color:var(--calcite-color-status-danger)}.esri-time-slider__mode--cumulative-from-end .esri-slider__segment-0{background-color:var(--calcite-color-border-input)}.esri-time-slider__mode--cumulative-from-end .esri-slider__segment-1{background-color:var(--calcite-color-brand);height:var(--calcite-spacing-xs);margin-top:-1px}.esri-time-slider__mode--cumulative-from-end.esri-time-slider--out-of-bounds .esri-slider__segment-1{background-color:var(--calcite-color-status-danger)}.esri-time-slider__time-extent-start-group,.esri-time-slider__time-extent-end-group{flex-flow:column;align-items:center;display:flex}.esri-time-slider__time-extent-start-date,.esri-time-slider__time-extent-start-time,.esri-time-slider__time-extent-end-date,.esri-time-slider__time-extent-end-time{--calcite-label-margin-bottom: 0;--calcite-label-text-color: var(--calcite-color-brand)}.esri-time-slider__time-extent-start-date,.esri-time-slider__time-extent-end-date{font-weight:var(--calcite-font-weight-bold)}.esri-time-slider__min,.esri-time-slider__max{flex-flow:column;justify-content:center;display:flex}.esri-time-slider__min-date,.esri-time-slider__max-date{font-weight:var(--calcite-font-weight-bold)}.esri-time-slider__min-date,.esri-time-slider__min-time,.esri-time-slider__max-date,.esri-time-slider__max-time{--calcite-label-margin-bottom: 0}.esri-time-slider__slider{background-color:var(--calcite-color-foreground-2);padding:0 40px}.esri-time-slider__slider .esri-slider{background-color:var(--calcite-color-foreground-2);margin-top:-19px}.esri-time-slider__slider .esri-slider__thumb{border-width:3px;top:-6px}.esri-time-slider__slider .esri-slider__tick-label{white-space:nowrap;font-size:var(--calcite-font-size--2);margin-top:23px}.esri-time-slider__slider .esri-slider__tick{background:var(--calcite-color-border-input);width:1px}.esri-time-slider__slider .esri-slider__tick.minorTick{height:4px}.esri-time-slider__slider .esri-slider__tick.majorTick{height:var(--calcite-spacing-sm)}.esri-time-slider__slider .esri-slider__ticks{margin-top:var(--calcite-spacing-xl)}.esri-time-slider__slider .esri-slider__track{height:var(--calcite-spacing-xxs)}.esri-time-slider__warning{justify-content:center;align-items:center;display:flex}.esri-time-slider__warning-label{--calcite-label-margin-bottom: 0;--calcite-label-text-color: var(--calcite-color-status-danger)}.esri-time-slider__warning-icon{--calcite-icon-color: var(--calcite-color-status-danger)}.esri-time-slider--out-of-bounds .esri-slider__thumb{border-color:var(--calcite-color-status-danger)}.esri-time-slider--disabled .esri-time-slider__max-date,.esri-time-slider--disabled .esri-time-slider__max-time,.esri-time-slider--disabled .esri-time-slider__min-date,.esri-time-slider--disabled .esri-time-slider__min-time,.esri-time-slider--disabled .esri-time-slider__time-extent-end-date,.esri-time-slider--disabled .esri-time-slider__time-extent-end-time,.esri-time-slider--disabled .esri-time-slider__time-extent-separator,.esri-time-slider--disabled .esri-time-slider__time-extent-start-date,.esri-time-slider--disabled .esri-time-slider__time-extent-start-time{opacity:var(--calcite-opacity-disabled)}:dir(rtl) .esri-time-slider__max-date,:dir(rtl) .esri-time-slider__max-time,:dir(rtl) .esri-time-slider__min-date,:dir(rtl) .esri-time-slider__min-time,:dir(rtl) .esri-time-slider__time-extent-end-date,:dir(rtl) .esri-time-slider__time-extent-end-time,:dir(rtl) .esri-time-slider__time-extent-start-date,:dir(rtl) .esri-time-slider__time-extent-start-time{direction:rtl}:dir(rtl) .esri-time-slider__layout--compact .esri-time-slider__row:nth-child(3),:dir(rtl) .esri-time-slider__layout--wide .esri-time-slider__playback-controls{direction:ltr}:dir(rtl) .esri-time-slider__layout--wide.esri-time-slider--has-actions .esri-time-slider__actions{border-left:none}:dir(rtl) .esri-time-slider__layout--wide.esri-time-slider--has-actions .esri-time-slider__play{border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-1)}`, m = l(o);
-class _ extends s {
+import { c as W } from "../../chunks/runtime.js";
+import { keyed as y } from "lit/directives/keyed.js";
+import { usePropertyChange as L } from "@arcgis/lumina/controllers";
+import { LitElement as I, createEvent as C, nothing as $, safeClassMap as B } from "@arcgis/lumina";
+import { classes as N } from "@arcgis/toolkit/dom";
+import { u as H } from "../../chunks/useT9n.js";
+import { css as q, html as o } from "lit";
+import p from "@arcgis/core/time/TimeExtent.js";
+import D from "@arcgis/core/time/TimeInterval.js";
+import G from "@arcgis/core/core/Accessor.js";
+import { property as v, subclass as Y } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { log as A } from "@arcgis/toolkit/log";
+import { u as J } from "../../chunks/time-utils.js";
+import { offsetDate as R, truncateDate as K } from "@arcgis/core/core/timeUtils.js";
+import { watch as w, whenOnce as Q } from "@arcgis/core/core/reactiveUtils.js";
+import { convertDateFormatToIntlOptions as M, formatDate as k } from "@arcgis/core/intl.js";
+import U from "@arcgis/core/webdoc/Widgets.js";
+import X from "@arcgis/core/webdoc/widgets/TimeSlider.js";
+import { d as tt, i as et } from "../../chunks/async-utils.js";
+import { m as it } from "../../chunks/useViewModel.js";
+import { createRef as _, ref as T } from "lit/directives/ref.js";
+import { m as nt } from "../../chunks/handle.js";
+import "@arcgis/core/core/Collection.js";
+const st = q`:host{background-color:var(--calcite-color-foreground-1);box-sizing:border-box;color:var(--calcite-color-text-2);display:flex;flex-direction:column;flex-wrap:nowrap;font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-tight);overflow:visible;transition:max-height .25s ease-in-out}.wide{min-width:800px;.max,.min,.time-extent{align-items:center;width:calc(var(--calcite-size-lg) * 2.5)}.play{flex:0 0 var(--calcite-size-xxl)}.playback-controls{direction:ltr;display:flex;flex:auto}.previous,.next{flex:0 0 var(--calcite-size-lg)}.row{display:flex;height:calc(var(--calcite-size-lg) * 2)}.slider{flex:1;margin-top:calc(var(--calcite-size-fixed-md) * -1)}.time-extent{display:flex;flex-flow:column nowrap;flex:0 0 auto;font-size:var(--calcite-font-size-sm);justify-content:center;line-height:var(--calcite-font-line-height-relative-tight)}.time-extent-separator{height:var(--calcite-size-px);margin-bottom:var(--calcite-spacing-fixed-xs);margin-top:var(--calcite-spacing-fixed-xxs);opacity:var(--calcite-opacity-disabled);width:75%}.warning{flex-flow:column nowrap}.action-menu,.actions,.min,.previous,.time-extent{border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-1)}}.compact{min-width:375px;.action-menu{margin-inline-start:auto}.max,.min{flex:1 0 auto}.max{align-items:flex-end;margin-inline-end:var(--calcite-size-md)}.min{align-items:flex-start;margin-inline-start:var(--calcite-size-md)}.play,.previous,.next{flex:0 0 var(--calcite-size-md)}.row1,.row2,.row3{display:flex}.row1,.row3{height:calc(var(--calcite-size-md) * 1.1)}.row1{align-items:center;position:relative}.row2{height:var(--calcite-size-xxl)}.row3{direction:ltr}.slider{margin-top:calc(var(--calcite-spacing-fixed-sm) * -1)}.time-extent{align-items:center;display:flex;flex-flow:row nowrap;flex:auto;justify-content:center;left:50%;position:absolute;transform:translate(-50%);white-space:nowrap}.time-extent-separator{height:var(--calcite-size-sm);margin-inline:var(--calcite-spacing-fixed-sm);opacity:var(--calcite-opacity-disabled);width:var(--calcite-size-px)}.warning{flex-flow:row nowrap}.warning-label{margin-inline-start:var(--calcite-spacing-xs)}}.max,.min{display:flex;flex-flow:column nowrap;justify-content:center}.max-date,.min-date,.max-time,.min-time{--calcite-label-margin-bottom: 0}.max-date,.min-date{font-weight:var(--calcite-font-weight-bold)}.out-of-range{.slider{--calcite-color-border-2: var(--calcite-color-status-danger)}.time-extent-end-date,.time-extent-start-date,.time-extent-end-time,.time-extent-start-time{--calcite-label-text-color: var(--calcite-color-status-danger)}.time-extent-separator{background-color:var(--calcite-color-status-danger)}}.slider{--labels-container-width: 100%}.slider-container{display:flex;background-color:var(--calcite-color-foreground-2);flex:1}.slider-parent{display:flex;flex:1;margin-inline:var(--calcite-spacing-fixed-xxxl)}.slider-ticks-container{flex:1;position:relative;width:100%}.slider-custom-ticks,.slider-major-ticks,.slider-minor-ticks{inset:0;position:absolute}.slider-minor-ticks{--arcgis-ticks-tick-length: var(--calcite-size-fixed-xxs)}.time-extent-end-group,.time-extent-start-group{align-items:center;display:flex;flex-flow:column nowrap}.time-extent-end-date,.time-extent-start-date,.time-extent-end-time,.time-extent-start-time{--calcite-label-margin-bottom: 0;--calcite-label-text-color: var(--calcite-color-brand)}.time-extent-end-date,.time-extent-start-date{font-weight:var(--calcite-font-weight-bold)}.time-extent-separator{background-color:var(--calcite-color-brand)}.warning{align-items:center;display:flex;justify-content:center}.warning-label{--calcite-label-margin-bottom: 0;--calcite-label-text-color: var(--calcite-color-status-danger)}.warning-icon{--calcite-icon-color: var(--calcite-color-status-danger)}:dir(rtl){.max-date,.max-time,.min-date,.min-time,.slider,.time-extent-end-date,.time-extent-end-time,.time-extent-start-date,.time-extent-start-time{direction:rtl}}`, s = (e, t, i) => ({ minorTick: e, majorTick: t, majorTickFormat: i }), a = {
+  sf: { second: "numeric", fractionalSecondDigits: 3 },
+  s: { second: "numeric" },
+  ms: { minute: "numeric", second: "numeric" },
+  mi: { minute: "numeric" },
+  hm: { hour: "numeric", minute: "numeric" },
+  dm: { day: "numeric", month: "short" },
+  m: { month: "short" },
+  my: { month: "short", year: "numeric" },
+  y: { year: "numeric" }
+}, at = [
+  s({ value: 1, unit: "milliseconds" }, { value: 20, unit: "milliseconds" }, a.sf),
+  s({ value: 2, unit: "milliseconds" }, { value: 50, unit: "milliseconds" }, a.sf),
+  s({ value: 5, unit: "milliseconds" }, { value: 100, unit: "milliseconds" }, a.sf),
+  s({ value: 10, unit: "milliseconds" }, { value: 200, unit: "milliseconds" }, a.sf),
+  s({ value: 20, unit: "milliseconds" }, { value: 500, unit: "milliseconds" }, a.sf),
+  s({ value: 50, unit: "milliseconds" }, { value: 1, unit: "seconds" }, a.s),
+  s({ value: 100, unit: "milliseconds" }, { value: 2, unit: "seconds" }, a.s),
+  s({ value: 200, unit: "milliseconds" }, { value: 5, unit: "seconds" }, a.s),
+  s({ value: 500, unit: "milliseconds" }, { value: 10, unit: "seconds" }, a.s),
+  s({ value: 1, unit: "seconds" }, { value: 20, unit: "seconds" }, a.ms),
+  s({ value: 2, unit: "seconds" }, { value: 30, unit: "seconds" }, a.ms),
+  s({ value: 5, unit: "seconds" }, { value: 1, unit: "minutes" }, a.mi),
+  s({ value: 10, unit: "seconds" }, { value: 2, unit: "minutes" }, a.mi),
+  s({ value: 20, unit: "seconds" }, { value: 5, unit: "minutes" }, a.mi),
+  s({ value: 40, unit: "seconds" }, { value: 10, unit: "minutes" }, a.mi),
+  s({ value: 1, unit: "minutes" }, { value: 30, unit: "minutes" }, a.hm),
+  s({ value: 2, unit: "minutes" }, { value: 1, unit: "hours" }, a.hm),
+  s({ value: 5, unit: "minutes" }, { value: 2, unit: "hours" }, a.hm),
+  s({ value: 10, unit: "minutes" }, { value: 4, unit: "hours" }, a.hm),
+  s({ value: 20, unit: "minutes" }, { value: 8, unit: "hours" }, a.hm),
+  s({ value: 40, unit: "minutes" }, { value: 12, unit: "hours" }, a.hm),
+  s({ value: 1, unit: "hours" }, { value: 1, unit: "days" }, a.dm),
+  s({ value: 2, unit: "hours" }, { value: 2, unit: "days" }, a.dm),
+  s({ value: 5, unit: "hours" }, { value: 4, unit: "days" }, a.dm),
+  s({ value: 10, unit: "hours" }, { value: 10, unit: "days" }, a.dm),
+  s({ value: 20, unit: "hours" }, { value: 15, unit: "days" }, a.dm),
+  s({ value: 1, unit: "days" }, { value: 20, unit: "days" }, a.dm),
+  s({ value: 2, unit: "days" }, { value: 1, unit: "months" }, a.m),
+  s({ value: 5, unit: "days" }, { value: 3, unit: "months" }, a.m),
+  s({ value: 10, unit: "days" }, { value: 6, unit: "months" }, a.my),
+  s({ value: 20, unit: "days" }, { value: 1, unit: "years" }, a.y),
+  s({ value: 1, unit: "months" }, { value: 2, unit: "years" }, a.y),
+  s({ value: 2, unit: "months" }, { value: 4, unit: "years" }, a.y),
+  s({ value: 5, unit: "months" }, { value: 10, unit: "years" }, a.y),
+  s({ value: 1, unit: "years" }, { value: 20, unit: "years" }, a.y),
+  s({ value: 2, unit: "years" }, { value: 50, unit: "years" }, a.y),
+  s({ value: 5, unit: "years" }, { value: 100, unit: "years" }, a.y),
+  s({ value: 10, unit: "years" }, { value: 200, unit: "years" }, a.y),
+  s({ value: 20, unit: "years" }, { value: 500, unit: "years" }, a.y),
+  s({ value: 50, unit: "years" }, { value: 1e3, unit: "years" }, a.y),
+  s({ value: 1, unit: "centuries" }, { value: 20, unit: "centuries" }, a.y),
+  s({ value: 2, unit: "centuries" }, { value: 50, unit: "centuries" }, a.y),
+  s({ value: 5, unit: "centuries" }, { value: 100, unit: "centuries" }, a.y),
+  s({ value: 10, unit: "centuries" }, { value: 200, unit: "centuries" }, a.y),
+  s({ value: 20, unit: "centuries" }, { value: 500, unit: "centuries" }, a.y),
+  s({ value: 50, unit: "centuries" }, { value: 1e3, unit: "centuries" }, a.y),
+  s({ value: 100, unit: "centuries" }, { value: 2e3, unit: "centuries" }, a.y),
+  s({ value: 200, unit: "centuries" }, { value: 5e3, unit: "centuries" }, a.y),
+  s({ value: 500, unit: "centuries" }, { value: 1e4, unit: "centuries" }, a.y),
+  s({ value: 1e3, unit: "centuries" }, { value: 2e4, unit: "centuries" }, a.y)
+];
+function rt(e) {
+  return at.map(({ minorTick: t, majorTick: i, majorTickFormat: n }, r) => {
+    const l = new D(t), m = new D(i), c = l.toMilliseconds(), h = {
+      ...n,
+      timeZone: e
+    };
+    return { minor: l, major: m, duration: c, format: h, index: r };
+  });
+}
+function lt(e) {
+  return e === "position" ? "value" : e;
+}
+const E = { count: 10 };
+function ot(e) {
+  return V(e) && e.interval.unit === J ? (A(
+    "warn",
+    "arcgis-time-slider",
+    'A stop interval with an "unknown" time unit is not supported. The default stop definition will be used.'
+  ), E) : e;
+}
+function O(e) {
+  return !!e && "count" in e;
+}
+function z(e) {
+  return !!e && "dates" in e;
+}
+function V(e) {
+  return !!e && "interval" in e;
+}
+const P = 1e4;
+function F(e, t) {
+  const { start: i, end: n } = e;
+  if (!i || !n || i.getTime() > n.getTime() || t <= 0)
+    return [];
+  if (t > P)
+    return F(e, E.count);
+  const r = [], l = i.getTime(), c = n.getTime() - l;
+  for (let h = 0; h <= t; h++)
+    r.push(new Date(l + h / t * c));
+  return r;
+}
+function ct(e, t) {
+  const { start: i, end: n } = e, { value: r, unit: l } = t;
+  if (!i || !n || i.getTime() > n.getTime() || r <= 0)
+    return [];
+  const m = n.getTime() - i.getTime(), c = t.toMilliseconds();
+  if (c <= 0 || m / c > P)
+    return F(e, E.count);
+  const h = [];
+  let x = i;
+  for (; x.getTime() <= n.getTime(); )
+    h.push(new Date(x)), x = R(x, r, l);
+  return h;
+}
+function S(e, t) {
+  const [i, n] = e;
+  if (!i)
+    return null;
+  switch (t) {
+    case "time-window":
+      return n ? new p({ start: i, end: n }) : null;
+    case "cumulative-from-start":
+      return new p({ start: null, end: i });
+    case "cumulative-from-end":
+      return new p({ start: i, end: null });
+    case "instant":
+      return new p({ start: i, end: i });
+  }
+}
+function mt(e, t, i, n) {
+  const { value: r, unit: l } = i;
+  if (e.getTime() > t.getTime() || r <= 0 || l === "unknown")
+    return [];
+  let m = K(e, i, n);
+  const c = [];
+  for (; m.getTime() <= t.getTime(); )
+    m.getTime() >= e.getTime() && c.push(m), m = R(m, r, l, n);
+  return c;
+}
+var ut = Object.defineProperty, dt = Object.getOwnPropertyDescriptor, j = (e) => {
+  throw TypeError(e);
+}, d = (e, t, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? dt(t, i) : t, l = e.length - 1, m; l >= 0; l--)
+    (m = e[l]) && (r = (n ? m(t, i, r) : m(r)) || r);
+  return n && r && ut(t, i, r), r;
+}, Z = (e, t, i) => t.has(e) || j("Cannot " + i), ht = (e, t, i) => (Z(e, t, "read from private field"), t.get(e)), vt = (e, t, i) => t.has(e) ? j("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), ft = (e, t, i, n) => (Z(e, t, "write to private field"), t.set(e, i), i), b;
+let u = class extends G {
+  constructor() {
+    super(...arguments), vt(this, b, !1), this.loop = !1, this.mode = "time-window", this.stops = E;
+  }
+  get _adjustedMajorTickFormat() {
+    const { era: e, timeZone: t } = this;
+    return {
+      ...this.majorTickFormat,
+      era: this.majorTickFormat?.year ? e : void 0,
+      timeZone: t
+    };
+  }
+  get _dateFormat() {
+    const { era: e, timeZone: t } = this;
+    return { ...M("short-date"), era: e, timeZone: t };
+  }
+  get _effectiveStopValues() {
+    return this.effectiveStops?.map((e) => e.getTime()) ?? null;
+  }
+  get _thumbPositions() {
+    if (!this.timeExtent || this.timeExtent.isAllTime || this.timeExtent.isEmpty)
+      return null;
+    const { start: e, end: t } = this.timeExtent;
+    switch (this.mode) {
+      case "cumulative-from-end":
+      case "instant":
+        return e ? [e.getTime()] : null;
+      case "cumulative-from-start":
+        return t ? [t.getTime()] : null;
+      case "time-window":
+        return e && t ? [e.getTime(), t.getTime()] : null;
+    }
+  }
+  get _timeFormat() {
+    const { timeZone: e } = this;
+    return { ...M("long-time"), timeZone: e };
+  }
+  get effectiveStops() {
+    const { fullTimeExtent: e, stops: t } = this;
+    if (!t)
+      return [];
+    if (z(t)) {
+      const { dates: n } = t;
+      if (!n?.length)
+        return null;
+      const r = n.sort((g, f) => g.getTime() - f.getTime());
+      if (!e?.start || !e?.end)
+        return r;
+      const { start: l, end: m } = e, c = l.getTime(), h = m.getTime();
+      return r.filter((g) => {
+        const f = g.getTime();
+        return f >= c && f <= h;
+      });
+    }
+    const i = t.timeExtent ?? e;
+    return i ? O(t) ? F(i, t.count) : ct(i, t.interval) : null;
+  }
+  get era() {
+    return (this.fullTimeExtent?.start?.getFullYear() ?? 0) < 0 ? "short" : void 0;
+  }
+  get majorTickFormatter() {
+    return (e) => k(e, this._adjustedMajorTickFormat);
+  }
+  set playRate(e) {
+    e <= 0 || e > 1e3 * 60 * 60 || (this.state === "playing" && this._startAnimation(), this._set("playRate", e));
+  }
+  get state() {
+    return this.fullTimeExtent ? this._animationController ? "playing" : "ready" : "disabled";
+  }
+  get tickFormats() {
+    return rt(this.timeZone);
+  }
+  get timeZone() {
+    return this._userTimeZone ?? this.viewTimeZone ?? "system";
+  }
+  set timeZone(e) {
+    this._userTimeZone = e ?? void 0;
+  }
+  get viewTimeZone() {
+    return this.view?.type === "2d" ? this.view.timeZone : void 0;
+  }
+  //#endregion
+  //#region Public Methods
+  destroy() {
+    this.view?.unregisterComponent(this), this._stopAnimation();
+  }
+  initialize() {
+    this.addHandles([
+      w(
+        () => this.effectiveStops,
+        (e) => {
+          e && (this.timeExtent ??= S(e, this.mode));
+        },
+        { initial: !0 }
+      ),
+      w(
+        () => this.view,
+        (e, t) => {
+          t?.unregisterComponent(this), e?.registerComponent(this);
+        },
+        { initial: !0, sync: !0 }
+      ),
+      w(
+        () => this.timeExtent,
+        (e) => {
+          if (!this.view)
+            return;
+          const t = this.view.timeExtent;
+          (!e || e.isAllTime) && (!t || t.isAllTime) || t && e?.equals(t) || (this.view.timeExtent = e);
+        },
+        { initial: !0 }
+      ),
+      w(
+        () => this.view?.timeExtent,
+        (e) => {
+          if (!ht(this, b)) {
+            ft(this, b, !0);
+            return;
+          }
+          (!e || e.isAllTime) && (!this.timeExtent || this.timeExtent.isAllTime) || this.timeExtent && e?.equals(this.timeExtent) || (this.timeExtent = e);
+        }
+      ),
+      w(
+        () => this.mode,
+        (e) => {
+          this.effectiveStops && (this.timeExtent = S(this.effectiveStops, e));
+        }
+      )
+    ]);
+  }
+  formatDate(e) {
+    return k(e, this._dateFormat);
+  }
+  formatTime(e) {
+    return k(e, this._timeFormat);
+  }
+  formatTick(e, t) {
+    return new Intl.DateTimeFormat(this.timeZone, t).format(new Date(e));
+  }
+  getTickValues(e) {
+    const { fullTimeExtent: t, timeZone: i } = this;
+    if (!t)
+      return [];
+    const { start: n, end: r } = t;
+    return !n || !r ? [] : mt(n, r, e, i).map((m) => m.getTime());
+  }
+  next() {
+    this._step({ forward: !0, allowRestart: !1 });
+  }
+  play() {
+    this._startAnimation();
+  }
+  previous() {
+    this._step({ forward: !1, allowRestart: !1 });
+  }
+  stop() {
+    this._stopAnimation();
+  }
+  updateWebDocument(e) {
+    const t = new X({
+      currentTimeExtent: this.timeExtent,
+      fullTimeExtent: this.fullTimeExtent,
+      loop: this.loop,
+      numStops: O(this.stops) ? this.stops.count : null,
+      numThumbs: this.mode === "time-window" ? 2 : 1,
+      stopDelay: this.playRate,
+      stopInterval: V(this.stops) ? this.stops.interval : null,
+      stops: z(this.stops) ? this.stops.dates : null
+    });
+    e.widgets ??= new U(), e.widgets.timeSlider = t;
+  }
+  //#endregion
+  //#region Private Methods
+  async _animate() {
+    try {
+      const { view: e } = this, t = this._animationController?.signal;
+      await Promise.all([tt(this.playRate, t), e && Q(() => !e.updating, t)]);
+    } catch (e) {
+      et(e) || A("error", "arcgis-time-slider", "animation error", { detail: { error: e } }), this._animationController = void 0;
+      return;
+    }
+    this._step({ forward: !0, allowRestart: !1 }), this._animationController && this._animate();
+  }
+  _startAnimation() {
+    this._stopAnimation(), this._animationController = new AbortController(), this._step({ forward: !0, allowRestart: !0 }), this._animate();
+  }
+  _step({ forward: e, allowRestart: t }) {
+    const i = this._thumbPositions, n = this._effectiveStopValues;
+    if (!i || !n)
+      return;
+    const r = i.map((c) => {
+      const h = n.indexOf(c);
+      if (h !== -1)
+        return h;
+      const x = n.reduce(
+        (g, f) => Math.abs(f - c) < Math.abs(g - c) ? f : g
+      );
+      return n.indexOf(x);
+    }), l = r.map((c) => c += e ? 1 : -1);
+    if (l.some((c) => c < 0 || c > n.length - 1))
+      if (this.loop || t) {
+        const c = Math.min(...r), h = Math.max(...r), g = (e ? r.map((f) => f - c) : r.map((f) => f + (n.length - 1 - h))).map((f) => n[f]);
+        this.timeExtent = this._toTimeExtent(g);
+      } else
+        this.state === "playing" && this.stop();
+    else {
+      const c = l.map((h) => n[h]);
+      this.timeExtent = this._toTimeExtent(c);
+    }
+  }
+  _stopAnimation() {
+    this._animationController?.abort(), this._animationController = void 0;
+  }
+  /**
+   * This method converts thumb position value(s) into a TimeExtent.
+   */
+  _toTimeExtent(e) {
+    if (!e)
+      return null;
+    const t = [...e].sort((i, n) => i - n).map((i) => new Date(i));
+    return S(t, this.mode);
+  }
+  //#endregion
+};
+b = /* @__PURE__ */ new WeakMap();
+d([
+  v()
+], u.prototype, "_adjustedMajorTickFormat", 1);
+d([
+  v()
+], u.prototype, "_animationController", 2);
+d([
+  v()
+], u.prototype, "_dateFormat", 1);
+d([
+  v()
+], u.prototype, "_effectiveStopValues", 1);
+d([
+  v()
+], u.prototype, "_thumbPositions", 1);
+d([
+  v()
+], u.prototype, "_timeFormat", 1);
+d([
+  v()
+], u.prototype, "_userTimeZone", 2);
+d([
+  v()
+], u.prototype, "effectiveStops", 1);
+d([
+  v()
+], u.prototype, "era", 1);
+d([
+  v({ type: p })
+], u.prototype, "fullTimeExtent", 2);
+d([
+  v()
+], u.prototype, "loop", 2);
+d([
+  v()
+], u.prototype, "majorTickFormat", 2);
+d([
+  v()
+], u.prototype, "majorTickFormatter", 1);
+d([
+  v()
+], u.prototype, "mode", 2);
+d([
+  v({ value: 1e3 })
+], u.prototype, "playRate", 1);
+d([
+  v()
+], u.prototype, "state", 1);
+d([
+  v({ cast: ot })
+], u.prototype, "stops", 2);
+d([
+  v()
+], u.prototype, "tickFormats", 1);
+d([
+  v({ type: p })
+], u.prototype, "timeExtent", 2);
+d([
+  v()
+], u.prototype, "timeZone", 1);
+d([
+  v()
+], u.prototype, "view", 2);
+d([
+  v()
+], u.prototype, "viewTimeZone", 1);
+u = d([
+  Y("components.time-slider.TimeSliderViewModel")
+], u);
+const pt = it(u);
+class xt extends I {
   constructor() {
-    super(...arguments), this.widget = m(this), this.viewModel = this.widget.viewModel, this.view = this.widget.view, this.actions = this.widget.actions, this.autoDestroyDisabled = !1, this.disabled = this.widget.disabled, this.effectiveStops = this.widget.effectiveStops, this.fullTimeExtent = this.widget.fullTimeExtent, this.icon = this.widget.icon, this.label = this.widget.label, this.layout = this.widget.layout, this.loop = this.widget.loop, this.mode = this.widget.mode, this.playRate = this.widget.playRate, this.state = this.viewModel.state, this.stops = this.widget.stops, this.tickConfigs = this.widget.tickConfigs, this.timeExtent = this.widget.timeExtent, this.timeVisible = this.widget.timeVisible, this.timeZone = this.widget.timeZone, this.arcgisPropertyChange = r()("effectiveStops", "fullTimeExtent", "timeExtent", "state"), this.arcgisReady = a(), this.arcgisTriggerAction = t(() => this.widget, "trigger-action");
+    super(...arguments), this._messages = H({ blocking: !0 }), this._resizeObserver = new ResizeObserver((t) => {
+      const i = t.at(0)?.contentRect.width ?? 0;
+      i && (this._sliderContainerWidth = i);
+    }), this.#e = _(), this.#i = _(), this.#o = 3.5, this.#c = 858, this.#l = _(), this.#n = _(), this.#t = pt(this), this.autoDestroyDisabled = !1, this.disabled = !1, this.effectiveStops = this.#t.effectiveStops, this.fullTimeExtent = this.#t.fullTimeExtent, this.icon = "clock", this.layout = "auto", this.loop = this.#t.loop, this.mode = this.#t.mode, this.playRate = this.#t.playRate, this.state = this.#t.state, this.stops = this.#t.stops, this.timeExtent = this.#t.timeExtent, this.timeVisible = !1, this.timeZone = this.#t.timeZone, this.view = this.#t.view, this.arcgisPropertyChange = L()("state"), this.arcgisReady = C(), this.arcgisTriggerAction = C();
   }
   static {
-    this.properties = { view: 0, actions: 0, autoDestroyDisabled: 5, disabled: 7, effectiveStops: 32, fullTimeExtent: 0, icon: 1, label: 1, layout: 1, loop: 5, mode: 1, playRate: 9, referenceElement: 1, state: 32, stops: 0, tickConfigs: 0, timeExtent: 0, timeVisible: 5, timeZone: 1 };
+    this.properties = { _effectiveStopsEpoch: 16, _interactive: 16, _isOutOfRange: 16, _sliderContainerWidth: 16, _sliderFillPlacement: 16, actions: 0, autoDestroyDisabled: 5, disabled: 7, effectiveStops: 32, fullTimeExtent: 0, icon: 1, label: 1, labelFormatFunction: 0, layout: 1, loop: 5, messageOverrides: 0, mode: 1, playRate: 9, referenceElement: 1, state: 32, stops: 0, tickConfigs: 0, timeExtent: 0, timeVisible: 5, timeZone: 1, view: 0 };
   }
   static {
-    this.styles = c;
+    this.styles = st;
+  }
+  #s;
+  #a;
+  #r;
+  #e;
+  #i;
+  #o;
+  #c;
+  #l;
+  #n;
+  #t;
+  get effectiveLayout() {
+    return this.layout === "auto" ? this.el.clientWidth < this.#c ? "compact" : "wide" : this.layout;
+  }
+  get _effectiveStopsEpoch() {
+    return this.effectiveStops?.map((t) => t.getTime());
+  }
+  get _interactive() {
+    return !(this.disabled || this.state === "disabled");
   }
-  async applyTimeSliderSettings(e) {
-    this.widget?.set(e);
+  get _isOutOfRange() {
+    const { timeExtent: t, fullTimeExtent: i } = this, { start: n, end: r } = i ?? {};
+    if (!n || !r || !t || t.isAllTime || t.isEmpty)
+      return !0;
+    const { start: l, end: m } = t ?? {}, c = l != null && (l < n || l > r), h = m != null && (m > r || m < n);
+    return c || h;
+  }
+  get _sliderFillPlacement() {
+    switch (this.mode) {
+      case "cumulative-from-end":
+        return "end";
+      case "cumulative-from-start":
+        return "start";
+      case "instant":
+        return "none";
+      case "time-window":
+        return;
+    }
+  }
+  async applyTimeSliderSettings(t) {
+    this.#t.set(t);
   }
   async destroy() {
     await this.manager.destroy();
   }
   async next() {
-    this.widget?.next();
+    this.#t.next();
   }
   async play() {
-    this.widget?.play();
+    this.#t.play();
   }
   async previous() {
-    this.widget?.previous();
+    this.#t.previous();
   }
   async stop() {
-    this.widget?.stop();
+    this.#t.stop();
+  }
+  async updateWebDocument(t) {
+    this.#t.updateWebDocument(t);
   }
-  async updateWebDocument(e) {
-    this.widget?.updateWebDocument(e);
+  updated(t) {
+    this.labelFormatFunction && ((t.has("labelFormatFunction") || t.has("timeExtent") || t.has("effectiveLayout")) && this.#n.value && this._formatExtent(this.#n.value), (t.has("labelFormatFunction") || t.has("fullTimeExtent") || t.has("effectiveLayout")) && (this.#e.value && this._formatMax(this.#e.value), this.#i.value && this._formatMin(this.#i.value)));
   }
   loaded() {
-    this.manager.onLifecycle(() => d(() => this.viewModel.view?.ready, () => {
-      this.timeExtent && this.viewModel.view && (this.viewModel.view.timeExtent = this.timeExtent);
-    }, { initial: !0 }));
+    this.manager.onLifecycle(() => [
+      w(() => this.#l.value, (t) => {
+        this._resizeObserver.disconnect(), t && this._resizeObserver.observe(t);
+      }, { initial: !0 }),
+      nt(() => {
+        this._resizeObserver.disconnect();
+      })
+    ]);
+  }
+  _formatExtent(t) {
+    this.labelFormatFunction?.([this.timeExtent?.start, this.timeExtent?.end], "extent", t, this.effectiveLayout);
+  }
+  _formatMin(t) {
+    this.labelFormatFunction?.(this.fullTimeExtent?.start, "min", t, this.effectiveLayout);
+  }
+  _formatMax(t) {
+    this.labelFormatFunction?.(this.fullTimeExtent?.end, "max", t, this.effectiveLayout);
+  }
+  _getTickFormat(t, i) {
+    const r = (t.end.getTime() - t.start.getTime()) / i;
+    return this.#t.tickFormats.find(({ duration: l }) => l > this.#o * r) ?? this.#t.tickFormats.at(-1);
+  }
+  _onSliderInput(t) {
+    this.timeExtent = this._toTimeExtent(t.target.values);
+  }
+  async _playOrStopClick() {
+    switch (this.state) {
+      case "disabled":
+      case "playing":
+        return await this.stop();
+      case "ready":
+        return await this.play();
+    }
+  }
+  _toTimeExtent([t, i]) {
+    switch (this.mode) {
+      case "cumulative-from-end":
+        return new p({
+          start: new Date(t),
+          end: null
+        });
+      case "cumulative-from-start":
+        return new p({
+          start: null,
+          end: new Date(t)
+        });
+      case "instant":
+        return new p({
+          start: new Date(t),
+          end: new Date(t)
+        });
+      case "time-window":
+        return new p({
+          start: new Date(t),
+          end: new Date(i)
+        });
+    }
+  }
+  render() {
+    return o`<div aria-label=${this._messages.componentLabel ?? $} class=${B(N("root", this.effectiveLayout, { "out-of-range": this._isOutOfRange }))} role=presentation>${this._renderContent()}</div>`;
+  }
+  _renderActions() {
+    return this.actions?.length ? o`<calcite-action-menu class="action-menu" .label=${this._messages.options}>${this.actions.toArray().map(({ icon: t, id: i, title: n }) => o`<calcite-action .icon=${t} id=${i ?? $} @click=${() => this.arcgisTriggerAction.emit({ action: { icon: t, id: i, title: n } })} .text=${n} text-enabled></calcite-action>`)}</calcite-action-menu>` : null;
+  }
+  _renderContent() {
+    const t = this._renderActions(), i = this._renderMaxContainer(), n = this._renderMinContainer(), r = this._renderNext(), l = this._renderPlay(), m = this._renderPrevious(), c = this._renderSliderContainer(), h = this._renderTimeExtentContainer();
+    switch (this.effectiveLayout) {
+      case "compact":
+        return o`<div class="row1">${h}${t}</div><div class="row2">${c}</div><div class="row3">${n}${m}${l}${r}${i}</div>`;
+      case "wide":
+        return o`<div class="row"><div class="playback-controls">${l}${h}${n}${c}${i}${m}${r}</div>${t}</div>`;
+    }
+  }
+  _renderCustomSliderTicks(t, i) {
+    return this.tickConfigs?.map(({ labelFormatFunction: n, mode: r, values: l, labelsVisible: m }) => o`<arcgis-ticks class="slider-custom-ticks" .labelFormatter=${n} .max=${i} .min=${t} .mode=${lt(r)} .showLabels=${m} .values=${l}></arcgis-ticks>`);
+  }
+  _renderDefaultSliderTicks(t, i) {
+    return o`<arcgis-ticks class="slider-minor-ticks" .max=${i} .min=${t} mode=value .values=${this.#r}></arcgis-ticks><arcgis-ticks class="slider-major-ticks" .labelFormatter=${this.#t.majorTickFormatter} .max=${i} .min=${t} mode=value show-labels .values=${this.#a}></arcgis-ticks>`;
+  }
+  _renderMaxContainer() {
+    return this.labelFormatFunction ? o`<div class="max" ${T(this.#e)}></div>` : o`<div class="max">${this._renderMaxContent(this.fullTimeExtent?.end)}</div>`;
+  }
+  _renderMaxContent(t) {
+    return t ? o`${this._renderMaxDate(t)}${this._renderMaxTime(t)}` : null;
+  }
+  _renderMaxDate(t) {
+    return o`<calcite-label class="max-date" scale=s>${this.#t.formatDate(t)}</calcite-label>`;
+  }
+  _renderMaxTime(t) {
+    return this.timeVisible ? o`<calcite-label class="max-time" scale=s>${this.#t.formatTime(t)}</calcite-label>` : null;
+  }
+  _renderMinContainer() {
+    return this.labelFormatFunction ? o`<div class="min" ${T(this.#i)}></div>` : o`<div class="min">${this._renderMinContent(this.fullTimeExtent?.start)}</div>`;
+  }
+  _renderMinContent(t) {
+    return t ? o`${this._renderMinDate(t)}${this._renderMinTime(t)}` : null;
+  }
+  _renderMinDate(t) {
+    return o`<calcite-label class="min-date" scale=s>${this.#t.formatDate(t)}</calcite-label>`;
+  }
+  _renderMinTime(t) {
+    return this.timeVisible ? o`<calcite-label class="min-time" scale=s>${this.#t.formatTime(t)}</calcite-label>` : null;
+  }
+  _renderPlay() {
+    return o`<calcite-button appearance=transparent class="play" .disabled=${this._isOutOfRange || !this._interactive || !this.effectiveStops?.length} .iconStart=${this.state === "playing" ? "pause" : "play"} kind=neutral .label=${this.state === "playing" ? this._messages.control.stop : this._messages.control.play} @click=${this._playOrStopClick} .scale=${this.effectiveLayout === "wide" ? "l" : "m"} width=full></calcite-button>`;
+  }
+  _renderPrevious() {
+    return o`<calcite-button appearance=transparent class="previous" .disabled=${this._isOutOfRange || !this._interactive || !this.effectiveStops?.length || this.state === "playing"} icon-start=reverse kind=neutral .label=${this._messages.pagination.previous} @click=${this.previous} .scale=${this.effectiveLayout === "wide" ? "l" : "m"} width=full></calcite-button>`;
+  }
+  _renderNext() {
+    return o`<calcite-button appearance=transparent class="next" .disabled=${this._isOutOfRange || !this._interactive || !this.effectiveStops?.length || this.state === "playing"} icon-start=forward kind=neutral .label=${this._messages.pagination.next} @click=${this.next} .scale=${this.effectiveLayout === "wide" ? "l" : "m"} width=full></calcite-button>`;
+  }
+  _renderSliderContainer() {
+    return o`<div class="slider-container"><div class="slider-parent" ${T(this.#l)}>${this._renderSliderContent()}</div></div>`;
+  }
+  _renderSliderContent() {
+    if (!this.timeExtent || !this.fullTimeExtent?.start || !this.fullTimeExtent.end || !this._sliderContainerWidth)
+      return null;
+    const t = this._getTickFormat(this.fullTimeExtent, this._sliderContainerWidth);
+    (!this.#s || !this.#r || !this.#a || this.#s !== t) && (this.#s = t, this.#r = this.#t.getTickValues(t.minor), this.#a = this.#t.getTickValues(t.major), this.#t.majorTickFormat = t.format);
+    const i = this.fullTimeExtent.start.getTime(), n = this.fullTimeExtent.end.getTime(), r = this._isOutOfRange ? [] : this._renderTimeExtentValues(), l = this._renderCustomSliderTicks(i, n) ?? this._renderDefaultSliderTicks(i, n);
+    return o`<arcgis-slider class="slider" .disabled=${!this._interactive} fill-placement=${this._sliderFillPlacement ?? $} .max=${n} .min=${i} @arcgisInput=${this._onSliderInput} precision=0 .steps=${this._effectiveStopsEpoch} .values=${r}><div slot=content-end class="slider-ticks-container">${l}</div></arcgis-slider>`;
+  }
+  _renderTimeExtentContainer() {
+    return this.labelFormatFunction ? o`<div class="time-extent" ${T(this.#n)}></div>` : o`<div class="time-extent">${this._renderTimeExtentContent()}</div>`;
+  }
+  _renderTimeExtentValues() {
+    if (!this.timeExtent)
+      return;
+    const { start: t, end: i } = this.timeExtent;
+    switch (this.mode) {
+      case "cumulative-from-end":
+      case "instant":
+        return t ? [t.getTime()] : void 0;
+      case "cumulative-from-start":
+        return i ? [i.getTime()] : void 0;
+      case "time-window":
+        return t && i ? [t.getTime(), i.getTime()] : void 0;
+    }
+  }
+  _renderTimeExtentContent() {
+    return !this.timeExtent || this.timeExtent.isAllTime ? this._renderWarning(this._messages.noTimeExtent) : this.timeExtent.isEmpty ? this._renderWarning(this._messages.emptyTimeExtent) : o`${this._renderTimeExtentStart()}${this._renderTimeExtentSeparator()}${this._renderTimeExtentEnd()}`;
+  }
+  _renderTimeExtentStart() {
+    return this.timeExtent?.start ? y("time-extent-start-group", o`<div class="time-extent-start-group">${y("time-extent-start-date", o`<calcite-label alignment=center class="time-extent-start-date" scale=s>${this.#t.formatDate(this.timeExtent.start)}</calcite-label>`)}${this.timeVisible ? y("time-extent-start-time", o`<calcite-label alignment=center class="time-extent-start-time" scale=s>${this.#t.formatTime(this.timeExtent.start)}</calcite-label>`) : null}</div>`) : null;
+  }
+  _renderTimeExtentSeparator() {
+    return this.timeExtent?.start && this.timeExtent?.end && this.timeExtent.start.getTime() !== this.timeExtent.end.getTime() ? y("time-extent-separator", o`<div class="time-extent-separator"></div>`) : null;
+  }
+  _renderTimeExtentEnd() {
+    return this.timeExtent?.end && this.timeExtent.start?.getTime() !== this.timeExtent.end.getTime() ? y("time-extent-end-group", o`<div class="time-extent-end-group">${y("time-extent-end-date", o`<calcite-label alignment=center class="time-extent-end-date" scale=s>${this.#t.formatDate(this.timeExtent.end)}</calcite-label>`)}${this.timeVisible ? y("time-extent-end-time", o`<calcite-label alignment=center class="time-extent-end-time" scale=s>${this.#t.formatTime(this.timeExtent.end)}</calcite-label>`) : null}</div>`) : null;
+  }
+  _renderWarning(t) {
+    return o`<div class="warning"><calcite-icon class="warning-icon" icon=exclamation-mark-triangle></calcite-icon><calcite-label alignment=center class="warning-label" scale=s>${t}</calcite-label></div>`;
   }
 }
-i("arcgis-time-slider", _);
+W("arcgis-time-slider", xt);
 export {
-  _ as ArcgisTimeSlider
+  xt as ArcgisTimeSlider
 };