@postnord/web-components/postnord-web-components/p-099bf974.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as e,g as t,f as n,h as r,a as s}from"./p-C247oTEA.js";import{a as o}from"./p-CQaMdITw.js";import{a as i}from"./p-D_UyW-KH.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)}@media (prefers-reduced-motion: reduce){pn-segmented-control{transition-duration:0s;transition-delay:0s}}pn-segmented-control{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)}@media (prefers-reduced-motion: reduce){pn-segmented-control .pn-segmented-control .pn-sc-bg{transition-duration:0s;transition-delay:0s}}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)}@media (prefers-reduced-motion: reduce){pn-segmented-control .pn-sc-arrows>.pn-sc-arrow{transition-duration:0s;transition-delay:0s}}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=class{constructor(t){e(this,t)}mo;segmentContainer;segments=[];activeBg;hoverBg;scrollRegistered=false;get hostElement(){return t(this)}showScrollArrows=false;showLeftArrow=false;showRightArrow=false;name;value;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 r=t?.closest("pn-segment");if(!r)return;const s=r.getBoundingClientRect();const{left:o}=this.segmentContainer.getBoundingClientRect();const{left:i,height:a,width:c}=s;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 r(s,{key:"9b89bf1fa5f6aa9f8c8f6c454a746a9e8565a134"},r("div",{key:"25f7b91df0de018a553d31f17ba5a6edb64be829",class:"pn-segmented-control",ref:e=>this.segmentContainer=e},r("slot",{key:"7a279cce34babc5212e308c732d3f0aad33462fe"}),r("div",{key:"9491ee41db640152a109fa6a83619314a060aaa3",class:"pn-sc-bg","data-active":true,ref:e=>this.activeBg=e}),r("div",{key:"2f84544d72147c7f004e890fd9e08cb25e204c16",class:"pn-sc-bg","data-hover":true,ref:e=>this.hoverBg=e})),r("div",{key:"880804e74824b71eee88e274b8e44537a5e9a6f8",class:this.scrollArrowClasses(),hidden:!this.showScrollArrows},r("button",{key:"adebbaadaeb4c1064ad053e523a4d35f07b6908c","aria-label":"Left",class:"pn-sc-arrow pn-sc-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},r("pn-icon",{key:"652cd5b07b1657d32c9a7c2d75d77d36e995f1ca",icon:o})),r("button",{key:"e4235b21c3cd40a276dcd0feea50d1ac322ea36d","aria-label":"Right",class:"pn-sc-arrow pn-sc-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},r("pn-icon",{key:"5c3b343f962b22f9e9fc3df1eaf98785d8197415",icon:i}))))}static get watchers(){return{value:["valueHandler"]}}};c.style=a;export{c as pn_segmented_control};
//# sourceMappingURL=p-099bf974.entry.js.map