@limetech/lime-elements/dist/esm/limel-badge.entry.js

Lime Elements

import { r as registerInstance, h, H as Host } from './index-2714248e.js';
import { a as abbreviate } from './format-8e78bbee.js';
import './_commonjsHelpers-9b95d21f.js';

const badgeCss = "@charset \"UTF-8\";:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:var(--badge-max-width, 2.75rem);padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}";

const Badge = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.label = undefined;
  }
  render() {
    return (h(Host, { title: this.labelIsLarge() ? this.label : '', class: {
        'has-large-label': this.labelIsLarge(),
      } }, h("span", null, this.renderLabel())));
  }
  renderLabel() {
    if (typeof this.label === 'number') {
      return abbreviate(this.label);
    }
    return this.label;
  }
  labelIsLarge() {
    const largeNumericLabel = 999;
    const largeStringLabel = 6;
    if ((typeof this.label === 'number' &&
      this.label > largeNumericLabel) ||
      (typeof this.label === 'string' &&
        this.label.length > largeStringLabel)) {
      return true;
    }
  }
};
Badge.style = badgeCss;

export { Badge as limel_badge };

//# sourceMappingURL=limel-badge.entry.js.map