// import { Component, Prop, h, Watch } from '@stencil/core';
// @Component({
//   tag: 'dga-icon-v2',
//   // styleUrl: 'dga-icon.scss',
//   shadow: true,
// })
// export class DgaIconV2 {
//   @Prop() name: string; // Icon component (e.g., CancelIcon)
//   @Prop() size: number;
//   @Prop() color?: string;
//   @Prop() variant?: 'stroke' | 'solid' | 'duotone' | 'twotone' | 'bulk' = 'bulk';
//   @Prop() type?: 'rounded' | 'sharp' | 'standard' = 'rounded';
//   private container!: HTMLDivElement;
//   // Initialize class name on component load
//   componentDidLoad() {
//     this.updateIcon();
//   }
//   // Update class name when properties change
//   @Watch('icon')
//   @Watch('variant')
//   @Watch('type')
//   updateIcon() {
//     if (this.container) {
//       // Convert the name to lowercase, replace "Icon" suffix, and separate words with hyphens
//       const className = this.name
//         .replace(/([a-z])([A-Z])/g, '$1-$2')
//         .replace(/([A-Z])([0-9])/g, '$1-$2')
//         .replace(/([a-z])([0-9])/g, '$1-$2')
//         .toLowerCase()
//         .replace('-icon', '')
//         .replace('icon', '')
//         .trim();
//       // Build the final class string
//       const iconClass = `hgi-${this.variant || ''} ${this.type ? `hgi-${this.type}` : ''} hgi-${className}`;
//       // Apply the class to the icon element
//       this.container.className = iconClass;
//     }
//   }
//   render() {
//     return (
//       <div
//         style={{
//           width: '100%',
//           height: '100%',
//           display: 'flex',
//           alignItems: 'center',
//           justifyContent: 'center',
//           fontSize: 'inherit',
//         }}
//       >
//         <i
//           style={{
//             fontSize: `${this.size ? `${this.size}px` : 'inherit'}`,
//             color: this.color,
//           }}
//           ref={el => (this.container = el as HTMLDivElement)}
//         ></i>
//       </div>
//     );
//   }
// }
// import { Component, Prop, getAssetPath, h } from '@stencil/core';
// @Component({
//   tag: 'dga-icon-v2',
//   assetsDirs: ['assets']
// })
// export class DgaIconV2 {
//   @Prop() name: string; // The id of the symbol
//   @Prop() size: number = 24;
//   @Prop() color?: string;
//   @Prop() variant?: 'stroke' | 'solid' | 'duotone' | 'twotone' | 'bulk' = 'bulk';
//   @Prop() type?: 'rounded' | 'sharp' | 'standard' = 'rounded';
//  // In your dga-local-icon.tsx file
// render() {
//   // 1. Exit early if the icon prop is missing
//   if (!this.name) {
//     return null;
//   }
//   // 2. Resolve the asset path
//   const spriteFileUrl = getAssetPath(`./assets/icons/hgi-${this.variant}-${this.type}.symbol.svg`);
//   console.log('Sprite File URL:', spriteFileUrl); // Debugging line to check the resolved path
//   // 3. NEW: Add a check to ensure the path was successfully resolved
//   if (!spriteFileUrl) {
//     // If the path is not yet available, render nothing to avoid the error.
//     // The component will re-render automatically when the path becomes available.
//     return null;
//   }
//   // 4. Construct the final URL only when the path is valid
//   const finalIconUrl = `${spriteFileUrl}#hgi-${this.variant}-${this.type}-${this.name}`;
//   return (
//     <svg width={this.size} height={this.size} style={{ color: this.color || 'currentColor' }} aria-hidden="true">
//       <use href={finalIconUrl}></use>
//     </svg>
//   );
// }
// }
import { h } from "@stencil/core";
export class DgaIconV2 {
    constructor() {
        this.variant = 'bulk';
        this.type = 'rounded';
    }
    // Initialize class name on component load
    componentDidLoad() {
        this.updateIcon();
    }
    // Update class name when properties change
    updateIcon() {
        if (this.container) {
            // Convert the name to lowercase, replace "Icon" suffix, and separate words with hyphens
            const className = this.name
                .replace(/([a-z])([A-Z])/g, '$1-$2')
                .replace(/([A-Z])([0-9])/g, '$1-$2')
                .replace(/([a-z])([0-9])/g, '$1-$2')
                .toLowerCase()
                .replace('-icon', '')
                .replace('icon', '')
                .trim();
            // Build the final class string
            const iconClass = `hgi hgi-${this.variant || ''} ${this.type ? `hgi-${this.type}` : ''} hgi-${className}`;
            // Apply the class to the icon element
            this.container.className = iconClass;
        }
    }
    render() {
        return (h("div", { key: '184095370d827f57785c2b5d20774b258a0a2d66', style: {
                width: '100%',
                height: '100%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 'inherit',
            } }, h("i", { key: '559d285c9c9e124603b9627bec99c7911f1962e7', style: {
                fontSize: `${this.size ? `${this.size}px` : 'inherit'}`,
                color: this.color,
            }, ref: el => (this.container = el) })));
    }
    static get is() { return "dga-icon-v2"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-icon.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-icon.css"]
        };
    }
    static get properties() {
        return {
            "name": {
                "type": "string",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "size": {
                "type": "number",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "color": {
                "type": "string",
                "attribute": "color",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "variant": {
                "type": "string",
                "attribute": "variant",
                "mutable": false,
                "complexType": {
                    "original": "'stroke' | 'solid' | 'duotone' | 'twotone' | 'bulk'",
                    "resolved": "\"bulk\" | \"duotone\" | \"solid\" | \"stroke\" | \"twotone\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'bulk'"
            },
            "type": {
                "type": "string",
                "attribute": "type",
                "mutable": false,
                "complexType": {
                    "original": "'rounded' | 'sharp' | 'standard'",
                    "resolved": "\"rounded\" | \"sharp\" | \"standard\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'rounded'"
            }
        };
    }
    static get watchers() {
        return [{
                "propName": "icon",
                "methodName": "updateIcon"
            }, {
                "propName": "variant",
                "methodName": "updateIcon"
            }, {
                "propName": "type",
                "methodName": "updateIcon"
            }];
    }
}
