@ngxi/devicon-plain 0.12.23 → 0.12.25

package/dist/index.js

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
-import { inject, input, computed, Directive } from "@angular/core";
-import { DomSanitizer } from "@angular/platform-browser";
+import { inject, ElementRef, PLATFORM_ID, input, numberAttribute, effect, Directive } from "@angular/core";
+import { isPlatformBrowser } from "@angular/common";
 const deviconPlainAarch64 = {
   "body": '<path fill="currentColor" d="m110.986 10.21l-14.24 5.822a.13.13 0 0 0-.039.217c11.87 11.118 18.654 26.46 18.68 42.812c.025 16.788-7.396 33.121-20.07 44.035q-15.714 13.532-36.825 14.431v.002q1.163.161 2.344.21c19.392.774 38.297-7.125 51.066-21.64Q126.899 79.055 128 55.908v-4.793q-1.128-23.501-16.795-40.904ZM51.96 11.245c-10.652-.19-21.35 2.82-30.457 9.107Q5.009 31.742.002 51.508a.07.07 0 0 0 .004.049a.3.3 0 0 1 .022.049q.027.064.05-.002C5.38 37.117 17.432 25.636 32.376 21.518c12.605-3.474 26.302-2.043 37.713 4.746a.426.428 49.3 0 0 .379.027l11.654-4.748a.114.114 0 0 0 .024-.199c-8.927-6.518-19.534-9.909-30.186-10.1Zm43.916 5.681l-11.594 4.721a.093.093 0 0 0-.023.16A53.4 53.4 0 0 1 97.586 37.38c11.53 20.288 8.46 46.158-7.752 63.008q-12.96 13.468-31.816 16.138a.1.1 0 0 0-.05.026l-.046.037q-.037.03.012.03c33.984-.752 59.998-30.368 56.162-64.249c-1.544-13.614-8.04-26.026-17.961-35.394a.25.25 0 0 0-.26-.049zm-12.793 5.21l-11.752 4.79a.03.03 0 0 0-.006.053q10.042 6.38 16.018 16.424q5.4 9.073 6.506 19.414c1.51 14.114-3.346 28.664-13.256 38.755q-11.64 11.855-27.578 14.217q-1.686.25.016.197c22.304-.681 42.007-15.921 48.39-37.29c2.335-7.819 2.927-16.497 1.344-24.582q-3.824-19.528-19.524-31.955a.159.157 53.2 0 0-.158-.024zM42.01 26.417c-.697.008-1.39.037-2.017.041q-.097 0-.096.098l-.074 13.264q-.003.187.187.187h1.668q.106 0 .106-.107v-5.653q0-.075.076-.09q1.612-.24 2.644.954c1.22 1.41 2.217 3.188 3.182 4.79a.207.21 75.2 0 0 .176.102l2.09.01q.137 0 .06-.111a94 94 0 0 1-2.937-4.6q-.436-.729-1.543-1.644q-.097-.08.017-.133c2.934-1.372 2.635-5.641-.322-6.742c-.885-.33-2.056-.378-3.217-.366m14.772 1.16c-1.808.03-3.567.723-4.944 2.311c-2.904 3.351-2.282 8.469 1.738 10.666q2.916 1.594 6.418.96a.18.18 0 0 0 .15-.134l.557-1.84a.097.095 89.7 0 0-.119-.12c-2.076.64-4.501.558-6.35-.68c-2.739-1.834-2.851-5.329-.755-7.694c2.633-2.97 6.852-1.427 9.166 1.268q.105.125.154-.031l.549-1.795a.185.185 0 0 0-.053-.205c-1.781-1.678-4.187-2.742-6.511-2.705zm-14.916.587l1.572.002a2.117 1.86.1 0 1 2.113 1.865v.44a2.117 1.86.1 0 1-2.121 1.857l-1.574-.004a.05.05 0 0 1-.049-.05l.01-4.066a.05.05 0 0 1 .049-.044m-12.557.458l-1.227.342a.08.08 0 0 0-.058.069l-1.637 14.543a.08.08 0 0 0 .102.085l1.758-.496a.08.08 0 0 0 .058-.066l.47-4.19a.08.08 0 0 1 .057-.068l5.243-1.521a.08.08 0 0 1 .084.025l2.744 3.268a.08.08 0 0 0 .084.025l1.76-.527a.08.08 0 0 0 .039-.127l-9.393-11.336a.08.08 0 0 0-.084-.026m37.887 1.708a.1.1 0 0 0-.059.052l-5.785 12.084a.1.1 0 0 0 .049.137l1.6.756a.1.1 0 0 0 .136-.05l2.443-5.13a.1.1 0 0 1 .135-.047l6.426 3.063a.1.1 0 0 1 .047.136l-2.455 5.133a.1.1 0 0 0 .048.135l1.594.756a.1.1 0 0 0 .137-.047l5.783-12.082a.1.1 0 0 0-.049-.139l-1.595-.746a.1.1 0 0 0-.137.047l-2.455 5.12a.1.1 0 0 1-.135.046L66.5 36.497a.1.1 0 0 1-.049-.135l2.467-5.127a.1.1 0 0 0-.047-.135l-1.597-.764a.1.1 0 0 0-.078-.006M29.58 31.877a.06.06 0 0 1 .067.022l3.125 3.808a.064.064 0 0 1-.031.1l-3.653 1.09a.064.064 0 0 1-.082-.068l.53-4.897a.06.06 0 0 1 .044-.055m-15.449 2.748l-1.12.584a.08.08 0 0 0-.046.08l1.504 14.559a.083.083 0 0 0 .12.066l1.603-.85a.08.08 0 0 0 .043-.08l-.428-4.195a.08.08 0 0 1 .041-.082l4.791-2.593a.08.08 0 0 1 .09.006l3.383 2.6a.08.08 0 0 0 .088.005l1.611-.871a.083.083 0 0 0 .012-.139L14.22 34.631a.08.08 0 0 0-.09-.006zm.932 3.131a.07.07 0 0 1 .07.004l3.905 3.049a.066.066 0 0 1-.012.11l-3.338 1.806a.066.066 0 0 1-.096-.049l-.562-4.857a.07.07 0 0 1 .033-.063m51.44 15.957a.1.1 0 0 0-.065.033L42.12 83.432a.1.1 0 0 0-.02.056l.002 3.112a.087.087 0 0 0 .086.086h20.256a.087.087 0 0 1 .088.088v15.597a.087.087 0 0 0 .086.088h6.76a.087.087 0 0 0 .087-.088V86.774a.087.087 0 0 1 .086-.088h5.014a.087.087 0 0 0 .086-.086l.002-6.125a.087.087 0 0 0-.086-.086H69.55a.087.087 0 0 1-.086-.088v-26.5a.087.087 0 0 0-.088-.088zm-38.032.035q-.036-.006-.076.022C16.997 61.137 8.625 73.473 9.172 87.426q.11 2.807 1.15 5.672c2.056 5.652 6.66 9.316 12.678 9.894q2.257.219 4.217-.142c6.838-1.251 11.76-7.515 11.717-14.363c-.072-11.259-11.231-17.035-20.855-11.993q-.177.092-.116-.095c2.32-7.213 8.2-13.472 14.602-17.317a.097.097 0 0 0 .025-.142l-4.054-5.147a.1.1 0 0 0-.065-.045M62.49 66.785a.06.06 0 0 1 .043.059v13.48a.064.064 0 0 1-.065.065H51.606a.064.064 0 0 1-.051-.104l10.863-13.482a.06.06 0 0 1 .07-.018zM23.327 81.22c4.311-.185 8.4 2.378 8.603 7.066c.167 3.919-1.955 7.198-5.967 8.047a7.7 7.7 0 0 1-3.431-.054c-5.591-1.338-7.36-7.344-6.15-12.344a.3.3 0 0 1 .105-.16q2.697-2.06 5.976-2.48q.433-.057.864-.075"/>',
   "width": 128,
@@ -4365,37 +4365,47 @@ const deviconPlainWeb3 = {
 };
 class Ngxi {
   constructor() {
-    this.sanitizer = inject(DomSanitizer);
-    this.icon = input(...[]);
-    this.width = input(...[]);
-    this.height = input(...[]);
+    this.el = inject(ElementRef);
+    this.platformId = inject(PLATFORM_ID);
+    this.icon = input.required(...[]);
+    this.width = input(void 0, ...[{
+      transform: numberAttribute
+    }]);
+    this.height = input(void 0, ...[{
+      transform: numberAttribute
+    }]);
     this.viewBox = input(...[]);
-    this.resolvedWidth = computed(() => this.width() ?? this.icon()?.width, ...[]);
-    this.resolvedHeight = computed(() => this.height() ?? this.icon()?.height, ...[]);
-    this.resolvedViewBox = computed(() => this.viewBox() ?? this.icon()?.viewBox, ...[]);
-    this.safeSVG = computed(() => this.sanitizer.bypassSecurityTrustHtml(this.icon()?.body ?? ""), ...[]);
+    effect(() => {
+      this.updateSvg();
+    });
+  }
+  updateSvg() {
+    if (isPlatformBrowser(this.platformId)) {
+      const svg = this.el.nativeElement;
+      svg.innerHTML = "";
+      if (!this.icon) {
+        return;
+      }
+      svg.innerHTML = this.icon().body;
+      svg.setAttribute("width", (this.width() ?? this.icon()?.width ?? "").toString());
+      svg.setAttribute("height", (this.height() ?? this.icon()?.height ?? "").toString());
+      svg.setAttribute("viewBox", this.viewBox() ?? this.icon()?.viewBox ?? "");
+    }
   }
   static {
     this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: Ngxi, deps: [], target: i0.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.2", type: Ngxi, isStandalone: true, selector: "svg[ngxi]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, viewBox: { classPropertyName: "viewBox", publicName: "viewBox", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.width": "resolvedWidth()", "attr.height": "resolvedHeight()", "attr.viewBox": "resolvedViewBox()", "innerHTML": "safeSVG()" } }, ngImport: i0 });
+    this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.2", type: Ngxi, isStandalone: true, selector: "svg[ngxi]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, viewBox: { classPropertyName: "viewBox", publicName: "viewBox", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
   }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: Ngxi, decorators: [{
   type: Directive,
   args: [{
-    standalone: true,
     selector: "svg[ngxi]",
-    host: {
-      "role": "img",
-      "[attr.width]": "resolvedWidth()",
-      "[attr.height]": "resolvedHeight()",
-      "[attr.viewBox]": "resolvedViewBox()",
-      "[innerHTML]": "safeSVG()"
-    }
+    standalone: true
   }]
-}] });
+}], ctorParameters: () => [] });
 class NgxiDeviconPlain {
   constructor() {
     this.ngxiDeviconPlain = input.required(...[]);