/**
 * Copyright Aquera Inc 2025
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-option-group.css';
import NileElement from '../internal/nile-element';
let NileOptionGroup = class NileOptionGroup extends NileElement {
    constructor() {
        super(...arguments);
        this.name = "";
        this.data = null;
        this.sticky = false;
    }
    static get styles() {
        return [styles];
    }
    checkForImageOrIcon() {
        return this.data?.prefix?.icon?.name || this.data?.prefix?.image?.src || this.data?.prefix?.prefixText;
    }
    normalizeImageDimension(value) {
        if (value === undefined || value === null || value === "") {
            return "20";
        }
        const dimension = Number(value);
        if (isNaN(dimension) || dimension <= 0) {
            return "20";
        }
        return dimension > 40 ? "25" : dimension.toString();
    }
    render() {
        return html `
			<div part="option-group-header" class="option-group-header">
				<div part="content-container" class="content-container ${this.checkForImageOrIcon() ? 'gap-18px' : ''}">
					<!-- prefix content -->
					${this.data?.prefix?.icon?.name
            ? html `<nile-icon part="prefix-icon" name="${this.data?.prefix?.icon?.name}" size="${this.data?.prefix?.icon?.size || "16"}" color="${this.data?.prefix?.icon?.color || "var(--nile-colors-dark-500)"}" method="${this.data?.prefix?.icon?.method || "fill"}"></nile-icon>`
            : this.data?.prefix?.prefixText
                ? html `<span part="prefix-text">${this.data?.prefix?.prefixText}</span>`
                : this.data?.prefix?.image?.src
                    ? html `<img part="prefix-image" src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.prefix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.prefix?.image?.height)}">`
                    : html `<slot part="prefix" name="prefix" class="option-group-prefix"></slot>`}

					<!-- main content -->
					${this.data?.textContent
            ? html `<span part="content-text">${this.data?.textContent}</span>`
            : html `<slot part="content"></slot>`}
				</div>

				<!-- suffix content -->
				${this.data?.suffix?.icon?.name
            ? html `<nile-icon part="suffix-icon" name="${this.data?.suffix?.icon?.name}" size="${this.data?.suffix?.icon?.size || "16"}" color="${this.data?.suffix?.icon?.color || "var(--nile-colors-dark-500)"}" method="${this.data?.suffix?.icon?.method || "fill"}"></nile-icon>`
            : this.data?.suffix?.suffixText
                ? html `<span part="suffix-text">${this.data?.suffix?.suffixText}</span>`
                : this.data?.suffix?.image?.src
                    ? html `<img part="suffix-image" src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.suffix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.suffix?.image?.height)}">`
                    : html `<slot part="suffix" name="suffix" class="option-group-suffix"></slot>`}
			</div>
			`;
    }
};
__decorate([
    property({ type: String, reflect: true, attribute: true })
], NileOptionGroup.prototype, "name", void 0);
__decorate([
    property({ type: Object, reflect: true, attribute: true })
], NileOptionGroup.prototype, "data", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: true })
], NileOptionGroup.prototype, "sticky", void 0);
NileOptionGroup = __decorate([
    customElement('nile-option-group')
], NileOptionGroup);
export { NileOptionGroup };
export default NileOptionGroup;
//# sourceMappingURL=nile-option-group.js.map