@aquera/nile-elements 1.2.8-beta-1.6 → 1.2.8-beta-1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/index.html +52 -70
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +285 -274
- package/dist/nile-auto-complete/index.cjs.js +1 -1
- package/dist/nile-auto-complete/index.esm.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.cjs.js.map +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.esm.js +17 -13
- package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js.map +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.esm.js +1 -1
- package/dist/nile-auto-complete/portal-manager.cjs.js +2 -0
- package/dist/nile-auto-complete/portal-manager.cjs.js.map +1 -0
- package/dist/nile-auto-complete/portal-manager.esm.js +1 -0
- package/dist/nile-auto-complete/portal-utils.cjs.js +2 -0
- package/dist/nile-auto-complete/portal-utils.cjs.js.map +1 -0
- package/dist/nile-auto-complete/portal-utils.esm.js +1 -0
- package/dist/nile-chip/index.cjs.js +1 -1
- package/dist/nile-chip/index.esm.js +1 -1
- package/dist/nile-chip/nile-chip.cjs.js +1 -1
- package/dist/nile-chip/nile-chip.cjs.js.map +1 -1
- package/dist/nile-chip/nile-chip.esm.js +14 -7
- package/dist/nile-chip/nile-chip.test.cjs.js +1 -1
- package/dist/nile-chip/nile-chip.test.cjs.js.map +1 -1
- package/dist/nile-chip/nile-chip.test.esm.js +1 -1
- package/dist/nile-lite-tooltip/nile-lite-tooltip.cjs.js +1 -1
- package/dist/nile-lite-tooltip/nile-lite-tooltip.cjs.js.map +1 -1
- package/dist/nile-lite-tooltip/nile-lite-tooltip.esm.js +1 -1
- package/dist/src/nile-auto-complete/nile-auto-complete.d.ts +18 -1
- package/dist/src/nile-auto-complete/nile-auto-complete.js +131 -9
- package/dist/src/nile-auto-complete/nile-auto-complete.js.map +1 -1
- package/dist/src/nile-auto-complete/portal-manager.d.ts +41 -0
- package/dist/src/nile-auto-complete/portal-manager.js +308 -0
- package/dist/src/nile-auto-complete/portal-manager.js.map +1 -0
- package/dist/src/nile-auto-complete/portal-utils.d.ts +31 -0
- package/dist/src/nile-auto-complete/portal-utils.js +166 -0
- package/dist/src/nile-auto-complete/portal-utils.js.map +1 -0
- package/dist/src/nile-chip/nile-chip.d.ts +7 -0
- package/dist/src/nile-chip/nile-chip.js +53 -10
- package/dist/src/nile-chip/nile-chip.js.map +1 -1
- package/dist/src/nile-lite-tooltip/nile-lite-tooltip.d.ts +1 -0
- package/dist/src/nile-lite-tooltip/nile-lite-tooltip.js +41 -59
- package/dist/src/nile-lite-tooltip/nile-lite-tooltip.js.map +1 -1
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-auto-complete/nile-auto-complete.ts +148 -13
- package/src/nile-auto-complete/portal-manager.ts +410 -0
- package/src/nile-auto-complete/portal-utils.ts +221 -0
- package/src/nile-chip/nile-chip.ts +54 -11
- package/src/nile-lite-tooltip/nile-lite-tooltip.ts +56 -75
- package/vscode-html-custom-data.json +17 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{property as n,customElement as e}from"lit/decorators.js";import{s as i}from"./nile-lite-tooltip.css.esm.js";import{N as r}from"../internal/nile-element.esm.js";import{p as o,a as u}from"./utils.esm.js";import"lit";var a="top",c="bottom",f="right",s="left",d="auto",l=[a,c,f,s],p="start",v="end",h="viewport",m="popper",b=l.reduce((function(t,n){return t.concat([n+"-"+p,n+"-"+v])}),[]),y=[].concat(l,[d]).reduce((function(t,n){return t.concat([n,n+"-"+p,n+"-"+v])}),[]),g=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function w(t){return t?(t.nodeName||"").toLowerCase():null}function O(t){if(null==t)return window;if("[object Window]"!==t.toString()){var n=t.ownerDocument;return n&&n.defaultView||window}return t}function x(t){return t instanceof O(t).Element||t instanceof Element}function j(t){return t instanceof O(t).HTMLElement||t instanceof HTMLElement}function T(t){return"undefined"!=typeof ShadowRoot&&(t instanceof O(t).ShadowRoot||t instanceof ShadowRoot)}var k={name:"applyStyles",enabled:!0,phase:"write",fn:function(t){var n=t.state;Object.keys(n.elements).forEach((function(t){var e=n.styles[t]||{},i=n.attributes[t]||{},r=n.elements[t];j(r)&&w(r)&&(Object.assign(r.style,e),Object.keys(i).forEach((function(t){var n=i[t];!1===n?r.removeAttribute(t):r.setAttribute(t,!0===n?"":n)})))}))},effect:function(t){var n=t.state,e={popper:{position:n.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(n.elements.popper.style,e.popper),n.styles=e,n.elements.arrow&&Object.assign(n.elements.arrow.style,e.arrow),function(){Object.keys(n.elements).forEach((function(t){var i=n.elements[t],r=n.attributes[t]||{},o=Object.keys(n.styles.hasOwnProperty(t)?n.styles[t]:e[t]).reduce((function(t,n){return t[n]="",t}),{});j(i)&&w(i)&&(Object.assign(i.style,o),Object.keys(r).forEach((function(t){i.removeAttribute(t)})))}))}},requires:["computeStyles"]};function C(t){return t.split("-")[0]}var S=Math.max,B=Math.min,M=Math.round;function A(){var t=navigator.userAgentData;return null!=t&&t.brands&&Array.isArray(t.brands)?t.brands.map((function(t){return t.brand+"/"+t.version})).join(" "):navigator.userAgent}function E(){return!/^((?!chrome|android).)*safari/i.test(A())}function R(t,n,e){void 0===n&&(n=!1),void 0===e&&(e=!1);var i=t.getBoundingClientRect(),r=1,o=1;n&&j(t)&&(r=t.offsetWidth>0&&M(i.width)/t.offsetWidth||1,o=t.offsetHeight>0&&M(i.height)/t.offsetHeight||1);var u=(x(t)?O(t):window).visualViewport,a=!E()&&e,c=(i.left+(a&&u?u.offsetLeft:0))/r,f=(i.top+(a&&u?u.offsetTop:0))/o,s=i.width/r,d=i.height/o;return{width:s,height:d,top:f,right:c+s,bottom:f+d,left:c,x:c,y:f}}function H(t){var n=R(t),e=t.offsetWidth,i=t.offsetHeight;return Math.abs(n.width-e)<=1&&(e=n.width),Math.abs(n.height-i)<=1&&(i=n.height),{x:t.offsetLeft,y:t.offsetTop,width:e,height:i}}function U(t,n){var e=n.getRootNode&&n.getRootNode();if(t.contains(n))return!0;if(e&&T(e)){var i=n;do{if(i&&t.isSameNode(i))return!0;i=i.parentNode||i.host}while(i)}return!1}function q(t){return O(t).getComputedStyle(t)}function W(t){return["table","td","th"].indexOf(w(t))>=0}function z(t){return((x(t)?t.ownerDocument:t.document)||window.document).documentElement}function L(t){return"html"===w(t)?t:t.assignedSlot||t.parentNode||(T(t)?t.host:null)||z(t)}function I(t){return j(t)&&"fixed"!==q(t).position?t.offsetParent:null}function P(t){for(var n=O(t),e=I(t);e&&W(e)&&"static"===q(e).position;)e=I(e);return e&&("html"===w(e)||"body"===w(e)&&"static"===q(e).position)?n:e||function(t){var n=/firefox/i.test(A());if(/Trident/i.test(A())&&j(t)&&"fixed"===q(t).position)return null;var e=L(t);for(T(e)&&(e=e.host);j(e)&&["html","body"].indexOf(w(e))<0;){var i=q(e);if("none"!==i.transform||"none"!==i.perspective||"paint"===i.contain||-1!==["transform","perspective"].indexOf(i.willChange)||n&&"filter"===i.willChange||n&&i.filter&&"none"!==i.filter)return e;e=e.parentNode}return null}(t)||n}function D(t){return["top","bottom"].indexOf(t)>=0?"x":"y"}function N(t,n,e){return S(t,B(n,e))}function F(t){return Object.assign({},{top:0,right:0,bottom:0,left:0},t)}function $(t,n){return n.reduce((function(n,e){return n[e]=t,n}),{})}var V={name:"arrow",enabled:!0,phase:"main",fn:function(t){var n,e=t.state,i=t.name,r=t.options,o=e.elements.arrow,u=e.modifiersData.popperOffsets,d=C(e.placement),p=D(d),v=[s,f].indexOf(d)>=0?"height":"width";if(o&&u){var h=function(t,n){return F("number"!=typeof(t="function"==typeof t?t(Object.assign({},n.rects,{placement:n.placement})):t)?t:$(t,l))}(r.padding,e),m=H(o),b="y"===p?a:s,y="y"===p?c:f,g=e.rects.reference[v]+e.rects.reference[p]-u[p]-e.rects.popper[v],w=u[p]-e.rects.reference[p],O=P(o),x=O?"y"===p?O.clientHeight||0:O.clientWidth||0:0,j=g/2-w/2,T=h[b],k=x-m[v]-h[y],S=x/2-m[v]/2+j,B=N(T,S,k),M=p;e.modifiersData[i]=((n={})[M]=B,n.centerOffset=B-S,n)}},effect:function(t){var n=t.state,e=t.options.element,i=void 0===e?"[data-popper-arrow]":e;null!=i&&("string"!=typeof i||(i=n.elements.popper.querySelector(i)))&&U(n.elements.popper,i)&&(n.elements.arrow=i)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function X(t){return t.split("-")[1]}var Y={top:"auto",right:"auto",bottom:"auto",left:"auto"};function J(t){var n,e=t.popper,i=t.popperRect,r=t.placement,o=t.variation,u=t.offsets,d=t.position,l=t.gpuAcceleration,p=t.adaptive,h=t.roundOffsets,m=t.isFixed,b=u.x,y=void 0===b?0:b,g=u.y,w=void 0===g?0:g,x="function"==typeof h?h({x:y,y:w}):{x:y,y:w};y=x.x,w=x.y;var j=u.hasOwnProperty("x"),T=u.hasOwnProperty("y"),k=s,C=a,S=window;if(p){var B=P(e),A="clientHeight",E="clientWidth";if(B===O(e)&&"static"!==q(B=z(e)).position&&"absolute"===d&&(A="scrollHeight",E="scrollWidth"),r===a||(r===s||r===f)&&o===v)C=c,w-=(m&&B===S&&S.visualViewport?S.visualViewport.height:B[A])-i.height,w*=l?1:-1;if(r===s||(r===a||r===c)&&o===v)k=f,y-=(m&&B===S&&S.visualViewport?S.visualViewport.width:B[E])-i.width,y*=l?1:-1}var R,H=Object.assign({position:d},p&&Y),U=!0===h?function(t,n){var e=t.x,i=t.y,r=n.devicePixelRatio||1;return{x:M(e*r)/r||0,y:M(i*r)/r||0}}({x:y,y:w},O(e)):{x:y,y:w};return y=U.x,w=U.y,l?Object.assign({},H,((R={})[C]=T?"0":"",R[k]=j?"0":"",R.transform=(S.devicePixelRatio||1)<=1?"translate("+y+"px, "+w+"px)":"translate3d("+y+"px, "+w+"px, 0)",R)):Object.assign({},H,((n={})[C]=T?w+"px":"",n[k]=j?y+"px":"",n.transform="",n))}var _={passive:!0};var G={left:"right",right:"left",bottom:"top",top:"bottom"};function K(t){return t.replace(/left|right|bottom|top/g,(function(t){return G[t]}))}var Q={start:"end",end:"start"};function Z(t){return t.replace(/start|end/g,(function(t){return Q[t]}))}function tt(t){var n=O(t);return{scrollLeft:n.pageXOffset,scrollTop:n.pageYOffset}}function nt(t){return R(z(t)).left+tt(t).scrollLeft}function et(t){var n=q(t),e=n.overflow,i=n.overflowX,r=n.overflowY;return/auto|scroll|overlay|hidden/.test(e+r+i)}function it(t){return["html","body","#document"].indexOf(w(t))>=0?t.ownerDocument.body:j(t)&&et(t)?t:it(L(t))}function rt(t,n){var e;void 0===n&&(n=[]);var i=it(t),r=i===(null==(e=t.ownerDocument)?void 0:e.body),o=O(i),u=r?[o].concat(o.visualViewport||[],et(i)?i:[]):i,a=n.concat(u);return r?a:a.concat(rt(L(u)))}function ot(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function ut(t,n,e){return n===h?ot(function(t,n){var e=O(t),i=z(t),r=e.visualViewport,o=i.clientWidth,u=i.clientHeight,a=0,c=0;if(r){o=r.width,u=r.height;var f=E();(f||!f&&"fixed"===n)&&(a=r.offsetLeft,c=r.offsetTop)}return{width:o,height:u,x:a+nt(t),y:c}}(t,e)):x(n)?function(t,n){var e=R(t,!1,"fixed"===n);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}(n,e):ot(function(t){var n,e=z(t),i=tt(t),r=null==(n=t.ownerDocument)?void 0:n.body,o=S(e.scrollWidth,e.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),u=S(e.scrollHeight,e.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0),a=-i.scrollLeft+nt(t),c=-i.scrollTop;return"rtl"===q(r||e).direction&&(a+=S(e.clientWidth,r?r.clientWidth:0)-o),{width:o,height:u,x:a,y:c}}(z(t)))}function at(t,n,e,i){var r="clippingParents"===n?function(t){var n=rt(L(t)),e=["absolute","fixed"].indexOf(q(t).position)>=0&&j(t)?P(t):t;return x(e)?n.filter((function(t){return x(t)&&U(t,e)&&"body"!==w(t)})):[]}(t):[].concat(n),o=[].concat(r,[e]),u=o[0],a=o.reduce((function(n,e){var r=ut(t,e,i);return n.top=S(r.top,n.top),n.right=B(r.right,n.right),n.bottom=B(r.bottom,n.bottom),n.left=S(r.left,n.left),n}),ut(t,u,i));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}function ct(t){var n,e=t.reference,i=t.element,r=t.placement,o=r?C(r):null,u=r?X(r):null,d=e.x+e.width/2-i.width/2,l=e.y+e.height/2-i.height/2;switch(o){case a:n={x:d,y:e.y-i.height};break;case c:n={x:d,y:e.y+e.height};break;case f:n={x:e.x+e.width,y:l};break;case s:n={x:e.x-i.width,y:l};break;default:n={x:e.x,y:e.y}}var h=o?D(o):null;if(null!=h){var m="y"===h?"height":"width";switch(u){case p:n[h]=n[h]-(e[m]/2-i[m]/2);break;case v:n[h]=n[h]+(e[m]/2-i[m]/2)}}return n}function ft(t,n){void 0===n&&(n={});var e=n,i=e.placement,r=void 0===i?t.placement:i,o=e.strategy,u=void 0===o?t.strategy:o,s=e.boundary,d=void 0===s?"clippingParents":s,p=e.rootBoundary,v=void 0===p?h:p,b=e.elementContext,y=void 0===b?m:b,g=e.altBoundary,w=void 0!==g&&g,O=e.padding,j=void 0===O?0:O,T=F("number"!=typeof j?j:$(j,l)),k=y===m?"reference":m,C=t.rects.popper,S=t.elements[w?k:y],B=at(x(S)?S:S.contextElement||z(t.elements.popper),d,v,u),M=R(t.elements.reference),A=ct({reference:M,element:C,strategy:"absolute",placement:r}),E=ot(Object.assign({},C,A)),H=y===m?E:M,U={top:B.top-H.top+T.top,bottom:H.bottom-B.bottom+T.bottom,left:B.left-H.left+T.left,right:H.right-B.right+T.right},q=t.modifiersData.offset;if(y===m&&q){var W=q[r];Object.keys(U).forEach((function(t){var n=[f,c].indexOf(t)>=0?1:-1,e=[a,c].indexOf(t)>=0?"y":"x";U[t]+=W[e]*n}))}return U}function st(t,n){void 0===n&&(n={});var e=n,i=e.placement,r=e.boundary,o=e.rootBoundary,u=e.padding,a=e.flipVariations,c=e.allowedAutoPlacements,f=void 0===c?y:c,s=X(i),d=s?a?b:b.filter((function(t){return X(t)===s})):l,p=d.filter((function(t){return f.indexOf(t)>=0}));0===p.length&&(p=d);var v=p.reduce((function(n,e){return n[e]=ft(t,{placement:e,boundary:r,rootBoundary:o,padding:u})[C(e)],n}),{});return Object.keys(v).sort((function(t,n){return v[t]-v[n]}))}var dt={name:"flip",enabled:!0,phase:"main",fn:function(t){var n=t.state,e=t.options,i=t.name;if(!n.modifiersData[i]._skip){for(var r=e.mainAxis,o=void 0===r||r,u=e.altAxis,l=void 0===u||u,v=e.fallbackPlacements,h=e.padding,m=e.boundary,b=e.rootBoundary,y=e.altBoundary,g=e.flipVariations,w=void 0===g||g,O=e.allowedAutoPlacements,x=n.options.placement,j=C(x),T=v||(j===x||!w?[K(x)]:function(t){if(C(t)===d)return[];var n=K(t);return[Z(t),n,Z(n)]}(x)),k=[x].concat(T).reduce((function(t,e){return t.concat(C(e)===d?st(n,{placement:e,boundary:m,rootBoundary:b,padding:h,flipVariations:w,allowedAutoPlacements:O}):e)}),[]),S=n.rects.reference,B=n.rects.popper,M=new Map,A=!0,E=k[0],R=0;R<k.length;R++){var H=k[R],U=C(H),q=X(H)===p,W=[a,c].indexOf(U)>=0,z=W?"width":"height",L=ft(n,{placement:H,boundary:m,rootBoundary:b,altBoundary:y,padding:h}),I=W?q?f:s:q?c:a;S[z]>B[z]&&(I=K(I));var P=K(I),D=[];if(o&&D.push(L[U]<=0),l&&D.push(L[I]<=0,L[P]<=0),D.every((function(t){return t}))){E=H,A=!1;break}M.set(H,D)}if(A)for(var N=function(t){var n=k.find((function(n){var e=M.get(n);if(e)return e.slice(0,t).every((function(t){return t}))}));if(n)return E=n,"break"},F=w?3:1;F>0;F--){if("break"===N(F))break}n.placement!==E&&(n.modifiersData[i]._skip=!0,n.placement=E,n.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}};function lt(t,n,e){return void 0===e&&(e={x:0,y:0}),{top:t.top-n.height-e.y,right:t.right-n.width+e.x,bottom:t.bottom-n.height+e.y,left:t.left-n.width-e.x}}function pt(t){return[a,f,c,s].some((function(n){return t[n]>=0}))}var vt={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(t){var n=t.state,e=t.options,i=t.name,r=e.offset,o=void 0===r?[0,0]:r,u=y.reduce((function(t,e){return t[e]=function(t,n,e){var i=C(t),r=[s,a].indexOf(i)>=0?-1:1,o="function"==typeof e?e(Object.assign({},n,{placement:t})):e,u=o[0],c=o[1];return u=u||0,c=(c||0)*r,[s,f].indexOf(i)>=0?{x:c,y:u}:{x:u,y:c}}(e,n.rects,o),t}),{}),c=u[n.placement],d=c.x,l=c.y;null!=n.modifiersData.popperOffsets&&(n.modifiersData.popperOffsets.x+=d,n.modifiersData.popperOffsets.y+=l),n.modifiersData[i]=u}};var ht={name:"preventOverflow",enabled:!0,phase:"main",fn:function(t){var n=t.state,e=t.options,i=t.name,r=e.mainAxis,o=void 0===r||r,u=e.altAxis,d=void 0!==u&&u,l=e.boundary,v=e.rootBoundary,h=e.altBoundary,m=e.padding,b=e.tether,y=void 0===b||b,g=e.tetherOffset,w=void 0===g?0:g,O=ft(n,{boundary:l,rootBoundary:v,padding:m,altBoundary:h}),x=C(n.placement),j=X(n.placement),T=!j,k=D(x),M="x"===k?"y":"x",A=n.modifiersData.popperOffsets,E=n.rects.reference,R=n.rects.popper,U="function"==typeof w?w(Object.assign({},n.rects,{placement:n.placement})):w,q="number"==typeof U?{mainAxis:U,altAxis:U}:Object.assign({mainAxis:0,altAxis:0},U),W=n.modifiersData.offset?n.modifiersData.offset[n.placement]:null,z={x:0,y:0};if(A){if(o){var L,I="y"===k?a:s,F="y"===k?c:f,$="y"===k?"height":"width",V=A[k],Y=V+O[I],J=V-O[F],_=y?-R[$]/2:0,G=j===p?E[$]:R[$],K=j===p?-R[$]:-E[$],Q=n.elements.arrow,Z=y&&Q?H(Q):{width:0,height:0},tt=n.modifiersData["arrow#persistent"]?n.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},nt=tt[I],et=tt[F],it=N(0,E[$],Z[$]),rt=T?E[$]/2-_-it-nt-q.mainAxis:G-it-nt-q.mainAxis,ot=T?-E[$]/2+_+it+et+q.mainAxis:K+it+et+q.mainAxis,ut=n.elements.arrow&&P(n.elements.arrow),at=ut?"y"===k?ut.clientTop||0:ut.clientLeft||0:0,ct=null!=(L=null==W?void 0:W[k])?L:0,st=V+ot-ct,dt=N(y?B(Y,V+rt-ct-at):Y,V,y?S(J,st):J);A[k]=dt,z[k]=dt-V}if(d){var lt,pt="x"===k?a:s,vt="x"===k?c:f,ht=A[M],mt="y"===M?"height":"width",bt=ht+O[pt],yt=ht-O[vt],gt=-1!==[a,s].indexOf(x),wt=null!=(lt=null==W?void 0:W[M])?lt:0,Ot=gt?bt:ht-E[mt]-R[mt]-wt+q.altAxis,xt=gt?ht+E[mt]+R[mt]-wt-q.altAxis:yt,jt=y&>?function(t,n,e){var i=N(t,n,e);return i>e?e:i}(Ot,ht,xt):N(y?Ot:bt,ht,y?xt:yt);A[M]=jt,z[M]=jt-ht}n.modifiersData[i]=z}},requiresIfExists:["offset"]};function mt(t,n,e){void 0===e&&(e=!1);var i,r,o=j(n),u=j(n)&&function(t){var n=t.getBoundingClientRect(),e=M(n.width)/t.offsetWidth||1,i=M(n.height)/t.offsetHeight||1;return 1!==e||1!==i}(n),a=z(n),c=R(t,u,e),f={scrollLeft:0,scrollTop:0},s={x:0,y:0};return(o||!o&&!e)&&(("body"!==w(n)||et(a))&&(f=(i=n)!==O(i)&&j(i)?{scrollLeft:(r=i).scrollLeft,scrollTop:r.scrollTop}:tt(i)),j(n)?((s=R(n,!0)).x+=n.clientLeft,s.y+=n.clientTop):a&&(s.x=nt(a))),{x:c.left+f.scrollLeft-s.x,y:c.top+f.scrollTop-s.y,width:c.width,height:c.height}}function bt(t){var n=new Map,e=new Set,i=[];function r(t){e.add(t.name),[].concat(t.requires||[],t.requiresIfExists||[]).forEach((function(t){if(!e.has(t)){var i=n.get(t);i&&r(i)}})),i.push(t)}return t.forEach((function(t){n.set(t.name,t)})),t.forEach((function(t){e.has(t.name)||r(t)})),i}var yt={placement:"bottom",modifiers:[],strategy:"absolute"};function gt(){for(var t=arguments.length,n=new Array(t),e=0;e<t;e++)n[e]=arguments[e];return!n.some((function(t){return!(t&&"function"==typeof t.getBoundingClientRect)}))}function wt(t){void 0===t&&(t={});var n=t,e=n.defaultModifiers,i=void 0===e?[]:e,r=n.defaultOptions,o=void 0===r?yt:r;return function(t,n,e){void 0===e&&(e=o);var r,u,a={placement:"bottom",orderedModifiers:[],options:Object.assign({},yt,o),modifiersData:{},elements:{reference:t,popper:n},attributes:{},styles:{}},c=[],f=!1,s={state:a,setOptions:function(e){var r="function"==typeof e?e(a.options):e;d(),a.options=Object.assign({},o,a.options,r),a.scrollParents={reference:x(t)?rt(t):t.contextElement?rt(t.contextElement):[],popper:rt(n)};var u,f,l=function(t){var n=bt(t);return g.reduce((function(t,e){return t.concat(n.filter((function(t){return t.phase===e})))}),[])}((u=[].concat(i,a.options.modifiers),f=u.reduce((function(t,n){var e=t[n.name];return t[n.name]=e?Object.assign({},e,n,{options:Object.assign({},e.options,n.options),data:Object.assign({},e.data,n.data)}):n,t}),{}),Object.keys(f).map((function(t){return f[t]}))));return a.orderedModifiers=l.filter((function(t){return t.enabled})),a.orderedModifiers.forEach((function(t){var n=t.name,e=t.options,i=void 0===e?{}:e,r=t.effect;if("function"==typeof r){var o=r({state:a,name:n,instance:s,options:i}),u=function(){};c.push(o||u)}})),s.update()},forceUpdate:function(){if(!f){var t=a.elements,n=t.reference,e=t.popper;if(gt(n,e)){a.rects={reference:mt(n,P(e),"fixed"===a.options.strategy),popper:H(e)},a.reset=!1,a.placement=a.options.placement,a.orderedModifiers.forEach((function(t){return a.modifiersData[t.name]=Object.assign({},t.data)}));for(var i=0;i<a.orderedModifiers.length;i++)if(!0!==a.reset){var r=a.orderedModifiers[i],o=r.fn,u=r.options,c=void 0===u?{}:u,d=r.name;"function"==typeof o&&(a=o({state:a,options:c,name:d,instance:s})||a)}else a.reset=!1,i=-1}}},update:(r=function(){return new Promise((function(t){s.forceUpdate(),t(a)}))},function(){return u||(u=new Promise((function(t){Promise.resolve().then((function(){u=void 0,t(r())}))}))),u}),destroy:function(){d(),f=!0}};if(!gt(t,n))return s;function d(){c.forEach((function(t){return t()})),c=[]}return s.setOptions(e).then((function(t){!f&&e.onFirstUpdate&&e.onFirstUpdate(t)})),s}}var Ot=wt({defaultModifiers:[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(t){var n=t.state,e=t.instance,i=t.options,r=i.scroll,o=void 0===r||r,u=i.resize,a=void 0===u||u,c=O(n.elements.popper),f=[].concat(n.scrollParents.reference,n.scrollParents.popper);return o&&f.forEach((function(t){t.addEventListener("scroll",e.update,_)})),a&&c.addEventListener("resize",e.update,_),function(){o&&f.forEach((function(t){t.removeEventListener("scroll",e.update,_)})),a&&c.removeEventListener("resize",e.update,_)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(t){var n=t.state,e=t.name;n.modifiersData[e]=ct({reference:n.rects.reference,element:n.rects.popper,strategy:"absolute",placement:n.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(t){var n=t.state,e=t.options,i=e.gpuAcceleration,r=void 0===i||i,o=e.adaptive,u=void 0===o||o,a=e.roundOffsets,c=void 0===a||a,f={placement:C(n.placement),variation:X(n.placement),popper:n.elements.popper,popperRect:n.rects.popper,gpuAcceleration:r,isFixed:"fixed"===n.options.strategy};null!=n.modifiersData.popperOffsets&&(n.styles.popper=Object.assign({},n.styles.popper,J(Object.assign({},f,{offsets:n.modifiersData.popperOffsets,position:n.options.strategy,adaptive:u,roundOffsets:c})))),null!=n.modifiersData.arrow&&(n.styles.arrow=Object.assign({},n.styles.arrow,J(Object.assign({},f,{offsets:n.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:c})))),n.attributes.popper=Object.assign({},n.attributes.popper,{"data-popper-placement":n.placement})},data:{}},k,vt,dt,ht,V,{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(t){var n=t.state,e=t.name,i=n.rects.reference,r=n.rects.popper,o=n.modifiersData.preventOverflow,u=ft(n,{elementContext:"reference"}),a=ft(n,{altBoundary:!0}),c=lt(u,i),f=lt(a,r,o),s=pt(c),d=pt(f);n.modifiersData[e]={referenceClippingOffsets:c,popperEscapeOffsets:f,isReferenceHidden:s,hasPopperEscaped:d},n.attributes.popper=Object.assign({},n.attributes.popper,{"data-popper-reference-hidden":s,"data-popper-escaped":d})}}]}),xt='<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 6s1.796-.013 4.67-3.615C5.851.9 6.93.006 8 0c1.07-.006 2.148.887 3.343 2.385C14.233 6.005 16 6 16 6H0z"></svg>',jt="tippy-content",Tt="tippy-arrow",kt="tippy-svg-arrow",Ct={passive:!0,capture:!0},St=function(){return document.body};function Bt(t,n,e){if(Array.isArray(t)){var i=t[n];return null==i?Array.isArray(e)?e[n]:e:i}return t}function Mt(t,n){var e={}.toString.call(t);return 0===e.indexOf("[object")&&e.indexOf(n+"]")>-1}function At(t,n){return"function"==typeof t?t.apply(void 0,n):t}function Et(t,n){return 0===n?t:function(i){clearTimeout(e),e=setTimeout((function(){t(i)}),n)};var e}function Rt(t){return[].concat(t)}function Ht(t,n){-1===t.indexOf(n)&&t.push(n)}function Ut(t){return[].slice.call(t)}function qt(t){return Object.keys(t).reduce((function(n,e){return void 0!==t[e]&&(n[e]=t[e]),n}),{})}function Wt(){return document.createElement("div")}function zt(t){return["Element","Fragment"].some((function(n){return Mt(t,n)}))}function Lt(t){return Mt(t,"MouseEvent")}function It(t){return zt(t)?[t]:function(t){return Mt(t,"NodeList")}(t)?Ut(t):Array.isArray(t)?t:Ut(document.querySelectorAll(t))}function Pt(t,n){t.forEach((function(t){t&&(t.style.transitionDuration=n+"ms")}))}function Dt(t,n){t.forEach((function(t){t&&t.setAttribute("data-state",n)}))}function Nt(t){var n,e=Rt(t)[0];return null!=e&&null!=(n=e.ownerDocument)&&n.body?e.ownerDocument:document}function Ft(t,n,e){var i=n+"EventListener";["transitionend","webkitTransitionEnd"].forEach((function(n){t[i](n,e)}))}function $t(t,n){for(var e=n;e;){var i;if(t.contains(e))return!0;e=null==e.getRootNode||null==(i=e.getRootNode())?void 0:i.host}return!1}var Vt={isTouch:!1},Xt=0;function Yt(){Vt.isTouch||(Vt.isTouch=!0,window.performance&&document.addEventListener("mousemove",Jt))}function Jt(){var t=performance.now();t-Xt<20&&(Vt.isTouch=!1,document.removeEventListener("mousemove",Jt)),Xt=t}function _t(){var t,n=document.activeElement;if((t=n)&&t._tippy&&t._tippy.reference===t){var e=n._tippy;n.blur&&!e.state.isVisible&&n.blur()}}var Gt=!!("undefined"!=typeof window&&"undefined"!=typeof document)&&!!window.msCrypto,Kt=Object.assign({appendTo:St,aria:{content:"auto",expanded:"auto"},delay:0,duration:[300,250],getReferenceClientRect:null,hideOnClick:!0,ignoreAttributes:!1,interactive:!1,interactiveBorder:2,interactiveDebounce:0,moveTransition:"",offset:[0,10],onAfterUpdate:function(){},onBeforeUpdate:function(){},onCreate:function(){},onDestroy:function(){},onHidden:function(){},onHide:function(){},onMount:function(){},onShow:function(){},onShown:function(){},onTrigger:function(){},onUntrigger:function(){},onClickOutside:function(){},placement:"top",plugins:[],popperOptions:{},render:null,showOnCreate:!1,touch:!0,trigger:"mouseenter focus",triggerTarget:null},{animateFill:!1,followCursor:!1,inlinePositioning:!1,sticky:!1},{allowHTML:!1,animation:"fade",arrow:!0,content:"",inertia:!1,maxWidth:350,role:"tooltip",theme:"",zIndex:9999}),Qt=Object.keys(Kt);function Zt(t){var n=(t.plugins||[]).reduce((function(n,e){var i,r=e.name,o=e.defaultValue;r&&(n[r]=void 0!==t[r]?t[r]:null!=(i=Kt[r])?i:o);return n}),{});return Object.assign({},t,n)}function tn(t,n){var e=Object.assign({},n,{content:At(n.content,[t])},n.ignoreAttributes?{}:function(t,n){return(n?Object.keys(Zt(Object.assign({},Kt,{plugins:n}))):Qt).reduce((function(n,e){var i=(t.getAttribute("data-tippy-"+e)||"").trim();if(!i)return n;if("content"===e)n[e]=i;else try{n[e]=JSON.parse(i)}catch(t){n[e]=i}return n}),{})}(t,n.plugins));return e.aria=Object.assign({},Kt.aria,e.aria),e.aria={expanded:"auto"===e.aria.expanded?n.interactive:e.aria.expanded,content:"auto"===e.aria.content?n.interactive?null:"describedby":e.aria.content},e}function nn(t,n){t.innerHTML=n}function en(t){var n=Wt();return!0===t?n.className=Tt:(n.className=kt,zt(t)?n.appendChild(t):nn(n,t)),n}function rn(t,n){zt(n.content)?(nn(t,""),t.appendChild(n.content)):"function"!=typeof n.content&&(n.allowHTML?nn(t,n.content):t.textContent=n.content)}function on(t){var n=t.firstElementChild,e=Ut(n.children);return{box:n,content:e.find((function(t){return t.classList.contains(jt)})),arrow:e.find((function(t){return t.classList.contains(Tt)||t.classList.contains(kt)})),backdrop:e.find((function(t){return t.classList.contains("tippy-backdrop")}))}}function un(t){var n=Wt(),e=Wt();e.className="tippy-box",e.setAttribute("data-state","hidden"),e.setAttribute("tabindex","-1");var i=Wt();function r(e,i){var r=on(n),o=r.box,u=r.content,a=r.arrow;i.theme?o.setAttribute("data-theme",i.theme):o.removeAttribute("data-theme"),"string"==typeof i.animation?o.setAttribute("data-animation",i.animation):o.removeAttribute("data-animation"),i.inertia?o.setAttribute("data-inertia",""):o.removeAttribute("data-inertia"),o.style.maxWidth="number"==typeof i.maxWidth?i.maxWidth+"px":i.maxWidth,i.role?o.setAttribute("role",i.role):o.removeAttribute("role"),e.content===i.content&&e.allowHTML===i.allowHTML||rn(u,t.props),i.arrow?a?e.arrow!==i.arrow&&(o.removeChild(a),o.appendChild(en(i.arrow))):o.appendChild(en(i.arrow)):a&&o.removeChild(a)}return i.className=jt,i.setAttribute("data-state","hidden"),rn(i,t.props),n.appendChild(e),e.appendChild(i),r(t.props,t.props),{popper:n,onUpdate:r}}un.$$tippy=!0;var an=1,cn=[],fn=[];function sn(t,n){var e,i,r,o,u,a,c,f,s=tn(t,Object.assign({},Kt,Zt(qt(n)))),d=!1,l=!1,p=!1,v=!1,h=[],m=Et(Y,s.interactiveDebounce),b=an++,y=(f=s.plugins).filter((function(t,n){return f.indexOf(t)===n})),g={id:b,reference:t,popper:Wt(),popperInstance:null,props:s,state:{isEnabled:!0,isVisible:!1,isDestroyed:!1,isMounted:!1,isShown:!1},plugins:y,clearDelayTimeouts:function(){clearTimeout(e),clearTimeout(i),cancelAnimationFrame(r)},setProps:function(n){if(g.state.isDestroyed)return;H("onBeforeUpdate",[g,n]),V();var e=g.props,i=tn(t,Object.assign({},e,qt(n),{ignoreAttributes:!0}));g.props=i,$(),e.interactiveDebounce!==i.interactiveDebounce&&(W(),m=Et(Y,i.interactiveDebounce));e.triggerTarget&&!i.triggerTarget?Rt(e.triggerTarget).forEach((function(t){t.removeAttribute("aria-expanded")})):i.triggerTarget&&t.removeAttribute("aria-expanded");q(),R(),x&&x(e,i);g.popperInstance&&(K(),Z().forEach((function(t){requestAnimationFrame(t._tippy.popperInstance.forceUpdate)})));H("onAfterUpdate",[g,n])},setContent:function(t){g.setProps({content:t})},show:function(){var t=g.state.isVisible,n=g.state.isDestroyed,e=!g.state.isEnabled,i=Vt.isTouch&&!g.props.touch,r=Bt(g.props.duration,0,Kt.duration);if(t||n||e||i)return;if(B().hasAttribute("disabled"))return;if(H("onShow",[g],!1),!1===g.props.onShow(g))return;g.state.isVisible=!0,S()&&(O.style.visibility="visible");R(),P(),g.state.isMounted||(O.style.transition="none");if(S()){var o=A();Pt([o.box,o.content],0)}a=function(){var t;if(g.state.isVisible&&!v){if(v=!0,O.offsetHeight,O.style.transition=g.props.moveTransition,S()&&g.props.animation){var n=A(),e=n.box,i=n.content;Pt([e,i],r),Dt([e,i],"visible")}U(),q(),Ht(fn,g),null==(t=g.popperInstance)||t.forceUpdate(),H("onMount",[g]),g.props.animation&&S()&&function(t,n){N(t,n)}(r,(function(){g.state.isShown=!0,H("onShown",[g])}))}},function(){var t,n=g.props.appendTo,e=B();t=g.props.interactive&&n===St||"parent"===n?e.parentNode:At(n,[e]);t.contains(O)||t.appendChild(O);g.state.isMounted=!0,K()}()},hide:function(){var t=!g.state.isVisible,n=g.state.isDestroyed,e=!g.state.isEnabled,i=Bt(g.props.duration,1,Kt.duration);if(t||n||e)return;if(H("onHide",[g],!1),!1===g.props.onHide(g))return;g.state.isVisible=!1,g.state.isShown=!1,v=!1,d=!1,S()&&(O.style.visibility="hidden");if(W(),D(),R(!0),S()){var r=A(),o=r.box,u=r.content;g.props.animation&&(Pt([o,u],i),Dt([o,u],"hidden"))}U(),q(),g.props.animation?S()&&function(t,n){N(t,(function(){!g.state.isVisible&&O.parentNode&&O.parentNode.contains(O)&&n()}))}(i,g.unmount):g.unmount()},hideWithInteractivity:function(t){M().addEventListener("mousemove",m),Ht(cn,m),m(t)},enable:function(){g.state.isEnabled=!0},disable:function(){g.hide(),g.state.isEnabled=!1},unmount:function(){g.state.isVisible&&g.hide();if(!g.state.isMounted)return;Q(),Z().forEach((function(t){t._tippy.unmount()})),O.parentNode&&O.parentNode.removeChild(O);fn=fn.filter((function(t){return t!==g})),g.state.isMounted=!1,H("onHidden",[g])},destroy:function(){if(g.state.isDestroyed)return;g.clearDelayTimeouts(),g.unmount(),V(),delete t._tippy,g.state.isDestroyed=!0,H("onDestroy",[g])}};if(!s.render)return g;var w=s.render(g),O=w.popper,x=w.onUpdate;O.setAttribute("data-tippy-root",""),O.id="tippy-"+g.id,g.popper=O,t._tippy=g,O._tippy=g;var j=y.map((function(t){return t.fn(g)})),T=t.hasAttribute("aria-expanded");return $(),q(),R(),H("onCreate",[g]),s.showOnCreate&&tt(),O.addEventListener("mouseenter",(function(){g.props.interactive&&g.state.isVisible&&g.clearDelayTimeouts()})),O.addEventListener("mouseleave",(function(){g.props.interactive&&g.props.trigger.indexOf("mouseenter")>=0&&M().addEventListener("mousemove",m)})),g;function k(){var t=g.props.touch;return Array.isArray(t)?t:[t,0]}function C(){return"hold"===k()[0]}function S(){var t;return!(null==(t=g.props.render)||!t.$$tippy)}function B(){return c||t}function M(){var t=B().parentNode;return t?Nt(t):document}function A(){return on(O)}function E(t){return g.state.isMounted&&!g.state.isVisible||Vt.isTouch||o&&"focus"===o.type?0:Bt(g.props.delay,t?0:1,Kt.delay)}function R(t){void 0===t&&(t=!1),O.style.pointerEvents=g.props.interactive&&!t?"":"none",O.style.zIndex=""+g.props.zIndex}function H(t,n,e){var i;(void 0===e&&(e=!0),j.forEach((function(e){e[t]&&e[t].apply(e,n)})),e)&&(i=g.props)[t].apply(i,n)}function U(){var n=g.props.aria;if(n.content){var e="aria-"+n.content,i=O.id;Rt(g.props.triggerTarget||t).forEach((function(t){var n=t.getAttribute(e);if(g.state.isVisible)t.setAttribute(e,n?n+" "+i:i);else{var r=n&&n.replace(i,"").trim();r?t.setAttribute(e,r):t.removeAttribute(e)}}))}}function q(){!T&&g.props.aria.expanded&&Rt(g.props.triggerTarget||t).forEach((function(t){g.props.interactive?t.setAttribute("aria-expanded",g.state.isVisible&&t===B()?"true":"false"):t.removeAttribute("aria-expanded")}))}function W(){M().removeEventListener("mousemove",m),cn=cn.filter((function(t){return t!==m}))}function z(n){if(!Vt.isTouch||!p&&"mousedown"!==n.type){var e=n.composedPath&&n.composedPath()[0]||n.target;if(!g.props.interactive||!$t(O,e)){if(Rt(g.props.triggerTarget||t).some((function(t){return $t(t,e)}))){if(Vt.isTouch)return;if(g.state.isVisible&&g.props.trigger.indexOf("click")>=0)return}else H("onClickOutside",[g,n]);!0===g.props.hideOnClick&&(g.clearDelayTimeouts(),g.hide(),l=!0,setTimeout((function(){l=!1})),g.state.isMounted||D())}}}function L(){p=!0}function I(){p=!1}function P(){var t=M();t.addEventListener("mousedown",z,!0),t.addEventListener("touchend",z,Ct),t.addEventListener("touchstart",I,Ct),t.addEventListener("touchmove",L,Ct)}function D(){var t=M();t.removeEventListener("mousedown",z,!0),t.removeEventListener("touchend",z,Ct),t.removeEventListener("touchstart",I,Ct),t.removeEventListener("touchmove",L,Ct)}function N(t,n){var e=A().box;function i(t){t.target===e&&(Ft(e,"remove",i),n())}if(0===t)return n();Ft(e,"remove",u),Ft(e,"add",i),u=i}function F(n,e,i){void 0===i&&(i=!1),Rt(g.props.triggerTarget||t).forEach((function(t){t.addEventListener(n,e,i),h.push({node:t,eventType:n,handler:e,options:i})}))}function $(){var t;C()&&(F("touchstart",X,{passive:!0}),F("touchend",J,{passive:!0})),(t=g.props.trigger,t.split(/\s+/).filter(Boolean)).forEach((function(t){if("manual"!==t)switch(F(t,X),t){case"mouseenter":F("mouseleave",J);break;case"focus":F(Gt?"focusout":"blur",_);break;case"focusin":F("focusout",_)}}))}function V(){h.forEach((function(t){var n=t.node,e=t.eventType,i=t.handler,r=t.options;n.removeEventListener(e,i,r)})),h=[]}function X(t){var n,e=!1;if(g.state.isEnabled&&!G(t)&&!l){var i="focus"===(null==(n=o)?void 0:n.type);o=t,c=t.currentTarget,q(),!g.state.isVisible&&Lt(t)&&cn.forEach((function(n){return n(t)})),"click"===t.type&&(g.props.trigger.indexOf("mouseenter")<0||d)&&!1!==g.props.hideOnClick&&g.state.isVisible?e=!0:tt(t),"click"===t.type&&(d=!e),e&&!i&&nt(t)}}function Y(t){var n=t.target,e=B().contains(n)||O.contains(n);if("mousemove"!==t.type||!e){var i=Z().concat(O).map((function(t){var n,e=null==(n=t._tippy.popperInstance)?void 0:n.state;return e?{popperRect:t.getBoundingClientRect(),popperState:e,props:s}:null})).filter(Boolean);(function(t,n){var e=n.clientX,i=n.clientY;return t.every((function(t){var n=t.popperRect,r=t.popperState,o=t.props.interactiveBorder,u=r.placement.split("-")[0],a=r.modifiersData.offset;if(!a)return!0;var c="bottom"===u?a.top.y:0,f="top"===u?a.bottom.y:0,s="right"===u?a.left.x:0,d="left"===u?a.right.x:0,l=n.top-i+c>o,p=i-n.bottom-f>o,v=n.left-e+s>o,h=e-n.right-d>o;return l||p||v||h}))})(i,t)&&(W(),nt(t))}}function J(t){G(t)||g.props.trigger.indexOf("click")>=0&&d||(g.props.interactive?g.hideWithInteractivity(t):nt(t))}function _(t){g.props.trigger.indexOf("focusin")<0&&t.target!==B()||g.props.interactive&&t.relatedTarget&&O.contains(t.relatedTarget)||nt(t)}function G(t){return!!Vt.isTouch&&C()!==t.type.indexOf("touch")>=0}function K(){Q();var n=g.props,e=n.popperOptions,i=n.placement,r=n.offset,o=n.getReferenceClientRect,u=n.moveTransition,c=S()?on(O).arrow:null,f=o?{getBoundingClientRect:o,contextElement:o.contextElement||B()}:t,s={name:"$$tippy",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:function(t){var n=t.state;if(S()){var e=A().box;["placement","reference-hidden","escaped"].forEach((function(t){"placement"===t?e.setAttribute("data-placement",n.placement):n.attributes.popper["data-popper-"+t]?e.setAttribute("data-"+t,""):e.removeAttribute("data-"+t)})),n.attributes.popper={}}}},d=[{name:"offset",options:{offset:r}},{name:"preventOverflow",options:{padding:{top:2,bottom:2,left:5,right:5}}},{name:"flip",options:{padding:5}},{name:"computeStyles",options:{adaptive:!u}},s];S()&&c&&d.push({name:"arrow",options:{element:c,padding:3}}),d.push.apply(d,(null==e?void 0:e.modifiers)||[]),g.popperInstance=Ot(f,O,Object.assign({},e,{placement:i,onFirstUpdate:a,modifiers:d}))}function Q(){g.popperInstance&&(g.popperInstance.destroy(),g.popperInstance=null)}function Z(){return Ut(O.querySelectorAll("[data-tippy-root]"))}function tt(t){g.clearDelayTimeouts(),t&&H("onTrigger",[g,t]),P();var n=E(!0),i=k(),r=i[0],o=i[1];Vt.isTouch&&"hold"===r&&o&&(n=o),n?e=setTimeout((function(){g.show()}),n):g.show()}function nt(t){if(g.clearDelayTimeouts(),H("onUntrigger",[g,t]),g.state.isVisible){if(!(g.props.trigger.indexOf("mouseenter")>=0&&g.props.trigger.indexOf("click")>=0&&["mouseleave","mousemove"].indexOf(t.type)>=0&&d)){var n=E(!1);n?i=setTimeout((function(){g.state.isVisible&&g.hide()}),n):r=requestAnimationFrame((function(){g.hide()}))}}else D()}}function dn(t,n){void 0===n&&(n={});var e=Kt.plugins.concat(n.plugins||[]);document.addEventListener("touchstart",Yt,Ct),window.addEventListener("blur",_t);var i=Object.assign({},n,{plugins:e}),r=It(t).reduce((function(t,n){var e=n&&sn(n,i);return e&&t.push(e),t}),[]);return zt(t)?r[0]:r}dn.defaultProps=Kt,dn.setDefaultProps=function(t){Object.keys(t).forEach((function(n){Kt[n]=t[n]}))},dn.currentInput=Vt;var ln=Object.assign({},k,{effect:function(t){var n=t.state,e={popper:{position:n.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(n.elements.popper.style,e.popper),n.styles=e,n.elements.arrow&&Object.assign(n.elements.arrow.style,e.arrow)}}),pn=function(t,n){var e;void 0===n&&(n={});var i,r=t,o=[],u=[],a=n.overrides,c=[],f=!1;function s(){u=r.map((function(t){return Rt(t.props.triggerTarget||t.reference)})).reduce((function(t,n){return t.concat(n)}),[])}function d(){o=r.map((function(t){return t.reference}))}function l(t){r.forEach((function(n){t?n.enable():n.disable()}))}function p(t){return r.map((function(n){var e=n.setProps;return n.setProps=function(r){e(r),n.reference===i&&t.setProps(r)},function(){n.setProps=e}}))}function v(t,n){var e=u.indexOf(n);if(n!==i){i=n;var c=(a||[]).concat("content").reduce((function(t,n){return t[n]=r[e].props[n],t}),{});t.setProps(Object.assign({},c,{getReferenceClientRect:"function"==typeof c.getReferenceClientRect?c.getReferenceClientRect:function(){var t;return null==(t=o[e])?void 0:t.getBoundingClientRect()}}))}}l(!1),d(),s();var h,m,b,y={fn:function(){return{onDestroy:function(){l(!0)},onHidden:function(){i=null},onClickOutside:function(t){t.props.showOnCreate&&!f&&(f=!0,i=null)},onShow:function(t){t.props.showOnCreate&&!f&&(f=!0,v(t,o[0]))},onTrigger:function(t,n){v(t,n.currentTarget)}}}},g=dn(Wt(),Object.assign({},(h=n,m=["overrides"],b=Object.assign({},h),m.forEach((function(t){delete b[t]})),b),{plugins:[y].concat(n.plugins||[]),triggerTarget:u,popperOptions:Object.assign({},n.popperOptions,{modifiers:[].concat((null==(e=n.popperOptions)?void 0:e.modifiers)||[],[ln])})})),w=g.show;g.show=function(t){if(w(),!i&&null==t)return v(g,o[0]);if(!i||null!=t){if("number"==typeof t)return o[t]&&v(g,o[t]);if(r.indexOf(t)>=0){var n=t.reference;return v(g,n)}return o.indexOf(t)>=0?v(g,t):void 0}},g.showNext=function(){var t=o[0];if(!i)return g.show(0);var n=o.indexOf(i);g.show(o[n+1]||t)},g.showPrevious=function(){var t=o[o.length-1];if(!i)return g.show(t);var n=o.indexOf(i),e=o[n-1]||t;g.show(e)};var O=g.setProps;return g.setProps=function(t){a=t.overrides||a,O(t)},g.setInstances=function(t){l(!0),c.forEach((function(t){return t()})),r=t,l(!1),d(),s(),c=p(g),g.setProps({triggerTarget:u})},c=p(g),g},vn={clientX:0,clientY:0},hn=[];function mn(t){var n=t.clientX,e=t.clientY;vn={clientX:n,clientY:e}}var bn={name:"followCursor",defaultValue:!1,fn:function(t){var n=t.reference,e=Nt(t.props.triggerTarget||n),i=!1,r=!1,o=!0,u=t.props;function a(){return"initial"===t.props.followCursor&&t.state.isVisible}function c(){e.addEventListener("mousemove",d)}function f(){e.removeEventListener("mousemove",d)}function s(){i=!0,t.setProps({getReferenceClientRect:null}),i=!1}function d(e){var i=!e.target||n.contains(e.target),r=t.props.followCursor,o=e.clientX,u=e.clientY,a=n.getBoundingClientRect(),c=o-a.left,f=u-a.top;!i&&t.props.interactive||t.setProps({getReferenceClientRect:function(){var t=n.getBoundingClientRect(),e=o,i=u;"initial"===r&&(e=t.left+c,i=t.top+f);var a="horizontal"===r?t.top:i,s="vertical"===r?t.right:e,d="horizontal"===r?t.bottom:i,l="vertical"===r?t.left:e;return{width:s-l,height:d-a,top:a,right:s,bottom:d,left:l}}})}function l(){t.props.followCursor&&(hn.push({instance:t,doc:e}),function(t){t.addEventListener("mousemove",mn)}(e))}function p(){0===(hn=hn.filter((function(n){return n.instance!==t}))).filter((function(t){return t.doc===e})).length&&function(t){t.removeEventListener("mousemove",mn)}(e)}return{onCreate:l,onDestroy:p,onBeforeUpdate:function(){u=t.props},onAfterUpdate:function(n,e){var o=e.followCursor;i||void 0!==o&&u.followCursor!==o&&(p(),o?(l(),!t.state.isMounted||r||a()||c()):(f(),s()))},onMount:function(){t.props.followCursor&&!r&&(o&&(d(vn),o=!1),a()||c())},onTrigger:function(t,n){Lt(n)&&(vn={clientX:n.clientX,clientY:n.clientY}),r="focus"===n.type},onHidden:function(){t.props.followCursor&&(s(),f(),o=!0)}}}};dn.setDefaultProps({render:un});let yn=class extends r{static get styles(){return[i]}createRenderRoot(){return this}constructor(){super(),this.for=null,this.content="",this.size="small",this.duration=200,this.interactive=!1,this.placement="top",this.disabled=!1,this.distance=8,this.skidding=0,this.open=!1,this.trigger="mouseenter focus",this.allowHTML=!1,this.followCursor=!1,this.arrow="default",this.singleton=!1,this.delay=0,this.maxWidth="auto",this.zIndex=9999,this.hideOnClick=!0,this.inertia=!1,this.interactiveBorder=2}firstUpdated(){this.attachTooltip()}attachTooltip(){if(this.destroyTooltips(),this.disabled)return;const t={content:this.content||this.getAttribute("data-tippy-content")||void 0,placement:this.placement,trigger:this.trigger,offset:[this.skidding,this.distance],theme:"lite",animation:"fade",interactive:this.interactive,arrow:xt,duration:o(this.duration),allowHTML:this.allowHTML,delay:this.delay,maxWidth:this.maxWidth,zIndex:this.zIndex,hideOnClick:!1,inertia:this.inertia,interactiveBorder:this.interactiveBorder,appendTo:document.body,followCursor:u(this.followCursor),plugins:u(this.followCursor)?[bn]:[],onShow:t=>{this.open=!0,this.dispatchEvent(new CustomEvent("nile-show",{detail:{instance:t,target:t.reference}})),this.dispatchEvent(new CustomEvent("nile-toggle",{detail:{open:!0,instance:t,target:t.reference}}))},onHide:t=>{this.open=!1,this.dispatchEvent(new CustomEvent("nile-hide",{detail:{instance:t,target:t.reference}})),this.dispatchEvent(new CustomEvent("nile-toggle",{detail:{open:!1,instance:t,target:t.reference}}))}};if(this.for){this.targetEl=document.getElementById(this.for);let n=[];if(this.targetEl)n=[this.targetEl];else{const t=this.for.startsWith(".")?this.for:`.${this.for}`;n=Array.from(document.querySelectorAll(t))}if(!n||0===n.length)return;if(n.length>1)return this.tooltipInstances=n.map((n=>{const e=n.getAttribute("content")||this.content,i=dn(n,{...t,content:e});return i.popper.querySelector(".tippy-box")?.classList.add(this.size),i})),this.singleton&&this.tooltipInstances.length>1&&(this.singletonInstance=pn(this.tooltipInstances,{delay:[75,0],arrow:xt,moveTransition:"transform 0.15s ease-out",overrides:["content"]})),void(this.open&&(this.singletonInstance?this.singletonInstance.show():this.tooltipInstances.forEach((t=>t.show()))));this.targetEl=n[0];const e=Array.from(this.targetEl.querySelectorAll("*"));if(e.length>0)return this.tooltipInstances=e.map((n=>{const e=n,i=e.getAttribute("content")||this.content,r=dn(e,{...t,content:i});return r.popper.querySelector(".tippy-box")?.classList.add(this.size),r})),this.singleton&&this.tooltipInstances.length>1&&(this.singletonInstance=pn(this.tooltipInstances,{delay:[75,0],arrow:xt,moveTransition:"transform 0.15s ease-out",overrides:["content"]})),void(this.open&&(this.singletonInstance?this.singletonInstance.show():this.tooltipInstances.forEach((t=>t.show()))));this.id||(this.generatedId=`nile-tooltip-${Math.random().toString(36).slice(2,9)}`,this.id=this.generatedId),this.prevDescribedby=this.targetEl.getAttribute("aria-describedby");const i=this.prevDescribedby?`${this.prevDescribedby} ${this.id}`:this.id;return this.targetEl.setAttribute("aria-describedby",i),this.singleInstance=dn(this.targetEl,t),this.size&&this.singleInstance.popper.querySelector(".tippy-box")?.classList.add(this.size),void(this.open&&queueMicrotask((()=>this.singleInstance?.show())))}}destroyTooltips(){if(this.tooltipInstances?.forEach((t=>t.destroy())),this.singleInstance?.destroy(),this.singletonInstance?.destroy(),this.tooltipInstances=void 0,this.singleInstance=void 0,this.singletonInstance=void 0,this.targetEl&&this.id){const t=this.targetEl.getAttribute("aria-describedby")?.split(" ").filter((t=>t!==this.id)).join(" ").trim();t?this.targetEl.setAttribute("aria-describedby",t):this.targetEl.removeAttribute("aria-describedby")}}disconnectedCallback(){super.disconnectedCallback(),this.destroyTooltips()}updated(t){super.updated(t),["for","content","placement","distance","skidding","trigger","disabled","hoist","size","arrow","singleton"].some((n=>t.has(n)))&&this.attachTooltip(),t.has("open")&&(this.open?(this.singleInstance?.show(),this.singletonInstance?.show(),this.tooltipInstances?.forEach((t=>t.show()))):(this.singleInstance?.hide(),this.singletonInstance?.hide(),this.tooltipInstances?.forEach((t=>t.hide()))))}};t([n({type:String,attribute:"for"})],yn.prototype,"for",void 0),t([n({type:String,reflect:!0})],yn.prototype,"content",void 0),t([n({type:String,reflect:!0})],yn.prototype,"size",void 0),t([n({type:String,reflect:!0})],yn.prototype,"duration",void 0),t([n({type:Boolean,reflect:!0})],yn.prototype,"interactive",void 0),t([n({type:String})],yn.prototype,"placement",void 0),t([n({type:Boolean})],yn.prototype,"disabled",void 0),t([n({type:Number})],yn.prototype,"distance",void 0),t([n({type:Number})],yn.prototype,"skidding",void 0),t([n({type:Boolean,reflect:!0})],yn.prototype,"open",void 0),t([n({type:String})],yn.prototype,"trigger",void 0),t([n({type:Boolean,reflect:!0})],yn.prototype,"allowHTML",void 0),t([n({type:String,reflect:!0,attribute:!0})],yn.prototype,"followCursor",void 0),t([n({type:String,reflect:!0,attribute:!0})],yn.prototype,"arrow",void 0),t([n({type:Boolean,reflect:!0})],yn.prototype,"singleton",void 0),t([n({type:String,reflect:!0})],yn.prototype,"delay",void 0),t([n({type:String,reflect:!0})],yn.prototype,"maxWidth",void 0),t([n({type:Number})],yn.prototype,"zIndex",void 0),t([n({type:[Boolean,String],reflect:!0})],yn.prototype,"hideOnClick",void 0),t([n({type:Boolean,reflect:!0})],yn.prototype,"inertia",void 0),t([n({type:Number})],yn.prototype,"interactiveBorder",void 0),yn=t([e("nile-lite-tooltip")],yn);export{yn as N};
|
|
1
|
+
import{__decorate as t}from"tslib";import{property as n,customElement as e}from"lit/decorators.js";import{s as i}from"./nile-lite-tooltip.css.esm.js";import{N as r}from"../internal/nile-element.esm.js";import{p as o,a as u}from"./utils.esm.js";import"lit";var a="top",c="bottom",f="right",s="left",d="auto",l=[a,c,f,s],p="start",v="end",h="viewport",m="popper",b=l.reduce((function(t,n){return t.concat([n+"-"+p,n+"-"+v])}),[]),y=[].concat(l,[d]).reduce((function(t,n){return t.concat([n,n+"-"+p,n+"-"+v])}),[]),g=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function w(t){return t?(t.nodeName||"").toLowerCase():null}function O(t){if(null==t)return window;if("[object Window]"!==t.toString()){var n=t.ownerDocument;return n&&n.defaultView||window}return t}function x(t){return t instanceof O(t).Element||t instanceof Element}function j(t){return t instanceof O(t).HTMLElement||t instanceof HTMLElement}function k(t){return"undefined"!=typeof ShadowRoot&&(t instanceof O(t).ShadowRoot||t instanceof ShadowRoot)}var T={name:"applyStyles",enabled:!0,phase:"write",fn:function(t){var n=t.state;Object.keys(n.elements).forEach((function(t){var e=n.styles[t]||{},i=n.attributes[t]||{},r=n.elements[t];j(r)&&w(r)&&(Object.assign(r.style,e),Object.keys(i).forEach((function(t){var n=i[t];!1===n?r.removeAttribute(t):r.setAttribute(t,!0===n?"":n)})))}))},effect:function(t){var n=t.state,e={popper:{position:n.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(n.elements.popper.style,e.popper),n.styles=e,n.elements.arrow&&Object.assign(n.elements.arrow.style,e.arrow),function(){Object.keys(n.elements).forEach((function(t){var i=n.elements[t],r=n.attributes[t]||{},o=Object.keys(n.styles.hasOwnProperty(t)?n.styles[t]:e[t]).reduce((function(t,n){return t[n]="",t}),{});j(i)&&w(i)&&(Object.assign(i.style,o),Object.keys(r).forEach((function(t){i.removeAttribute(t)})))}))}},requires:["computeStyles"]};function C(t){return t.split("-")[0]}var S=Math.max,M=Math.min,A=Math.round;function B(){var t=navigator.userAgentData;return null!=t&&t.brands&&Array.isArray(t.brands)?t.brands.map((function(t){return t.brand+"/"+t.version})).join(" "):navigator.userAgent}function E(){return!/^((?!chrome|android).)*safari/i.test(B())}function R(t,n,e){void 0===n&&(n=!1),void 0===e&&(e=!1);var i=t.getBoundingClientRect(),r=1,o=1;n&&j(t)&&(r=t.offsetWidth>0&&A(i.width)/t.offsetWidth||1,o=t.offsetHeight>0&&A(i.height)/t.offsetHeight||1);var u=(x(t)?O(t):window).visualViewport,a=!E()&&e,c=(i.left+(a&&u?u.offsetLeft:0))/r,f=(i.top+(a&&u?u.offsetTop:0))/o,s=i.width/r,d=i.height/o;return{width:s,height:d,top:f,right:c+s,bottom:f+d,left:c,x:c,y:f}}function H(t){var n=R(t),e=t.offsetWidth,i=t.offsetHeight;return Math.abs(n.width-e)<=1&&(e=n.width),Math.abs(n.height-i)<=1&&(i=n.height),{x:t.offsetLeft,y:t.offsetTop,width:e,height:i}}function q(t,n){var e=n.getRootNode&&n.getRootNode();if(t.contains(n))return!0;if(e&&k(e)){var i=n;do{if(i&&t.isSameNode(i))return!0;i=i.parentNode||i.host}while(i)}return!1}function U(t){return O(t).getComputedStyle(t)}function W(t){return["table","td","th"].indexOf(w(t))>=0}function z(t){return((x(t)?t.ownerDocument:t.document)||window.document).documentElement}function L(t){return"html"===w(t)?t:t.assignedSlot||t.parentNode||(k(t)?t.host:null)||z(t)}function I(t){return j(t)&&"fixed"!==U(t).position?t.offsetParent:null}function P(t){for(var n=O(t),e=I(t);e&&W(e)&&"static"===U(e).position;)e=I(e);return e&&("html"===w(e)||"body"===w(e)&&"static"===U(e).position)?n:e||function(t){var n=/firefox/i.test(B());if(/Trident/i.test(B())&&j(t)&&"fixed"===U(t).position)return null;var e=L(t);for(k(e)&&(e=e.host);j(e)&&["html","body"].indexOf(w(e))<0;){var i=U(e);if("none"!==i.transform||"none"!==i.perspective||"paint"===i.contain||-1!==["transform","perspective"].indexOf(i.willChange)||n&&"filter"===i.willChange||n&&i.filter&&"none"!==i.filter)return e;e=e.parentNode}return null}(t)||n}function D(t){return["top","bottom"].indexOf(t)>=0?"x":"y"}function N(t,n,e){return S(t,M(n,e))}function F(t){return Object.assign({},{top:0,right:0,bottom:0,left:0},t)}function V(t,n){return n.reduce((function(n,e){return n[e]=t,n}),{})}var X={name:"arrow",enabled:!0,phase:"main",fn:function(t){var n,e=t.state,i=t.name,r=t.options,o=e.elements.arrow,u=e.modifiersData.popperOffsets,d=C(e.placement),p=D(d),v=[s,f].indexOf(d)>=0?"height":"width";if(o&&u){var h=function(t,n){return F("number"!=typeof(t="function"==typeof t?t(Object.assign({},n.rects,{placement:n.placement})):t)?t:V(t,l))}(r.padding,e),m=H(o),b="y"===p?a:s,y="y"===p?c:f,g=e.rects.reference[v]+e.rects.reference[p]-u[p]-e.rects.popper[v],w=u[p]-e.rects.reference[p],O=P(o),x=O?"y"===p?O.clientHeight||0:O.clientWidth||0:0,j=g/2-w/2,k=h[b],T=x-m[v]-h[y],S=x/2-m[v]/2+j,M=N(k,S,T),A=p;e.modifiersData[i]=((n={})[A]=M,n.centerOffset=M-S,n)}},effect:function(t){var n=t.state,e=t.options.element,i=void 0===e?"[data-popper-arrow]":e;null!=i&&("string"!=typeof i||(i=n.elements.popper.querySelector(i)))&&q(n.elements.popper,i)&&(n.elements.arrow=i)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function Y(t){return t.split("-")[1]}var $={top:"auto",right:"auto",bottom:"auto",left:"auto"};function J(t){var n,e=t.popper,i=t.popperRect,r=t.placement,o=t.variation,u=t.offsets,d=t.position,l=t.gpuAcceleration,p=t.adaptive,h=t.roundOffsets,m=t.isFixed,b=u.x,y=void 0===b?0:b,g=u.y,w=void 0===g?0:g,x="function"==typeof h?h({x:y,y:w}):{x:y,y:w};y=x.x,w=x.y;var j=u.hasOwnProperty("x"),k=u.hasOwnProperty("y"),T=s,C=a,S=window;if(p){var M=P(e),B="clientHeight",E="clientWidth";if(M===O(e)&&"static"!==U(M=z(e)).position&&"absolute"===d&&(B="scrollHeight",E="scrollWidth"),r===a||(r===s||r===f)&&o===v)C=c,w-=(m&&M===S&&S.visualViewport?S.visualViewport.height:M[B])-i.height,w*=l?1:-1;if(r===s||(r===a||r===c)&&o===v)T=f,y-=(m&&M===S&&S.visualViewport?S.visualViewport.width:M[E])-i.width,y*=l?1:-1}var R,H=Object.assign({position:d},p&&$),q=!0===h?function(t,n){var e=t.x,i=t.y,r=n.devicePixelRatio||1;return{x:A(e*r)/r||0,y:A(i*r)/r||0}}({x:y,y:w},O(e)):{x:y,y:w};return y=q.x,w=q.y,l?Object.assign({},H,((R={})[C]=k?"0":"",R[T]=j?"0":"",R.transform=(S.devicePixelRatio||1)<=1?"translate("+y+"px, "+w+"px)":"translate3d("+y+"px, "+w+"px, 0)",R)):Object.assign({},H,((n={})[C]=k?w+"px":"",n[T]=j?y+"px":"",n.transform="",n))}var _={passive:!0};var G={left:"right",right:"left",bottom:"top",top:"bottom"};function K(t){return t.replace(/left|right|bottom|top/g,(function(t){return G[t]}))}var Q={start:"end",end:"start"};function Z(t){return t.replace(/start|end/g,(function(t){return Q[t]}))}function tt(t){var n=O(t);return{scrollLeft:n.pageXOffset,scrollTop:n.pageYOffset}}function nt(t){return R(z(t)).left+tt(t).scrollLeft}function et(t){var n=U(t),e=n.overflow,i=n.overflowX,r=n.overflowY;return/auto|scroll|overlay|hidden/.test(e+r+i)}function it(t){return["html","body","#document"].indexOf(w(t))>=0?t.ownerDocument.body:j(t)&&et(t)?t:it(L(t))}function rt(t,n){var e;void 0===n&&(n=[]);var i=it(t),r=i===(null==(e=t.ownerDocument)?void 0:e.body),o=O(i),u=r?[o].concat(o.visualViewport||[],et(i)?i:[]):i,a=n.concat(u);return r?a:a.concat(rt(L(u)))}function ot(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function ut(t,n,e){return n===h?ot(function(t,n){var e=O(t),i=z(t),r=e.visualViewport,o=i.clientWidth,u=i.clientHeight,a=0,c=0;if(r){o=r.width,u=r.height;var f=E();(f||!f&&"fixed"===n)&&(a=r.offsetLeft,c=r.offsetTop)}return{width:o,height:u,x:a+nt(t),y:c}}(t,e)):x(n)?function(t,n){var e=R(t,!1,"fixed"===n);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}(n,e):ot(function(t){var n,e=z(t),i=tt(t),r=null==(n=t.ownerDocument)?void 0:n.body,o=S(e.scrollWidth,e.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),u=S(e.scrollHeight,e.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0),a=-i.scrollLeft+nt(t),c=-i.scrollTop;return"rtl"===U(r||e).direction&&(a+=S(e.clientWidth,r?r.clientWidth:0)-o),{width:o,height:u,x:a,y:c}}(z(t)))}function at(t,n,e,i){var r="clippingParents"===n?function(t){var n=rt(L(t)),e=["absolute","fixed"].indexOf(U(t).position)>=0&&j(t)?P(t):t;return x(e)?n.filter((function(t){return x(t)&&q(t,e)&&"body"!==w(t)})):[]}(t):[].concat(n),o=[].concat(r,[e]),u=o[0],a=o.reduce((function(n,e){var r=ut(t,e,i);return n.top=S(r.top,n.top),n.right=M(r.right,n.right),n.bottom=M(r.bottom,n.bottom),n.left=S(r.left,n.left),n}),ut(t,u,i));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}function ct(t){var n,e=t.reference,i=t.element,r=t.placement,o=r?C(r):null,u=r?Y(r):null,d=e.x+e.width/2-i.width/2,l=e.y+e.height/2-i.height/2;switch(o){case a:n={x:d,y:e.y-i.height};break;case c:n={x:d,y:e.y+e.height};break;case f:n={x:e.x+e.width,y:l};break;case s:n={x:e.x-i.width,y:l};break;default:n={x:e.x,y:e.y}}var h=o?D(o):null;if(null!=h){var m="y"===h?"height":"width";switch(u){case p:n[h]=n[h]-(e[m]/2-i[m]/2);break;case v:n[h]=n[h]+(e[m]/2-i[m]/2)}}return n}function ft(t,n){void 0===n&&(n={});var e=n,i=e.placement,r=void 0===i?t.placement:i,o=e.strategy,u=void 0===o?t.strategy:o,s=e.boundary,d=void 0===s?"clippingParents":s,p=e.rootBoundary,v=void 0===p?h:p,b=e.elementContext,y=void 0===b?m:b,g=e.altBoundary,w=void 0!==g&&g,O=e.padding,j=void 0===O?0:O,k=F("number"!=typeof j?j:V(j,l)),T=y===m?"reference":m,C=t.rects.popper,S=t.elements[w?T:y],M=at(x(S)?S:S.contextElement||z(t.elements.popper),d,v,u),A=R(t.elements.reference),B=ct({reference:A,element:C,strategy:"absolute",placement:r}),E=ot(Object.assign({},C,B)),H=y===m?E:A,q={top:M.top-H.top+k.top,bottom:H.bottom-M.bottom+k.bottom,left:M.left-H.left+k.left,right:H.right-M.right+k.right},U=t.modifiersData.offset;if(y===m&&U){var W=U[r];Object.keys(q).forEach((function(t){var n=[f,c].indexOf(t)>=0?1:-1,e=[a,c].indexOf(t)>=0?"y":"x";q[t]+=W[e]*n}))}return q}function st(t,n){void 0===n&&(n={});var e=n,i=e.placement,r=e.boundary,o=e.rootBoundary,u=e.padding,a=e.flipVariations,c=e.allowedAutoPlacements,f=void 0===c?y:c,s=Y(i),d=s?a?b:b.filter((function(t){return Y(t)===s})):l,p=d.filter((function(t){return f.indexOf(t)>=0}));0===p.length&&(p=d);var v=p.reduce((function(n,e){return n[e]=ft(t,{placement:e,boundary:r,rootBoundary:o,padding:u})[C(e)],n}),{});return Object.keys(v).sort((function(t,n){return v[t]-v[n]}))}var dt={name:"flip",enabled:!0,phase:"main",fn:function(t){var n=t.state,e=t.options,i=t.name;if(!n.modifiersData[i]._skip){for(var r=e.mainAxis,o=void 0===r||r,u=e.altAxis,l=void 0===u||u,v=e.fallbackPlacements,h=e.padding,m=e.boundary,b=e.rootBoundary,y=e.altBoundary,g=e.flipVariations,w=void 0===g||g,O=e.allowedAutoPlacements,x=n.options.placement,j=C(x),k=v||(j===x||!w?[K(x)]:function(t){if(C(t)===d)return[];var n=K(t);return[Z(t),n,Z(n)]}(x)),T=[x].concat(k).reduce((function(t,e){return t.concat(C(e)===d?st(n,{placement:e,boundary:m,rootBoundary:b,padding:h,flipVariations:w,allowedAutoPlacements:O}):e)}),[]),S=n.rects.reference,M=n.rects.popper,A=new Map,B=!0,E=T[0],R=0;R<T.length;R++){var H=T[R],q=C(H),U=Y(H)===p,W=[a,c].indexOf(q)>=0,z=W?"width":"height",L=ft(n,{placement:H,boundary:m,rootBoundary:b,altBoundary:y,padding:h}),I=W?U?f:s:U?c:a;S[z]>M[z]&&(I=K(I));var P=K(I),D=[];if(o&&D.push(L[q]<=0),l&&D.push(L[I]<=0,L[P]<=0),D.every((function(t){return t}))){E=H,B=!1;break}A.set(H,D)}if(B)for(var N=function(t){var n=T.find((function(n){var e=A.get(n);if(e)return e.slice(0,t).every((function(t){return t}))}));if(n)return E=n,"break"},F=w?3:1;F>0;F--){if("break"===N(F))break}n.placement!==E&&(n.modifiersData[i]._skip=!0,n.placement=E,n.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}};function lt(t,n,e){return void 0===e&&(e={x:0,y:0}),{top:t.top-n.height-e.y,right:t.right-n.width+e.x,bottom:t.bottom-n.height+e.y,left:t.left-n.width-e.x}}function pt(t){return[a,f,c,s].some((function(n){return t[n]>=0}))}var vt={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(t){var n=t.state,e=t.options,i=t.name,r=e.offset,o=void 0===r?[0,0]:r,u=y.reduce((function(t,e){return t[e]=function(t,n,e){var i=C(t),r=[s,a].indexOf(i)>=0?-1:1,o="function"==typeof e?e(Object.assign({},n,{placement:t})):e,u=o[0],c=o[1];return u=u||0,c=(c||0)*r,[s,f].indexOf(i)>=0?{x:c,y:u}:{x:u,y:c}}(e,n.rects,o),t}),{}),c=u[n.placement],d=c.x,l=c.y;null!=n.modifiersData.popperOffsets&&(n.modifiersData.popperOffsets.x+=d,n.modifiersData.popperOffsets.y+=l),n.modifiersData[i]=u}};var ht={name:"preventOverflow",enabled:!0,phase:"main",fn:function(t){var n=t.state,e=t.options,i=t.name,r=e.mainAxis,o=void 0===r||r,u=e.altAxis,d=void 0!==u&&u,l=e.boundary,v=e.rootBoundary,h=e.altBoundary,m=e.padding,b=e.tether,y=void 0===b||b,g=e.tetherOffset,w=void 0===g?0:g,O=ft(n,{boundary:l,rootBoundary:v,padding:m,altBoundary:h}),x=C(n.placement),j=Y(n.placement),k=!j,T=D(x),A="x"===T?"y":"x",B=n.modifiersData.popperOffsets,E=n.rects.reference,R=n.rects.popper,q="function"==typeof w?w(Object.assign({},n.rects,{placement:n.placement})):w,U="number"==typeof q?{mainAxis:q,altAxis:q}:Object.assign({mainAxis:0,altAxis:0},q),W=n.modifiersData.offset?n.modifiersData.offset[n.placement]:null,z={x:0,y:0};if(B){if(o){var L,I="y"===T?a:s,F="y"===T?c:f,V="y"===T?"height":"width",X=B[T],$=X+O[I],J=X-O[F],_=y?-R[V]/2:0,G=j===p?E[V]:R[V],K=j===p?-R[V]:-E[V],Q=n.elements.arrow,Z=y&&Q?H(Q):{width:0,height:0},tt=n.modifiersData["arrow#persistent"]?n.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},nt=tt[I],et=tt[F],it=N(0,E[V],Z[V]),rt=k?E[V]/2-_-it-nt-U.mainAxis:G-it-nt-U.mainAxis,ot=k?-E[V]/2+_+it+et+U.mainAxis:K+it+et+U.mainAxis,ut=n.elements.arrow&&P(n.elements.arrow),at=ut?"y"===T?ut.clientTop||0:ut.clientLeft||0:0,ct=null!=(L=null==W?void 0:W[T])?L:0,st=X+ot-ct,dt=N(y?M($,X+rt-ct-at):$,X,y?S(J,st):J);B[T]=dt,z[T]=dt-X}if(d){var lt,pt="x"===T?a:s,vt="x"===T?c:f,ht=B[A],mt="y"===A?"height":"width",bt=ht+O[pt],yt=ht-O[vt],gt=-1!==[a,s].indexOf(x),wt=null!=(lt=null==W?void 0:W[A])?lt:0,Ot=gt?bt:ht-E[mt]-R[mt]-wt+U.altAxis,xt=gt?ht+E[mt]+R[mt]-wt-U.altAxis:yt,jt=y&>?function(t,n,e){var i=N(t,n,e);return i>e?e:i}(Ot,ht,xt):N(y?Ot:bt,ht,y?xt:yt);B[A]=jt,z[A]=jt-ht}n.modifiersData[i]=z}},requiresIfExists:["offset"]};function mt(t,n,e){void 0===e&&(e=!1);var i,r,o=j(n),u=j(n)&&function(t){var n=t.getBoundingClientRect(),e=A(n.width)/t.offsetWidth||1,i=A(n.height)/t.offsetHeight||1;return 1!==e||1!==i}(n),a=z(n),c=R(t,u,e),f={scrollLeft:0,scrollTop:0},s={x:0,y:0};return(o||!o&&!e)&&(("body"!==w(n)||et(a))&&(f=(i=n)!==O(i)&&j(i)?{scrollLeft:(r=i).scrollLeft,scrollTop:r.scrollTop}:tt(i)),j(n)?((s=R(n,!0)).x+=n.clientLeft,s.y+=n.clientTop):a&&(s.x=nt(a))),{x:c.left+f.scrollLeft-s.x,y:c.top+f.scrollTop-s.y,width:c.width,height:c.height}}function bt(t){var n=new Map,e=new Set,i=[];function r(t){e.add(t.name),[].concat(t.requires||[],t.requiresIfExists||[]).forEach((function(t){if(!e.has(t)){var i=n.get(t);i&&r(i)}})),i.push(t)}return t.forEach((function(t){n.set(t.name,t)})),t.forEach((function(t){e.has(t.name)||r(t)})),i}var yt={placement:"bottom",modifiers:[],strategy:"absolute"};function gt(){for(var t=arguments.length,n=new Array(t),e=0;e<t;e++)n[e]=arguments[e];return!n.some((function(t){return!(t&&"function"==typeof t.getBoundingClientRect)}))}function wt(t){void 0===t&&(t={});var n=t,e=n.defaultModifiers,i=void 0===e?[]:e,r=n.defaultOptions,o=void 0===r?yt:r;return function(t,n,e){void 0===e&&(e=o);var r,u,a={placement:"bottom",orderedModifiers:[],options:Object.assign({},yt,o),modifiersData:{},elements:{reference:t,popper:n},attributes:{},styles:{}},c=[],f=!1,s={state:a,setOptions:function(e){var r="function"==typeof e?e(a.options):e;d(),a.options=Object.assign({},o,a.options,r),a.scrollParents={reference:x(t)?rt(t):t.contextElement?rt(t.contextElement):[],popper:rt(n)};var u,f,l=function(t){var n=bt(t);return g.reduce((function(t,e){return t.concat(n.filter((function(t){return t.phase===e})))}),[])}((u=[].concat(i,a.options.modifiers),f=u.reduce((function(t,n){var e=t[n.name];return t[n.name]=e?Object.assign({},e,n,{options:Object.assign({},e.options,n.options),data:Object.assign({},e.data,n.data)}):n,t}),{}),Object.keys(f).map((function(t){return f[t]}))));return a.orderedModifiers=l.filter((function(t){return t.enabled})),a.orderedModifiers.forEach((function(t){var n=t.name,e=t.options,i=void 0===e?{}:e,r=t.effect;if("function"==typeof r){var o=r({state:a,name:n,instance:s,options:i}),u=function(){};c.push(o||u)}})),s.update()},forceUpdate:function(){if(!f){var t=a.elements,n=t.reference,e=t.popper;if(gt(n,e)){a.rects={reference:mt(n,P(e),"fixed"===a.options.strategy),popper:H(e)},a.reset=!1,a.placement=a.options.placement,a.orderedModifiers.forEach((function(t){return a.modifiersData[t.name]=Object.assign({},t.data)}));for(var i=0;i<a.orderedModifiers.length;i++)if(!0!==a.reset){var r=a.orderedModifiers[i],o=r.fn,u=r.options,c=void 0===u?{}:u,d=r.name;"function"==typeof o&&(a=o({state:a,options:c,name:d,instance:s})||a)}else a.reset=!1,i=-1}}},update:(r=function(){return new Promise((function(t){s.forceUpdate(),t(a)}))},function(){return u||(u=new Promise((function(t){Promise.resolve().then((function(){u=void 0,t(r())}))}))),u}),destroy:function(){d(),f=!0}};if(!gt(t,n))return s;function d(){c.forEach((function(t){return t()})),c=[]}return s.setOptions(e).then((function(t){!f&&e.onFirstUpdate&&e.onFirstUpdate(t)})),s}}var Ot=wt({defaultModifiers:[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(t){var n=t.state,e=t.instance,i=t.options,r=i.scroll,o=void 0===r||r,u=i.resize,a=void 0===u||u,c=O(n.elements.popper),f=[].concat(n.scrollParents.reference,n.scrollParents.popper);return o&&f.forEach((function(t){t.addEventListener("scroll",e.update,_)})),a&&c.addEventListener("resize",e.update,_),function(){o&&f.forEach((function(t){t.removeEventListener("scroll",e.update,_)})),a&&c.removeEventListener("resize",e.update,_)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(t){var n=t.state,e=t.name;n.modifiersData[e]=ct({reference:n.rects.reference,element:n.rects.popper,strategy:"absolute",placement:n.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(t){var n=t.state,e=t.options,i=e.gpuAcceleration,r=void 0===i||i,o=e.adaptive,u=void 0===o||o,a=e.roundOffsets,c=void 0===a||a,f={placement:C(n.placement),variation:Y(n.placement),popper:n.elements.popper,popperRect:n.rects.popper,gpuAcceleration:r,isFixed:"fixed"===n.options.strategy};null!=n.modifiersData.popperOffsets&&(n.styles.popper=Object.assign({},n.styles.popper,J(Object.assign({},f,{offsets:n.modifiersData.popperOffsets,position:n.options.strategy,adaptive:u,roundOffsets:c})))),null!=n.modifiersData.arrow&&(n.styles.arrow=Object.assign({},n.styles.arrow,J(Object.assign({},f,{offsets:n.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:c})))),n.attributes.popper=Object.assign({},n.attributes.popper,{"data-popper-placement":n.placement})},data:{}},T,vt,dt,ht,X,{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(t){var n=t.state,e=t.name,i=n.rects.reference,r=n.rects.popper,o=n.modifiersData.preventOverflow,u=ft(n,{elementContext:"reference"}),a=ft(n,{altBoundary:!0}),c=lt(u,i),f=lt(a,r,o),s=pt(c),d=pt(f);n.modifiersData[e]={referenceClippingOffsets:c,popperEscapeOffsets:f,isReferenceHidden:s,hasPopperEscaped:d},n.attributes.popper=Object.assign({},n.attributes.popper,{"data-popper-reference-hidden":s,"data-popper-escaped":d})}}]}),xt='<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 6s1.796-.013 4.67-3.615C5.851.9 6.93.006 8 0c1.07-.006 2.148.887 3.343 2.385C14.233 6.005 16 6 16 6H0z"></svg>',jt="tippy-content",kt="tippy-arrow",Tt="tippy-svg-arrow",Ct={passive:!0,capture:!0},St=function(){return document.body};function Mt(t,n,e){if(Array.isArray(t)){var i=t[n];return null==i?Array.isArray(e)?e[n]:e:i}return t}function At(t,n){var e={}.toString.call(t);return 0===e.indexOf("[object")&&e.indexOf(n+"]")>-1}function Bt(t,n){return"function"==typeof t?t.apply(void 0,n):t}function Et(t,n){return 0===n?t:function(i){clearTimeout(e),e=setTimeout((function(){t(i)}),n)};var e}function Rt(t){return[].concat(t)}function Ht(t,n){-1===t.indexOf(n)&&t.push(n)}function qt(t){return[].slice.call(t)}function Ut(t){return Object.keys(t).reduce((function(n,e){return void 0!==t[e]&&(n[e]=t[e]),n}),{})}function Wt(){return document.createElement("div")}function zt(t){return["Element","Fragment"].some((function(n){return At(t,n)}))}function Lt(t){return At(t,"MouseEvent")}function It(t){return zt(t)?[t]:function(t){return At(t,"NodeList")}(t)?qt(t):Array.isArray(t)?t:qt(document.querySelectorAll(t))}function Pt(t,n){t.forEach((function(t){t&&(t.style.transitionDuration=n+"ms")}))}function Dt(t,n){t.forEach((function(t){t&&t.setAttribute("data-state",n)}))}function Nt(t){var n,e=Rt(t)[0];return null!=e&&null!=(n=e.ownerDocument)&&n.body?e.ownerDocument:document}function Ft(t,n,e){var i=n+"EventListener";["transitionend","webkitTransitionEnd"].forEach((function(n){t[i](n,e)}))}function Vt(t,n){for(var e=n;e;){var i;if(t.contains(e))return!0;e=null==e.getRootNode||null==(i=e.getRootNode())?void 0:i.host}return!1}var Xt={isTouch:!1},Yt=0;function $t(){Xt.isTouch||(Xt.isTouch=!0,window.performance&&document.addEventListener("mousemove",Jt))}function Jt(){var t=performance.now();t-Yt<20&&(Xt.isTouch=!1,document.removeEventListener("mousemove",Jt)),Yt=t}function _t(){var t,n=document.activeElement;if((t=n)&&t._tippy&&t._tippy.reference===t){var e=n._tippy;n.blur&&!e.state.isVisible&&n.blur()}}var Gt=!!("undefined"!=typeof window&&"undefined"!=typeof document)&&!!window.msCrypto,Kt=Object.assign({appendTo:St,aria:{content:"auto",expanded:"auto"},delay:0,duration:[300,250],getReferenceClientRect:null,hideOnClick:!0,ignoreAttributes:!1,interactive:!1,interactiveBorder:2,interactiveDebounce:0,moveTransition:"",offset:[0,10],onAfterUpdate:function(){},onBeforeUpdate:function(){},onCreate:function(){},onDestroy:function(){},onHidden:function(){},onHide:function(){},onMount:function(){},onShow:function(){},onShown:function(){},onTrigger:function(){},onUntrigger:function(){},onClickOutside:function(){},placement:"top",plugins:[],popperOptions:{},render:null,showOnCreate:!1,touch:!0,trigger:"mouseenter focus",triggerTarget:null},{animateFill:!1,followCursor:!1,inlinePositioning:!1,sticky:!1},{allowHTML:!1,animation:"fade",arrow:!0,content:"",inertia:!1,maxWidth:350,role:"tooltip",theme:"",zIndex:9999}),Qt=Object.keys(Kt);function Zt(t){var n=(t.plugins||[]).reduce((function(n,e){var i,r=e.name,o=e.defaultValue;r&&(n[r]=void 0!==t[r]?t[r]:null!=(i=Kt[r])?i:o);return n}),{});return Object.assign({},t,n)}function tn(t,n){var e=Object.assign({},n,{content:Bt(n.content,[t])},n.ignoreAttributes?{}:function(t,n){return(n?Object.keys(Zt(Object.assign({},Kt,{plugins:n}))):Qt).reduce((function(n,e){var i=(t.getAttribute("data-tippy-"+e)||"").trim();if(!i)return n;if("content"===e)n[e]=i;else try{n[e]=JSON.parse(i)}catch(t){n[e]=i}return n}),{})}(t,n.plugins));return e.aria=Object.assign({},Kt.aria,e.aria),e.aria={expanded:"auto"===e.aria.expanded?n.interactive:e.aria.expanded,content:"auto"===e.aria.content?n.interactive?null:"describedby":e.aria.content},e}function nn(t,n){t.innerHTML=n}function en(t){var n=Wt();return!0===t?n.className=kt:(n.className=Tt,zt(t)?n.appendChild(t):nn(n,t)),n}function rn(t,n){zt(n.content)?(nn(t,""),t.appendChild(n.content)):"function"!=typeof n.content&&(n.allowHTML?nn(t,n.content):t.textContent=n.content)}function on(t){var n=t.firstElementChild,e=qt(n.children);return{box:n,content:e.find((function(t){return t.classList.contains(jt)})),arrow:e.find((function(t){return t.classList.contains(kt)||t.classList.contains(Tt)})),backdrop:e.find((function(t){return t.classList.contains("tippy-backdrop")}))}}function un(t){var n=Wt(),e=Wt();e.className="tippy-box",e.setAttribute("data-state","hidden"),e.setAttribute("tabindex","-1");var i=Wt();function r(e,i){var r=on(n),o=r.box,u=r.content,a=r.arrow;i.theme?o.setAttribute("data-theme",i.theme):o.removeAttribute("data-theme"),"string"==typeof i.animation?o.setAttribute("data-animation",i.animation):o.removeAttribute("data-animation"),i.inertia?o.setAttribute("data-inertia",""):o.removeAttribute("data-inertia"),o.style.maxWidth="number"==typeof i.maxWidth?i.maxWidth+"px":i.maxWidth,i.role?o.setAttribute("role",i.role):o.removeAttribute("role"),e.content===i.content&&e.allowHTML===i.allowHTML||rn(u,t.props),i.arrow?a?e.arrow!==i.arrow&&(o.removeChild(a),o.appendChild(en(i.arrow))):o.appendChild(en(i.arrow)):a&&o.removeChild(a)}return i.className=jt,i.setAttribute("data-state","hidden"),rn(i,t.props),n.appendChild(e),e.appendChild(i),r(t.props,t.props),{popper:n,onUpdate:r}}un.$$tippy=!0;var an=1,cn=[],fn=[];function sn(t,n){var e,i,r,o,u,a,c,f,s=tn(t,Object.assign({},Kt,Zt(Ut(n)))),d=!1,l=!1,p=!1,v=!1,h=[],m=Et($,s.interactiveDebounce),b=an++,y=(f=s.plugins).filter((function(t,n){return f.indexOf(t)===n})),g={id:b,reference:t,popper:Wt(),popperInstance:null,props:s,state:{isEnabled:!0,isVisible:!1,isDestroyed:!1,isMounted:!1,isShown:!1},plugins:y,clearDelayTimeouts:function(){clearTimeout(e),clearTimeout(i),cancelAnimationFrame(r)},setProps:function(n){if(g.state.isDestroyed)return;H("onBeforeUpdate",[g,n]),X();var e=g.props,i=tn(t,Object.assign({},e,Ut(n),{ignoreAttributes:!0}));g.props=i,V(),e.interactiveDebounce!==i.interactiveDebounce&&(W(),m=Et($,i.interactiveDebounce));e.triggerTarget&&!i.triggerTarget?Rt(e.triggerTarget).forEach((function(t){t.removeAttribute("aria-expanded")})):i.triggerTarget&&t.removeAttribute("aria-expanded");U(),R(),x&&x(e,i);g.popperInstance&&(K(),Z().forEach((function(t){requestAnimationFrame(t._tippy.popperInstance.forceUpdate)})));H("onAfterUpdate",[g,n])},setContent:function(t){g.setProps({content:t})},show:function(){var t=g.state.isVisible,n=g.state.isDestroyed,e=!g.state.isEnabled,i=Xt.isTouch&&!g.props.touch,r=Mt(g.props.duration,0,Kt.duration);if(t||n||e||i)return;if(M().hasAttribute("disabled"))return;if(H("onShow",[g],!1),!1===g.props.onShow(g))return;g.state.isVisible=!0,S()&&(O.style.visibility="visible");R(),P(),g.state.isMounted||(O.style.transition="none");if(S()){var o=B();Pt([o.box,o.content],0)}a=function(){var t;if(g.state.isVisible&&!v){if(v=!0,O.offsetHeight,O.style.transition=g.props.moveTransition,S()&&g.props.animation){var n=B(),e=n.box,i=n.content;Pt([e,i],r),Dt([e,i],"visible")}q(),U(),Ht(fn,g),null==(t=g.popperInstance)||t.forceUpdate(),H("onMount",[g]),g.props.animation&&S()&&function(t,n){N(t,n)}(r,(function(){g.state.isShown=!0,H("onShown",[g])}))}},function(){var t,n=g.props.appendTo,e=M();t=g.props.interactive&&n===St||"parent"===n?e.parentNode:Bt(n,[e]);t.contains(O)||t.appendChild(O);g.state.isMounted=!0,K()}()},hide:function(){var t=!g.state.isVisible,n=g.state.isDestroyed,e=!g.state.isEnabled,i=Mt(g.props.duration,1,Kt.duration);if(t||n||e)return;if(H("onHide",[g],!1),!1===g.props.onHide(g))return;g.state.isVisible=!1,g.state.isShown=!1,v=!1,d=!1,S()&&(O.style.visibility="hidden");if(W(),D(),R(!0),S()){var r=B(),o=r.box,u=r.content;g.props.animation&&(Pt([o,u],i),Dt([o,u],"hidden"))}q(),U(),g.props.animation?S()&&function(t,n){N(t,(function(){!g.state.isVisible&&O.parentNode&&O.parentNode.contains(O)&&n()}))}(i,g.unmount):g.unmount()},hideWithInteractivity:function(t){A().addEventListener("mousemove",m),Ht(cn,m),m(t)},enable:function(){g.state.isEnabled=!0},disable:function(){g.hide(),g.state.isEnabled=!1},unmount:function(){g.state.isVisible&&g.hide();if(!g.state.isMounted)return;Q(),Z().forEach((function(t){t._tippy.unmount()})),O.parentNode&&O.parentNode.removeChild(O);fn=fn.filter((function(t){return t!==g})),g.state.isMounted=!1,H("onHidden",[g])},destroy:function(){if(g.state.isDestroyed)return;g.clearDelayTimeouts(),g.unmount(),X(),delete t._tippy,g.state.isDestroyed=!0,H("onDestroy",[g])}};if(!s.render)return g;var w=s.render(g),O=w.popper,x=w.onUpdate;O.setAttribute("data-tippy-root",""),O.id="tippy-"+g.id,g.popper=O,t._tippy=g,O._tippy=g;var j=y.map((function(t){return t.fn(g)})),k=t.hasAttribute("aria-expanded");return V(),U(),R(),H("onCreate",[g]),s.showOnCreate&&tt(),O.addEventListener("mouseenter",(function(){g.props.interactive&&g.state.isVisible&&g.clearDelayTimeouts()})),O.addEventListener("mouseleave",(function(){g.props.interactive&&g.props.trigger.indexOf("mouseenter")>=0&&A().addEventListener("mousemove",m)})),g;function T(){var t=g.props.touch;return Array.isArray(t)?t:[t,0]}function C(){return"hold"===T()[0]}function S(){var t;return!(null==(t=g.props.render)||!t.$$tippy)}function M(){return c||t}function A(){var t=M().parentNode;return t?Nt(t):document}function B(){return on(O)}function E(t){return g.state.isMounted&&!g.state.isVisible||Xt.isTouch||o&&"focus"===o.type?0:Mt(g.props.delay,t?0:1,Kt.delay)}function R(t){void 0===t&&(t=!1),O.style.pointerEvents=g.props.interactive&&!t?"":"none",O.style.zIndex=""+g.props.zIndex}function H(t,n,e){var i;(void 0===e&&(e=!0),j.forEach((function(e){e[t]&&e[t].apply(e,n)})),e)&&(i=g.props)[t].apply(i,n)}function q(){var n=g.props.aria;if(n.content){var e="aria-"+n.content,i=O.id;Rt(g.props.triggerTarget||t).forEach((function(t){var n=t.getAttribute(e);if(g.state.isVisible)t.setAttribute(e,n?n+" "+i:i);else{var r=n&&n.replace(i,"").trim();r?t.setAttribute(e,r):t.removeAttribute(e)}}))}}function U(){!k&&g.props.aria.expanded&&Rt(g.props.triggerTarget||t).forEach((function(t){g.props.interactive?t.setAttribute("aria-expanded",g.state.isVisible&&t===M()?"true":"false"):t.removeAttribute("aria-expanded")}))}function W(){A().removeEventListener("mousemove",m),cn=cn.filter((function(t){return t!==m}))}function z(n){if(!Xt.isTouch||!p&&"mousedown"!==n.type){var e=n.composedPath&&n.composedPath()[0]||n.target;if(!g.props.interactive||!Vt(O,e)){if(Rt(g.props.triggerTarget||t).some((function(t){return Vt(t,e)}))){if(Xt.isTouch)return;if(g.state.isVisible&&g.props.trigger.indexOf("click")>=0)return}else H("onClickOutside",[g,n]);!0===g.props.hideOnClick&&(g.clearDelayTimeouts(),g.hide(),l=!0,setTimeout((function(){l=!1})),g.state.isMounted||D())}}}function L(){p=!0}function I(){p=!1}function P(){var t=A();t.addEventListener("mousedown",z,!0),t.addEventListener("touchend",z,Ct),t.addEventListener("touchstart",I,Ct),t.addEventListener("touchmove",L,Ct)}function D(){var t=A();t.removeEventListener("mousedown",z,!0),t.removeEventListener("touchend",z,Ct),t.removeEventListener("touchstart",I,Ct),t.removeEventListener("touchmove",L,Ct)}function N(t,n){var e=B().box;function i(t){t.target===e&&(Ft(e,"remove",i),n())}if(0===t)return n();Ft(e,"remove",u),Ft(e,"add",i),u=i}function F(n,e,i){void 0===i&&(i=!1),Rt(g.props.triggerTarget||t).forEach((function(t){t.addEventListener(n,e,i),h.push({node:t,eventType:n,handler:e,options:i})}))}function V(){var t;C()&&(F("touchstart",Y,{passive:!0}),F("touchend",J,{passive:!0})),(t=g.props.trigger,t.split(/\s+/).filter(Boolean)).forEach((function(t){if("manual"!==t)switch(F(t,Y),t){case"mouseenter":F("mouseleave",J);break;case"focus":F(Gt?"focusout":"blur",_);break;case"focusin":F("focusout",_)}}))}function X(){h.forEach((function(t){var n=t.node,e=t.eventType,i=t.handler,r=t.options;n.removeEventListener(e,i,r)})),h=[]}function Y(t){var n,e=!1;if(g.state.isEnabled&&!G(t)&&!l){var i="focus"===(null==(n=o)?void 0:n.type);o=t,c=t.currentTarget,U(),!g.state.isVisible&&Lt(t)&&cn.forEach((function(n){return n(t)})),"click"===t.type&&(g.props.trigger.indexOf("mouseenter")<0||d)&&!1!==g.props.hideOnClick&&g.state.isVisible?e=!0:tt(t),"click"===t.type&&(d=!e),e&&!i&&nt(t)}}function $(t){var n=t.target,e=M().contains(n)||O.contains(n);if("mousemove"!==t.type||!e){var i=Z().concat(O).map((function(t){var n,e=null==(n=t._tippy.popperInstance)?void 0:n.state;return e?{popperRect:t.getBoundingClientRect(),popperState:e,props:s}:null})).filter(Boolean);(function(t,n){var e=n.clientX,i=n.clientY;return t.every((function(t){var n=t.popperRect,r=t.popperState,o=t.props.interactiveBorder,u=r.placement.split("-")[0],a=r.modifiersData.offset;if(!a)return!0;var c="bottom"===u?a.top.y:0,f="top"===u?a.bottom.y:0,s="right"===u?a.left.x:0,d="left"===u?a.right.x:0,l=n.top-i+c>o,p=i-n.bottom-f>o,v=n.left-e+s>o,h=e-n.right-d>o;return l||p||v||h}))})(i,t)&&(W(),nt(t))}}function J(t){G(t)||g.props.trigger.indexOf("click")>=0&&d||(g.props.interactive?g.hideWithInteractivity(t):nt(t))}function _(t){g.props.trigger.indexOf("focusin")<0&&t.target!==M()||g.props.interactive&&t.relatedTarget&&O.contains(t.relatedTarget)||nt(t)}function G(t){return!!Xt.isTouch&&C()!==t.type.indexOf("touch")>=0}function K(){Q();var n=g.props,e=n.popperOptions,i=n.placement,r=n.offset,o=n.getReferenceClientRect,u=n.moveTransition,c=S()?on(O).arrow:null,f=o?{getBoundingClientRect:o,contextElement:o.contextElement||M()}:t,s={name:"$$tippy",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:function(t){var n=t.state;if(S()){var e=B().box;["placement","reference-hidden","escaped"].forEach((function(t){"placement"===t?e.setAttribute("data-placement",n.placement):n.attributes.popper["data-popper-"+t]?e.setAttribute("data-"+t,""):e.removeAttribute("data-"+t)})),n.attributes.popper={}}}},d=[{name:"offset",options:{offset:r}},{name:"preventOverflow",options:{padding:{top:2,bottom:2,left:5,right:5}}},{name:"flip",options:{padding:5}},{name:"computeStyles",options:{adaptive:!u}},s];S()&&c&&d.push({name:"arrow",options:{element:c,padding:3}}),d.push.apply(d,(null==e?void 0:e.modifiers)||[]),g.popperInstance=Ot(f,O,Object.assign({},e,{placement:i,onFirstUpdate:a,modifiers:d}))}function Q(){g.popperInstance&&(g.popperInstance.destroy(),g.popperInstance=null)}function Z(){return qt(O.querySelectorAll("[data-tippy-root]"))}function tt(t){g.clearDelayTimeouts(),t&&H("onTrigger",[g,t]),P();var n=E(!0),i=T(),r=i[0],o=i[1];Xt.isTouch&&"hold"===r&&o&&(n=o),n?e=setTimeout((function(){g.show()}),n):g.show()}function nt(t){if(g.clearDelayTimeouts(),H("onUntrigger",[g,t]),g.state.isVisible){if(!(g.props.trigger.indexOf("mouseenter")>=0&&g.props.trigger.indexOf("click")>=0&&["mouseleave","mousemove"].indexOf(t.type)>=0&&d)){var n=E(!1);n?i=setTimeout((function(){g.state.isVisible&&g.hide()}),n):r=requestAnimationFrame((function(){g.hide()}))}}else D()}}function dn(t,n){void 0===n&&(n={});var e=Kt.plugins.concat(n.plugins||[]);document.addEventListener("touchstart",$t,Ct),window.addEventListener("blur",_t);var i=Object.assign({},n,{plugins:e}),r=It(t).reduce((function(t,n){var e=n&&sn(n,i);return e&&t.push(e),t}),[]);return zt(t)?r[0]:r}dn.defaultProps=Kt,dn.setDefaultProps=function(t){Object.keys(t).forEach((function(n){Kt[n]=t[n]}))},dn.currentInput=Xt;var ln=Object.assign({},T,{effect:function(t){var n=t.state,e={popper:{position:n.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(n.elements.popper.style,e.popper),n.styles=e,n.elements.arrow&&Object.assign(n.elements.arrow.style,e.arrow)}}),pn=function(t,n){var e;void 0===n&&(n={});var i,r=t,o=[],u=[],a=n.overrides,c=[],f=!1;function s(){u=r.map((function(t){return Rt(t.props.triggerTarget||t.reference)})).reduce((function(t,n){return t.concat(n)}),[])}function d(){o=r.map((function(t){return t.reference}))}function l(t){r.forEach((function(n){t?n.enable():n.disable()}))}function p(t){return r.map((function(n){var e=n.setProps;return n.setProps=function(r){e(r),n.reference===i&&t.setProps(r)},function(){n.setProps=e}}))}function v(t,n){var e=u.indexOf(n);if(n!==i){i=n;var c=(a||[]).concat("content").reduce((function(t,n){return t[n]=r[e].props[n],t}),{});t.setProps(Object.assign({},c,{getReferenceClientRect:"function"==typeof c.getReferenceClientRect?c.getReferenceClientRect:function(){var t;return null==(t=o[e])?void 0:t.getBoundingClientRect()}}))}}l(!1),d(),s();var h,m,b,y={fn:function(){return{onDestroy:function(){l(!0)},onHidden:function(){i=null},onClickOutside:function(t){t.props.showOnCreate&&!f&&(f=!0,i=null)},onShow:function(t){t.props.showOnCreate&&!f&&(f=!0,v(t,o[0]))},onTrigger:function(t,n){v(t,n.currentTarget)}}}},g=dn(Wt(),Object.assign({},(h=n,m=["overrides"],b=Object.assign({},h),m.forEach((function(t){delete b[t]})),b),{plugins:[y].concat(n.plugins||[]),triggerTarget:u,popperOptions:Object.assign({},n.popperOptions,{modifiers:[].concat((null==(e=n.popperOptions)?void 0:e.modifiers)||[],[ln])})})),w=g.show;g.show=function(t){if(w(),!i&&null==t)return v(g,o[0]);if(!i||null!=t){if("number"==typeof t)return o[t]&&v(g,o[t]);if(r.indexOf(t)>=0){var n=t.reference;return v(g,n)}return o.indexOf(t)>=0?v(g,t):void 0}},g.showNext=function(){var t=o[0];if(!i)return g.show(0);var n=o.indexOf(i);g.show(o[n+1]||t)},g.showPrevious=function(){var t=o[o.length-1];if(!i)return g.show(t);var n=o.indexOf(i),e=o[n-1]||t;g.show(e)};var O=g.setProps;return g.setProps=function(t){a=t.overrides||a,O(t)},g.setInstances=function(t){l(!0),c.forEach((function(t){return t()})),r=t,l(!1),d(),s(),c=p(g),g.setProps({triggerTarget:u})},c=p(g),g},vn={clientX:0,clientY:0},hn=[];function mn(t){var n=t.clientX,e=t.clientY;vn={clientX:n,clientY:e}}var bn={name:"followCursor",defaultValue:!1,fn:function(t){var n=t.reference,e=Nt(t.props.triggerTarget||n),i=!1,r=!1,o=!0,u=t.props;function a(){return"initial"===t.props.followCursor&&t.state.isVisible}function c(){e.addEventListener("mousemove",d)}function f(){e.removeEventListener("mousemove",d)}function s(){i=!0,t.setProps({getReferenceClientRect:null}),i=!1}function d(e){var i=!e.target||n.contains(e.target),r=t.props.followCursor,o=e.clientX,u=e.clientY,a=n.getBoundingClientRect(),c=o-a.left,f=u-a.top;!i&&t.props.interactive||t.setProps({getReferenceClientRect:function(){var t=n.getBoundingClientRect(),e=o,i=u;"initial"===r&&(e=t.left+c,i=t.top+f);var a="horizontal"===r?t.top:i,s="vertical"===r?t.right:e,d="horizontal"===r?t.bottom:i,l="vertical"===r?t.left:e;return{width:s-l,height:d-a,top:a,right:s,bottom:d,left:l}}})}function l(){t.props.followCursor&&(hn.push({instance:t,doc:e}),function(t){t.addEventListener("mousemove",mn)}(e))}function p(){0===(hn=hn.filter((function(n){return n.instance!==t}))).filter((function(t){return t.doc===e})).length&&function(t){t.removeEventListener("mousemove",mn)}(e)}return{onCreate:l,onDestroy:p,onBeforeUpdate:function(){u=t.props},onAfterUpdate:function(n,e){var o=e.followCursor;i||void 0!==o&&u.followCursor!==o&&(p(),o?(l(),!t.state.isMounted||r||a()||c()):(f(),s()))},onMount:function(){t.props.followCursor&&!r&&(o&&(d(vn),o=!1),a()||c())},onTrigger:function(t,n){Lt(n)&&(vn={clientX:n.clientX,clientY:n.clientY}),r="focus"===n.type},onHidden:function(){t.props.followCursor&&(s(),f(),o=!0)}}}};dn.setDefaultProps({render:un});let yn=class extends r{static get styles(){return[i]}createRenderRoot(){return this}constructor(){super(),this.for=null,this.content="",this.size="small",this.duration=200,this.interactive=!1,this.placement="top",this.disabled=!1,this.distance=8,this.skidding=0,this.open=!1,this.trigger="mouseenter focus",this.allowHTML=!1,this.followCursor=!1,this.arrow="default",this.singleton=!1,this.delay=0,this.maxWidth="auto",this.zIndex=9999,this.hideOnClick=!0,this.inertia=!1,this.interactiveBorder=2}firstUpdated(){this.attachTooltip()}refresh(){this.attachTooltip()}attachTooltip(){if(this.destroyTooltips(),this.disabled)return;const t={content:this.content||this.getAttribute("data-tippy-content")||void 0,placement:this.placement,trigger:this.trigger,offset:[this.skidding,this.distance],theme:"lite",animation:"fade",interactive:this.interactive,arrow:xt,duration:o(this.duration),allowHTML:this.allowHTML,delay:this.delay,maxWidth:this.maxWidth,zIndex:this.zIndex,hideOnClick:!1,inertia:this.inertia,interactiveBorder:this.interactiveBorder,appendTo:document.body,followCursor:u(this.followCursor),plugins:u(this.followCursor)?[bn]:[],onShow:t=>{this.open=!0,this.dispatchEvent(new CustomEvent("nile-show",{detail:{instance:t,target:t.reference}})),this.dispatchEvent(new CustomEvent("nile-toggle",{detail:{open:!0,instance:t,target:t.reference}}))},onHide:t=>{this.open=!1,this.dispatchEvent(new CustomEvent("nile-hide",{detail:{instance:t,target:t.reference}})),this.dispatchEvent(new CustomEvent("nile-toggle",{detail:{open:!1,instance:t,target:t.reference}}))}};let n=[];if(this.for){const e=this.for.trim();try{n=Array.from(document.querySelectorAll(e))}catch{n=Array.from(document.querySelectorAll(`.${this.for}`))}if(n.length>0)return this.tooltipInstances=n.map((n=>{const e=dn(n,{...t,content:n.getAttribute("content")||this.content});return e.popper.querySelector(".tippy-box")?.classList.add(this.size),e})),this.singleton&&this.tooltipInstances.length>1&&(this.singletonInstance=pn(this.tooltipInstances,{delay:[75,0],arrow:xt,moveTransition:"transform 0.15s ease-out"})),void(this.open&&queueMicrotask((()=>{this.singletonInstance?.show(),this.tooltipInstances?.forEach((t=>t.show()))})));const i=document.getElementById(this.for);if(i)return this.singleInstance=dn(i,t),this.singleInstance.popper.querySelector(".tippy-box")?.classList.add(this.size),void(this.open&&queueMicrotask((()=>this.singleInstance?.show())))}const e=Array.from(this.querySelectorAll("*"));e.length>0&&(this.tooltipInstances=e.map((n=>{const e=n,i=e.getAttribute("content")||this.content,r=dn(e,{...t,content:i});return r.popper.querySelector(".tippy-box")?.classList.add(this.size),r})),this.singleton&&this.tooltipInstances.length>1&&(this.singletonInstance=pn(this.tooltipInstances,{delay:[75,0],arrow:xt,moveTransition:"transform 0.15s ease-out"})),this.open&&queueMicrotask((()=>{this.singletonInstance?.show(),this.tooltipInstances?.forEach((t=>t.show()))})))}destroyTooltips(){if(this.tooltipInstances?.forEach((t=>t.destroy())),this.singleInstance?.destroy(),this.singletonInstance?.destroy(),this.tooltipInstances=void 0,this.singleInstance=void 0,this.singletonInstance=void 0,this.targetEl&&this.id){const t=this.targetEl.getAttribute("aria-describedby")?.split(" ").filter((t=>t!==this.id)).join(" ").trim();t?this.targetEl.setAttribute("aria-describedby",t):this.targetEl.removeAttribute("aria-describedby")}}disconnectedCallback(){super.disconnectedCallback(),this.destroyTooltips()}updated(t){super.updated(t),["for","content","placement","distance","skidding","trigger","disabled","hoist","size","arrow","singleton"].some((n=>t.has(n)))&&this.attachTooltip(),t.has("open")&&(this.open?(this.singleInstance?.show(),this.singletonInstance?.show(),this.tooltipInstances?.forEach((t=>t.show()))):(this.singleInstance?.hide(),this.singletonInstance?.hide(),this.tooltipInstances?.forEach((t=>t.hide()))))}};t([n({type:String,attribute:"for"})],yn.prototype,"for",void 0),t([n({type:String,reflect:!0})],yn.prototype,"content",void 0),t([n({type:String,reflect:!0})],yn.prototype,"size",void 0),t([n({type:String,reflect:!0})],yn.prototype,"duration",void 0),t([n({type:Boolean,reflect:!0})],yn.prototype,"interactive",void 0),t([n({type:String})],yn.prototype,"placement",void 0),t([n({type:Boolean})],yn.prototype,"disabled",void 0),t([n({type:Number})],yn.prototype,"distance",void 0),t([n({type:Number})],yn.prototype,"skidding",void 0),t([n({type:Boolean,reflect:!0})],yn.prototype,"open",void 0),t([n({type:String})],yn.prototype,"trigger",void 0),t([n({type:Boolean,reflect:!0})],yn.prototype,"allowHTML",void 0),t([n({type:String,reflect:!0,attribute:!0})],yn.prototype,"followCursor",void 0),t([n({type:String,reflect:!0,attribute:!0})],yn.prototype,"arrow",void 0),t([n({type:Boolean,reflect:!0})],yn.prototype,"singleton",void 0),t([n({type:String,reflect:!0})],yn.prototype,"delay",void 0),t([n({type:String,reflect:!0})],yn.prototype,"maxWidth",void 0),t([n({type:Number})],yn.prototype,"zIndex",void 0),t([n({type:[Boolean,String],reflect:!0})],yn.prototype,"hideOnClick",void 0),t([n({type:Boolean,reflect:!0})],yn.prototype,"inertia",void 0),t([n({type:Number})],yn.prototype,"interactiveBorder",void 0),yn=t([e("nile-lite-tooltip")],yn);export{yn as N};
|
|
@@ -2,11 +2,19 @@ import { TemplateResult } from 'lit';
|
|
|
2
2
|
import NileElement from '../internal/nile-element';
|
|
3
3
|
import type { CSSResultGroup, PropertyValues } from 'lit';
|
|
4
4
|
import { NileDropdown } from '../nile-dropdown';
|
|
5
|
+
import { NileInput } from '../nile-input';
|
|
5
6
|
export declare class NileAutoComplete extends NileElement {
|
|
6
7
|
static styles: CSSResultGroup;
|
|
7
8
|
dropdownElement: NileDropdown;
|
|
9
|
+
inputElement: NileInput;
|
|
8
10
|
disabled: boolean;
|
|
9
11
|
isDropdownOpen: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* When true, the dropdown menu will be appended to the document body instead of the parent container.
|
|
14
|
+
* This is useful when the parent has overflow: hidden, clip-path, or transform applied.
|
|
15
|
+
*/
|
|
16
|
+
portal: boolean;
|
|
17
|
+
private readonly portalManager;
|
|
10
18
|
enableVirtualScroll: boolean;
|
|
11
19
|
openOnFocus: boolean;
|
|
12
20
|
value: string;
|
|
@@ -20,12 +28,21 @@ export declare class NileAutoComplete extends NileElement {
|
|
|
20
28
|
allMenuItems: any;
|
|
21
29
|
menuItems: any;
|
|
22
30
|
connectedCallback(): void;
|
|
31
|
+
disconnectedCallback(): void;
|
|
23
32
|
protected updated(changedProperties: PropertyValues): void;
|
|
33
|
+
handlePortalChange(): void;
|
|
34
|
+
private handleDropdownOpenChange;
|
|
35
|
+
private addOpenListeners;
|
|
36
|
+
private removeOpenListeners;
|
|
37
|
+
private handleDocumentFocusIn;
|
|
38
|
+
private handleDocumentMouseDown;
|
|
39
|
+
private handleWindowResize;
|
|
40
|
+
private handleWindowScroll;
|
|
24
41
|
render(): TemplateResult;
|
|
25
42
|
getVirtualizedContent(): TemplateResult;
|
|
26
43
|
getContent(): TemplateResult;
|
|
27
44
|
getItemRenderFunction(item: any): TemplateResult;
|
|
28
|
-
|
|
45
|
+
handleSelect(event: CustomEvent): void;
|
|
29
46
|
private setVirtualMenuWidth;
|
|
30
47
|
private handleSearch;
|
|
31
48
|
handleFocus(): void;
|
|
@@ -3,7 +3,10 @@ import { html, nothing, } from 'lit';
|
|
|
3
3
|
import { customElement, query, state, property } from 'lit/decorators.js';
|
|
4
4
|
import { styles } from './nile-auto-complete.css';
|
|
5
5
|
import NileElement from '../internal/nile-element';
|
|
6
|
+
import { watch } from '../internal/watch';
|
|
7
|
+
import { AutoCompletePortalManager } from './portal-manager';
|
|
6
8
|
import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
|
|
9
|
+
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
7
10
|
// Define the custom element 'nile-auto-complete'
|
|
8
11
|
let NileAutoComplete = class NileAutoComplete extends NileElement {
|
|
9
12
|
constructor() {
|
|
@@ -11,6 +14,12 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
|
|
|
11
14
|
// Define component properties
|
|
12
15
|
this.disabled = false;
|
|
13
16
|
this.isDropdownOpen = false;
|
|
17
|
+
/**
|
|
18
|
+
* When true, the dropdown menu will be appended to the document body instead of the parent container.
|
|
19
|
+
* This is useful when the parent has overflow: hidden, clip-path, or transform applied.
|
|
20
|
+
*/
|
|
21
|
+
this.portal = false;
|
|
22
|
+
this.portalManager = new AutoCompletePortalManager(this);
|
|
14
23
|
this.enableVirtualScroll = false;
|
|
15
24
|
this.openOnFocus = false;
|
|
16
25
|
this.value = '';
|
|
@@ -23,21 +32,109 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
|
|
|
23
32
|
this.renderItemFunction = (item) => item;
|
|
24
33
|
this.allMenuItems = [];
|
|
25
34
|
this.menuItems = [];
|
|
35
|
+
this.handleWindowResize = () => {
|
|
36
|
+
this.portalManager.updatePortalAppendPosition();
|
|
37
|
+
};
|
|
38
|
+
this.handleWindowScroll = () => {
|
|
39
|
+
this.portalManager.updatePortalAppendPosition();
|
|
40
|
+
};
|
|
26
41
|
}
|
|
27
42
|
connectedCallback() {
|
|
28
43
|
super.connectedCallback();
|
|
29
44
|
this.renderItemFunction = (item) => item;
|
|
45
|
+
this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
|
|
46
|
+
this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
|
|
47
|
+
this.handleWindowResize = this.handleWindowResize.bind(this);
|
|
48
|
+
this.handleWindowScroll = this.handleWindowScroll.bind(this);
|
|
49
|
+
}
|
|
50
|
+
disconnectedCallback() {
|
|
51
|
+
super.disconnectedCallback();
|
|
52
|
+
this.removeOpenListeners();
|
|
53
|
+
this.portalManager.cleanupPortalAppend();
|
|
30
54
|
}
|
|
31
55
|
updated(changedProperties) {
|
|
32
56
|
super.updated(changedProperties);
|
|
33
57
|
if (changedProperties.has('allMenuItems')) {
|
|
34
58
|
this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
|
|
35
59
|
this.setVirtualMenuWidth();
|
|
60
|
+
if (this.portal && this.isDropdownOpen) {
|
|
61
|
+
this.portalManager.updatePortalOptions();
|
|
62
|
+
}
|
|
36
63
|
}
|
|
37
|
-
if (changedProperties.has('isDropdownOpen'))
|
|
64
|
+
if (changedProperties.has('isDropdownOpen')) {
|
|
38
65
|
this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
|
|
66
|
+
this.handleDropdownOpenChange();
|
|
67
|
+
}
|
|
39
68
|
if (changedProperties.has('value')) {
|
|
40
69
|
this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
|
|
70
|
+
if (this.portal && this.isDropdownOpen) {
|
|
71
|
+
this.portalManager.updatePortalOptions();
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
if (changedProperties.has('portal')) {
|
|
75
|
+
this.handlePortalChange();
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
handlePortalChange() {
|
|
79
|
+
if (this.isDropdownOpen) {
|
|
80
|
+
if (this.portal) {
|
|
81
|
+
this.portalManager.setupPortalAppend();
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
this.portalManager.cleanupPortalAppend();
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
handleDropdownOpenChange() {
|
|
89
|
+
if (this.isDropdownOpen) {
|
|
90
|
+
this.addOpenListeners();
|
|
91
|
+
if (this.portal) {
|
|
92
|
+
this.portalManager.setupPortalAppend();
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
this.removeOpenListeners();
|
|
97
|
+
if (this.portal) {
|
|
98
|
+
this.portalManager.cleanupPortalAppend();
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
addOpenListeners() {
|
|
103
|
+
document.addEventListener('focusin', this.handleDocumentFocusIn);
|
|
104
|
+
document.addEventListener('mousedown', this.handleDocumentMouseDown);
|
|
105
|
+
if (this.portal) {
|
|
106
|
+
window.addEventListener('resize', this.handleWindowResize);
|
|
107
|
+
window.addEventListener('scroll', this.handleWindowScroll, true);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
removeOpenListeners() {
|
|
111
|
+
document.removeEventListener('focusin', this.handleDocumentFocusIn);
|
|
112
|
+
document.removeEventListener('mousedown', this.handleDocumentMouseDown);
|
|
113
|
+
window.removeEventListener('resize', this.handleWindowResize);
|
|
114
|
+
window.removeEventListener('scroll', this.handleWindowScroll, true);
|
|
115
|
+
}
|
|
116
|
+
handleDocumentFocusIn(event) {
|
|
117
|
+
if (!this.isDropdownOpen)
|
|
118
|
+
return;
|
|
119
|
+
const path = event.composedPath();
|
|
120
|
+
const hitSelf = path.includes(this);
|
|
121
|
+
const hitDropdown = this.dropdownElement && path.includes(this.dropdownElement);
|
|
122
|
+
const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
|
|
123
|
+
if (!hitSelf && !hitDropdown && !hitPortalAppend) {
|
|
124
|
+
this.isDropdownOpen = false;
|
|
125
|
+
this.dropdownElement?.hide();
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
handleDocumentMouseDown(event) {
|
|
129
|
+
if (!this.isDropdownOpen)
|
|
130
|
+
return;
|
|
131
|
+
const path = event.composedPath();
|
|
132
|
+
const hitSelf = path.includes(this);
|
|
133
|
+
const hitDropdown = this.dropdownElement && path.includes(this.dropdownElement);
|
|
134
|
+
const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
|
|
135
|
+
if (!hitSelf && !hitDropdown && !hitPortalAppend) {
|
|
136
|
+
this.isDropdownOpen = false;
|
|
137
|
+
this.dropdownElement?.hide();
|
|
41
138
|
}
|
|
42
139
|
}
|
|
43
140
|
render() {
|
|
@@ -67,7 +164,7 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
|
|
|
67
164
|
}
|
|
68
165
|
getVirtualizedContent() {
|
|
69
166
|
return html `
|
|
70
|
-
<nile-menu class="virtualized__menu" @nile-select=${this.handleSelect} id="content-menu" exportparts="menu__items-wrapper:options__wrapper">
|
|
167
|
+
<nile-menu class="virtualized__menu" @nile-select=${this.handleSelect} id="content-menu" exportparts="menu__items-wrapper:options__wrapper" style=${this.portal ? 'display: none;' : ''}>
|
|
71
168
|
${virtualize({
|
|
72
169
|
items: this.menuItems,
|
|
73
170
|
renderItem: (item) => this.getItemRenderFunction(item),
|
|
@@ -78,17 +175,26 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
|
|
|
78
175
|
}
|
|
79
176
|
getContent() {
|
|
80
177
|
return html `
|
|
81
|
-
<nile-menu id="content-menu" @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper">
|
|
178
|
+
<nile-menu id="content-menu" @nile-select=${this.handleSelect} exportparts="menu__items-wrapper:options__wrapper" style=${this.portal ? 'display: none;' : ''}>
|
|
82
179
|
${this.menuItems.map((item) => this.getItemRenderFunction(item))}
|
|
83
180
|
</nile-menu>`;
|
|
84
181
|
}
|
|
85
182
|
getItemRenderFunction(item) {
|
|
86
183
|
const value = this.renderItemFunction(item);
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
184
|
+
const hasTooltip = !!item.tooltip;
|
|
185
|
+
const shouldShowTooltip = hasTooltip && (!item.tooltip.for || item.tooltip.for === 'menu');
|
|
186
|
+
const tooltipContent = hasTooltip ? item.tooltip.content : value;
|
|
187
|
+
return shouldShowTooltip
|
|
188
|
+
? html `
|
|
189
|
+
<nile-menu-item value=${value}>
|
|
190
|
+
<nile-lite-tooltip allowHTML .content=${tooltipContent}>
|
|
191
|
+
<span class="menu-item-text">${unsafeHTML(value)}</span>
|
|
192
|
+
</nile-lite-tooltip>
|
|
193
|
+
</nile-menu-item>
|
|
194
|
+
`
|
|
195
|
+
: html `
|
|
196
|
+
<nile-menu-item value=${value}>${unsafeHTML(value)}</nile-menu-item>
|
|
197
|
+
`;
|
|
92
198
|
}
|
|
93
199
|
handleSelect(event) {
|
|
94
200
|
this.value = event.detail.value;
|
|
@@ -112,13 +218,20 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
|
|
|
112
218
|
// Filter menu items based on the search value
|
|
113
219
|
this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
|
|
114
220
|
this.isDropdownOpen = this.menuItems.length > 0;
|
|
115
|
-
if (this.isDropdownOpen)
|
|
221
|
+
if (this.isDropdownOpen) {
|
|
116
222
|
this.dropdownElement?.show();
|
|
223
|
+
if (this.portal) {
|
|
224
|
+
this.portalManager.updatePortalOptions();
|
|
225
|
+
}
|
|
226
|
+
}
|
|
117
227
|
}
|
|
118
228
|
handleFocus() {
|
|
119
229
|
if (!this.openOnFocus) {
|
|
120
230
|
return;
|
|
121
231
|
}
|
|
232
|
+
if (this.portal) {
|
|
233
|
+
this.inputElement?.focus();
|
|
234
|
+
}
|
|
122
235
|
// Delay opening the dropdown to allow focus to take effect
|
|
123
236
|
setTimeout(() => {
|
|
124
237
|
this.isDropdownOpen = true;
|
|
@@ -141,12 +254,18 @@ NileAutoComplete.styles = styles;
|
|
|
141
254
|
__decorate([
|
|
142
255
|
query('nile-dropdown')
|
|
143
256
|
], NileAutoComplete.prototype, "dropdownElement", void 0);
|
|
257
|
+
__decorate([
|
|
258
|
+
query('nile-input')
|
|
259
|
+
], NileAutoComplete.prototype, "inputElement", void 0);
|
|
144
260
|
__decorate([
|
|
145
261
|
property({ type: Boolean })
|
|
146
262
|
], NileAutoComplete.prototype, "disabled", void 0);
|
|
147
263
|
__decorate([
|
|
148
264
|
property({ type: Boolean })
|
|
149
265
|
], NileAutoComplete.prototype, "isDropdownOpen", void 0);
|
|
266
|
+
__decorate([
|
|
267
|
+
property({ type: Boolean, reflect: true })
|
|
268
|
+
], NileAutoComplete.prototype, "portal", void 0);
|
|
150
269
|
__decorate([
|
|
151
270
|
property({ type: Boolean })
|
|
152
271
|
], NileAutoComplete.prototype, "enableVirtualScroll", void 0);
|
|
@@ -183,6 +302,9 @@ __decorate([
|
|
|
183
302
|
__decorate([
|
|
184
303
|
state()
|
|
185
304
|
], NileAutoComplete.prototype, "menuItems", void 0);
|
|
305
|
+
__decorate([
|
|
306
|
+
watch('portal', { waitUntilFirstUpdate: true })
|
|
307
|
+
], NileAutoComplete.prototype, "handlePortalChange", null);
|
|
186
308
|
NileAutoComplete = __decorate([
|
|
187
309
|
customElement('nile-auto-complete')
|
|
188
310
|
], NileAutoComplete);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\n\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n static styles: CSSResultGroup = styles;\n\n @query('nile-dropdown') dropdownElement: NileDropdown;\n\n // Define component properties\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n \n @property({ type: Boolean }) noOutline: boolean = false;\n\n @property({ type: Boolean }) noPadding: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @state() menuItems: any = [];\n\n connectedCallback() {\n super.connectedCallback();\n this.renderItemFunction=(item:any)=>item;\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('allMenuItems')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n this.setVirtualMenuWidth();\n }\n if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n if (changedProperties.has('value')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n }\n }\n\n public render(): TemplateResult {\n const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick exportparts=\"input, base\">\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n ?no-outline=${this.noOutline}\n ?no-padding=${this.noPadding}\n .disabled=${this.disabled}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n exportparts=\"input, base\"\n >\n ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"var(--nile-icon-button-loading-blue-animated, var(--ng-icon-button-loading-blue-animated))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" library=\"system\"></nile-icon>`:nothing}\n </nile-input>\n ${this.menuItems.length > 0 && !this.loading\n ? content\n : nothing}\n </nile-dropdown>\n `;\n } \n \n getVirtualizedContent():TemplateResult{\n return html`\n <nile-menu class=\"virtualized__menu\" @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\">\n ${virtualize({\n items: this.menuItems,\n renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),\n\t\t\t\t\tscroller:true\n })}\n </nile-menu>\n `\n }\n\n getContent():TemplateResult{\n return html`\n <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n ${this.menuItems.map((item: any) => this.getItemRenderFunction(item))}\n </nile-menu>`\n }\n\n getItemRenderFunction(item:any):TemplateResult{\n const value=this.renderItemFunction(item)\n return html`\n <nile-menu-item value=${value}>\n ${value}\n </nile-menu-item>\n `;\n }\n\n private handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private setVirtualMenuWidth() {\n const maxLengthOption = this.menuItems\n .reduce((acc: number, curr: any) => {\n const currLength = this.renderItemFunction(curr).length\n return acc > currLength ? acc : currLength\n }, 0)\n const defaultWith = 110;\n const pixelMultiplier = 9.5;\n const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;\n this.style.setProperty(\"--virtual-scroll-container-width\", menuWidth + \"px\");\n }\n\n private handleSearch(event: CustomEvent) {\n this.value = event.detail.value.toLowerCase();\n\n // Filter menu items based on the search value\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) this.dropdownElement?.show();\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n if(typeof(list)!=='object') return []\n const res:T[]=[]\n list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n return res\n }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\nimport { watch } from '../internal/watch';\nimport { AutoCompletePortalManager } from './portal-manager';\nimport { NileInput } from '../nile-input';\n\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n static styles: CSSResultGroup = styles;\n\n @query('nile-dropdown') dropdownElement: NileDropdown;\n\n @query('nile-input') inputElement: NileInput;\n\n // Define component properties\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n /** \n * When true, the dropdown menu will be appended to the document body instead of the parent container.\n * This is useful when the parent has overflow: hidden, clip-path, or transform applied.\n */\n @property({ type: Boolean, reflect: true }) portal = false;\n\n private readonly portalManager = new AutoCompletePortalManager(this);\n\n @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n \n @property({ type: Boolean }) noOutline: boolean = false;\n\n @property({ type: Boolean }) noPadding: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @state() menuItems: any = [];\n\n connectedCallback() {\n super.connectedCallback();\n this.renderItemFunction=(item:any)=>item;\n this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);\n this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n this.handleWindowResize = this.handleWindowResize.bind(this);\n this.handleWindowScroll = this.handleWindowScroll.bind(this);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeOpenListeners();\n this.portalManager.cleanupPortalAppend();\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('allMenuItems')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n this.setVirtualMenuWidth();\n if (this.portal && this.isDropdownOpen) {\n this.portalManager.updatePortalOptions();\n }\n }\n if (changedProperties.has('isDropdownOpen')) {\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n this.handleDropdownOpenChange();\n }\n if (changedProperties.has('value')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n if (this.portal && this.isDropdownOpen) {\n this.portalManager.updatePortalOptions();\n }\n }\n if (changedProperties.has('portal')) {\n this.handlePortalChange();\n }\n }\n\n @watch('portal', { waitUntilFirstUpdate: true })\n handlePortalChange(): void {\n if (this.isDropdownOpen) {\n if (this.portal) {\n this.portalManager.setupPortalAppend();\n } else {\n this.portalManager.cleanupPortalAppend();\n }\n }\n }\n\n private handleDropdownOpenChange(): void {\n if (this.isDropdownOpen) {\n this.addOpenListeners();\n if (this.portal) {\n this.portalManager.setupPortalAppend();\n }\n } else {\n this.removeOpenListeners();\n if (this.portal) {\n this.portalManager.cleanupPortalAppend();\n }\n }\n }\n\n private addOpenListeners(): void {\n document.addEventListener('focusin', this.handleDocumentFocusIn);\n document.addEventListener('mousedown', this.handleDocumentMouseDown);\n \n if (this.portal) {\n window.addEventListener('resize', this.handleWindowResize);\n window.addEventListener('scroll', this.handleWindowScroll, true);\n }\n }\n\n private removeOpenListeners(): void {\n document.removeEventListener('focusin', this.handleDocumentFocusIn);\n document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n window.removeEventListener('resize', this.handleWindowResize);\n window.removeEventListener('scroll', this.handleWindowScroll, true);\n }\n\n private handleDocumentFocusIn(event: FocusEvent) {\n if (!this.isDropdownOpen) return;\n const path = event.composedPath();\n const hitSelf = path.includes(this);\n const hitDropdown = this.dropdownElement && path.includes(this.dropdownElement);\n const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);\n\n if (!hitSelf && !hitDropdown && !hitPortalAppend) {\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n }\n\n private handleDocumentMouseDown(event: MouseEvent) {\n if (!this.isDropdownOpen) return;\n \n const path = event.composedPath();\n const hitSelf = path.includes(this);\n const hitDropdown = this.dropdownElement && path.includes(this.dropdownElement);\n const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);\n \n if (!hitSelf && !hitDropdown && !hitPortalAppend) {\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n }\n\n private handleWindowResize = (): void => {\n this.portalManager.updatePortalAppendPosition();\n };\n\n private handleWindowScroll = (): void => {\n this.portalManager.updatePortalAppendPosition();\n };\n\n public render(): TemplateResult {\n const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick exportparts=\"input, base\">\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n ?no-outline=${this.noOutline}\n ?no-padding=${this.noPadding}\n .disabled=${this.disabled}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n exportparts=\"input, base\"\n >\n ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"var(--nile-icon-button-loading-blue-animated, var(--ng-icon-button-loading-blue-animated))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" library=\"system\"></nile-icon>`:nothing}\n </nile-input>\n ${this.menuItems.length > 0 && !this.loading\n ? content\n : nothing}\n </nile-dropdown>\n `;\n } \n \n getVirtualizedContent():TemplateResult{\n return html`\n <nile-menu class=\"virtualized__menu\" @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\" style=${this.portal ? 'display: none;' : ''}>\n ${virtualize({\n items: this.menuItems,\n renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),\n\t\t\t\t\tscroller:true\n })}\n </nile-menu>\n `\n }\n\n getContent():TemplateResult{\n return html`\n <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\" style=${this.portal ? 'display: none;' : ''}>\n ${this.menuItems.map((item: any) => this.getItemRenderFunction(item))}\n </nile-menu>`\n }\n\n getItemRenderFunction(item: any): TemplateResult {\n const value = this.renderItemFunction(item);\n const hasTooltip = !!item.tooltip;\n const shouldShowTooltip =\n hasTooltip && (!item.tooltip.for || item.tooltip.for === 'menu');\n const tooltipContent = hasTooltip ? item.tooltip.content : value;\n\n return shouldShowTooltip\n ? html`\n <nile-menu-item value=${value}>\n <nile-lite-tooltip allowHTML .content=${tooltipContent}>\n <span class=\"menu-item-text\">${unsafeHTML(value)}</span>\n </nile-lite-tooltip>\n </nile-menu-item>\n `\n : html`\n <nile-menu-item value=${value}>${unsafeHTML(value)}</nile-menu-item>\n `;\n}\n\n \n\n handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private setVirtualMenuWidth() {\n const maxLengthOption = this.menuItems\n .reduce((acc: number, curr: any) => {\n const currLength = this.renderItemFunction(curr).length\n return acc > currLength ? acc : currLength\n }, 0)\n const defaultWith = 110;\n const pixelMultiplier = 9.5;\n const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;\n this.style.setProperty(\"--virtual-scroll-container-width\", menuWidth + \"px\");\n }\n\n private handleSearch(event: CustomEvent) {\n this.value = event.detail.value.toLowerCase();\n\n // Filter menu items based on the search value\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) {\n this.dropdownElement?.show();\n if (this.portal) {\n this.portalManager.updatePortalOptions();\n }\n }\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n if(this.portal) {\n this.inputElement?.focus();\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n if(typeof(list)!=='object') return []\n const res:T[]=[]\n list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n return res\n }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}\n"]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { type Placement, type MiddlewareData } from '@floating-ui/dom';
|
|
2
|
+
export declare class AutoCompletePortalManager {
|
|
3
|
+
private portalContainer;
|
|
4
|
+
private originalMenuParent;
|
|
5
|
+
private measuredMenuHeight;
|
|
6
|
+
private component;
|
|
7
|
+
private clonedMenu;
|
|
8
|
+
private cleanupAutoUpdate;
|
|
9
|
+
private currentPlacement;
|
|
10
|
+
private currentMiddlewareData;
|
|
11
|
+
constructor(component: any);
|
|
12
|
+
private createPortalAppendContainer;
|
|
13
|
+
positionPortalAppend(): void;
|
|
14
|
+
private measureMenuHeight;
|
|
15
|
+
private computeFloatingUIPosition;
|
|
16
|
+
private calculateFloatingUIPosition;
|
|
17
|
+
private createFloatingUIMiddleware;
|
|
18
|
+
private handleSizeMiddleware;
|
|
19
|
+
private createCustomPlatform;
|
|
20
|
+
private applyFloatingUIPosition;
|
|
21
|
+
private fallbackPositioning;
|
|
22
|
+
private calculateAndSetAutoSizeProperties;
|
|
23
|
+
updatePortalAppendPosition(): void;
|
|
24
|
+
handleWindowResize(): void;
|
|
25
|
+
private setupAutoUpdatePositioning;
|
|
26
|
+
private cleanupAutoUpdatePositioning;
|
|
27
|
+
private injectStylesToDocument;
|
|
28
|
+
private adoptStylesToPortalAppend;
|
|
29
|
+
setupPortalAppend(): void;
|
|
30
|
+
private createPortalMenu;
|
|
31
|
+
private setupPortalEventListeners;
|
|
32
|
+
cleanupPortalAppend(): void;
|
|
33
|
+
get portalContainerElement(): HTMLElement | null;
|
|
34
|
+
resetMeasuredHeight(): void;
|
|
35
|
+
updatePortalOptions(): void;
|
|
36
|
+
forceReposition(): void;
|
|
37
|
+
getCurrentPlacement(): Placement;
|
|
38
|
+
getCurrentMiddlewareData(): MiddlewareData | null;
|
|
39
|
+
isUsingFloatingUI(): boolean;
|
|
40
|
+
isPositioningOptimal(): boolean;
|
|
41
|
+
}
|