@arcgis/core/widgets/Expand.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as e}from"tslib";import{deprecateWidget as t}from"../core/deprecate.js";import{makeHandle as o}from"../core/handleUtils.js";import n from"../core/Logger.js";import{watch as i,initial as s}from"../core/reactiveUtils.js";import{property as l,subclass as r}from"../core/accessorSupport/decorators.js";import a from"./Widget.js";import d from"./Expand/ExpandViewModel.js";import{loadCalciteComponents as p}from"./support/componentsUtils.js";import{globalCss as c}from"./support/globalCss.js";import{messageBundle as h,tsx as u,isWidget as m,hasDomNode as g}from"./support/widget.js";const v="esri-expand",_={base:v,toggle:`${v}__toggle`,popoverContent:`${v}__popover-content`,panel:`${v}__panel`,panelContent:`${v}__panel-content`,sheet:`${v}__sheet`,contentContainer:`${v}__content-container`,icon:"esri-collapse__icon",iconFlip:"esri-collapse__icon-flip",iconNumber:`${v}__icon-number`},w="chevrons-left",y="chevrons-right",b=Symbol("scheduleRender-override-handle");let x=class extends a{constructor(e,o){super(e,o),this._boundScheduledRender=this.scheduleRender.bind(this),this.closeOnEsc=!0,this.collapseTooltip="",this.content="",this.expandTooltip="",this.focusTrapDisabled=!1,this.iconNumber=0,this.messages=null,this.messagesCommon=null,this.mode="auto",this.placement=null,this.viewModel=new d({suppressDeprecationWarning:!0}),this.toggle=()=>{this.viewModel.expanded=!this.viewModel.expanded},this._handlePopoverClose=e=>{e.target===this._popoverEl&&(this.viewModel.expanded=e.currentTarget.open)},this._handleSheetClose=e=>{this.viewModel.expanded=e.currentTarget.open},this._handlePanelClose=e=>{this.viewModel.expanded=!e.currentTarget.closed},this._handleKeyDown=e=>{this.viewModel.expanded&&"Escape"===e.key&&!this._willCloseOnEsc(e)&&e.preventDefault()},this._storeToggleActionEl=e=>{this._toggleActionEl=e},this._storePopoverEl=e=>{this._popoverEl=e},t(n.getLogger(this),"Expand","arcgis-expand",{version:"4.34"})}initialize(){this.addHandles(i(()=>this.viewModel?.view?.size,()=>this._popoverEl?.reposition(),s))}loadDependencies(){return p({action:()=>import("@esri/calcite-components/dist/components/calcite-action"),icon:()=>import("@esri/calcite-components/dist/components/calcite-icon"),panel:()=>import("@esri/calcite-components/dist/components/calcite-panel"),popover:()=>import("@esri/calcite-components/dist/components/calcite-popover"),sheet:()=>import("@esri/calcite-components/dist/components/calcite-sheet")})}get expandTitle(){const{expanded:e,messagesCommon:t,collapseTooltip:o,expandTooltip:n}=this;return(e?o||t?.collapse:n||t?.expand)??""}get _displaySheet(){switch(this.mode){case"drawer":return!0;case"auto":return"xsmall"===this.viewModel.view?.widthBreakpoint;default:return!1}}get autoCollapse(){return this.viewModel.autoCollapse}set autoCollapse(e){this.viewModel.autoCollapse=e}get collapseIcon(){return y}set collapseIcon(e){this._overrideIfSome("collapseIcon",e)}get expanded(){return this.viewModel.expanded}set expanded(e){this.viewModel.expanded=e}get expandIcon(){return"object"==typeof this.content&&"icon"in this.content&&this.content.icon?this.content.icon:w}set expandIcon(e){this._overrideIfSome("expandIcon",e)}get group(){return this.viewModel.group}set group(e){this.viewModel.group=e}get icon(){return null}get label(){return"object"==typeof this.content&&"label"in this.content&&this.content.label?this.content.label:this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}expand(){this.viewModel.expanded=!0}collapse(){this.viewModel.expanded=!1}render(){const{_displaySheet:e,_toggleActionEl:t,viewModel:{expanded:o},label:n,placement:i}=this;return u("div",{class:this.classes(_.base,c.widget)},this._renderToggle(),e?u("calcite-sheet",{class:_.sheet,heightScale:"l",label:n,onkeydown:this._handleKeyDown,open:o,position:"block-end",topLayerDisabled:this.topLayerDisabled,onCalciteSheetClose:this._handleSheetClose},u("calcite-panel",{class:_.panel,closable:!0,closed:!o,heading:n,onkeydown:this._handleKeyDown,onCalcitePanelClose:this._handlePanelClose},u("div",{class:_.panelContent},this._renderContent()))):t?u("calcite-popover",{afterCreate:this._storePopoverEl,afterUpdate:this._storePopoverEl,focusTrapDisabled:this.focusTrapDisabled,label:n,onkeydown:this._handleKeyDown,open:o,overlayPositioning:"fixed",placement:i??this._getPlacement(),referenceElement:t,topLayerDisabled:this.topLayerDisabled,onCalcitePopoverClose:this._handlePopoverClose},u("div",{class:_.popoverContent},this._renderContent())):null)}_getPlacement(){const{container:e,view:t}=this,o=e&&t?t.ui.getPosition(e):null;if(!o||"manual"===o)return"auto";const[n,i]=o.split("-");return`${"right"===i?"left":"right"}-${"bottom"===n?"end":"start"}`}_willCloseOnEsc(e){const{closeOnEsc:t}=this;return"function"==typeof t?t(e):t}_renderBadgeNumber(){const{expanded:e,iconNumber:t}=this;return t&&!e?u("span",{class:_.iconNumber,key:"expand__icon-number"},t):null}_renderToggleButton(){const{expanded:e,expandTitle:t,expandIcon:o,collapseIcon:n}=this,i=e?n:o,s=i===w||i===y;return u("calcite-action",{afterCreate:this._storeToggleActionEl,afterUpdate:this._storeToggleActionEl,class:c.widgetButton,onclick:this.toggle,text:t,title:t},i?u("calcite-icon",{class:this.classes(_.icon,s&&_.iconFlip),icon:i,scale:"s"}):null)}_renderToggle(){return u("div",{class:_.toggle},this._renderToggleButton(),this._renderBadgeNumber())}_renderContent(){const{content:e}=this;return"string"==typeof e?u("div",{class:_.contentContainer,innerHTML:e,key:"content__string"}):m(e)?u("div",{afterCreate:()=>{this._overwriteChildScheduleRender(e)},afterRemoved:()=>this.removeHandles(b),afterUpdate:()=>{e.scheduleRender!==this._boundScheduledRender&&(this.removeHandles(b),this._overwriteChildScheduleRender(e))},class:_.contentContainer,key:"content__widget"},e.render()):e instanceof HTMLElement?u("div",{afterCreate:this._attachToNode,bind:e,class:_.contentContainer,key:"content__html-element"}):g(e)?u("div",{afterCreate:this._attachToNode,bind:e.domNode,class:_.contentContainer,key:"content__node"}):null}_overwriteChildScheduleRender(e){const t=e.scheduleRender;e.scheduleRender=this._boundScheduledRender,this.addHandles(o(()=>e.scheduleRender=t),b)}_attachToNode(e){const t=this;e.appendChild(t)}};e([l({readOnly:!0})],x.prototype,"expandTitle",null),e([l()],x.prototype,"_toggleActionEl",void 0),e([l()],x.prototype,"_displaySheet",null),e([l()],x.prototype,"autoCollapse",null),e([l()],x.prototype,"closeOnEsc",void 0),e([l()],x.prototype,"collapseIcon",null),e([l()],x.prototype,"collapseTooltip",void 0),e([l()],x.prototype,"content",void 0),e([l()],x.prototype,"expanded",null),e([l()],x.prototype,"expandIcon",null),e([l()],x.prototype,"expandTooltip",void 0),e([l()],x.prototype,"focusTrapDisabled",void 0),e([l()],x.prototype,"group",null),e([l()],x.prototype,"icon",null),e([l()],x.prototype,"iconNumber",void 0),e([l()],x.prototype,"label",null),e([l(),h("esri/widgets/Expand/t9n/Expand")],x.prototype,"messages",void 0),e([l(),h("esri/t9n/common")],x.prototype,"messagesCommon",void 0),e([l()],x.prototype,"mode",void 0),e([l()],x.prototype,"placement",void 0),e([l()],x.prototype,"view",null),e([l({type:d})],x.prototype,"viewModel",void 0),x=e([r("esri.widgets.Expand")],x);const C=x;export{C as default};