@arcgis/core/widgets/FeatureTable/Grid/Column.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.33/esri/copyright.txt for details.
*/
import{_ as e}from"../../../chunks/tslib.es6.js";import t from"../../../core/Accessor.js";import{watch as i,when as n,initial as o}from"../../../core/reactiveUtils.js";import{renderingSanitizer as s}from"../../../core/sanitizerUtils.js";import{property as r}from"../../../core/accessorSupport/decorators/property.js";import"../../../core/has.js";import"../../../core/Logger.js";import"../../../core/RandomLCG.js";import{subclass as l}from"../../../core/accessorSupport/decorators/subclass.js";import{css as a}from"./ColumnCSS.js";import{isEmptyStringOrWhitespace as c}from"../support/tableUtils.js";import{autoLink as d}from"../../support/uriUtils.js";import{setFocus as p}from"../../support/widgetUtils.js";let u=class extends t{constructor(e){super(e),this._menuIsOpen=!1,this.autoWidth=!1,this.cellValueFormatFunction=({root:e,rowData:t,value:i})=>{const{formatFunction:n}=this,o=s.sanitize(i);if(n&&t){const{index:i,item:{attachments:s,feature:r,relatedRecords:l}}=t;return n({attachments:s,column:this,feature:r,index:i,relatedRecords:l,value:o,virtualIndex:this.getVirtualRowIndex(e),field:void 0})}return o},this.description=null,this.direction=null,this.fieldName=null,this.flexGrow=1,this.footerRenderFunction=null,this.formatFunction=null,this.frozen=!1,this.frozenToEnd=!1,this.grid=null,this.headerRenderFunction=e=>{const{root:t}=e,i=this.createHeaderContent();this.removeCellContent(t),t.appendChild(i)},this.hidden=!1,this.icon=null,this.iconText=null,this.initialSortPriority=null,this.label=null,this.labelTooltipText=null,this.menuConfig=null,this.messages=null,this.messagesCommon=null,this.messagesURIUtils=null,this.renderFunction=({root:e,rowData:t})=>{const i=this.getCellValue(t),n=this.cellValueFormatFunction({root:e,rowData:t,value:i});let o=null;if(o=n instanceof HTMLElement?n:d(this.messagesURIUtils,n),this.removeCellContent(e),o instanceof HTMLElement)e.removeAttribute("title"),e.appendChild(o);else if(null!=o){const t=o.toString();e.innerHTML=t,e.title=t}},this.resizable=!0,this.sortable=!1,this.store=null,this.tableTimeZone=null,this.textAlign="start",this.textWrap=!1,this.timeZone=null,this.visibleElements=null,this.width=200}initialize(){const{fieldName:e}=this;this._set("sortElement",this.createSortElement()),this.sortElement.setAttribute("path",e),this.addHandles([i((()=>this.direction),(e=>{const{sortElement:t}=this;this.sortable&&t&&(e?this.sortElement.direction!==e&&t.setAttribute("direction",e):t.removeAttribute("direction"))})),n((()=>this.grid?.isReady&&this.sortElement),(()=>{const{direction:e,grid:t,hidden:i,sortElement:n}=this;i&&e&&n&&t&&!t.hasSorter(n)&&t.addSorter(n)}),o),i((()=>[this.timeZone,this.icon,this.iconText,this.labelTooltipText]),(()=>this.grid?.requestContentUpdate())),i((()=>this.hidden),(()=>this.closeMenu())),i((()=>this.fieldName),(e=>{const{sortElement:t}=this;t&&t.path!==e&&t.setAttribute("path",e)})),i((()=>[this.effectiveLabel,this.labelTooltipText]),(([e,t])=>{const{sortElement:i}=this;i&&(i.setAttribute("title",t||e),i.textContent=e)}))])}get _headerRequiresTextContainer(){return!(!this.sortable&&""===this.effectiveLabel&&null==this.effectiveDescription)}get customMenuItems(){return this.menuConfig?.items?.map((({disabled:e,hidden:t,icon:i,iconClass:n,label:o,selected:s,clickFunction:r})=>this.createCalciteDropdownItem({disabled:e,hidden:t,iconClass:n,iconStart:i,selected:s,textContent:o,onclick:e=>r(e)})))??[]}get defaultMenuItems(){if(!this.sortable)return[];const e=this.messages,t=[],i=this.visibleElements?.columnMenuItems;if(!1!==i?.sortAscending){const i=this.createCalciteDropdownItem({iconStart:"sort-ascending-arrow",textContent:e?.sortAsc,onclick:()=>this.direction="asc"});t.push(i)}if(!1!==i?.sortDescending){const i=this.createCalciteDropdownItem({iconStart:"sort-descending-arrow",textContent:e?.sortDesc,onclick:()=>this.direction="desc"});t.push(i)}return t}get effectiveDescription(){const{description:e}=this;return c(e)?null:s.sanitize(e)}get effectiveLabel(){return s.sanitize(this.label||this.fieldName)}get iconNode(){const{icon:e,iconText:t}=this,i=t?s.sanitize(t):void 0;return e?this.createCalciteIcon({icon:e,textLabel:i}):null}set invalid(e){this._set("invalid",e),this.grid?.generateCellPartNames()}get invalid(){return this._get("invalid")??!1}get menu(){const{customMenuItems:e,defaultMenuItems:t,menuConfig:i}=this,n=!!i?.open,o=this.createCalciteAction({icon:i?.icon??"ellipsis",text:this.messages?.menu??"",slot:"trigger"}),s=document.createElement("calcite-dropdown");if(s.maxItems=i?.maxItems??4,s.placement="top-end",s.overlayPositioning="fixed",s.scale=i?.scale??"m",n&&(s.open=n,this._menuIsOpen=!0),s.appendChild(o),s.addEventListener("calciteDropdownOpen",(()=>this._menuIsOpen=!0)),s.addEventListener("calciteDropdownClose",(()=>this._menuIsOpen=!1)),s.onkeydown=this._stopPropagationOnSelect,s.addEventListener("mousewheel",(e=>{e.stopPropagation()})),t.length){const e=s.appendChild(document.createElement("calcite-dropdown-group"));e.selectionMode="none",e.append(...t)}if(e.length){const t=s.appendChild(document.createElement("calcite-dropdown-group"));t.selectionMode=i?.selectionMode??"none",t.append(...e)}return s}get menuItems(){return[...this.defaultMenuItems,...this.customMenuItems]}get menuIsOpen(){return this._menuIsOpen}get menuIsVisible(){return!(!1===this.visibleElements?.columnMenus||!this.menuItems.length)}closeMenu(){this.menu.open=!1}createSortElement(){const{effectiveLabel:e,direction:t,fieldName:i,initialSortPriority:n}=this,o=document.createElement("vaadin-grid-sorter");return o.classList.add(a.sorter),o.setAttribute("path",i),o.setAttribute("title",this.labelTooltipText||e),o.textContent=e,t&&o.setAttribute("direction",t),null!=n&&(o._initialOrder=n),o.addEventListener("direction-changed",(()=>{this.direction!==o.direction&&this._set("direction",o.direction)})),o}createCalciteAction(e){const t=document.createElement("calcite-action"),{alignment:i,appearance:n,className:o,disabled:s,icon:r,label:l,scale:a,slot:c,text:d,textEnabled:p,onclick:u}=e;return t.alignment=i??"center",t.appearance=n??"transparent",t.className=o??"",t.disabled=!!s,t.icon=r??"",t.label=l??"",t.scale=a??"s",t.slot=c??"",t.text=t.title=d??"",t.textEnabled=!!p,t.onclick=u??null,t}createCalciteButton(e){const t=document.createElement("calcite-button"),{alignment:i,appearance:n,className:o,disabled:s,iconEnd:r,iconFlipRtl:l,kind:a,loading:c,onclick:d,scale:p,textContent:u,title:m,width:h}=e;return t.alignment=i??"center",t.className=o??"",t.scale=p??"s",t.appearance=n??"transparent",t.disabled=!!s,t.iconEnd=r??"",l&&(t.iconFlipRtl=l),t.kind=a??"brand",t.loading=!!c,t.textContent=u??"",m&&(t.title=m),t.width=h??"auto",t.onclick=d??null,t}createCalciteDropdownItem(e){const t=document.createElement("calcite-dropdown-item"),{disabled:i,hidden:n,iconClass:o,iconStart:s,textContent:r,onclick:l,selected:c}=e,d=r??"";if(o&&!s){const e=document.createElement("span"),i=document.createElement("span");i.classList.add(a.headerMenuIcon,o),e.textContent=e.title=d,e.insertBefore(i,e.firstChild),t.appendChild(e)}else t.iconStart=s??"",t.textContent=t.title=d;return t.disabled=!!i,t.hidden="function"==typeof n?n():!!n,t.selected=!!c,l&&(t.addEventListener("calciteDropdownItemSelect",l),t.onkeydown=this._stopPropagationOnSelect),t}createCalciteIcon(e){const{effectiveLabel:t}=this,{icon:i,scale:n,textLabel:o}=e,s=document.createElement("calcite-icon"),r=o??t;return s.icon=i,s.scale=n??"s",s.textLabel=r,s.title=r,s}createHeaderContent(){const{effectiveDescription:e,effectiveLabel:t,iconNode:i}=this,n=document.createElement("div");if(n.classList.add(a.headerContent),i&&n.appendChild(i),!this._headerRequiresTextContainer)return n;const o=n.appendChild(document.createElement("div"));return this.sortable?o.appendChild(this.sortElement):""!==t&&o.appendChild(this._createHeaderTextElement({label:t,cssClass:a.headerLabel,title:this.labelTooltipText})),null!=e&&!1!==this.visibleElements?.columnDescriptions&&o.appendChild(this._createHeaderTextElement({label:e,cssClass:a.headerDescription})),this.menuIsVisible&&n.appendChild(this.menu),n}getCellValue(e){return e?.item.feature.attributes?.[this.fieldName]}getVirtualRowIndex(e){const t=this.grid?.getRowContainingNode(e);return t?.parentElement?[...t.parentElement.children].indexOf(t):-1}removeCellContent(e){if(e&&e.firstChild)try{for(;e?.firstChild;)e?.removeChild(e.firstChild)}catch(t){}}openMenu(){this.menuIsVisible&&(this.menu.open=!0,p(this.menuItems[0]))}sort(){this.sortable&&this.sortElement?.click()}_stopPropagationOnSelect(e){"Enter"!==e.key&&" "!==e.key||e.stopPropagation()}_createHeaderTextElement({cssClass:e,label:t,title:i}){const n=document.createElement("span");n.classList.add(e);const o=n.appendChild(document.createElement("span"));return o.textContent=t,o.setAttribute("title",i||t),n}};e([r()],u.prototype,"_headerRequiresTextContainer",null),e([r()],u.prototype,"_menuIsOpen",void 0),e([r()],u.prototype,"autoWidth",void 0),e([r()],u.prototype,"cellValueFormatFunction",void 0),e([r()],u.prototype,"customMenuItems",null),e([r()],u.prototype,"defaultMenuItems",null),e([r()],u.prototype,"description",void 0),e([r()],u.prototype,"direction",void 0),e([r()],u.prototype,"effectiveDescription",null),e([r()],u.prototype,"effectiveLabel",null),e([r({constructOnly:!0})],u.prototype,"fieldName",void 0),e([r()],u.prototype,"flexGrow",void 0),e([r()],u.prototype,"footerRenderFunction",void 0),e([r()],u.prototype,"formatFunction",void 0),e([r()],u.prototype,"frozen",void 0),e([r()],u.prototype,"frozenToEnd",void 0),e([r()],u.prototype,"grid",void 0),e([r()],u.prototype,"iconNode",null),e([r()],u.prototype,"invalid",null),e([r()],u.prototype,"headerRenderFunction",void 0),e([r()],u.prototype,"hidden",void 0),e([r()],u.prototype,"icon",void 0),e([r()],u.prototype,"iconText",void 0),e([r({constructOnly:!0})],u.prototype,"initialSortPriority",void 0),e([r()],u.prototype,"label",void 0),e([r()],u.prototype,"labelTooltipText",void 0),e([r()],u.prototype,"menu",null),e([r()],u.prototype,"menuItems",null),e([r()],u.prototype,"menuConfig",void 0),e([r()],u.prototype,"menuIsOpen",null),e([r()],u.prototype,"menuIsVisible",null),e([r()],u.prototype,"messages",void 0),e([r()],u.prototype,"messagesCommon",void 0),e([r()],u.prototype,"messagesURIUtils",void 0),e([r()],u.prototype,"renderFunction",void 0),e([r()],u.prototype,"resizable",void 0),e([r()],u.prototype,"sortable",void 0),e([r({readOnly:!0})],u.prototype,"sortElement",void 0),e([r()],u.prototype,"store",void 0),e([r()],u.prototype,"tableTimeZone",void 0),e([r()],u.prototype,"textAlign",void 0),e([r()],u.prototype,"textWrap",void 0),e([r()],u.prototype,"timeZone",void 0),e([r()],u.prototype,"visibleElements",void 0),e([r()],u.prototype,"width",void 0),u=e([l("esri.widgets.FeatureTable.Grid.Column")],u);const m=u;export{m as default};