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 { css, customElement, html, property, state, unsafeHTML, when } from '../../../external/lit/index.js';
import { escapeHTML } from '../utils/index.js';
import { UmbLitElement } from '../lit-element/index.js';
/**
 * This element allows you to localize a string with optional interpolation values.
 * @element umb-localize
 * @slot - The fallback value if the key is not found.
 */
let UmbLocalizeElement = class UmbLocalizeElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        /**
         * If true, the key will be rendered instead of the fallback value if the key is not found.
         * @attr
         */
        this.debug = false;
    }
    get text() {
        // As translated texts can contain HTML, we will need to render with unsafeHTML.
        // But arguments can come from user input, so they should be escaped.
        const escapedArgs = (this.args ?? []).map((a) => escapeHTML(a));
        const localizedValue = this.localize.termOrDefault(this.key, null, ...escapedArgs);
        // Update the data attribute based on whether the key was found
        if (localizedValue === null) {
            this.getHostElement().setAttribute('data-localize-missing', this.key);
            return null;
        }
        this.getHostElement().removeAttribute('data-localize-missing');
        return localizedValue.trim();
    }
    render() {
        return when(this.text, (text) => unsafeHTML(text), () => (this.debug ? html `<span style="color:red">${this.key}</span>` : html `<slot></slot>`));
    }
    static { this.styles = [
        css `
			:host {
				display: contents;
			}
		`,
    ]; }
};
__decorate([
    property()
], UmbLocalizeElement.prototype, "key", void 0);
__decorate([
    property({ type: Array })
], UmbLocalizeElement.prototype, "args", void 0);
__decorate([
    property({ type: Boolean })
], UmbLocalizeElement.prototype, "debug", void 0);
__decorate([
    state()
], UmbLocalizeElement.prototype, "text", null);
UmbLocalizeElement = __decorate([
    customElement('umb-localize')
], UmbLocalizeElement);
export { UmbLocalizeElement };
