@freshworks/crayons
Version:
Crayons Web Components library
1 lines • 2.35 kB
JavaScript
import{r as e,h as t,i}from"./p-c5706edf.js";let s=class{constructor(t){e(this,t),this.selected=!1,this.selectable=!1}toggleSelect(){this.selected=!this.selected}render(){return t("div",{class:{"menu-item":!0,selected:this.selected},role:"menuitem",tabIndex:-1,onMouseDown:()=>{this.selectable&&this.toggleSelect()}},t("span",{class:"menu-item__prefix"},t("slot",{name:"prefix"})),t("span",{class:"menu-item__label"},t("slot",null)),t("span",{class:"menu-item__suffix"},t("slot",{name:"suffix"})),this.selectable&&t("span",{class:"menu-item__check"},t("fw-icon",{name:"check",size:12,color:"#2C5CC5",library:"system"})))}get el(){return i(this)}};s.style=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}.menu-item{cursor:pointer;display:-ms-flexbox;display:flex;padding:6px 8px;margin-bottom:4px;line-height:1.45;-ms-flex-align:center;align-items:center;background:var(--fw-menu-item-background, #ffffff);border:var(--fw-menu-item-border);-webkit-box-shadow:var(--fw-menu-item-box-shadow);box-shadow:var(--fw-menu-item-box-shadow);border-radius:var(--fw-menu-item-border-radius);font-size:14px;word-break:break-word;word-wrap:break-word}.menu-item:hover{background-color:#ebeff3}.menu-item:focus{background-color:#ebeff3;outline:#2c5cc5 auto 1px}.menu-item .menu-item__label{-ms-flex:1 1 auto;flex:1 1 auto}.menu-item .menu-item__prefix{-ms-flex:0 0 auto;flex:0 0 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.menu-item .menu-item__prefix ::slotted(*){margin-right:8px}.menu-item .menu-item__suffix{-ms-flex:0 0 auto;flex:0 0 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.menu-item .menu-item__suffix ::slotted(*){margin-left:8px}.menu-item .menu-item__check{width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;visibility:hidden}.menu-item.selected{font-weight:600;background-color:#e5f2fd}.menu-item.selected:hover,.menu-item.selected:focus{background-color:#e5f2fd}.menu-item.selected .menu-item__check{visibility:visible}';export{s as fw_menu_item}