overview-components 1.0.92 → 1.0.95

package/dist/components/lit-badge.js

@@ -0,0 +1,100 @@
+import { customElement as d } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as n } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as p } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as f } from "../node_modules/lit-element/lit-element.js";
+import { css as g } from "../node_modules/@lit/reactive-element/css-tag.js";
+var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (l, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? u(e, s) : e, c = l.length - 1, a; c >= 0; c--)
+    (a = l[c]) && (t = (i ? a(e, s, t) : a(t)) || t);
+  return i && t && m(e, s, t), t;
+};
+let r = class extends f {
+  constructor() {
+    super(...arguments), this.content = "highlighted", this.size = "medium", this.text = "";
+  }
+  render() {
+    return p`<div class="badge ${this.size} ${this.content}">
+            <span class="text ${this.icon ? null : "noicon"}">${this.text}</span>
+            ${this.icon ? p`<lit-icon size="0.75rem" icon="${this.icon}"></lit-icon>` : null}
+        </div>`;
+  }
+};
+r.styles = [
+  g`
+            .badge {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border-radius: 4px;
+                gap: 4px;
+                width: fit-content;
+                font-size: 10px;
+            }
+
+            .text {
+                font-size: 10px;
+                font-weight: 600;
+            }
+
+            .noicon {
+                line-height: 14px;
+            }
+
+            .medium {
+                padding: 4px 10px;
+            }
+
+            .small {
+                padding: 2px 6px;
+            }
+
+            .highlighted {
+                background: var(--color-success-main, #76b703);
+                color: var(--color-success-light, #f0fadf);
+            }
+
+            .neutral {
+                background: var(--background-default, #eff3f4);
+                color: var(--text-secondary, #5d6371);
+            }
+
+            .success {
+                background: var(--color-success-light, #f0fadf);
+                color: var(--color-success-dark, #76b703);
+            }
+
+            .danger {
+                background: var(--color-error-light, #ffd6cd);
+                color: var(--color-error-main, #ca2d0a);
+            }
+
+            .warning {
+                background: var(--color-warning-light, #ffe1a8);
+                color: var(--color-warning-main, #875900);
+            }
+
+            .info {
+                background: var(--color-info-light, #d0e7ff);
+                color: var(--color-info-main, #0056b3);
+            }
+        `
+];
+o([
+  n({ type: String })
+], r.prototype, "content", 2);
+o([
+  n({ type: String })
+], r.prototype, "size", 2);
+o([
+  n({ type: String })
+], r.prototype, "text", 2);
+o([
+  n({ type: String })
+], r.prototype, "icon", 2);
+r = o([
+  d("lit-badge")
+], r);
+export {
+  r as LitBadge
+};