flowbite-angular 1.3.0 → 20.0.2

package/fesm2022/flowbite-angular-icon-solid-weather.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flowbite-angular-icon-solid-weather.mjs","sources":["../tmp-esm2022/icon/solid/weather/index.js","../tmp-esm2022/icon/solid/weather/flowbite-angular-icon-solid-weather.js"],"sourcesContent":["export const sun = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M13 3a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0V3ZM6.343 4.929A1 1 0 0 0 4.93 6.343l1.414 1.414a1 1 0 0 0 1.414-1.414L6.343 4.929Zm12.728 1.414a1 1 0 0 0-1.414-1.414l-1.414 1.414a1 1 0 0 0 1.414 1.414l1.414-1.414ZM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm-9 4a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2H3Zm16 0a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2h-2ZM7.757 17.657a1 1 0 1 0-1.414-1.414l-1.414 1.414a1 1 0 1 0 1.414 1.414l1.414-1.414Zm9.9-1.414a1 1 0 0 0-1.414 1.414l1.414 1.414a1 1 0 0 0 1.414-1.414l-1.414-1.414ZM13 19a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2Z\" clip-rule=\"evenodd\" /></svg>`;\nexport const moon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M11.675 2.015a.998.998 0 0 0-.403.011C6.09 2.4 2 6.722 2 12c0 5.523 4.477 10 10 10 4.356 0 8.058-2.784 9.43-6.667a1 1 0 0 0-1.02-1.33c-.08.006-.105.005-.127.005h-.001l-.028-.002A5.227 5.227 0 0 0 20 14a8 8 0 0 1-8-8c0-.952.121-1.752.404-2.558a.996.996 0 0 0 .096-.428V3a1 1 0 0 0-.825-.985Z\" clip-rule=\"evenodd\" /></svg>`;\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2Zsb3diaXRlLWFuZ3VsYXIvaWNvbi9zb2xpZC93ZWF0aGVyL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQUMsTUFBTSxHQUFHLEdBQUcsa3BCQUFrcEIsQ0FBQztBQUN0cUIsTUFBTSxDQUFDLE1BQU0sSUFBSSxHQUFHLCthQUErYSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IHN1biA9IGA8c3ZnIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgdmlld0JveD1cIjAgMCAyNCAyNFwiPjxwYXRoIGZpbGwtcnVsZT1cImV2ZW5vZGRcIiBkPVwiTTEzIDNhMSAxIDAgMSAwLTIgMHYyYTEgMSAwIDEgMCAyIDBWM1pNNi4zNDMgNC45MjlBMSAxIDAgMCAwIDQuOTMgNi4zNDNsMS40MTQgMS40MTRhMSAxIDAgMCAwIDEuNDE0LTEuNDE0TDYuMzQzIDQuOTI5Wm0xMi43MjggMS40MTRhMSAxIDAgMCAwLTEuNDE0LTEuNDE0bC0xLjQxNCAxLjQxNGExIDEgMCAwIDAgMS40MTQgMS40MTRsMS40MTQtMS40MTRaTTEyIDdhNSA1IDAgMSAwIDAgMTAgNSA1IDAgMCAwIDAtMTBabS05IDRhMSAxIDAgMSAwIDAgMmgyYTEgMSAwIDEgMCAwLTJIM1ptMTYgMGExIDEgMCAxIDAgMCAyaDJhMSAxIDAgMSAwIDAtMmgtMlpNNy43NTcgMTcuNjU3YTEgMSAwIDEgMC0xLjQxNC0xLjQxNGwtMS40MTQgMS40MTRhMSAxIDAgMSAwIDEuNDE0IDEuNDE0bDEuNDE0LTEuNDE0Wm05LjktMS40MTRhMSAxIDAgMCAwLTEuNDE0IDEuNDE0bDEuNDE0IDEuNDE0YTEgMSAwIDAgMCAxLjQxNC0xLjQxNGwtMS40MTQtMS40MTRaTTEzIDE5YTEgMSAwIDEgMC0yIDB2MmExIDEgMCAxIDAgMiAwdi0yWlwiIGNsaXAtcnVsZT1cImV2ZW5vZGRcIiAvPjwvc3ZnPmA7XG5leHBvcnQgY29uc3QgbW9vbiA9IGA8c3ZnIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgdmlld0JveD1cIjAgMCAyNCAyNFwiPjxwYXRoIGZpbGwtcnVsZT1cImV2ZW5vZGRcIiBkPVwiTTExLjY3NSAyLjAxNWEuOTk4Ljk5OCAwIDAgMC0uNDAzLjAxMUM2LjA5IDIuNCAyIDYuNzIyIDIgMTJjMCA1LjUyMyA0LjQ3NyAxMCAxMCAxMCA0LjM1NiAwIDguMDU4LTIuNzg0IDkuNDMtNi42NjdhMSAxIDAgMCAwLTEuMDItMS4zM2MtLjA4LjAwNi0uMTA1LjAwNS0uMTI3LjAwNWgtLjAwMWwtLjAyOC0uMDAyQTUuMjI3IDUuMjI3IDAgMCAwIDIwIDE0YTggOCAwIDAgMS04LThjMC0uOTUyLjEyMS0xLjc1Mi40MDQtMi41NThhLjk5Ni45OTYgMCAwIDAgLjA5Ni0uNDI4VjNhMSAxIDAgMCAwLS44MjUtLjk4NVpcIiBjbGlwLXJ1bGU9XCJldmVub2RkXCIgLz48L3N2Zz5gO1xuIl19","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxvd2JpdGUtYW5ndWxhci1pY29uLXNvbGlkLXdlYXRoZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2Zsb3diaXRlLWFuZ3VsYXIvaWNvbi9zb2xpZC93ZWF0aGVyL3NyYy9mbG93Yml0ZS1hbmd1bGFyLWljb24tc29saWQtd2VhdGhlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":"AAAY,MAAC,GAAG,GAAG,CAAC,gpBAAgpB;AACxpB,MAAC,IAAI,GAAG,CAAC,6aAA6a;;ACDlc;AACA;AACA;;;;"}

package/fesm2022/flowbite-angular-icon-solid.mjs

@@ -0,0 +1,6 @@
+var index = null;
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=flowbite-angular-icon-solid.mjs.map

package/fesm2022/flowbite-angular-icon-solid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flowbite-angular-icon-solid.mjs","sources":["../tmp-esm2022/icon/solid/index.js","../tmp-esm2022/icon/solid/flowbite-angular-icon-solid.js"],"sourcesContent":["export default null;\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2Zsb3diaXRlLWFuZ3VsYXIvaWNvbi9zb2xpZC9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZUFBZSxJQUFJLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCBudWxsO1xuIl19","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxvd2JpdGUtYW5ndWxhci1pY29uLXNvbGlkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9mbG93Yml0ZS1hbmd1bGFyL2ljb24vc29saWQvc3JjL2Zsb3diaXRlLWFuZ3VsYXItaWNvbi1zb2xpZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":"AAAA,YAAe,IAAI;;ACAnB;AACA;AACA"}

package/fesm2022/flowbite-angular-icon.mjs

@@ -1,254 +1,353 @@
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
+import { createTheme, mergeDeep, colorToTheme } from 'flowbite-angular';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, SecurityContext, Injectable, ElementRef, model, effect, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { of, throwError, map, tap, finalize, share, take } from 'rxjs';
-import { BaseComponent } from 'flowbite-angular';
+import { InjectionToken, inject, Injector, Renderer2, PLATFORM_ID, ElementRef, input, computed, effect, HostAttributeToken, runInInjectionContext, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { isPlatformServer } from '@angular/common';
+import { injectNgIcons, injectNgIconLoader, injectNgIconLoaderCache } from '@ng-icons/core';
+import { isObservable, firstValueFrom } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
 
+const flowbiteIconTheme = createTheme({
+    host: {
+        base: 'self-center overflow-hidden',
+        transition: '',
+        color: {
+            default: {
+                light: '',
+                dark: '',
+            },
+            info: {
+                light: 'text-blue-500',
+                dark: 'dark:text-blue-500',
+            },
+            failure: {
+                light: 'text-red-500',
+                dark: 'dark:text-red-500',
+            },
+            success: {
+                light: 'text-green-500',
+                dark: 'dark:text-green-500',
+            },
+            warning: {
+                light: 'text-yellow-500',
+                dark: 'dark:text-yellow-500',
+            },
+            primary: {
+                light: 'text-primary-500',
+                dark: 'dark:text-primary-500',
+            },
+            dark: {
+                light: 'text-gray-700',
+                dark: 'dark:text-gray-700',
+            },
+            light: {
+                light: 'text-gray-300',
+                dark: 'dark:text-gray-300',
+            },
+            blue: {
+                light: 'text-blue-500',
+                dark: 'dark:text-blue-500',
+            },
+            cyan: {
+                light: 'text-cyan-500',
+                dark: 'dark:text-cyan-500',
+            },
+            gray: {
+                light: 'text-gray-500',
+                dark: 'dark:text-gray-500',
+            },
+            green: {
+                light: 'text-green-500',
+                dark: 'dark:text-green-500',
+            },
+            indigo: {
+                light: 'text-indigo-500',
+                dark: 'dark:text-indigo-500',
+            },
+            lime: {
+                light: 'text-lime-500',
+                dark: 'dark:text-lime-500',
+            },
+            pink: {
+                light: 'text-pink-500',
+                dark: 'dark:text-pink-500',
+            },
+            purple: {
+                light: 'text-purple-500',
+                dark: 'dark:text-purple-500',
+            },
+            red: {
+                light: 'text-red-500',
+                dark: 'dark:text-red-500',
+            },
+            teal: {
+                light: 'text-teal-500',
+                dark: 'dark:text-teal-500',
+            },
+            yellow: {
+                light: 'text-yellow-500',
+                dark: 'dark:text-yellow-500',
+            },
+        },
+    },
+});
+
+const defaultFlowbiteIconConfig = {
+    baseTheme: flowbiteIconTheme,
+    color: 'default',
+    customTheme: {},
+};
+const FlowbiteIconConfigToken = new InjectionToken('FlowbiteIconConfigToken');
 /**
- * Thanks to Angular Material for Icon part of this library : https://github.com/angular/components
+ * Provide the default Icon configuration
+ * @param config The Icon configuration
+ * @returns The provider
  */
-let policy;
-function getPolicy() {
-    if (!policy) {
-        if (typeof window !== 'undefined') {
-            const tWindow = window;
-            if (tWindow.trustedTypes !== undefined) {
-                policy = tWindow.trustedTypes.createPolicy('angular#components', {
-                    createHTML: (s) => s,
-                });
-            }
-        }
-    }
-    return policy;
-}
-function trustedHTMLFromString(raw) {
-    return getPolicy()?.createHTML(raw) || raw;
-}
-
+const provideFlowbiteIconConfig = (config) => [
+    {
+        provide: FlowbiteIconConfigToken,
+        useValue: { ...defaultFlowbiteIconConfig, ...config },
+    },
+];
 /**
- * Thanks to Angular Material for Icon part of this library : https://github.com/angular/components
+ * Inject the Icon configuration
+ * @see {@link defaultFlowbiteIconConfig}
+ * @returns The configuration
  */
-function getSvgIconFromNamedError(iconName) {
-    return Error(`Unable to find icon with name ${iconName}`);
-}
-function getSvgIconFailedToSanitizeRawError(raw) {
-    return Error(`The raw provided to IconRegistry was not trusted as safe HTML by ANGULAR's DOMSanitizer. Attempted raw was : ${raw}`);
-}
-function getSvgIconFailedToSanitizeUrlError(url) {
-    return Error(`The URL provided to IconRegistry was not trusted as a resource URL via Angular's DOMSanitizer. Attempted URL was : ${url}`);
-}
-function getSvgIconNoHttpClientProvidedError() {
-    return Error(`Could not fid HttpClient provider for use with flowbite-angular icons. Please include the HttpClientModule from @angular/common/http in your app imports`);
+const injectFlowbiteIconConfig = () => inject(FlowbiteIconConfigToken, { optional: true }) ?? defaultFlowbiteIconConfig;
+
+const FlowbiteIconStateToken = createStateToken('Flowbite Icon');
+const provideFlowbiteIconState = createStateProvider(FlowbiteIconStateToken);
+const injectFlowbiteIconState = createStateInjector(FlowbiteIconStateToken);
+const flowbiteIconState = createState(FlowbiteIconStateToken);
+const NgIconPreProcessorToken = new InjectionToken('Ng Icon Pre Processor');
+const NgIconPostProcessorToken = new InjectionToken('Ng Icon Post Processor');
+function injectNgIconPreProcessor() {
+    return inject(NgIconPreProcessorToken, { optional: true }) ?? ((icon) => icon);
 }
-class SvgIconConfig {
-    constructor(url, svgText, options) {
-        this.url = url;
-        this.svgText = svgText;
-        this.options = options;
-        this.svgElement = null;
-    }
+function injectNgIconPostProcessor() {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return inject(NgIconPostProcessorToken, { optional: true }) ?? (() => { });
 }
-class IconRegistry {
+
+/* https://github.com/ng-icons/ng-icons/blob/main/packages/core/src/lib/components/icon/icon.component.ts */
+let uniqueId = 0;
+class Icon {
     constructor() {
-        this.platformId = inject(PLATFORM_ID);
-        this._httpClient = inject(HttpClient, { optional: true });
-        this._sanitizer = inject(DomSanitizer);
-        this._document = inject(DOCUMENT);
-        this._svgIconConfig = new Map();
-        this._cachedSvgIconByUrl = new Map();
-        this._inProgressSvgIconFetch = new Map();
-    }
-    addSvgIcon(iconName, url, options) {
-        return this.addSvgIconInNamespace('', iconName, url, options);
-    }
-    addRawSvgIcon(iconName, raw, options) {
-        return this.addRawSvgIconInNamepsace('', iconName, raw, options);
-    }
-    addSvgIconInNamespace(namespace, iconName, url, options) {
-        return this._addSvgIconConfig(namespace, iconName, new SvgIconConfig(url, undefined, options));
-    }
-    addRawSvgIconInNamepsace(namespace, iconName, raw, options) {
-        const cleanRaw = this._sanitizer.sanitize(SecurityContext.HTML, raw);
-        if (!cleanRaw) {
-            throw getSvgIconFailedToSanitizeRawError(raw);
-        }
-        const trustedRaw = trustedHTMLFromString(cleanRaw);
-        return this._addSvgIconConfig(namespace, iconName, new SvgIconConfig('', trustedRaw, options));
-    }
-    getSvgIconFromUrl(safeUrl) {
-        const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeUrl);
-        if (!url) {
-            throw getSvgIconFailedToSanitizeUrlError(safeUrl);
-        }
-        const cachedIcon = this._cachedSvgIconByUrl.get(url);
-        if (cachedIcon) {
-            return of(cloneSvg(cachedIcon));
+        this.config = injectFlowbiteIconConfig();
+        /** Access the icons */
+        this.icons = injectNgIcons();
+        /** Access the icon loader if defined */
+        this.loader = injectNgIconLoader();
+        /** Access the icon cache if defined */
+        this.cache = injectNgIconLoaderCache();
+        /** Access the pre-processor */
+        this.preProcessor = injectNgIconPreProcessor();
+        /** Access the post-processor */
+        this.postProcessor = injectNgIconPostProcessor();
+        /** Access the injector */
+        this.injector = inject(Injector);
+        /** Access the renderer */
+        this.renderer = inject(Renderer2);
+        /** Determine the platform we are rendering on */
+        this.platform = inject(PLATFORM_ID);
+        /** Access the element ref */
+        this.elementRef = inject(ElementRef);
+        /** A unique id for this instance */
+        this.uniqueId = uniqueId++;
+        /** Define the name of the icon to display */
+        this.name = input();
+        /** Define the svg of the icon to display */
+        this.svg = input();
+        /**
+         * @see {@link injectFlowbiteIconConfig}
+         */
+        this.color = input(this.config.color);
+        /**
+         * @see {@link injectFlowbiteIconConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition, this.state.color() && colorToTheme(mergedTheme.host.color, this.state.color())),
+                },
+            };
+        });
+        this.state = flowbiteIconState(this);
+        // update the icon anytime the name or svg changes
+        effect(() => this.updateIcon());
+        const ariaHidden = inject(new HostAttributeToken('aria-hidden'), {
+            optional: true,
+        });
+        // If the user has not explicitly set aria-hidden, mark the icon as hidden, as this is
+        // the right thing to do for the majority of icon use-cases.
+        if (!ariaHidden) {
+            this.elementRef.nativeElement.setAttribute('aria-hidden', 'true');
         }
-        return this._loadSvgIconFromConfig(new SvgIconConfig(safeUrl, undefined));
-    }
-    getSvgIconFromName(iconName, namespace) {
-        const key = iconKey(namespace, iconName);
-        const config = this._svgIconConfig.get(key);
-        if (config) {
-            return this._getSvgIconFromConfig(config);
-        }
-        return throwError(() => getSvgIconFromNamedError(key));
     }
     ngOnDestroy() {
-        this._svgIconConfig.clear();
-        this._cachedSvgIconByUrl.clear();
-    }
-    _addSvgIconConfig(namespace, iconName, config) {
-        this._svgIconConfig.set(iconKey(namespace, iconName), config);
-        return this;
+        this.svgElement = undefined;
     }
-    _getSvgIconFromConfig(config) {
-        if (config.svgText) {
-            return of(cloneSvg(this._svgElementFromConfig(config)));
+    async updateIcon() {
+        const toPropertyName = (str) => str
+            .replace(/([^a-zA-Z0-9])+(.)?/g, (_, __, chr) => (chr ? chr.toUpperCase() : ''))
+            .replace(/[^a-zA-Z\d]/g, '')
+            .replace(/^([A-Z])/, (m) => m.toLowerCase());
+        const name = this.name();
+        const svg = this.svg();
+        // if the svg is defined, insert it into the template
+        if (svg !== undefined) {
+            this.setSvg(svg);
+            return;
         }
-        else {
-            return this._loadSvgIconFromConfig(config).pipe(map((svg) => cloneSvg(svg)));
+        if (name === undefined) {
+            return;
         }
-    }
-    _loadSvgIconFromConfig(config) {
-        return this._fetchIcon(config).pipe(tap((svgText) => (config.svgText = svgText)), map(() => this._svgElementFromConfig(config)));
-    }
-    _setSvgAttributes(svg, options) {
-        svg.setAttribute('fit', '');
-        svg.setAttribute('height', '100%');
-        svg.setAttribute('width', '100%');
-        svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-        svg.setAttribute('focusable', 'false');
-        if (options?.viewBox) {
-            svg.setAttribute('viewBox', options.viewBox);
+        const propertyName = toPropertyName(name);
+        for (const icons of [...this.icons].reverse()) {
+            if (icons[propertyName]) {
+                // insert the SVG into the template
+                this.setSvg(icons[propertyName]);
+                return;
+            }
         }
-        return svg;
-    }
-    _svgElementFromConfig(config) {
-        if (!config.svgElement) {
-            const svg = this._svgElementFromString(config.svgText);
-            this._setSvgAttributes(svg, config.options);
-            config.svgElement = svg;
+        // if there is a loader defined, use it to load the icon
+        if (this.loader) {
+            const result = await this.requestIconFromLoader(name);
+            // if the result is a string, insert the SVG into the template
+            if (result !== null) {
+                this.setSvg(result);
+                return;
+            }
         }
-        return config.svgElement;
+        // if there is no icon with this name warn the user as they probably forgot to import it
+        console.warn(`No icon named ${name} was found. You may need to import it using the withIcons function.`);
     }
-    _svgElementFromString(str) {
-        const div = this._document.createElement('div');
-        div.innerHTML = str;
-        const svg = div.querySelector('svg');
-        return svg;
-    }
-    _fetchIcon(iconConfig) {
-        if (isPlatformBrowser(this.platformId)) {
-            if (!this._httpClient) {
-                throw getSvgIconNoHttpClientProvidedError();
-            }
-            const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, iconConfig.url);
-            if (!url) {
-                throw getSvgIconFailedToSanitizeUrlError(iconConfig.url);
-            }
-            const inProgressFetch = this._inProgressSvgIconFetch.get(url);
-            if (inProgressFetch) {
-                return inProgressFetch;
+    setSvg(svg) {
+        // if we are on the server, simply innerHTML the svg as we don't have the
+        // level of control over the DOM that we do on the client, in otherwords
+        // the approach we take to insert the svg on the client will not work on the server
+        if (isPlatformServer(this.platform)) {
+            this.elementRef.nativeElement.innerHTML = svg;
+            // mark this component as server side rendered
+            this.elementRef.nativeElement.setAttribute('data-ng-icon-ssr', '');
+            return;
+        }
+        // if this was previously server side rendered, we should check if the svg is the same
+        // if it is, we don't need to do anything
+        if (this.elementRef.nativeElement.hasAttribute('data-ng-icon-ssr')) {
+            // if it is different, we need to remove the server side rendered flag
+            this.elementRef.nativeElement.removeAttribute('data-ng-icon-ssr');
+            // retrieve the svg element
+            this.svgElement = this.elementRef.nativeElement.querySelector('svg') ?? undefined;
+            if (this.elementRef.nativeElement.innerHTML === svg) {
+                return;
             }
-            const req = this._httpClient.get(url, { responseType: 'text' }).pipe(map((svg) => {
-                return trustedHTMLFromString(svg);
-            }), finalize(() => this._inProgressSvgIconFetch.delete(url)), share());
-            this._inProgressSvgIconFetch.set(url, req);
-            return req;
         }
-        else {
-            return of(trustedHTMLFromString('<svg></svg>'));
+        // remove the old element
+        if (this.svgElement) {
+            this.renderer.removeChild(this.elementRef.nativeElement, this.svgElement);
         }
+        // if the svg is empty, don't insert anything
+        if (svg === '') {
+            return;
+        }
+        const template = this.renderer.createElement('template');
+        svg = this.replaceIds(svg);
+        this.renderer.setProperty(template, 'innerHTML', this.preProcessor(svg));
+        this.svgElement = template.content.firstElementChild;
+        this.postProcessor(this.svgElement);
+        // insert the element into the dom
+        this.renderer.appendChild(this.elementRef.nativeElement, this.svgElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: IconRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: IconRegistry, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: IconRegistry, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-function cloneSvg(svg) {
-    return svg.cloneNode(true);
-}
-function iconKey(namespace, iconName) {
-    return `${namespace}:${iconName}`;
-}
-
-/**
- * Thanks to Angular Material for Icon part of this library : https://github.com/angular/components
- */
-class IconComponent extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        this._elementRef = inject((ElementRef));
-        this._iconRegistry = inject(IconRegistry);
-        this.svgIcon = model.required();
-    }
-    init() {
-        effect(() => {
-            this._updateSvgIcon();
-        }, { injector: this.injector });
-    }
-    fetchClass() {
-        return { rootClass: '' };
-    }
-    _splitIconName(iconName) {
-        if (!iconName) {
-            return ['', ''];
+    replaceIds(svg) {
+        // ids are defined like ID_PLACEHOLDER_0, ID_PLACEHOLDER_1, etc.
+        // we need to replace these with the actual ids e.g. ng-icon-0-0, ng-icon-0-1, etc.
+        // if there are no ids, we don't need to do anything
+        if (!svg.includes('ID_PLACEHOLDER_')) {
+            return svg;
         }
-        const parts = iconName.split(':');
-        switch (parts.length) {
-            case 1:
-                return ['', parts[0]];
-            case 2:
-                return parts;
-            default:
-                throw Error(`Invalid icon name: "${iconName}"`);
+        // we can just retain the trailing number as the prefix is always the same
+        const regex = /ID_PLACEHOLDER_(\d+)/g;
+        // we need to keep track of the ids we have replaced
+        const idMap = new Map();
+        // find all the matches
+        const matches = new Set(svg.match(regex));
+        if (matches === null) {
+            return svg;
         }
+        // replace the ids
+        for (const match of matches) {
+            const id = match.replace('ID_PLACEHOLDER_', '');
+            const placeholder = `ng-icon-${this.uniqueId}-${idMap.size}`;
+            idMap.set(id, placeholder);
+            svg = svg.replace(new RegExp(match, 'g'), placeholder);
+        }
+        return svg;
     }
-    _updateSvgIcon() {
-        const [namespace, iconName] = this._splitIconName(this.svgIcon());
-        this._iconRegistry
-            .getSvgIconFromName(iconName, namespace)
-            .pipe(take(1))
-            .subscribe((svg) => this._setSvgElement(svg));
-    }
-    _setSvgElement(svg) {
-        this._clearSvgElements();
-        this._elementRef.nativeElement.appendChild(svg);
-    }
-    _clearSvgElements() {
-        const layoutElement = this._elementRef.nativeElement;
-        let childCount = layoutElement.childNodes.length;
-        while (childCount--) {
-            const child = layoutElement.childNodes[childCount];
-            if (child.nodeType !== 1 || child.nodeName.toLowerCase() === 'svg') {
-                child.remove();
+    /**
+     * Request the icon from the loader.
+     * @param name The name of the icon to load.
+     * @returns The SVG content for a given icon name.
+     */
+    requestIconFromLoader(name) {
+        const coerceLoaderResult = (result) => {
+            if (typeof result === 'string') {
+                return Promise.resolve(result);
             }
-        }
+            if (isObservable(result)) {
+                // toPromise is deprecated, but we can't use lastValueFrom because it's not available in RxJS 6
+                // so for now we'll just use toPromise
+                return firstValueFrom(result);
+            }
+            return result;
+        };
+        return new Promise((resolve) => {
+            runInInjectionContext(this.injector, async () => {
+                // if we have a cache, check if the icon is already loaded (i.e, it is a string)
+                if (this.cache) {
+                    const cachedResult = this.cache.get(name);
+                    if (typeof cachedResult === 'string') {
+                        resolve(cachedResult);
+                        return;
+                    }
+                    // it may be a promise, so we need to await it
+                    if (cachedResult instanceof Promise) {
+                        const result = await cachedResult;
+                        resolve(result);
+                        return;
+                    }
+                }
+                const promise = coerceLoaderResult(this.loader(name));
+                // store the promise in the cache so if we get repeated calls (e.g. in a loop) before the loader has resolved
+                // then don't call the loader function multiple times
+                this.cache?.set(name, promise);
+                // await the result of the promise
+                const result = await promise;
+                // if we have a cache, store the result
+                this.cache?.set(name, result);
+                resolve(result);
+            });
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: IconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: IconComponent, isStandalone: true, selector: "flowbite-icon", inputs: { svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { svgIcon: "svgIconChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: Icon, isStandalone: true, selector: "flowbite-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, svg: { classPropertyName: "svg", publicName: "svg", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteIconState()], exportAs: ["flowbiteIcon"], ngImport: i0, template: ``, isInline: true, styles: [":host{display:inline-block;line-height:initial;vertical-align:initial;overflow:hidden}\n", ":host ::ng-deep svg{width:inherit;height:inherit;vertical-align:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Icon, decorators: [{
             type: Component,
-            args: [{
-                    standalone: true,
-                    selector: 'flowbite-icon',
-                    template: `<ng-content />`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
+            args: [{ standalone: true, selector: `flowbite-icon`, exportAs: 'flowbiteIcon', hostDirectives: [], imports: [], providers: [provideFlowbiteIconState()], host: {
+                        '[class]': `theme().host.root`,
+                        role: 'img',
+                    }, template: ``, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;line-height:initial;vertical-align:initial;overflow:hidden}\n", ":host ::ng-deep svg{width:inherit;height:inherit;vertical-align:inherit}\n"] }]
+        }], ctorParameters: () => [] });
+
+/* Icon */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IconComponent, IconRegistry, SvgIconConfig, getSvgIconFailedToSanitizeRawError, getSvgIconFailedToSanitizeUrlError, getSvgIconFromNamedError, getSvgIconNoHttpClientProvidedError, trustedHTMLFromString };
+export { FlowbiteIconConfigToken, FlowbiteIconStateToken, Icon, NgIconPostProcessorToken, NgIconPreProcessorToken, defaultFlowbiteIconConfig, flowbiteIconState, flowbiteIconTheme, injectFlowbiteIconConfig, injectFlowbiteIconState, injectNgIconPostProcessor, injectNgIconPreProcessor, provideFlowbiteIconConfig, provideFlowbiteIconState };
 //# sourceMappingURL=flowbite-angular-icon.mjs.map