@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
165 lines (157 loc) • 7.82 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h } from './index-BQlHOxik.js';
import { a as __rest } from './tslib.es6-QNbPBOk5.js';
import { I as IconFC } from './component-DzaT2WlJ.js';
import { b as KolButtonWcTag } from './component-names-Dy77vq43.js';
import { b as watchValidator } from './common-Cx_AGO_M.js';
import { g as getMsgType, i as isMsgDefinedAndInputTouched, I as InputController } from './FormFieldStateWrapper-BWTMRKXT.js';
import { c as clsx } from './clsx-COFh-Vc8.js';
import { i as isString } from './component-DvjvBJeK.js';
import { i as isObject } from './_Uint8Array-kJHDjtoP.js';
import { v as validateIcons } from './icons-oAzMYWgV.js';
const KolButtonFc = (props) => {
const { label, icons, hideLabel, disabled, onClick } = props, other = __rest(props, ["label", "icons", "hideLabel", "disabled", "onClick"]);
return h(KolButtonWcTag, Object.assign({ _label: label, _disabled: disabled, _icons: icons, _hideLabel: hideLabel, _on: { onClick } }, other));
};
const KolIconButtonFc = (props) => {
const { componentName = 'button', label, icon, onClick } = props, other = __rest(props, ["componentName", "label", "icon", "onClick"]);
const Component = componentName === 'button' ? KolButtonFc : IconFC;
return h(Component, Object.assign({ label: label || '', hideLabel: true, icons: `${icon}`, onClick: onClick }, other));
};
const InputAdornment = (_a, children) => {
var { position = 'start', class: className } = _a, other = __rest(_a, ["position", "class"]);
const rootClassName = `kol-input-container__adornment`;
const positionClassName = `${rootClassName}--${position}`;
return (h("div", Object.assign({ class: clsx(rootClassName, positionClassName, className) }, other), children));
};
function hasItems(items) {
if (!items) {
return false;
}
return Array.isArray(items) ? items.length > 0 : Boolean(items);
}
const Container = (_a, children) => {
var { class: className } = _a, other = __rest(_a, ["class"]);
return (h("div", Object.assign({ class: clsx('kol-input-container__container', className) }, other), children));
};
const KolInputContainerFc = (props, children) => {
const { class: classNames, startAdornment, endAdornment, disabled, msg, touched, containerProps, startAdornmentProps, endAdornmentProps } = props, other = __rest(props, ["class", "startAdornment", "endAdornment", "disabled", "msg", "touched", "containerProps", "startAdornmentProps", "endAdornmentProps"]);
const stateCssClasses = {
['kol-input-container--disabled']: disabled,
[`kol-input-container--${getMsgType(msg)}`]: isMsgDefinedAndInputTouched(msg, touched),
};
const baseProps = Object.assign({ class: clsx('kol-input-container', stateCssClasses, classNames) }, other);
if (!hasItems(startAdornment) && !hasItems(endAdornment)) {
return (h("div", Object.assign({}, baseProps), h(Container, Object.assign({}, containerProps), children)));
}
return (h("div", Object.assign({}, baseProps), h(InputAdornment, Object.assign({}, startAdornmentProps, { position: "start" }), startAdornment), h(Container, Object.assign({}, containerProps), children), h(InputAdornment, Object.assign({}, endAdornmentProps, { position: "end" }), endAdornment)));
};
function getInputContainerProps(state) {
let icons = undefined;
let smartButton;
if ('_icons' in state) {
icons = state._icons;
}
if ('_smartButton' in state) {
smartButton = state._smartButton;
}
return {
icons,
smartButton,
disabled: state._disabled,
msg: state._msg,
touched: state._touched,
};
}
const InputContainerStateWrapperFc = ({ state, startAdornment: defaultStartAdornment, endAdornment: defaultEndAdornment }, children) => {
var _a, _b;
const { icons, smartButton, disabled, msg, touched } = getInputContainerProps(state);
let leftIconProps = icons === null || icons === void 0 ? void 0 : icons.left;
if (isString(leftIconProps)) {
leftIconProps = { icon: leftIconProps };
}
let rightIconProps = icons === null || icons === void 0 ? void 0 : icons.right;
if (isString(rightIconProps)) {
rightIconProps = { icon: rightIconProps };
}
const startAdornment = [];
const endAdornment = [];
if (defaultStartAdornment) {
if (Array.isArray(defaultStartAdornment)) {
startAdornment.push(...defaultStartAdornment);
}
else {
startAdornment.push(defaultStartAdornment);
}
}
if (leftIconProps) {
if (isObject(leftIconProps)) {
startAdornment.push(h(IconFC, { class: "kol-input-container__icon", icons: leftIconProps.icon, label: (_a = leftIconProps.label) !== null && _a !== void 0 ? _a : '', style: leftIconProps.style }));
}
else {
startAdornment.push(h(IconFC, { class: "kol-input-container__icon", icons: leftIconProps, label: "" }));
}
}
if (isObject(smartButton)) {
endAdornment.push(h(KolIconButtonFc, Object.assign({ componentName: "button", class: "kol-input-container__smart-button" }, smartButton, { hideLabel: true, disabled: disabled })));
}
if (rightIconProps) {
if (isObject(rightIconProps)) {
endAdornment.push(h(IconFC, { class: "kol-input-container__icon", icons: rightIconProps.icon, label: (_b = rightIconProps.label) !== null && _b !== void 0 ? _b : '', style: rightIconProps.style }));
}
else {
endAdornment.push(h(IconFC, { class: "kol-input-container__icon", icons: rightIconProps, label: "" }));
}
}
if (defaultEndAdornment) {
if (Array.isArray(defaultEndAdornment)) {
endAdornment.push(...defaultEndAdornment);
}
else {
endAdornment.push(defaultEndAdornment);
}
}
return (h(KolInputContainerFc, { disabled: disabled, msg: msg, touched: touched, startAdornment: startAdornment, endAdornment: endAdornment }, children));
};
class InputIconController extends InputController {
constructor(component, name, host) {
super(component, name, host);
this.numberStringRegex = /^\d+(\.\d+)?$/;
this.parseToNumber = (value) => {
if (typeof value === 'number') {
return isNaN(value) ? null : value;
}
if (this.isNumberString(value)) {
return parseFloat(value);
}
return null;
};
this.validateNumber = (propName, value) => {
return watchValidator(this.component, propName, (value) => value === undefined || value === null || typeof value === 'number' || (typeof value === 'string' && this.numberStringRegex.test(value)), new Set(['number', 'NumberString']), value, {
hooks: {
beforePatch: (value, nextState) => {
if (nextState === null || nextState === void 0 ? void 0 : nextState.has(propName)) {
nextState === null || nextState === void 0 ? void 0 : nextState.set(propName, this.parseToNumber(value));
}
},
},
});
};
this.component = component;
}
validateIcons(value) {
validateIcons(this.component, value);
}
isNumberString(value) {
return typeof value === 'string' && this.numberStringRegex.test(value);
}
componentWillLoad() {
super.componentWillLoad();
this.validateIcons(this.component._icons);
}
}
export { InputIconController as I, KolIconButtonFc as K, InputContainerStateWrapperFc as a };
//# sourceMappingURL=controller-icon-DekcIBGR.js.map
//# sourceMappingURL=controller-icon-DekcIBGR.js.map