@postnord/web-components/components/pn-segmented-control.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as t,HTMLElement as n,forceUpdate as r,h as o,Host as s}from"@stencil/core/internal/client";import{a as i}from"./arrow_left.js";import{a}from"./arrow_right.js";import{d as c}from"./pn-icon2.js";const d=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost()}mo;segmentContainer;segments=[];activeBg;hoverBg;scrollRegistered=!1;get hostElement(){return 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 i=s.getBoundingClientRect(),{left:a}=this.segmentContainer.getBoundingClientRect(),{left:c,height:d,width:l}=i;r.style.setProperty("transform",`translate(${c-a+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:"e50018a767b5280ce0144544f3fb213b8f025944"},o("div",{key:"8f9f4beedc7b07d2431fde84456a96d501bdbf15",class:"pn-segmented-control",ref:e=>this.segmentContainer=e},o("slot",{key:"1caffca6e2cd27adcb2c5bfa5b45f52043c85829"}),o("div",{key:"3ef184c6e26f194aa3b5e3ef284313f73aa03a6e",class:"pn-sc-bg","data-active":!0,ref:e=>this.activeBg=e}),o("div",{key:"90c56a3f631557e062f70b4ef98231eafc1f46d7",class:"pn-sc-bg","data-hover":!0,ref:e=>this.hoverBg=e})),o("div",{key:"371d10511a314e69613a195858dba3073f7ca920",class:"pn-sc-arrows","data-left":this.showLeftArrow,"data-right":this.showRightArrow,hidden:!this.showScrollArrows},o("button",{key:"e698d859b989e8fde8864185d3fdce81584280da","aria-label":"Left",class:"pn-sc-arrow pn-sc-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},o("pn-icon",{key:"e82f3b0257bd48dc281a6c113cecbd0cb551fd53",icon:i})),o("button",{key:"8eba509c3c48304c372d543e51edecaaf41cf564","aria-label":"Right",class:"pn-sc-arrow pn-sc-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},o("pn-icon",{key:"0ed1d7cd2b88a619f21e2ee8075c864f9bdcf561",icon:a}))))}static get watchers(){return{value:[{valueHandler:0}]}}static get style(){return`${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)}`}},[772,"pn-segmented-control",{name:[1],value:[1537],showScrollArrows:[32],showLeftArrow:[32],showRightArrow:[32]},[[0,"change","changeHandler"],[9,"resize","handleResize"],[0,"segmentHover","handleHover"]],{value:[{valueHandler:0}]}]),l=d,p=function(){"undefined"!=typeof customElements&&["pn-segmented-control","pn-icon"].forEach((t=>{switch(t){case"pn-segmented-control":customElements.get(e(e(t)))||customElements.define(e(e(t)),d);break;case"pn-icon":customElements.get(e(e(t)))||c()}}))};export{l as PnSegmentedControl,p as defineCustomElement}