@postnord/web-components/postnord-web-components/p-48f7e582.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{t as e,r as t,g as n,f as r,h as o,a as s}from"./p-XKg-ydzH.js";import{a}from"./p-CQaMdITw.js";import{a as i}from"./p-D_UyW-KH.js";const c=class{constructor(e){t(this,e)}mo;segmentContainer;segments=[];activeBg;hoverBg;scrollRegistered=!1;get hostElement(){return n(this)}showScrollArrows=!1;showLeftArrow=!1;showRightArrow=!1;name;value;valueHandler(){this.setActiveSegment()}changeHandler(e){this.value=e.target.value,this.setActiveSegment()}handleResize(){this.rerender()}handleHover(e){const{target:t}=e.detail;this.calcHighlight(t,!0)}connectedCallback(){this.mo=new MutationObserver((()=>{r(this.hostElement),this.setSegments()})),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}componentDidLoad(){this.setSegments()}setSegments(){const t=e("pn-segment"),n=this.hostElement.querySelectorAll(t);this.segments=Array.from(n),this.setActiveSegment()}setActiveSegment(){this.segments.forEach((e=>{this.value===e.value?e.setAttribute("selected","true"):e.removeAttribute("selected")})),this.rerender()}rerender(){requestAnimationFrame((()=>{this.calcHighlight(),this.scrollArrowRender()}))}calcHighlight(t,n){const r=n?this.hoverBg:this.activeBg;requestAnimationFrame((()=>{const n=t||this.segments.find((({value:e})=>e===this.value)),o=e("pn-segment"),s=n?.closest(o);if(!s)return;const a=s.getBoundingClientRect(),{left:i}=this.segmentContainer.getBoundingClientRect(),{left:c,height:d,width:l}=a;r.style.setProperty("transform",`translate(${c-i+this.segmentContainer.scrollLeft}px, -50%`),r.style.setProperty("width",`${l}px`),r.style.setProperty("height",`${d}px`),n.disabled?r.dataset.disabled="":delete r.dataset.disabled}))}scrollArrowRender(){if(this.segmentContainer.scrollWidth>this.segmentContainer.clientWidth){this.showScrollArrows=!0,this.scrollRegistered||(this.segmentContainer.addEventListener("scroll",this.scrollArrowRender.bind(this)),this.scrollRegistered=!0);const e=Math.round(this.segmentContainer.scrollWidth-this.segmentContainer.scrollLeft)-this.segmentContainer.clientWidth;this.showLeftArrow=this.segmentContainer.scrollLeft>0,this.showRightArrow=e>0}else this.showLeftArrow=!1,this.showRightArrow=!1,this.showScrollArrows=!1}scroll(e){this.segmentContainer.scroll({left:this.segmentContainer.scrollLeft+e,behavior:"smooth"})}render(){return o(s,{key:"314c016bb1daea417c741babc236f8de14b9ab21"},o("div",{key:"10af3eb77723a2f99d6e665e6340caf9aaf03d27",class:"pn-segmented-control",ref:e=>this.segmentContainer=e},o("slot",{key:"516890ccb71a58628d1f527272424b295c8959ab"}),o("div",{key:"f0f162d91a3c14a93b60195492978f03b41a0ecf",class:"pn-sc-bg","data-active":!0,ref:e=>this.activeBg=e}),o("div",{key:"9ca1016209402986a1702db3f50f9d52d913d249",class:"pn-sc-bg","data-hover":!0,ref:e=>this.hoverBg=e})),o("div",{key:"61d56ebba096df1a0cfab0aea8aa52059c62d13e",class:"pn-sc-arrows","data-left":this.showLeftArrow,"data-right":this.showRightArrow,hidden:!this.showScrollArrows},o("button",{key:"1da8665af3d990175b92e50cf83e01adca082909","aria-label":"Left",class:"pn-sc-arrow pn-sc-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},o("pn-icon",{key:"3e78658670b082a938a5f976ea34b51449d669af",icon:a})),o("button",{key:"03fad3f5c772b282850098e31d8ea717f5efb054","aria-label":"Right",class:"pn-sc-arrow pn-sc-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},o("pn-icon",{key:"659dfab232a3256a9819cdf4ec34445f9bbfa875",icon:i}))))}static get watchers(){return{value:[{valueHandler:0}]}}};c.style=`${e("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){${e("pn-segmented-control")}{transition-duration:0s;transition-delay:0s}}${e("pn-segmented-control")}{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-segmented-control")}:focus-within,${e("pn-segmented-control")}:active{outline-color:#005d92}${e("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}${e("pn-segmented-control")} .pn-segmented-control:hover .pn-sc-bg[data-hover]{opacity:1}${e("pn-segmented-control")} .pn-segmented-control::-webkit-scrollbar{display:none}${e("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){${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{transition-duration:0s;transition-delay:0s}}${e("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}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover]{background-color:#e0f8ff;opacity:0;border:0.25em solid transparent;z-index:0}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover][data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${e("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}${e("pn-segmented-control")} .pn-sc-arrows svg{width:1.5em}${e("pn-segmented-control")} .pn-sc-arrows svg.pn-icon-svg path{fill:#005d92}${e("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){${e("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{transition-duration:0s;transition-delay:0s}}${e("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)}${e("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)}${e("pn-segmented-control")} .pn-sc-arrows[data-left] .pn-sc-arrow-left,${e("pn-segmented-control")} .pn-sc-arrows[data-right] .pn-sc-arrow-right{opacity:1;transform:translateX(0)}`;export{c as pn_segmented_control}