@geneui/components 2.11.1

package/ExtendedInput.js

@@ -0,0 +1,578 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { c as classnames } from './index-6ff23041.js';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { i as inputConfig, s as screenTypes } from './configs-91c86664.js';
+import { n as noop, s as stopEvent } from './index-ac59cb10.js';
+import { u as useDeviceType } from './useDeviceType-dd51db38.js';
+import { S as SuggestionList } from './index-5cea9a7d.js';
+import Icon from './Icon.js';
+import Tooltip from './Tooltip.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './useWindowSize-80369d76.js';
+import './useKeyDown-38102ae7.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .input-holder{--input-message-padding-side:2rem;--input-element-padding-side:0.5rem;--input-element-height:3.6rem;--textarea-height:21.5rem;--number-actions-holder-padding:0 0.5rem;--swap-label-color:inherit;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-width:100%;position:relative;transition:opacity .3s;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.11.0\"] .input-holder.disabled{opacity:.5}[data-gene-ui-version=\"2.11.0\"] .input-holder.read-only{cursor:inherit;-webkit-user-select:text;user-select:text}[data-gene-ui-version=\"2.11.0\"] .input-holder:not(.f-content-size){width:100%}[data-gene-ui-version=\"2.11.0\"] .input-holder.s-big{--input-element-height:4.2rem;--textarea-height:52rem}[data-gene-ui-version=\"2.11.0\"] .input-holder.s-small{--input-element-height:3.2rem;--textarea-height:14.8rem}[data-gene-ui-version=\"2.11.0\"] .input-holder.id-start .validation-icon{margin-inline-end:-.5rem}[data-gene-ui-version=\"2.11.0\"] .input-holder.id-end{--direction:row-reverse}[data-gene-ui-version=\"2.11.0\"] .input-holder.id-end .validation-icon{margin-inline-start:-.5rem}[data-gene-ui-version=\"2.11.0\"] .input-holder.cr-smooth-radius{--input-element-border-radius:0.4rem;--textarea-border-radius:0.4rem}[data-gene-ui-version=\"2.11.0\"] .input-holder .end-add-on{align-items:center;border-radius:0 var(--input-element-border-radius,4.2rem) var(--input-element-border-radius,4.2rem) 0;display:flex;font:600 1.4rem/1.5 var(--font-family);height:var(--input-element-height);justify-content:center;margin:1px 0;margin-inline-end:calc(var(--input-structure-padding, 1.5rem)*-1 + 1px);margin-inline-start:var(--input-structure-padding,1.5rem);padding:0 var(--input-structure-padding,1.5rem);transition:background .3s,border-color .3s,opacity .3s}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-outline{--input-element-border-color:rgba(var(--background-sc-rgb),0.2)}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-outline:not(.t-textarea) .end-add-on{background:rgba(var(--background-sc-rgb),.03);border-inline-start:1px solid var(--input-element-border-color,#0000);height:calc(var(--input-element-height) - .2rem)}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-outline.read-only{--input-element-border-color:rgba(var(--background-sc-rgb),0.05)}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-outline.filled:not(:focus-within){--input-element-border-color:rgba(var(--background-sc-rgb),0.3)}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-outline:not(.read-only):focus-within{--input-element-border-color:var(--hero);--swap-label-color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-minimal{--input-element-background:rgba(var(--background-sc-rgb),0.02)}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-minimal.read-only{--input-element-background:rgba(var(--background-sc-rgb),0.01)}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-minimal.filled:not(:focus-within),[data-gene-ui-version=\"2.11.0\"] .input-holder.a-minimal:not(.read-only):focus-within{--input-element-background:rgba(var(--background-sc-rgb),0.03)}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-minimal.s-small{--input-message-padding-side:0.7rem;--input-element-background:rgba(var(--background-sc-rgb),0.03);--input-element-padding-side:0.3rem;--number-actions-holder-padding:0;--input-structure-padding:0.4rem}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-minimal.s-small.read-only{--input-element-background:rgba(var(--background-sc-rgb),0.01)}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-minimal.s-small.filled:not(:focus-within){--input-element-background:rgba(var(--background-sc-rgb),0.03)}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-minimal.s-small:not(.read-only):focus-within{--input-element-background:#0000;--input-element-border-color:var(--hero);--swap-label-color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-light:not(.read-only):focus-within{--input-element-background:rgba(var(--background-sc-rgb),0.05)}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .input-holder.a-light:hover{--input-element-background:rgba(var(--background-sc-rgb),0.05)}}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-light.popover-opened{--input-element-background:rgba(var(--background-sc-rgb),0.05)}[data-gene-ui-version=\"2.11.0\"] .input-holder.error-color,[data-gene-ui-version=\"2.11.0\"] .input-holder.success-color{--input-element-background:#0000!important}[data-gene-ui-version=\"2.11.0\"] .input-holder.error-color{--input-element-border-color:var(--danger)!important}[data-gene-ui-version=\"2.11.0\"] .input-holder.error-color:not(.read-only):focus-within{--swap-label-color:var(--danger)!important}[data-gene-ui-version=\"2.11.0\"] .input-holder.success-color{--input-element-border-color:var(--confirm)!important}[data-gene-ui-version=\"2.11.0\"] .input-holder.success-color:not(.read-only):focus-within{--swap-label-color:var(--confirm)!important}[data-gene-ui-version=\"2.11.0\"] .input-holder.t-textarea .end-add-on{align-self:flex-end}[data-gene-ui-version=\"2.11.0\"] .input-structure{align-items:center;display:flex;flex-direction:var(--direction,row);padding:0 var(--input-structure-padding,1.5rem);position:relative;width:100%}[data-gene-ui-version=\"2.11.0\"] .input-structure>*{flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .input-structure>:not(label){position:relative;z-index:1}[data-gene-ui-version=\"2.11.0\"] .input-holder.a-minimal.s-small .input-structure>:not(label){margin:0 .3rem}[data-gene-ui-version=\"2.11.0\"] .input-structure>:not(label).bc-icon-clear{border-radius:100%;transition:background .4s,color .4s}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .input-structure>:not(label).bc-icon-clear:hover{background:rgba(var(--background-sc-rgb),.03);color:var(--hero)}}[data-gene-ui-version=\"2.11.0\"] .input-structure>label{cursor:inherit;display:block;flex:auto;overflow:hidden}[data-gene-ui-version=\"2.11.0\"] .input-structure .icon{align-items:center;display:flex;justify-content:center;transition:color .3s,background .3s;z-index:10}[data-gene-ui-version=\"2.11.0\"] .input-structure .icon-holder{order:-1;z-index:2}[data-gene-ui-version=\"2.11.0\"] .input-structure .icon-holder-disabled{pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .input-element-back{background:var(--input-element-background,var(--background));border:1px solid var(--input-element-border-color,#0000);border-radius:var(--input-element-border-radius,4.2rem);bottom:0;height:100%;left:0;position:absolute;right:0;top:0;transition:background .3s,border-color .3s,opacity .3s;width:100%}[data-gene-ui-version=\"2.11.0\"] .t-textarea .input-element-back{border-radius:var(--textarea-border-radius,1rem)}[data-gene-ui-version=\"2.11.0\"] .read-only .input-element-back:empty{opacity:0}[data-gene-ui-version=\"2.11.0\"] .fit-content-hack{height:0;opacity:0;overflow:hidden;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .input-element-relative{position:relative;width:100%;z-index:1}[data-gene-ui-version=\"2.11.0\"] .input-element{color:rgba(var(--background-sc-rgb),.75);font:600 1.4rem var(--font-family);height:var(--input-element-height);overflow:hidden;padding:0 var(--input-element-padding-side);position:relative;resize:none;text-overflow:ellipsis;transition:opacity .15s;white-space:nowrap;width:100%}[data-gene-ui-version=\"2.11.0\"] .input-element:-webkit-autofill{-webkit-text-fill-color:var(--background-sc);-webkit-background-clip:text;background-clip:text}[data-gene-ui-version=\"2.11.0\"] .input-element:-webkit-autofill::selection{-webkit-text-fill-color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .input-element.hide{opacity:0}[data-gene-ui-version=\"2.11.0\"] .input-element::input-placeholder{color:rgba(var(--background-sc-rgb),.375);font-size:1.4rem;font-weight:600;transition:color .15s}[data-gene-ui-version=\"2.11.0\"] .input-element:placeholder{color:rgba(var(--background-sc-rgb),.375);font-size:1.4rem;font-weight:600;transition:color .15s}[data-gene-ui-version=\"2.11.0\"] .input-element::placeholder{color:rgba(var(--background-sc-rgb),.375);font-size:1.4rem;font-weight:600;transition:color .15s}[data-gene-ui-version=\"2.11.0\"] .input-element:input-placeholder{color:rgba(var(--background-sc-rgb),.375);font-size:1.4rem;font-weight:600;transition:color .15s}[data-gene-ui-version=\"2.11.0\"] .input-element.read-only:not(.textarea-element){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.11.0\"] .textarea-element,[data-gene-ui-version=\"2.11.0\"] textarea.input-element{border:1px solid #0000;cursor:auto;height:var(--textarea-height);overflow:auto;padding:1rem var(--input-element-padding-side);padding-right:70px!important;text-overflow:unset;white-space:normal}[data-gene-ui-version=\"2.11.0\"] .textarea-element.read-only,[data-gene-ui-version=\"2.11.0\"] textarea.input-element.read-only{height:auto}[data-gene-ui-version=\"2.11.0\"] .textarea-element::-webkit-scrollbar,[data-gene-ui-version=\"2.11.0\"] textarea.input-element::-webkit-scrollbar{height:1.6rem;width:1.6rem}[data-gene-ui-version=\"2.11.0\"] .textarea-element::-webkit-scrollbar-thumb,[data-gene-ui-version=\"2.11.0\"] textarea.input-element::-webkit-scrollbar-thumb{background:rgba(var(--background-sc-rgb),.05);border:.4rem solid var(--background);border-radius:1.6rem}[data-gene-ui-version=\"2.11.0\"] div.input-element{align-items:center;display:flex;justify-content:flex-start}[data-gene-ui-version=\"2.11.0\"] div.input-element:not([readonly]).placeholder{color:rgba(var(--background-sc-rgb),.375)}[data-gene-ui-version=\"2.11.0\"] div.input-element:not([readonly]).placeholder:focus{color:rgba(var(--background-sc-rgb),0)}[data-gene-ui-version=\"2.11.0\"] .input-element[readonly]{cursor:inherit}[data-gene-ui-version=\"2.11.0\"] .input-element[readonly]::selection{background:#0000;color:inherit}[data-gene-ui-version=\"2.11.0\"] .input-element[type=date],[data-gene-ui-version=\"2.11.0\"] .input-element[type=datetime-local],[data-gene-ui-version=\"2.11.0\"] .input-element[type=time]{line-height:var(--input-element-height)}[data-gene-ui-version=\"2.11.0\"] .input-fake-placeholder{align-items:center;color:rgba(var(--background-sc-rgb),.375);display:flex;font:600 1.4rem/1.8rem var(--font-family);height:100%;left:0;padding:0 var(--input-element-padding-side);pointer-events:none;position:absolute;top:0;transition:opacity .15s;-webkit-user-select:none;user-select:none;width:100%}[data-gene-ui-version=\"2.11.0\"] .input-fake-placeholder.hide{opacity:0}[data-gene-ui-version=\"2.11.0\"] .input-swap-label{display:flex;font:600 1rem/1.8rem var(--font-family);left:0;max-width:100%;padding:0 var(--input-message-padding-side);position:absolute;top:-.9rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:5}[data-gene-ui-version=\"2.11.0\"] .input-swap-label .icon{font-size:1.8rem;transition:none}[data-gene-ui-version=\"2.11.0\"] .input-swap{max-width:100%;overflow:hidden}[data-gene-ui-version=\"2.11.0\"] .input-swap-animate{align-items:center;background:var(--background);box-shadow:inset 0 -.8rem 0 var(--input-element-background);color:var(--swap-label-color);display:flex;max-width:100%;padding:0 .4rem;transition:transform .3s,opacity .3s .1s,color .3s}[data-gene-ui-version=\"2.11.0\"] .input-swap-animate>*+*{margin-inline-start:.5rem}[data-gene-ui-version=\"2.11.0\"] .input-swap-animate.hide{opacity:0;transform:translateY(100%)}[data-gene-ui-version=\"2.11.0\"] .number-actions-holder{padding:var(--number-actions-holder-padding)}[data-gene-ui-version=\"2.11.0\"] .number-actions-holder>ul{background:var(--background);border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:.7rem;color:inherit;font-size:1rem;width:1.5rem}[data-gene-ui-version=\"2.11.0\"] .number-actions-holder>ul>li{cursor:pointer;transition:color .3s,background .3s,opacity .3s}[data-gene-ui-version=\"2.11.0\"] .number-actions-holder>ul>li:first-child{border-radius:.7rem .7rem 0 0}[data-gene-ui-version=\"2.11.0\"] .number-actions-holder>ul>li:last-child{border-radius:0 0 .7rem .7rem}[data-gene-ui-version=\"2.11.0\"] .number-actions-holder>ul>li.disabled{opacity:.5;pointer-events:none}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .number-actions-holder>ul>li:hover{background:rgba(var(--background-sc-rgb),.03);color:var(--hero)}}[data-gene-ui-version=\"2.11.0\"] .information-message{cursor:default;font:600 1.2rem/1.42 var(--font-family);margin:.6rem 0 0;padding:0 var(--input-message-padding-side);width:100%}[data-gene-ui-version=\"2.11.0\"] .information-message:empty{display:none}[data-gene-ui-version=\"2.11.0\"] .input-description{cursor:default;font:600 1.4rem/2rem var(--font-family);margin:1rem 0 0;max-width:100%;opacity:.7}[data-gene-ui-version=\"2.11.0\"] .input-structure~.input-description{padding:0 1rem}[data-gene-ui-version=\"2.11.0\"] .input-title{align-items:center;cursor:default;display:flex;font:600 1.4rem/2rem var(--font-family);margin:0 0 .4rem;max-width:100%;opacity:.5;padding:0 var(--input-message-padding-side)}[data-gene-ui-version=\"2.11.0\"] .input-title>*+*{margin-inline-start:.5rem}";
+styleInject(css_248z);
+
+function replaceBetween(start, end, initial, what) {
+  return initial.substring(0, start) + what + initial.substring(end);
+}
+function createCustomInputEvent(ref) {
+  let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  const event = new Event('input', {
+    bubbles: true
+  });
+  ref.value = String(value);
+  ref.dispatchEvent(event);
+  return event;
+}
+const ExtendedInput = /*#__PURE__*/forwardRef((props, ref) => {
+  var _textareaRef$current;
+  const {
+    max,
+    min,
+    icon,
+    type,
+    step,
+    value,
+    label,
+    onBlur,
+    onFocus,
+    onClear,
+    isValid,
+    onClick,
+    canClear,
+    disabled,
+    onChange,
+    required,
+    readOnly,
+    className,
+    errorText,
+    inputSize,
+    maxLength,
+    isDropdown,
+    appearance,
+    screenType,
+    placeholder,
+    flexibility,
+    description,
+    onIconClick,
+    withInfoIcon,
+    colorOnValid,
+    defaultValue,
+    cornerRadius,
+    showErrorIcon,
+    clickableIcon,
+    infoIconTitle,
+    writeProtected,
+    showNumberIcon,
+    itemsDirection,
+    showIconOnValid,
+    labelAppearance,
+    colorBorderOnError,
+    showRemainingLength,
+    showErrorWithTooltip,
+    showClickableTooltipOnError,
+    startAdornment,
+    tooltipText,
+    endAdornment,
+    suggestionData,
+    ...restProps
+  } = props;
+  const {
+    isMobile
+  } = useDeviceType(screenType);
+  const inputRef = useRef();
+  const textareaRef = useRef();
+  const iconRef = useRef();
+  const [localValue, setLocalValue] = useState(defaultValue);
+  const [focused, setFocused] = useState(false);
+  const [isBlurInitiatorIcon, setIsBlurInitiatorIcon] = useState(false);
+  const isControlled = 'value' in props && typeof value !== 'undefined';
+  // non strict equality is needed for covering 'undefined' case also
+  const inputValue = isControlled ? value != null ? value : '' : localValue;
+  useEffect(() => {
+    isControlled && value && value !== inputValue && setLocalValue(value);
+  }, [value, isControlled, inputValue]);
+  const hasError = !isValid;
+  const showTooltip = tooltipText && isValid || showErrorWithTooltip && hasError && errorText;
+  const handleChange = e => {
+    const {
+      value
+    } = e.target;
+    !isControlled && setLocalValue(value);
+    onChange(e);
+  };
+  const handleFocus = useCallback(e => {
+    setFocused(true);
+    onFocus(e);
+  }, [onFocus]);
+  const handleIconClick = useCallback(e => {
+    // We will remove this later, when get report who use this
+    if (clickableIcon) {
+      onClick(e);
+      onIconClick(e, isBlurInitiatorIcon);
+      if (isBlurInitiatorIcon) {
+        iconRef.current.blur();
+        setIsBlurInitiatorIcon(false);
+      }
+    }
+  }, [clickableIcon, onClick, onIconClick, isBlurInitiatorIcon]);
+  const handleBlur = useCallback(e => {
+    setFocused(false);
+    setIsBlurInitiatorIcon(iconRef.current === e.relatedTarget);
+    onBlur(e);
+  }, [onBlur]);
+  const handleDropdownIconClick = useCallback(e => {
+    if (isDropdown) {
+      onClick(e);
+      if (!readOnly) {
+        stopEvent(e, true);
+        focused ? inputRef.current.blur() : inputRef.current.focus();
+      }
+    }
+  }, [isDropdown, onClick, focused, inputRef.current]);
+  const handleStepUp = e => {
+    const number = Math.floor(inputValue) + step;
+    const nextValue = number < min ? min : number > max ? max : number;
+    const event = createCustomInputEvent(inputRef.current, nextValue);
+    handleChange(event);
+  };
+  const handleStepDown = e => {
+    const number = Math.ceil(inputValue) - step;
+    const nextValue = number < min ? min : number > max ? max : number;
+    const event = createCustomInputEvent(inputRef.current, nextValue);
+    handleChange(event);
+  };
+  const handleClear = () => {
+    const event = createCustomInputEvent(type === 'textarea' ? textareaRef.current : inputRef.current);
+    handleChange(event);
+    onClear(event);
+  };
+  const handleRef = val => {
+    if (ref) {
+      ref.current = val;
+    }
+    if (type !== 'textarea') {
+      inputRef.current = val;
+    } else {
+      textareaRef.current = val;
+    }
+  };
+  const fieldStep = type === 'number' ? {
+    step
+  } : {};
+  const numberedValue = Number(inputValue);
+  const inputLabel = label || placeholder;
+  const asterisk = required ? '*' : '';
+  const inputPlaceholder = !readOnly && placeholder ? "".concat(asterisk, " ").concat(placeholder) : '';
+  const hasFakePlaceholder = type === 'date' || type === 'time' || type === 'datetime-local';
+  const sharedProps = {
+    onClick,
+    required,
+    ref: handleRef,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onChange: handleChange,
+    disabled,
+    maxLength,
+    placeholder: inputPlaceholder,
+    readOnly: readOnly || writeProtected,
+    className: classnames('input-element', {
+      'read-only': readOnly,
+      placeholder: !inputValue,
+      'write-protected': writeProtected,
+      'textarea-element': type === 'textarea',
+      hide: !inputValue && hasFakePlaceholder
+    }),
+    ...restProps
+  };
+  const onChangeSuggestionData = useCallback(_ref => {
+    let {
+      from,
+      to,
+      data
+    } = _ref;
+    const {
+      value
+    } = data;
+    const input = textareaRef.current;
+    const lastValue = input.value;
+    input.value = replaceBetween(from, to, inputValue, value);
+    const event = new Event('input', {
+      bubbles: true
+    });
+    const tracker = input._valueTracker;
+    tracker && tracker.setValue(lastValue);
+    input.dispatchEvent(event);
+  }, [inputValue]);
+  const onAddPlaceholder = useCallback(_ref2 => {
+    let {
+      from,
+      to,
+      data
+    } = _ref2;
+    const {
+      value
+    } = data;
+    textareaRef.current.value = replaceBetween(from, to, inputValue, value);
+  }, [inputValue]);
+  const maxMinValidator = useCallback((num, type) => disabled || (num === null || num === void 0 ? void 0 : num.toString().length) && (Math.ceil(num) === 0 || Math.ceil(num)) && (type === 'max' ? numberedValue >= num : numberedValue <= num), [max, min, numberedValue]);
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    position: "bottom",
+    title: showTooltip ? errorText || tooltipText : ''
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('input-holder', "a-".concat(appearance), "s-".concat(inputSize), "id-".concat(itemsDirection), "f-".concat(flexibility), "cr-".concat(cornerRadius), "t-".concat(type), className, {
+      disabled,
+      'read-only': readOnly,
+      'error-color': hasError && colorBorderOnError,
+      'success-color': isValid && colorOnValid,
+      filled: inputValue
+    })
+  }, type === 'textarea' && !readOnly && !isDropdown && !isMobile && suggestionData && Array.isArray(suggestionData) && /*#__PURE__*/React__default.createElement(SuggestionList, {
+    elemRef: textareaRef,
+    onChange: onChangeSuggestionData,
+    onHover: onAddPlaceholder,
+    data: suggestionData
+  }), labelAppearance === inputConfig.labelAppearance[1] && /*#__PURE__*/React__default.createElement("div", {
+    className: "input-title ellipsis-text"
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    position: "auto",
+    title: "".concat(asterisk, " ").concat(inputLabel)
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "ellipsis-text"
+  }, asterisk, " ", inputLabel)), withInfoIcon && /*#__PURE__*/React__default.createElement(Tooltip, {
+    position: "auto",
+    title: infoIconTitle
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-info"
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "input-structure"
+  }, startAdornment, icon && /*#__PURE__*/React__default.createElement("span", {
+    ref: iconRef,
+    tabIndex: "0",
+    className: classnames('icon-holder', {
+      'icon-holder-disabled': disabled
+    })
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: icon,
+    onClick: handleIconClick,
+    onMouseDown: handleDropdownIconClick
+  })), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "input-element-relative"
+  }, readOnly || isDropdown && isMobile ? /*#__PURE__*/React__default.createElement("div", sharedProps, /*#__PURE__*/React__default.createElement("div", {
+    className: type === 'textarea' ? 'textarea-element-content' : 'ellipsis-text'
+  }, typeof inputValue === 'number' ? inputValue : inputValue || inputPlaceholder)) : type !== 'textarea' ? /*#__PURE__*/React__default.createElement("input", _extends({}, sharedProps, fieldStep, {
+    max: max,
+    min: min,
+    type: type,
+    size: flexibility === 'content-size' ? 1 : null,
+    value: inputValue
+  })) : /*#__PURE__*/React__default.createElement("textarea", _extends({}, sharedProps, {
+    value: (_textareaRef$current = textareaRef.current) !== null && _textareaRef$current !== void 0 && _textareaRef$current.isSuggestionListOpen ? textareaRef.current.value : inputValue
+  })), hasFakePlaceholder && /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('input-fake-placeholder', {
+      hide: inputValue
+    })
+  }, inputPlaceholder && /*#__PURE__*/React__default.createElement("div", {
+    className: "ellipsis-text"
+  }, inputPlaceholder))), flexibility === 'content-size' && /*#__PURE__*/React__default.createElement("div", {
+    className: "fit-content-hack"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "input-element"
+  }, asterisk, " ", placeholder.length > "".concat(inputValue).length ? placeholder : inputValue)), /*#__PURE__*/React__default.createElement("div", {
+    className: "input-element-back"
+  }, labelAppearance === inputConfig.labelAppearance[2] && /*#__PURE__*/React__default.createElement("div", {
+    className: "input-swap-label"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "input-swap"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('input-swap-animate ellipsis-text', {
+      hide: !inputValue && inputValue !== 0
+    })
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "ellipsis-text"
+  }, asterisk, " ", inputLabel), withInfoIcon && /*#__PURE__*/React__default.createElement(Tooltip, {
+    position: "auto",
+    title: infoIconTitle
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-info"
+  }))))))), canClear && !!inputValue && !readOnly && /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-clear",
+    disabled: disabled,
+    onClick: handleClear,
+    className: "cursor-pointer"
+  }), isDropdown && /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-arrow-down",
+    onMouseDown: handleDropdownIconClick
+  }), type === 'number' && showNumberIcon && !readOnly && /*#__PURE__*/React__default.createElement("div", {
+    className: "number-actions-holder"
+  }, /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", {
+    className: classnames('number-action', 'bc-icon-input-number-up', {
+      disabled: maxMinValidator(max, 'max')
+    }),
+    onClick: handleStepUp
+  }), /*#__PURE__*/React__default.createElement("li", {
+    className: classnames('number-action', 'bc-icon-input-number-down', {
+      disabled: maxMinValidator(min, 'min')
+    }),
+    onClick: handleStepDown
+  }))), hasError && showErrorIcon && /*#__PURE__*/React__default.createElement(Icon, {
+    className: "validation-icon pointer-events-none color-danger",
+    type: "bc-icon-error-info"
+  }), isValid && showIconOnValid && /*#__PURE__*/React__default.createElement(Icon, {
+    className: "validation-icon pointer-events-none color-confirm",
+    type: "bc-icon-validated"
+  }), showRemainingLength && !!maxLength && /*#__PURE__*/React__default.createElement("div", {
+    className: "end-add-on"
+  }, maxLength - "".concat(inputValue).length), endAdornment), !showErrorWithTooltip && hasError && errorText && /*#__PURE__*/React__default.createElement("div", {
+    className: "information-message color-danger"
+  }, errorText), description && /*#__PURE__*/React__default.createElement("div", {
+    className: "input-description"
+  }, description)));
+});
+ExtendedInput.propTypes = {
+  /**
+   * Additional className
+   */
+  className: propTypesExports.string,
+  /**
+   * Control ExtendedInput disabled state with this prop
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * Borders will be colored on when "isValid" and this props are set to "true"
+   */
+  colorBorderOnError: propTypesExports.bool,
+  /**
+   * Shows an icon to clear ExtendedInput's value when set to "true"
+   */
+  showClearIcon: propTypesExports.bool,
+  /**
+   * Use this props in combo with "icon" prop. This will fire on icon click when set to "true"
+   */
+  clickableIcon: propTypesExports.bool,
+  /**
+   * Shows an error icon when "isValid" is set to "false" and this prop is set to "true"
+   */
+  showErrorIcon: propTypesExports.bool,
+  /**
+   * Shows an "Icon" for number inputs, when "type" is set to "number" and this prop is et to "true"
+   */
+  showNumberIcon: propTypesExports.bool,
+  /**
+   *.
+   */
+  showClickableTooltipOnError: propTypesExports.bool,
+  /**
+   * ExtendedInput borders are colored when "isValid" and this props are set to "true"
+   */
+  colorOnValid: propTypesExports.bool,
+  /**
+   * ExtendedInput will display an icon when "isValid" and this props are set to "true"
+   */
+  showIconOnValid: propTypesExports.bool,
+  /**
+   * Shows the "errorText" value in "Tooltip" when set to "true"
+   */
+  showErrorWithTooltip: propTypesExports.bool,
+  /**
+   * Control ExtendedInput validation. For more info see "ValidatableNumberInput", "ValidatableTextInput"(integrated ExtendedInputs with "Form" organism).
+   */
+  isValid: propTypesExports.bool,
+  /**
+   * Use this prop to specify error message. This will be displayed when "isValid" is set to "false"
+   */
+  errorText: propTypesExports.string,
+  /**
+   * Use this prop to specify tooltip message.
+   */
+  tooltipText: propTypesExports.string,
+  /**
+   * Specify increment or decrement value, when arrow up or down are clicked
+   */
+  step: propTypesExports.number,
+  /**
+   * Valid values are same as "Icon" type
+   */
+  icon: propTypesExports.string,
+  /**
+   * ExtendedInput placeholder
+   */
+  placeholder: propTypesExports.string,
+  /**
+   * Control items direction
+   */
+  itemsDirection: propTypesExports.oneOf(inputConfig.itemsDirection),
+  /**
+   * Use this prop to control ExtendedInput state. Note that when you specify this prop, the ExtendedInput will not functionate itself
+   */
+  value: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  /**
+   * ExtendedInput type
+   */
+  type: propTypesExports.oneOf(inputConfig.type).isRequired,
+  /**
+   * ExtendedInput appearance
+   */
+  appearance: propTypesExports.oneOf(inputConfig.appearance),
+  /**
+   * ExtendedInput size
+   */
+  inputSize: propTypesExports.oneOf(inputConfig.size),
+  /**
+   * ExtendedInput corner radius
+   */
+  cornerRadius: propTypesExports.oneOf(inputConfig.cornerRadius),
+  /**
+   * Will make ExtendedInput readonly when set to "true"
+   */
+  readOnly: propTypesExports.bool,
+  /**
+   * How to display inscription in relation to it's parent in ExtendedInput
+   */
+  flexibility: propTypesExports.oneOf(inputConfig.flexibility),
+  /**
+   * This prop will only applied once as defaultState for "value" when ExtendedInput mounts.
+   * Note that specifying this prop is not mean controlling it.
+   */
+  defaultValue: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  /**
+   * Shows an "Icon" to remove ExtendedInput's value
+   */
+  canClear: propTypesExports.bool,
+  /**
+   * Fires an event on clear "Icon" click((element: Element) => void)
+   */
+  onClear: propTypesExports.func,
+  /**
+   * Fires an event on ExtendedInput change((event: Event) => void)
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Specify a label for ExtendedInput
+   */
+  label: propTypesExports.string,
+  /**
+   * Specify a "label" appearance
+   */
+  labelAppearance: propTypesExports.oneOf(inputConfig.labelAppearance),
+  /**
+   * Will add an additional description field
+   */
+  description: propTypesExports.node,
+  /**
+   * Property is needed for "Dropdown" organism usage
+   */
+  isDropdown: propTypesExports.bool,
+  /**
+   * Fires an event on ExtendInput <input /> click((event: Event => void))
+   */
+  onClick: propTypesExports.func,
+  /**
+   * Typing will be blocked when set to "true". Note design is different from "readonly" prop's design
+   */
+  writeProtected: propTypesExports.bool,
+  /**
+   * Input field maximum value
+   */
+  max: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  /**
+   * Input field minimum value
+   */
+  min: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  /**
+   * Callback fires when input is focused
+   */
+  onFocus: propTypesExports.func,
+  /**
+   * Callback fires when input loose focus
+   */
+  onBlur: propTypesExports.func,
+  /**
+   * Callback fires when clicked the icon </br>
+   * as a first parameter passed native event </br>
+   * as a second parameter passed is blur function </br>
+   * initiated by icon click
+   */
+  onIconClick: propTypesExports.func,
+  /**
+   * Define is input required or no.
+   */
+  required: propTypesExports.bool,
+  /**
+   * The switch between mobile and desktop version
+   */
+  screenType: propTypesExports.oneOf(screenTypes),
+  /**
+   * Define is  need input info icon required.
+   */
+  withInfoIcon: propTypesExports.bool,
+  /**
+   * ExtendedInput info icon title.
+   */
+  infoIconTitle: propTypesExports.string,
+  /**
+   * Max Length of input Value
+   */
+  maxLength: propTypesExports.number,
+  /**
+   * Show Remaining Length of input value, works only with maxLength
+   */
+  showRemainingLength: propTypesExports.bool,
+  /**
+   * Decoration that can be added to the inner input field at the start
+   */
+  startAdornment: propTypesExports.oneOfType([propTypesExports.element, propTypesExports.string, propTypesExports.number, propTypesExports.node]),
+  /**
+   * Decoration that can be added to the inner input field at the end
+   */
+  endAdornment: propTypesExports.oneOfType([propTypesExports.element, propTypesExports.string, propTypesExports.number, propTypesExports.node])
+};
+ExtendedInput.defaultProps = {
+  step: 1,
+  placeholder: '',
+  itemsDirection: inputConfig.itemsDirection[0],
+  type: inputConfig.type[0],
+  appearance: inputConfig.appearance[0],
+  inputSize: inputConfig.size[1],
+  cornerRadius: inputConfig.cornerRadius[0],
+  clickableIcon: false,
+  readOnly: false,
+  flexibility: inputConfig.flexibility[0],
+  colorBorderOnError: true,
+  showErrorIcon: false,
+  showNumberIcon: true,
+  showClickableTooltipOnError: true,
+  showErrorWithTooltip: false,
+  colorOnValid: false,
+  showIconOnValid: false,
+  canClear: false,
+  isValid: true,
+  onChange: noop,
+  onClick: noop,
+  onClear: noop,
+  onFocus: noop,
+  onBlur: noop,
+  onIconClick: noop,
+  withInfoIcon: false,
+  infoIconTitle: '',
+  label: '',
+  labelAppearance: inputConfig.labelAppearance[0],
+  description: '',
+  isDropdown: false,
+  writeProtected: false,
+  defaultValue: '',
+  screenType: screenTypes[0]
+};
+
+export { ExtendedInput as default };