@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
86 lines (85 loc) • 5.69 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { __rest } from "tslib";
import { Fragment, h } from "@stencil/core";
import { BaseWebComponent } from "../../internal/functional-components/base-web-component";
import { TooltipFC } from "../../internal/functional-components/tooltip/component";
import { TooltipController } from "../../internal/functional-components/tooltip/controller";
import { buildBadgeTextString, getMsgType, isMsgDefinedAndInputTouched, showExpertSlot, } from "../../schema";
import clsx from "../../utils/clsx";
import { createRelatedUniqueId } from "../../utils/dev.utils";
import KolFieldControlHintFc from "../FormFieldHint";
import KolFieldControlLabelFc from "../FormFieldLabel";
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(KolFieldControlLabelFc, 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(KolFieldControlHintFc, Object.assign({}, (fieldControlHintProps || {}), { baseClassName: "kol-field-control", id: id, hint: hint }))));
};
export default KolFieldControlFc;
//# sourceMappingURL=FieldControl.js.map