import * as i0 from '@angular/core';
import { inject, signal, input, ChangeDetectionStrategy, Component } from '@angular/core';
import { loadIcon } from 'iconify-icon';
import { DomSanitizer } from '@angular/platform-browser';
import { v7 } from 'uuid';

class Icon {
    _sanitizer = inject(DomSanitizer);
    _iconHtml = signal(null, ...(ngDevMode ? [{ debugName: "_iconHtml" }] : /* istanbul ignore next */ []));
    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
    loaded = false;
    async ngOnInit() {
        await this._loadIcon();
    }
    async ngOnChanges(changes) {
        if (changes['name'] && !changes['name'].isFirstChange()) {
            if (changes['name'].previousValue === changes['name'].currentValue) {
                return;
            }
            this.loaded = false;
            await this._loadIcon();
        }
    }
    async _loadIcon() {
        if (this.loaded) {
            return;
        }
        if (!this.name()) {
            this.loaded = true;
            return;
        }
        const data = await loadIcon(this.name());
        let body = data.body;
        // If svg icon has mask of defs with id, we need to replace to unique id
        // because the same icons can be used on the same page and use the same id, which can cause problems.
        const allIdMatches = [...body.matchAll(/id="(\w+)"/g)];
        if (allIdMatches.length > 0) {
            allIdMatches.forEach(match => {
                body = body.replaceAll(match[1], v7());
            });
        }
        const iconHtml = `<svg viewBox="0 0 ${data.width} ${data.height}">${body}</svg>`;
        this._iconHtml.set(this._sanitizer.bypassSecurityTrustHtml(iconHtml));
        this.loaded = true;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Icon, isStandalone: true, selector: "ngs-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ngs-icon" }, exportAs: ["ngsIcon"], usesOnChanges: true, ngImport: i0, template: '<span [innerHTML]="_iconHtml()" style="display: contents"></span>', isInline: true, styles: [":host{display:inline-flex;flex:none;align-items:center;justify-content:center;line-height:0}:host svg{flex:none}:host:not([class*=text-]){color:var(--ngs-icon-color)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-icon-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-icon-size)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Icon, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-icon', standalone: true, exportAs: 'ngsIcon', template: '<span [innerHTML]="_iconHtml()" style="display: contents"></span>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-icon',
                    }, styles: [":host{display:inline-flex;flex:none;align-items:center;justify-content:center;line-height:0}:host svg{flex:none}:host:not([class*=text-]){color:var(--ngs-icon-color)}:host:not([class*=w-]):not([class*=size-]){width:var(--ngs-icon-size)}:host:not([class*=h-]):not([class*=size-]){height:var(--ngs-icon-size)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { Icon };
//# sourceMappingURL=ngstarter-ui-components-icon.mjs.map
