@public-ui/components/dist/components/FieldControlStateWrapper.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
import { a as __rest } from './tslib.es6.js';
import { h, Fragment } from '@stencil/core/internal/client';
import { B as BaseWebComponent } from './variant-quote.js';
import { T as TooltipFC } from './component.js';
import { T as TooltipController } from './controller.js';
import './common.js';
import './prop.validators.js';
import { b as buildBadgeTextString, s as showExpertSlot } from './component2.js';
import { K as KolFormFieldLabelFc, a as getMsgType, i as isMsgDefinedAndInputTouched, b as KolFormFieldHintFc } from './controller4.js';
import { c as clsx } from './clsx.js';
import { a as createRelatedUniqueId } from './dev.utils.js';

const fieldControlTooltipControllerById = new Map();
const getFieldControlTooltipController = (id) => {
    const tooltipController = fieldControlTooltipControllerById.get(id);
    if (tooltipController) {
        return tooltipController;
    }
    const nextTooltipController = new TooltipController(BaseWebComponent.stateLess);
    nextTooltipController.componentWillLoad({ label: '' });
    fieldControlTooltipControllerById.set(id, nextTooltipController);
    return nextTooltipController;
};
const destroyFieldControlTooltipController = (id) => {
    const tooltipController = fieldControlTooltipControllerById.get(id);
    if (tooltipController) {
        tooltipController.destroy();
        fieldControlTooltipControllerById.delete(id);
    }
};
const InputContainer = (_a, children) => {
    var { class: classNames } = _a, other = __rest(_a, ["class"]);
    return (h("div", Object.assign({ class: clsx('kol-field-control__input', classNames) }, other), children));
};
const KolFieldControlFc = (props, children) => {
    const { class: classNames, id, disabled, label, hideLabel, labelAlign, renderNoTooltip, hint, renderNoHint, accessKey, shortKey, msg, touched, required, readonly, tooltipAlign, tooltipFloatingRef, fieldControlInputProps, fieldControlLabelProps, fieldControlTooltipProps, fieldControlHintProps } = props, other = __rest(props, ["class", "id", "disabled", "label", "hideLabel", "labelAlign", "renderNoTooltip", "hint", "renderNoHint", "accessKey", "shortKey", "msg", "touched", "required", "readonly", "tooltipAlign", "tooltipFloatingRef", "fieldControlInputProps", "fieldControlLabelProps", "fieldControlTooltipProps", "fieldControlHintProps"]);
    const canShowHint = !renderNoHint;
    const canShowTooltip = !renderNoTooltip;
    const hasExpertSlot = showExpertSlot(label);
    const useTooltipInsteadOfLabel = canShowTooltip && !hasExpertSlot && hideLabel;
    const badgeText = buildBadgeTextString(accessKey, shortKey);
    const labelId = createRelatedUniqueId(id, 'label');
    const tooltipController = useTooltipInsteadOfLabel ? getFieldControlTooltipController(id) : undefined;
    if (tooltipController) {
        tooltipController.watchAlign(tooltipAlign);
        tooltipController.watchBadgeText(badgeText || '');
        tooltipController.watchId(labelId);
        tooltipController.watchLabel(label);
    }
    else {
        destroyFieldControlTooltipController(id);
    }
    const forwardedInputRef = fieldControlInputProps === null || fieldControlInputProps === void 0 ? void 0 : fieldControlInputProps.ref;
    const setInputContainerRef = (el) => {
        forwardedInputRef === null || forwardedInputRef === void 0 ? void 0 : forwardedInputRef(el);
        if (tooltipController && el) {
            tooltipController.initContext(el);
            tooltipController.syncListeners(undefined, el, true);
        }
    };
    const components = [
        h(Fragment, null, h(InputContainer, Object.assign({}, fieldControlInputProps, { ref: setInputContainerRef }), children), useTooltipInsteadOfLabel && (h("div", { class: clsx('kol-form-field__tooltip', fieldControlTooltipProps === null || fieldControlTooltipProps === void 0 ? void 0 : fieldControlTooltipProps.class) }, h(TooltipFC, { badgeText: badgeText || '', label: label, align: tooltipAlign, id: labelId, refFloating: tooltipFloatingRef !== null && tooltipFloatingRef !== void 0 ? tooltipFloatingRef : ((el) => {
                tooltipController === null || tooltipController === void 0 ? void 0 : tooltipController.setTooltipElementRef(el);
            }) })))),
        h(KolFormFieldLabelFc, Object.assign({}, (fieldControlLabelProps || {}), { id: id, baseClassName: "kol-field-control", class: clsx(fieldControlLabelProps === null || fieldControlLabelProps === void 0 ? void 0 : fieldControlLabelProps.class, {
                ['kol-field-control__label--visually-hidden']: Boolean(hideLabel),
            }), hasExpertSlot: hasExpertSlot, label: label, accessKey: accessKey, shortKey: shortKey })),
    ];
    if (labelAlign === 'left') {
        components.reverse();
    }
    const stateCssClasses = {
        ['kol-field-control--disabled']: Boolean(disabled),
        ['kol-field-control--required']: Boolean(required),
        ['kol-field-control--touched']: Boolean(touched),
        ['kol-field-control--hide-label']: Boolean(hideLabel),
        ['kol-field-control--read-only']: Boolean(readonly),
        [`kol-field-control--${getMsgType(msg)}`]: Boolean(isMsgDefinedAndInputTouched(msg, touched)),
        [`kol-field-control--label-align-${labelAlign}`]: Boolean(labelAlign),
    };
    return (h("div", Object.assign({ class: clsx('kol-field-control', stateCssClasses, classNames) }, other), components, canShowHint && h(KolFormFieldHintFc, Object.assign({}, (fieldControlHintProps || {}), { baseClassName: "kol-field-control", id: id, hint: hint }))));
};

function getFieldControlProps(state) {
    const props = {
        id: state._id,
        disabled: state._disabled,
        msg: state._msg,
        hint: state._hint,
        label: state._label,
        hideLabel: state._hideLabel,
        touched: state._touched,
    };
    if ('_required' in state) {
        props.required = state._required;
    }
    if ('_readOnly' in state) {
        props.readonly = state._readOnly;
    }
    if ('_labelAlign' in state) {
        props.labelAlign = state._labelAlign;
    }
    if ('_accessKey' in state) {
        props.accessKey = state._accessKey;
    }
    if ('_shortKey' in state) {
        props.shortKey = state._shortKey;
    }
    return props;
}
const FieldControlStateWrapper = (_a, children) => {
    var { state } = _a, other = __rest(_a, ["state"]);
    return (h(KolFieldControlFc, Object.assign({}, getFieldControlProps(state), other), children));
};

export { FieldControlStateWrapper as F };
//# sourceMappingURL=FieldControlStateWrapper.js.map

//# sourceMappingURL=FieldControlStateWrapper.js.map