@postnord/web-components/components/pn-choice-chip.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as c,proxyCustomElement as i,HTMLElement as e,h as n,Host as o}from"@stencil/core/internal/client";import{u as p}from"./helpers.js";import{c as h}from"./check.js";import{d as t}from"./pn-icon2.js";const a=i(class extends e{constructor(c){super(),!1!==c&&this.__registerHost()}id="pn-choice-chip-"+p();get hostElement(){return this}label;value;name;checked=!1;required=!1;disabled=!1;radio=!1;icon;small=!1;large=!1;pnId;choiceid;inputType(){return this.radio?"radio":"checkbox"}getId(){return this.pnId||this.choiceid||this.id}render(){return n(o,{key:"34b4a84a6fa6ebd0c592a4d585d333084e72c89f"},n("div",{key:"66c7aa91b09795d9d452b1d6c0b65f0b64ba25f9",class:"pn-choice-chip"},n("input",{key:"8723fd54d3ff2fed1a64c955ab3ea2e4812ff04f",type:this.inputType(),id:this.getId(),value:this.value,name:this.name,checked:this.checked,required:this.required,disabled:this.disabled}),n("div",{key:"9fd84d08b519181f954c3b62b1644afab67569ad",class:"pn-choice-chip-container","data-icon":!!this.icon,"data-small":this.small,"data-large":this.large},n("div",{key:"29b394a6806acbd2d9f905971555242f8bf81d32",class:"pn-choice-chip-icon"},n("pn-icon",{key:"22031f1693f50efa6b9e049c643e9ecbc931bea6",color:"blue700",class:"pn-choice-chip-icon-check",icon:h}),!!this.icon&&n("pn-icon",{key:"573e411940efa3054290a5cb574978dddddfb766",color:"blue700",class:"pn-choice-chip-icon-user",icon:this.icon})),n("label",{key:"c0deb7c6cd33da32bc4b89af84d04a7383664024",class:"pn-choice-chip-label",htmlFor:this.getId()},n("span",{key:"ea43103d3f3d2332a52e9191ff37262bce642dbb"},this.label),n("slot",{key:"904ac98a84bd191e74323154b7ea6de39dca964a"})))))}static get style(){return`${c("pn-choice-chip")}{display:inline-block}${c("pn-choice-chip")} .pn-choice-chip{position:relative;font-size:1em;font-weight:500;text-align:center}${c("pn-choice-chip")} .pn-choice-chip-container{cursor:pointer;position:relative;display:flex;align-items:center;gap:0;padding:0.5em 1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;transition-property:border-color, outline-color, background-color, padding, gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${c("pn-choice-chip")} .pn-choice-chip-container{transition-duration:0s;transition-delay:0s}}${c("pn-choice-chip")} .pn-choice-chip-container{outline:0.2rem solid transparent;outline-offset:0.2rem}${c("pn-choice-chip")} .pn-choice-chip-container[data-icon]{gap:0.25em;padding-left:0.75em}${c("pn-choice-chip")} .pn-choice-chip-container[data-icon][data-small]{padding-left:0.5em}${c("pn-choice-chip")} .pn-choice-chip-container[data-icon][data-large]{padding-left:1em}${c("pn-choice-chip")} .pn-choice-chip-container[data-icon]>.pn-choice-chip-icon{width:1.5em}${c("pn-choice-chip")} .pn-choice-chip-container[data-small]{padding:0.25em 0.75em}${c("pn-choice-chip")} .pn-choice-chip-container[data-small] .pn-choice-chip-label{line-height:1.25em}${c("pn-choice-chip")} .pn-choice-chip-container[data-small] .pn-choice-chip-label>span{font-size:0.875em}${c("pn-choice-chip")} .pn-choice-chip-container[data-large]{padding:0.6875em 1.25em}${c("pn-choice-chip")} .pn-choice-chip-icon{position:relative;width:0;height:1.5em;transition-property:width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${c("pn-choice-chip")} .pn-choice-chip-icon{transition-duration:0s;transition-delay:0s}}${c("pn-choice-chip")} .pn-choice-chip-icon ${c("pn-icon")}{opacity:0;transform:scale(0);position:absolute;top:0;left:0;transition-property:transform, opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${c("pn-choice-chip")} .pn-choice-chip-icon ${c("pn-icon")}{transition-duration:0s;transition-delay:0s}}${c("pn-choice-chip")} .pn-choice-chip-icon ${c("pn-icon")}.pn-choice-chip-icon-user{opacity:1;transform:scale(1)}${c("pn-choice-chip")} .pn-choice-chip-label{color:#005d92;line-height:1.5em;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${c("pn-choice-chip")} .pn-choice-chip-label{transition-duration:0s;transition-delay:0s}}${c("pn-choice-chip")} .pn-choice-chip-label{cursor:pointer;display:flex;align-items:center;flex-grow:1;height:100%}${c("pn-choice-chip")} .pn-choice-chip>input{position:absolute;z-index:1;opacity:0;top:0;left:0;width:100%;height:100%;margin:0;cursor:pointer}${c("pn-choice-chip")} .pn-choice-chip>input:not(:checked)~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(1);opacity:1}${c("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#005d92}${c("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-user .pn-icon-svg path,${c("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-check .pn-icon-svg path{fill:#005d92}${c("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-label{color:#005d92}${c("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container{gap:0.25em;background-color:#e0f8ff;border-color:#005d92}${c("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon{width:1.5em;stroke-dashoffset:23}${c("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check{transform:scale(1);opacity:1}${c("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(0);opacity:0}${c("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}${c("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#0d234b}${c("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check path{fill:#0d234b}${c("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}${c("pn-choice-chip")} .pn-choice-chip>input:focus-visible~.pn-choice-chip-container{outline-color:#005d92;border-color:#005d92}${c("pn-choice-chip")} .pn-choice-chip>input:disabled{cursor:not-allowed}${c("pn-choice-chip")} .pn-choice-chip>input:disabled:active~.pn-choice-chip-container{outline:none}${c("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container{background-color:#f3f2f2;border-color:#f3f2f2;cursor:not-allowed}${c("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container .pn-choice-chip-label{color:#5e554a;cursor:not-allowed}${c("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container ${c("pn-icon")} .pn-icon-svg path{fill:#5e554a}`}},[772,"pn-choice-chip",{label:[1],value:[513],name:[1],checked:[1028],required:[4],disabled:[4],radio:[4],icon:[1],small:[4],large:[4],pnId:[1,"pn-id"],choiceid:[1]}]),r=a,d=function(){"undefined"!=typeof customElements&&["pn-choice-chip","pn-icon"].forEach((i=>{switch(i){case"pn-choice-chip":customElements.get(c(c(i)))||customElements.define(c(c(i)),a);break;case"pn-icon":customElements.get(c(c(i)))||t()}}))};export{r as PnChoiceChip,d as defineCustomElement}