@dile/iconlib 1.3.1 → 1.3.2

package/dile-iconlib.js

@@ -0,0 +1,3 @@
+import { DileIconlib } from "./src/DileIconlib.js";
+
+customElements.define('dile-iconlib', DileIconlib);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/iconlib",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Icon Component Library based on popular libraries",
   "keywords": [
     "UI",
@@ -25,5 +25,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e123ebdc49cb479a03e4b5689ddc6fbfb4ab39b1"
+  "gitHead": "b0bd29089239ea51db02bce9486c36bb2a4e84d7"
 }

package/src/DileBaseIcon.js

@@ -1,4 +1,4 @@
-import { lucideIconStyles as iconStyles } from "./lucideIconStyles.js";
+import { iconStyles } from "./iconStyles.js";
 
 export class DileBaseIcon extends HTMLElement {
   constructor() {

package/src/DileFontawesomeIcon.js

@@ -1,38 +1,8 @@
-import { iconStylesNamedIcons } from "../src/lucideIconStyles.js";
 import '../fontawesome-icons/dot-circle.js';
+import { DileIconWrapperBase } from "./DileIconWrapperBase.js";
 
-export class DileFontawesomeIcon extends HTMLElement {
+export class DileFontawesomeIcon extends DileIconWrapperBase {
   constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.adoptedStyleSheets = [iconStylesNamedIcons];
-    this.icon = "dot-circle";
-    this.rounded = false;
-    this.render();
-
-  }
-
-  render() {
-    this.shadowRoot.innerHTML = `
-      <dile-fontawesome-icon-${this.icon} ${this.rounded ? 'rounded': ''} class="flex"></dile-fontawesome-icon-${this.icon}>
-    `;
-  }
-
-  static get observedAttributes() {
-    return ['icon', 'rounded'];
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === 'icon' && newValue !== null) {
-      this.icon = newValue;
-      this.render();
-    }
-    if (name === 'rounded' && newValue !== null) {
-      this.rounded = true;
-      this.render();
-    } else {
-      this.rounded = false;
-      this.render();
-    }
+    super('dot-circle', 'fontawesome');
   }
 }

package/src/DileIconWrapperBase.js

@@ -0,0 +1,39 @@
+import { iconStylesNamedIcons } from "./iconStyles.js";
+
+export class DileIconWrapperBase extends HTMLElement {
+  constructor(defaultIcon = '', family = null) {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.adoptedStyleSheets = [iconStylesNamedIcons];
+    this.icon = defaultIcon;
+    this.family = family;
+    this.rounded = false;
+    this.render();
+  }
+
+  getTagName() {
+    return this.icon ? `dile-${this.family}-icon-${this.icon}` : null;
+  }
+
+  render() {
+    const tag = this.getTagName();
+    this.shadowRoot.innerHTML = tag
+      ? `<${tag} ${this.rounded ? 'rounded' : ''} class="flex"></${tag}>`
+      : '';
+  }
+
+  static get observedAttributes() {
+    return ['icon', 'rounded'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'icon' && newValue !== null) {
+      this.icon = newValue;
+      this.render();
+    }
+    if (name === 'rounded') {
+      this.rounded = newValue !== null;
+      this.render();
+    }
+  }
+}

package/src/DileIconlib.js

@@ -0,0 +1,26 @@
+import '../lucide-icons/dot.js';
+import { DileIconWrapperBase } from "./DileIconWrapperBase.js";
+
+const KNOWN_FAMILIES = ['lucide', 'material', 'fontawesome'];
+
+export class DileIconlib extends DileIconWrapperBase {
+  constructor() {
+    super('lucide.dot'); // único default (no uno por familia); ya viene en formato "familia.nombre"
+  }
+
+  getTagName() {
+    if (!this.icon) return null;
+    const dotIndex = this.icon.indexOf('.');
+    if (dotIndex === -1) {
+      console.warn(`dile-iconlib: 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;
+    if (!KNOWN_FAMILIES.includes(family)) {
+      console.warn(`dile-iconlib: familia desconocida "${family}". Esperado: ${KNOWN_FAMILIES.join(', ')}.`);
+    }
+    return `dile-${family}-icon-${name}`;
+  }
+}

package/src/DileLucideIcon.js

@@ -1,35 +1,8 @@
-import { iconStylesNamedIcons } from "./lucideIconStyles.js";
 import '../lucide-icons/dot.js';
+import { DileIconWrapperBase } from "./DileIconWrapperBase.js";
 
-export class DileLucideIcon extends HTMLElement {
+export class DileLucideIcon extends DileIconWrapperBase {
   constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.adoptedStyleSheets = [iconStylesNamedIcons];
-    this.icon = "dot";
-    this.rounded = false;
-    this.render();
-
-  }
-
-  render() {
-    this.shadowRoot.innerHTML = `
-      <dile-lucide-icon-${this.icon} ${this.rounded ? 'rounded': ''} class="flex"></dile-lucide-icon-${this.icon}>
-    `;
-  }
-
-  static get observedAttributes() {
-    return ['icon', 'rounded'];
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === 'icon' && newValue !== null) {
-      this.icon = newValue;
-      this.render();
-    }
-    if (name === 'rounded') {
-      this.rounded = newValue !== null;
-      this.render();
-    }
+    super('dot', 'lucide');
   }
-}
+}

package/src/DileMaterialIcon.js

@@ -1,38 +1,8 @@
-import { iconStylesNamedIcons } from "./lucideIconStyles.js";
 import '../material/home.js';
+import { DileIconWrapperBase } from "./DileIconWrapperBase.js";
 
-export class DileMaterialIcon extends HTMLElement {
+export class DileMaterialIcon extends DileIconWrapperBase {
   constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.adoptedStyleSheets = [iconStylesNamedIcons];
-    this.icon = "home";
-    this.rounded = false;
-    this.render();
-
-  }
-
-  render() {
-    this.shadowRoot.innerHTML = `
-      <dile-material-icon-${this.icon} ${this.rounded ? 'rounded': ''} class="flex"></dile-material-icon-${this.icon}>
-    `;
-  }
-
-  static get observedAttributes() {
-    return ['icon', 'rounded'];
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === 'icon' && newValue !== null) {
-      this.icon = newValue;
-      this.render();
-    }
-    if (name === 'rounded' && newValue !== null) {
-      this.rounded = true;
-      this.render();
-    } else {
-      this.rounded = false;
-      this.render();
-    }
+    super('circle', 'material');
   }
 }

package/src/{lucideIconStyles.js → iconStyles.js}

@@ -1,5 +1,5 @@
-export const lucideIconStyles = new CSSStyleSheet();
-lucideIconStyles.replaceSync(`
+export const iconStyles = new CSSStyleSheet();
+iconStyles.replaceSync(`
   :host {
     display: inline-block;
     transition-duration: var(--dile-icon-transition-duration, 0.3s);