@arcgis/coding-components
Version:
ArcGIS Coding Components
3 lines (2 loc) • 8.82 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import{a as g}from"./6G5URSC7.js";import{E as n,F as l,G as b,K as p,h as u,j as m}from"./2FGVSLMQ.js";import"./Y3KOWWO5.js";import"./3TTFCHAA.js";var z=u`:host{--internal-border: var(--arcgis-coding-components-border, 1px solid var(--calcite-color-border-3));--internal-background-color: var(--arcgis-coding-components-background-color, var(--calcite-color-foreground-1));--internal-side-action-bar-max-w: var(--arcgis-coding-components-side-action-bar-max-w, 25%);--internal-code-editor-side-panel-w: var(--arcgis-coding-components-code-editor-side-panel-w, 600px);--internal-code-editor-side-panel-max-w: var(--arcgis-coding-components-code-editor-side-panel-max-w, 45%);--internal-code-editor-results-panel-max-h: var(--arcgis-coding-components-code-editor-results-panel-max-h, 50%);--internal-code-editor-results-panel-h: var(--arcgis-coding-components-code-editor-results-panel-h, 50%);--internal-code-editor-results-panel-bottom-drawer-controls-h: 0px;display:flex;flex-direction:column;position:relative;overflow:hidden;border:var(--internal-border);box-sizing:border-box;background-color:var(--internal-background-color);height:100%;.flex-adjustable{flex:1 1 auto;overflow:hidden}.flex-row{display:flex;flex-direction:row;overflow:hidden}.flex-column{display:flex;flex-direction:column;overflow:hidden}.bottom-drawer{display:flex;flex:0 0 auto;flex-direction:column;overflow:hidden;position:relative;box-sizing:border-box;min-height:0}.bottom-drawer-resize-handle{display:none;position:absolute;inset-inline:0;inset-block-start:0;align-items:center;justify-content:center;block-size:var(--calcite-size-fixed-sm-plus);cursor:ns-resize;touch-action:none;user-select:none;z-index:var(--calcite-z-index-header);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);outline:none}.bottom-drawer-resize-handle-bar{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);color:var(--calcite-color-border-input);background-color:var(--calcite-color-background);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);transition:box-shadow .12s ease,color .12s ease,background-color .12s ease}.bottom-drawer-resize-handle-bar calcite-icon{color:inherit}}:host(:state(results-has-content)) .bottom-drawer{padding-block-start:var(--calcite-size-fixed-sm-plus);height:calc(var(--internal-code-editor-results-panel-h) + var(--internal-code-editor-results-panel-bottom-drawer-controls-h));max-height:calc(var(--internal-code-editor-results-panel-max-h) + var(--internal-code-editor-results-panel-bottom-drawer-controls-h))}:host(:state(results-has-content)) .bottom-drawer-resize-handle{display:flex}:host(:state(results-has-content)) .bottom-drawer-resize-handle:focus .bottom-drawer-resize-handle-bar{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}:host(:state(results-has-content)) .bottom-drawer-resize-handle:hover .bottom-drawer-resize-handle-bar,:host(:state(results-has-content)) .bottom-drawer-resize-handle .bottom-drawer-resize-handle-bar,:host(:state(is-resizing)) .bottom-drawer-resize-handle-bar{color:var(--calcite-shell-panel-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-shell-panel-resize-background-color, var(--calcite-color-foreground-3))}:host(:state(results-has-content)) slot[name=bottom-action-bar]::slotted(*){border-top:0}slot[name=top-action-bar]{flex:0 0 auto}slot[name=top-action-bar]::slotted(*){border-bottom:var(--internal-border)}slot[name=bottom-action-bar]{flex:0 0 auto}slot[name=bottom-action-bar]::slotted(*){border-top:var(--internal-border)}slot[name=side-panel]::slotted(*){max-width:var(--internal-code-editor-side-panel-max-w);width:var(--internal-code-editor-side-panel-w);border-inline-start:var(--internal-border);box-sizing:border-box;flex:1 0 auto}slot[name=side-panel]::slotted(.hidden){display:none}slot[name=editor]::slotted(*){flex:auto;min-height:0}slot[name=results-panel]{display:flex;flex:1 1 auto;overflow:hidden;min-height:0}slot[name=results-panel]::slotted(*){border-top:var(--internal-border);box-sizing:border-box;flex:1 1 auto;min-height:0}slot[name=side-action-bar]::slotted(*){max-width:var(--internal-side-action-bar-max-w);border-inline-start:var(--internal-border)}`,P=10,k=25,v=100,x="results-has-content",f="is-resizing",C="--arcgis-coding-components-code-editor-results-panel-max-h",s="--internal-code-editor-results-panel-h",a="--internal-code-editor-results-panel-max-h",i="--internal-code-editor-results-panel-bottom-drawer-controls-h",c=class extends b{static{this.styles=[z]}#e=void 0;#t=!1;#a=!1;#n=n();#h=n();#l=n();#r;#u(e){this.#e===e.pointerId&&this.#o()}#v=e=>{this.#e===e.pointerId&&this.#o()};load(){this.manager.onLifecycle(()=>(this.#r=new ResizeObserver(()=>{this.#t&&this.#i()}),this.updateComplete.then(()=>this.#g()),()=>{this.#o(),this.#r?.disconnect(),this.#r=void 0}))}#x(){this.#t&&this.#i(),this.#g()}#f(e){e.button!==0||!this.#t||(e.preventDefault(),e.currentTarget instanceof HTMLElement&&(e.currentTarget.focus(),e.currentTarget.setPointerCapture(e.pointerId)),this.#e=e.pointerId,this.#a=!0,this.elementInternals.states.add(f),this.#m(e))}#y(e){if(!this.#t)return;this.#i();let t=this.#k(e);t!=null&&(e.preventDefault(),e.stopPropagation(),this.#a=!0,this.#c(t))}#w(e){if(!e.target)return;let t=g(e);if(this.#t=t,t){this.elementInternals.states.add(x),this.#i();return}this.#o(),this.#a||this.#$(),this.elementInternals.states.delete(x)}#o(){let e=this.#e;if(!e)return;this.#e=void 0;let t=this.#h.value;t?.hasPointerCapture(e)&&t.releasePointerCapture(e),this.elementInternals.states.delete(f)}#m(e){if(this.#e!==e.pointerId)return;let t=this.#s(),r=this.el.getBoundingClientRect().bottom-e.clientY-t;this.#c(r,t)}#z(){let e=Number.parseFloat(this.el.style.getPropertyValue(s));if(Number.isFinite(e))return e;let t=Number.parseFloat(getComputedStyle(this.#n.value??this.el).height);return Number.isFinite(t)?Math.max(0,t-this.#s()):v}#b(){return this.el.querySelector(':scope > [slot="bottom-action-bar"]')}#s(){let e=this.#b()?.getBoundingClientRect().height??0,t=this.#l.value?.getBoundingClientRect().height??0;return e+t}#p(){return getComputedStyle(this.el).getPropertyValue(C).trim()||null}#d(e,t){t?this.el.style.setProperty(e,t):this.el.style.removeProperty(e)}#P(e){let t=this.#p();if(!t)return null;let r=Number.parseFloat(t);if(t.endsWith("px")&&Number.isFinite(r))return r;if(t.endsWith("%")&&Number.isFinite(r))return this.el.getBoundingClientRect().height*r/100;let o=this.#n.value;if(!o)return null;let d=this.el.style.getPropertyValue(i),y=this.el.style.getPropertyValue(s),w=this.el.style.getPropertyValue(a);this.el.style.setProperty(i,`${e}px`),this.el.style.setProperty(s,`${this.el.getBoundingClientRect().height}px`),this.el.style.setProperty(a,t);let h=Number.parseFloat(getComputedStyle(o).height);return this.#d(i,d),this.#d(s,y),this.#d(a,w),Number.isFinite(h)?Math.max(0,h-e):null}#g(){let e=this.#r;if(!e)return;e.disconnect(),e.observe(this.el);let t=this.#l.value;t&&e.observe(t);let r=this.#b();r&&e.observe(r)}#k(e){let t=e.shiftKey?k:P,r=this.#z();switch(e.key){case"ArrowUp":return r+t;case"ArrowDown":return r-t;default:return}}#C(e,t){let r=Math.max(0,this.el.getBoundingClientRect().height-t),o=this.#P(t),d=o==null?r:Math.min(r,o);return Math.min(Math.max(e,v),d)}#c(e,t=this.#s()){let r=this.#C(e,t),o=this.#p();this.el.style.setProperty(i,`${t}px`),this.el.style.setProperty(s,`${r}px`),this.el.style.setProperty(a,o??`calc(100% - ${t}px)`)}#$(){this.el.style.removeProperty(i),this.el.style.removeProperty(s),this.el.style.removeProperty(a)}#i(){let e=this.#s(),t=Number.parseFloat(this.el.style.getPropertyValue(s));return Number.isFinite(t)?this.#c(t,e):this.el.style.setProperty(i,`${e}px`),e}render(){return m`<slot name=top-action-bar></slot><div class="flex-row flex-adjustable"><div class="flex-column flex-adjustable"><slot name=editor></slot><div class="bottom-drawer" ${l(this.#n)}><div aria-label="Resize results panel" aria-orientation=horizontal class="bottom-drawer-resize-handle" role=separator tabindex=0 =${this.#u} =${this.#f} =${this.#m} =${this.#u} =${this.#v} =${this.#y} ${l(this.#h)}><div class="bottom-drawer-resize-handle-bar" ${l(this.#l)}><calcite-icon icon=drag-resize-vertical scale=s></calcite-icon></div></div><slot name=bottom-action-bar =${this.#x}></slot><slot name=results-panel =${this.#w}></slot></div></div><slot name=side-panel></slot><slot name=side-action-bar></slot></div>`}};p("arcgis-code-editor-shell",c);export{c as CodeEditorShell};