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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as t,proxyCustomElement as e,HTMLElement as n,createEvent as i,forceUpdate as a,h as o,Host as r}from"@stencil/core/internal/client";import{o as s}from"./helpers.js";import{d as c}from"./pn-icon2.js";const l=e(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.setActiveTab=i(this,"setActiveTab",7),this.tabEnter=i(this,"tabEnter",7),this.tabLeave=i(this,"tabLeave",7)}mo;tag="button";get hostElement(){return this}label;value;href;icon;ariacontrols;tabid;activeTab;setActiveTab;setActiveTabHandler({click:t=!1,element:e}={}){(t||this.isActive())&&this.setActiveTab.emit({val:e?.value||this.value,el:e?.value&&e||this.hostElement})}tabEnter;triggerEnter(t){this.tabEnter.emit(t)}tabLeave;triggerLeave(t){this.tabLeave.emit(t)}connectedCallback(){this.mo=new MutationObserver((()=>a(this.hostElement))),this.mo.observe(this.hostElement,{subtree:!0,childList:!0})}disconnectedCallback(){this.mo?.disconnect()}componentWillLoad(){this.tabTag()}componentDidUpdate(){this.setActiveTabHandler()}componentDidLoad(){this.setActiveTabHandler()}arrowKeyNav(e){if(!/^(ArrowRight|ArrowLeft|Home|End)$/.test(e.key))return;e.preventDefault();const n=e.target.closest(""+t("pn-tablist")),i=Array.from(n.querySelectorAll(""+t("pn-tab"))),a=i[0],o=i[i.length-1],r=this.hostElement.nextElementSibling,s=this.hostElement.previousElementSibling;"Home"===e.key&&this.setActiveTabHandler({element:a}),"End"===e.key&&this.setActiveTabHandler({element:o}),"ArrowRight"===e.key&&this.setActiveTabHandler({element:r?.value?r:a}),"ArrowLeft"===e.key&&this.setActiveTabHandler({element:s?.value?s:o})}isActive(){return this.activeTab===this.value}tabTag(){const e=this.hostElement.closest(""+t("pn-tablist"));this.tag="menu"===e.slot?"a":"button"}renderProperties(){return"a"===this.tag?{href:this.href,"aria-current":this.isActive()?"page":"false"}:{tabindex:this.isActive()?0:-1,type:"button",role:"tab","aria-selected":""+this.isActive(),"aria-controls":this.ariacontrols}}iconColor(){return this.isActive()?"blue700":"gray900"}handleClick(t){this.setActiveTabHandler({click:!0}),s(t,this.hostElement,".pn-tab")}render(){return o(r,{key:"a3d1810848574a33819d13fa281d85eb08f1ce80"},o(this.tag,{key:"08548598375643778185f9ea3900b6b16e079c23",id:this.tabid,class:"pn-tab",...this.renderProperties(),onClick:t=>this.handleClick(t),onMouseEnter:t=>this.triggerEnter(t),onFocus:t=>this.triggerEnter(t),onMouseLeave:t=>this.triggerLeave(t),onBlur:t=>this.triggerLeave(t),onKeyDown:t=>this.arrowKeyNav(t)},!!this.icon&&o("pn-icon",{key:"ed1076eaf2ea4fc6f56ae86e2947b656808d1c02",icon:this.icon,color:this.iconColor()}),o("slot",{key:"48a7a902e8e2712b0595ac88f3b906149703f92c"}),o("span",{key:"cde1646f13a5fe4f553dcfa919268f62286d3f5c",class:"pn-tab-label"},this.label)))}static get style(){return`${t("pn-tab")}{position:relative;overflow:hidden;flex-shrink:0;scroll-snap-align:center;display:inline-block;border-radius:0.5em}${t("pn-tab")} .pn-tab{position:relative;cursor:pointer;margin:1em 0.25em;padding:0 0.25em;border:none;border-radius:0.5em;color:#2d2013;background-color:transparent;font-family:inherit;font-size:1em;font-weight:500;text-decoration:none;display:flex;gap:0.5em;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}${t("pn-tab")} .pn-tab .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${t("pn-tab")} .pn-tab{transition-property:color, outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tab")} .pn-tab{transition-duration:0s;transition-delay:0s}}${t("pn-tab")} .pn-tab{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-tab")} .pn-tab-label{line-height:1.5em}${t("pn-tab")} .pn-tab:focus-visible{overflow:hidden;outline-color:#005d92;background-color:#ffffff}${t("pn-tab")} .pn-tab[aria-selected=true],${t("pn-tab")} .pn-tab[aria-current=page]{color:#005d92}${t("pn-tab")} .pn-tab[aria-selected=true]:focus,${t("pn-tab")} .pn-tab[aria-current=page]:focus{color:#0d234b}${t("pn-tab")} .pn-tab[aria-selected=true]:focus ${t("pn-icon")}>.pn-icon-svg path,${t("pn-tab")} .pn-tab[aria-selected=true]:focus ${t("pn-icon")}>.pn-icon-svg polygon,${t("pn-tab")} .pn-tab[aria-current=page]:focus ${t("pn-icon")}>.pn-icon-svg path,${t("pn-tab")} .pn-tab[aria-current=page]:focus ${t("pn-icon")}>.pn-icon-svg polygon{fill:#0d234b}`}},[772,"pn-tab",{label:[1],value:[1],href:[1],icon:[1],ariacontrols:[1],tabid:[1],activeTab:[1,"active-tab"]}]),p=l,b=function(){"undefined"!=typeof customElements&&["pn-tab","pn-icon"].forEach((e=>{switch(e){case"pn-tab":customElements.get(t(t(e)))||customElements.define(t(t(e)),l);break;case"pn-icon":customElements.get(t(t(e)))||c()}}))};export{p as PnTab,b as defineCustomElement}