@xplortech/apollo-core 2.8.1 → 2.10.0

package/dist/components/p-3qMYyqTe.js

@@ -0,0 +1 @@
+import{p as t,H as s,d as i,h as e,c as o,t as n}from"./p-BT_Lq3Vd.js";import{c as l,a as h,o as a,f as r,s as d,h as c}from"./p-CFpsSZyr.js";import{d as p}from"./p-U5dPMCXE.js";import{d as u}from"./p-Ds28UyUR.js";import{d as g}from"./p-BG0-6Xek.js";import{d as m}from"./p-B1PBAEzg.js";const f={rowHeight:45,overscan:20,virtualizeFrom:200};function v(t,s){const{groupName:i,options:o,subtitle:n}=t,l=function(t,s){var i={};for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&s.indexOf(e)<0&&(i[e]=t[e]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(e=Object.getOwnPropertySymbols(t);o<e.length;o++)s.indexOf(e[o])<0&&Object.prototype.propertyIsEnumerable.call(t,e[o])&&(i[e[o]]=t[e[o]])}return i}(t,["groupName","options","subtitle"]);if(i)return e("xpl-dropdown-group",Object.assign({groupName:i,options:o},l));const h=void 0!==s;return e("xpl-dropdown-option",Object.assign({class:h?"xpl-dropdown-option--virtual":void 0,style:h?{transform:`translateY(${s*f.rowHeight}px)`}:void 0,subtitle:n},l))}const b=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.isOpenChange=i(this,"isOpenChange",7),this.virtualEnd=0,this.virtualStart=0,this.isOpen=!1,this.closeOnSelect=!0,this.mode="single",this.anchorToTrigger=!1,this.placement="bottom-start",this.selectOnFocus=!1,this.cleanupAutoUpdate=null,this.virtualScrollRaf=null,this.openAlignmentRaf=null,this.previousOptionCount=0,this.updateDropdownPosition=async t=>{var i,e;const{x:o,y:n,placement:h,middlewareData:p}=await l(t,this.hostElement,{strategy:"fixed",placement:this.placement,middleware:[a(4),r((null===(i=this.flipFallbackPlacements)||void 0===i?void 0:i.length)?{fallbackPlacements:this.flipFallbackPlacements}:{}),d({apply:({availableHeight:t,rects:i})=>{const e=this.hostElement.querySelector(".xpl-dropdown-list");let o=0;if(e){const t=Array.from(this.hostElement.children),i=t.indexOf(e);t.slice(0,i).forEach((t=>{t instanceof s&&(o+=t.offsetHeight)}))}const n=getComputedStyle(this.hostElement),l=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),h=e?parseFloat(getComputedStyle(e).getPropertyValue("--xpl-dropdown-list-max-height")):1/0,a=Math.min(h,Math.max(0,t-o-l));Object.assign(this.hostElement.style,{width:`${i.reference.width}px`}),e&&(e.style.maxHeight=`${a}px`)}}),c()]});if(!this.cleanupAutoUpdate)return;if(null===(e=p.hide)||void 0===e?void 0:e.referenceHidden)return void(this.isOpen=!1);const u=h.startsWith("top");Object.assign(this.hostElement.style,{left:`${o}px`,top:`${n}px`}),this.hostElement.classList.toggle("xpl-dropdown--above",u),this.hostElement.classList.toggle("xpl-dropdown--below",!u)},this.handleClickOutside=({target:t})=>{const{triggerId:s}=this,i=s?document.getElementById(s):null,e=null==i?void 0:i.contains(t);this.hostElement.contains(t)||e||!this.isOpen||(this.isOpen=!1)},this.handleKeyDown=t=>{"Escape"===t.key&&this.isOpen&&(this.isOpen=!1)},this.handleVirtualScroll=()=>{null===this.virtualScrollRaf&&(this.virtualScrollRaf=requestAnimationFrame((()=>{this.virtualScrollRaf=null,this.updateVirtualRange()})))},this.setListEl=t=>{var s,i;t!==this.listEl&&(this.listEl=t,null===(s=this.listResizeObserver)||void 0===s||s.disconnect(),t&&"undefined"!=typeof ResizeObserver&&(null!==(i=this.listResizeObserver)&&void 0!==i||(this.listResizeObserver=new ResizeObserver((()=>{this.isVirtualized&&this.handleVirtualScroll()}))),this.listResizeObserver.observe(t)))},this.scheduleOpenAlignment=()=>{null===this.openAlignmentRaf&&(this.openAlignmentRaf=requestAnimationFrame((()=>{this.openAlignmentRaf=null,this.scrollSelectedIntoView(),this.updateVirtualRange()})))}}onOptionsChanged(){var t,s,i,e;const o=null!==(s=null===(t=this.options)||void 0===t?void 0:t.length)&&void 0!==s?s:0,n=o!==this.previousOptionCount;if(this.previousOptionCount=o,!this.isVirtualized)return this.virtualStart=0,void(this.virtualEnd=0);const l=this.listEl;if(l){const t=Math.max(0,o*f.rowHeight-l.clientHeight);if(l.scrollTop>t&&(l.scrollTop=t),this.isOpen&&n){const t=null!==(e=null===(i=this.options)||void 0===i?void 0:i.findIndex((t=>t.isSelected)))&&void 0!==e?e:-1;t>=0&&(t<this.virtualStart||t>=this.virtualEnd)&&this.scrollSelectedIntoView()}}this.updateVirtualRange()}onAnchorToTriggerChanged(){this.isOpen&&this.startPositioning()}onFlipFallbackPlacementsChanged(){this.isOpen&&this.anchorToTrigger&&this.startPositioning()}onPlacementChanged(){this.isOpen&&this.anchorToTrigger&&this.startPositioning()}onTriggerIdChanged(){this.isOpen&&this.startPositioning()}onSelectedValuesChanged(t,s=!1){if(this.options&&this.options.length>0){this.options.flatMap((t=>t.groupName&&t.options?t.options:[t])).forEach((s=>{const i=s.value||s.label;if("single"===this.mode)s.isSelected=i===t;else{const e=Array.isArray(t)?t:[];s.isSelected=e.includes(i)}}));const i=t=>(t.options=t.groupName?t.options.map(i):void 0,t);this.options=this.options.map(i),this.update&&!s&&this.update(null,{component:this})}}onIsOpenStateChange(t){this.isOpenChange.emit(t),t?(this.startPositioning(),this.alignOnOpen()):(this.stopPositioning(),this.cancelVirtualScroll(),this.virtualStart=0,this.virtualEnd=0)}connectedCallback(){document.addEventListener("mousedown",this.handleClickOutside),document.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){var t;document.removeEventListener("mousedown",this.handleClickOutside),document.removeEventListener("keydown",this.handleKeyDown),this.stopPositioning(),this.cancelVirtualScroll(),null===(t=this.listResizeObserver)||void 0===t||t.disconnect()}componentWillLoad(){var t,s;this.handleSelect=this.handleSelect.bind(this),this.selectedValues&&this.onSelectedValuesChanged(this.selectedValues,!0),this.previousOptionCount=null!==(s=null===(t=this.options)||void 0===t?void 0:t.length)&&void 0!==s?s:0}componentDidLoad(){this.isOpen&&(this.startPositioning(),this.alignOnOpen())}async handleSelect(t,{component:s}){const{hostElement:i,mode:e,options:o,update:n}=this,l="single"===e,h="multi"===e;if(o){const t=s.hostElement.value||s.hostElement.label;if(o.some((t=>t.groupName))){o.flatMap((t=>t.groupName&&t.options?t.options:[t])).forEach((i=>{const e=(i.value||i.label)===t;l?(i.isSelected=e,s.hostElement.isSelected=!0):h&&e&&(i.isSelected=!i.isSelected,s.hostElement.isSelected=i.isSelected)}));const i=t=>(t.options=t.groupName?t.options.map(i):void 0,t);this.options=o.map(i)}else o.forEach((i=>{const e=(i.value||i.label)===t;l?(i.isSelected=e,e&&(s.hostElement.isSelected=!0)):h&&e&&(i.isSelected=!i.isSelected,s.hostElement.isSelected=i.isSelected)})),this.options=[...o]}else l?Array.from(i.querySelectorAll("xpl-dropdown-option")).forEach((t=>{t.isSelected=t===s.hostElement})):h&&(s.isSelected=!s.isSelected);n&&n(t,{component:this})}startPositioning(){if(!this.anchorToTrigger||!this.triggerId)return;const t=document.getElementById(this.triggerId);t&&(this.stopPositioning(),this.cleanupAutoUpdate=h(t,this.hostElement,(()=>{this.updateDropdownPosition(t)})))}stopPositioning(){var t;this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=null),this.hostElement.style.left="",this.hostElement.style.top="",this.hostElement.style.width="",null===(t=this.hostElement.querySelector(".xpl-dropdown-list"))||void 0===t||t.style.removeProperty("max-height"),this.hostElement.classList.remove("xpl-dropdown--above","xpl-dropdown--below")}cancelVirtualScroll(){null!==this.virtualScrollRaf&&(cancelAnimationFrame(this.virtualScrollRaf),this.virtualScrollRaf=null),null!==this.openAlignmentRaf&&(cancelAnimationFrame(this.openAlignmentRaf),this.openAlignmentRaf=null)}alignOnOpen(){this.scrollSelectedIntoView(),this.updateVirtualRange(),this.scheduleOpenAlignment()}scrollSelectedIntoView(){const{listEl:t,options:s}=this;if(!t||!(null==s?void 0:s.length)||!this.isVirtualized)return;const i=s.findIndex((t=>t.isSelected));if(i<0)return;const{rowHeight:e}=f,o=i*e-(t.clientHeight-e)/2,n=Math.max(0,s.length*e-t.clientHeight);t.scrollTop=Math.max(0,Math.min(o,n))}updateVirtualRange(){var t,s;const i=this.listEl,e=null!==(s=null===(t=this.options)||void 0===t?void 0:t.length)&&void 0!==s?s:0;if(!i||!e)return;const{rowHeight:o,overscan:n}=f,l=Math.floor(i.scrollTop/o),h=Math.ceil(i.clientHeight/o)||1,a=Math.max(0,l-n),r=Math.min(e,l+h+n);a===this.virtualStart&&r===this.virtualEnd||(this.virtualStart=a,this.virtualEnd=r)}get isVirtualized(){const{options:t}=this;return!!t&&t.length>f.virtualizeFrom&&t.every((t=>!t.groupName&&!t.subtitle))}render(){const{isOpen:t,mode:s,options:i}=this,n=this.isVirtualized;let l;if(i&&i.length)if(n){const{rowHeight:t,overscan:s}=f,o=i.length,n=Math.min(this.virtualStart,o),h=Math.min(o,Math.ceil(300/t)+2*s);l=e("li",{key:"2e197eebf453591ec714ebbc60a6c8ba57646cb9",class:"xpl-dropdown__virtual-sizer",style:{height:o*t+"px"}},i.slice(n,this.virtualEnd>n?this.virtualEnd:h).map(((t,s)=>v(t,n+s))))}else l=i.map((t=>v(t)));else l=e("slot",{key:"859e13193ab2db2f10197aaf8b9699a177d480c6",name:"options"});return e(o,{key:"0ffdb0e5d1dc13c83b692244f8e5e65f70c9c745","aria-expanded":t?"true":"false",class:{"xpl-dropdown":!0,"xpl-dropdown--multi":"multi"===s,"xpl-dropdown--open":t,"xpl-dropdown--anchor-to-trigger":this.anchorToTrigger,"xpl-dropdown--virtualized":n},role:"listbox"},e("slot",{key:"ff204bc8c903a5d0a47b95521781df2467c9b4a7",name:"header"}),e("ul",{key:"2685e64254a9424f9da75787c3d18ff182e9f7a1",class:"xpl-dropdown-list",ref:t=>{this.setListEl(t)},onScroll:n?this.handleVirtualScroll:void 0},l))}get hostElement(){return this}static get watchers(){return{options:[{onOptionsChanged:0}],anchorToTrigger:[{onAnchorToTriggerChanged:0}],flipFallbackPlacements:[{onFlipFallbackPlacementsChanged:0}],placement:[{onPlacementChanged:0}],triggerId:[{onTriggerIdChanged:0}],selectedValues:[{onSelectedValuesChanged:0}],isOpen:[{onIsOpenStateChange:0}]}}},[260,"xpl-dropdown",{isOpen:[1540,"open"],closeOnSelect:[4,"close-on-select"],mode:[1],options:[1040],anchorToTrigger:[4,"anchor-to-trigger"],flipFallbackPlacements:[16],placement:[1],selectedValues:[1,"selected-values"],selectOnFocus:[4,"select-on-focus"],triggerId:[1,"trigger-id"],update:[16],virtualEnd:[32],virtualStart:[32],handleSelect:[64]},void 0,{options:[{onOptionsChanged:0}],anchorToTrigger:[{onAnchorToTriggerChanged:0}],flipFallbackPlacements:[{onFlipFallbackPlacementsChanged:0}],placement:[{onPlacementChanged:0}],triggerId:[{onTriggerIdChanged:0}],selectedValues:[{onSelectedValuesChanged:0}],isOpen:[{onIsOpenStateChange:0}]}]);function w(){"undefined"!=typeof customElements&&["xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon"].forEach((t=>{switch(t){case"xpl-dropdown":customElements.get(n(t))||customElements.define(n(t),b);break;case"xpl-dropdown-group":customElements.get(n(t))||p();break;case"xpl-dropdown-heading":customElements.get(n(t))||u();break;case"xpl-dropdown-option":customElements.get(n(t))||g();break;case"xpl-icon":customElements.get(n(t))||m()}}))}export{b as D,w as d}