@doegis/core/views/ui/UI.js

DOE GIS API

import{_ as t}from"../../chunks/tslib.es6.js";import"../../intl.js";import{empty as o,insertBefore as i}from"../../core/domUtils.js";import n from"../../core/Evented.js";import{watch as e,initial as r}from"../../core/reactiveUtils.js";import{property as s}from"../../core/accessorSupport/decorators/property.js";import{cast as a}from"../../core/accessorSupport/decorators/cast.js";import"../../core/arrayUtils.js";import{subclass as d}from"../../core/accessorSupport/decorators/subclass.js";import{setCalciteThemeClass as p}from"../../support/themeUtils.js";import c from"./Component.js";import{isRTL as l}from"../../widgets/support/widgetUtils.js";import{getLocale as h,onLocaleChange as m}from"../../intl/locale.js";const u={left:0,top:0,bottom:0,right:0},f={bottom:30,top:15,right:15,left:15},_="manual",g="esri-ui",y={ui:g,corner:`${g}-corner`,innerContainer:`${g}-inner-container`,manualContainer:`${g}-manual-container`,cornerContainer:`${g}-corner-container`,topLeft:`${g}-top-left`,topRight:`${g}-top-right`,bottomLeft:`${g}-bottom-left`,bottomRight:`${g}-bottom-right`};function C(t){return t&&!t._started&&"function"==typeof t.postMixInProperties&&"function"==typeof t.buildRendering&&"function"==typeof t.postCreate&&"function"==typeof t.startup}function v(t){const o=t,i="object"==typeof o&&null!==o&&Object.getPrototypeOf(o);return(null===i||i===Object.prototype)&&("component"in o||"index"in o||"position"in o)?t:null}function L(t,{top:o,bottom:i,left:n,right:e}){t.style.top=o,t.style.bottom=i,t.style.left=n,t.style.right=e}let b=class extends n.EventedAccessor{constructor(t){super(t),this._cornerNameToContainerLookup={},this._positionNameToContainerLookup={},this._components=new Array,this._componentToKey=new Map,this._locale=h(),this.view=null,this._applyViewPadding=()=>{const t=this.container;t&&L(t,this._toPxPosition(this._getViewPadding()))},this._applyUIPadding=()=>{const t=this._innerContainer;t&&L(t,this._toPxPosition(this.padding))},this._initContainers()}initialize(){this.addHandles([e((()=>[this.view?.padding,this.container]),this._applyViewPadding,r),e((()=>this.padding),this._applyUIPadding,r),e((()=>[this.container,this._locale]),(([t,o])=>{t&&t.setAttribute("lang",o)}),r),m((t=>{this._locale=t}))])}destroy(){this.container=null;for(const t of this._components)t.destroy();this._components.length=0,this._componentToKey.clear()}set container(t){const i=this._get("container");t!==i&&(t&&(t.classList.add(y.ui),p(t),this._attachContainers(t)),i&&(i.classList.remove(y.ui),L(i,{top:"",bottom:"",left:"",right:""}),o(i)),this._set("container",t))}get height(){const t=this.get("view.height")||0;if(0===t)return t;const o=this._getViewPadding(),i=o.top+o.bottom;return Math.max(t-i,0)}get padding(){return this._get("padding")}set padding(t){this._overrideIfSome("padding",t)}castPadding(t){return"number"==typeof t?{bottom:t,top:t,right:t,left:t}:{...f,...t}}get width(){const t=this.get("view.width")||0;if(0===t)return t;const o=this._getViewPadding(),i=o.left+o.right;return Math.max(t-i,0)}add(t,o){let i,n;if(Array.isArray(t))return void t.forEach((t=>this.add(t,o)));const e=v(t);e&&({index:i,position:o,component:t,key:n}=e),o&&"object"==typeof o&&({index:i,key:n,position:o}=o),!t||o&&!this._isValidPosition(o)||this._add(t,o,i,n)}remove(t,o){if(!t)return;if(Array.isArray(t))return t.map((t=>this.remove(t,o)));const i=this._find(t);if(i){const n=this._componentToKey;if(n.has(t)&&n.get(t)!==o)return;const e=this._components.indexOf(i);return i.node.parentNode&&i.node.parentNode.removeChild(i.node),this._componentToKey.delete(t),this._components.splice(e,1)[0]}}empty(t){if(Array.isArray(t))return t.map((t=>this.empty(t))).reduce(((t,o)=>t.concat(o)));if((t=t||_)===_){return Array.prototype.slice.call(this._manualContainer.children).filter((t=>!t.classList.contains(y.corner))).map((t=>this.remove(t)))}return this._isValidPosition(t)?Array.prototype.slice.call(this._cornerNameToContainerLookup[t].children).map(this.remove,this):null}move(t,o){if(Array.isArray(t)&&t.forEach((t=>this.move(t,o))),!t)return;let i;const n=v(t)||v(o);if(n&&(i=n.index,o=n.position,t=n.component||t),o&&!this._isValidPosition(o))return;const e=this.remove(t);e&&this.add(e,{position:o,index:i})}find(t){if(!t)return null;const o=this._findById(t);return o&&(o.widget||o.node)}getPosition(t){for(const o in this._positionNameToContainerLookup){if(this._positionNameToContainerLookup[o].contains(t))return o}return null}_add(t,o,i,n){t instanceof c||(t=new c({node:t})),this._place({component:t,position:o,index:i}),this._components.push(t),n&&this._componentToKey.set(t,n)}_find(t){return t?t instanceof c?this._findByComponent(t):"string"==typeof t?this._findById(t):this._findByNode(t.domNode||t):null}_getViewPadding(){return this.get("view.padding")||u}_attachContainers(t){t.appendChild(this._innerContainer),t.appendChild(this._manualContainer)}_initContainers(){const t=document.createElement("div");t.classList.add(y.innerContainer),t.classList.add(y.cornerContainer);const o=document.createElement("div");o.classList.add(y.innerContainer),o.classList.add(y.manualContainer);const i=document.createElement("div");i.classList.add(y.topLeft),i.classList.add(y.corner),t.appendChild(i);const n=document.createElement("div");n.classList.add(y.topRight),n.classList.add(y.corner),t.appendChild(n);const e=document.createElement("div");e.classList.add(y.bottomLeft),e.classList.add(y.corner),t.appendChild(e);const r=document.createElement("div");r.classList.add(y.bottomRight),r.classList.add(y.corner),t.appendChild(r),this._innerContainer=t,this._manualContainer=o;const s=l();this._cornerNameToContainerLookup={"top-left":i,"top-right":n,"bottom-left":e,"bottom-right":r,"top-leading":s?n:i,"top-trailing":s?i:n,"bottom-leading":s?r:e,"bottom-trailing":s?e:r},this._positionNameToContainerLookup={manual:o,...this._cornerNameToContainerLookup}}_isValidPosition(t){return!!this._positionNameToContainerLookup[t]}_place(t){const o=t.component,n=t.position||_,e=t.index,r=this._positionNameToContainerLookup[n],s=null!=e&&e>-1;if(C(o.widget)&&o.widget.startup(),!s)return void r.appendChild(o.node);const a=Array.prototype.slice.call(r.children);if(0===e)return void(r.firstChild?i(o.node,r.firstChild):r.appendChild(o.node));e>=a.length?r.appendChild(o.node):i(o.node,a[e])}_toPxPosition(t){return{top:this._toPxUnit(t.top),left:this._toPxUnit(t.left),right:this._toPxUnit(t.right),bottom:this._toPxUnit(t.bottom)}}_toPxUnit(t){return 0===t?"0":t+"px"}_findByComponent(t){let o,i=null;return this._components.some((n=>(o=n===t,o&&(i=n),o))),i}_findById(t){let o,i=null;return this._components.some((n=>(o=n.id===t,o&&(i=n),o))),i}_findByNode(t){let o,i=null;return this._components.some((n=>(o=n.node===t,o&&(i=n),o))),i}};t([s()],b.prototype,"_locale",void 0),t([s()],b.prototype,"container",null),t([s()],b.prototype,"height",null),t([s({value:f})],b.prototype,"padding",null),t([a("padding")],b.prototype,"castPadding",null),t([s()],b.prototype,"view",void 0),t([s()],b.prototype,"width",null),b=t([d("esri.views.ui.UI")],b);const P=b;export{P as default};