@dile/iconlib 1.7.0 → 1.8.0

package/src/DileIconlib.js

@@ -1,7 +1,7 @@
 import '../lucide-icons/dot.js';
 import { DileIconWrapperBase } from "./DileIconWrapperBase.js";
 
-const KNOWN_FAMILIES = ['lucide', 'material', 'fontawesome', 'phosphor', 'tabler'];
+const KNOWN_FAMILIES = ['lucide', 'material', 'fontawesome', 'phosphor', 'tabler', 'remixicon'];
 
 export class DileIconlib extends DileIconWrapperBase {
   constructor() {

package/src/DileRemixiconBadge.js

@@ -0,0 +1,44 @@
+import { badgeStyles } from "./remixiconBadgeStyles.js";
+import '../dile-remixicon-icon.js';
+
+export class DileRemixiconBadge extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.adoptedStyleSheets = [badgeStyles];
+    this.icon = "heart-line";
+    this.variant = null;
+    this.rounded = false;
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <div class="badge-container">
+        <div class="icon-wrapper">
+          <dile-remixicon-icon icon="${this.icon}"></dile-remixicon-icon>
+        </div>
+        <div class="text-wrapper">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  static get observedAttributes() {
+    return ['icon', 'variant', 'rounded'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'icon' && newValue !== null) {
+      this.icon = newValue;
+      this.render();
+    }
+    if (name === 'variant' && newValue !== null) {
+      this.variant = newValue;
+    }
+    if (name === 'rounded') {
+      this.rounded = newValue !== null;
+    }
+  }
+}

package/src/DileRemixiconIcon.js

@@ -0,0 +1,8 @@
+import '../remixicon-icons/heart-line.js';
+import { DileIconWrapperBase } from "./DileIconWrapperBase.js";
+
+export class DileRemixiconIcon extends DileIconWrapperBase {
+  constructor() {
+    super('heart-line', 'remixicon');
+  }
+}

package/src/remixiconBadgeStyles.js

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