@dile/iconlib 1.2.1 → 1.3.0

package/material/wrap-text.js

@@ -0,0 +1,9 @@
+import { DileBaseIcon } from '../src/DileBaseIcon.js';
+
+export class DileIconlibWrapText extends DileBaseIcon {
+  getSvgIcon() {
+    return `<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3 3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"/></svg>`;
+  }
+}
+
+customElements.define('dile-material-icon-wrap-text', DileIconlibWrapText);

package/material/wrong-location.js

@@ -0,0 +1,9 @@
+import { DileBaseIcon } from '../src/DileBaseIcon.js';
+
+export class DileIconlibWrongLocation extends DileBaseIcon {
+  getSvgIcon() {
+    return `<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14,10V3.26C13.35,3.09,12.68,3,12,3c-4.2,0-8,3.22-8,8.2c0,3.32,2.67,7.25,8,11.8c5.33-4.55,8-8.48,8-11.8 c0-0.41-0.04-0.81-0.09-1.2H14z M12,13c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2s2,0.9,2,2C14,12.1,13.1,13,12,13z"/><polygon points="22.54,2.88 21.12,1.46 19,3.59 16.88,1.46 15.46,2.88 17.59,5 15.46,7.12 16.88,8.54 19,6.41 21.12,8.54 22.54,7.12 20.41,5"/></g></g></svg>`;
+  }
+}
+
+customElements.define('dile-material-icon-wrong-location', DileIconlibWrongLocation);

package/material/wysiwyg.js

@@ -0,0 +1,9 @@
+import { DileBaseIcon } from '../src/DileBaseIcon.js';
+
+export class DileIconlibWysiwyg extends DileBaseIcon {
+  getSvgIcon() {
+    return `<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/><path d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.11,3,19,3z M19,19H5V7h14V19z M17,12H7v-2 h10V12z M13,16H7v-2h6V16z"/></g></svg>`;
+  }
+}
+
+customElements.define('dile-material-icon-wysiwyg', DileIconlibWysiwyg);

package/material/yard.js

@@ -0,0 +1,9 @@
+import { DileBaseIcon } from '../src/DileBaseIcon.js';
+
+export class DileIconlibYard extends DileBaseIcon {
+  getSvgIcon() {
+    return `<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><path d="M20,2H4C2.9,2,2,2.9,2,4v16c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M8,8.22c0-0.86,0.7-1.56,1.56-1.56 c0.33,0,0.64,0.1,0.89,0.28l-0.01-0.12c0-0.86,0.7-1.56,1.56-1.56s1.56,0.7,1.56,1.56l-0.01,0.12c0.26-0.18,0.56-0.28,0.89-0.28 c0.86,0,1.56,0.7,1.56,1.56c0,0.62-0.37,1.16-0.89,1.4C15.63,9.87,16,10.41,16,11.03c0,0.86-0.7,1.56-1.56,1.56 c-0.33,0-0.64-0.11-0.89-0.28l0.01,0.12c0,0.86-0.7,1.56-1.56,1.56s-1.56-0.7-1.56-1.56l0.01-0.12c-0.26,0.18-0.56,0.28-0.89,0.28 C8.7,12.59,8,11.89,8,11.03c0-0.62,0.37-1.16,0.89-1.4C8.37,9.38,8,8.84,8,8.22z M12,19c-3.31,0-6-2.69-6-6 C9.31,13,12,15.69,12,19c0-3.31,2.69-6,6-6C18,16.31,15.31,19,12,19z"/><circle cx="12" cy="9.62" r="1.56"/></g></g></svg>`;
+  }
+}
+
+customElements.define('dile-material-icon-yard', DileIconlibYard);

package/material/youtube-searched-for.js

@@ -0,0 +1,9 @@
+import { DileBaseIcon } from '../src/DileBaseIcon.js';
+
+export class DileIconlibYoutubeSearchedFor extends DileBaseIcon {
+  getSvgIcon() {
+    return `<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/><path d="M17.01 14h-.8l-.27-.27c.98-1.14 1.57-2.61 1.57-4.23 0-3.59-2.91-6.5-6.5-6.5s-6.5 3-6.5 6.5H2l3.84 4 4.16-4H6.51C6.51 7 8.53 5 11.01 5s4.5 2.01 4.5 4.5c0 2.48-2.02 4.5-4.5 4.5-.65 0-1.26-.14-1.82-.38L7.71 15.1c.97.57 2.09.9 3.3.9 1.61 0 3.08-.59 4.22-1.57l.27.27v.79l5.01 4.99L22 19l-4.99-5z"/></svg>`;
+  }
+}
+
+customElements.define('dile-material-icon-youtube-searched-for', DileIconlibYoutubeSearchedFor);

package/material/zoom-in-map.js

@@ -0,0 +1,9 @@
+import { DileBaseIcon } from '../src/DileBaseIcon.js';
+
+export class DileIconlibZoomInMap extends DileBaseIcon {
+  getSvgIcon() {
+    return `<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><path d="M9,9l0-6L7,3l0,2.59L3.91,2.5L2.5,3.91L5.59,7L3,7l0,2L9,9z M21,9V7l-2.59,0l3.09-3.09L20.09,2.5L17,5.59V3l-2,0l0,6L21,9z M3,15l0,2h2.59L2.5,20.09l1.41,1.41L7,18.41L7,21h2l0-6L3,15z M15,15l0,6h2v-2.59l3.09,3.09l1.41-1.41L18.41,17H21v-2L15,15z"/></g></svg>`;
+  }
+}
+
+customElements.define('dile-material-icon-zoom-in-map', DileIconlibZoomInMap);

package/material/zoom-in.js

@@ -0,0 +1,9 @@
+import { DileBaseIcon } from '../src/DileBaseIcon.js';
+
+export class DileIconlibZoomIn extends DileBaseIcon {
+  getSvgIcon() {
+    return `<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/></svg>`;
+  }
+}
+
+customElements.define('dile-material-icon-zoom-in', DileIconlibZoomIn);

package/material/zoom-out-map.js

@@ -0,0 +1,9 @@
+import { DileBaseIcon } from '../src/DileBaseIcon.js';
+
+export class DileIconlibZoomOutMap extends DileBaseIcon {
+  getSvgIcon() {
+    return `<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M15,3l2.3,2.3l-2.89,2.87l1.42,1.42L18.7,6.7L21,9V3H15z M3,9l2.3-2.3l2.87,2.89l1.42-1.42L6.7,5.3L9,3H3V9z M9,21 l-2.3-2.3l2.89-2.87l-1.42-1.42L5.3,17.3L3,15v6H9z M21,15l-2.3,2.3l-2.87-2.89l-1.42,1.42l2.89,2.87L15,21h6V15z"/></g></g></g></svg>`;
+  }
+}
+
+customElements.define('dile-material-icon-zoom-out-map', DileIconlibZoomOutMap);

package/material/zoom-out.js

@@ -0,0 +1,9 @@
+import { DileBaseIcon } from '../src/DileBaseIcon.js';
+
+export class DileIconlibZoomOut extends DileBaseIcon {
+  getSvgIcon() {
+    return `<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/></svg>`;
+  }
+}
+
+customElements.define('dile-material-icon-zoom-out', DileIconlibZoomOut);

package/package.json

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

package/src/DileFontawesomeBadge.js

@@ -0,0 +1,44 @@
+import { badgeStyles } from "./fontawesomeBadgeStyles.js";
+import '../dile-fontawesome-icon.js';
+
+export class DileFontawesomeBadge extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.adoptedStyleSheets = [badgeStyles];
+    this.icon = "dot-circle";
+    this.variant = null;
+    this.rounded = false;
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <div class="badge-container">
+        <div class="icon-wrapper">
+          <dile-fontawesome-icon icon="${this.icon}"></dile-fontawesome-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/DileMaterialBadge.js

@@ -0,0 +1,44 @@
+import { badgeStyles } from "./materialBadgeStyles.js";
+import '../dile-material-icon.js';
+
+export class DileMaterialBadge extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.adoptedStyleSheets = [badgeStyles];
+    this.icon = "home";
+    this.variant = null;
+    this.rounded = false;
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <div class="badge-container">
+        <div class="icon-wrapper">
+          <dile-material-icon icon="${this.icon}"></dile-material-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/DileMaterialIcon.js

@@ -0,0 +1,38 @@
+import { iconStylesNamedIcons } from "./lucideIconStyles.js";
+import '../material/home.js';
+
+export class DileMaterialIcon extends HTMLElement {
+  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();
+    }
+  }
+}

package/src/fontawesomeBadgeStyles.js

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

package/src/materialBadgeStyles.js

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