@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
5 lines (4 loc) • 6.03 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{a as G,b as T}from"./AYIAAZYA.js";import{a as O,b as x}from"./BVJFCLMH.js";import{a as y}from"./OQOKN4KP.js";import{a as E}from"./M7EAHGE3.js";import{g as C,n as I}from"./3ADX47DD.js";import{d as S}from"./HPN2C7M6.js";import"./JOSABGK6.js";import{a as B}from"./NNVH7JUI.js";import{E as g,F as c,L as v,R as k,c as f,d as h,q as n}from"./BJZTU5BQ.js";function D(d){return d.tagName==="CALCITE-BLOCK"}var p={container:"container",groupContainer:"group-container",scrim:"scrim",assistiveText:"assistive-text"},u="calcite-block-group",m="calcite-block",P=f`: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}.container{position:relative}.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}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;function w(d){let e=d.assignedElements({flatten:!0}).filter(s=>s.matches(m));e.forEach(s=>{s.setPosition=e.indexOf(s)+1,s.setSize=e.length})}var b=class extends g{constructor(){super(),this.dragSelector=m,this.handleSelector="calcite-sort-handle",this.mutationObserver=E("mutation",()=>{this.updateBlockItems()}),this.updateBlockItems=y(()=>{this.updateGroupItems();let{dragEnabled:e,el:s,moveToItems:a}=this;Array.from(this.el.querySelectorAll(m)).forEach(t=>{t.closest(u)===s&&(t.moveToItems=a.filter(l=>l.element!==s&&!t.contains(l.element)),t.dragHandle=e)}),this.setUpSorting()},v.nextTick),this.moveToItems=[],this.disabled=!1,this.dragEnabled=!1,this.loading=!1,this.calciteBlockGroupDragEnd=n({cancelable:!1}),this.calciteBlockGroupDragStart=n({cancelable:!1}),this.calciteBlockGroupOrderChange=n({cancelable:!1}),this.calciteBlockGroupMoveHalt=n({cancelable:!1}),this.listen("calciteInternalAssistiveTextChange",this.handleCalciteInternalAssistiveTextChange),this.listen("calciteSortHandleReorder",this.handleSortReorder),this.listen("calciteSortHandleMove",this.handleSortMove)}static{this.properties={assistiveText:[16,{},{state:!0}],moveToItems:[16,{},{state:!0}],canPull:[0,{},{attribute:!1}],canPut:[0,{},{attribute:!1}],disabled:[7,{},{reflect:!0,type:Boolean}],dragEnabled:[7,{},{reflect:!0,type:Boolean}],group:[3,{},{reflect:!0}],label:1,loading:[7,{},{reflect:!0,type:Boolean}]}}static{this.styles=P}async setFocus(){await S(this),I(this.el)}putFailed(e){this.calciteBlockGroupMoveHalt.emit(e)}connectedCallback(){super.connectedCallback(),this.connectObserver(),this.updateBlockItems(),this.setUpSorting(),this.setParentBlockGroup()}willUpdate(e){(e.has("group")||e.has("dragEnabled")&&(this.hasUpdated||this.dragEnabled!==!1))&&this.updateBlockItems()}updated(){O(this)}disconnectedCallback(){super.disconnectedCallback(),this.disconnectObserver(),T(this)}updateGroupItems(){let{el:e,group:s}=this,a=C(e),r=s?Array.from(a.querySelectorAll(`${u}[group="${s}"]`)).filter(t=>!t.disabled&&t.dragEnabled):[];this.moveToItems=r.map(t=>({element:t,label:t.label??t.id,id:B()}))}handleCalciteInternalAssistiveTextChange(e){this.assistiveText=e.detail.message,e.stopPropagation()}handleSortReorder(e){this.parentBlockGroupEl||e.defaultPrevented||(e.preventDefault(),this.handleReorder(e))}handleSortMove(e){this.parentBlockGroupEl||e.defaultPrevented||(e.preventDefault(),this.handleMove(e))}connectObserver(){this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0})}disconnectObserver(){this.mutationObserver?.disconnect()}setUpSorting(){let{dragEnabled:e}=this;e&&G(this)}onGlobalDragStart(){this.disconnectObserver()}onGlobalDragEnd(){this.connectObserver()}onDragEnd(e){this.calciteBlockGroupDragEnd.emit(e)}onDragStart(e){e.dragEl.sortHandleOpen=!1,this.calciteBlockGroupDragStart.emit(e)}onDragSort(e){this.setParentBlockGroup(),this.updateBlockItems(),this.calciteBlockGroupOrderChange.emit(e)}setParentBlockGroup(){this.parentBlockGroupEl=this.el.parentElement?.closest(u)}handleDefaultSlotChange(e){w(e.target)}handleMove(e){let{moveTo:s}=e.detail,a=e.target,r=a?.parentElement,t=s.element,i=Array.from(r.children).filter(D).indexOf(a),o=0;if(r){if(r.canPull?.({toEl:t,fromEl:r,dragEl:a,newIndex:o,oldIndex:i})===!1){this.calciteBlockGroupMoveHalt.emit({toEl:t,fromEl:r,dragEl:a,oldIndex:i,newIndex:o});return}if(t.canPut?.({toEl:t,fromEl:r,dragEl:a,newIndex:o,oldIndex:i})===!1){t.putFailed({toEl:t,fromEl:r,dragEl:a,oldIndex:i,newIndex:o});return}a.sortHandleOpen=!1,this.disconnectObserver(),t.prepend(a),this.updateBlockItems(),this.connectObserver(),this.calciteBlockGroupOrderChange.emit({dragEl:a,fromEl:r,toEl:t,newIndex:o,oldIndex:i})}}handleReorder(e){let{reorder:s}=e.detail,a=e.target,r=a?.parentElement;if(!r)return;a.sortHandleOpen=!1;let t=Array.from(r.children).filter(D),l=t.length-1,i=t.indexOf(a),o=i;switch(s){case"top":o=0;break;case"bottom":o=l;break;case"up":o=i===0?0:i-1;break;case"down":o=i===l?l:i+1;break}this.disconnectObserver();let $=s==="up"||s==="top"?t[o]:t[o].nextSibling;r.insertBefore(a,$),this.updateBlockItems(),this.connectObserver(),this.calciteBlockGroupOrderChange.emit({dragEl:a,fromEl:r,toEl:r,newIndex:o,oldIndex:i})}render(){let{loading:e,label:s}=this;return x({disabled:this.disabled,children:h`<div class=${c(p.container)}>${this.dragEnabled?h`<span aria-live=assertive class=${c(p.assistiveText)}>${this.assistiveText}</span>`:null}${e?h`<calcite-scrim class=${c(p.scrim)} .loading=${e}></calcite-scrim>`:null}<div .ariaBusy=${e} .ariaLabel=${s||""} class=${c(p.groupContainer)} role=group><slot =${this.handleDefaultSlotChange}></slot></div></div>`})}};k("calcite-block-group",b);export{b as BlockGroup};