@arcgis/map-components
Version:
ArcGIS Map Components
2 lines • 8.74 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import{a as k}from"./MDX352VB.js";import{a as M,b as v}from"./KSH446AM.js";import{a as w}from"./Q52QESBE.js";import{M as P,N as L,O as $,P as c,Q as u,R as h,U as y,a as b,b as l,x}from"./WUJCCZQC.js";import"./3TTFCHAA.js";export default $arcgis.t(([{watch:B}])=>{var a=(t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&typeof e!="object"&&Object.defineProperty(t,e,i),i);var H;function C(t){return(e,i)=>a(e,i,{get(){return(this.renderRoot??(H??=document.createDocumentFragment())).querySelectorAll(t)}})}var W=b`:host{transition:max-height .25s ease-in-out;--esri-widget-padding: 12px 15px;--level-picker-padding: var(--calcite-spacing-md);--level-label-color: var(--calcite-color-text-1);--level-label-color--empty: var(--calcite-color-text-2);--level-label-color--active: var(--calcite-color-brand);--level-border-width: 2px;--level-border-color: var(--calcite-color-border-2);--level-border-color--hover: var(--calcite-color-brand);--level-border-color--active: var(--calcite-color-brand);--level-background-color: rgb(from var(--calcite-color-foreground-1) r g b / 70%);--level-background-color--hover: rgb(from var(--calcite-color-foreground-1) r g b / 90%);--level-background-color--active: var(--calcite-color-brand);--focus-outline-width: 2px;--focus-outline-color: var(--calcite-color-brand);--focus-outline-offset: 2px}.container{height:max-content;display:flex;flex-direction:row;align-items:center;&.no-level{display:none}>*{height:max-content}}.clear-button{appearance:none;margin-inline-start:7px;display:none;position:absolute;inset-block-start:-4px}.label-container{--width: 90px;--height: 40px;flex-direction:column;justify-content:space-between;align-items:center;width:50%;margin-inline-end:var(--calcite-spacing-md);display:flex;&.active{color:var(--calcite-color-brand)}&.empty{cursor:default;color:var(--calcite-color-border-2);font-size:var(--calcite-font-size);font-weight:var(--calcite-font-weight-light)}&:focus{outline:none}&:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus)}}.level-label{position:relative;text-align:center;>span{pointer-events:none}&.active{font-size:var(--height);line-height:calc(var(--height) + 6px);>.clear-button{display:inline-block}}}.tiles-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;transform:rotate(180deg);cursor:pointer;padding:20px 0;width:50%}.tiles-inner-container{transition:margin .3s}`,j=Object.defineProperty,F=(t,e,i,n)=>{for(var r=void 0,o=t.length-1,s;o>=0;o--)(s=t[o])&&(r=s(e,i,r)||r);return r&&j(e,i,r),r},d=class extends ${constructor(){super(...arguments),this.hovering=!1,this.onPointerMove=e=>{if(!this.hovering)return!1;if(window.getSelection()?.removeAllRanges(),this.containerPosTop!=null){let i=this.containerPosTop,n=40,r=this.expandedLevelsMargin,o=this.levelsHeight,s=i+n+r,m=this.levelHeight/2;s+=m,o-=m;let f=(e.clientY-s)/o;f+=.035,this.normalizedPointerPosition=f}return!1},this.onPointerEnter=()=>{let e=this.levelsContainer.value;this.hovering||e==null||(this.hovering=!0,this.containerPosTop=e.getBoundingClientRect().top??0)},this.levelsContainer=P(),this.onPointerLeave=()=>{if(this.hovering){window.getSelection()?.removeAllRanges();for(let e of this.levelItems)e.width=void 0;this.normalizedPointerPosition=0,this.hoveredLevel=null,this.hovering=!1}},this.onPointerUp=()=>{window.getSelection()?.removeAllRanges();let e=this.level;this.hoveredLevel==null||e==null||this.#o()},this.expandedLevelsHeight=void 0,this.normalizedPointerPosition=0,this.hoveredLevel=null,this.arcgisBuildingLevelChange=x({bubbles:!0,composed:!0})}static{this.properties={expandedLevelsHeight:16,normalizedPointerPosition:16,hoveredLevel:16,messages:0,level:0,numberOfLevels:32,levelHeight:32,levelsHeight:32}}static{this.styles=W}get levels(){return this.level?.allowedValues??[]}get levelWidth(){let{levelWidthNominator:e,levelWidthConstant:i}=M,n=e/Math.sqrt(this.numberOfLevels)+i;return Math.round(v(n,30,80))}get _gaussianFactor(){let e=this.numberOfLevels;return e/Math.log(30*e)*10}get expandedLevelsMargin(){return Math.round(((this.expandedLevelsHeight??0)-this.levelsHeight)/2)}get levelClosestToPointer(){if(!this.hovering)return null;let e=this.numberOfLevels-1,i=this.clampedNormalizedPointerPosition;return e>=0&&i!=null?this.levels[Math.round((1-i)*e)]:null}get clampedNormalizedPointerPosition(){return v(this.normalizedPointerPosition,0,1)}get numberOfLevels(){return this.levels.length}get levelHeight(){let e=14,i=e*2/Math.sqrt(this.numberOfLevels);return Math.round(v(i,2,e))}get levelsHeight(){return Math.round(this.levelHeight*this.numberOfLevels)}async loaded(){this.listen("keydown",this.#n.bind(this)),this.manager.onLifecycle(()=>[B(()=>[this.normalizedPointerPosition,this.hovering],()=>this.onPointerPositionChange(),{initial:!0})])}onPointerPositionChange(){let e=0;this.levelItems.forEach((n,r)=>{let{width:o,height:s}=this.getLevelWidgetSize(r);n.height=s,n.width=o,e+=s}),this.hoveredLevel=this.levelClosestToPointer;let i=this.expandedLevelsHeight;(i==null||Math.abs(i-e)>30)&&(this.expandedLevelsHeight=e)}getLevelWidgetSize(e){let i={width:this.levelWidth,height:this.levelHeight};if(this.hovering){let n=this.getGaussianFactor(e,this.clampedNormalizedPointerPosition);i.width+=20*n,i.height+=30*n}return i}getGaussianFactor(e,i){let n=this.numberOfLevels-1,r=(n-e)/n,o=this._gaussianFactor*(r-i);return Math.exp(-(o**2))}#n(e){switch(e.key){case"ArrowDown":case"ArrowLeft":e.preventDefault(),e.stopPropagation(),this.#i(),this.#e();break;case"ArrowUp":case"ArrowRight":e.preventDefault(),e.stopPropagation(),this.#t(),this.#e();break}}#e(){Array.from(this.levelItems).find(e=>e.level===this.level?.value)?.focus()}#t(){this.level&&(this.level.next(),this.arcgisBuildingLevelChange.emit())}#i(){this.level&&(this.level.previous(),this.arcgisBuildingLevelChange.emit())}#o(){this.level==null||this.hoveredLevel==null||(this.level.value===this.hoveredLevel&&!this.level.disabled?this.#r():(this.level.select(this.hoveredLevel),this.arcgisBuildingLevelChange.emit()))}#r(){this.level&&!this.level.disabled&&(this.level.clear(),this.arcgisBuildingLevelChange.emit())}render(){if(!this.messages)return null;let e=this.level;e?.value;let i=e&&!e.disabled,n=this.numberOfLevels>1?k(this.levels,r=>r,r=>l`<arcgis-building-level-item .level=${r} .baseWidth=${this.levelWidth} .hovered=${this.hoveredLevel===r} .active=${e&&!e.disabled&&e.value===r} class=${c({"animate-level":!this.hovering})} .messages=${this.messages}></arcgis-building-level-item>`):null;return l`<div class=${c({container:!0,"no-level":this.numberOfLevels<2,"animate-level":this.hovering})}>${T({messages:this.messages,active:i,hasNext:e?.hasNext,hasPrevious:e?.hasPrevious,onNext:()=>this.#t(),onPrevious:()=>this.#i(),children:U({messages:this.messages,level:this.hoveredLevel??e?.value,active:i,onClear:()=>this.#r()})})}${D({ref:this.levelsContainer,expandedLevelsMargin:this.expandedLevelsMargin,levelsHeight:this.levelsHeight,onPointerEnter:this.onPointerEnter,onPointerMove:this.onPointerMove,onPointerLeave:this.onPointerLeave,onPointerUp:this.onPointerUp,children:n})}</div>`}};F([C("arcgis-building-level-item")],d.prototype,"levelItems");function T(t){return l`<div class=${c({"label-container":!0,empty:!t.active,active:!0,hover:!0})} title=${t.messages.selectLevel??h} tabindex=0><calcite-action icon=chevron-up appearance=transparent .text=${t.messages.nextLevel} =${t.onNext} .disabled=${!t.hasNext}></calcite-action>${t.children}<calcite-action icon=chevron-down appearance=transparent .text=${t.messages.previousLevel} =${t.onPrevious} .disabled=${!t.hasPrevious}></calcite-action></div>`}function U(t){let e=t.messages;return l`<div aria-label=${e.clearLevel??h} class=${c({"level-label":!0,active:t.active&&t.level!=null})} =${t.onClear} title=${e.clearLevel??h}>${t.active?l`<span>${t.level}</span>${w("clear-button",l`<calcite-fab appearance=outline-fill class="clear-button" icon=x kind=neutral =${t.onClear} scale=s></calcite-fab>`)}`:l`<span>${e.selectLevel}</span>`}</div>`}function D(t){let e=40,i=-e/2,n=t.levelsHeight,r=n+e*2;return l`<div class="tiles-container" =${t.onPointerEnter} =${t.onPointerEnter} =${t.onPointerMove} =${t.onPointerLeave} =${t.onPointerUp} =${t.onClick} style=${u({height:`${r}px`,marginBlockStart:`${i}px`,marginBlockEnd:`${i}px`})} ${L(t.ref)}><div class="tiles-inner-container" style=${u({height:`${n}px`,margin:"0",marginBlockStart:`${20-t.expandedLevelsMargin}px`})}>${t.children}</div></div>`}y("arcgis-building-level-picker",d);return d},"core/reactiveUtils")