@fluid-topics/ft-tabs 1.1.4 → 1.1.6

package/build/ft-tabs.light.js

@@ -128,7 +128,7 @@
                 <div class="ft-ripple--background"></div>
                 <div class="ft-ripple--effect"></div>
             </div>
-        `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}update(t){var o,e;super.update(t),t.has("disabled")&&(this.disabled?(this.endRipple(),null===(o=this.target)||void 0===o||o.removeAttribute("data-is-ft-ripple-target")):null===(e=this.target)||void 0===e||e.setAttribute("data-is-ft-ripple-target","true"))}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}connectedCallback(){super.connectedCallback(),this.setupDebouncer.run((()=>this.defaultSetup()))}defaultSetup(){var t,o;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;e&&this.setupFor(null!==(o=this.target)&&void 0!==o?o:e)}setupFor(t){if(this.setupDebouncer.cancel(),this.target===t)return;this.onDisconnect&&this.onDisconnect(),this.target=t,t.setAttribute("data-is-ft-ripple-target","true");const o=(...t)=>o=>{t.forEach((t=>window.addEventListener(t,this.endPress,{once:!0}))),this.startPress(o)},e=o("mouseup","contextmenu"),r=o("touchend","touchcancel"),a=t=>{["Enter"," "].includes(t.key)&&o("keyup")(t)};t.addEventListener("mouseover",this.startHover),t.addEventListener("mousemove",this.moveRipple),t.addEventListener("mouseleave",this.endHover),t.addEventListener("mousedown",e),t.addEventListener("touchstart",r),t.addEventListener("touchmove",this.moveRipple),t.addEventListener("keydown",a),t.addEventListener("focus",this.startFocus),t.addEventListener("blur",this.endFocus),t.addEventListener("focusin",this.startFocus),t.addEventListener("focusout",this.endFocus),this.onDisconnect=()=>{t.removeAttribute("data-is-ft-ripple-target"),t.removeEventListener("mouseover",this.startHover),t.removeEventListener("mousemove",this.moveRipple),t.removeEventListener("mouseleave",this.endHover),t.removeEventListener("mousedown",e),t.removeEventListener("touchstart",r),t.removeEventListener("touchmove",this.moveRipple),t.removeEventListener("keydown",a),t.removeEventListener("focus",this.startFocus),t.removeEventListener("blur",this.endFocus),t.removeEventListener("focusin",this.startFocus),t.removeEventListener("focusout",this.endFocus),this.onDisconnect=void 0,this.target=void 0}}getCoordinates(t){const o=t,e=t;let r,a;return null!=o.x?({x:r,y:a}=o):null!=e.touches&&(r=e.touches[0].clientX,a=e.touches[0].clientY),{x:r,y:a}}isFocusVisible(t){return!(t instanceof HTMLElement)||t.matches(":focus-visible")}isIgnored(t){if(this.disabled)return!0;if(null!=t)for(let o of t.composedPath()){if(o===this.target)break;if("hasAttribute"in o&&o.hasAttribute("data-is-ft-ripple-target"))return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}}C.elementDefinitions={},C.styles=S,w([r.property({type:Boolean})],C.prototype,"primary",void 0),w([r.property({type:Boolean})],C.prototype,"secondary",void 0),w([r.property({type:Boolean})],C.prototype,"unbounded",void 0),w([r.property({type:Boolean})],C.prototype,"activated",void 0),w([r.property({type:Boolean})],C.prototype,"selected",void 0),w([r.property({type:Boolean})],C.prototype,"disabled",void 0),w([r.state()],C.prototype,"hovered",void 0),w([r.state()],C.prototype,"focused",void 0),w([r.state()],C.prototype,"pressed",void 0),w([r.state()],C.prototype,"rippling",void 0),w([r.state()],C.prototype,"originX",void 0),w([r.state()],C.prototype,"originY",void 0),w([r.query(".ft-ripple")],C.prototype,"ripple",void 0),w([r.query(".ft-ripple--effect")],C.prototype,"rippleEffect",void 0),o.customElement("ft-ripple")(C);
+        `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}update(t){var o,e;super.update(t),t.has("disabled")&&(this.disabled?(this.endRipple(),null===(o=this.target)||void 0===o||o.removeAttribute("data-is-ft-ripple-target")):null===(e=this.target)||void 0===e||e.setAttribute("data-is-ft-ripple-target","true"))}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}connectedCallback(){super.connectedCallback(),this.setupDebouncer.run((()=>this.defaultSetup()))}defaultSetup(){var t,o;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;e&&this.setupFor(null!==(o=this.target)&&void 0!==o?o:e)}setupFor(t){if(this.setupDebouncer.cancel(),this.target===t)return;this.onDisconnect&&this.onDisconnect(),this.target=t,t.setAttribute("data-is-ft-ripple-target","true");const o=(...t)=>o=>{t.forEach((t=>window.addEventListener(t,this.endPress,{once:!0}))),this.startPress(o)},e=o("mouseup","contextmenu"),r=o("touchend","touchcancel"),a=t=>{["Enter"," "].includes(t.key)&&o("keyup")(t)},i={passive:!0};t.addEventListener("mouseover",this.startHover,i),t.addEventListener("mousemove",this.moveRipple,i),t.addEventListener("mouseleave",this.endHover,i),t.addEventListener("mousedown",e,i),t.addEventListener("touchstart",r,i),t.addEventListener("touchmove",this.moveRipple,i),t.addEventListener("keydown",a,i),t.addEventListener("focus",this.startFocus,i),t.addEventListener("blur",this.endFocus,i),t.addEventListener("focusin",this.startFocus,i),t.addEventListener("focusout",this.endFocus,i),this.onDisconnect=()=>{t.removeAttribute("data-is-ft-ripple-target"),t.removeEventListener("mouseover",this.startHover,i),t.removeEventListener("mousemove",this.moveRipple,i),t.removeEventListener("mouseleave",this.endHover,i),t.removeEventListener("mousedown",e,i),t.removeEventListener("touchstart",r,i),t.removeEventListener("touchmove",this.moveRipple,i),t.removeEventListener("keydown",a,i),t.removeEventListener("focus",this.startFocus,i),t.removeEventListener("blur",this.endFocus,i),t.removeEventListener("focusin",this.startFocus,i),t.removeEventListener("focusout",this.endFocus,i),this.onDisconnect=void 0,this.target=void 0}}getCoordinates(t){const o=t,e=t;let r,a;return null!=o.x?({x:r,y:a}=o):null!=e.touches&&(r=e.touches[0].clientX,a=e.touches[0].clientY),{x:r,y:a}}isFocusVisible(t){return!(t instanceof HTMLElement)||t.matches(":focus-visible")}isIgnored(t){if(this.disabled)return!0;if(null!=t)for(let o of t.composedPath()){if(o===this.target)break;if("hasAttribute"in o&&o.hasAttribute("data-is-ft-ripple-target"))return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}}C.elementDefinitions={},C.styles=S,w([r.property({type:Boolean})],C.prototype,"primary",void 0),w([r.property({type:Boolean})],C.prototype,"secondary",void 0),w([r.property({type:Boolean})],C.prototype,"unbounded",void 0),w([r.property({type:Boolean})],C.prototype,"activated",void 0),w([r.property({type:Boolean})],C.prototype,"selected",void 0),w([r.property({type:Boolean})],C.prototype,"disabled",void 0),w([r.state()],C.prototype,"hovered",void 0),w([r.state()],C.prototype,"focused",void 0),w([r.state()],C.prototype,"pressed",void 0),w([r.state()],C.prototype,"rippling",void 0),w([r.state()],C.prototype,"originX",void 0),w([r.state()],C.prototype,"originY",void 0),w([r.query(".ft-ripple")],C.prototype,"ripple",void 0),w([r.query(".ft-ripple--effect")],C.prototype,"rippleEffect",void 0),o.customElement("ft-ripple")(C);
 /**
      * @license
      * Copyright 2017 Google LLC
@@ -444,7 +444,7 @@ const ct=Symbol.for(""),pt=t=>{if(t?.r===ct)return t?._$litStatic$},ft=t=>({_$li
                     </div>
                 </div>
             </div>
-        `}updated(t){t.has("visible")&&this.visible&&this.resetTooltipContent(),super.updated(t)}contentAvailableCallback(t){super.contentAvailableCallback(t),["visible","text"].some((o=>t.has(o)))&&this.visible&&this.positionTooltip()}show(t){this.visible=!0,null!=t&&this.hideDebounce.run((()=>this.hide()),t)}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var t;return(null!==(t=this.slotNodes)&&void 0!==t?t:[]).filter((t=>t.nodeType==Node.ELEMENT_NODE))[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){const t=this.tooltipContent.style;switch(t.transition="none",this.validPosition){case"top":t.top=this.tooltip.clientHeight+"px",t.left="0";break;case"bottom":t.top=-this.tooltip.clientHeight+"px",t.left="0";break;case"left":t.top="0",t.left=this.tooltip.clientWidth+"px";break;case"right":t.top="0",t.left=-this.tooltip.clientWidth+"px"}}}positionTooltip(){var t;this.resetTooltipContent(),this.tooltip&&this.slottedElement&&(this.tooltip.style.left="",this.tooltip.style.top="",cr(this.slottedElement,this.tooltip,{middleware:[(t={crossAxis:!0},void 0===t&&(t={}),{name:"shift",options:t,async fn(o){const{x:e,y:r,placement:a}=o,{mainAxis:i=!0,crossAxis:n=!1,limiter:l={fn:t=>{let{x:o,y:e}=t;return{x:o,y:e}}},...c}=xe(t,o),p={x:e,y:r},f=await Ue(o,c),s=we(Oe(a)),d=ve(s);let h=p[d],y=p[s];if(i){const t="y"===d?"bottom":"right";h=me(h+f["y"===d?"top":"left"],h,h-f[t])}if(n){const t="y"===s?"bottom":"right";y=me(y+f["y"===s?"top":"left"],y,y-f[t])}const g=l.fn({...o,[d]:h,[s]:y});return{...g,data:{x:g.x-e,y:g.y-r}}}}),Ee({allowedPlacements:[this.position]})]}).then((({x:t,y:o})=>{this.tooltip&&(this.tooltip.style.left=`${t}px`,this.tooltip.style.top=`${o}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",(t=>{t.composedPath().includes(this.container)||this.onOut()}),{once:!0})),100))}onHover(){this.manual||this.show()}onOut(){this.manual||(this.revealDebouncer.cancel(),this.hide())}correctOutOfWindowPixels(t,o){return Math.max(t,Math.min(0,-o))}}fr.elementDefinitions={"ft-typography":Po},fr.styles=pe,pr([r.property()],fr.prototype,"text",void 0),pr([r.property({type:Boolean})],fr.prototype,"manual",void 0),pr([r.property({type:Boolean})],fr.prototype,"inline",void 0),pr([r.property({type:Number})],fr.prototype,"delay",void 0),pr([r.property()],fr.prototype,"position",void 0),pr([r.queryAssignedNodes()],fr.prototype,"slotNodes",void 0),pr([r.query(".ft-tooltip--container")],fr.prototype,"container",void 0),pr([r.query(".ft-tooltip")],fr.prototype,"tooltip",void 0),pr([r.query(".ft-tooltip--content")],fr.prototype,"tooltipContent",void 0),pr([r.state()],fr.prototype,"visible",void 0),o.customElement("ft-tooltip")(fr);var sr=function(t,o,e,r){for(var a,i=arguments.length,n=i<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(a=t[l])&&(n=(i<3?a(n):i>3?a(o,e,n):a(o,e))||n);return i>3&&n&&Object.defineProperty(o,e,n),n};class dr extends CustomEvent{constructor(t){super("index-change",{detail:t})}}class hr extends o.FtLitElement{constructor(){super(...arguments),this.dense=!1,this.contentBefore=!1,this.alignTabs=t.FtTabsAlignment.justify,this.ftTabs=[],this.activeIndex=0,this.updateDebouncer=new o.Debouncer(2),this.onTabUpdated=()=>this.updateDebouncer.run((()=>{this.requestUpdate(),this.dispatchEvent(new o.PostResizeEvent)})),this.resizeObserver=new ResizeObserver((()=>this.placeIndicator()))}render(){var t;const o={"ft-tabs":!0,"ft-tabs--reverse":this.contentBefore,"ft-tabs--dense":this.dense},r=null===(t=this.ftTabs[this.activeIndex])||void 0===t?void 0:t.color;return e.html`
+        `}updated(t){t.has("visible")&&this.visible&&this.resetTooltipContent(),super.updated(t)}contentAvailableCallback(t){super.contentAvailableCallback(t),["visible","text"].some((o=>t.has(o)))&&this.visible&&this.positionTooltip()}show(t){this.visible=!0,null!=t&&this.hideDebounce.run((()=>this.hide()),t)}hide(){this.visible=!1}toggle(){this.visible=!this.visible}get slottedElement(){var t;return(null!==(t=this.slotNodes)&&void 0!==t?t:[]).filter((t=>t.nodeType==Node.ELEMENT_NODE))[0]}resetTooltipContent(){if(this.tooltip&&this.tooltipContent){const t=this.tooltipContent.style;switch(t.transition="none",this.validPosition){case"top":t.top=this.tooltip.clientHeight+"px",t.left="0";break;case"bottom":t.top=-this.tooltip.clientHeight+"px",t.left="0";break;case"left":t.top="0",t.left=this.tooltip.clientWidth+"px";break;case"right":t.top="0",t.left=-this.tooltip.clientWidth+"px"}}}positionTooltip(){var t;this.resetTooltipContent(),this.tooltip&&this.slottedElement&&(this.tooltip.style.left="",this.tooltip.style.top="",cr(this.slottedElement,this.tooltip,{middleware:[(t={crossAxis:!0},void 0===t&&(t={}),{name:"shift",options:t,async fn(o){const{x:e,y:r,placement:a}=o,{mainAxis:i=!0,crossAxis:n=!1,limiter:l={fn:t=>{let{x:o,y:e}=t;return{x:o,y:e}}},...c}=xe(t,o),p={x:e,y:r},f=await Ue(o,c),s=we(Oe(a)),d=ve(s);let h=p[d],y=p[s];if(i){const t="y"===d?"bottom":"right";h=me(h+f["y"===d?"top":"left"],h,h-f[t])}if(n){const t="y"===s?"bottom":"right";y=me(y+f["y"===s?"top":"left"],y,y-f[t])}const g=l.fn({...o,[d]:h,[s]:y});return{...g,data:{x:g.x-e,y:g.y-r}}}}),Ee({allowedPlacements:[this.position]})]}).then((({x:t,y:o})=>{this.tooltip&&(this.tooltip.style.left=`${t}px`,this.tooltip.style.top=`${o}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",(t=>{t.composedPath().includes(this.container)||this.onOut()}),{once:!0})),100))}onHover(){this.manual||this.show()}onOut(){this.manual||(this.revealDebouncer.cancel(),this.hide())}correctOutOfWindowPixels(t,o){return Math.max(t,Math.min(0,-o))}}fr.elementDefinitions={"ft-typography":Po},fr.styles=pe,pr([r.property()],fr.prototype,"text",void 0),pr([r.property({type:Boolean})],fr.prototype,"manual",void 0),pr([r.property({type:Boolean})],fr.prototype,"inline",void 0),pr([r.property({type:Number})],fr.prototype,"delay",void 0),pr([r.property()],fr.prototype,"position",void 0),pr([r.queryAssignedNodes()],fr.prototype,"slotNodes",void 0),pr([r.query(".ft-tooltip--container")],fr.prototype,"container",void 0),pr([r.query(".ft-tooltip")],fr.prototype,"tooltip",void 0),pr([r.query(".ft-tooltip--content")],fr.prototype,"tooltipContent",void 0),pr([r.state()],fr.prototype,"visible",void 0),pr([r.eventOptions({passive:!0})],fr.prototype,"onTouch",null),pr([r.eventOptions({passive:!0})],fr.prototype,"onHover",null),pr([r.eventOptions({passive:!0})],fr.prototype,"onOut",null),o.customElement("ft-tooltip")(fr);var sr=function(t,o,e,r){for(var a,i=arguments.length,n=i<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r,l=t.length-1;l>=0;l--)(a=t[l])&&(n=(i<3?a(n):i>3?a(o,e,n):a(o,e))||n);return i>3&&n&&Object.defineProperty(o,e,n),n};class dr extends CustomEvent{constructor(t){super("index-change",{detail:t})}}class hr extends o.FtLitElement{constructor(){super(...arguments),this.dense=!1,this.contentBefore=!1,this.alignTabs=t.FtTabsAlignment.justify,this.ftTabs=[],this.activeIndex=0,this.updateDebouncer=new o.Debouncer(2),this.onTabUpdated=()=>this.updateDebouncer.run((()=>{this.requestUpdate(),this.dispatchEvent(new o.PostResizeEvent)})),this.resizeObserver=new ResizeObserver((()=>this.placeIndicator()))}render(){var t;const o={"ft-tabs":!0,"ft-tabs--reverse":this.contentBefore,"ft-tabs--dense":this.dense},r=null===(t=this.ftTabs[this.activeIndex])||void 0===t?void 0:t.color;return e.html`
             <div class="${i.classMap(o)}" part="container">
                 <div class="ft-tabs--align-${this.alignTabs}" role="tablist" part="tablist">
                     ${a.repeat(this.ftTabs,((t,o)=>this.addTooltipIfNecessary(t,e.html`