@arcgis/map-components/dist/cdn/WDQCTTJH.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import{b as u}from"./KSH446AM.js";import{a as c}from"./Q52QESBE.js";import{f as v}from"./AKBXFBDL.js";import"./LMBRORN7.js";import"./PBSJQPB2.js";import{O as l,P as s,R as d,U as p,a as n,b as t,x as h}from"./WUJCCZQC.js";import"./3TTFCHAA.js";export default $arcgis.t(([{when:w,watch:f}])=>{var x=n`:host{--num-phases: 7;--container-width: 100cqw;--phase-size: 24px;--arrow-width: 16px;--padding: var(--calcite-spacing-xxs);--divider-width-min: var(--calcite-spacing-base);--divider-width-max: var(--calcite-spacing-xl);--divider-width: calc( (var(--container-width) - (var(--phase-size) * var(--num-phases)) - (var(--arrow-width) * 2) - (var(--padding) * 2) ) / (var(--num-phases) - 1) );container-type:inline-size}.phase-picker,.phases-container{display:flex;flex-direction:row;align-items:center}.phases-container{position:relative;flex-shrink:1;padding:var(--calcite-spacing-xxs);overflow:hidden}.phase-button{appearance:none;display:flex;flex-shrink:0;align-items:center;justify-content:center;border:solid var(--calcite-border-width-sm) var(--calcite-color-border-2);border-radius:var(--calcite-corner-radius-pill);background:var(--calcite-color-background);cursor:pointer;padding:1px 0 0;width:var(--phase-size);height:var(--phase-size);color:var(--calcite-color-text-1);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size);font-weight:var(--calcite-font-weight-regular)}.phase-button:hover{border-width:var(--calcite-border-width-md);border-color:var(--calcite-color-brand)}.phase-button:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-brand);outline-offset:var(--calcite-border-width-md)}.phase-button.active{border-color:var(--calcite-color-brand);background-color:var(--calcite-foreground-1)}.phase-button.current{background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}.arrow-left,.arrow-right{--calcite-internal-action-padding-inline: 0;width:var(--arrow-width);min-width:var(--arrow-width)}.divider{flex:0;background:var(--calcite-color-border-1);min-width:clamp(var(--divider-width-min),var(--divider-width),var(--divider-width-max));height:var(--calcite-border-width-sm)}.divider.active{background-color:var(--calcite-color-brand)}`,o=class extends l{constructor(){super(...arguments),this.#i=v(),this.#e=!0,this.#a=!1,this.arcgisBuildingPhaseChange=h({bubbles:!0,composed:!0})}static{this.properties={messages:0,phase:0,numberOfPhases:32,phaseHeight:32}}static{this.styles=x}get phases(){return this.phase?.allowedValues??[]}#i;#e;#a;#t(){let e=this.renderRoot.querySelector("button.current");e&&(this.#e&&(e.scrollIntoView({block:"nearest",inline:"center"}),this.#e=!1),this.#a&&(e.focus(),this.#a=!1))}#r(){this.phase&&(this.phase.next(),this.arcgisBuildingPhaseChange.emit())}#s(){this.phase&&(this.phase.previous(),this.arcgisBuildingPhaseChange.emit())}#c(e){this.phase!=null&&this.phase?.value!==e&&(this.phase?.select(e),this.arcgisBuildingPhaseChange.emit())}get numberOfPhases(){return this.phases.length}get phaseHeight(){let e=14,r=e*2/Math.sqrt(this.numberOfPhases);return Math.round(u(r,2,e))}loaded(){this.listen("keydown",e=>{switch(e.key){case"ArrowDown":case"ArrowLeft":e.stopPropagation(),e.preventDefault(),this.#s(),this.#a=!0;break;case"ArrowUp":case"ArrowRight":e.stopPropagation(),e.preventDefault(),this.#r(),this.#a=!0;break}}),this.manager.onLifecycle(()=>[w(()=>this.phase?.state==="ready",()=>{requestAnimationFrame(()=>{this.#e=!0,this.#t()})},{initial:!0}),f(()=>this.phase?.value,()=>{this.#e=!0,this.#t()})])}render(){let e=this.phase,r=this.messages;return!r||e==null?null:t`<div class="phase-picker">${g({className:"arrow-left",disabled:!1,icon:this.#i==="rtl"?"chevron-right":"chevron-left",onClick:()=>this.#s(),text:r.previousPhase})}<div class="phases-container">${this.phases.map((i,m)=>t`${m>0&&t`<span class=${s({divider:!0,active:e.value>=i})}></span>`||""}${c(i,t`<button class=${s({"phase-button":!0,active:e.value>=i,current:e.value===i})} @click=${()=>{this.#c(i)}}>${i}</button>`)}`)}</div>${g({className:"arrow-right",disabled:!1,icon:this.#i==="rtl"?"chevron-left":"chevron-right",onClick:()=>this.#r(),text:r.nextPhase})}</div>`}};function g(a){return c(a.className,t`<calcite-action class=${s(a.className)} .disabled=${a.disabled} .icon=${a.icon} icon-flip-rtl @click=${a.onClick} scale=s .text=${a.text} title=${a.text??d}></calcite-action>`)}p("arcgis-building-phase-picker",o);return o},"core/reactiveUtils")