@fluid-topics/ft-tabs 1.2.49 → 1.2.51

package/build/ft-tabs.light.js

@@ -343,7 +343,7 @@ Also for action icons.`,r.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
                     </div>
                 </div>
             </div>
-        `}updated(o){o.has("visible")&&this.visible&&this.resetTooltipContent(),super.updated(o)}contentAvailableCallback(o){super.contentAvailableCallback(o),["visible","text"].some(a=>o.has(a))&&this.visible&&this.positionTooltip()}async show(o){this.visible=!0,o!=null&&await this.hideDebounce.run(()=>{this.hide()},o)}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var o;return((o=this.slotNodes)!==null&&o!==void 0?o:[]).filter(a=>a.nodeType==Node.ELEMENT_NODE)[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){let o=this.tooltipContent.style;switch(o.transition="none",this.validPosition){case"top":o.top=this.tooltip.clientHeight+"px",o.left="0";break;case"bottom":o.top=-this.tooltip.clientHeight+"px",o.left="0";break;case"left":o.top="0",o.left=this.tooltip.clientWidth+"px";break;case"right":o.top="0",o.left=-this.tooltip.clientWidth+"px";break}}}positionTooltip(){this.resetTooltipContent(),this.tooltip&&this.slottedElement&&(this.tooltip.style.left="",this.tooltip.style.top="",ea(this.slottedElement,this.tooltip,this.position).then(({x:o,y:a})=>{this.tooltip&&(this.tooltip.style.left=`${o}px`,this.tooltip.style.top=`${a}px`)})),this.revealDebouncer.run(()=>{this.tooltipContent&&(this.tooltipContent.style.transition="top var(--ft-transition-duration, 250ms), left var(--ft-transition-duration, 250ms)",this.tooltipContent.style.top="0",this.tooltipContent.style.left="0")},this.manual?0:this.delay)}onTouch(){this.manual||(this.show(),setTimeout(()=>window.addEventListener("touchstart",o=>{o.composedPath().includes(this.container)||this.onOut()},{once:!0}),100))}onHover(){this.manual||this.show()}onOut(){this.manual||(this.revealDebouncer.cancel(),this.hide())}onClick(){this.manual||(this.revealDebouncer.cancel(),this.hide())}correctOutOfWindowPixels(o,a){return Math.max(o,Math.min(0,-a))}};E.elementDefinitions={"ft-typography":F};E.styles=Br;D([(0,W.property)()],E.prototype,"text",void 0);D([(0,W.property)({type:Boolean})],E.prototype,"manual",void 0);D([(0,W.property)({type:Boolean})],E.prototype,"inline",void 0);D([(0,W.property)({type:Number})],E.prototype,"delay",void 0);D([(0,W.property)()],E.prototype,"position",void 0);D([(0,W.queryAssignedNodes)()],E.prototype,"slotNodes",void 0);D([(0,W.query)(".ft-tooltip--container")],E.prototype,"container",void 0);D([(0,W.query)(".ft-tooltip")],E.prototype,"tooltip",void 0);D([(0,W.query)(".ft-tooltip--content")],E.prototype,"tooltipContent",void 0);D([(0,W.state)()],E.prototype,"visible",void 0);D([(0,W.eventOptions)({passive:!0})],E.prototype,"onTouch",null);D([(0,W.eventOptions)({passive:!0})],E.prototype,"onHover",null);D([(0,W.eventOptions)({passive:!0})],E.prototype,"onOut",null);D([(0,W.eventOptions)({passive:!0})],E.prototype,"onClick",null);(0,ra.customElement)("ft-tooltip")(E);var vt=function(e,o,a,i){var l=arguments.length,c=l<3?o:i===null?i=Object.getOwnPropertyDescriptor(o,a):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")c=Reflect.decorate(e,o,a,i);else for(var d=e.length-1;d>=0;d--)(s=e[d])&&(c=(l<3?s(c):l>3?s(o,a,c):s(o,a))||c);return l>3&&c&&Object.defineProperty(o,a,c),c},Fe;(function(e){e.left="left",e.right="right",e.start="start",e.end="end",e.justify="justify"})(Fe||(Fe={}));var Ve=class extends CustomEvent{constructor(o){super("index-change",{detail:o})}},U=class extends Q.FtLitElement{constructor(){super(...arguments),this.alignTabs=Fe.justify,this.ftTabs=[],this.horizontal=!1,this.activeIndex=0,this.updateDebouncer=new Q.Debouncer(2),this.onTabUpdated=()=>this.updateDebouncer.run(()=>{this.requestUpdate(),this.dispatchEvent(new Q.PostResizeEvent)}),this.resizeObserver=new ResizeObserver(()=>this.placeIndicator())}render(){var o,a;let i=(a=this.ftTabs[(o=this.activeIndex)!==null&&o!==void 0?o:0])===null||a===void 0?void 0:a.color;return Ze.html`
+        `}updated(o){o.has("visible")&&this.visible&&this.resetTooltipContent(),super.updated(o)}contentAvailableCallback(o){super.contentAvailableCallback(o),["visible","text"].some(a=>o.has(a))&&this.visible&&this.positionTooltip()}async show(o){this.visible=!0,o!=null&&await this.hideDebounce.run(()=>{this.hide()},o)}async showTemporaryText(o,a){let i=this.manual;this.manual=!0;let l=this.text;this.text=o,await this.show(a),this.text=l,this.manual=i}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var o;return((o=this.slotNodes)!==null&&o!==void 0?o:[]).filter(a=>a.nodeType==Node.ELEMENT_NODE)[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){let o=this.tooltipContent.style;switch(o.transition="none",this.validPosition){case"top":o.top=this.tooltip.clientHeight+"px",o.left="0";break;case"bottom":o.top=-this.tooltip.clientHeight+"px",o.left="0";break;case"left":o.top="0",o.left=this.tooltip.clientWidth+"px";break;case"right":o.top="0",o.left=-this.tooltip.clientWidth+"px";break}}}positionTooltip(){this.resetTooltipContent(),this.tooltip&&this.slottedElement&&(this.tooltip.style.left="",this.tooltip.style.top="",ea(this.slottedElement,this.tooltip,this.position).then(({x:o,y:a})=>{this.tooltip&&(this.tooltip.style.left=`${o}px`,this.tooltip.style.top=`${a}px`)})),this.revealDebouncer.run(()=>{this.tooltipContent&&(this.tooltipContent.style.transition="top var(--ft-transition-duration, 250ms), left var(--ft-transition-duration, 250ms)",this.tooltipContent.style.top="0",this.tooltipContent.style.left="0")},this.manual?0:this.delay)}onTouch(){this.manual||(this.show(),setTimeout(()=>window.addEventListener("touchstart",o=>{o.composedPath().includes(this.container)||this.onOut()},{once:!0}),100))}onHover(){this.manual||this.show()}onOut(){this.manual||(this.revealDebouncer.cancel(),this.hide())}onClick(){this.manual||(this.revealDebouncer.cancel(),this.hide())}correctOutOfWindowPixels(o,a){return Math.max(o,Math.min(0,-a))}};E.elementDefinitions={"ft-typography":F};E.styles=Br;D([(0,W.property)()],E.prototype,"text",void 0);D([(0,W.property)({type:Boolean})],E.prototype,"manual",void 0);D([(0,W.property)({type:Boolean})],E.prototype,"inline",void 0);D([(0,W.property)({type:Number})],E.prototype,"delay",void 0);D([(0,W.property)()],E.prototype,"position",void 0);D([(0,W.queryAssignedNodes)()],E.prototype,"slotNodes",void 0);D([(0,W.query)(".ft-tooltip--container")],E.prototype,"container",void 0);D([(0,W.query)(".ft-tooltip")],E.prototype,"tooltip",void 0);D([(0,W.query)(".ft-tooltip--content")],E.prototype,"tooltipContent",void 0);D([(0,W.state)()],E.prototype,"visible",void 0);D([(0,W.eventOptions)({passive:!0})],E.prototype,"onTouch",null);D([(0,W.eventOptions)({passive:!0})],E.prototype,"onHover",null);D([(0,W.eventOptions)({passive:!0})],E.prototype,"onOut",null);D([(0,W.eventOptions)({passive:!0})],E.prototype,"onClick",null);(0,ra.customElement)("ft-tooltip")(E);var vt=function(e,o,a,i){var l=arguments.length,c=l<3?o:i===null?i=Object.getOwnPropertyDescriptor(o,a):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")c=Reflect.decorate(e,o,a,i);else for(var d=e.length-1;d>=0;d--)(s=e[d])&&(c=(l<3?s(c):l>3?s(o,a,c):s(o,a))||c);return l>3&&c&&Object.defineProperty(o,a,c),c},Fe;(function(e){e.left="left",e.right="right",e.start="start",e.end="end",e.justify="justify"})(Fe||(Fe={}));var Ve=class extends CustomEvent{constructor(o){super("index-change",{detail:o})}},U=class extends Q.FtLitElement{constructor(){super(...arguments),this.alignTabs=Fe.justify,this.ftTabs=[],this.horizontal=!1,this.activeIndex=0,this.updateDebouncer=new Q.Debouncer(2),this.onTabUpdated=()=>this.updateDebouncer.run(()=>{this.requestUpdate(),this.dispatchEvent(new Q.PostResizeEvent)}),this.resizeObserver=new ResizeObserver(()=>this.placeIndicator())}render(){var o,a;let i=(a=this.ftTabs[(o=this.activeIndex)!==null&&o!==void 0?o:0])===null||a===void 0?void 0:a.color;return Ze.html`
             <div class="${(0,Ke.classMap)(this.tabsClasses)}" part="container">
                 <div role="tablist" part="tablist">
                     ${(0,aa.repeat)(this.ftTabs,(l,c)=>this.addTooltipIfNecessary(l,Ze.html`