@dile/iconlib 1.8.1 → 2.0.0

package/dile-icon-badge.js

@@ -0,0 +1,5 @@
+import { DileIconBadge } from './src/DileIconBadge.js';
+
+if (!customElements.get('dile-icon-badge')) {
+  customElements.define('dile-icon-badge', DileIconBadge);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/iconlib",
-  "version": "1.8.1",
+  "version": "2.0.0",
   "description": "Icon Component Library based on popular libraries",
   "keywords": [
     "UI",
@@ -25,5 +25,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "57a54e50de1a24d64dcf478fa6d39624e1f775eb"
+  "gitHead": "ceeab58670ba4c09593d0760a357ecac36214a44"
 }

package/src/DileFontawesomeBadge.js

@@ -1,4 +1,4 @@
-import { badgeStyles } from "./fontawesomeBadgeStyles.js";
+import { badgeStyles } from "./badgeStyles.js";
 import '../dile-fontawesome-icon.js';
 
 export class DileFontawesomeBadge extends HTMLElement {
@@ -13,8 +13,9 @@ export class DileFontawesomeBadge extends HTMLElement {
   }
 
   render() {
+    const variantClass = this.variant ? `variant-${this.variant}` : '';
     this.shadowRoot.innerHTML = `
-      <div class="badge-container">
+      <div class="badge-container ${variantClass}">
         <div class="icon-wrapper">
           <dile-fontawesome-icon icon="${this.icon}"></dile-fontawesome-icon>
         </div>
@@ -34,8 +35,9 @@ export class DileFontawesomeBadge extends HTMLElement {
       this.icon = newValue;
       this.render();
     }
-    if (name === 'variant' && newValue !== null) {
-      this.variant = newValue;
+    if (name === 'variant') {
+      this.variant = newValue !== null ? newValue : null;
+      this.render();
     }
     if (name === 'rounded') {
       this.rounded = newValue !== null;

package/src/DileIconBadge.js

@@ -0,0 +1,69 @@
+import { badgeStyles } from './badgeStyles.js';
+
+export class DileIconBadge extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.adoptedStyleSheets = [badgeStyles];
+    this.icon = 'lucide.dot';
+    this.variant = null;
+    this.render();
+  }
+
+  getTagName() {
+    if (!this.icon) return null;
+    const dotIndex = this.icon.indexOf('.');
+    if (dotIndex === -1) {
+      console.warn(`dile-icon-badge: icon="${this.icon}" no tiene el formato "familia.nombre", ej. "lucide.home".`);
+      return null;
+    }
+
+    const family = this.icon.slice(0, dotIndex);
+    const name = this.icon.slice(dotIndex + 1);
+    if (!name) return null;
+
+    return `dile-${family}-icon-${name}`;
+  }
+
+  render() {
+    const tag = this.getTagName();
+    const variantClass = this.variant ? `variant-${this.variant}` : '';
+
+    if (this.variant) {
+      this.setAttribute('variant', this.variant);
+    } else {
+      this.removeAttribute('variant');
+    }
+
+    this.shadowRoot.innerHTML = `
+      <div class="badge-container ${variantClass}">
+        <div class="icon-wrapper">
+          ${tag ? `<${tag} class="badge-icon"></${tag}>` : ''}
+        </div>
+        <div class="text-wrapper">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  static get observedAttributes() {
+    return ['icon', 'variant'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'icon' && newValue !== null) {
+      this.icon = newValue;
+      this.render();
+    }
+
+    if (name === 'variant' && newValue !== null) {
+      this.variant = newValue;
+      this.render();
+    }
+  }
+}
+
+if (!customElements.get('dile-icon-badge')) {
+  customElements.define('dile-icon-badge', DileIconBadge);
+}

package/src/DileIconBadge.spec.js

@@ -0,0 +1,20 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import './DileIconBadge.js';
+
+describe('dile-icon-badge', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('renders a family-specific icon from the generic family.name value', async () => {
+    document.body.innerHTML = '<dile-icon-badge icon="lucide.house" variant="success">Ready</dile-icon-badge>';
+
+    const el = document.body.querySelector('dile-icon-badge');
+    await Promise.resolve();
+
+    expect(el).toBeTruthy();
+    expect(el.shadowRoot.querySelector('dile-lucide-icon-house')).toBeTruthy();
+    expect(el.textContent.trim()).toContain('Ready');
+    expect(el.shadowRoot.querySelector('.badge-container').classList.contains('variant-success')).toBe(true);
+  });
+});

package/src/DileLucideBadge.js

@@ -1,4 +1,4 @@
-import { badgeStyles } from "./lucideBadgeStyles.js";
+import { badgeStyles } from "./badgeStyles.js";
 import '../dile-lucide-icon.js';
 
 export class DileLucideBadge extends HTMLElement {
@@ -13,8 +13,9 @@ export class DileLucideBadge extends HTMLElement {
   }
 
   render() {
+    const variantClass = this.variant ? `variant-${this.variant}` : '';
     this.shadowRoot.innerHTML = `
-      <div class="badge-container">
+      <div class="badge-container ${variantClass}">
         <div class="icon-wrapper">
           <dile-lucide-icon icon="${this.icon}"></dile-lucide-icon>
         </div>
@@ -34,8 +35,9 @@ export class DileLucideBadge extends HTMLElement {
       this.icon = newValue;
       this.render();
     }
-    if (name === 'variant' && newValue !== null) {
-      this.variant = newValue;
+    if (name === 'variant') {
+      this.variant = newValue !== null ? newValue : null;
+      this.render();
     }
     if (name === 'rounded') {
       this.rounded = newValue !== null;

package/src/DileMaterialBadge.js

@@ -1,4 +1,4 @@
-import { badgeStyles } from "./materialBadgeStyles.js";
+import { badgeStyles } from "./badgeStyles.js";
 import '../dile-material-icon.js';
 
 export class DileMaterialBadge extends HTMLElement {
@@ -13,8 +13,9 @@ export class DileMaterialBadge extends HTMLElement {
   }
 
   render() {
+    const variantClass = this.variant ? `variant-${this.variant}` : '';
     this.shadowRoot.innerHTML = `
-      <div class="badge-container">
+      <div class="badge-container ${variantClass}">
         <div class="icon-wrapper">
           <dile-material-icon icon="${this.icon}"></dile-material-icon>
         </div>
@@ -34,8 +35,9 @@ export class DileMaterialBadge extends HTMLElement {
       this.icon = newValue;
       this.render();
     }
-    if (name === 'variant' && newValue !== null) {
-      this.variant = newValue;
+    if (name === 'variant') {
+      this.variant = newValue !== null ? newValue : null;
+      this.render();
     }
     if (name === 'rounded') {
       this.rounded = newValue !== null;

package/src/DilePhosphorBadge.js

@@ -1,4 +1,4 @@
-import { badgeStyles } from "./phosphorBadgeStyles.js";
+import { badgeStyles } from "./badgeStyles.js";
 import '../dile-phosphor-icon.js';
 
 export class DilePhosphorBadge extends HTMLElement {
@@ -13,8 +13,9 @@ export class DilePhosphorBadge extends HTMLElement {
   }
 
   render() {
+    const variantClass = this.variant ? `variant-${this.variant}` : '';
     this.shadowRoot.innerHTML = `
-      <div class="badge-container">
+      <div class="badge-container ${variantClass}">
         <div class="icon-wrapper">
           <dile-phosphor-icon icon="${this.icon}"></dile-phosphor-icon>
         </div>
@@ -34,8 +35,9 @@ export class DilePhosphorBadge extends HTMLElement {
       this.icon = newValue;
       this.render();
     }
-    if (name === 'variant' && newValue !== null) {
-      this.variant = newValue;
+    if (name === 'variant') {
+      this.variant = newValue !== null ? newValue : null;
+      this.render();
     }
     if (name === 'rounded') {
       this.rounded = newValue !== null;

package/src/DileRemixiconBadge.js

@@ -1,4 +1,4 @@
-import { badgeStyles } from "./remixiconBadgeStyles.js";
+import { badgeStyles } from "./badgeStyles.js";
 import '../dile-remixicon-icon.js';
 
 export class DileRemixiconBadge extends HTMLElement {
@@ -13,8 +13,9 @@ export class DileRemixiconBadge extends HTMLElement {
   }
 
   render() {
+    const variantClass = this.variant ? `variant-${this.variant}` : '';
     this.shadowRoot.innerHTML = `
-      <div class="badge-container">
+      <div class="badge-container ${variantClass}">
         <div class="icon-wrapper">
           <dile-remixicon-icon icon="${this.icon}"></dile-remixicon-icon>
         </div>
@@ -34,8 +35,9 @@ export class DileRemixiconBadge extends HTMLElement {
       this.icon = newValue;
       this.render();
     }
-    if (name === 'variant' && newValue !== null) {
-      this.variant = newValue;
+    if (name === 'variant') {
+      this.variant = newValue !== null ? newValue : null;
+      this.render();
     }
     if (name === 'rounded') {
       this.rounded = newValue !== null;

package/src/DileTablerBadge.js

@@ -1,4 +1,4 @@
-import { badgeStyles } from "./tablerBadgeStyles.js";
+import { badgeStyles } from "./badgeStyles.js";
 import '../dile-tabler-icon.js';
 
 export class DileTablerBadge extends HTMLElement {
@@ -13,8 +13,9 @@ export class DileTablerBadge extends HTMLElement {
   }
 
   render() {
+    const variantClass = this.variant ? `variant-${this.variant}` : '';
     this.shadowRoot.innerHTML = `
-      <div class="badge-container">
+      <div class="badge-container ${variantClass}">
         <div class="icon-wrapper">
           <dile-tabler-icon icon="${this.icon}"></dile-tabler-icon>
         </div>
@@ -34,8 +35,9 @@ export class DileTablerBadge extends HTMLElement {
       this.icon = newValue;
       this.render();
     }
-    if (name === 'variant' && newValue !== null) {
-      this.variant = newValue;
+    if (name === 'variant') {
+      this.variant = newValue !== null ? newValue : null;
+      this.render();
     }
     if (name === 'rounded') {
       this.rounded = newValue !== null;

package/src/badgeStyles.js

@@ -0,0 +1,81 @@
+export const badgeStyles = new CSSStyleSheet();
+badgeStyles.replaceSync(`
+  :host {
+    display: inline-flex;
+    --dile-icon-color: var(--dile-badge-on-color, var(--dile-on-primary-color, #303030));
+    --dile-icon-size: var(--dile-badge-icon-size, 18px);
+  }
+
+  .badge-container {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--dile-badge-gap, 0.5rem);
+    padding: var(--dile-badge-padding, 0.375rem 0.75rem);
+    border-radius: var(--dile-badge-border-radius, 9999px);
+    background-color: var(--dile-badge-color, var(--dile-primary-color, #f3f3ae));
+    color: var(--dile-badge-on-color, var(--dile-on-primary-color, #303030));
+    font-size: var(--dile-badge-font-size, 0.8rem);
+    font-weight: var(--dile-badge-font-weight, 500);
+    border: var(--dile-badge-border-width, 0px) solid var(--dile-badge-border-color, transparent);
+    transition-duration: var(--dile-badge-transition-duration, 0.3s);
+    transition-timing-function: ease-in-out;
+    transition-property: background-color, color;
+  }
+
+  :host([variant="primary"]) .badge-container {
+    background-color: var(--dile-badge-primary, var(--dile-primary-color, #f3f3ae));
+    color: var(--dile-badge-on-primary, var(--dile-on-primary-color, #303030));
+    --dile-icon-color: var(--dile-badge-on-primary, var(--dile-on-primary-color, #303030));
+  }
+
+  :host([variant="secondary"]) .badge-container {
+    background-color: var(--dile-badge-secondary, var(--dile-secondary-color, #27a744));
+    color: var(--dile-badge-on-secondary, var(--dile-on-secondary-color, #ffffff));
+    --dile-icon-color: var(--dile-badge-on-secondary, var(--dile-on-secondary-color, #ffffff));
+  }
+
+  :host([variant="danger"]) .badge-container {
+    background-color: var(--dile-badge-danger, var(--dile-danger-color, #e34a1b));
+    color: var(--dile-badge-on-danger, var(--dile-on-danger-color, #ffffff));
+    --dile-icon-color: var(--dile-badge-on-danger, var(--dile-on-danger-color, #ffffff));
+  }
+
+  :host([variant="error"]) .badge-container {
+    background-color: var(--dile-badge-error, var(--dile-alert-error-color, #cf3535));
+    color: var(--dile-badge-on-error, var(--dile-on-alert-color, #ffffff));
+    --dile-icon-color: var(--dile-badge-on-error, var(--dile-on-alert-color, #ffffff));
+  }
+
+  :host([variant="success"]) .badge-container {
+    background-color: var(--dile-badge-success, var(--dile-alert-success-color, #00900f));
+    color: var(--dile-badge-on-success, var(--dile-on-alert-color, #ffffff));
+    --dile-icon-color: var(--dile-badge-on-success, var(--dile-on-alert-color, #ffffff));
+  }
+
+  :host([variant="warning"]) .badge-container {
+    background-color: var(--dile-badge-warning, var(--dile-alert-warning-color, #d7b740));
+    color: var(--dile-badge-on-warning, var(--dile-on-alert-color, #ffffff));
+    --dile-icon-color: var(--dile-badge-on-warning, var(--dile-on-alert-color, #ffffff));
+  }
+
+  :host([variant="soft"]) .badge-container {
+    background-color: var(--dile-badge-soft, #2a7a9f);
+    color: var(--dile-badge-on-soft, #ffffff);
+    --dile-icon-color: var(--dile-badge-on-soft, #ffffff);
+  }
+
+  .icon-wrapper {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+  }
+
+  .text-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  dile-iconlib {
+    display: inline-flex;
+  }
+`);