@arcgis/core/widgets/Expand.js

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

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.32/esri/copyright.txt for details.
*/
import{_ as e}from"../chunks/tslib.es6.js";import{watch as t,initial as o}from"../core/reactiveUtils.js";import{property as n}from"../core/accessorSupport/decorators/property.js";import"../core/has.js";import"../core/Logger.js";import"../core/RandomLCG.js";import{subclass as s}from"../core/accessorSupport/decorators/subclass.js";import i from"./Widget.js";import l from"./Expand/ExpandViewModel.js";import{loadCalciteComponents as r}from"./support/componentsUtils.js";import{globalCss as a}from"./support/globalCss.js";import{isWidget as p,hasDomNode as c}from"./support/widget.js";import{tsx as d}from"./support/jsxFactory.js";import{messageBundle as h}from"./support/decorators/messageBundle.js";const u="esri-expand",m={base:u,toggle:`${u}__toggle`,popoverContent:`${u}__popover-content`,panel:`${u}__panel`,panelContent:`${u}__panel-content`,sheet:`${u}__sheet`,panelIconNumber:`${u}__panel-icon-number`,contentContainer:`${u}__content-container`,icon:"esri-collapse__icon",iconFlip:"esri-collapse__icon-flip",iconExpanded:`${u}__icon--expanded`,iconNumber:`${u}__icon-number`,content:`${u}__content`,contentExpanded:`${u}__content--expanded`},_="chevrons-left",g="chevrons-right";let v=class extends i{constructor(e,t){super(e,t),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 l,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}}initialize(){this.addHandles(t((()=>this.viewModel?.view?.size),(()=>this._popoverEl?.reposition()),o))}loadDependencies(){return r({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 g}set collapseIcon(e){this._overrideIfSome("collapseIcon",e)}get expanded(){return this.viewModel.expanded}set expanded(e){this.viewModel.expanded=e}get expandIcon(){return p(this.content)?this.content.icon:_}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(p(this.content)?this.content.label:null)??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:s}=this;return d("div",{class:this.classes(m.base,a.widget)},this._renderToggle(),e?d("calcite-sheet",{class:m.sheet,heightScale:"l",label:n,onkeydown:this._handleKeyDown,open:o,position:"block-end",onCalciteSheetClose:this._handleSheetClose},d("calcite-panel",{class:m.panel,closable:!0,closed:!o,heading:n,onkeydown:this._handleKeyDown,onCalcitePanelClose:this._handlePanelClose},d("div",{class:m.panelContent},this._renderContent()))):t?d("calcite-popover",{afterCreate:this._storePopoverEl,afterUpdate:this._storePopoverEl,focusTrapDisabled:this.focusTrapDisabled,label:n,onkeydown:this._handleKeyDown,open:o,overlayPositioning:"fixed",placement:s??this._getPlacement(),referenceElement:t,onCalcitePopoverClose:this._handlePopoverClose},d("div",{class:m.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,s]=o.split("-");return`${"right"===s?"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?d("span",{class:m.iconNumber,key:"expand__icon-number"},t):null}_renderToggleButton(){const{expanded:e,expandTitle:t,expandIcon:o,collapseIcon:n}=this,s=e?n:o,i=s===_||s===g;return d("calcite-action",{afterCreate:this._storeToggleActionEl,afterUpdate:this._storeToggleActionEl,class:a.widgetButton,onclick:this.toggle,scale:"s",text:t,title:t},s?d("calcite-icon",{class:this.classes(m.icon,i&&m.iconFlip),icon:s,scale:"s"}):null)}_renderToggle(){return d("div",{class:m.toggle},this._renderToggleButton(),this._renderBadgeNumber())}_renderContent(){const{content:e}=this;return"string"==typeof e?d("div",{class:m.contentContainer,innerHTML:e,key:"content__string"}):p(e)?d("div",{class:m.contentContainer,key:"content__widget"},e.render()):e instanceof HTMLElement?d("div",{afterCreate:this._attachToNode,bind:e,class:m.contentContainer,key:"content__html-element"}):c(e)?d("div",{afterCreate:this._attachToNode,bind:e.domNode,class:m.contentContainer,key:"content__node"}):null}_attachToNode(e){const t=this;e.appendChild(t)}};e([n({readOnly:!0})],v.prototype,"expandTitle",null),e([n()],v.prototype,"_toggleActionEl",void 0),e([n()],v.prototype,"_displaySheet",null),e([n()],v.prototype,"autoCollapse",null),e([n()],v.prototype,"closeOnEsc",void 0),e([n()],v.prototype,"collapseIcon",null),e([n()],v.prototype,"collapseTooltip",void 0),e([n()],v.prototype,"content",void 0),e([n()],v.prototype,"expanded",null),e([n()],v.prototype,"expandIcon",null),e([n()],v.prototype,"expandTooltip",void 0),e([n()],v.prototype,"focusTrapDisabled",void 0),e([n()],v.prototype,"group",null),e([n()],v.prototype,"icon",null),e([n()],v.prototype,"iconNumber",void 0),e([n()],v.prototype,"label",null),e([n(),h("esri/widgets/Expand/t9n/Expand")],v.prototype,"messages",void 0),e([n(),h("esri/t9n/common")],v.prototype,"messagesCommon",void 0),e([n()],v.prototype,"mode",void 0),e([n()],v.prototype,"placement",void 0),e([n()],v.prototype,"view",null),e([n({type:l})],v.prototype,"viewModel",void 0),v=e([s("esri.widgets.Expand")],v);const w=v;export{w as default};