@postnord/web-components/components/pn-tablist.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as t,proxyCustomElement as i,HTMLElement as a,createEvent as e,forceUpdate as s,h as n,Host as l}from"@stencil/core/internal/client";import{a as r,c as o}from"./chevron_right.js";import{k as c,e as p}from"./helpers.js";import{d as b}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as h}from"./pn-spinner2.js";var m={LEFT:{sv:"Bläddra åt vänster",en:"Scroll to the left",da:"Rul til venstre",fi:"Vieritä vasemmalle",no:"Rull til venstre"},RIGHT:{sv:"Bläddra åt höger",en:"Scroll to the right",da:"Rul til højre",fi:"Vieritä oikealle",no:"Rull til høyre"}};const u=i(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabchange=e(this,"tabchange",7)}mo;isMenu=!1;isTabHovered=!1;tabListEl;lineActive;lineHovered;tabElement;get hostElement(){return this}showScrollArrows=!1;arrowLeft=!1;arrowRight=!1;label;value;small;stackedicons=!1;language=null;tabchange;setValue(){Array.from(this.hostElement.querySelectorAll(""+t("pn-tab"))).forEach((t=>{t.activeTab=this.value}))}scrollHandler(){this.showScrollArrows?this.tabListEl.addEventListener("scroll",this.scrollIndicators.bind(this)):this.tabListEl.removeEventListener("scroll",this.scrollIndicators)}setActiveTabHandler({detail:t}){this.tabElement=t.el,requestAnimationFrame((()=>this.activateTab(t.el))),this.value!==t.val&&(this.value=t.val,this.tabchange.emit(this.value),this.tabElement.querySelector(".pn-tab").focus())}rerender(){requestAnimationFrame((()=>{this.scrollIndicators(),this.isTabHovered=!1}))}handleEnter(t){this.isTabHovered=!0,this.styleLines(t.target)}handleLeave(){this.isTabHovered=!1,setTimeout((()=>{this.isTabHovered||this.lineHovered.style.setProperty("--pn-hover-opacity","0")}),500)}connectedCallback(){this.mo=new MutationObserver((()=>{s(this.hostElement),this.setValue(),this.rerender()})),this.mo.observe(this.hostElement,{subtree:!0,childList:!0})}disconnectedCallback(){this.mo?.disconnect()}async componentWillLoad(){this.isMenu="menu"===this.hostElement.slot,null===this.language&&await c(this.hostElement)}componentDidRender(){this.setValue(),this.rerender()}getRect(t){return t.getBoundingClientRect()}activateTab(t){this.styleLines(t,!0),this.styleLines(t,!1)}styleLines(t,i=!1){const a=this.getRect(this.tabListEl),e=this.tabListEl.scrollLeft,s=this.getRect(t),n=s.left+e-a.left,l=i?"active":"hover",r=i?"lineActive":"lineHovered";this[r].style.setProperty(`--pn-${l}-width`,s.width+"px"),this[r].style.setProperty(`--pn-${l}-offset`,n+"px"),this[r].style.setProperty(`--pn-${l}-opacity`,"1")}scrollIndicators(){const{scrollWidth:t,scrollLeft:i}=this.tabListEl,{clientWidth:a}=this.hostElement;this.showScrollArrows=t>a,this.arrowLeft=this.showScrollArrows&&i>0,this.arrowRight=this.showScrollArrows&&a+16+i<t}scroll({right:t=!1}={}){const i=this.tabListEl,{scrollLeft:a,clientWidth:e}=i;let s=a;const n=e-64;t?s+=n:s-=n,i.scrollTo({left:s,behavior:"smooth"})}translate(t){return m?.[t]?.[this.language||p]}render(){return n(l,{key:"41730f7c2c9bf8dcd0094e3485daaef03d32077d"},n("nav",{key:"671968d8fc09799313c5cc84182c0f574c4c32c2",class:"pn-tablist",role:this.isMenu?null:"tablist","aria-label":this.label,"data-stacked":this.stackedicons,"data-small":!this.isMenu&&this.small,"data-large":this.isMenu,"data-scroll":this.showScrollArrows,ref:t=>this.tabListEl=t},n("slot",{key:"9a29c7b0b2be65f13f0c54782f95381b44184928"}),n("div",{key:"5c7d7811e65c236592cbc86ccb36a1f4b9c2d83f",class:"pn-tablist-line"},n("div",{key:"fa070fd0ad1bd2baaaaedcd83d3a184f9acd8775",ref:t=>this.lineActive=t,class:"pn-tablist-line-item pn-tablist-line-active"}),n("div",{key:"f1d81e3ba4363412d5f35cae105766fbb77ba31e",ref:t=>this.lineHovered=t,class:"pn-tablist-line-item pn-tablist-line-hovered"}))),n("div",{key:"14d644cb2ae344966b8056422ce52966fb06058b",class:"pn-tablist-scroll"},n("pn-button",{key:"f8c8f0f36459b6415208679196ed15fb9cd482d2",class:"pn-tablist-arrow","data-show":this.arrowLeft,onClick:()=>this.scroll(),noTab:!0,appearance:"light",variant:"outlined",icon:r,iconOnly:!0,arialabel:this.translate("LEFT"),small:!0}),n("pn-button",{key:"588b9a9619087bd05a9d359b139240d054431848",class:"pn-tablist-arrow","data-show":this.arrowRight,onClick:()=>this.scroll({right:!0}),noTab:!0,appearance:"light",variant:"outlined",icon:o,iconOnly:!0,arialabel:this.translate("RIGHT"),small:!0})))}static get watchers(){return{value:[{setValue:0}],showScrollArrows:[{scrollHandler:0}]}}static get style(){return`${t("pn-tablist")}{width:100%;min-width:0;position:relative;border-bottom:0.0625em solid #d3cecb;display:block}${t("pn-tablist")} .pn-tablist,${t("pn-tablist")} ol,${t("pn-tablist")} ul{display:flex;width:100%;flex-direction:row;gap:1em;position:relative;list-style:none;padding:0;margin:0}${t("pn-tablist")} .pn-tablist[data-stacked] .pn-tab,${t("pn-tablist")} ol[data-stacked] .pn-tab,${t("pn-tablist")} ul[data-stacked] .pn-tab{margin:0.5em 0.25em 0.75em;gap:0.25em;flex-direction:column}${t("pn-tablist")} .pn-tablist[data-small] .pn-tab,${t("pn-tablist")} ol[data-small] .pn-tab,${t("pn-tablist")} ul[data-small] .pn-tab{margin:0.25em 0.25em 0.75em}${t("pn-tablist")} .pn-tablist[data-small] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ol[data-small] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ul[data-small] .pn-tab>*:not(${t("pn-icon")}){font-size:0.875em}${t("pn-tablist")} .pn-tablist[data-large] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ol[data-large] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ul[data-large] .pn-tab>*:not(${t("pn-icon")}){font-size:1.25em}${t("pn-tablist")} .pn-tablist[data-scroll],${t("pn-tablist")} ol[data-scroll],${t("pn-tablist")} ul[data-scroll]{overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}${t("pn-tablist")} .pn-tablist::-webkit-scrollbar,${t("pn-tablist")} ol::-webkit-scrollbar,${t("pn-tablist")} ul::-webkit-scrollbar{display:none}${t("pn-tablist")} .pn-tablist-line{height:0.25em;position:absolute;bottom:0}${t("pn-tablist")} .pn-tablist-line-item{position:absolute;width:100%;height:inherit;border-radius:0.25em 0.25em 0 0;transform-origin:left center;opacity:0;transition-property:transform, opacity, width;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tablist")} .pn-tablist-line-item{transition-duration:0s;transition-delay:0s}}${t("pn-tablist")} .pn-tablist-line-active{z-index:1;background-color:#005d92;width:var(--pn-active-width);transform:translateX(var(--pn-active-offset));opacity:var(--pn-active-opacity)}${t("pn-tablist")} .pn-tablist-line-hovered{background-color:#00a0d6;width:var(--pn-hover-width);transform:translateX(var(--pn-hover-offset));opacity:var(--pn-hover-opacity)}${t("pn-tablist")} .pn-tablist-scroll{position:absolute;top:50%;left:0;right:0;pointer-events:none;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;z-index:1;height:100%}${t("pn-tablist")} .pn-tablist-arrow{pointer-events:all;transform:scaleY(0);opacity:0;visibility:hidden;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tablist")} .pn-tablist-arrow{transition-duration:0s;transition-delay:0s}}${t("pn-tablist")} .pn-tablist-arrow[data-show]{opacity:1;visibility:visible;transform:scaleY(1)}`}},[772,"pn-tablist",{label:[1],value:[1537],small:[4],stackedicons:[4],language:[1],showScrollArrows:[32],arrowLeft:[32],arrowRight:[32]},[[0,"setActiveTab","setActiveTabHandler"],[9,"resize","rerender"],[0,"tabEnter","handleEnter"],[0,"tabLeave","handleLeave"]],{value:[{setValue:0}],showScrollArrows:[{scrollHandler:0}]}]),f=u,v=function(){"undefined"!=typeof customElements&&["pn-tablist","pn-button","pn-icon","pn-spinner"].forEach((i=>{switch(i){case"pn-tablist":customElements.get(t(t(i)))||customElements.define(t(t(i)),u);break;case"pn-button":customElements.get(t(t(i)))||b();break;case"pn-icon":customElements.get(t(t(i)))||d();break;case"pn-spinner":customElements.get(t(t(i)))||h()}}))};export{f as PnTablist,v as defineCustomElement}