@postnord/web-components/components/pn-segment.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as t,HTMLElement as n,createEvent as s,h as i,Host as a}from"@stencil/core/internal/client";import{u as l}from"./helpers.js";import{d as o}from"./pn-icon2.js";const r=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.segmentHover=s(this,"segmentHover",7)}id="pn-segment-"+l();get hostElement(){return this}label;value;name;disabled=!1;selected=!1;icon;pnId;segmentid;segmentHover;handleHover(e){this.segmentHover.emit(e)}getId(){return this.pnId||this.segmentid||this.id}render(){return i(a,{key:"035a10616c69c6c25f0edcff2a31532138684e99",onMouseEnter:e=>this.handleHover(e)},i("input",{key:"d256c8e01319f349339beafe2257ff2b2ebfbf08",class:"pn-segment",id:this.getId(),name:this.name,checked:this.selected,type:"radio",value:this.value,disabled:this.disabled}),i("label",{key:"1bd57da75f8c9de454777d4bdcc22f23703c9d7e",htmlFor:this.getId(),class:"pn-segment-label"},this.icon&&i("pn-icon",{key:"f5c399f939fcad384b18c1de782fa542f3cf0ee9",icon:this.icon,color:"blue700"}),i("span",{key:"e0484e6a5357c24a2fa61bdb63245703a8db9cda",class:"pn-segment-text"},this.label,i("slot",{key:"1c2e2d941fefd272ea58fdcd0b98c0909eccfd5f"}))))}static get style(){return`${e("pn-segment")}{position:relative;color:#005d92;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}${e("pn-segment")}:last-of-type{margin-right:0}${e("pn-segment")} .pn-segment{cursor:pointer;margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-tap-highlight-color:transparent}${e("pn-segment")} .pn-segment:disabled{cursor:not-allowed}${e("pn-segment")} .pn-segment:disabled~.pn-segment-label{color:#5e554a}${e("pn-segment")} .pn-segment:disabled~.pn-segment-label ${e("pn-icon")} .pn-icon-svg path{fill:#5e554a}${e("pn-segment")} .pn-segment-label{height:100%;width:100%;padding:0.5em;border-radius:3em;font-weight:500;border:0.0625em solid transparent;display:inline-flex;gap:0.5em;align-items:center;-webkit-tap-highlight-color:transparent}`}},[772,"pn-segment",{label:[1],value:[1],name:[1],disabled:[4],selected:[4],icon:[1],pnId:[1,"pn-id"],segmentid:[1]}]),c=r,d=function(){"undefined"!=typeof customElements&&["pn-segment","pn-icon"].forEach((t=>{switch(t){case"pn-segment":customElements.get(e(e(t)))||customElements.define(e(e(t)),r);break;case"pn-icon":customElements.get(e(e(t)))||o()}}))};export{c as PnSegment,d as defineCustomElement}