@dile/ui 3.3.0 → 3.4.0

package/components/selector/src/DileSelectorItem.js

@@ -1,5 +1,6 @@
 import { html, css, LitElement } from "lit";
 import { DileSelectableItem } from "../../../mixins/selectable/index.js";
+import '@dile/iconlib/dile-iconlib.js';
 
 const icons = {
   "navigate_next": html`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>`,
@@ -9,6 +10,9 @@ const icons = {
   "add": html`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`,
 }
 
+const ICONLIB_FOLDERS = { material: 'material-icons', lucide: 'lucide-icons', fontawesome: 'fontawesome-icons' };
+const warnedIcons = new Set();
+
 export class DileSelectorItem  extends DileSelectableItem(LitElement) {
 
   static get styles() {
@@ -48,6 +52,13 @@ export class DileSelectorItem  extends DileSelectableItem(LitElement) {
       .selected .icon svg {
         fill: var(--dile-selector-selected-icon-color, #fff);
       }
+      .icon dile-iconlib {
+        --dile-icon-color: var(--dile-selector-icon-color, var(--dile-selector-primary-color, #039be5));
+        --dile-icon-size: var(--dile-selector-icon-size, 20px);
+      }
+      .selected .icon dile-iconlib {
+        --dile-icon-color: var(--dile-selector-selected-icon-color, #fff);
+      }
       a {
         display: block;
         text-decoration: var(--dile-selector-text-decoration, none);
@@ -58,6 +69,7 @@ export class DileSelectorItem  extends DileSelectableItem(LitElement) {
   static get properties() {
     return {
       icon: { type: String },
+      iconlibIcon: { type: String },
       href: { type: String },
     };
   }
@@ -83,6 +95,10 @@ export class DileSelectorItem  extends DileSelectableItem(LitElement) {
           ? html`<div class="icon">${this.iconElement(this.icon)}</div>`
           : ''
         }
+        ${this.iconlibIcon
+          ? html`<div class="icon">${this.renderIconlibIcon(this.iconlibIcon)}</div>`
+          : ''
+        }
         <div class="line"><slot></slot></div>
       </article>
     `;
@@ -91,4 +107,24 @@ export class DileSelectorItem  extends DileSelectableItem(LitElement) {
     return icons[icon];
   }
 
+  renderIconlibIcon(icon) {
+    const dotIndex = icon.indexOf('.');
+    if (dotIndex === -1) {
+      return html`<dile-iconlib icon="${icon}"></dile-iconlib>`;
+    }
+    const family = icon.slice(0, dotIndex);
+    const name = icon.slice(dotIndex + 1);
+    const tagName = `dile-${family}-icon-${name}`;
+    if (customElements.get(tagName)) {
+      return html`<dile-iconlib icon="${icon}"></dile-iconlib>`;
+    }
+    if (!warnedIcons.has(icon)) {
+      warnedIcons.add(icon);
+      const folder = ICONLIB_FOLDERS[family] || family;
+      console.warn(`dile-selector-item: icon "${icon}" is not registered. Import "@dile/iconlib/${folder}/${name}.js" before using it.`);
+    }
+    customElements.whenDefined(tagName).then(() => this.requestUpdate());
+    return '';
+  }
+
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -21,11 +21,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
+    "@dile/iconlib": "^1.4.0",
     "@dile/icons": "^2.5.1",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e123ebdc49cb479a03e4b5689ddc6fbfb4ab39b1"
+  "gitHead": "20981504f9a5fc7a97865f95860b76de9aa9c3f8"
 }