@crowdfarming/oliva-ds 1.11.0 → 1.12.0-rc.2

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -2063,58 +2063,48 @@ class IconComponent {
     }
     /**
      * Updates the SVG content dynamically based on the current icon name and color.
-     * This method performs the following operations:
-     * 1. Creates a temporary DOM element to manipulate the SVG
-     * 2. Sets responsive width and height attributes (100%)
+     * This method performs the following operations using string manipulation (SSR-compatible):
+     * 1. Gets the raw SVG string from our icons object
+     * 2. Uses regex to set responsive width and height attributes (100%)
      * 3. Applies dynamic color styling using CSS variables
      * 4. Sanitizes the HTML for safe rendering
-     * 5. Cleans up the temporary DOM element to prevent memory leaks
      */
     updateIconSvg() {
-        // Create a temporary div element to manipulate the SVG DOM
-        // This allows us to modify SVG attributes programmatically
-        const iconElement = document.createElement('div');
-        // Insert the raw SVG content from our icons object into the temporary element
-        // The iconName is cast to IconName type for type safety
-        iconElement.innerHTML = this.icons[this.iconName];
-        // Find the SVG element within our temporary container
-        const svgElement = iconElement.querySelector('svg');
-        if (svgElement) {
-            // Set responsive dimensions - width and height to 100% for flexible scaling
-            // This ensures the icon scales properly within its container
-            svgElement.setAttribute('width', '100%');
-            svgElement.setAttribute('height', '100%');
-            // Find all path elements within the SVG
-            // Path elements are the main components that define the icon's shape
-            const pathElements = svgElement.querySelectorAll('path');
-            // Apply dynamic color styling if both path elements exist and a color is specified
-            if (pathElements.length && this.iconColor) {
-                // Create a CSS variable reference for the color
-                // This allows the icon to use theme colors (e.g., var(--color-primary))
-                const fill = `var(--color-${this.iconColor})`;
-                // Apply the fill color to all path elements in the SVG
-                // This ensures consistent coloring across all parts of the icon
-                pathElements.forEach((pathElement) => {
-                    pathElement.setAttribute('fill', fill);
-                });
-            }
+        if (!this.iconName || !this.icons[this.iconName]) {
+            this.iconSvg = '';
+            return;
         }
-        // Convert the manipulated HTML back to a SafeHtml object
+        let svgString = this.icons[this.iconName];
+        // Set responsive dimensions - width and height to 100% for flexible scaling
+        // This ensures the icon scales properly within its container
+        // First, remove any existing width and height attributes
+        svgString = svgString.replace(/(width|height)="[^"]*"/g, '');
+        // Then add width="100%" height="100%" to the SVG element
+        svgString = svgString.replace(/<svg([^>]*)>/, '<svg$1 width="100%" height="100%">');
+        // Apply dynamic color styling if a color is specified
+        if (this.iconColor) {
+            // Create a CSS variable reference for the color
+            // This allows the icon to use theme colors (e.g., var(--color-primary))
+            const fill = `var(--color-${this.iconColor})`;
+            // Apply the fill color to all path elements in the SVG using regex
+            // This ensures consistent coloring across all parts of the icon
+            svgString = svgString.replace(/<path([^>]*?)>/g, (match, attributes) => {
+                // Remove any existing fill attribute
+                const cleanAttributes = attributes.replace(/fill="[^"]*"/g, '');
+                return `<path${cleanAttributes} fill="${fill}">`;
+            });
+        }
+        // Convert the manipulated HTML string to a SafeHtml object
         // This bypasses Angular's security restrictions for trusted content
         // and allows the SVG to be rendered safely in the template
-        this.iconSvg = this.sanitizer.bypassSecurityTrustHtml(iconElement.innerHTML);
-        // Clean up the temporary DOM element to prevent memory leaks
-        // Remove the entire element from the DOM
-        if (iconElement.parentNode) {
-            iconElement.parentNode.removeChild(iconElement);
-        }
+        this.iconSvg = this.sanitizer.bypassSecurityTrustHtml(svgString);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconComponent, isStandalone: true, selector: "lib-icon", inputs: { size: "size", icon: "icon", name: "name", color: "color" }, ngImport: i0, template: "<div\n  class=\"lib-icon\"\n  [ngClass]=\"size\"\n  [innerHTML]=\"iconSvg\"\n></div>\n", styles: [":host{display:contents}.lib-icon{display:inline-block}.lib-icon.lg{height:1.5rem}.lib-icon.md{height:1.25rem}.lib-icon.sm{height:1rem}.lib-icon.xs{height:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconComponent, isStandalone: true, selector: "lib-icon", inputs: { size: "size", icon: "icon", name: "name", color: "color" }, ngImport: i0, template: "<div\n  class=\"lib-icon\"\n  [ngClass]=\"size\"\n  [innerHTML]=\"iconSvg\"\n></div>\n", styles: [":host{display:contents}.lib-icon{display:inline-block;pointer-events:none}.lib-icon.lg{height:1.5rem}.lib-icon.md{height:1.25rem}.lib-icon.sm{height:1rem}.lib-icon.xs{height:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-icon', imports: [CommonModule], template: "<div\n  class=\"lib-icon\"\n  [ngClass]=\"size\"\n  [innerHTML]=\"iconSvg\"\n></div>\n", styles: [":host{display:contents}.lib-icon{display:inline-block}.lib-icon.lg{height:1.5rem}.lib-icon.md{height:1.25rem}.lib-icon.sm{height:1rem}.lib-icon.xs{height:.875rem}\n"] }]
+            args: [{ selector: 'lib-icon', imports: [CommonModule], template: "<div\n  class=\"lib-icon\"\n  [ngClass]=\"size\"\n  [innerHTML]=\"iconSvg\"\n></div>\n", styles: [":host{display:contents}.lib-icon{display:inline-block;pointer-events:none}.lib-icon.lg{height:1.5rem}.lib-icon.md{height:1.25rem}.lib-icon.sm{height:1rem}.lib-icon.xs{height:.875rem}\n"] }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { size: [{
                 type: Input
             }], icon: [{