@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)}componentDidLoad(){this.mo&&this.mo.disconnect(),this.mo=new MutationObserver((()=>{r(this.hostElement),this.setSegments()})),this.mo.observe(this.hostElement,{childList:!0}),this.setSegments()}setSegments(){this.segments=Array.from(this.hostElement.querySelectorAll(""+e("pn-segment"))),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=n?.closest(""+e("pn-segment"));if(!o)return;const s=o.getBoundingClientRect(),{left:i}=this.segmentContainer.getBoundingClientRect(),{left:a,height:c,width:d}=s;r.style.setProperty("transform",`translate(${a-i+this.segmentContainer.scrollLeft}px, -50%`),r.style.setProperty("width",d+"px"),r.style.setProperty("height",c+"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;return this.showLeftArrow=this.segmentContainer.scrollLeft>0,void(this.showRightArrow=e>0)}this.showLeftArrow=!1,this.showRightArrow=!1,this.showScrollArrows=!1}scroll(e){this.segmentContainer.scroll({left:this.segmentContainer.scrollLeft+e,behavior:"smooth"})}scrollArrowClasses(){const e=["pn-sc-arrows"];return this.showLeftArrow&&e.push("pn-sc-left-visible"),this.showRightArrow&&e.push("pn-sc-right-visible"),e.join(" ")}render(){return o(s,{key:"4ff48c9a0556397894d55f7d3dc0a266349ef8fc"},o("div",{key:"82ef8456eda4724b55705f9a662577eb172df89d",class:"pn-segmented-control",ref:e=>this.segmentContainer=e},o("slot",{key:"9b2949cf6e7976795543f6f8a67c126bee02e59d"}),o("div",{key:"42ab10791de502f48aac3a16766425b435c1c52e",class:"pn-sc-bg","data-active":!0,ref:e=>this.activeBg=e}),o("div",{key:"24060bf183aabe485b7ff66bbad9b44a7704df12",class:"pn-sc-bg","data-hover":!0,ref:e=>this.hoverBg=e})),o("div",{key:"31790d3f9fccd0c4242b5584ba2ff6ee32df4297",class:this.scrollArrowClasses(),hidden:!this.showScrollArrows},o("button",{key:"8ffa7498550bc0f052b77f5297b349b84efbccb8","aria-label":"Left",class:"pn-sc-arrow pn-sc-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},o("pn-icon",{key:"89d4ee843ade39e7264e08c31ad83c2dd32f7931",icon:i})),o("button",{key:"8f1707b0e2debb84451210d03187b51eba3f2897","aria-label":"Right",class:"pn-sc-arrow pn-sc-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},o("pn-icon",{key:"4fa0fcd57eb268e3c9cd9e42f5d4e84b433fafee",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.pn-sc-left-visible .pn-sc-arrow-left,${e("pn-segmented-control")} .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right{opacity:1;transform:translateX(0)}`}},[772,"pn-segmented-control",{name:[1],value:[1025],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}