Update to v0.57.0

esm2022/lib/components/atoms/icon/icon.constants.mjs

@@ -0,0 +1,8 @@
+export const icons = ` 
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+    <symbol id="arrow-down" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
+    </symbol>
+</svg>
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5jb25zdGFudHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jaXJjbGV0b25lL3NyYy9saWIvY29tcG9uZW50cy9hdG9tcy9pY29uL2ljb24uY29uc3RhbnRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLEtBQUssR0FBRzs7Ozs7O0NBTXBCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgaWNvbnMgPSBgIFxuPHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgc3R5bGU9XCJkaXNwbGF5Om5vbmVcIj5cbiAgICA8c3ltYm9sIGlkPVwiYXJyb3ctZG93blwiIHZpZXdCb3g9XCIwIDAgMjQgMjRcIj5cbiAgICAgICAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiIHN0cm9rZS1saW5lam9pbj1cInJvdW5kXCIgZD1cIk0xOS41IDEzLjVMMTIgMjFtMCAwbC03LjUtNy41TTEyIDIxVjNcIiAvPlxuICAgIDwvc3ltYm9sPlxuPC9zdmc+XG5gO1xuIl19

fesm2022/circletone.mjs

@@ -1,9 +1,20 @@
-import { NgClass } from '@angular/common';
+import { DOCUMENT, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Inject, Input } from '@angular/core';
+
+const icons = ` 
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+    <symbol id="arrow-down" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
+    </symbol>
+</svg>
+`;
 
 class IconComponent {
-    constructor() {
+    constructor(renderer, document, el) {
+        this.renderer = renderer;
+        this.document = document;
+        this.el = el;
         this.icon = '';
         this.iconClass = '';
         this.fill = 'currentColor';
@@ -13,7 +24,7 @@ class IconComponent {
         this.iconPath = '';
     }
     ngOnInit() {
-        this.iconPath = '';
+        this.injectSVG();
         this.strokeColor = this.getFormattedColor(this.strokeColor);
         this.fill = this.getFormattedColor(this.fill);
     }
@@ -24,13 +35,25 @@ class IconComponent {
         }
         return color;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: IconComponent, isStandalone: true, selector: "ct-icon", inputs: { icon: "icon", iconClass: "iconClass", fill: "fill", strokeWidth: "strokeWidth", strokeColor: "strokeColor", size: "size" }, ngImport: i0, template: "<svg\n  [ngClass]=\"iconClass\"\n  [attr.fill]=\"fill\"\n  [attr.stroke-width]=\"strokeWidth\"\n  [attr.stroke]=\"strokeColor\"\n  class=\"flex size-full\">\n  <use [attr.xlink:href]=\"iconPath\"></use>\n</svg>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    getIconPath() {
+        return `#${this.icon}`;
+    }
+    injectSVG() {
+        const svgElement = this.renderer.createElement('div');
+        this.renderer.setProperty(svgElement, 'innerHTML', icons);
+        this.renderer.setStyle(svgElement, 'display', 'none');
+        this.renderer.appendChild(this.document.body, svgElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: IconComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: IconComponent, isStandalone: true, selector: "ct-icon", inputs: { icon: "icon", iconClass: "iconClass", fill: "fill", strokeWidth: "strokeWidth", strokeColor: "strokeColor", size: "size" }, ngImport: i0, template: "<svg\n  [ngClass]=\"iconClass\"\n  [attr.fill]=\"fill\"\n  [attr.stroke-width]=\"strokeWidth\"\n  [attr.stroke]=\"strokeColor\"\n  class=\"flex size-full\">\n  <use [attr.xlink:href]=\"getIconPath()\"></use>\n</svg>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ct-icon', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  [ngClass]=\"iconClass\"\n  [attr.fill]=\"fill\"\n  [attr.stroke-width]=\"strokeWidth\"\n  [attr.stroke]=\"strokeColor\"\n  class=\"flex size-full\">\n  <use [attr.xlink:href]=\"iconPath\"></use>\n</svg>\n" }]
-        }], propDecorators: { icon: [{
+            args: [{ selector: 'ct-icon', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  [ngClass]=\"iconClass\"\n  [attr.fill]=\"fill\"\n  [attr.stroke-width]=\"strokeWidth\"\n  [attr.stroke]=\"strokeColor\"\n  class=\"flex size-full\">\n  <use [attr.xlink:href]=\"getIconPath()\"></use>\n</svg>\n" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef }], propDecorators: { icon: [{
                 type: Input
             }], iconClass: [{
                 type: Input

lib/components/atoms/icon/icon.component.d.ts

@@ -1,6 +1,9 @@
-import { OnInit } from '@angular/core';
+import { ElementRef, OnInit, Renderer2 } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class IconComponent implements OnInit {
+    private renderer;
+    private document;
+    private el;
     icon: string;
     iconClass: string;
     fill: string;
@@ -8,8 +11,11 @@ export declare class IconComponent implements OnInit {
     strokeColor: string;
     size: string;
     iconPath: string;
+    constructor(renderer: Renderer2, document: Document, el: ElementRef);
     ngOnInit(): void;
     getFormattedColor(color: string): string;
+    getIconPath(): string;
+    private injectSVG;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "ct-icon", never, { "icon": { "alias": "icon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "strokeColor": { "alias": "strokeColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
 }

lib/components/atoms/icon/icon.constants.d.ts

@@ -0,0 +1 @@
+export declare const icons = " \n<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display:none\">\n    <symbol id=\"arrow-down\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3\" />\n    </symbol>\n</svg>\n";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "circletone",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0"