c.6fe7dd6c.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. import{a6 as t,a7 as i,a8 as a}from"./main-bfa41146.js";t({_template:i`
  2. <style>
  3. :host {
  4. display: block;
  5. position: absolute;
  6. outline: none;
  7. z-index: 1002;
  8. -moz-user-select: none;
  9. -ms-user-select: none;
  10. -webkit-user-select: none;
  11. user-select: none;
  12. cursor: default;
  13. }
  14. #tooltip {
  15. display: block;
  16. outline: none;
  17. @apply --paper-font-common-base;
  18. font-size: 10px;
  19. line-height: 1;
  20. background-color: var(--paper-tooltip-background, #616161);
  21. color: var(--paper-tooltip-text-color, white);
  22. padding: 8px;
  23. border-radius: 2px;
  24. @apply --paper-tooltip;
  25. }
  26. @keyframes keyFrameScaleUp {
  27. 0% {
  28. transform: scale(0.0);
  29. }
  30. 100% {
  31. transform: scale(1.0);
  32. }
  33. }
  34. @keyframes keyFrameScaleDown {
  35. 0% {
  36. transform: scale(1.0);
  37. }
  38. 100% {
  39. transform: scale(0.0);
  40. }
  41. }
  42. @keyframes keyFrameFadeInOpacity {
  43. 0% {
  44. opacity: 0;
  45. }
  46. 100% {
  47. opacity: var(--paper-tooltip-opacity, 0.9);
  48. }
  49. }
  50. @keyframes keyFrameFadeOutOpacity {
  51. 0% {
  52. opacity: var(--paper-tooltip-opacity, 0.9);
  53. }
  54. 100% {
  55. opacity: 0;
  56. }
  57. }
  58. @keyframes keyFrameSlideDownIn {
  59. 0% {
  60. transform: translateY(-2000px);
  61. opacity: 0;
  62. }
  63. 10% {
  64. opacity: 0.2;
  65. }
  66. 100% {
  67. transform: translateY(0);
  68. opacity: var(--paper-tooltip-opacity, 0.9);
  69. }
  70. }
  71. @keyframes keyFrameSlideDownOut {
  72. 0% {
  73. transform: translateY(0);
  74. opacity: var(--paper-tooltip-opacity, 0.9);
  75. }
  76. 10% {
  77. opacity: 0.2;
  78. }
  79. 100% {
  80. transform: translateY(-2000px);
  81. opacity: 0;
  82. }
  83. }
  84. .fade-in-animation {
  85. opacity: 0;
  86. animation-delay: var(--paper-tooltip-delay-in, 500ms);
  87. animation-name: keyFrameFadeInOpacity;
  88. animation-iteration-count: 1;
  89. animation-timing-function: ease-in;
  90. animation-duration: var(--paper-tooltip-duration-in, 500ms);
  91. animation-fill-mode: forwards;
  92. @apply --paper-tooltip-animation;
  93. }
  94. .fade-out-animation {
  95. opacity: var(--paper-tooltip-opacity, 0.9);
  96. animation-delay: var(--paper-tooltip-delay-out, 0ms);
  97. animation-name: keyFrameFadeOutOpacity;
  98. animation-iteration-count: 1;
  99. animation-timing-function: ease-in;
  100. animation-duration: var(--paper-tooltip-duration-out, 500ms);
  101. animation-fill-mode: forwards;
  102. @apply --paper-tooltip-animation;
  103. }
  104. .scale-up-animation {
  105. transform: scale(0);
  106. opacity: var(--paper-tooltip-opacity, 0.9);
  107. animation-delay: var(--paper-tooltip-delay-in, 500ms);
  108. animation-name: keyFrameScaleUp;
  109. animation-iteration-count: 1;
  110. animation-timing-function: ease-in;
  111. animation-duration: var(--paper-tooltip-duration-in, 500ms);
  112. animation-fill-mode: forwards;
  113. @apply --paper-tooltip-animation;
  114. }
  115. .scale-down-animation {
  116. transform: scale(1);
  117. opacity: var(--paper-tooltip-opacity, 0.9);
  118. animation-delay: var(--paper-tooltip-delay-out, 500ms);
  119. animation-name: keyFrameScaleDown;
  120. animation-iteration-count: 1;
  121. animation-timing-function: ease-in;
  122. animation-duration: var(--paper-tooltip-duration-out, 500ms);
  123. animation-fill-mode: forwards;
  124. @apply --paper-tooltip-animation;
  125. }
  126. .slide-down-animation {
  127. transform: translateY(-2000px);
  128. opacity: 0;
  129. animation-delay: var(--paper-tooltip-delay-out, 500ms);
  130. animation-name: keyFrameSlideDownIn;
  131. animation-iteration-count: 1;
  132. animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
  133. animation-duration: var(--paper-tooltip-duration-out, 500ms);
  134. animation-fill-mode: forwards;
  135. @apply --paper-tooltip-animation;
  136. }
  137. .slide-down-animation-out {
  138. transform: translateY(0);
  139. opacity: var(--paper-tooltip-opacity, 0.9);
  140. animation-delay: var(--paper-tooltip-delay-out, 500ms);
  141. animation-name: keyFrameSlideDownOut;
  142. animation-iteration-count: 1;
  143. animation-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
  144. animation-duration: var(--paper-tooltip-duration-out, 500ms);
  145. animation-fill-mode: forwards;
  146. @apply --paper-tooltip-animation;
  147. }
  148. .cancel-animation {
  149. animation-delay: -30s !important;
  150. }
  151. /* Thanks IE 10. */
  152. .hidden {
  153. display: none !important;
  154. }
  155. </style>
  156. <div id="tooltip" class="hidden">
  157. <slot></slot>
  158. </div>
  159. `,is:"paper-tooltip",hostAttributes:{role:"tooltip",tabindex:-1},properties:{for:{type:String,observer:"_findTarget"},manualMode:{type:Boolean,value:!1,observer:"_manualModeChanged"},position:{type:String,value:"bottom"},fitToVisibleBounds:{type:Boolean,value:!1},offset:{type:Number,value:14},marginTop:{type:Number,value:14},animationDelay:{type:Number,value:500,observer:"_delayChange"},animationEntry:{type:String,value:""},animationExit:{type:String,value:""},animationConfig:{type:Object,value:function(){return{entry:[{name:"fade-in-animation",node:this,timing:{delay:0}}],exit:[{name:"fade-out-animation",node:this}]}}},_showing:{type:Boolean,value:!1}},listeners:{webkitAnimationEnd:"_onAnimationEnd"},get target(){var t=a(this).parentNode,i=a(this).getOwnerRoot();return this.for?a(i).querySelector("#"+this.for):t.nodeType==Node.DOCUMENT_FRAGMENT_NODE?i.host:t},attached:function(){this._findTarget()},detached:function(){this.manualMode||this._removeListeners()},playAnimation:function(t){"entry"===t?this.show():"exit"===t&&this.hide()},cancelAnimation:function(){this.$.tooltip.classList.add("cancel-animation")},show:function(){if(!this._showing){if(""===a(this).textContent.trim()){for(var t=!0,i=a(this).getEffectiveChildNodes(),n=0;n<i.length;n++)if(""!==i[n].textContent.trim()){t=!1;break}if(t)return}this._showing=!0,this.$.tooltip.classList.remove("hidden"),this.$.tooltip.classList.remove("cancel-animation"),this.$.tooltip.classList.remove(this._getAnimationType("exit")),this.updatePosition(),this._animationPlaying=!0,this.$.tooltip.classList.add(this._getAnimationType("entry"))}},hide:function(){if(this._showing){if(this._animationPlaying)return this._showing=!1,void this._cancelAnimation();this._onAnimationFinish(),this._showing=!1,this._animationPlaying=!0}},updatePosition:function(){if(this._target&&this.offsetParent){var t=this.offset;14!=this.marginTop&&14==this.offset&&(t=this.marginTop);var i,a,n=this.offsetParent.getBoundingClientRect(),e=this._target.getBoundingClientRect(),o=this.getBoundingClientRect(),s=(e.width-o.width)/2,r=(e.height-o.height)/2,l=e.left-n.left,p=e.top-n.top;switch(this.position){case"top":i=l+s,a=p-o.height-t;break;case"bottom":i=l+s,a=p+e.height+t;break;case"left":i=l-o.width-t,a=p+r;break;case"right":i=l+e.width+t,a=p+r}this.fitToVisibleBounds?(n.left+i+o.width>window.innerWidth?(this.style.right="0px",this.style.left="auto"):(this.style.left=Math.max(0,i)+"px",this.style.right="auto"),n.top+a+o.height>window.innerHeight?(this.style.bottom=n.height-p+t+"px",this.style.top="auto"):(this.style.top=Math.max(-n.top,a)+"px",this.style.bottom="auto")):(this.style.left=i+"px",this.style.top=a+"px")}},_addListeners:function(){this._target&&(this.listen(this._target,"mouseenter","show"),this.listen(this._target,"focus","show"),this.listen(this._target,"mouseleave","hide"),this.listen(this._target,"blur","hide"),this.listen(this._target,"tap","hide")),this.listen(this.$.tooltip,"animationend","_onAnimationEnd"),this.listen(this,"mouseenter","hide")},_findTarget:function(){this.manualMode||this._removeListeners(),this._target=this.target,this.manualMode||this._addListeners()},_delayChange:function(t){500!==t&&this.updateStyles({"--paper-tooltip-delay-in":t+"ms"})},_manualModeChanged:function(){this.manualMode?this._removeListeners():this._addListeners()},_cancelAnimation:function(){this.$.tooltip.classList.remove(this._getAnimationType("entry")),this.$.tooltip.classList.remove(this._getAnimationType("exit")),this.$.tooltip.classList.remove("cancel-animation"),this.$.tooltip.classList.add("hidden")},_onAnimationFinish:function(){this._showing&&(this.$.tooltip.classList.remove(this._getAnimationType("entry")),this.$.tooltip.classList.remove("cancel-animation"),this.$.tooltip.classList.add(this._getAnimationType("exit")))},_onAnimationEnd:function(){this._animationPlaying=!1,this._showing||(this.$.tooltip.classList.remove(this._getAnimationType("exit")),this.$.tooltip.classList.add("hidden"))},_getAnimationType:function(t){if("entry"===t&&""!==this.animationEntry)return this.animationEntry;if("exit"===t&&""!==this.animationExit)return this.animationExit;if(this.animationConfig[t]&&"string"==typeof this.animationConfig[t][0].name){if(this.animationConfig[t][0].timing&&this.animationConfig[t][0].timing.delay&&0!==this.animationConfig[t][0].timing.delay){var i=this.animationConfig[t][0].timing.delay;"entry"===t?this.updateStyles({"--paper-tooltip-delay-in":i+"ms"}):"exit"===t&&this.updateStyles({"--paper-tooltip-delay-out":i+"ms"})}return this.animationConfig[t][0].name}},_removeListeners:function(){this._target&&(this.unlisten(this._target,"mouseenter","show"),this.unlisten(this._target,"focus","show"),this.unlisten(this._target,"mouseleave","hide"),this.unlisten(this._target,"blur","hide"),this.unlisten(this._target,"tap","hide")),this.unlisten(this.$.tooltip,"animationend","_onAnimationEnd"),this.unlisten(this,"mouseenter","hide")}});