@freshworks/crayons/dist/esm-es5/fw-pill.entry.js

Crayons Web Components library

import{r as registerInstance,h,i as getElement}from"./index-25bc21e4.js";var pillCss=':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}:host{--fw-pill-border:none;--fw-pill-border-radius:16px;--fw-pill-padding:5px 12px 5px 8px;--fw-pill-color:#475867;--fw-pill-background-color:#ebeff3}.pill{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--fw-pill-color);background-color:var(--fw-pill-background-color);padding:var(--fw-pill-padding);border:var(--fw-pill-border);border-radius:var(--fw-pill-border-radius);font-weight:600;font-size:12px;line-height:1.5}.pill ::slotted(*){height:14px;width:14px}.pill .pill-icon{height:14px;width:14px;margin-right:6px}.pill ::slotted(fw-icon){--fw-icon-size:14px;--fw-icon-color:#475867}.pill--blue{background-color:#e5f2fd;color:#2c5cc5}.pill--blue ::slotted(fw-icon){--fw-icon-color:#2c5cc5}.pill--red{background-color:#ffecf0;color:#d72d30}.pill--red ::slotted(fw-icon){--fw-icon-color:#d72d30}.pill--green{background-color:#e0f5f1;color:#00795b}.pill--green ::slotted(fw-icon){--fw-icon-color:#00795b}.pill--yellow{background-color:#fef1e1;color:#e86f25}.pill--yellow ::slotted(fw-icon){--fw-icon-color:#e86f25}.pill--grey{background-color:#ebeff3;color:#475867}.pill--grey ::slotted(fw-icon){--fw-icon-color:#475867}';var Pill=function(){function l(l){registerInstance(this,l)}l.prototype.componentWillLoad=function(){this.handleSlotChange()};l.prototype.getPillClass=function(l){return l?"pill pill--"+l.toLowerCase():"pill"};l.prototype.handleSlotChange=function(){this.hasIcon=!!this.el.querySelector('[slot="icon"')};l.prototype.render=function(){var l=this;return h("span",{class:this.getPillClass(this.color)},this.hasIcon&&h("div",{class:"pill-icon"},h("slot",{name:"icon"})),h("slot",{onSlotchange:function(){return l.handleSlotChange()}}))};Object.defineProperty(l.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return l}();Pill.style=pillCss;export{Pill as fw_pill};