@testgorilla/tgo-ui 8.19.1 → 9.1.0

package/fesm2022/testgorilla-tgo-ui-components-icon.mjs

@@ -1,11 +1,10 @@
+import { NgStyle, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Input, HostBinding, Optional, Inject, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { Injectable, Input, HostBinding, Optional, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/platform-browser';
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 /* eslint-disable */
 /**
@@ -1577,6 +1576,7 @@ class IconsService {
             return;
         }
         const host = document.createElement('div');
+        // eslint-disable-next-line no-unsanitized/property -- SECURITY: SHARED_SVG_DEFS is the library's own build-time SVG gradient markup (first-party constant, not user input)
         host.innerHTML = SHARED_SVG_DEFS;
         document.body.insertBefore(host.firstElementChild, document.body.firstChild);
     }
@@ -1655,58 +1655,65 @@ class IconComponent {
     }
     //Add icon to matIcon registry
     addIcon() {
+        const filename = this.useFullIconName ? this.resolveFullIconName() : this.resolveShortIconName();
+        this.registerIcon(filename);
+    }
+    resolveShortIconName() {
         let filename;
-        if (!this.useFullIconName) {
-            if (this.filled || this.name?.includes('filled')) {
-                this._name = this.name.replace(/-in-line/, '');
-                filename =
-                    this.applicationTheme === 'classic'
-                        ? tgoIcons.find(icon => icon === this.filledIconName)
-                        : tgoRebrandIcons.find(icon => icon === this.filledIconName);
+        if (this.filled || this.name?.includes('filled')) {
+            this._name = this.name.replace(/-in-line/, '');
+            filename =
+                this.applicationTheme === 'classic'
+                    ? tgoIcons.find(icon => icon === this.filledIconName)
+                    : tgoRebrandIcons.find(icon => icon === this.filledIconName);
+        }
+        else {
+            filename =
+                this.applicationTheme === 'classic'
+                    ? this.name?.replace(/-filled|-in-line/, '')
+                    : this.inlineIconFileName;
+        }
+        filename ??= tgoIcons.find(icon => icon === this._name);
+        this._name = filename;
+        return filename;
+    }
+    resolveFullIconName() {
+        if (this.applicationTheme !== 'classic') {
+            const hasInline = this.name?.includes('-in-line');
+            const hasFilled = this.name?.includes('filled');
+            if (!hasInline && !hasFilled) {
+                this.name = `${this.name}${this.filled ? '-filled' : '-in-line'}`;
             }
-            else {
-                filename =
-                    this.applicationTheme === 'classic'
-                        ? this.name?.replace(/-filled|-in-line/, '')
-                        : this.inlineIconFileName;
+            else if (!hasInline && hasFilled && this.toggleIconStyle) {
+                this.name = this.name.replace(/-filled/, '-in-line');
             }
-            if (!filename) {
-                filename = tgoIcons.find(icon => icon === this._name);
+            else if (hasInline && !hasFilled && this.toggleIconStyle && this.filled) {
+                this.name = this.name.replace(/-in-line/, '-filled');
             }
-            this._name = filename;
         }
-        else {
-            if (this.applicationTheme !== 'classic') {
-                const hasInline = this.name?.includes('-in-line');
-                const hasFilled = this.name?.includes('filled');
-                if (!hasInline && !hasFilled) {
-                    this.name = `${this.name}${this.filled ? '-filled' : '-in-line'}`;
-                }
-                else if (!hasInline && hasFilled && this.toggleIconStyle) {
-                    this.name = this.name.replace(/-filled/, '-in-line');
-                }
-                else if (hasInline && !hasFilled && this.toggleIconStyle && this.filled) {
-                    this.name = this.name.replace(/-in-line/, '-filled');
-                }
-            }
-            this._name = this.name;
-            filename = this.name;
+        this._name = this.name;
+        return this.name;
+    }
+    registerIcon(filename) {
+        if (!filename || this.iconsService.isIconLoaded(filename)) {
+            return;
         }
         const isRebrand = this.applicationTheme !== 'classic';
-        if (filename && !this.iconsService.isIconLoaded(filename)) {
-            const svgContent = getIconSvgContent(filename, isRebrand);
-            if (svgContent) {
-                // Icon is available inline - use it directly
-                this.matIconRegistry.addSvgIconLiteral(filename, this.domSanitzer.bypassSecurityTrustHtml(svgContent));
-                this.iconsService.addIcon(filename);
-            }
-            else {
-                // Icon not found inline - fallback to HTTP request
-                // This happens for large icons (>10KB) that are excluded from the bundle
-                const path = this.applicationTheme === 'classic' ? '/icons/' : '/icons/rebrand/';
-                this.matIconRegistry.addSvgIcon(filename, this.domSanitzer.bypassSecurityTrustResourceUrl(`${path}${filename}.svg`));
-                this.iconsService.addIcon(filename);
-            }
+        const svgContent = getIconSvgContent(filename, isRebrand);
+        if (svgContent) {
+            // Icon is available inline - use it directly
+            // eslint-disable-next-line no-restricted-syntax -- SECURITY: svgContent is the library's own build-time-generated icon markup (first-party, not user input); MatIconRegistry.addSvgIconLiteral requires SafeHtml.
+            this.matIconRegistry.addSvgIconLiteral(filename, this.domSanitzer.bypassSecurityTrustHtml(svgContent));
+            this.iconsService.addIcon(filename);
+        }
+        else {
+            // Icon not found inline - fallback to HTTP request
+            // This happens for large icons (>10KB) that are excluded from the bundle
+            const path = this.applicationTheme === 'classic' ? '/icons/' : '/icons/rebrand/';
+            this.matIconRegistry.addSvgIcon(filename, 
+            // eslint-disable-next-line no-restricted-syntax -- SECURITY: first-party asset URL (fixed /icons/ path + known icon filename); MatIconRegistry.addSvgIcon requires SafeResourceUrl.
+            this.domSanitzer.bypassSecurityTrustResourceUrl(`${path}${filename}.svg`));
+            this.iconsService.addIcon(filename);
         }
     }
     get cssStyle() {
@@ -1729,11 +1736,11 @@ class IconComponent {
         return this.iconsService.isIconLoaded(this._name);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.MatIconRegistry }, { token: i2.DomSanitizer }, { token: IconsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: IconComponent, isStandalone: false, selector: "ui-icon", inputs: { size: "size", cssClass: "cssClass", name: "name", color: "color", filled: "filled", toggleIconStyle: "toggleIconStyle", applicationTheme: "applicationTheme", useFullIconName: "useFullIconName" }, host: { properties: { "style.--icon-size": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "@if (isIconLoaded) {\n  <mat-icon [svgIcon]=\"_name\" [attr.class]=\"customCssClass\" [ngStyle]=\"cssStyle\"></mat-icon>\n} @else {\n  <div class=\"empty-icon-placeholder\"></div>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}.empty-icon-placeholder{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}mat-icon{display:flex;color:var(--icon-color)!important}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-40 svg{width:40px;height:40px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:var(--cnp-icon-color, #888888)}mat-icon.white svg{color:var(--cnp-icon-color, #ffffff)}mat-icon.teal svg{color:var(--cnp-icon-color, #46a997)}mat-icon.petrol svg{color:var(--cnp-icon-color, #276678)}mat-icon.black svg{color:var(--cnp-icon-color, #000000)}mat-icon.red svg{color:var(--cnp-icon-color, #e02800)}mat-icon.gray svg,mat-icon.gray path{color:var(--cnp-icon-color, #666666);fill:var(--cnp-icon-color, #666666)}mat-icon.orange svg{color:var(--cnp-icon-color, #d07d00)}mat-icon.rebrand-black svg{color:var(--cnp-icon-color, #242424)}mat-icon.ai svg path{fill:url(#reusableAiInlineGradient) #d410aa}\n"], dependencies: [{ kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: IconComponent, isStandalone: true, selector: "ui-icon", inputs: { size: "size", cssClass: "cssClass", name: "name", color: "color", filled: "filled", toggleIconStyle: "toggleIconStyle", applicationTheme: "applicationTheme", useFullIconName: "useFullIconName" }, host: { properties: { "style.--icon-size": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "@if (isIconLoaded) {\n  <mat-icon [svgIcon]=\"_name\" [attr.class]=\"customCssClass\" [ngStyle]=\"cssStyle\"></mat-icon>\n} @else {\n  <div class=\"empty-icon-placeholder\"></div>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}.empty-icon-placeholder{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}mat-icon{display:flex;color:var(--icon-color)!important}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-40 svg{width:40px;height:40px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:var(--cnp-icon-color, #888888)}mat-icon.white svg{color:var(--cnp-icon-color, #ffffff)}mat-icon.teal svg{color:var(--cnp-icon-color, #46a997)}mat-icon.petrol svg{color:var(--cnp-icon-color, #276678)}mat-icon.black svg{color:var(--cnp-icon-color, #000000)}mat-icon.red svg{color:var(--cnp-icon-color, #e02800)}mat-icon.gray svg,mat-icon.gray path{color:var(--cnp-icon-color, #666666);fill:var(--cnp-icon-color, #666666)}mat-icon.orange svg{color:var(--cnp-icon-color, #d07d00)}mat-icon.rebrand-black svg{color:var(--cnp-icon-color, #242424)}mat-icon.ai svg path{fill:url(#reusableAiInlineGradient) #d410aa}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-icon', encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (isIconLoaded) {\n  <mat-icon [svgIcon]=\"_name\" [attr.class]=\"customCssClass\" [ngStyle]=\"cssStyle\"></mat-icon>\n} @else {\n  <div class=\"empty-icon-placeholder\"></div>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}.empty-icon-placeholder{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}mat-icon{display:flex;color:var(--icon-color)!important}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-40 svg{width:40px;height:40px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:var(--cnp-icon-color, #888888)}mat-icon.white svg{color:var(--cnp-icon-color, #ffffff)}mat-icon.teal svg{color:var(--cnp-icon-color, #46a997)}mat-icon.petrol svg{color:var(--cnp-icon-color, #276678)}mat-icon.black svg{color:var(--cnp-icon-color, #000000)}mat-icon.red svg{color:var(--cnp-icon-color, #e02800)}mat-icon.gray svg,mat-icon.gray path{color:var(--cnp-icon-color, #666666);fill:var(--cnp-icon-color, #666666)}mat-icon.orange svg{color:var(--cnp-icon-color, #d07d00)}mat-icon.rebrand-black svg{color:var(--cnp-icon-color, #242424)}mat-icon.ai svg path{fill:url(#reusableAiInlineGradient) #d410aa}\n"] }]
+            args: [{ selector: 'ui-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatIcon, NgStyle], template: "@if (isIconLoaded) {\n  <mat-icon [svgIcon]=\"_name\" [attr.class]=\"customCssClass\" [ngStyle]=\"cssStyle\"></mat-icon>\n} @else {\n  <div class=\"empty-icon-placeholder\"></div>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}.empty-icon-placeholder{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}mat-icon{display:flex;color:var(--icon-color)!important}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-40 svg{width:40px;height:40px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:var(--cnp-icon-color, #888888)}mat-icon.white svg{color:var(--cnp-icon-color, #ffffff)}mat-icon.teal svg{color:var(--cnp-icon-color, #46a997)}mat-icon.petrol svg{color:var(--cnp-icon-color, #276678)}mat-icon.black svg{color:var(--cnp-icon-color, #000000)}mat-icon.red svg{color:var(--cnp-icon-color, #e02800)}mat-icon.gray svg,mat-icon.gray path{color:var(--cnp-icon-color, #666666);fill:var(--cnp-icon-color, #666666)}mat-icon.orange svg{color:var(--cnp-icon-color, #d07d00)}mat-icon.rebrand-black svg{color:var(--cnp-icon-color, #242424)}mat-icon.ai svg path{fill:url(#reusableAiInlineGradient) #d410aa}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1762,16 +1769,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 class IconComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: IconComponentModule, declarations: [IconComponent], imports: [CommonModule, MatIconModule, HttpClientModule], exports: [IconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconComponentModule, providers: [HttpClientModule], imports: [CommonModule, MatIconModule, HttpClientModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: IconComponentModule, imports: [CommonModule, MatIconModule, IconComponent], exports: [IconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconComponentModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule, MatIconModule, IconComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [IconComponent],
-                    imports: [CommonModule, MatIconModule, HttpClientModule],
+                    imports: [CommonModule, MatIconModule, IconComponent],
                     exports: [IconComponent],
-                    providers: [HttpClientModule],
+                    providers: [provideHttpClient(withInterceptorsFromDi())],
                 }]
         }] });