// #region Imports
import { html } from '../../../../Dom/Html';
import { ifDefined, live, repeat, when } from '../../../Directives/Directives';
import { ifNonEmpty } from '../../../Directives/IfNonEmpty';
import { PinMode } from '../../../Types/PinMode';
import { Variant } from '../../../Types/Variant';
// #endregion
/**
 * The template of the {@link PinBoxElement}.
 *
 * @public
 */
export function pinBoxElementTemplate(e) {
    return html `
        <div part="root">
            ${repeat([].constructor(e.length), (i) => i, (_, index) => html `
            <div>
                ${when(!e.disabled, () => html `
                <mosaik-focus-ring part="focusRing"
                                   .variant="${e.invalid ? Variant.Danger : e.variant}"
                                   .for="input-${index}"></mosaik-focus-ring>
                `)}
                <input part="input"
                    .value="${live(e.value.substring(index, index + 1))}"
                    ?readonly="${e.readonly}"
                    ?disabled="${e.disabled}"
                    ?required="${e.required}"
                    ?autofocus="${e.autofocus}"
                    id="input-${index}"
                    name="${ifNonEmpty(e.name)}"
                    type="${e.mode === PinMode.Password ? 'password' : 'text'}"
                    pattern="${ifNonEmpty(e.pattern)}"
                    placeholder="${ifNonEmpty(e.placeholder)}"
                    tabindex="${e.tabIndex}"
                    autocomplete="${ifDefined(e.autocomplete ? 'on' : 'off')}"
                    aria-invalid="${ifDefined(e.invalid)}"
                    size="1"
                    maxlength="1"
                    @change="${(x) => e.onChange(x)}"
                    @input="${(x) => e.onInput(x)}"
                    @blur="${(x) => e.onBlur(x)}"
                    @focus="${(x) => e.onFocus(x)}"/>
            </div>
            `)}
        </div>
    `;
}
//# sourceMappingURL=PinBoxElementTemplate.js.map