/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { h } from './renderer-DpNDfhNy.js';

const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, placeholder, alwaysShowPlaceholder, hideLabel, hasValue, rtl, showCharCount, maxlength, charCount, }) => {
    if (!label && !hasLabelSlot)
        return;
    if (floatLabel) {
        return (h("label", { class: "form-ctrl__float-label", htmlFor: controlId, id: labelId },
            h("slot", { name: "label" }, label),
            showCharCount && (h("span", { class: "form-ctrl__label-charcount" }, maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`))));
    }
    else {
        return (h("label", { class: { 'form-ctrl__label': true, 'visually-hide': hideLabel }, htmlFor: controlId, id: labelId },
            h("div", { class: "form-ctrl__label-wrap" },
                placeholder && alwaysShowPlaceholder && hasValue && rtl && (h("span", { class: "form-ctrl__label-placeholder" },
                    placeholder,
                    " / ")),
                h("span", { class: "form-ctrl__labeltext" },
                    h("slot", { name: "label" }, label)),
                placeholder && alwaysShowPlaceholder && hasValue && !rtl && (h("span", { class: "form-ctrl__label-placeholder" },
                    " / ",
                    placeholder))),
            showCharCount && (h("span", { class: "form-ctrl__label-charcount" }, maxlength
                ? maxlength - charCount + ' left'
                : charCount + ' characters'))));
    }
};
const FormControlWrap = (props, children) => {
    const { rtl, floatLabel, label, moreId, helperEndId, type, hasHelperSlot, showInlineError, errorMessage, hasHelperEndSlot, } = props;
    return (h("div", { class: {
            'form-ctrl': true,
            'has-label': label !== null && !floatLabel,
            'has-float-label': label !== null && floatLabel,
            'has-helper-end': hasHelperEndSlot,
            rtl,
            [props.class]: !!props.class,
        } },
        h("div", { class: "form-ctrl__wrapper" },
            !floatLabel ? renderLabel({ ...props }) : '',
            h("div", { class: {
                    'form-ctrl__input': true,
                    'form-ctrl__textarea': type === 'textarea',
                } },
                floatLabel && renderLabel({ ...props, rtl }),
                children),
            (showInlineError || hasHelperSlot) && (h("div", { class: "form-ctrl__more", id: moreId },
                showInlineError && (h("div", { class: "form-ctrl__error", "aria-live": "polite" }, errorMessage)),
                h("div", { class: "form-ctrl__helper" },
                    h("slot", { name: "helper" }))))),
        hasHelperEndSlot && (h("div", { class: "form-ctrl__helper-end", id: helperEndId },
            h("slot", { name: "helper-end" })))));
};
const FormControl = (props, children) => {
    const { ref, onClearText, clearControl, readonly, disabled, control, endSlot, endValueSlot, startSlot, showInlineError, } = props;
    const clickThrough = () => {
        control.setFocus();
    };
    return (h("div", { class: "form-ctrl__input-wrap", ref: (el) => {
            if (ref)
                ref(el);
        } },
        h("span", { class: "form-ctrl__slot-start" },
            h("slot", { name: "start" }),
            startSlot),
        children,
        clearControl && !readonly && !disabled && (h("button", { type: "button", class: "icon form-ctrl__clear-btn", tabindex: "-1", onTouchStart: onClearText, onMouseDown: onClearText },
            h("nano-icon", { name: "light/xmark", role: "img", ariaLabel: "Clear content" }))),
        showInlineError && (h("div", { onClick: clickThrough, class: "form-ctrl__validation-icon" },
            h("nano-icon", { name: "solid/circle-xmark", class: "form-ctrl__error-icon" }),
            h("nano-icon", { name: "solid/circle-check", class: "form-ctrl__success-icon" }))),
        h("span", { class: "form-ctrl__slot-value-end", onClick: clickThrough },
            h("slot", { name: "value-end" }),
            endValueSlot),
        h("span", { class: "form-ctrl__slot-end" },
            h("slot", { name: "end" }),
            endSlot)));
};

export { FormControlWrap as F, FormControl as a };
