pds-dev-kit-web-test 2.4.14 → 2.4.15

package/dist/src/hybrid/components/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
+var Divider_1 = require("./Divider");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
+var ImageView_1 = require("./ImageView");
+Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return ImageView_1.ImageView; } });
+var LinearProgress_1 = require("./LinearProgress");
+Object.defineProperty(exports, "LinearProgress", { enumerable: true, get: function () { return LinearProgress_1.LinearProgress; } });
+var LottieIcon_1 = require("./LottieIcon");
+Object.defineProperty(exports, "LottieIcon", { enumerable: true, get: function () { return LottieIcon_1.LottieIcon; } });
+var Spacing_1 = require("./Spacing");
+Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return Spacing_1.Spacing; } });
+var Switch_1 = require("./Switch");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });

package/dist/src/hybrid/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
+// component
+var components_1 = require("./components");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return components_1.Divider; } });
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return components_1.Icon; } });
+Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return components_1.ImageView; } });
+Object.defineProperty(exports, "LinearProgress", { enumerable: true, get: function () { return components_1.LinearProgress; } });
+Object.defineProperty(exports, "LottieIcon", { enumerable: true, get: function () { return components_1.LottieIcon; } });
+Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return components_1.Spacing; } });
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return components_1.Switch; } });

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -0,0 +1,468 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable better-styled-components/sort-declarations-alphabetically */
+/* eslint-disable react/jsx-no-bind */
+var react_1 = require("react");
+var react_hook_form_1 = require("react-hook-form");
+var components_1 = require("../../../../desktop/components");
+var components_2 = require("../../../../hybrid/components");
+var styled_components_1 = __importStar(require("styled-components"));
+var common_1 = require("../../../../common");
+var IconButton_1 = require("../../../components/IconButton");
+var constants_1 = require("./constants");
+function TextFieldBase(_a) {
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, textPadding = _a.textPadding, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget"]);
+    var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, setValue = _w.setValue, getValues = _w.getValues, clearErrors = _w.clearErrors;
+    var timeout;
+    var suffixTextRef = (0, react_1.useRef)(null);
+    var _x = (0, react_1.useState)(0), suffixTextWidth = _x[0], setSuffixTextWidth = _x[1];
+    // NOTE suffixText가 변할때마다 suffixText가 차지하는 너비를 알아내어 suffixTextWidth에 담는다.
+    (0, react_1.useEffect)(function () {
+        var calculateDivWidth = function () {
+            if (suffixTextRef.current) {
+                var width = suffixTextRef.current.offsetWidth;
+                setSuffixTextWidth(width);
+            }
+        };
+        calculateDivWidth();
+    }, [suffixText]);
+    (0, react_1.useEffect)(function () {
+        return function () { return clearTimeout(timeout); };
+    }, []);
+    function handleFocus(e) {
+        if (onFocus) {
+            onFocus(e);
+        }
+        clearErrors(name);
+    }
+    function handleKeyDown(e) {
+        if (textLineType === 'single' && enterSubmitMode === 'none' && e.key === 'Enter') {
+            e.preventDefault();
+        }
+        if (inputType === 'number') {
+            preventEKeyword(e);
+        }
+        if (onKeyDown) {
+            onKeyDown(e);
+        }
+    }
+    function handleKeyUp(e) {
+        if (onKeyUp) {
+            onKeyUp(e);
+        }
+        if (inputType === 'number' && maxLength) {
+            checkMaxLength(e);
+        }
+    }
+    function handleChange(e) {
+        // NOTE: preventBlankMode는 input에만 적용 가능
+        // NOTE: preventBlankMode === 'all'일 경우에는 무조건 onChange 시점에 적용
+        if (textLineType === 'single' && preventBlankMode === 'all') {
+            var value = e.target.value;
+            if (value != null) {
+                e.target.value = value.replace(/ /g, '');
+            }
+        }
+        if (onChange) {
+            onChange(e);
+        }
+    }
+    function handleBlur(e) {
+        // NOTE: preventBlankMode는 input에만 적용 가능
+        // NOTE: preventBlankMode === 'trim'일 경우에는 무조건 onBlur 시점에 적용
+        if (textLineType === 'single' && preventBlankMode === 'trim') {
+            if (e.target.value != null) {
+                setValue(name, e.target.value.replace(/^\s+|\s+$/gm, ''));
+            }
+        }
+        if (onBlur && onTarget) {
+            var relatedTarget = e.relatedTarget;
+            if (relatedTarget) {
+                onTarget();
+                onBlur(e);
+                return;
+            }
+            onBlur(e);
+        }
+    }
+    var textAreaRef = (0, react_1.useRef)(null);
+    var _y = register(name, validation), ref = _y.ref, refRest = __rest(_y, ["ref"]);
+    (0, react_1.useEffect)(function () {
+        if (textAreaRef === null || textAreaRef.current === null) {
+            return;
+        }
+        if (autoMinRows === 1) {
+            textAreaRef.current.style.height = '0';
+            textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
+            return;
+        }
+        textAreaRef.current.style.height = "".concat(fieldHeight - 2, "px");
+        textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
+    }, []);
+    /**
+     * 텍스트 필드 내부 value에 맞게 초기 height 값을 부여한다.
+     *
+     * @param getValues(fieldName)
+     * @when 텍스트 필드에 value가 있을 때
+     */
+    (0, react_1.useEffect)(function () {
+        if (!textAreaRef || !textAreaRef.current) {
+            return;
+        }
+        if (getValues(name)) {
+            textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
+        }
+    }, [getValues(name)]);
+    var handleResizeHeight = (0, react_1.useCallback)(function () {
+        if (ref === null || textAreaRef.current === null) {
+            return;
+        }
+        if (autoMinRows === 1) {
+            textAreaRef.current.style.height = '0';
+            textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
+            return;
+        }
+        textAreaRef.current.style.height = "".concat(fieldHeight - 2, "px");
+        textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight, "px");
+    }, []);
+    function deleteValue() {
+        setValue(name, '', { shouldDirty: true });
+    }
+    // NOTE: input의 type이 number일때, e나 E의 경우 숫자로 취급되어 입력이 가능하지만, publ의 기획상 막아야하기 때문에 생성한 함수
+    var preventEKeyword = function (e) {
+        if (e.key === 'e' || e.key === 'E') {
+            e.preventDefault();
+        }
+    };
+    // NOTE: input의 type이 number일때, maxLength를 사용할 수 없으나 기획상 필요해서 생성한 함수
+    function checkMaxLength(e) {
+        if (e.target.value.length >= maxLength) {
+            e.target.value = e.target.value.substring(0, maxLength);
+            timeout = setTimeout(function () {
+                return setValue(name, e.target.value, {
+                    shouldValidate: true
+                });
+            }, 800);
+        }
+    }
+    var S_TextFieldBase = function () {
+        if (textLineType === 'single') {
+            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: ref })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
+        }
+        if (textLineType === 'multi') {
+            return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: ref })));
+        }
+        if (textLineType === 'auto') {
+            return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
+                    ref(e);
+                    textAreaRef.current = e;
+                }, onInput: handleResizeHeight })));
+        }
+    };
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: S_TextFieldBase() });
+}
+var stepper_and_delete_style = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n"], ["\n  position: absolute;\n  right: ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize, stepperRightSpacing = _a.stepperRightSpacing;
+    return innerSpinButtonSize && stepperRightSpacing && "".concat(innerSpinButtonSize + stepperRightSpacing, "px");
+});
+var S_IconButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  ", "\n"], ["\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var deleteIconMode = _a.deleteIconMode, stepperMode = _a.stepperMode, suffixText = _a.suffixText;
+    return deleteIconMode === 'use' && stepperMode === 'use' && !suffixText && stepper_and_delete_style;
+}, function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize, deleteIconMode = _a.deleteIconMode, stepperMode = _a.stepperMode, suffixText = _a.suffixText, isFocused = _a.isFocused, suffixTextWidth = _a.suffixTextWidth, stepperRightSpacing = _a.stepperRightSpacing;
+    if (deleteIconMode === 'use' && stepperMode === 'use' && suffixText && stepperRightSpacing) {
+        if (isFocused) {
+            if (innerSpinButtonSize) {
+                if (innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE > suffixTextWidth) {
+                    return "margin-right: ".concat(innerSpinButtonSize - suffixTextWidth + stepperRightSpacing, "px;");
+                }
+                return;
+            }
+            return;
+        }
+        return;
+    }
+    return;
+});
+var S_RightBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: ", ";\n  height: 100%;\n  display: flex;\n  align-items: center;\n  right: 0;\n"], ["\n  position: ", ";\n  height: 100%;\n  display: flex;\n  align-items: center;\n  right: 0;\n"])), function (_a) {
+    var deleteIconMode = _a.deleteIconMode, stepperMode = _a.stepperMode, suffixText = _a.suffixText;
+    if ((deleteIconMode === 'use' && stepperMode === 'use' && suffixText) ||
+        (deleteIconMode === 'use' && stepperMode === 'use') ||
+        stepperMode === 'use') {
+        return 'absolute';
+    }
+    return 'relative';
+});
+var S_IconBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  justify-content: center;\n  position: absolute;\n  right: ", ";\n  width: ", ";\n  visibility: hidden;\n\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  justify-content: center;\n  position: absolute;\n  right: ", ";\n  width: ", ";\n  visibility: hidden;\n\n  ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && "".concat(innerSpinButtonSize * 2, "px");
+}, function (_a) {
+    var stepperRightSpacing = _a.stepperRightSpacing;
+    return stepperRightSpacing && "".concat(stepperRightSpacing, "px");
+}, function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
+}, function (_a) {
+    var isFocused = _a.isFocused;
+    return isFocused && 'visibility: visible;';
+});
+var S_SuffixTextBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_InputWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
+var read_only = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme &&
+        {
+            none: theme.ui_cpnt_textfield_text_disabled,
+            dark: theme.ui_cpnt_textfield_text_darktheme_disabled,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_readonly
+        }[colorTheme];
+});
+var disabled = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n  pointer-events: none;\n"], ["\n  color: ", ";\n  pointer-events: none;\n"])), function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme &&
+        {
+            none: theme.ui_cpnt_textfield_text_disabled,
+            dark: theme.ui_cpnt_textfield_text_darktheme_disabled,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_disabled
+        }[colorTheme];
+});
+var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n  ", "\n\n  ", "\n"], ["\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n  ", "\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme &&
+        {
+            none: theme.ui_cpnt_textfield_text_typed,
+            dark: theme.ui_cpnt_textfield_text_darktheme_enabled,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_enabled
+        }[colorTheme];
+}, function (_a) {
+    var textSize = _a.textSize;
+    return common_1.desktopFontSize[textSize];
+}, function (_a) {
+    var textWeight = _a.textWeight;
+    return common_1.fontWeight[textWeight];
+}, function (_a) {
+    var textSize = _a.textSize;
+    return common_1.desktopLineHeight[textSize];
+}, function (_a) {
+    var textAlign = _a.textAlign;
+    return textAlign;
+}, function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme &&
+        {
+            none: theme.ui_cpnt_textfield_text_hint,
+            dark: theme.ui_cpnt_textfield_text_darktheme_hint,
+            transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_hint
+        }[colorTheme];
+}, function (_a) {
+    var textSize = _a.textSize;
+    return common_1.desktopFontSize[textSize];
+}, function (_a) {
+    var textWeight = _a.textWeight;
+    return common_1.fontWeight[textWeight];
+}, function (_a) {
+    var textSize = _a.textSize;
+    return common_1.desktopLineHeight[textSize];
+}, function (_a) {
+    var state = _a.state;
+    return state &&
+        {
+            normal: '',
+            read_only: read_only,
+            disabled: disabled
+        }[state];
+}, function (_a) {
+    var fieldPaddingRight = _a.fieldPaddingRight;
+    return fieldPaddingRight && "padding-right: ".concat(fieldPaddingRight, "px;");
+}, function (_a) {
+    var fieldPaddingLeft = _a.fieldPaddingLeft;
+    return fieldPaddingLeft && "padding-left: ".concat(fieldPaddingLeft, "px;");
+}, function (_a) {
+    var deleteIconMode = _a.deleteIconMode, stepperMode = _a.stepperMode, suffixText = _a.suffixText;
+    if (deleteIconMode === 'use' && stepperMode === 'use' && suffixText) {
+        return delete_stepper_suffix;
+    }
+    if (deleteIconMode === 'use' && stepperMode === 'use' && !suffixText) {
+        return delete_stepper;
+    }
+    if (deleteIconMode === 'none' && stepperMode === 'use' && suffixText) {
+        return stepper_suffix;
+    }
+    if (deleteIconMode === 'none' && stepperMode === 'use' && !suffixText) {
+        return stepper;
+    }
+    return;
+});
+var delete_stepper_suffix = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize, fieldPaddingRight = _a.fieldPaddingRight, isFocused = _a.isFocused, suffixTextWidth = _a.suffixTextWidth, stepperRightSpacing = _a.stepperRightSpacing;
+    if (innerSpinButtonSize && stepperRightSpacing) {
+        if (isFocused) {
+            if (innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE + stepperRightSpacing <
+                constants_1.DELETE_BUTTON_BASE_SIZE + suffixTextWidth) {
+                if (fieldPaddingRight) {
+                    return "".concat(constants_1.DELETE_BUTTON_BASE_SIZE + suffixTextWidth + fieldPaddingRight, "px");
+                }
+                return "".concat(constants_1.DELETE_BUTTON_BASE_SIZE + suffixTextWidth, "px");
+            }
+            if (fieldPaddingRight) {
+                return "".concat(constants_1.DELETE_BUTTON_BASE_SIZE + innerSpinButtonSize + fieldPaddingRight + stepperRightSpacing, "px");
+            }
+            return "".concat(constants_1.DELETE_BUTTON_BASE_SIZE + innerSpinButtonSize + stepperRightSpacing, "px");
+        }
+        if (fieldPaddingRight) {
+            return "".concat(suffixTextWidth + fieldPaddingRight, "px");
+        }
+        return "".concat(suffixTextWidth, "px");
+    }
+    return;
+});
+var delete_stepper = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize, fieldPaddingRight = _a.fieldPaddingRight, isFocused = _a.isFocused, stepperRightSpacing = _a.stepperRightSpacing;
+    if (innerSpinButtonSize && stepperRightSpacing) {
+        if (isFocused) {
+            if (fieldPaddingRight) {
+                return "".concat(innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE + fieldPaddingRight + stepperRightSpacing, "px");
+            }
+            return "".concat(innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE + stepperRightSpacing, "px");
+        }
+        if (fieldPaddingRight) {
+            return "".concat(fieldPaddingRight, "px");
+        }
+        return;
+    }
+    return;
+});
+var stepper_suffix = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize, fieldPaddingRight = _a.fieldPaddingRight, isFocused = _a.isFocused, suffixTextWidth = _a.suffixTextWidth, stepperRightSpacing = _a.stepperRightSpacing;
+    if (innerSpinButtonSize && stepperRightSpacing) {
+        if (isFocused) {
+            if (innerSpinButtonSize + stepperRightSpacing < suffixTextWidth) {
+                if (fieldPaddingRight) {
+                    return "".concat(suffixTextWidth + fieldPaddingRight, "px");
+                }
+                return "".concat(suffixTextWidth, "px");
+            }
+            if (fieldPaddingRight) {
+                return "".concat(innerSpinButtonSize + stepperRightSpacing + fieldPaddingRight, "px");
+            }
+            return "".concat(innerSpinButtonSize + stepperRightSpacing, "px");
+        }
+        if (fieldPaddingRight) {
+            return "".concat(suffixTextWidth + fieldPaddingRight, "px");
+        }
+        return "".concat(suffixTextWidth, "px");
+    }
+    return;
+});
+var stepper = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize, fieldPaddingRight = _a.fieldPaddingRight, isFocused = _a.isFocused, stepperRightSpacing = _a.stepperRightSpacing;
+    if (innerSpinButtonSize && stepperRightSpacing) {
+        if (isFocused) {
+            if (fieldPaddingRight) {
+                return "".concat(innerSpinButtonSize + stepperRightSpacing + fieldPaddingRight, "px");
+            }
+            return "".concat(innerSpinButtonSize + stepperRightSpacing, "px");
+        }
+        if (fieldPaddingRight) {
+            return "".concat(fieldPaddingRight, "px");
+        }
+        return;
+    }
+    return;
+});
+var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"], ["\n  -webkit-appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && "".concat(innerSpinButtonSize * 2, "px");
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
+}, function (_a) {
+    var stepperRightSpacing = _a.stepperRightSpacing;
+    return stepperRightSpacing && "".concat(stepperRightSpacing, "px");
+}, function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
+});
+var S_Input = styled_components_1.default.input(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-text-fill-color: ", " !important;\n    transition: background-color 9999s ease-in-out 0s !important;\n  }\n"], ["\n  ", "\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-text-fill-color: ", " !important;\n    transition: background-color 9999s ease-in-out 0s !important;\n  }\n"])), basicStyle, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.singleLine;
+}, function (_a) {
+    var stepperMode = _a.stepperMode, type = _a.type, isFocused = _a.isFocused;
+    return stepperMode === 'use' && type === 'number' && isFocused
+        ? inputInnerSpinButtonStyle
+        : '-webkit-appearance: none; margin: 0;';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_text_typed;
+});
+var S_Auto = styled_components_1.default.textarea(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
+    var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
+    return autoMaxRows &&
+        fieldHeight &&
+        "max-height: ".concat(Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
+            Number(common_1.desktopLineHeight[textSize]) *
+            autoMaxRows, "px;");
+}, function (_a) {
+    var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
+    return autoMinRows &&
+        fieldHeight &&
+        "min-height: ".concat(Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
+            Number(common_1.desktopLineHeight[textSize]) *
+            autoMinRows, "px;");
+});
+var S_Multi = styled_components_1.default.textarea(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"])), basicStyle);
+exports.default = TextFieldBase;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

package/dist/src/mobile/common/components/TextFieldBase/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DELETE_BUTTON_BASE_SIZE = exports.PIXEL_FOR_ICONS_CENTER = void 0;
+exports.PIXEL_FOR_ICONS_CENTER = 1;
+exports.DELETE_BUTTON_BASE_SIZE = 32;

package/dist/src/mobile/common/components/TextFieldBase/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldBase = void 0;
+var TextFieldBase_1 = require("./TextFieldBase");
+Object.defineProperty(exports, "TextFieldBase", { enumerable: true, get: function () { return __importDefault(TextFieldBase_1).default; } });

package/dist/src/mobile/common/components/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldBase = void 0;
+var TextFieldBase_1 = require("./TextFieldBase");
+Object.defineProperty(exports, "TextFieldBase", { enumerable: true, get: function () { return TextFieldBase_1.TextFieldBase; } });

package/dist/src/mobile/components/BasicButtonGroup/BasicButtonGroup.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { BasicButtonGroupValueOption } from '@common/types';
+import type { BasicButtonGroupValueOption } from '../../../common/types';
 export type BasicButtonGroupProps = {
     size?: 'large' | 'medium' | 'small';
     valueArray: BasicButtonGroupValueOption[];

package/dist/src/mobile/components/BasicButtonGroup/BasicButtonGroup.js

@@ -0,0 +1,84 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../hybrid/components");
+var styled_components_1 = __importStar(require("styled-components"));
+function BasicButtonGroup(_a) {
+    var _b = _a.size, size = _b === void 0 ? 'medium' : _b, valueArray = _a.valueArray, _c = _a.state, state = _c === void 0 ? 'normal' : _c;
+    var getColorKey = function (buttonState, iconColorTheme) {
+        if (state === 'disabled' || buttonState === 'disabled') {
+            return 'ui_cpnt_button_icon_disabled';
+        }
+        if (iconColorTheme === 'red') {
+            return 'ui_cpnt_button_icon_error';
+        }
+        return 'ui_cpnt_button_icon_enabled';
+    };
+    return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: valueArray.map(function (_a, index) {
+            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, _d = _a.iconColorTheme, iconColorTheme = _d === void 0 ? 'none' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }) }), iconName + index));
+        }) })));
+}
+var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  width: 48px;\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  width: 48px;\n"])));
+var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  width: 40px;\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  width: 40px;\n"])));
+var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: 32px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: 32px;\n"])));
+var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_basicbuttongroup_base_default;
+}, function (_a) {
+    var size = _a.size;
+    return size && { large: large, medium: medium, small: small }[size];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_on_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_on_base_pressed;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_basicbuttongroup_base_disabled;
+});
+exports.default = BasicButtonGroup;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/mobile/components/BasicButtonGroup/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasicButtonGroup = void 0;
+var BasicButtonGroup_1 = require("./BasicButtonGroup");
+Object.defineProperty(exports, "BasicButtonGroup", { enumerable: true, get: function () { return __importDefault(BasicButtonGroup_1).default; } });