@public-ui/components 4.3.0 → 4.3.1-rc.0

package/dist/cjs/FieldControlStateWrapper-D8punG9v.js

@@ -0,0 +1,123 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-Cm0ytgPY.js');
+var index = require('./index-wWcNpiEl.js');
+var baseWebComponent = require('./base-web-component-BPX1rer4.js');
+var component$1 = require('./component-BhAZscag.js');
+var controller = require('./controller-Fmy7IuDz.js');
+require('./common-CN1iwxfv.js');
+var component = require('./component-BXKykziH.js');
+var FormFieldStateWrapper = require('./FormFieldStateWrapper-DfhtHQ0q.js');
+var clsx = require('./clsx-Bm_HQUnh.js');
+var dev_utils = require('./dev.utils-BbU8cv-y.js');
+
+const fieldControlTooltipControllerById = new Map();
+const getFieldControlTooltipController = (id) => {
+    const tooltipController = fieldControlTooltipControllerById.get(id);
+    if (tooltipController) {
+        return tooltipController;
+    }
+    const nextTooltipController = new controller.TooltipController(baseWebComponent.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 = tslib_es6.__rest(_a, ["class"]);
+    return (index.h("div", Object.assign({ class: clsx.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 = tslib_es6.__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 = component.showExpertSlot(label);
+    const useTooltipInsteadOfLabel = canShowTooltip && !hasExpertSlot && hideLabel;
+    const badgeText = component.buildBadgeTextString(accessKey, shortKey);
+    const labelId = dev_utils.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 = [
+        index.h(index.Fragment, null, index.h(InputContainer, Object.assign({}, fieldControlInputProps, { ref: setInputContainerRef }), children), useTooltipInsteadOfLabel && (index.h("div", { class: clsx.clsx('kol-form-field__tooltip', fieldControlTooltipProps === null || fieldControlTooltipProps === void 0 ? void 0 : fieldControlTooltipProps.class) }, index.h(component$1.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);
+            }) })))),
+        index.h(FormFieldStateWrapper.KolFormFieldLabelFc, Object.assign({}, (fieldControlLabelProps || {}), { id: id, baseClassName: "kol-field-control", class: clsx.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--${FormFieldStateWrapper.getMsgType(msg)}`]: Boolean(FormFieldStateWrapper.isMsgDefinedAndInputTouched(msg, touched)),
+        [`kol-field-control--label-align-${labelAlign}`]: Boolean(labelAlign),
+    };
+    return (index.h("div", Object.assign({ class: clsx.clsx('kol-field-control', stateCssClasses, classNames) }, other), components, canShowHint && index.h(FormFieldStateWrapper.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 = tslib_es6.__rest(_a, ["state"]);
+    return (index.h(KolFieldControlFc, Object.assign({}, getFieldControlProps(state), other), children));
+};
+
+exports.FieldControlStateWrapper = FieldControlStateWrapper;
+//# sourceMappingURL=FieldControlStateWrapper-D8punG9v.js.map
+
+//# sourceMappingURL=FieldControlStateWrapper-D8punG9v.js.map

package/dist/cjs/FieldControlStateWrapper-D8punG9v.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldControlStateWrapper-D8punG9v.js","sources":["src/functional-components/FieldControl/FieldControl.tsx","src/functional-component-wrappers/FieldControlStateWrapper/FieldControlStateWrapper.tsx"],"sourcesContent":["import { Fragment, h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport { TooltipFC } from '../../internal/functional-components/tooltip/component';\nimport { TooltipController } from '../../internal/functional-components/tooltip/controller';\nimport {\n\tbuildBadgeTextString,\n\tgetMsgType,\n\tisMsgDefinedAndInputTouched,\n\tshowExpertSlot,\n\ttype AlignPropType,\n\ttype LabelAlignPropType,\n\ttype MsgPropType,\n\ttype Stringified,\n} from '../../schema';\nimport clsx from '../../utils/clsx';\nimport { createRelatedUniqueId } from '../../utils/dev.utils';\nimport KolFieldControlHintFc from '../FormFieldHint';\nimport KolFieldControlLabelFc from '../FormFieldLabel';\n\nconst fieldControlTooltipControllerById = new Map<string, TooltipController>();\n\nconst getFieldControlTooltipController = (id: string): TooltipController => {\n\tconst tooltipController = fieldControlTooltipControllerById.get(id);\n\tif (tooltipController) {\n\t\treturn tooltipController;\n\t}\n\n\tconst nextTooltipController = new TooltipController(BaseWebComponent.stateLess);\n\tnextTooltipController.componentWillLoad({ label: '' });\n\tfieldControlTooltipControllerById.set(id, nextTooltipController);\n\treturn nextTooltipController;\n};\n\nconst destroyFieldControlTooltipController = (id: string): void => {\n\tconst tooltipController = fieldControlTooltipControllerById.get(id);\n\tif (tooltipController) {\n\t\ttooltipController.destroy();\n\t\tfieldControlTooltipControllerById.delete(id);\n\t}\n};\n\nexport type FieldControlProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> & {\n\tid: string;\n\thint?: string;\n\tlabel: string;\n\thideLabel?: boolean;\n\tlabelAlign?: LabelAlignPropType;\n\taccessKey?: string;\n\tshortKey?: string;\n\ttooltipAlign?: AlignPropType;\n\tdisabled?: boolean;\n\tmsg?: Stringified<MsgPropType>;\n\ttouched?: boolean;\n\trequired?: boolean;\n\treadonly?: boolean;\n\tshowTooltip?: boolean;\n\ttooltipFloatingRef?: (el?: HTMLDivElement) => void;\n\ttooltipArrowRef?: (el?: HTMLDivElement) => void;\n\n\trenderNoLabel?: boolean;\n\trenderNoHint?: boolean;\n\trenderNoTooltip?: boolean;\n\n\tfieldControlLabelProps?: JSXBase.HTMLAttributes<Omit<HTMLLabelElement | HTMLLegendElement, 'id' | 'hidden' | 'htmlFor'>> & {\n\t\tcomponent?: 'label' | 'legend';\n\t\tshowBadge?: boolean;\n\t};\n\tfieldControlInputProps?: JSXBase.HTMLAttributes<HTMLDivElement>;\n\tfieldControlTooltipProps?: Pick<JSXBase.HTMLAttributes<HTMLElement>, 'class'>;\n\tfieldControlHintProps?: JSXBase.HTMLAttributes<HTMLElement>;\n};\n\nconst InputContainer: FC<JSXBase.HTMLAttributes<HTMLDivElement>> = ({ class: classNames, ...other }, children) => {\n\treturn (\n\t\t<div class={clsx('kol-field-control__input', classNames)} {...other}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nconst KolFieldControlFc: FC<FieldControlProps> = (props, children) => {\n\tconst {\n\t\tclass: classNames,\n\t\tid,\n\t\tdisabled,\n\t\tlabel,\n\t\thideLabel,\n\t\tlabelAlign,\n\t\trenderNoTooltip,\n\t\thint,\n\t\trenderNoHint,\n\t\taccessKey,\n\t\tshortKey,\n\t\tmsg,\n\t\ttouched,\n\t\trequired,\n\t\treadonly,\n\t\ttooltipAlign,\n\t\ttooltipFloatingRef,\n\t\tfieldControlInputProps,\n\t\tfieldControlLabelProps,\n\t\tfieldControlTooltipProps,\n\t\tfieldControlHintProps,\n\t\t...other\n\t} = props;\n\n\tconst canShowHint = !renderNoHint;\n\tconst canShowTooltip = !renderNoTooltip;\n\tconst hasExpertSlot = showExpertSlot(label);\n\tconst useTooltipInsteadOfLabel = canShowTooltip && !hasExpertSlot && hideLabel;\n\tconst badgeText = buildBadgeTextString(accessKey, shortKey);\n\tconst labelId = createRelatedUniqueId(id, 'label');\n\tconst tooltipController = useTooltipInsteadOfLabel ? getFieldControlTooltipController(id) : undefined;\n\n\tif (tooltipController) {\n\t\ttooltipController.watchAlign(tooltipAlign);\n\t\ttooltipController.watchBadgeText(badgeText || '');\n\t\ttooltipController.watchId(labelId);\n\t\ttooltipController.watchLabel(label);\n\t} else {\n\t\tdestroyFieldControlTooltipController(id);\n\t}\n\n\tconst forwardedInputRef = fieldControlInputProps?.ref as ((el?: HTMLDivElement) => void) | undefined;\n\tconst setInputContainerRef = (el?: HTMLDivElement): void => {\n\t\tforwardedInputRef?.(el);\n\t\tif (tooltipController && el) {\n\t\t\ttooltipController.initContext(el);\n\t\t\ttooltipController.syncListeners(undefined, el, true);\n\t\t}\n\t};\n\n\tconst components = [\n\t\t<>\n\t\t\t<InputContainer {...fieldControlInputProps} ref={setInputContainerRef}>\n\t\t\t\t{children}\n\t\t\t</InputContainer>\n\t\t\t{useTooltipInsteadOfLabel && (\n\t\t\t\t<div class={clsx('kol-form-field__tooltip', fieldControlTooltipProps?.class)}>\n\t\t\t\t\t<TooltipFC\n\t\t\t\t\t\tbadgeText={badgeText || ''}\n\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\talign={tooltipAlign}\n\t\t\t\t\t\tid={labelId}\n\t\t\t\t\t\trefFloating={\n\t\t\t\t\t\t\ttooltipFloatingRef ??\n\t\t\t\t\t\t\t((el?: HTMLDivElement) => {\n\t\t\t\t\t\t\t\ttooltipController?.setTooltipElementRef(el);\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>,\n\t\t<KolFieldControlLabelFc\n\t\t\t{...(fieldControlLabelProps || {})}\n\t\t\tid={id}\n\t\t\tbaseClassName=\"kol-field-control\"\n\t\t\tclass={clsx(fieldControlLabelProps?.class, {\n\t\t\t\t['kol-field-control__label--visually-hidden']: Boolean(hideLabel),\n\t\t\t})}\n\t\t\thasExpertSlot={hasExpertSlot}\n\t\t\tlabel={label}\n\t\t\taccessKey={accessKey}\n\t\t\tshortKey={shortKey}\n\t\t/>,\n\t];\n\n\tif (labelAlign === 'left') {\n\t\tcomponents.reverse();\n\t}\n\n\tconst stateCssClasses = {\n\t\t['kol-field-control--disabled']: Boolean(disabled),\n\t\t['kol-field-control--required']: Boolean(required),\n\t\t['kol-field-control--touched']: Boolean(touched),\n\t\t['kol-field-control--hide-label']: Boolean(hideLabel),\n\t\t['kol-field-control--read-only']: Boolean(readonly),\n\t\t[`kol-field-control--${getMsgType(msg)}`]: Boolean(isMsgDefinedAndInputTouched(msg, touched)),\n\t\t[`kol-field-control--label-align-${labelAlign}`]: Boolean(labelAlign),\n\t};\n\n\treturn (\n\t\t<div class={clsx('kol-field-control', stateCssClasses, classNames)} {...other}>\n\t\t\t{components}\n\t\t\t{canShowHint && <KolFieldControlHintFc {...(fieldControlHintProps || {})} baseClassName=\"kol-field-control\" id={id} hint={hint} />}\n\t\t</div>\n\t);\n};\n\nexport default KolFieldControlFc;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport KolFieldControlFc, { type FieldControlProps } from '../../functional-components/FieldControl';\nimport {\n\ttype InputCheckboxStates,\n\ttype InputColorStates,\n\ttype InputEmailStates,\n\ttype InputFileStates,\n\ttype InputNumberStates,\n\ttype InputPasswordStates,\n\ttype InputRadioStates,\n\ttype InputRangeStates,\n\ttype InputTextStates,\n\ttype MsgPropType,\n\ttype SelectStates,\n} from '../../schema';\n\ntype InputState =\n\t| InputTextStates\n\t| InputEmailStates\n\t| InputPasswordStates\n\t| InputNumberStates\n\t| InputColorStates\n\t| InputFileStates\n\t| InputRangeStates\n\t| InputCheckboxStates\n\t| InputRadioStates\n\t| SelectStates;\n\nexport type FieldControlStateWrapperProps = Partial<FieldControlProps> & {\n\tstate: InputState;\n};\n\nfunction getFieldControlProps(state: InputState): FieldControlProps {\n\tconst props: FieldControlProps = {\n\t\tid: state._id,\n\t\tdisabled: state._disabled,\n\t\tmsg: state._msg as MsgPropType,\n\t\thint: state._hint,\n\t\tlabel: state._label,\n\t\thideLabel: state._hideLabel,\n\t\ttouched: state._touched,\n\t};\n\n\tif ('_required' in state) {\n\t\tprops.required = state._required;\n\t}\n\n\tif ('_readOnly' in state) {\n\t\tprops.readonly = state._readOnly;\n\t}\n\n\tif ('_labelAlign' in state) {\n\t\tprops.labelAlign = state._labelAlign;\n\t}\n\n\tif ('_accessKey' in state) {\n\t\tprops.accessKey = state._accessKey;\n\t}\n\n\tif ('_shortKey' in state) {\n\t\tprops.shortKey = state._shortKey;\n\t}\n\n\treturn props;\n}\n\nconst FieldControlStateWrapper: FC<FieldControlStateWrapperProps> = ({ state, ...other }, children) => {\n\treturn (\n\t\t<KolFieldControlFc {...getFieldControlProps(state)} {...other}>\n\t\t\t{children}\n\t\t</KolFieldControlFc>\n\t);\n};\n\nexport default FieldControlStateWrapper;\n"],"names":["TooltipController","BaseWebComponent","__rest","h","clsx","showExpertSlot","buildBadgeTextString","createRelatedUniqueId","Fragment","TooltipFC","KolFieldControlLabelFc","getMsgType","isMsgDefinedAndInputTouched","KolFieldControlHintFc"],"mappings":"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"}

package/dist/cjs/FormFieldStateWrapper-DfhtHQ0q.js

@@ -0,0 +1,479 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+'use strict';
+
+var common = require('./common-CN1iwxfv.js');
+var accessAndShortKey = require('./access-and-short-key-Dt0HA_8K.js');
+var disabled = require('./disabled-CBjF4rrw.js');
+var hideLabel = require('./hide-label-D7h2efSv.js');
+var label = require('./label-Fnlr9jIf.js');
+var tooltipAlign = require('./tooltip-align-Ce5KsXxa.js');
+var variantClassName = require('./variant-class-name-Dgnr-3Zv.js');
+var events = require('./events-DN9qldnr.js');
+var associated_controller = require('./associated.controller-D52OfJgm.js');
+var tslib_es6 = require('./tslib.es6-Cm0ytgPY.js');
+var index = require('./index-wWcNpiEl.js');
+var i18n = require('./i18n-D834clm3.js');
+var baseWebComponent = require('./base-web-component-BPX1rer4.js');
+var component$1 = require('./component-BhAZscag.js');
+var controller = require('./controller-Fmy7IuDz.js');
+var component = require('./component-BXKykziH.js');
+var clsx = require('./clsx-Bm_HQUnh.js');
+var dev_utils = require('./dev.utils-BbU8cv-y.js');
+var componentNames = require('./component-names-5KS_pYRF.js');
+var Alert = require('./Alert-BU0P0GKW.js');
+
+const validateAdjustHeight = (component, value) => {
+    common.watchBoolean(component, '_adjustHeight', value);
+};
+
+const validateHideMsg = (component, value, options) => {
+    common.watchBoolean(component, '_hideMsg', value, options);
+};
+
+const validateHint = (component, value) => {
+    common.watchString(component, '_hint', value);
+};
+
+const validateMsg = (component, value) => {
+    common.objectObjectHandler(value, () => {
+        try {
+            value = common.parseJson(value);
+        }
+        catch (_a) {
+        }
+        common.watchValidator(component, `_msg`, (value) => {
+            if (value === undefined) {
+                return true;
+            }
+            if (typeof value === 'string' && value.length > 0) {
+                return true;
+            }
+            if (common.isObject(value) && value !== null) {
+                const desc = value._description;
+                return common.isString(desc, 1);
+            }
+            return false;
+        }, new Set(['MsgPropType', 'string']), value);
+    });
+};
+function isMsgDefinedAndInputTouched(msg, touched) {
+    return Boolean(msg) && touched === true;
+}
+function normalizeMsg(msg) {
+    if (typeof msg === 'string') {
+        try {
+            return common.parseJson(msg);
+        }
+        catch (_a) {
+            return { _description: msg, _type: 'error' };
+        }
+    }
+    if (msg && typeof msg === 'object' && !('_type' in msg)) {
+        return Object.assign(Object.assign({}, msg), { _type: 'error' });
+    }
+    return msg;
+}
+function getMsgType(msg) {
+    var _a;
+    if (typeof msg === 'string') {
+        return 'error';
+    }
+    return (_a = msg === null || msg === void 0 ? void 0 : msg._type) !== null && _a !== void 0 ? _a : 'error';
+}
+
+const validateTouched = (component, value) => {
+    common.watchBoolean(component, '_touched', value);
+};
+
+class ControlledInputController extends associated_controller.AssociatedInputController {
+    constructor(component, name, host) {
+        super(component, name, host);
+        this.component = component;
+    }
+    validateTouched(value) {
+        validateTouched(this.component, value);
+    }
+    componentWillLoad() {
+        super.componentWillLoad();
+        this.validateTouched(this.component._touched);
+    }
+}
+
+class InputController extends ControlledInputController {
+    constructor(component, name, host) {
+        super(component, name, host);
+        this.valueChangeListeners = [];
+        this.inputHasFocus = false;
+        this.onFacade = {
+            onBlur: this.onBlur.bind(this),
+            onChange: this.onChange.bind(this),
+            onClick: this.onClick.bind(this),
+            onFocus: this.onFocus.bind(this),
+            onInput: this.onInput.bind(this),
+            onKeyDown: this.onKeyDown.bind(this),
+        };
+        this.component = component;
+    }
+    validateAccessKey(value) {
+        accessAndShortKey.validateAccessKey(this.component, value);
+        accessAndShortKey.validateAccessAndShortKey(value, this.component._shortKey);
+    }
+    validateAdjustHeight(value) {
+        validateAdjustHeight(this.component, value);
+    }
+    validateDisabled(value) {
+        disabled.validateDisabled(this.component, value);
+    }
+    validateTooltipAlign(value) {
+        tooltipAlign.validateTooltipAlign(this.component, value);
+    }
+    validateHideMsg(value) {
+        validateHideMsg(this.component, value, {
+            hooks: {
+                afterPatch: () => {
+                    if (this.component.state._hideMsg) {
+                        common.a11yHint('Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.');
+                    }
+                },
+            },
+        });
+    }
+    validateHideLabel(value) {
+        hideLabel.validateHideLabel(this.component, value, {
+            hooks: {
+                afterPatch: () => {
+                    if (this.component.state._hideLabel) {
+                        common.a11yHint('Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.');
+                    }
+                },
+            },
+        });
+    }
+    validateHint(value) {
+        validateHint(this.component, value);
+    }
+    validateLabel(value) {
+        label.validateLabelWithExpertSlot(this.component, value, {
+            required: true,
+        });
+    }
+    validateMsg(value) {
+        validateMsg(this.component, value);
+    }
+    validateOn(value) {
+        if (typeof value === 'object') {
+            common.setState(this.component, '_on', value);
+        }
+    }
+    validateShortKey(value) {
+        accessAndShortKey.validateShortKey(this.component, value);
+        accessAndShortKey.validateAccessAndShortKey(this.component._accessKey, value);
+    }
+    validateSmartButton(value) {
+        common.objectObjectHandler(value, () => {
+            try {
+                value = common.parseJson(value);
+            }
+            catch (_a) {
+            }
+            common.setState(this.component, '_smartButton', value);
+        });
+    }
+    validateTabIndex(value) {
+        accessAndShortKey.validateTabIndex(this.component, value);
+    }
+    validateVariant(value) {
+        variantClassName.validateVariantClassName(this.component, value);
+    }
+    componentWillLoad() {
+        super.componentWillLoad();
+        this.validateAccessKey(this.component._accessKey);
+        this.validateAdjustHeight(this.component._adjustHeight);
+        this.validateMsg(this.component._msg);
+        this.validateDisabled(this.component._disabled);
+        this.validateHideMsg(this.component._hideMsg);
+        this.validateHideLabel(this.component._hideLabel);
+        this.validateHint(this.component._hint);
+        this.validateLabel(this.component._label);
+        this.validateShortKey(this.component._shortKey);
+        this.validateSmartButton(this.component._smartButton);
+        this.validateOn(this.component._on);
+        this.validateTabIndex(this.component._tabIndex);
+        this.validateVariant(this.component._variant);
+        accessAndShortKey.validateAccessAndShortKey(this.component._accessKey, this.component._shortKey);
+    }
+    emitEvent(type, value) {
+        if (this.host) {
+            events.dispatchDomEvent(this.host, type, value);
+        }
+    }
+    onChange(event, value) {
+        var _a;
+        event.stopPropagation();
+        if (typeof value === 'undefined') {
+            value = event.target.value;
+        }
+        this.emitEvent(events.KolEvent.change, value);
+        if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function') {
+            this.component._on.onChange(event, value);
+        }
+        this.valueChangeListeners.forEach((listener) => listener(value));
+    }
+    onInput(event, shouldSetFormAssociatedValue = true, value) {
+        var _a;
+        event.stopPropagation();
+        if (typeof value === 'undefined') {
+            value = event.target.value;
+        }
+        this.emitEvent(events.KolEvent.input, value);
+        if (shouldSetFormAssociatedValue) {
+            this.setFormAssociatedValue(value);
+        }
+        if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onInput) === 'function') {
+            this.component._on.onInput(event, value);
+        }
+    }
+    onClick(event) {
+        var _a;
+        this.emitEvent(events.KolEvent.click);
+        if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function') {
+            this.component._on.onClick(event);
+        }
+    }
+    onFocus(event) {
+        var _a;
+        if (!this.inputHasFocus) {
+            this.emitEvent(events.KolEvent.focus);
+            if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onFocus) === 'function') {
+                this.component._on.onFocus(event);
+            }
+            this.inputHasFocus = true;
+        }
+    }
+    onBlur(event) {
+        var _a, _b;
+        if (this.component._disabled) {
+            return;
+        }
+        const root = ((_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) || this.host;
+        const isFocusInside = (root === null || root === void 0 ? void 0 : root.contains(event.relatedTarget)) || this.host === event.relatedTarget;
+        if (this.inputHasFocus && !isFocusInside) {
+            this.component._touched = true;
+            this.emitEvent(events.KolEvent.blur);
+            if (typeof ((_b = this.component._on) === null || _b === void 0 ? void 0 : _b.onBlur) === 'function') {
+                this.component._on.onBlur(event);
+            }
+            this.inputHasFocus = false;
+        }
+    }
+    onKeyDown(event) {
+        var _a;
+        this.emitEvent(events.KolEvent.keydown);
+        if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onKeyDown) === 'function') {
+            this.component._on.onKeyDown(event);
+        }
+    }
+    addValueChangeListener(listener) {
+        this.valueChangeListeners.push(listener);
+    }
+    hasSoftCharacterLimit() {
+        return typeof this.component.state._maxLength === 'number' && this.component.state._maxLengthBehavior === 'soft';
+    }
+    hasCounter() {
+        return this.component.state._hasCounter === true;
+    }
+}
+
+function getDefaultProps({ ariaDescribedBy, hideLabel, label }) {
+    return {
+        title: '',
+        autoCapitalize: 'off',
+        autoCorrect: 'off',
+        'aria-describedby': (ariaDescribedBy === null || ariaDescribedBy === void 0 ? void 0 : ariaDescribedBy.length) ? ariaDescribedBy.join(' ') : undefined,
+        'aria-label': hideLabel && label ? label : undefined,
+    };
+}
+
+const getRenderStates = (state) => {
+    const msg = state._msg;
+    const description = typeof msg === 'string' ? msg : msg === null || msg === void 0 ? void 0 : msg._description;
+    const type = getMsgType(msg);
+    const hasMessage = Boolean(description && description.length > 0);
+    const isMessageValidError = type === 'error' && hasMessage;
+    const hasError = isMessageValidError && state._touched === true;
+    const hasHint = typeof state._hint === 'string' && state._hint.length > 0;
+    const ariaDescribedBy = [];
+    if (hasMessage && !state._hideMsg) {
+        ariaDescribedBy.push(dev_utils.createRelatedUniqueId(state._id, 'msg'));
+    }
+    if (hasHint === true) {
+        ariaDescribedBy.push(dev_utils.createRelatedUniqueId(state._id, 'hint'));
+    }
+    if (hasError === true) {
+        ariaDescribedBy.push(dev_utils.createRelatedUniqueId(state._id, 'error'));
+    }
+    return { hasError, hasHint, ariaDescribedBy };
+};
+
+const KolFormFieldHintFc = (_a) => {
+    var { id, class: classNames, hint, baseClassName = 'kol-form-field' } = _a, other = tslib_es6.__rest(_a, ["id", "class", "hint", "baseClassName"]);
+    if (!hint) {
+        return null;
+    }
+    return (index.h("span", Object.assign({ class: clsx.clsx(`${baseClassName}__hint`, classNames), id: dev_utils.createRelatedUniqueId(id || '', 'hint') }, other), hint));
+};
+
+const KolFormFieldLabelFc = (_a) => {
+    var { component: Component = 'label', id, baseClassName = 'kol-form-field', class: classNames, accessKey, shortKey, label, hideLabel, hasExpertSlot, showBadge = true, readOnly, infoPopover } = _a, other = tslib_es6.__rest(_a, ["component", "id", "baseClassName", "class", "accessKey", "shortKey", "label", "hideLabel", "hasExpertSlot", "showBadge", "readOnly", "infoPopover"]);
+    const useTooltipInsteadOfLabel = !hasExpertSlot && hideLabel;
+    const translateReadOnly = i18n.translate('kol-readonly');
+    const badgeText = showBadge === false ? undefined : component.buildBadgeTextString(accessKey, shortKey);
+    return (index.h(Component, Object.assign({}, other, { class: clsx.clsx(`${baseClassName}__label`, classNames), id: !useTooltipInsteadOfLabel ? dev_utils.createRelatedUniqueId(id, 'label') : undefined, hidden: useTooltipInsteadOfLabel, htmlFor: id }), index.h(component.SpanFC, { class: `${baseClassName}__label-text`, label: hasExpertSlot ? '' : (label !== null && label !== void 0 ? label : ''), badgeText: badgeText }, index.h("slot", { name: "expert" })), !hasExpertSlot && readOnly && (index.h("span", { class: `${baseClassName}__label__read-only`, "aria-hidden": "true" }, "(", translateReadOnly, ")")), !hasExpertSlot && infoPopover && (index.h(componentNames.KolPopoverButtonWcTag, Object.assign({ _variant: "ghost" }, infoPopover, { _hideLabel: true, _inline: true }), index.h("div", { class: "kol-popover-button__popover--styled" }, infoPopover._content)))));
+};
+
+const FormFieldMsgFc = (_a) => {
+    var _b, _c;
+    var { alert, msg, id, class: classNames } = _a, other = tslib_es6.__rest(_a, ["alert", "msg", "id", "class"]);
+    const message = normalizeMsg(msg);
+    return (index.h(Alert.KolAlertFc, Object.assign({ id: dev_utils.createRelatedUniqueId(id, 'msg'), alert: (_b = message === null || message === void 0 ? void 0 : message._alert) !== null && _b !== void 0 ? _b : alert, hasCloser: false, level: 0, type: (_c = message === null || message === void 0 ? void 0 : message._type) !== null && _c !== void 0 ? _c : 'error', variant: "msg", class: clsx.clsx('kol-form-field__msg', classNames) }, other), (message === null || message === void 0 ? void 0 : message._description) || undefined));
+};
+
+const formFieldTooltipControllerById = new Map();
+const getFormFieldTooltipController = (id) => {
+    const tooltipController = formFieldTooltipControllerById.get(id);
+    if (tooltipController) {
+        return tooltipController;
+    }
+    const nextTooltipController = new controller.TooltipController(baseWebComponent.BaseWebComponent.stateLess);
+    nextTooltipController.componentWillLoad({ label: '' });
+    formFieldTooltipControllerById.set(id, nextTooltipController);
+    return nextTooltipController;
+};
+const destroyFormFieldTooltipController = (id) => {
+    const tooltipController = formFieldTooltipControllerById.get(id);
+    if (tooltipController) {
+        tooltipController.destroy();
+        formFieldTooltipControllerById.delete(id);
+    }
+};
+function getModifierClassNameByMsgType(msg) {
+    if (msg === null || msg === void 0 ? void 0 : msg.type) {
+        return ({
+            default: 'msg-type-default',
+            info: 'msg-type-info',
+            success: 'msg-type-success',
+            warning: 'msg-type-warning',
+            error: 'msg-type-error',
+        }[msg === null || msg === void 0 ? void 0 : msg.type] || '');
+    }
+    return '';
+}
+const InputContainer = (_a, children) => {
+    var { class: classNames } = _a, other = tslib_es6.__rest(_a, ["class"]);
+    return (index.h("div", Object.assign({ class: clsx.clsx('kol-form-field__input', classNames) }, other), children));
+};
+const KolFormFieldFc = (props, children) => {
+    const { component: Component = 'div', renderNoLabel, renderNoTooltip, renderNoHint, anotherChildren, id, required, alert, disabled, class: classNames, msg, hideMsg, hideLabel, label, infoPopover, hint, accessKey, shortKey, counter, readOnly, touched, maxLength, ariaDescribedBy, showBadge, tooltipAlign, tooltipFloatingRef, variant, formFieldLabelProps, formFieldHintProps, formFieldTooltipProps, formFieldMsgProps, formFieldInputProps } = props, other = tslib_es6.__rest(props, ["component", "renderNoLabel", "renderNoTooltip", "renderNoHint", "anotherChildren", "id", "required", "alert", "disabled", "class", "msg", "hideMsg", "hideLabel", "label", "infoPopover", "hint", "accessKey", "shortKey", "counter", "readOnly", "touched", "maxLength", "ariaDescribedBy", "showBadge", "tooltipAlign", "tooltipFloatingRef", "variant", "formFieldLabelProps", "formFieldHintProps", "formFieldTooltipProps", "formFieldMsgProps", "formFieldInputProps"]);
+    const showLabel = !renderNoLabel;
+    const showHint = !renderNoHint;
+    const showTooltip = !renderNoTooltip;
+    const hasExpertSlot = component.showExpertSlot(label);
+    const showMsg = isMsgDefinedAndInputTouched(msg, touched);
+    const badgeText = component.buildBadgeTextString(accessKey, shortKey);
+    const useTooltipInsteadOfLabel = showTooltip && !hasExpertSlot && hideLabel;
+    const labelId = dev_utils.createRelatedUniqueId(id, 'label');
+    const tooltipController = useTooltipInsteadOfLabel ? getFormFieldTooltipController(id) : undefined;
+    if (tooltipController) {
+        tooltipController.watchAlign(tooltipAlign);
+        tooltipController.watchBadgeText(badgeText || '');
+        tooltipController.watchId(labelId);
+        tooltipController.watchLabel(label);
+    }
+    else {
+        destroyFormFieldTooltipController(id);
+    }
+    const forwardedInputRef = formFieldInputProps === null || formFieldInputProps === void 0 ? void 0 : formFieldInputProps.ref;
+    const setInputContainerRef = (el) => {
+        forwardedInputRef === null || forwardedInputRef === void 0 ? void 0 : forwardedInputRef(el);
+        if (tooltipController && el) {
+            tooltipController.initContext(el);
+            tooltipController.syncListeners(undefined, el, true);
+        }
+    };
+    let stateCssClasses = {
+        ['kol-form-field--disabled']: Boolean(disabled),
+        ['kol-form-field--required']: Boolean(required),
+        ['kol-form-field--touched']: Boolean(touched),
+        ['kol-form-field--hide-label']: Boolean(hideLabel),
+        ['kol-form-field--read-only']: Boolean(readOnly),
+        ['kol-form-field--hidden-msg']: Boolean(hideMsg),
+    };
+    if (variant) {
+        stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [variantClassName.classNameFromVariant(variant, 'form-field')]: true });
+    }
+    if (showMsg) {
+        const msgType = getMsgType(msg);
+        stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [`kol-form-field--${msgType}`]: true, [`kol-form-field--${getModifierClassNameByMsgType({ type: msgType })}`]: true });
+    }
+    return (index.h(Component, Object.assign({ class: clsx.clsx('kol-form-field', stateCssClasses, classNames), "aria-describedby": ariaDescribedBy }, other), showLabel && (index.h(KolFormFieldLabelFc, Object.assign({}, (formFieldLabelProps || {}), { id: id, hasExpertSlot: hasExpertSlot, hideLabel: hideLabel, label: label, accessKey: accessKey, shortKey: shortKey, readOnly: readOnly, showBadge: showBadge, infoPopover: infoPopover }))), index.h(InputContainer, Object.assign({}, formFieldInputProps, { ref: setInputContainerRef }), children, useTooltipInsteadOfLabel && hideLabel === true && (index.h("div", { class: clsx.clsx('kol-form-field__tooltip', formFieldTooltipProps === null || formFieldTooltipProps === void 0 ? void 0 : formFieldTooltipProps.class) }, index.h(component$1.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);
+        }) })))), counter && !(counter.maxLengthBehavior === 'soft' && typeof counter.maxLength !== 'number') && (index.h("div", { class: "kol-form-field__counter" }, index.h("span", { "data-testid": "input-counter", "aria-hidden": "true", class: "kol-form-field__counter", ref: counter.visualRef }), index.h("span", { "aria-live": "polite", class: "visually-hidden", "data-testid": "input-counter-aria", id: dev_utils.createRelatedUniqueId(id, 'counter'), ref: counter.ariaRef }))), showMsg && !hideMsg && index.h(FormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg })), showHint && index.h(KolFormFieldHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })), anotherChildren, typeof maxLength === 'number' && !counter && (index.h("span", { id: dev_utils.createRelatedUniqueId(id, 'character-limit-hint'), class: "visually-hidden" }, i18n.translate('kol-character-limit-hint', { placeholders: { limit: String(maxLength) } })))));
+};
+
+function getFormFieldProps(state, counterRefs) {
+    const props = {
+        id: state._id,
+        disabled: state._disabled,
+        msg: state._msg,
+        hint: state._hint,
+        label: state._label,
+        hideLabel: state._hideLabel,
+        hideMsg: state._hideMsg,
+        touched: state._touched,
+        showBadge: ('_accessKey' in state && Boolean(state._accessKey)) || ('_shortKey' in state && Boolean(state._shortKey)),
+    };
+    if ('_required' in state) {
+        props.required = state._required;
+    }
+    if ('_readOnly' in state) {
+        props.readOnly = state._readOnly;
+    }
+    if ('_accessKey' in state) {
+        props.accessKey = state._accessKey;
+    }
+    if ('_shortKey' in state) {
+        props.shortKey = state._shortKey;
+    }
+    if ('_maxLength' in state) {
+        props.maxLength = state._maxLength;
+    }
+    if ('_hasCounter' in state && state._hasCounter === true) {
+        props.counter = Object.assign({ maxLength: '_maxLength' in state ? state._maxLength : undefined, maxLengthBehavior: ('_maxLengthBehavior' in state ? state._maxLengthBehavior : undefined) || 'hard' }, counterRefs);
+    }
+    if ('_variant' in state) {
+        props.variant = state._variant;
+    }
+    return props;
+}
+const FormFieldStateWrapper = (_a, children) => {
+    var { state, counterRefs } = _a, other = tslib_es6.__rest(_a, ["state", "counterRefs"]);
+    const { ariaDescribedBy: ariaDescribedByArray } = getRenderStates(state);
+    const isRadioVariant = other.component === 'fieldset' || ('_options' in state && '_orientation' in state);
+    const ariaDescribedBy = isRadioVariant && ariaDescribedByArray.length > 0 ? ariaDescribedByArray.join(' ') : undefined;
+    const baseProps = getFormFieldProps(state, counterRefs);
+    return (index.h(KolFormFieldFc, Object.assign({}, baseProps, other, { ariaDescribedBy: ariaDescribedBy }), children));
+};
+
+exports.FormFieldStateWrapper = FormFieldStateWrapper;
+exports.InputController = InputController;
+exports.KolFormFieldHintFc = KolFormFieldHintFc;
+exports.KolFormFieldLabelFc = KolFormFieldLabelFc;
+exports.getDefaultProps = getDefaultProps;
+exports.getMsgType = getMsgType;
+exports.getRenderStates = getRenderStates;
+exports.isMsgDefinedAndInputTouched = isMsgDefinedAndInputTouched;
+//# sourceMappingURL=FormFieldStateWrapper-DfhtHQ0q.js.map
+
+//# sourceMappingURL=FormFieldStateWrapper-DfhtHQ0q.js.map