@m3e/web 2.3.1 → 2.4.0

package/dist/tooltip.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__decorate as t,__classPrivateFieldGet as e,__classPrivateFieldSet as i}from"tslib";import{property as o,query as s,state as a}from"lit/decorators.js";import{customElement as r,ActionElementBase as n,HtmlFor as l,ReconnectedCallback as h,AttachInternals as c,HoverController as d,LongPressController as p,isDisabledMixin as m,DesignToken as u,hasAssignedNodes as b,getTextContent as f,setCustomState as g}from"@m3e/web/core";import{LitElement as v,unsafeCSS as y,css as w,html as _}from"lit";import{ifDefined as $}from"lit/directives/if-defined.js";import{M3eInteractivityChecker as k,M3eAriaDescriber as x}from"@m3e/web/core/a11y";import{M3eDirectionality as S}from"@m3e/web/core/bidi";import{M3ePlatform as W}from"@m3e/web/core/platform";import{positionAnchor as T}from"@m3e/web/core/anchoring";let D=class extends n{constructor(){super(...arguments),this.disableRestoreFocus=!1}_onClick(){this.closest("m3e-rich-tooltip")?.hide(!this.disableRestoreFocus)}};var C,z,E,M,P,I,H,R,U,L,A;t([o({attribute:"disable-restore-focus",type:Boolean})],D.prototype,"disableRestoreFocus",void 0),D=t([r("m3e-rich-tooltip-action")],D);class F extends(l(h(c(v)))){constructor(){super(...arguments),C.add(this),E.set(this,null),M.set(this,void 0),P.set(this,!1),I.set(this,()=>e(this,C,"m",L).call(this)),H.set(this,new d(this,{target:null,endDelay:200,callback:(t,o)=>{if(!this._isInteractive)if(t){if(o===this._base)return void i(this,P,!0,"f");this.show()}else e(this,P,"f")&&o!==this._base||(i(this,P,!1,"f"),this.hide())}})),R.set(this,new p(this,{target:null,callback:t=>{this._isInteractive||(t?this.show():this.hide())}})),this.disabled=!1,this.touchGestures="auto"}get showDelay(){return e(this,H,"f").startDelay}set showDelay(t){e(this,H,"f").startDelay=t}get hideDelay(){return e(this,H,"f").endDelay}set hideDelay(t){e(this,H,"f").endDelay=t}get isOpen(){return z.__openTooltips.includes(this)}get _isInteractive(){return!1}attach(t){super.attach(t),W.iOS||W.Android?(e(this,R,"f").observe(t),e(this,C,"m",A).call(this)):e(this,H,"f").observe(t),t.addEventListener("click",e(this,I,"f"))}detach(){this.control&&(e(this,H,"f").unobserve(this.control),e(this,R,"f").unobserve(this.control),this.control.removeEventListener("click",e(this,I,"f")),this.hide()),super.detach()}update(t){super.update(t),t.has("disabled")&&this.disabled&&this.hide()}reconnectedCallback(){super.reconnectedCallback(),e(this,C,"m",U).call(this)}firstUpdated(t){super.firstUpdated(t),e(this,C,"m",U).call(this)}async show(){!this.control||this.disabled||m(this.control)&&this.control.disabled||(z.__openTooltips.filter(t=>t!==this).forEach(t=>t.hide()),this._base.showPopover(),i(this,M,await T(this._base,this.control,{position:this._anchorPosition,inline:!0,flip:!0,shift:"main",offset:4},(t,e)=>this._updatePosition(this._base,t,e)),"f"),z.__openTooltips.includes(this)||z.__openTooltips.push(this))}hide(){this._base.hidePopover(),e(this,M,"f")?.call(this),i(this,M,void 0,"f"),e(this,H,"f").clearDelays(),z.__openTooltips.includes(this)&&(z.__openTooltips=z.__openTooltips.filter(t=>t!==this))}}var G,N,j,B,O,q,K,V,X,J,Q,Y,Z,tt,et,it;z=F,E=new WeakMap,M=new WeakMap,P=new WeakMap,I=new WeakMap,H=new WeakMap,R=new WeakMap,C=new WeakSet,U=function(){this._base&&e(this,H,"f").observe(this._base)},L=function(){this._isInteractive?z.__openTooltips.includes(this)?this.hide():this.show():this.hide()},A=function(){if("off"!==this.touchGestures&&e(this,E,"f")){const t=e(this,E,"f").style;("on"===this.touchGestures||"INPUT"!==e(this,E,"f").nodeName&&"TEXTAREA"!==e(this,E,"f").nodeName)&&(t.userSelect=t.msUserSelect=t.webkitUserSelect=t.MozUserSelect="none"),"on"!==this.touchGestures&&e(this,E,"f").draggable||(t.webkitUserDrag="none"),t.touchAction="none",t.webkitTapHighlightColor="transparent"}},F.__openTooltips=new Array,t([s(".base")],F.prototype,"_base",void 0),t([o({type:Boolean,reflect:!0})],F.prototype,"disabled",void 0),t([o({attribute:"show-delay",type:Number})],F.prototype,"showDelay",null),t([o({attribute:"hide-delay",type:Number})],F.prototype,"hideDelay",null),t([o({attribute:"touch-gestures"})],F.prototype,"touchGestures",void 0);let ot=it=class extends F{constructor(){super(...arguments),G.add(this),N.set(this,it.__nextId++),j.set(this,""),B.set(this,""),O.set(this,""),q.set(this,!1),this._hasSubhead=!1,this._interactive=!1,K.set(this,t=>e(this,G,"m",J).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"===S.current?"top-start":"top-end";case"above-before":return"rtl"===S.current?"top-end":"top-start";case"after":return"rtl"===S.current?"left":"right";case"before":return"rtl"===S.current?"right":"left";case"below":return"bottom";case"below-after":return"rtl"===S.current?"bottom-start":"bottom-end";case"below-before":return"rtl"===S.current?"bottom-end":"bottom-start"}}render(){const t=this._interactive&&this._hasSubhead?`m3e-rich-tooltip-${e(this,N,"f")}-subhead`:void 0;return _`<div class="base" popover="manual" role="${$(this._interactive?"dialog":void 0)}" aria-labelledby="${$(t)}" @keydown="${e(this,G,"m",Q)}" @beforetoggle="${e(this,G,"m",V)}" @toggle="${e(this,G,"m",X)}"><m3e-elevation level="3"></m3e-elevation><div class="subhead" id="${$(t)}"><slot name="subhead" @slotchange="${e(this,G,"m",Y)}"></slot></div><div class="content"><slot @slotchange="${e(this,G,"m",Z)}"></slot></div><div class="actions"><slot name="actions" @slotchange="${e(this,G,"m",tt)}"></slot></div></div>`}show(){return this._interactive&&document.addEventListener("click",e(this,K,"f")),super.show()}hide(t=!0){this._interactive&&document.removeEventListener("click",e(this,K,"f")),super.hide(),t&&this._interactive&&this.control&&k.isFocusable(this.control)&&this.control.focus()}attach(t){super.attach(t),e(this,G,"m",et).call(this),this._interactive&&(t.ariaHasPopup="dialog")}update(t){super.update(t),t.has("_interactive")&&(this.ariaHidden=this._interactive?null:"true",e(this,G,"m",et).call(this),this.control&&this._interactive&&(this.control.ariaHasPopup="dialog"))}_updatePosition(t,e,i){this.position.includes("before")&&"before"!==this.position&&("rtl"===S.current?e+=this.control?.clientWidth??0:e-=this.control?.clientWidth??0),this.position.includes("after")&&"after"!==this.position&&("rtl"===S.current?e-=this.control?.clientWidth??0:e+=this.control?.clientWidth??0),"rtl"===S.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 st,at,rt,nt;N=new WeakMap,j=new WeakMap,B=new WeakMap,O=new WeakMap,q=new WeakMap,K=new WeakMap,G=new WeakSet,V=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())},X=function(t){const e=new ToggleEvent("toggle",{oldState:t.oldState,newState:t.newState,bubbles:!0,composed:!0});this.dispatchEvent(e)},J=function(t){t.composedPath().some(t=>t instanceof it||t===this.control)||this.hide()},Q=function(t){"Escape"!==t.key||t.shiftKey||t.ctrlKey||(t.preventDefault(),this.hide())},Y=function(t){this._hasSubhead=b(t.target),this.shadowRoot?.querySelector(".base")?.classList.toggle("has-subhead",this._hasSubhead),i(this,j,this._hasSubhead?f(t.target,!0):"","f"),e(this,G,"m",et).call(this)},Z=function(t){this._interactive=k.findInteractiveElements(this).length>0,i(this,B,f(t.target,!0),"f"),e(this,G,"m",et).call(this)},tt=function(t){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-actions",b(t.target)),this._interactive=k.findInteractiveElements(this).length>0,e(this,G,"m",et).call(this)},et=function(){const t=e(this,j,"f")?`${e(this,j,"f")}/n${e(this,B,"f")}`:e(this,B,"f");this.isConnected&&this.control&&(e(this,O,"f")&&e(this,q,"f")&&(x.removeDescription(this.control,e(this,O,"f")),i(this,q,!1,"f")),i(this,O,t,"f"),e(this,O,"f")&&!this._interactive&&(x.describe(this.control,e(this,O,"f")),i(this,q,!0,"f")))},ot.styles=w`: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, ${u.shape.corner.medium}); background-color: var(--m3e-rich-tooltip-container-color, ${u.color.surfaceContainer}); display: none; opacity: 0; transform: scale(0.8); transition: ${y(`opacity ${u.motion.duration.short3} ${u.motion.easing.standard}, \n            transform ${u.motion.duration.short3} ${u.motion.easing.standard},\n            overlay ${u.motion.duration.short3} ${u.motion.easing.standard} allow-discrete,\n            display ${u.motion.duration.short3} ${u.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, ${u.color.onSurfaceVariant}); font-size: var(--m3e-rich-tooltip-subhead-font-size, ${u.typescale.standard.title.small.fontSize}); font-weight: var( --m3e-rich-tooltip-subhead-font-weight, ${u.typescale.standard.title.small.fontWeight} ); line-height: var( --m3e-rich-tooltip-subhead-line-height, ${u.typescale.standard.title.small.lineHeight} ); letter-spacing: var(--m3e-rich-tooltip-subhead-tracking, ${u.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, ${u.color.onSurfaceVariant}); font-size: var( --m3e-rich-tooltip-supporting-text-font-size, ${u.typescale.standard.body.medium.fontSize} ); font-weight: var( --m3e-rich-tooltip-supporting-text-font-weight, ${u.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-rich-tooltip-supporting-text-line-height, ${u.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-rich-tooltip-supporting-text-tracking, ${u.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; } }`,ot.__nextId=0,t([a()],ot.prototype,"_hasSubhead",void 0),t([a()],ot.prototype,"_interactive",void 0),t([o()],ot.prototype,"position",void 0),ot=it=t([r("m3e-rich-tooltip")],ot);let lt=class extends F{constructor(){super(...arguments),st.add(this),at.set(this,void 0),this.position="below"}get _anchorPosition(){return"above"===this.position?"top":"below"===this.position?"bottom":"before"===this.position?"ltr"===S.current?"left":"right":"ltr"===S.current?"right":"left"}attach(t){super.attach(t),e(this,at,"f")&&x.describe(t,e(this,at,"f"))}detach(){this.control&&e(this,at,"f")&&x.removeDescription(this.control,e(this,at,"f")),super.detach()}connectedCallback(){super.connectedCallback(),this.ariaHidden="true"}render(){return _`<div class="base" popover="manual" @toggle="${e(this,st,"m",nt)}"><slot @slotchange="${e(this,st,"m",rt)}"></slot></div>`}_updatePosition(t,e,i){"rtl"===S.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`}};at=new WeakMap,st=new WeakSet,rt=function(t){const o=f(t.target,!0);this.isConnected&&this.control?(e(this,at,"f")&&x.removeDescription(this.control,e(this,at,"f")),i(this,at,o,"f"),e(this,at,"f")&&x.describe(this.control,e(this,at,"f"))):i(this,at,o,"f")},nt=function(t){if("open"===t.newState){const t=this._base.getBoundingClientRect().height>parseFloat(getComputedStyle(this._base).minHeight);g(this,"-multiline",t)}},lt.styles=w`: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, ${u.shape.corner.extraSmall}); background-color: var(--m3e-tooltip-container-color, ${u.color.inverseSurface}); color: var(--m3e-tooltip-supporting-text-color, ${u.color.inverseOnSurface}); font-size: var(--m3e-tooltip-supporting-text-font-size, ${u.typescale.standard.body.small.fontSize}); font-weight: var( --m3e-tooltip-supporting-text-font-weight, ${u.typescale.standard.body.small.fontWeight} ); line-height: var( --m3e-tooltip-supporting-text-line-height, ${u.typescale.standard.body.small.lineHeight} ); letter-spacing: var( --m3e-tooltip-supporting-text-tracking, ${u.typescale.standard.body.small.tracking} ); display: none; opacity: 0; transform: scale(0.8); transition: ${y(`opacity ${u.motion.duration.short3} ${u.motion.easing.standard}, \n        transform ${u.motion.duration.short3} ${u.motion.easing.standard},\n        overlay ${u.motion.duration.short3} ${u.motion.easing.standard} allow-discrete,\n        display ${u.motion.duration.short3} ${u.motion.easing.standard} allow-discrete`)}; } :host(:state(-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; } }`,t([o()],lt.prototype,"position",void 0),lt=t([r("m3e-tooltip")],lt);export{D as M3eRichTooltipActionElement,ot as M3eRichTooltipElement,lt as M3eTooltipElement,F as TooltipElementBase};