chunk.O3YAJV4E.js 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. import {
  2. e as e2
  3. } from "./chunk.YXKHB4AC.js";
  4. import {
  5. T,
  6. e,
  7. h,
  8. n,
  9. r
  10. } from "./chunk.5PIDMFOE.js";
  11. import {
  12. __decorateClass
  13. } from "./chunk.IHGPZX35.js";
  14. // _uyihdawu1:/Users/claviska/Projects/shoelace/src/components/badge/badge.scss
  15. var badge_default = ":host {\n position: relative;\n box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n box-sizing: inherit;\n}\n\n[hidden] {\n display: none !important;\n}\n\n:host {\n display: inline-flex;\n}\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--sl-font-size-x-small);\n font-weight: var(--sl-font-weight-semibold);\n letter-spacing: var(--sl-letter-spacing-normal);\n line-height: 1;\n border-radius: var(--sl-border-radius-small);\n white-space: nowrap;\n padding: 3px 6px;\n user-select: none;\n cursor: inherit;\n}\n\n.badge--primary {\n background-color: var(--sl-color-primary-500);\n color: var(--sl-color-primary-text);\n}\n\n.badge--success {\n background-color: var(--sl-color-success-500);\n color: var(--sl-color-success-text);\n}\n\n.badge--info {\n background-color: var(--sl-color-info-500);\n color: var(--sl-color-info-text);\n}\n\n.badge--warning {\n background-color: var(--sl-color-warning-500);\n color: var(--sl-color-warning-text);\n}\n\n.badge--danger {\n background-color: var(--sl-color-danger-500);\n color: var(--sl-color-danger-text);\n}\n\n.badge--pill {\n border-radius: var(--sl-border-radius-pill);\n}\n\n.badge--pulse {\n animation: pulse 1.5s infinite;\n}\n\n.badge--pulse.badge--primary {\n --pulse-color: var(--sl-color-primary-500);\n}\n\n.badge--pulse.badge--success {\n --pulse-color: var(--sl-color-success-500);\n}\n\n.badge--pulse.badge--info {\n --pulse-color: var(--sl-color-info-500);\n}\n\n.badge--pulse.badge--warning {\n --pulse-color: var(--sl-color-warning-500);\n}\n\n.badge--pulse.badge--danger {\n --pulse-color: var(--sl-color-danger-500);\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 var(--pulse-color);\n }\n 70% {\n box-shadow: 0 0 0 0.5rem transparent;\n }\n 100% {\n box-shadow: 0 0 0 0 transparent;\n }\n}";
  16. // src/components/badge/badge.ts
  17. var SlBadge = class extends h {
  18. constructor() {
  19. super(...arguments);
  20. this.type = "primary";
  21. this.pill = false;
  22. this.pulse = false;
  23. }
  24. render() {
  25. return T`
  26. <span
  27. part="base"
  28. class=${e2({
  29. badge: true,
  30. "badge--primary": this.type === "primary",
  31. "badge--success": this.type === "success",
  32. "badge--info": this.type === "info",
  33. "badge--warning": this.type === "warning",
  34. "badge--danger": this.type === "danger",
  35. "badge--pill": this.pill,
  36. "badge--pulse": this.pulse
  37. })}
  38. role="status"
  39. >
  40. <slot></slot>
  41. </span>
  42. `;
  43. }
  44. };
  45. SlBadge.styles = r(badge_default);
  46. __decorateClass([
  47. e({ reflect: true })
  48. ], SlBadge.prototype, "type", 2);
  49. __decorateClass([
  50. e({ type: Boolean, reflect: true })
  51. ], SlBadge.prototype, "pill", 2);
  52. __decorateClass([
  53. e({ type: Boolean, reflect: true })
  54. ], SlBadge.prototype, "pulse", 2);
  55. SlBadge = __decorateClass([
  56. n("sl-badge")
  57. ], SlBadge);
  58. var badge_default2 = SlBadge;
  59. export {
  60. badge_default2 as badge_default
  61. };