@m3e/tooltip 1.2.1 → 1.3.0

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/dist/index.min.js CHANGED
@@ -47,11 +47,11 @@ const G=globalThis,K=G.trustedTypes,J=K?K.createPolicy("lit-html",{createHTML:t=
47
47
  * Copyright 2018 Google LLC
48
48
  * SPDX-License-Identifier: BSD-3-Clause
49
49
  */
50
- const kt=t=>t??ut;var Ct,Tt,Mt,Ut,Ot,Ht,Nt,Rt,Wt,Dt;class zt extends(e(h)){constructor(){super(...arguments),Ct.add(this),Mt.set(this,null),Ut.set(this,void 0),Ot.set(this,!1),Ht.set(this,()=>v(this,Ct,"m",Wt).call(this)),Nt.set(this,new i(this,{target:null,endDelay:200,callback:(t,e)=>{if(!this._isInteractive)if(t){if(e===this._base)return void $(this,Ot,!0,"f");this.show()}else v(this,Ot,"f")&&e!==this._base||($(this,Ot,!1,"f"),this.hide())}})),Rt.set(this,new s(this,{target:null,callback:t=>{this._isInteractive||(t?this.show():this.hide())}})),this.disabled=!1,this.touchGestures="auto"}get showDelay(){return v(this,Nt,"f").startDelay}set showDelay(t){v(this,Nt,"f").startDelay=t}get hideDelay(){return v(this,Nt,"f").endDelay}set hideDelay(t){v(this,Nt,"f").endDelay=t}get isOpen(){return Tt.__openTooltips.includes(this)}get _isInteractive(){return!1}attach(t){super.attach(t),m.iOS||m.Android?(v(this,Rt,"f").observe(t),v(this,Ct,"m",Dt).call(this)):v(this,Nt,"f").observe(t),t.addEventListener("click",v(this,Ht,"f"))}detach(){this.control&&(v(this,Nt,"f").unobserve(this.control),v(this,Rt,"f").observe(this.control),this.control.removeEventListener("click",v(this,Ht,"f")),this.hide()),super.detach()}update(t){super.update(t),t.has("disabled")&&this.disabled&&this.hide()}firstUpdated(t){super.firstUpdated(t),this._base&&v(this,Nt,"f").observe(this._base)}async show(){!this.control||this.disabled||o(this.control)&&this.control.disabled||(Tt.__openTooltips.filter(t=>t!==this).forEach(t=>t.hide()),$(this,Ut,await g(this._base,this.control,{position:this._anchorPosition,inline:!0,flip:!0,shift:!0,offset:4},(t,e)=>this._updatePosition(this._base,t,e)),"f"),this._base.showPopover(),Tt.__openTooltips.includes(this)||Tt.__openTooltips.push(this))}hide(){this._base.hidePopover(),v(this,Ut,"f")?.call(this),$(this,Ut,void 0,"f"),v(this,Nt,"f").clearDelays(),Tt.__openTooltips.includes(this)&&(Tt.__openTooltips=Tt.__openTooltips.filter(t=>t!==this))}}var jt,It,Lt,qt,Bt,Vt,Ft,Gt,Kt,Jt,Zt,Xt,Qt,Yt,te,ee;Tt=zt,Mt=new WeakMap,Ut=new WeakMap,Ot=new WeakMap,Ht=new WeakMap,Nt=new WeakMap,Rt=new WeakMap,Ct=new WeakSet,Wt=function(){this._isInteractive?Tt.__openTooltips.includes(this)?this.hide():this.show():this.hide()},Dt=function(){if("off"!==this.touchGestures&&v(this,Mt,"f")){const t=v(this,Mt,"f").style;("on"===this.touchGestures||"INPUT"!==v(this,Mt,"f").nodeName&&"TEXTAREA"!==v(this,Mt,"f").nodeName)&&(t.userSelect=t.msUserSelect=t.webkitUserSelect=t.MozUserSelect="none"),"on"!==this.touchGestures&&v(this,Mt,"f").draggable||(t.webkitUserDrag="none"),t.touchAction="none",t.webkitTapHighlightColor="transparent"}},zt.__openTooltips=new Array,b([
50
+ const kt=t=>t??ut;var Ct,Tt,Mt,Ut,Ot,Ht,Nt,Rt,Wt,Dt;class zt extends(e(h)){constructor(){super(...arguments),Ct.add(this),Mt.set(this,null),Ut.set(this,void 0),Ot.set(this,!1),Ht.set(this,()=>v(this,Ct,"m",Wt).call(this)),Nt.set(this,new i(this,{target:null,endDelay:200,callback:(t,e)=>{if(!this._isInteractive)if(t){if(e===this._base)return void $(this,Ot,!0,"f");this.show()}else v(this,Ot,"f")&&e!==this._base||($(this,Ot,!1,"f"),this.hide())}})),Rt.set(this,new s(this,{target:null,callback:t=>{this._isInteractive||(t?this.show():this.hide())}})),this.disabled=!1,this.touchGestures="auto"}get showDelay(){return v(this,Nt,"f").startDelay}set showDelay(t){v(this,Nt,"f").startDelay=t}get hideDelay(){return v(this,Nt,"f").endDelay}set hideDelay(t){v(this,Nt,"f").endDelay=t}get isOpen(){return Tt.__openTooltips.includes(this)}get _isInteractive(){return!1}attach(t){super.attach(t),m.iOS||m.Android?(v(this,Rt,"f").observe(t),v(this,Ct,"m",Dt).call(this)):v(this,Nt,"f").observe(t),t.addEventListener("click",v(this,Ht,"f"))}detach(){this.control&&(v(this,Nt,"f").unobserve(this.control),v(this,Rt,"f").observe(this.control),this.control.removeEventListener("click",v(this,Ht,"f")),this.hide()),super.detach()}update(t){super.update(t),t.has("disabled")&&this.disabled&&this.hide()}firstUpdated(t){super.firstUpdated(t),this._base&&v(this,Nt,"f").observe(this._base)}async show(){!this.control||this.disabled||o(this.control)&&this.control.disabled||(Tt.__openTooltips.filter(t=>t!==this).forEach(t=>t.hide()),this._base.showPopover(),$(this,Ut,await g(this._base,this.control,{position:this._anchorPosition,inline:!0,flip:!0,shift:!0,offset:4},(t,e)=>this._updatePosition(this._base,t,e)),"f"),Tt.__openTooltips.includes(this)||Tt.__openTooltips.push(this))}hide(){this._base.hidePopover(),v(this,Ut,"f")?.call(this),$(this,Ut,void 0,"f"),v(this,Nt,"f").clearDelays(),Tt.__openTooltips.includes(this)&&(Tt.__openTooltips=Tt.__openTooltips.filter(t=>t!==this))}}var jt,It,Lt,qt,Bt,Vt,Ft,Gt,Kt,Jt,Zt,Xt,Qt,Yt,te,ee;Tt=zt,Mt=new WeakMap,Ut=new WeakMap,Ot=new WeakMap,Ht=new WeakMap,Nt=new WeakMap,Rt=new WeakMap,Ct=new WeakSet,Wt=function(){this._isInteractive?Tt.__openTooltips.includes(this)?this.hide():this.show():this.hide()},Dt=function(){if("off"!==this.touchGestures&&v(this,Mt,"f")){const t=v(this,Mt,"f").style;("on"===this.touchGestures||"INPUT"!==v(this,Mt,"f").nodeName&&"TEXTAREA"!==v(this,Mt,"f").nodeName)&&(t.userSelect=t.msUserSelect=t.webkitUserSelect=t.MozUserSelect="none"),"on"!==this.touchGestures&&v(this,Mt,"f").draggable||(t.webkitUserDrag="none"),t.touchAction="none",t.webkitTapHighlightColor="transparent"}},zt.__openTooltips=new Array,b([
51
51
  /**
52
52
  * @license
53
53
  * Copyright 2017 Google LLC
54
54
  * SPDX-License-Identifier: BSD-3-Clause
55
55
  */
56
- function(t){return(e,i,s)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i))(e,i,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}(".base")],zt.prototype,"_base",void 0),b([B({type:Boolean,reflect:!0})],zt.prototype,"disabled",void 0),b([B({attribute:"show-delay",type:Number})],zt.prototype,"showDelay",null),b([B({attribute:"hide-delay",type:Number})],zt.prototype,"hideDelay",null),b([B({attribute:"touch-gestures"})],zt.prototype,"touchGestures",void 0);let ie=ee=class extends zt{constructor(){super(...arguments),jt.add(this),It.set(this,ee.__nextId++),Lt.set(this,""),qt.set(this,""),Bt.set(this,""),Vt.set(this,!1),this._hasSubhead=!1,this._interactive=!1,Ft.set(this,t=>v(this,jt,"m",Jt).call(this,t)),this.position="below-after"}get _isInteractive(){return this._interactive}get _anchorPosition(){switch(this.position){case"above":return"top";case"above-after":return"rtl"===f.current?"top-start":"top-end";case"above-before":return"rtl"===f.current?"top-end":"top-start";case"after":return"rtl"===f.current?"left":"right";case"before":return"rtl"===f.current?"right":"left";case"below":return"bottom";case"below-after":return"rtl"===f.current?"bottom-start":"bottom-end";case"below-before":return"rtl"===f.current?"bottom-end":"bottom-start"}}render(){const t=this._interactive&&this._hasSubhead?`m3e-rich-tooltip-${v(this,It,"f")}-subhead`:void 0;return d`<div class="base" popover="manual" role="${kt(this._interactive?"dialog":void 0)}" aria-labelledby="${kt(t)}" @keydown="${v(this,jt,"m",Zt)}" @beforetoggle="${v(this,jt,"m",Gt)}" @toggle="${v(this,jt,"m",Kt)}"><m3e-elevation level="3"></m3e-elevation><div class="subhead" id="${kt(t)}"><slot name="subhead" @slotchange="${v(this,jt,"m",Xt)}"></slot></div><div class="content"><slot @slotchange="${v(this,jt,"m",Qt)}"></slot></div><div class="actions"><slot name="actions" @slotchange="${v(this,jt,"m",Yt)}"></slot></div></div>`}show(){return this._interactive&&document.addEventListener("click",v(this,Ft,"f")),super.show()}hide(t=!0){this._interactive&&document.removeEventListener("click",v(this,Ft,"f")),super.hide(),t&&this._interactive&&this.control&&p.isFocusable(this.control)&&this.control.focus()}attach(t){super.attach(t),v(this,jt,"m",te).call(this),this._interactive&&(t.ariaHasPopup="dialog")}update(t){super.update(t),t.has("_interactive")&&(this.ariaHidden=this._interactive?null:"true",v(this,jt,"m",te).call(this),this.control&&this._interactive&&(this.control.ariaHasPopup="dialog"))}_updatePosition(t,e,i){this.position.includes("before")&&"before"!==this.position&&("rtl"===f.current?e+=this.control?.clientWidth??0:e-=this.control?.clientWidth??0),this.position.includes("after")&&"after"!==this.position&&("rtl"===f.current?e-=this.control?.clientWidth??0:e+=this.control?.clientWidth??0),"rtl"===f.current?(t.style.right=window.innerWidth-e-t.clientWidth+"px",t.style.left=""):(t.style.left=`${e}px`,t.style.right=""),t.style.top=`${i}px`}};var se,oe,re,ne;It=new WeakMap,Lt=new WeakMap,qt=new WeakMap,Bt=new WeakMap,Vt=new WeakMap,Ft=new WeakMap,jt=new WeakSet,Gt=function(t){const e=new ToggleEvent("beforetoggle",{oldState:t.oldState,newState:t.newState,bubbles:!0,composed:!0,cancelable:t.cancelable});this.dispatchEvent(e)||(t.preventDefault(),this.hide())},Kt=function(t){const e=new ToggleEvent("toggle",{oldState:t.oldState,newState:t.newState,bubbles:!0,composed:!0});this.dispatchEvent(e)},Jt=function(t){t.composedPath().some(t=>t instanceof ee||t===this.control)||this.hide()},Zt=function(t){"Escape"!==t.key||t.shiftKey||t.ctrlKey||(t.preventDefault(),this.hide())},Xt=function(t){this._hasSubhead=n(t.target),this.shadowRoot?.querySelector(".base")?.classList.toggle("has-subhead",this._hasSubhead),$(this,Lt,this._hasSubhead?a(t.target,!0):"","f"),v(this,jt,"m",te).call(this)},Qt=function(t){this._interactive=p.findInteractiveElements(this).length>0,$(this,qt,a(t.target,!0),"f"),v(this,jt,"m",te).call(this)},Yt=function(t){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-actions",n(t.target)),this._interactive=p.findInteractiveElements(this).length>0,v(this,jt,"m",te).call(this)},te=function(){const t=v(this,Lt,"f")?`${v(this,Lt,"f")}/n${v(this,qt,"f")}`:v(this,qt,"f");this.isConnected&&this.control&&(v(this,Bt,"f")&&v(this,Vt,"f")&&(u.removeDescription(this.control,v(this,Bt,"f")),$(this,Vt,!1,"f")),$(this,Bt,t,"f"),v(this,Bt,"f")&&!this._interactive&&(u.describe(this.control,v(this,Bt,"f")),$(this,Vt,!0,"f")))},ie.styles=c`:host { display: contents; } .base { display: flex; flex-direction: column; position: absolute; padding: unset; margin: unset; border: unset; padding-block-start: var(--m3e-rich-tooltip-padding-top, 0.75rem); padding-inline: var(--m3e-rich-tooltip-padding-inline, 1rem); max-width: var(--m3e-rich-tooltip-max-width, 20rem); box-sizing: border-box; overflow: visible; border-radius: var(--m3e-rich-tooltip-shape, ${r.shape.corner.medium}); background-color: var(--m3e-rich-tooltip-container-color, ${r.color.surfaceContainer}); visibility: hidden; opacity: 0; transform: scale(0.8); transition: ${l(`opacity ${r.motion.duration.short3} ${r.motion.easing.standard}, \n transform ${r.motion.duration.short3} ${r.motion.easing.standard},\n overlay ${r.motion.duration.short3} ${r.motion.easing.standard} allow-discrete,\n visibility ${r.motion.duration.short3} ${r.motion.easing.standard} allow-discrete`)}; } .base:not(.has-actions) { padding-block-end: var(--m3e-rich-tooltip-padding-bottom, 0.75rem); } .base::backdrop { background-color: transparent; } .base:not(:popover-open) { visibility: hidden; opacity: 0; transform: scale(0.8); } .base:popover-open { visibility: visible; opacity: 1; transform: scale(1); } .base:not(.has-subhead) .subhead, .base:not(.has-actions) .actions { display: none; } .subhead { color: var(--m3e-rich-tooltip-subhead-color, ${r.color.onSurfaceVariant}); font-size: var(--m3e-rich-tooltip-subhead-font-size, ${r.typescale.standard.title.small.fontSize}); font-weight: var( --m3e-rich-tooltip-subhead-font-weight, ${r.typescale.standard.title.small.fontWeight} ); line-height: var( --m3e-rich-tooltip-subhead-line-height, ${r.typescale.standard.title.small.lineHeight} ); letter-spacing: var(--m3e-rich-tooltip-subhead-tracking, ${r.typescale.standard.title.small.tracking}); padding-block-end: var(--m3e-rich-tooltip-subhead-bottom-space, 0.25rem); } .content { color: var(--m3e-rich-tooltip-supporting-text-color, ${r.color.onSurfaceVariant}); font-size: var( --m3e-rich-tooltip-supporting-text-font-size, ${r.typescale.standard.body.medium.fontSize} ); font-weight: var( --m3e-rich-tooltip-supporting-text-font-weight, ${r.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-rich-tooltip-supporting-text-line-height, ${r.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-rich-tooltip-supporting-text-tracking, ${r.typescale.standard.body.medium.tracking} ); } .actions { margin-inline: calc( 0px - calc( var(--m3e-rich-tooltip-padding-inline, 1rem) - var(--m3e-rich-tooltip-actions-padding-inline, 0.25rem) ) ); padding-block-start: var(--m3e-rich-tooltip-actions-top-space, 0.75rem); padding-block-end: var(--m3e-rich-tooltip-actions-bottom-space, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: 1.5rem; column-gap: 0.5rem; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`,ie.__nextId=0,b([V()],ie.prototype,"_hasSubhead",void 0),b([V()],ie.prototype,"_interactive",void 0),b([B()],ie.prototype,"position",void 0),ie=ee=b([_("m3e-rich-tooltip")],ie);let ae=class extends zt{constructor(){super(...arguments),se.add(this),oe.set(this,void 0),this.position="below"}get _anchorPosition(){return"above"===this.position?"top":"below"===this.position?"bottom":"before"===this.position?"ltr"===f.current?"left":"right":"ltr"===f.current?"right":"left"}attach(t){super.attach(t),v(this,oe,"f")&&u.describe(t,v(this,oe,"f"))}detach(){this.control&&v(this,oe,"f")&&u.removeDescription(this.control,v(this,oe,"f")),super.detach()}connectedCallback(){super.connectedCallback(),this.ariaHidden="true"}render(){return d`<div class="base" popover="manual" @toggle="${v(this,se,"m",ne)}"><slot @slotchange="${v(this,se,"m",re)}"></slot></div>`}_updatePosition(t,e,i){"rtl"===f.current?(t.style.right=window.innerWidth-e-t.clientWidth+"px",t.style.left=""):(t.style.left=`${e}px`,t.style.right=""),t.style.top=`${i}px`}};oe=new WeakMap,se=new WeakSet,re=function(t){const e=a(t.target,!0);this.isConnected&&this.control?(v(this,oe,"f")&&u.removeDescription(this.control,v(this,oe,"f")),$(this,oe,e,"f"),v(this,oe,"f")&&u.describe(this.control,v(this,oe,"f"))):$(this,oe,e,"f")},ne=function(t){if("open"===t.newState){const t=this._base.getBoundingClientRect().height>parseFloat(getComputedStyle(this._base).minHeight);this.classList.toggle("-multiline",t)}},ae.styles=c`:host { display: contents; } .base { position: absolute; pointer-events: none; margin: unset; border: unset; word-break: normal; overflow-wrap: anywhere; padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem); min-width: var(--m3e-tooltip-min-width, 2.5rem); max-width: var(--m3e-tooltip-max-width, 12.5rem); min-height: var(--m3e-tooltip-min-height, 1.5rem); max-height: var(--m3e-tooltip-max-height, 40vh); box-sizing: border-box; overflow: hidden; text-align: center; border-radius: var(--m3e-tooltip-shape, ${r.shape.corner.extraSmall}); background-color: var(--m3e-tooltip-container-color, ${r.color.inverseSurface}); color: var(--m3e-tooltip-supporting-text-color, ${r.color.inverseOnSurface}); font-size: var(--m3e-tooltip-supporting-text-font-size, ${r.typescale.standard.body.small.fontSize}); font-weight: var( --m3e-tooltip-supporting-text-font-weight, ${r.typescale.standard.body.small.fontWeight} ); line-height: var( --m3e-tooltip-supporting-text-line-height, ${r.typescale.standard.body.small.lineHeight} ); letter-spacing: var( --m3e-tooltip-supporting-text-tracking, ${r.typescale.standard.body.small.tracking} ); visibility: hidden; opacity: 0; transform: scale(0.8); transition: ${l(`opacity ${r.motion.duration.short3} ${r.motion.easing.standard}, \n transform ${r.motion.duration.short3} ${r.motion.easing.standard},\n overlay ${r.motion.duration.short3} ${r.motion.easing.standard} allow-discrete,\n visibility ${r.motion.duration.short3} ${r.motion.easing.standard} allow-discrete`)}; } :host(.-multiline) .base { text-align: start; } .base::backdrop { background-color: transparent; } .base:not(:popover-open) { visibility: hidden; opacity: 0; transform: scale(0.8); } .base:popover-open { visibility: visible; opacity: 1; transform: scale(1); } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`,b([B()],ae.prototype,"position",void 0),ae=b([_("m3e-tooltip")],ae);export{F as M3eRichTooltipActionElement,ie as M3eRichTooltipElement,ae as M3eTooltipElement,zt as TooltipElementBase};
56
+ function(t){return(e,i,s)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i))(e,i,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}(".base")],zt.prototype,"_base",void 0),b([B({type:Boolean,reflect:!0})],zt.prototype,"disabled",void 0),b([B({attribute:"show-delay",type:Number})],zt.prototype,"showDelay",null),b([B({attribute:"hide-delay",type:Number})],zt.prototype,"hideDelay",null),b([B({attribute:"touch-gestures"})],zt.prototype,"touchGestures",void 0);let ie=ee=class extends zt{constructor(){super(...arguments),jt.add(this),It.set(this,ee.__nextId++),Lt.set(this,""),qt.set(this,""),Bt.set(this,""),Vt.set(this,!1),this._hasSubhead=!1,this._interactive=!1,Ft.set(this,t=>v(this,jt,"m",Jt).call(this,t)),this.position="below-after"}get _isInteractive(){return this._interactive}get _anchorPosition(){switch(this.position){case"above":return"top";case"above-after":return"rtl"===f.current?"top-start":"top-end";case"above-before":return"rtl"===f.current?"top-end":"top-start";case"after":return"rtl"===f.current?"left":"right";case"before":return"rtl"===f.current?"right":"left";case"below":return"bottom";case"below-after":return"rtl"===f.current?"bottom-start":"bottom-end";case"below-before":return"rtl"===f.current?"bottom-end":"bottom-start"}}render(){const t=this._interactive&&this._hasSubhead?`m3e-rich-tooltip-${v(this,It,"f")}-subhead`:void 0;return d`<div class="base" popover="manual" role="${kt(this._interactive?"dialog":void 0)}" aria-labelledby="${kt(t)}" @keydown="${v(this,jt,"m",Zt)}" @beforetoggle="${v(this,jt,"m",Gt)}" @toggle="${v(this,jt,"m",Kt)}"><m3e-elevation level="3"></m3e-elevation><div class="subhead" id="${kt(t)}"><slot name="subhead" @slotchange="${v(this,jt,"m",Xt)}"></slot></div><div class="content"><slot @slotchange="${v(this,jt,"m",Qt)}"></slot></div><div class="actions"><slot name="actions" @slotchange="${v(this,jt,"m",Yt)}"></slot></div></div>`}show(){return this._interactive&&document.addEventListener("click",v(this,Ft,"f")),super.show()}hide(t=!0){this._interactive&&document.removeEventListener("click",v(this,Ft,"f")),super.hide(),t&&this._interactive&&this.control&&p.isFocusable(this.control)&&this.control.focus()}attach(t){super.attach(t),v(this,jt,"m",te).call(this),this._interactive&&(t.ariaHasPopup="dialog")}update(t){super.update(t),t.has("_interactive")&&(this.ariaHidden=this._interactive?null:"true",v(this,jt,"m",te).call(this),this.control&&this._interactive&&(this.control.ariaHasPopup="dialog"))}_updatePosition(t,e,i){this.position.includes("before")&&"before"!==this.position&&("rtl"===f.current?e+=this.control?.clientWidth??0:e-=this.control?.clientWidth??0),this.position.includes("after")&&"after"!==this.position&&("rtl"===f.current?e-=this.control?.clientWidth??0:e+=this.control?.clientWidth??0),"rtl"===f.current?(t.style.right=window.innerWidth-e-t.clientWidth+"px",t.style.left=""):(t.style.left=`${e}px`,t.style.right=""),t.style.top=`${i}px`}};var se,oe,re,ne;It=new WeakMap,Lt=new WeakMap,qt=new WeakMap,Bt=new WeakMap,Vt=new WeakMap,Ft=new WeakMap,jt=new WeakSet,Gt=function(t){const e=new ToggleEvent("beforetoggle",{oldState:t.oldState,newState:t.newState,bubbles:!0,composed:!0,cancelable:t.cancelable});this.dispatchEvent(e)||(t.preventDefault(),this.hide())},Kt=function(t){const e=new ToggleEvent("toggle",{oldState:t.oldState,newState:t.newState,bubbles:!0,composed:!0});this.dispatchEvent(e)},Jt=function(t){t.composedPath().some(t=>t instanceof ee||t===this.control)||this.hide()},Zt=function(t){"Escape"!==t.key||t.shiftKey||t.ctrlKey||(t.preventDefault(),this.hide())},Xt=function(t){this._hasSubhead=n(t.target),this.shadowRoot?.querySelector(".base")?.classList.toggle("has-subhead",this._hasSubhead),$(this,Lt,this._hasSubhead?a(t.target,!0):"","f"),v(this,jt,"m",te).call(this)},Qt=function(t){this._interactive=p.findInteractiveElements(this).length>0,$(this,qt,a(t.target,!0),"f"),v(this,jt,"m",te).call(this)},Yt=function(t){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-actions",n(t.target)),this._interactive=p.findInteractiveElements(this).length>0,v(this,jt,"m",te).call(this)},te=function(){const t=v(this,Lt,"f")?`${v(this,Lt,"f")}/n${v(this,qt,"f")}`:v(this,qt,"f");this.isConnected&&this.control&&(v(this,Bt,"f")&&v(this,Vt,"f")&&(u.removeDescription(this.control,v(this,Bt,"f")),$(this,Vt,!1,"f")),$(this,Bt,t,"f"),v(this,Bt,"f")&&!this._interactive&&(u.describe(this.control,v(this,Bt,"f")),$(this,Vt,!0,"f")))},ie.styles=c`:host { display: contents; } .base { flex-direction: column; position: absolute; padding: unset; margin: unset; border: unset; padding-block-start: var(--m3e-rich-tooltip-padding-top, 0.75rem); padding-inline: var(--m3e-rich-tooltip-padding-inline, 1rem); max-width: var(--m3e-rich-tooltip-max-width, 20rem); box-sizing: border-box; overflow: visible; border-radius: var(--m3e-rich-tooltip-shape, ${r.shape.corner.medium}); background-color: var(--m3e-rich-tooltip-container-color, ${r.color.surfaceContainer}); display: none; opacity: 0; transform: scale(0.8); transition: ${l(`opacity ${r.motion.duration.short3} ${r.motion.easing.standard}, \n transform ${r.motion.duration.short3} ${r.motion.easing.standard},\n overlay ${r.motion.duration.short3} ${r.motion.easing.standard} allow-discrete,\n display ${r.motion.duration.short3} ${r.motion.easing.standard} allow-discrete`)}; } .base:not(.has-actions) { padding-block-end: var(--m3e-rich-tooltip-padding-bottom, 0.75rem); } .base::backdrop { background-color: transparent; } .base:popover-open { display: flex; opacity: 1; transform: scale(1); } .base:not(.has-subhead) .subhead, .base:not(.has-actions) .actions { display: none; } .subhead { color: var(--m3e-rich-tooltip-subhead-color, ${r.color.onSurfaceVariant}); font-size: var(--m3e-rich-tooltip-subhead-font-size, ${r.typescale.standard.title.small.fontSize}); font-weight: var( --m3e-rich-tooltip-subhead-font-weight, ${r.typescale.standard.title.small.fontWeight} ); line-height: var( --m3e-rich-tooltip-subhead-line-height, ${r.typescale.standard.title.small.lineHeight} ); letter-spacing: var(--m3e-rich-tooltip-subhead-tracking, ${r.typescale.standard.title.small.tracking}); padding-block-end: var(--m3e-rich-tooltip-subhead-bottom-space, 0.25rem); } .content { color: var(--m3e-rich-tooltip-supporting-text-color, ${r.color.onSurfaceVariant}); font-size: var( --m3e-rich-tooltip-supporting-text-font-size, ${r.typescale.standard.body.medium.fontSize} ); font-weight: var( --m3e-rich-tooltip-supporting-text-font-weight, ${r.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-rich-tooltip-supporting-text-line-height, ${r.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-rich-tooltip-supporting-text-tracking, ${r.typescale.standard.body.medium.tracking} ); } .actions { margin-inline: calc( 0px - calc( var(--m3e-rich-tooltip-padding-inline, 1rem) - var(--m3e-rich-tooltip-actions-padding-inline, 0.25rem) ) ); padding-block-start: var(--m3e-rich-tooltip-actions-top-space, 0.75rem); padding-block-end: var(--m3e-rich-tooltip-actions-bottom-space, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: 1.5rem; column-gap: 0.5rem; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`,ie.__nextId=0,b([V()],ie.prototype,"_hasSubhead",void 0),b([V()],ie.prototype,"_interactive",void 0),b([B()],ie.prototype,"position",void 0),ie=ee=b([_("m3e-rich-tooltip")],ie);let ae=class extends zt{constructor(){super(...arguments),se.add(this),oe.set(this,void 0),this.position="below"}get _anchorPosition(){return"above"===this.position?"top":"below"===this.position?"bottom":"before"===this.position?"ltr"===f.current?"left":"right":"ltr"===f.current?"right":"left"}attach(t){super.attach(t),v(this,oe,"f")&&u.describe(t,v(this,oe,"f"))}detach(){this.control&&v(this,oe,"f")&&u.removeDescription(this.control,v(this,oe,"f")),super.detach()}connectedCallback(){super.connectedCallback(),this.ariaHidden="true"}render(){return d`<div class="base" popover="manual" @toggle="${v(this,se,"m",ne)}"><slot @slotchange="${v(this,se,"m",re)}"></slot></div>`}_updatePosition(t,e,i){"rtl"===f.current?(t.style.right=window.innerWidth-e-t.clientWidth+"px",t.style.left=""):(t.style.left=`${e}px`,t.style.right=""),t.style.top=`${i}px`}};oe=new WeakMap,se=new WeakSet,re=function(t){const e=a(t.target,!0);this.isConnected&&this.control?(v(this,oe,"f")&&u.removeDescription(this.control,v(this,oe,"f")),$(this,oe,e,"f"),v(this,oe,"f")&&u.describe(this.control,v(this,oe,"f"))):$(this,oe,e,"f")},ne=function(t){if("open"===t.newState){const t=this._base.getBoundingClientRect().height>parseFloat(getComputedStyle(this._base).minHeight);this.classList.toggle("-multiline",t)}},ae.styles=c`:host { display: contents; } .base { position: absolute; pointer-events: none; margin: unset; border: unset; word-break: normal; overflow-wrap: anywhere; padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem); min-width: var(--m3e-tooltip-min-width, 2.5rem); max-width: var(--m3e-tooltip-max-width, 12.5rem); min-height: var(--m3e-tooltip-min-height, 1.5rem); max-height: var(--m3e-tooltip-max-height, 40vh); box-sizing: border-box; overflow: hidden; text-align: center; border-radius: var(--m3e-tooltip-shape, ${r.shape.corner.extraSmall}); background-color: var(--m3e-tooltip-container-color, ${r.color.inverseSurface}); color: var(--m3e-tooltip-supporting-text-color, ${r.color.inverseOnSurface}); font-size: var(--m3e-tooltip-supporting-text-font-size, ${r.typescale.standard.body.small.fontSize}); font-weight: var( --m3e-tooltip-supporting-text-font-weight, ${r.typescale.standard.body.small.fontWeight} ); line-height: var( --m3e-tooltip-supporting-text-line-height, ${r.typescale.standard.body.small.lineHeight} ); letter-spacing: var( --m3e-tooltip-supporting-text-tracking, ${r.typescale.standard.body.small.tracking} ); display: none; opacity: 0; transform: scale(0.8); transition: ${l(`opacity ${r.motion.duration.short3} ${r.motion.easing.standard}, \n transform ${r.motion.duration.short3} ${r.motion.easing.standard},\n overlay ${r.motion.duration.short3} ${r.motion.easing.standard} allow-discrete,\n display ${r.motion.duration.short3} ${r.motion.easing.standard} allow-discrete`)}; } :host(.-multiline) .base { text-align: start; } .base::backdrop { background-color: transparent; } .base:popover-open { display: block; opacity: 1; transform: scale(1); } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`,b([B()],ae.prototype,"position",void 0),ae=b([_("m3e-tooltip")],ae);export{F as M3eRichTooltipActionElement,ie as M3eRichTooltipElement,ae as M3eTooltipElement,zt as TooltipElementBase};
57
57
  //# sourceMappingURL=index.min.js.map