@fluid-topics/ft-tooltip 2.1.14 → 2.1.15

package/build/ft-tooltip.d.ts

@@ -43,5 +43,6 @@ export declare class FtTooltip extends FtLitElementWithI18n implements FtTooltip
     private onFocusIn;
     private onOut;
     private onClick;
+    private matchesIgnored;
     protected isIgnored(e: Event): boolean;
 }

package/build/ft-tooltip.js

@@ -38,6 +38,9 @@ export class FtTooltip extends FtLitElementWithI18n {
             if (!this.isIgnored(e)) {
                 this.show();
             }
+            else if (this.matchesIgnored(e)) {
+                this.hide();
+            }
         };
         this.onFocusIn = (e) => {
             if (!this.isIgnored(e) && window.FluidTopicsA11yHints.isKeyboardNavigation && window.FluidTopicsA11yHints.lastPressedKey === "Tab") {
@@ -210,8 +213,11 @@ export class FtTooltip extends FtLitElementWithI18n {
             }
         }, this.manual ? 0 : this.delay);
     }
+    matchesIgnored(e) {
+        return eventPathContainsMatchingElement(e, this.ignoreMatchingElements, this.eventsTarget);
+    }
     isIgnored(e) {
-        return this.manual || eventPathContainsMatchingElement(e, this.ignoreMatchingElements, this.eventsTarget);
+        return this.manual || this.matchesIgnored(e);
     }
 }
 FtTooltip.elementDefinitions = {

package/build/ft-tooltip.light.js

@@ -142,7 +142,7 @@
             <span class="ft-i18n">
                 ${this.i18n({context:this.context,key:this.key,args:Array.isArray(this.args)?this.args:[]})}
             </span>
-        `}update(e){var r;super.update(e),["context","key","defaultMessage"].some(n=>e.has(n))&&this.context&&this.key&&this.addI18nContext(this.context,{[this.key]:(r=this.defaultMessage)!==null&&r!==void 0?r:""})}};Z.elementDefinitions={};Z.styles=Xo;Ut([(0,wr.redux)()],Z.prototype,"editorMode",void 0);Ut([(0,Er.property)()],Z.prototype,"context",void 0);Ut([(0,Er.property)()],Z.prototype,"key",void 0);Ut([(0,wr.jsonProperty)([])],Z.prototype,"args",void 0);Ut([(0,Er.property)()],Z.prototype,"defaultMessage",void 0);var Qo=E(T());var Jo={"ft-i18n":Z};(0,Qo.customElements)(Jo);var ee=function(t,e,r,n){var i=arguments.length,s=i<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,r):n,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(t,e,r,n);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(s=(i<3?o(s):i>3?o(e,r,s):o(e,r))||s);return i>3&&s&&Object.defineProperty(e,r,s),s},P=class extends Ar{constructor(){super(...arguments),this.manual=!1,this.inline=!1,this.delay=500,this.position="bottom",this.ignoreMatchingElements=[],this.visible=!1,this.validPositions=new Set(["top","bottom","left","right"]),this.hideDebounce=new Y.Debouncer,this.revealDebouncer=new Y.Debouncer,this.onTouch=e=>{this.isIgnored(e)||(this.show(),setTimeout(()=>window.addEventListener("touchstart",r=>{r.composedPath().includes(this.container)||this.onOut(r)},{once:!0}),100))},this.onHover=e=>{this.isIgnored(e)||this.show()},this.onFocusIn=e=>{!this.isIgnored(e)&&window.FluidTopicsA11yHints.isKeyboardNavigation&&window.FluidTopicsA11yHints.lastPressedKey==="Tab"&&this.show()},this.onOut=e=>{this.isIgnored(e)||(this.revealDebouncer.cancel(),this.hide())},this.onClick=e=>{this.isIgnored(e)||(this.revealDebouncer.cancel(),this.hide())}}get validPosition(){return this.validPositions.has(this.position)?this.position:"bottom"}render(){var e,r;return Zo.html`
+        `}update(e){var r;super.update(e),["context","key","defaultMessage"].some(n=>e.has(n))&&this.context&&this.key&&this.addI18nContext(this.context,{[this.key]:(r=this.defaultMessage)!==null&&r!==void 0?r:""})}};Z.elementDefinitions={};Z.styles=Xo;Ut([(0,wr.redux)()],Z.prototype,"editorMode",void 0);Ut([(0,Er.property)()],Z.prototype,"context",void 0);Ut([(0,Er.property)()],Z.prototype,"key",void 0);Ut([(0,wr.jsonProperty)([])],Z.prototype,"args",void 0);Ut([(0,Er.property)()],Z.prototype,"defaultMessage",void 0);var Qo=E(T());var Jo={"ft-i18n":Z};(0,Qo.customElements)(Jo);var ee=function(t,e,r,n){var i=arguments.length,s=i<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,r):n,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(t,e,r,n);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(s=(i<3?o(s):i>3?o(e,r,s):o(e,r))||s);return i>3&&s&&Object.defineProperty(e,r,s),s},P=class extends Ar{constructor(){super(...arguments),this.manual=!1,this.inline=!1,this.delay=500,this.position="bottom",this.ignoreMatchingElements=[],this.visible=!1,this.validPositions=new Set(["top","bottom","left","right"]),this.hideDebounce=new Y.Debouncer,this.revealDebouncer=new Y.Debouncer,this.onTouch=e=>{this.isIgnored(e)||(this.show(),setTimeout(()=>window.addEventListener("touchstart",r=>{r.composedPath().includes(this.container)||this.onOut(r)},{once:!0}),100))},this.onHover=e=>{this.isIgnored(e)?this.matchesIgnored(e)&&this.hide():this.show()},this.onFocusIn=e=>{!this.isIgnored(e)&&window.FluidTopicsA11yHints.isKeyboardNavigation&&window.FluidTopicsA11yHints.lastPressedKey==="Tab"&&this.show()},this.onOut=e=>{this.isIgnored(e)||(this.revealDebouncer.cancel(),this.hide())},this.onClick=e=>{this.isIgnored(e)||(this.revealDebouncer.cancel(),this.hide())}}get validPosition(){return this.validPositions.has(this.position)?this.position:"bottom"}render(){var e,r;return Zo.html`
             <div part="container"
                  class="ft-tooltip--container ${this.inline?"ft-tooltip--inline":""}">
                 <slot part="slot"></slot>
@@ -157,7 +157,7 @@
                     </div>
                 </div>
             </div>
-        `}setupFor(e){this.eventsTarget!==e&&(this.removeHandlers(),this.eventsTarget=e,this.eventsTarget.addEventListener("mouseover",this.onHover,{passive:!0}),this.eventsTarget.addEventListener("mouseleave",this.onOut,{passive:!0}),this.eventsTarget.addEventListener("focusin",this.onFocusIn,{passive:!0}),this.eventsTarget.addEventListener("focusout",this.onOut,{passive:!0}),this.eventsTarget.addEventListener("touchstart",this.onTouch,{passive:!0}),this.eventsTarget.addEventListener("click",this.onClick,{passive:!0}))}removeHandlers(){this.eventsTarget&&(this.eventsTarget.removeEventListener("mouseover",this.onHover),this.eventsTarget.removeEventListener("mouseleave",this.onOut),this.eventsTarget.removeEventListener("focusin",this.onFocusIn),this.eventsTarget.removeEventListener("focusout",this.onOut),this.eventsTarget.removeEventListener("touchstart",this.onTouch),this.eventsTarget.removeEventListener("click",this.onClick),this.eventsTarget=void 0)}defaultSetup(){this.container&&this.setupFor(this.container)}updated(e){var r,n;e.has("visible")&&(this.visible?(this.resetTooltipContent(),(r=this.tooltip)===null||r===void 0||r.showPopover()):(n=this.tooltip)===null||n===void 0||n.hidePopover()),super.updated(e)}contentAvailableCallback(e){super.contentAvailableCallback(e),["visible","text"].some(r=>e.has(r))&&this.visible&&this.positionTooltip()}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.eventsTarget==null&&this.defaultSetup()})}disconnectedCallback(){super.disconnectedCallback(),this.removeHandlers()}async show(e){this.visible=!0,e!=null&&await this.hideDebounce.run(()=>{this.hide()},e)}async showTemporaryText(e,r){let n=this.manual;this.manual=!0;let i=this.text;this.text={message:e},await this.show(r),this.text=i,this.manual=n}hide(){this.visible=!1}toggle(){this.visible=!this.visible}isVisible(){return this.visible}get slottedElement(){var e;return((e=this.slotNodes)!==null&&e!==void 0?e:[]).filter(r=>r.nodeType==Node.ELEMENT_NODE)[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){let e=this.tooltipContent.style;switch(e.transition="none",this.validPosition){case"top":e.top=this.tooltip.clientHeight+"px",e.left="0";break;case"bottom":e.top=-this.tooltip.clientHeight+"px",e.left="0";break;case"left":e.top="0",e.left=this.tooltip.clientWidth+"px";break;case"right":e.top="0",e.left=-this.tooltip.clientWidth+"px";break}}}positionTooltip(){this.resetTooltipContent(),this.tooltip&&this.slottedElement&&qi(this.slottedElement,this.tooltip,{placement:this.position,strategy:"fixed"}).then(({x:e,y:r})=>{this.tooltip&&(this.tooltip.style.transform=`translate(${e}px,${r}px)`)}),this.revealDebouncer.run(()=>{this.tooltipContent&&(this.tooltipContent.style.transition=`top ${Y.designSystemVariables.transitionDuration}, left  ${Y.designSystemVariables.transitionDuration}`,this.tooltipContent.style.top="0",this.tooltipContent.style.left="0")},this.manual?0:this.delay)}isIgnored(e){return this.manual||(0,Y.eventPathContainsMatchingElement)(e,this.ignoreMatchingElements,this.eventsTarget)}};P.elementDefinitions={"ft-typography":ce};P.styles=gi;ee([Go()],P.prototype,"text",void 0);ee([(0,X.property)({type:Boolean})],P.prototype,"manual",void 0);ee([(0,X.property)({type:Boolean})],P.prototype,"inline",void 0);ee([(0,Y.numberProperty)()],P.prototype,"delay",void 0);ee([(0,X.property)()],P.prototype,"position",void 0);ee([(0,Y.jsonProperty)([])],P.prototype,"ignoreMatchingElements",void 0);ee([(0,X.queryAssignedNodes)()],P.prototype,"slotNodes",void 0);ee([(0,X.query)(".ft-tooltip--container")],P.prototype,"container",void 0);ee([(0,X.query)(".ft-tooltip")],P.prototype,"tooltip",void 0);ee([(0,X.query)(".ft-tooltip--content")],P.prototype,"tooltipContent",void 0);ee([(0,X.state)()],P.prototype,"visible",void 0);var ea={"ft-tooltip":P};(0,ta.customElements)(ea);})();
+        `}setupFor(e){this.eventsTarget!==e&&(this.removeHandlers(),this.eventsTarget=e,this.eventsTarget.addEventListener("mouseover",this.onHover,{passive:!0}),this.eventsTarget.addEventListener("mouseleave",this.onOut,{passive:!0}),this.eventsTarget.addEventListener("focusin",this.onFocusIn,{passive:!0}),this.eventsTarget.addEventListener("focusout",this.onOut,{passive:!0}),this.eventsTarget.addEventListener("touchstart",this.onTouch,{passive:!0}),this.eventsTarget.addEventListener("click",this.onClick,{passive:!0}))}removeHandlers(){this.eventsTarget&&(this.eventsTarget.removeEventListener("mouseover",this.onHover),this.eventsTarget.removeEventListener("mouseleave",this.onOut),this.eventsTarget.removeEventListener("focusin",this.onFocusIn),this.eventsTarget.removeEventListener("focusout",this.onOut),this.eventsTarget.removeEventListener("touchstart",this.onTouch),this.eventsTarget.removeEventListener("click",this.onClick),this.eventsTarget=void 0)}defaultSetup(){this.container&&this.setupFor(this.container)}updated(e){var r,n;e.has("visible")&&(this.visible?(this.resetTooltipContent(),(r=this.tooltip)===null||r===void 0||r.showPopover()):(n=this.tooltip)===null||n===void 0||n.hidePopover()),super.updated(e)}contentAvailableCallback(e){super.contentAvailableCallback(e),["visible","text"].some(r=>e.has(r))&&this.visible&&this.positionTooltip()}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.eventsTarget==null&&this.defaultSetup()})}disconnectedCallback(){super.disconnectedCallback(),this.removeHandlers()}async show(e){this.visible=!0,e!=null&&await this.hideDebounce.run(()=>{this.hide()},e)}async showTemporaryText(e,r){let n=this.manual;this.manual=!0;let i=this.text;this.text={message:e},await this.show(r),this.text=i,this.manual=n}hide(){this.visible=!1}toggle(){this.visible=!this.visible}isVisible(){return this.visible}get slottedElement(){var e;return((e=this.slotNodes)!==null&&e!==void 0?e:[]).filter(r=>r.nodeType==Node.ELEMENT_NODE)[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){let e=this.tooltipContent.style;switch(e.transition="none",this.validPosition){case"top":e.top=this.tooltip.clientHeight+"px",e.left="0";break;case"bottom":e.top=-this.tooltip.clientHeight+"px",e.left="0";break;case"left":e.top="0",e.left=this.tooltip.clientWidth+"px";break;case"right":e.top="0",e.left=-this.tooltip.clientWidth+"px";break}}}positionTooltip(){this.resetTooltipContent(),this.tooltip&&this.slottedElement&&qi(this.slottedElement,this.tooltip,{placement:this.position,strategy:"fixed"}).then(({x:e,y:r})=>{this.tooltip&&(this.tooltip.style.transform=`translate(${e}px,${r}px)`)}),this.revealDebouncer.run(()=>{this.tooltipContent&&(this.tooltipContent.style.transition=`top ${Y.designSystemVariables.transitionDuration}, left  ${Y.designSystemVariables.transitionDuration}`,this.tooltipContent.style.top="0",this.tooltipContent.style.left="0")},this.manual?0:this.delay)}matchesIgnored(e){return(0,Y.eventPathContainsMatchingElement)(e,this.ignoreMatchingElements,this.eventsTarget)}isIgnored(e){return this.manual||this.matchesIgnored(e)}};P.elementDefinitions={"ft-typography":ce};P.styles=gi;ee([Go()],P.prototype,"text",void 0);ee([(0,X.property)({type:Boolean})],P.prototype,"manual",void 0);ee([(0,X.property)({type:Boolean})],P.prototype,"inline",void 0);ee([(0,Y.numberProperty)()],P.prototype,"delay",void 0);ee([(0,X.property)()],P.prototype,"position",void 0);ee([(0,Y.jsonProperty)([])],P.prototype,"ignoreMatchingElements",void 0);ee([(0,X.queryAssignedNodes)()],P.prototype,"slotNodes",void 0);ee([(0,X.query)(".ft-tooltip--container")],P.prototype,"container",void 0);ee([(0,X.query)(".ft-tooltip")],P.prototype,"tooltip",void 0);ee([(0,X.query)(".ft-tooltip--content")],P.prototype,"tooltipContent",void 0);ee([(0,X.state)()],P.prototype,"visible",void 0);var ea={"ft-tooltip":P};(0,ta.customElements)(ea);})();
 /*! Bundled license information:
 
 lit-html/lit-html.js: