@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
5 lines (4 loc) • 5.66 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 y}from"./YCSOVIAT.js";import{a as S,b as $}from"./BVJFCLMH.js";import{a as n}from"./YXZ62PQO.js";import"./OQOKN4KP.js";import{d as v}from"./CKRTMNFR.js";import{b as g}from"./5RDOSP2E.js";import"./3ADX47DD.js";import{d as w}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as f,F as c,R as b,c as u,d as a,h as l,q as i}from"./BJZTU5BQ.js";var D={handle:"handle",dropdown:"dropdown"},I={drag:"drag",blank:"blank"},p={label:"{label}",position:"{position}",total:"{total}"},T=["top","up","down","bottom"],H=u`: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:flex}.dropdown{block-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`,h=class extends f{constructor(){super(...arguments),this.disabled=!1,this.messages=v({blocking:!0}),this.moveToItems=[],this.open=!1,this.overlayPositioning="absolute",this.placement=y,this.scale="m",this.calciteSortHandleBeforeClose=i({cancelable:!1}),this.calciteSortHandleBeforeOpen=i({cancelable:!1}),this.calciteSortHandleClose=i({cancelable:!1}),this.calciteSortHandleMove=i({cancelable:!0}),this.calciteSortHandleOpen=i({cancelable:!1}),this.calciteSortHandleReorder=i({cancelable:!0})}static{this.properties={hasSetInfo:[16,{},{state:!0}],isSetDisabled:[16,{},{state:!0}],disabled:[7,{},{reflect:!0,type:Boolean}],flipPlacements:[0,{},{attribute:!1}],label:1,messageOverrides:[0,{},{attribute:!1}],messages:[0,{},{attribute:!1}],moveToItems:[0,{},{attribute:!1}],open:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],placement:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}],setPosition:[9,{},{type:Number}],setSize:[9,{},{type:Number}],widthScale:[3,{},{reflect:!0}]}}static{this.styles=H}get hasSetInfo(){return typeof this.setPosition=="number"&&typeof this.setSize=="number"}get isSetDisabled(){let{setPosition:e,setSize:t,moveToItems:o}=this;return this.hasSetInfo?e<1||t<1||t<2&&o.length<1:!1}async setFocus(){await w(this),this.dropdownEl?.setFocus()}willUpdate(e){e.has("open")&&(this.hasUpdated||this.open!==!1)&&this.openHandler()}updated(){S(this)}openHandler(){if(this.disabled){this.open=!1;return}this.dropdownEl&&(this.dropdownEl.open=this.open)}setDropdownEl(e){e&&(this.dropdownEl=e,this.openHandler())}getLabel(){let{label:e,messages:t,setPosition:o,setSize:s}=this;if(!this.hasSetInfo)return e??"";let r=e?t.repositionLabel.replace(p.label,e):t.reposition;return r=r.replace(p.position,o?o.toString():""),r.replace(p.total,s?s.toString():"")}handleBeforeOpen(e){e.stopPropagation(),this.calciteSortHandleBeforeOpen.emit()}handleOpen(e){e.stopPropagation(),this.calciteSortHandleOpen.emit(),this.open=!0}handleBeforeClose(e){e.stopPropagation(),this.calciteSortHandleBeforeClose.emit()}handleClose(e){e.stopPropagation(),this.calciteSortHandleClose.emit(),this.open=!1}handleReorder(e){this.calciteSortHandleReorder.emit({reorder:e.target.dataset.value})}handleMoveTo(e){let t=e.target.dataset.id,o=this.moveToItems.find(s=>s.id===t);this.calciteSortHandleMove.emit({moveTo:o})}render(){let{disabled:e,flipPlacements:t,open:o,overlayPositioning:s,placement:r,scale:m,widthScale:P}=this,d=this.getLabel(),B=e||this.isSetDisabled;return $({disabled:e,children:a`<calcite-dropdown class=${c(D.dropdown)} .disabled=${B} .flipPlacements=${t} =${this.handleBeforeClose} =${this.handleBeforeOpen} =${this.handleClose} =${this.handleOpen} .overlayPositioning=${s} .placement=${r} .scale=${m} .widthScale=${P} ${g(this.setDropdownEl)}><calcite-action .active=${o} appearance=transparent class=${c(D.handle)} .dragHandle=${!0} .icon=${e?I.blank:I.drag} .label=${d} .scale=${m} slot=trigger .text=${d} title=${d??l}></calcite-action>${this.renderGroup()}${this.renderMoveToGroup()}</calcite-dropdown>`})}renderMoveToItem(e){return n(e.id,a`<calcite-dropdown-item data-id=${e.id??l} .label=${e.label} =${this.handleMoveTo}>${e.label}</calcite-dropdown-item>`)}renderGroup(){return this.hasSetInfo?n("reorder",a`<calcite-dropdown-group .groupTitle=${this.messages.reorder} .scale=${this.scale} selection-mode=none>${this.renderTop()}${this.renderUp()}${this.renderDown()}${this.renderBottom()}</calcite-dropdown-group>`):null}renderMoveToGroup(){let{messages:e,moveToItems:t,scale:o}=this;return t.length?n("move-to-items",a`<calcite-dropdown-group .groupTitle=${e.moveTo} .scale=${o} selection-mode=none>${t.map(s=>this.renderMoveToItem(s))}</calcite-dropdown-group>`):null}renderDropdownItem(e,t){return n(T[e],a`<calcite-dropdown-item data-value=${T[e]??l} .label=${t} =${this.handleReorder}>${t}</calcite-dropdown-item>`)}renderTop(){let{setPosition:e}=this;return e!==1&&e!==2?this.renderDropdownItem(0,this.messages.moveToTop):null}renderUp(){return this.setPosition!==1?this.renderDropdownItem(1,this.messages.moveUp):null}renderDown(){return this.setPosition!==this.setSize?this.renderDropdownItem(2,this.messages.moveDown):null}renderBottom(){let{setPosition:e,setSize:t}=this;return e!==t&&e!==t-1?this.renderDropdownItem(3,this.messages.moveToBottom):null}};b("calcite-sort-handle",h);export{h as SortHandle};