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 { extractUmbColorVariable } from '../../resources/extractUmbColorVariable.function.js';
import { UmbTextStyles } from '../../style/index.js';
import { html, customElement, property, state, ifDefined, css, styleMap } from '../../../../external/lit/index.js';
import { UmbLitElement } from '../../lit-element/index.js';
/**
 * @element umb-icon
 * @description A wrapper for the uui-icon component with color alias support
 * @augments {UmbLitElement}
 */
let UmbIconElement = class UmbIconElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this._style = {};
    }
    #color;
    #fallbackColor;
    /**
     * Color alias or a color code directly.
     * If a color has been set via the name property, this property will override it.
     * Example **color-pink**
     */
    set color(value) {
        this.#color = value;
        this.#updateColorStyle();
    }
    get color() {
        return this.#color || this.#fallbackColor;
    }
    /**
     * The icon name. Can be appended with a color.
     * Example **icon-heart color-red**
     */
    set name(value) {
        const [icon, color] = value ? value.split(' ') : [];
        this.#fallbackColor = color;
        this._icon = icon;
        this.#updateColorStyle();
    }
    get name() {
        return this._icon;
    }
    #updateColorStyle() {
        const value = this.#color || this.#fallbackColor;
        if (!value) {
            this._style = { '--uui-icon-color': 'inherit' };
            return;
        }
        const color = value.replace('color-', '');
        const variable = extractUmbColorVariable(color);
        const styling = variable ? `var(${variable})` : color;
        this._style = { '--uui-icon-color': styling };
    }
    render() {
        return html `<uui-icon name=${ifDefined(this._icon)} style=${styleMap(this._style)}></uui-icon>`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbIconElement.prototype, "_icon", void 0);
__decorate([
    state()
], UmbIconElement.prototype, "_style", void 0);
__decorate([
    property({ type: String })
], UmbIconElement.prototype, "color", null);
__decorate([
    property({ type: String })
], UmbIconElement.prototype, "name", null);
UmbIconElement = __decorate([
    customElement('umb-icon')
], UmbIconElement);
export { UmbIconElement };
