@postnord/web-components/postnord-web-components/p-c0d19737.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,c as n,g as e,h as i,a}from"./p-43660913.js";import{o}from"./p-f64d17a6.js";const s="pn-tab{position:relative;overflow:hidden;flex-shrink:0;scroll-snap-align:center;display:inline-block;border-radius:0.5em}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;transition-property:color, outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}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}}@media (prefers-reduced-motion: reduce){pn-tab .pn-tab{transition-duration:0s;transition-delay:0s}}pn-tab .pn-tab>span{line-height:1.5em}pn-tab .pn-tab>pn-icon>.pn-icon-svg path,pn-tab .pn-tab>pn-icon>.pn-icon-svg polygon{fill:#2d2013}pn-tab .pn-tab:focus-visible{overflow:hidden;outline-color:#005d92;background-color:#ffffff}pn-tab .pn-tab[aria-selected=true],pn-tab .pn-tab[aria-current=page]{color:#005d92}pn-tab .pn-tab[aria-selected=true]>pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-selected=true]>pn-icon>.pn-icon-svg polygon,pn-tab .pn-tab[aria-current=page]>pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-current=page]>pn-icon>.pn-icon-svg polygon{fill:#005d92}pn-tab .pn-tab[aria-selected=true]:focus,pn-tab .pn-tab[aria-current=page]:focus{color:#0d234b}pn-tab .pn-tab[aria-selected=true]:focus pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-selected=true]:focus pn-icon>.pn-icon-svg polygon,pn-tab .pn-tab[aria-current=page]:focus pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-current=page]:focus pn-icon>.pn-icon-svg polygon{fill:#0d234b}";const r=s;const c=class{constructor(e){t(this,e);this.setActiveTab=n(this,"setActiveTab",7);this.tabEnter=n(this,"tabEnter",7);this.tabLeave=n(this,"tabLeave",7);this.label=undefined;this.value=undefined;this.href=undefined;this.icon=undefined;this.ariacontrols=undefined;this.tabid=undefined;this.activeTab=undefined}tag="button";get hostElement(){return e(this)}setActiveTab;setActiveTabHandler({click:t=false,element:n}={}){if(t||this.isActive()){const t=n?.value||this.value;const e=n?.value&&n||this.hostElement;this.setActiveTab.emit({val:t,el:e})}}tabEnter;triggerEnter(t){this.tabEnter.emit(t)}tabLeave;triggerLeave(t){this.tabLeave.emit(t)}componentWillLoad(){this.tabTag()}componentDidUpdate(){this.setActiveTabHandler()}componentDidLoad(){this.setActiveTabHandler()}arrowKeyNav(t){if(!/^(ArrowRight|ArrowLeft|Home|End)$/.test(t.key))return;t.preventDefault();const n=t.target.closest("pn-tablist");const e=Array.from(n.querySelectorAll("pn-tab"));const i=e[0];const a=e[e.length-1];const o=this.hostElement.nextElementSibling;const s=this.hostElement.previousElementSibling;if(t.key==="Home")this.setActiveTabHandler({element:i});if(t.key==="End")this.setActiveTabHandler({element:a});if(t.key==="ArrowRight"){this.setActiveTabHandler({element:o?.value?o:i})}if(t.key==="ArrowLeft"){this.setActiveTabHandler({element:s?.value?s:a})}}isActive(){return this.activeTab===this.value}tabTag(){const t=this.hostElement.closest("pn-tablist");this.tag=t.slot==="menu"?"a":"button"}renderProperties(){return this.tag==="a"?{href:this.href,"aria-current":this.isActive()?"page":"false"}:{tabindex:this.isActive()?0:-1,type:"button",role:"tab","aria-selected":this.isActive().toString(),"aria-controls":this.ariacontrols}}handleClick(t){this.setActiveTabHandler({click:true});o(t,this.hostElement,".pn-tab")}render(){const t=this.tag;return i(a,{key:"ec9df780cc276853bfc6bcbb9af1f6d4f6e8d83e"},i(t,{key:"aa1b089953f69110583eef6c689973bd118d2fd6",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&&i("pn-icon",{key:"583bf623f788662aaa3f612552b52ecfc0edae51",icon:this.icon}),i("slot",{key:"a5f216eb6ac2ee8fcb7f90daec3f69cc597f9d7e"}),i("span",{key:"26c116fe67ce645c31eed9e37e5529da6fbc97ea"},this.label)))}};c.style=r;export{c as pn_tab};
//# sourceMappingURL=p-c0d19737.entry.js.map