var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
import * as LucideExports from 'lucide-static/dist/cjs/lucide-static';
import { getIcon } from '../../LucideDynamicLoader.js';
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
import { ReadyMixin } from '../../util/ReadyMixin.js';
import { pascalToKebab } from '../../util/string.js';
import { addMask } from '../../util/svg.js';
const svgs = {};
for (const [key, value] of Object.entries(LucideExports)) {
    if (typeof value === 'string') {
        svgs[key] = value;
    }
}
/**
 * An icon component for displaying Lucide icons.
 *
 * Icons inherit parent text color by default or can use gradient fills.
 * All icons are from the Lucide icon library (https://lucide.dev/icons/).
 * Supports both direct SVG rendering and mask-based gradient fills.
 *
 * @element btu-icon
 *
 * @fires {CustomEvent} btu-icon-ready - Fired after first render and initialization
 *
 * @cssprop --icon-size - Icon size (overrides size default)
 * @cssprop --icon-stroke-width - SVG stroke width as a unitless number in viewBox units; scales visually with icon size (default: 2)
 * @cssprop --icon-fill - Icon fill color for filled icons (e.g., "currentColor")
 * @cssprop --icon-svg - SVG data URI for mask-based rendering
 *
 * @example
 * ```html
 * <!-- Icon inheriting parent text color -->
 * <btu-icon symbol="heart" size="md"></btu-icon>
 *
 * <!-- Gradient icon -->
 * <btu-icon symbol="star" size="lg" gradient="primary"></btu-icon>
 *
 * <!-- Custom size via CSS -->
 * <btu-icon symbol="check" style="--icon-size: 3rem"></btu-icon>
 *
 * <!-- Filled icon via CSS (advanced usage) -->
 * <btu-icon symbol="heart" style="--icon-fill: currentColor"></btu-icon>
 * ```
 *
 * @example
 * ```typescript
 * // Programmatic usage
 * const icon = document.createElement('btu-icon')
 * icon.symbol = 'smile'
 * icon.size = 'lg'
 * icon.addEventListener('btu-icon-ready', () => console.log('Icon loaded'))
 * ```
 */
export default class Icon extends EventEmitterMixin(ReadyMixin(LitElement)) {
    constructor() {
        super(...arguments);
        /**
         * Size of the icon.
         * - 'xs': Extra small (0.75rem)
         * - 'sm': Small (1rem)
         * - 'md': Medium (1.25rem, default)
         * - 'lg': Large (1.5rem)
         * - 'xl': Extra large (1.75rem)
         * @attr
         */
        this.size = 'md';
        /**
         * Lucide icon name to display.
         * See https://lucide.dev/icons/ for available icons.
         * @attr
         */
        this.symbol = 'circle-dashed';
        /** @internal */
        this.initialClasses = [];
    }
    static get tagName() {
        return 'BTU-ICON';
    }
    connectedCallback() {
        super.connectedCallback();
        // Capture initial classes from backend HTML
        if (this.className) {
            this.initialClasses = this.className.split(' ').filter(c => c.trim());
        }
    }
    createRenderRoot() {
        return this;
    }
    willUpdate(changedProperties) {
        const classes = [...this.initialClasses, 'btu-icon', `btu-icon-${this.size}`];
        // Add gradient class if gradient is set. The base `btu-icon-via-mask`
        // class provides the `mask: var(--mask-url, ...)` fallback chain — the
        // `--mask-url` set in render() (referencing the inlined SVG's <mask>
        // defs) resolves through it. Per-name `btu-icon-via-mask-NAME` rules
        // are intentionally not emitted to v5.css; they were a pre-`--mask-url`
        // vestige here.
        if (this.gradient) {
            classes.push(`btu-icon-gradient-${this.gradient}`);
            classes.push('btu-icon-via-mask');
        }
        // Warn once when the conflict is introduced, not on every re-render
        if (this.emphasize && this.gradient && (changedProperties.has('emphasize') || changedProperties.has('gradient'))) {
            console.warn('[btu-icon] "emphasize" and "gradient" target conflicting rendering modes. "gradient" takes precedence.', this);
        }
        if (this.emphasize && !this.gradient) {
            classes.push('btu-icon-emphasize');
            if (this.emphasize === 'pulse') {
                classes.push('btu-icon-emphasize-pulse');
            }
        }
        this.className = classes.filter(Boolean).join(' ');
    }
    firstUpdated() {
        this.emit('btu-icon-ready');
    }
    /**
     * Escape HTML special characters to prevent XSS attacks in comments.
     * @internal
     */
    escapeHtml(text) {
        return text
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }
    render() {
        const iconName = window.BRIGHTSPOT?.icons?.materialToLucide?.[this.symbol] || this.symbol;
        const data = getIcon(iconName);
        let svgContent = data?.iconSvg ?? '';
        let isInvalid = false;
        if (!svgContent) {
            // Fallback to default icon and mark as invalid
            isInvalid = true;
            const fallbackData = getIcon('circle-dashed');
            svgContent = fallbackData?.iconSvg ?? '';
            // If fallback also fails, show comment
            if (!svgContent) {
                return html `${unsafeHTML(`<!-- btu-icon: Icon "${this.escapeHtml(this.symbol)}" not found and fallback failed -->`)}`;
            }
        }
        const decodedSvg = decodeURIComponent(svgContent);
        // Prevent HTML comment injection by escaping dashes
        const debugComment = isInvalid
            ? `<!-- btu-icon: Icon "${this.escapeHtml(this.symbol)}" not found. Showing fallback "circle-dashed". See https://lucide.dev/icons/ for available icons. -->\n`
            : '';
        // For gradient fill, generate mask SVG and let Tailwind handle sizing/styling
        if (this.gradient) {
            const kebabName = pascalToKebab(iconName);
            // Set mask URL for Tailwind plugin to reference
            this.style.setProperty('--mask-url', `url(#${kebabName})`);
            // Add mask element to SVG - Tailwind class handles display/sizing
            const maskedSvg = addMask(decodedSvg, kebabName);
            return html `${unsafeHTML(debugComment)}${unsafeSVG(maskedSvg)}`;
        }
        // Non-gradient path: render SVG with sizing
        const fillAttr = this.style.getPropertyValue('--icon-fill') ? `fill="var(--icon-fill)"` : ''; // Optional fill
        const styledSvg = decodedSvg.replace('<svg', `<svg ${fillAttr} style="width: var(--icon-size); height: var(--icon-size); display: inline-block; stroke-width: var(--icon-stroke-width, 2);"`);
        return html `${unsafeHTML(debugComment)}${unsafeSVG(styledSvg)}`;
    }
}
__decorate([
    property({ type: String })
], Icon.prototype, "size", void 0);
__decorate([
    property({ type: String })
], Icon.prototype, "symbol", void 0);
__decorate([
    property({ type: String })
], Icon.prototype, "gradient", void 0);
__decorate([
    property({
        converter: {
            fromAttribute(value) {
                if (value === null)
                    return undefined;
                if (value === 'pulse')
                    return 'pulse';
                return true;
            },
            toAttribute(value) {
                if (!value)
                    return null;
                if (value === 'pulse')
                    return 'pulse';
                return '';
            },
        },
        reflect: true,
    })
], Icon.prototype, "emphasize", void 0);
// Register custom element with guard to prevent double registration
// (common with yarn link, HMR, or webpack bundle duplication)
if (!customElements.get('btu-icon')) {
    customElements.define('btu-icon', Icon);
}
//# sourceMappingURL=Icon.js.map