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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as e,g as t,f as n,h as s,a as r}from"./p-43660913.js";import{a as o}from"./p-2e6481e5.js";import{a as i}from"./p-d82ef4a1.js";const a="pn-segmented-control{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:3em;transform:translateZ(0);transition-property:outline-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-segmented-control:focus-within,pn-segmented-control:active{outline-color:#005d92}pn-segmented-control .pn-segmented-control{display:flex;align-items:center;border-radius:3em;min-height:3em;padding:0.25em;background:#f3f2f2;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}pn-segmented-control .pn-segmented-control:hover .pn-sc-bg[data-hover]{opacity:1}pn-segmented-control .pn-segmented-control::-webkit-scrollbar{display:none}pn-segmented-control .pn-segmented-control .pn-sc-bg{position:absolute;top:50%;transform:translateY(-50%);will-change:transform;left:0;border-radius:inherit;transition-property:width, transform, background-color, opacity, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-segmented-control .pn-segmented-control .pn-sc-bg[data-active]{box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);border:0.0625em solid #005d92;background-color:#ffffff;z-index:1}pn-segmented-control .pn-segmented-control .pn-sc-bg[data-hover]{background-color:#e0f8ff;opacity:0;border:0.25em solid transparent;z-index:0}pn-segmented-control .pn-segmented-control .pn-sc-bg[data-hover][data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}pn-segmented-control .pn-segmented-control .pn-sc-bg[data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}pn-segmented-control .pn-sc-arrows{position:absolute;top:50%;transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none}pn-segmented-control .pn-sc-arrows svg{width:1.5em}pn-segmented-control .pn-sc-arrows svg.pn-icon-svg path{fill:#005d92}pn-segmented-control .pn-sc-arrows>.pn-sc-arrow{cursor:pointer;pointer-events:all;width:2.5em;height:2.5em;background:#ffffff;border:none;outline:none;display:flex;align-items:center;justify-content:center;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;transition-property:transform, opacity, background-color, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-segmented-control .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-left{transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}pn-segmented-control .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-right{transform:translateX(100%);border-radius:50% 0 0 50%;box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}pn-segmented-control .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left,pn-segmented-control .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right{opacity:1;transform:translateX(0)}";const c=a;const d=class{constructor(t){e(this,t);this.showScrollArrows=false;this.showLeftArrow=false;this.showRightArrow=false;this.name=undefined;this.value=undefined}mo;segmentContainer;segments=[];activeBg;hoverBg;scrollRegistered=false;get hostElement(){return t(this)}valueHandler(){this.setActiveSegment()}changeHandler(e){const t=e.target;this.value=t.value;this.setActiveSegment()}handleResize(){this.rerender()}handleHover(e){const{target:t}=e.detail;this.calcHighlight(t,true)}componentDidLoad(){if(this.mo)this.mo.disconnect();this.mo=new MutationObserver((()=>{n(this.hostElement);this.setSegments()}));this.mo.observe(this.hostElement,{childList:true});this.setSegments()}setSegments(){this.segments=Array.from(this.hostElement.querySelectorAll("pn-segment"));this.setActiveSegment()}setActiveSegment(){this.segments.forEach((e=>{if(this.value===e.value)e.setAttribute("selected","true");else e.removeAttribute("selected")}));this.rerender()}rerender(){requestAnimationFrame((()=>{this.calcHighlight();this.scrollArrowRender()}))}calcHighlight(e,t){const n=t?this.hoverBg:this.activeBg;requestAnimationFrame((()=>{const t=e||this.segments.find((({value:e})=>e===this.value));const s=t?.closest("pn-segment");if(!s)return;const r=s.getBoundingClientRect();const{left:o}=this.segmentContainer.getBoundingClientRect();const{left:i,height:a,width:c}=r;const d=i-o+this.segmentContainer.scrollLeft;n.style.setProperty("transform",`translate(${d}px, -50%`);n.style.setProperty("width",`${c}px`);n.style.setProperty("height",`${a}px`);t.disabled?n.dataset.disabled="":delete n.dataset.disabled}))}scrollArrowRender(){if(this.segmentContainer.scrollWidth>this.segmentContainer.clientWidth){this.showScrollArrows=true;if(!this.scrollRegistered){this.segmentContainer.addEventListener("scroll",this.scrollArrowRender.bind(this));this.scrollRegistered=true}const e=Math.round(this.segmentContainer.scrollWidth-this.segmentContainer.scrollLeft);const t=e-this.segmentContainer.clientWidth;const n=this.segmentContainer.scrollLeft;this.showLeftArrow=n>0;this.showRightArrow=t>0;return}this.showLeftArrow=false;this.showRightArrow=false;this.showScrollArrows=false}scroll(e){let t=this.segmentContainer.scrollLeft+e;this.segmentContainer.scroll({left:t,behavior:"smooth"})}scrollArrowClasses(){const e=["pn-sc-arrows"];if(this.showLeftArrow)e.push("pn-sc-left-visible");if(this.showRightArrow)e.push("pn-sc-right-visible");return e.join(" ")}render(){return s(r,{key:"e9ae7b8a52027c3a16b75e57097cf8c9de5f6ac2"},s("div",{key:"f29c57449726a72c699bd76652742f875c518c9f",class:"pn-segmented-control",ref:e=>this.segmentContainer=e},s("slot",{key:"253edcfe5d9171dcd5ea833b254f7ac5deba7f31"}),s("div",{key:"9b6a8a0194ffff718ec96bf5c490a4dc8a78cb06",class:"pn-sc-bg","data-active":true,ref:e=>this.activeBg=e}),s("div",{key:"23c5e00d3b05795f52dc6ae92b6feade51592d13",class:"pn-sc-bg","data-hover":true,ref:e=>this.hoverBg=e})),s("div",{key:"e8b85e3c05f9afa18937c7356f1db5110155c9de",class:this.scrollArrowClasses(),hidden:!this.showScrollArrows},s("button",{key:"84ebd54950d98d5ceca770a0095e95fe8c2597d0","aria-label":"Left",class:"pn-sc-arrow pn-sc-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},s("pn-icon",{key:"100859353d859924ab2de1028deb12deab09a8a8",icon:o})),s("button",{key:"9a739b38b210fb26b12b68c139c373eee439139c","aria-label":"Right",class:"pn-sc-arrow pn-sc-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},s("pn-icon",{key:"861a4d87897175100157a3af3ed7d5699206c153",icon:i}))))}static get watchers(){return{value:["valueHandler"]}}};d.style=c;export{d as pn_segmented_control};
//# sourceMappingURL=p-e8828a8f.entry.js.map