@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
5 lines (4 loc) • 16.8 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import{b as F}from"./LGXLR3FX.js";import{a as g,b as v,c as m,d as z,f as B,h as S}from"./FZ76R5A4.js";import{k as L}from"./XDKVBD6O.js";import{a as U,b as G}from"./AYIAAZYA.js";import{a as O,b as R}from"./BVJFCLMH.js";import{a as I}from"./YXZ62PQO.js";import{a as N}from"./OQOKN4KP.js";import"./3FSOG4LN.js";import{a as D}from"./M7EAHGE3.js";import{d as H}from"./CKRTMNFR.js";import{b as E}from"./5RDOSP2E.js";import{g as M,u as b}from"./3ADX47DD.js";import{d as T}from"./HPN2C7M6.js";import"./JOSABGK6.js";import{a as k}from"./NNVH7JUI.js";import{E as $,F as h,L as P,R as w,c as y,d,q as f}from"./BJZTU5BQ.js";var u={container:"container",table:"table",scrim:"scrim",stack:"stack",tableContainer:"table-container",sticky:"sticky-pos",assistiveText:"assistive-text"},C={filterNoResults:"filter-no-results",filterActionsStart:"filter-actions-start",filterActionsEnd:"filter-actions-end"},q=y`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{position:relative;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%}.stack{--calcite-stack-padding-inline: 0;--calcite-stack-padding-block: 0}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index-sticky);background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`,W=`${v}, ${m}`,x=class extends ${constructor(){super(),this.dragSelector=m,this.focusableItems=[],this.handleSelector="calcite-sort-handle",this.listItems=[],this.listItemGroups=[],this.mutationObserver=D("mutation",()=>{this.willPerformFilter=!0,this.updateListItems()}),this.updateListItems=N(()=>{this.updateGroupItems();let{selectionAppearance:t,selectionMode:e,interactionMode:i,dragEnabled:l,el:s,filterEl:n,moveToItems:a,displayMode:r,scale:c}=this,p=Array.from(this.el.querySelectorAll(m));if(p.forEach(o=>{o.scale=c,o.selectionAppearance=t,o.selectionMode=e,o.interactionMode=i,o.closest(g)===s&&(o.moveToItems=a.filter(A=>A.element!==s&&!o.contains(A.element)),o.dragHandle=l,o.displayMode=r)}),this.parentListEl){this.setUpSorting();return}this.listItems=p,this.filterEnabled&&this.willPerformFilter&&(this.willPerformFilter=!1,this.dataForFilter=this.getItemData(),n&&(n.items=this.dataForFilter,this.filterAndUpdateData())),this.visibleItems=this.listItems.filter(o=>!o.closed&&!o.hidden),this.updateFilteredItems(),this.borderItems(),this.focusableItems=this.filteredItems.filter(o=>!o.disabled),this.setActiveListItem(),this.updateSelectedItems(),this.setUpSorting()},P.nextTick),this.visibleItems=[],this.willFilterEmit=!1,this.willPerformFilter=!1,this.messages=H({blocking:!0}),this.dataForFilter=[],this.hasFilterActionsEnd=!1,this.hasFilterActionsStart=!1,this.hasFilterNoResults=!1,this.moveToItems=[],this.disabled=!1,this.dragEnabled=!1,this.filterEnabled=!1,this.filteredData=[],this.filteredItems=[],this.interactionMode="interactive",this.loading=!1,this.displayMode="flat",this.scale="m",this.selectedItems=[],this.selectionAppearance="icon",this.selectionMode="none",this.calciteInternalListDefaultSlotChange=f({cancelable:!1}),this.calciteListChange=f({cancelable:!1}),this.calciteListDragEnd=f({cancelable:!1}),this.calciteListDragStart=f({cancelable:!1}),this.calciteListFilter=f({cancelable:!1}),this.calciteListMoveHalt=f({cancelable:!1}),this.calciteListOrderChange=f({cancelable:!1}),this.listen("calciteInternalListItemToggle",this.handleCalciteListItemToggle),this.listen("calciteInternalFocusPreviousItem",this.handleCalciteInternalFocusPreviousItem),this.listen("calciteInternalListItemActive",this.handleCalciteInternalListItemActive),this.listen("calciteListItemSelect",this.handleCalciteListItemSelect),this.listen("calciteInternalAssistiveTextChange",this.handleCalciteInternalAssistiveTextChange),this.listen("calciteSortHandleReorder",this.handleSortReorder),this.listen("calciteSortHandleMove",this.handleSortMove),this.listen("calciteInternalListItemSelect",this.handleCalciteInternalListItemSelect),this.listen("calciteInternalListItemSelectMultiple",this.handleCalciteInternalListItemSelectMultiple),this.listen("calciteInternalListItemChange",this.handleCalciteInternalListItemChange),this.listen("calciteInternalListItemGroupDefaultSlotChange",this.handleCalciteInternalListItemGroupDefaultSlotChange)}static{this.properties={assistiveText:[16,{},{state:!0}],dataForFilter:[16,{},{state:!0}],hasFilterActionsEnd:[16,{},{state:!0}],hasFilterActionsStart:[16,{},{state:!0}],hasFilterNoResults:[16,{},{state:!0}],moveToItems:[16,{},{state:!0}],hasActiveFilter:[16,{},{state:!0}],showNoResultsContainer:[16,{},{state:!0}],canPull:[0,{},{attribute:!1}],canPut:[0,{},{attribute:!1}],disabled:[7,{},{reflect:!0,type:Boolean}],dragEnabled:[7,{},{reflect:!0,type:Boolean}],filterEnabled:[7,{},{reflect:!0,type:Boolean}],filterPredicate:[0,{},{attribute:!1}],filterLabel:[3,{},{reflect:!0}],filterPlaceholder:[3,{},{reflect:!0}],filterProps:[0,{},{attribute:!1}],filterText:[3,{},{reflect:!0}],filteredData:[0,{},{attribute:!1}],filteredItems:[0,{},{attribute:!1}],group:[3,{},{reflect:!0}],interactionMode:[3,{},{reflect:!0}],label:1,loading:[7,{},{reflect:!0,type:Boolean}],messageOverrides:[0,{},{attribute:!1}],displayMode:[3,{},{reflect:!0}],numberingSystem:1,scale:[3,{},{reflect:!0}],selectedItems:[0,{},{attribute:!1}],selectionAppearance:[3,{},{reflect:!0}],selectionMode:[3,{},{reflect:!0}]}}static{this.styles=q}get hasActiveFilter(){return this.filterEnabled&&this.filterText&&this.filteredItems.length!==this.visibleItems.length}get showNoResultsContainer(){return this.filterEnabled&&this.filterText&&this.hasFilterNoResults&&this.visibleItems.length&&!this.filteredItems.length}putFailed(t){this.calciteListMoveHalt.emit(t)}async setFocus(){return await T(this),this.filterEnabled?this.filterEl?.setFocus():this.focusableItems.find(t=>t.active)?.setFocus()}connectedCallback(){super.connectedCallback(),this.connectObserver(),this.willPerformFilter=!0,this.updateListItems(),this.setUpSorting(),this.setParentList(),this.setListItemGroups()}async load(){this.handleInteractionModeWarning()}willUpdate(t){(t.has("filterText")||t.has("filterProps")||t.has("filterPredicate"))&&this.performFilter(),(t.has("filterEnabled")&&(this.hasUpdated||this.filterEnabled!==!1)||t.has("group")||t.has("dragEnabled")&&(this.hasUpdated||this.dragEnabled!==!1)||t.has("selectionMode")&&(this.hasUpdated||this.selectionMode!=="none")||t.has("selectionAppearance")&&(this.hasUpdated||this.selectionAppearance!=="icon")||t.has("displayMode")&&this.hasUpdated||t.has("scale")&&this.hasUpdated||t.has("filterPredicate")&&this.hasUpdated)&&this.handleListItemChange()}updated(){O(this)}disconnectedCallback(){super.disconnectedCallback(),this.disconnectObserver(),G(this)}handleListItemChange(){this.willPerformFilter=!0,this.updateListItems()}handleCalciteListItemToggle(t){this.parentListEl||(t.stopPropagation(),this.borderItems())}handleCalciteInternalFocusPreviousItem(t){if(this.parentListEl)return;t.stopPropagation();let{focusableItems:e}=this,l=e.findIndex(s=>s.active)-1;e[l]&&this.focusRow(e[l])}handleCalciteInternalListItemActive(t){if(this.parentListEl)return;t.stopPropagation();let e=t.target,{listItems:i}=this;i.forEach(l=>{l.active=l===e})}handleCalciteListItemSelect(){this.parentListEl||this.updateSelectedItems(!0)}handleCalciteInternalAssistiveTextChange(t){this.assistiveText=t.detail.message,t.stopPropagation()}handleSortReorder(t){this.parentListEl||t.defaultPrevented||(t.preventDefault(),this.handleReorder(t))}handleSortMove(t){this.parentListEl||t.defaultPrevented||(t.preventDefault(),this.handleMove(t))}handleCalciteInternalListItemSelect(t){if(this.parentListEl)return;t.stopPropagation();let e=t.target,{listItems:i,selectionMode:l}=this;e.selected&&(l==="single"||l==="single-persist")&&i.forEach(s=>s.selected=s===e),this.updateSelectedItems()}handleCalciteInternalListItemSelectMultiple(t){if(this.parentListEl)return;t.stopPropagation();let{target:e,detail:i}=t,{focusableItems:l,lastSelectedInfo:s}=this,n=e;if(i.selectMultiple&&s){let a=l.indexOf(n),r=l.indexOf(s.selectedItem),c=Math.min(r,a),p=Math.max(r,a);l.slice(c,p+1).forEach(o=>o.selected=s.selected)}else this.lastSelectedInfo={selectedItem:n,selected:n.selected}}handleCalciteInternalListItemChange(t){this.parentListEl||(t.stopPropagation(),this.updateListItems())}handleCalciteInternalListItemGroupDefaultSlotChange(t){t.stopPropagation()}connectObserver(){this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0})}disconnectObserver(){this.mutationObserver?.disconnect()}setUpSorting(){let{dragEnabled:t,defaultSlotEl:e}=this;t&&(e&&B(e),U(this))}onGlobalDragStart(){this.disconnectObserver()}onGlobalDragEnd(){this.connectObserver()}onDragEnd(t){this.calciteListDragEnd.emit(t)}onDragStart(t){t.dragEl.sortHandleOpen=!1,this.calciteListDragStart.emit(t)}onDragSort(t){this.setParentList(),this.updateListItems(),this.calciteListOrderChange.emit(t)}setParentList(){this.parentListEl=this.el.parentElement?.closest(g)}handleDefaultSlotChange(){this.parentListEl&&this.calciteInternalListDefaultSlotChange.emit()}setListItemGroups(){this.listItemGroups=Array.from(this.el.querySelectorAll(v))}handleFilterActionsStartSlotChange(t){this.hasFilterActionsStart=b(t)}handleFilterActionsEndSlotChange(t){this.hasFilterActionsEnd=b(t)}handleFilterNoResultsSlotChange(t){this.hasFilterNoResults=b(t)}setActiveListItem(){let{focusableItems:t}=this;t.some(e=>e.active)||t[0]&&(t[0].active=!0)}async updateSelectedItems(t=!1){await this.updateComplete,this.selectedItems=this.visibleItems.filter(e=>e.selected),t&&this.calciteListChange.emit()}filterElements({el:t,filteredItems:e,visibleParents:i}){let l=!i.has(t)&&!e.includes(t);t.filterHidden=l;let s=t.parentElement.closest(W);s&&(l||i.add(s),this.filterElements({el:s,filteredItems:e,visibleParents:i}))}allParentListItemsExpanded(t){let e=t.parentElement?.closest(m);if(e){if(!e.expanded)return!1}else return!0;return this.allParentListItemsExpanded(e)}borderItems(){let t=this.visibleItems.filter(e=>!e.filterHidden&&this.allParentListItemsExpanded(e));t.forEach(e=>e.bordered=e!==t[t.length-1])}updateFilteredItems(){let{visibleItems:t,filteredData:e,filterText:i,filterPredicate:l}=this,s=t?.filter(r=>t.every(c=>c===r||!r.contains(c))),n=l?t.filter(l):i?e.map(r=>r.el):t||[],a=new WeakSet;s.forEach(r=>this.filterElements({el:r,filteredItems:n,visibleParents:a})),this.filteredItems=n,this.willFilterEmit&&(this.willFilterEmit=!1,this.calciteListFilter.emit())}updateFilteredData(){let{filterEl:t}=this;t&&(t.filteredItems&&(this.filteredData=t.filteredItems),this.updateListItems())}async filterAndUpdateData(){await this.filterEl?.filter(this.filterText),this.updateFilteredData()}get effectiveFilterProps(){return this.filterProps?this.filterProps.filter(t=>t!=="el"):["description","label","metadata","heading"]}performFilter(){let{filterEl:t,filterText:e,effectiveFilterProps:i}=this;t&&(t.value=e,t.filterProps=i,this.filterAndUpdateData())}setDefaultSlotEl(t){this.defaultSlotEl=t}setFilterEl(t){this.filterEl=t,this.performFilter()}handleFilterChange(t){t.stopPropagation();let{value:e}=t.currentTarget;this.filterText=e,this.willFilterEmit=!0,this.updateFilteredData()}getItemData(){return this.listItems.map(t=>({label:t.label,description:t.description,metadata:t.metadata,heading:this.getGroupHeading(t),el:t}))}getGroupHeading(t){return this.listItemGroups.filter(i=>i.contains(t)).map(i=>i.heading)}updateGroupItems(){let{el:t,group:e,scale:i}=this,l=M(t),s=e?Array.from(l.querySelectorAll(`${g}[group="${e}"]`)).filter(a=>!a.disabled&&a.dragEnabled):[];this.moveToItems=s.map(a=>({element:a,label:a.label??a.id,id:k()})),Array.from(this.el.querySelectorAll(v)).forEach(a=>{a.scale=i})}focusRow(t){let{focusableItems:e}=this;t&&(e.forEach(i=>i.active=i===t),t.setFocus())}isNavigable(t){let e=t.parentElement?.closest(m);return e?e.expanded&&this.isNavigable(e):!0}handleListKeydown(t){if(t.defaultPrevented||this.parentListEl)return;let{key:e}=t,i=this.focusableItems.filter(s=>this.isNavigable(s)),l=i.findIndex(s=>s.active);if(e==="ArrowDown"){t.preventDefault();let s=t.target===this.filterEl?0:l+1;i[s]&&this.focusRow(i[s])}else if(e==="ArrowUp"){if(t.preventDefault(),l===0&&this.filterEnabled){this.filterEl?.setFocus();return}let s=l-1;i[s]&&this.focusRow(i[s])}else if(e==="Home"){t.preventDefault();let s=i[0];s&&this.focusRow(s)}else if(e==="End"){t.preventDefault();let s=i[i.length-1];s&&this.focusRow(s)}}handleInteractionModeWarning(){this.interactionMode==="static"&&this.selectionMode!=="none"&&this.selectionAppearance==="border"&&console.warn('selection-appearance="border" requires interaction-mode="interactive"')}handleMove(t){let{moveTo:e}=t.detail,i=t.target,l=i?.parentElement,s=e.element,a=Array.from(l.children).filter(S).indexOf(i),r=0;if(l){if(l.canPull?.({toEl:s,fromEl:l,dragEl:i,newIndex:r,oldIndex:a})===!1){this.calciteListMoveHalt.emit({toEl:s,fromEl:l,dragEl:i,oldIndex:a,newIndex:r});return}if(s.canPut?.({toEl:s,fromEl:l,dragEl:i,newIndex:r,oldIndex:a})===!1){s.putFailed({toEl:s,fromEl:l,dragEl:i,oldIndex:a,newIndex:r});return}i.sortHandleOpen=!1,this.disconnectObserver(),s.prepend(i),z(i),this.updateListItems(),this.connectObserver(),this.calciteListOrderChange.emit({dragEl:i,fromEl:l,toEl:s,newIndex:r,oldIndex:a})}}handleReorder(t){let{reorder:e}=t.detail,i=t.target,l=i?.parentElement;if(!l)return;i.sortHandleOpen=!1;let s=Array.from(l.children).filter(S),n=s.length-1,a=s.indexOf(i),r=a;switch(e){case"top":r=0;break;case"bottom":r=n;break;case"up":r=a===0?0:a-1;break;case"down":r=a===n?n:a+1;break}this.disconnectObserver();let c=e==="up"||e==="top"?s[r]:s[r].nextSibling;l.insertBefore(i,c),this.updateListItems(),this.connectObserver(),this.calciteListOrderChange.emit({dragEl:i,fromEl:l,toEl:l,newIndex:r,oldIndex:a})}render(){let{loading:t,label:e,disabled:i,dataForFilter:l,filterEnabled:s,filterPlaceholder:n,filterText:a,filterLabel:r,hasFilterActionsStart:c,hasFilterActionsEnd:p,effectiveFilterProps:o}=this;return R({disabled:this.disabled,children:d`<div class=${h(u.container)}>${this.dragEnabled?d`<span aria-live=assertive class=${h(u.assistiveText)}>${this.assistiveText}</span>`:null}${this.renderItemAriaLive()}${t?d`<calcite-scrim class=${h(u.scrim)} .loading=${t}></calcite-scrim>`:null}<div .ariaBusy=${t} .ariaLabel=${e||""} class=${h(u.table)} =${this.handleListKeydown} role=treegrid>${s||c||p?d`<div class=${h(u.sticky)} role=rowgroup><div role=row><div role=columnheader><calcite-stack class=${h(u.stack)}><slot name=${C.filterActionsStart} =${this.handleFilterActionsStartSlotChange} slot=${F.actionsStart}></slot><calcite-filter .ariaLabel=${n} .disabled=${i} .filterProps=${o} .items=${l} .label=${r} =${this.handleFilterChange} .placeholder=${n} .scale=${this.scale} .value=${a} ${E(this.setFilterEl)}></calcite-filter><slot name=${C.filterActionsEnd} =${this.handleFilterActionsEndSlotChange} slot=${F.actionsEnd}></slot></calcite-stack></div></div></div>`:null}<div class=${h(u.tableContainer)} role=rowgroup><slot =${this.handleDefaultSlotChange} ${E(this.setDefaultSlotEl)}></slot></div></div><div aria-live=polite data-test-id=no-results-container .hidden=${!this.showNoResultsContainer}><slot name=${C.filterNoResults} =${this.handleFilterNoResultsSlotChange}></slot></div></div>`})}renderItemAriaLive(){let{messages:t,filteredItems:e,parentListEl:i,messages:{_lang:l},numberingSystem:s}=this;return L.numberFormatOptions={locale:l,numberingSystem:s},i?null:d`<div aria-live=polite class=${h(u.assistiveText)}>${this.hasActiveFilter?I("aria-filter-enabled",d`<div>${t.filterEnabled}</div>`):null}${I("aria-item-count",d`<div>${t.total.replace("{count}",L.localize(e.length.toString()))}</div>`)}${e.length?I("aria-item-list",d`<ol>${e.map(n=>d`<li>${n.label}</li>`)}</ol>`):null}</div>`}};w("calcite-list",x);export{x as List};