@arcgis/map-components
Version:
ArcGIS Map Components
83 lines (82 loc) • 6.33 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as o } from "../../chunks/runtime.js";
import { LitElement as n, createEvent as i, nothing as a, safeClassMap as c } from "@arcgis/lumina";
import { getSlotAssignedElements as r } from "@arcgis/toolkit/dom";
import { css as h, html as s } from "lit";
import { u as d } from "../../chunks/useT9n.js";
import { usePropertyChange as m } from "@arcgis/lumina/controllers";
const p = h`: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}`;
class u extends n {
constructor() {
super(), this.messages = d({ 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 = m()("layout", "loop", "playRate", "state"), this.arcgisAnimate = i(), this.arcgisNext = i(), this.arcgisPrevious = i(), this.arcgisPlay = i(), this.arcgisPause = i(), this.arcgisSlottedElementChange = i(), 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 = p;
}
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) {
const [e] = r(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() {
const t = !!this._slottedElement && !this._slottedElement.hidden, e = this.state === "playing";
return s`<div class="container"><div class="root"><calcite-action-bar expand-disabled .layout=${this.layout}>${!this.hidePlayButton && s`<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 && s`<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 && s`<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 && s`<div class="separator"></div>` || ""}<slot =${({ currentTarget: l }) => {
this._handleSlotChange(l);
}} class=${c(t ? "component-slot" : "empty")}></slot></div>${this.caption && s`<div class="caption"><div class="caption-text">${this.caption}</div></div>` || ""}</div>`;
}
}
o("arcgis-value-picker", u);
export {
u as ArcgisValuePicker
};