@postnord/web-components/components/pn-page-nav-dropdown-item.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as n,HTMLElement as t,createEvent as o,h as i}from"@stencil/core/internal/client";import{a}from"./arrow_right.js";import{d as p}from"./pn-icon2.js";const d=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.itemselection=o(this,"itemselection",7)}get hostElement(){return this}value;href;active=!1;itemselection;select(e){this.value&&!this.href&&e.preventDefault(),this.itemselection.emit(this.value)}setClassnames(){let e="pn-page-nav-dropdown-item ";return this.active&&(e+="pn-page-nav-dropdown-item-active "),e}getType(){return this.value?null:"button"}getTagName(){return this.value?"a":"button"}render(){const e=this.getTagName();return i("li",{key:"93c6bd31a88c76797cee2bc915c31e6ecfa5aace"},i(e,{key:"2818d4f3a1572f863f9b9a8609d572f5994f6e75",href:this.href||"#",class:this.setClassnames(),type:this.getType(),onClick:e=>this.select(e),tabindex:"-1"},i("slot",{key:"e04f130737445747a2b93bf9d7372bf22889fcff"}),i("pn-icon",{key:"934d46f6bd482171d974efec7c4494f8b1b1faff",icon:a,color:"white"})),i("hr",{key:"c5c9c4a24affe5b10d56e8a6ca5d6bee434aa571"}))}static get style(){return`${e("pn-page-nav-dropdown-item")}:first-of-type li>a,${e("pn-page-nav-dropdown-item")}:first-of-type li>button{border-radius:0.5em 0.5em 0 0}${e("pn-page-nav-dropdown-item")}:last-of-type li>a,${e("pn-page-nav-dropdown-item")}:last-of-type li>button{border-radius:0 0 0.5em 0.5em}${e("pn-page-nav-dropdown-item")}:last-of-type li>hr{display:none}${e("pn-page-nav-dropdown-item")} li{font-size:inherit}${e("pn-page-nav-dropdown-item")} li>*{color:#ffffff;font-size:inherit;border:none;padding:1em;margin:0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background 0.15s;outline:none;width:100%;font-weight:500}${e("pn-page-nav-dropdown-item")} li>*>${e("pn-icon")}{margin-left:1em}${e("pn-page-nav-dropdown-item")} li>*.pn-page-nav-dropdown-item-active{background:#005d92}${e("pn-page-nav-dropdown-item")} li>*.pn-page-nav-dropdown-item-active:hover,${e("pn-page-nav-dropdown-item")} li>*.pn-page-nav-dropdown-item-active:focus{background:#005d92}${e("pn-page-nav-dropdown-item")} li>*:hover,${e("pn-page-nav-dropdown-item")} li>*:focus{background:#0d234b}${e("pn-page-nav-dropdown-item")} li>*:focus{box-shadow:inset 0 0 0 0.1em #005d92, inset 0 0 0 0.2em #d3cecb}${e("pn-page-nav-dropdown-item")} li>a{text-decoration:none}${e("pn-page-nav-dropdown-item")} li>button{background:none}${e("pn-page-nav-dropdown-item")} li>hr{bottom:0;padding:0;margin:0 auto;border-top:0.0625em solid #d3cecb;opacity:0.6;width:85%}`}},[772,"pn-page-nav-dropdown-item",{value:[1],href:[1],active:[4]}]),r=d,s=function(){"undefined"!=typeof customElements&&["pn-page-nav-dropdown-item","pn-icon"].forEach((n=>{switch(n){case"pn-page-nav-dropdown-item":customElements.get(e(e(n)))||customElements.define(e(e(n)),d);break;case"pn-icon":customElements.get(e(e(n)))||p()}}))};export{r as PnPageNavDropdownItem,s as defineCustomElement}