@postnord/web-components
Version:
PostNord Web Components
6 lines • 6.62 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{r as c,g as i,h as e,a as n}from"./p-43660913.js";import{u as o}from"./p-f64d17a6.js";import{c as p}from"./p-aae10869.js";const h="pn-choice-chip{display:inline-block}pn-choice-chip .pn-choice-chip{position:relative;font-size:1em;font-weight:500;text-align:center}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);outline:0.2rem solid transparent;outline-offset:0.2rem}@media (prefers-reduced-motion: reduce){pn-choice-chip .pn-choice-chip-container{transition-duration:0s;transition-delay:0s}}pn-choice-chip .pn-choice-chip-container[data-icon]{gap:0.25em;padding-left:0.75em}pn-choice-chip .pn-choice-chip-container[data-icon][data-small]{padding-left:0.5em}pn-choice-chip .pn-choice-chip-container[data-icon][data-large]{padding-left:1em}pn-choice-chip .pn-choice-chip-container[data-icon]>.pn-choice-chip-icon{width:1.5em}pn-choice-chip .pn-choice-chip-container[data-small]{padding:0.25em 0.75em}pn-choice-chip .pn-choice-chip-container[data-small] .pn-choice-chip-label{line-height:1.25em}pn-choice-chip .pn-choice-chip-container[data-small] .pn-choice-chip-label>span{font-size:0.875em}pn-choice-chip .pn-choice-chip-container[data-large]{padding:0.625em 1.25em}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){pn-choice-chip .pn-choice-chip-icon{transition-duration:0s;transition-delay:0s}}pn-choice-chip .pn-choice-chip-icon 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){pn-choice-chip .pn-choice-chip-icon pn-icon{transition-duration:0s;transition-delay:0s}}pn-choice-chip .pn-choice-chip-icon pn-icon.pn-choice-chip-icon-user{opacity:1;transform:scale(1)}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);cursor:pointer;display:flex;align-items:center;flex-grow:1;height:100%}@media (prefers-reduced-motion: reduce){pn-choice-chip .pn-choice-chip-label{transition-duration:0s;transition-delay:0s}}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}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}pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#005d92}pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-user .pn-icon-svg path,pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-check .pn-icon-svg path{fill:#005d92}pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-label{color:#005d92}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container{gap:0.25em;background-color:#e0f8ff;border-color:#005d92}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon{width:1.5em;stroke-dashoffset:23}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}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}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}pn-choice-chip .pn-choice-chip>input:checked:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#0d234b}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}pn-choice-chip .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}pn-choice-chip .pn-choice-chip>input:focus-visible~.pn-choice-chip-container{outline-color:#005d92;border-color:#005d92}pn-choice-chip .pn-choice-chip>input:disabled{cursor:not-allowed}pn-choice-chip .pn-choice-chip>input:disabled:active~.pn-choice-chip-container{outline:none}pn-choice-chip .pn-choice-chip>input:disabled~.pn-choice-chip-container{background-color:#f3f2f2;border-color:#f3f2f2;cursor:not-allowed}pn-choice-chip .pn-choice-chip>input:disabled~.pn-choice-chip-container .pn-choice-chip-label{color:#5e554a;cursor:not-allowed}pn-choice-chip .pn-choice-chip>input:disabled~.pn-choice-chip-container pn-icon .pn-icon-svg path{fill:#5e554a}";const t=h;const a=class{constructor(i){c(this,i);this.moving=false;this.label=undefined;this.value=undefined;this.name=undefined;this.checked=false;this.radio=false;this.choiceid=`pn-choice-chip-${o()}`;this.icon=undefined;this.required=false;this.disabled=false;this.small=false;this.large=false}get hostElement(){return i(this)}render(){return e(n,{key:"5ff90532fb75531aa8fcb23fd4dd0ae0dfc7d33a"},e("div",{key:"500cb322689763c229ac303d1d62643a620c74ed",class:"pn-choice-chip"},e("input",{key:"88feb0c54e20951c8c6e9d761323e1806e4583bd",type:this.radio?"radio":"checkbox",id:this.choiceid,value:this.value,name:this.name,checked:this.checked,required:this.required,disabled:this.disabled}),e("div",{key:"d1ed91ded7233f9229bdbde4f9c40b5c86a67fba",class:"pn-choice-chip-container","data-icon":!!this.icon,"data-small":this.small,"data-large":this.large},e("div",{key:"29f8378c640a6553416507e2ca0454bca47c557c",class:"pn-choice-chip-icon"},e("pn-icon",{key:"f70f7191ade89323265b312cc881141edffc4296",color:"blue700",class:"pn-choice-chip-icon-check",icon:p}),!!this.icon&&e("pn-icon",{key:"87d85e74effe1b65d949b0735a50f5b4a56acf25",color:"blue700",class:"pn-choice-chip-icon-user",icon:this.icon})),e("label",{key:"772f0726fcaada44af2c10ab922bb3eb151886b7",class:"pn-choice-chip-label",htmlFor:this.choiceid},e("span",{key:"7c5bf78b2811a70308663bfb1be95420ce7ca30d"},this.label),e("slot",{key:"6fd6ee5beb63f38285b273f0a73d41e5895cc8e6"})))))}};a.style=t;export{a as pn_choice_chip};
//# sourceMappingURL=p-fcd5028f.entry.js.map