@pisell/materials 1.0.83 → 1.0.85

package/lib/components/translation/index.js

@@ -0,0 +1,173 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/translation/index.tsx
+var translation_exports = {};
+__export(translation_exports, {
+  default: () => translation_default
+});
+module.exports = __toCommonJS(translation_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_icons = require("@ant-design/icons");
+var import_classnames = __toESM(require("classnames"));
+var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_utils2 = require("./utils");
+var import_index = require("./index.less");
+var defaultGlobal = {
+  shopLanguages: {
+    primary: "en",
+    list: [
+      {
+        id: 1,
+        code: "zh-CN",
+        text: "简体中文",
+        primary: 1,
+        status: "published"
+      },
+      {
+        id: 2,
+        code: "en",
+        text: "English",
+        primary: 0,
+        status: "published"
+      },
+      {
+        id: 3,
+        code: "zh-HK",
+        text: "繁體中文",
+        primary: 0,
+        status: "published"
+      }
+    ]
+  },
+  primary_locale: "en"
+};
+var defaultObj = {};
+var Translation = (props) => {
+  var _a, _b;
+  const { value = defaultObj, onChange, ...others } = props;
+  const context = (0, import_useEngineContext.default)();
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [_value, set_value] = (0, import_react.useState)(value);
+  const store = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.store;
+  const { shopLanguages } = ((_b = store == null ? void 0 : store.getState()) == null ? void 0 : _b.global) || defaultGlobal;
+  (0, import_react.useEffect)(() => {
+    let _newValue = { ...value };
+    if ((0, import_utils.isString)(value)) {
+      _newValue = (0, import_utils2.createTranslationText)(value);
+    }
+    set_value({ ...defaultValue, ..._newValue });
+  }, [value]);
+  const currentLocale = (0, import_react.useMemo)(() => {
+    return shopLanguages.primary;
+  }, [shopLanguages.primary]);
+  const inputValue = (0, import_react.useMemo)(() => {
+    if ((0, import_utils.isString)(value)) {
+      return value;
+    }
+    return value[currentLocale];
+  }, [value, currentLocale]);
+  const languageList = (0, import_react.useMemo)(() => {
+    return shopLanguages.list;
+  }, [shopLanguages.list]);
+  const defaultValue = (0, import_react.useMemo)(() => {
+    let obj = {};
+    for (let item in import_utils2.locales) {
+      obj[item] = "";
+    }
+    return obj;
+  }, []);
+  const allChange = (e) => {
+    let newValue = {
+      ...defaultValue,
+      ...value || {}
+    };
+    if ((0, import_utils2.checkIfAllValuesAreEqual)(newValue)) {
+      for (let key in newValue) {
+        newValue[key] = e || "";
+      }
+    } else {
+      newValue[currentLocale] = e || "";
+    }
+    onChange == null ? void 0 : onChange(newValue);
+  };
+  const isActive = (0, import_react.useMemo)(() => {
+    let bol = false;
+    for (let key in value) {
+      if (key !== currentLocale && value[key]) {
+        bol = true;
+      }
+    }
+    return bol;
+  }, [value, currentLocale]);
+  const _onOk = () => {
+    onChange == null ? void 0 : onChange(_value);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      ...others,
+      value: inputValue,
+      onChange: allChange,
+      suffix: /* @__PURE__ */ import_react.default.createElement(
+        import_icons.GlobalOutlined,
+        {
+          className: (0, import_classnames.default)("pisell-lowcode-translation-icon", {
+            active: isActive
+          }),
+          onClick: () => setOpen(true)
+        }
+      )
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Modal,
+    {
+      open,
+      onOk: _onOk,
+      onCancel: () => {
+        set_value(value || defaultValue);
+        setOpen(false);
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-translation-modal" }, languageList.map((d) => {
+      return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { label: d.text, labelCol: { span: 24 }, key: d.code }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Input,
+        {
+          value: _value[d.code],
+          onChange: (e) => {
+            set_value({ ..._value, [d.code]: e.target.value });
+          }
+        }
+      ));
+    }))
+  ));
+};
+var translation_default = Translation;

package/lib/components/translation/index.less

@@ -0,0 +1,15 @@
+.pisell-lowcode-translation-icon {
+  cursor: pointer;
+  color: #d9d9d9;
+  :hover {
+    color: var(--theme-color);
+  }
+  &.active {
+    color: var(--theme-color);
+  }
+}
+
+.pisell-lowcode-translation-modal {
+  position: relative;
+  width: 100%;
+}

package/lib/components/translation/utils.d.ts

@@ -0,0 +1,7 @@
+export declare const locales: {
+    en: string;
+    "zh-CN": string;
+    "zh-HK": string;
+};
+export declare const checkIfAllValuesAreEqual: (obj: any) => boolean;
+export declare const createTranslationText: (text: string, isAll?: boolean) => any;

package/lib/components/translation/utils.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/translation/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  checkIfAllValuesAreEqual: () => checkIfAllValuesAreEqual,
+  createTranslationText: () => createTranslationText,
+  locales: () => locales
+});
+module.exports = __toCommonJS(utils_exports);
+var locales = {
+  en: "",
+  "zh-CN": "",
+  "zh-HK": ""
+};
+var checkIfAllValuesAreEqual = (obj) => {
+  const valuesArray = Object.values(obj);
+  return valuesArray.every((value) => value === valuesArray[0]);
+};
+var createTranslationText = (text, isAll = true) => {
+  let primary = localStorage.getItem("shop_primary_locale") || "en";
+  let _locales = { ...locales };
+  if (text !== "" && text !== void 0) {
+    if (isAll) {
+      for (let key in _locales) {
+        _locales[key] = text;
+      }
+    } else {
+      _locales[primary] = text;
+    }
+  }
+  return _locales;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  checkIfAllValuesAreEqual,
+  createTranslationText,
+  locales
+});

package/lib/hooks/useEngineContext.d.ts

@@ -0,0 +1,9 @@
+declare type IEngineContext = {
+    appHelper: any;
+    engine: any;
+    blockContext: any;
+    components: any;
+    pageContext: any;
+};
+declare const useEngineContext: () => IEngineContext;
+export default useEngineContext;

package/lib/hooks/useEngineContext.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useEngineContext.ts
+var useEngineContext_exports = {};
+__export(useEngineContext_exports, {
+  default: () => useEngineContext_default
+});
+module.exports = __toCommonJS(useEngineContext_exports);
+var import_react = require("react");
+var defaultContext = (0, import_react.createContext)({});
+var useEngineContext = () => {
+  const context = (0, import_react.useContext)(
+    window.__appContext || defaultContext
+  );
+  return context || {};
+};
+var useEngineContext_default = useEngineContext;

package/lib/index.d.ts

@@ -62,3 +62,4 @@ export { default as AutoComplete } from "./components/auto-complete";
 export { default as Div } from "./components/div";
 export { default as Page } from "./components/page";
 export { default as Filter } from './components/filter';
+export { default as Translation } from './components/translation';

package/lib/index.js

@@ -86,6 +86,7 @@ __export(src_exports, {
   Timeline: () => import_antd36.Timeline,
   Tooltip: () => import_antd37.Tooltip,
   Transfer: () => import_antd33.Transfer,
+  Translation: () => import_translation.default,
   Tree: () => import_antd34.Tree,
   TreeSelect: () => import_tree_select.default,
   Typography: () => import_antd38.Typography,
@@ -159,6 +160,7 @@ var import_auto_complete = __toESM(require("./components/auto-complete"));
 var import_div = __toESM(require("./components/div"));
 var import_page = __toESM(require("./components/page"));
 var import_filter = __toESM(require("./components/filter"));
+var import_translation = __toESM(require("./components/translation"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Affix,
@@ -218,6 +220,7 @@ var import_filter = __toESM(require("./components/filter"));
   Timeline,
   Tooltip,
   Transfer,
+  Translation,
   Tree,
   TreeSelect,
   Typography,

package/lowcode/translation/meta.ts

@@ -0,0 +1,186 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Translation',
+  title: '多语言输入框',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Translation",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'defaultValue',
+      title: { label: '默认值', tip: '默认内容' },
+      setter: 'JsonSetter',
+    },
+    {
+      name: 'value',
+      title: { label: '当前值', tip: '当前值' },
+      setter: 'JsonSetter'
+    },
+    {
+      name: 'bordered',
+      title: { label: '显示边框', tip: '是否有边框' },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'placeholder',
+      title: { label: '占位提示', tip: '占位提示' },
+      propType: 'string',
+      defaultValue: '请输入',
+      setter: 'PisellI18nSetter'
+    },
+    // {
+    //   name: 'id',
+    //   title: { label: '输入框ID', tip: '输入框的ID' },
+    //   propType: 'string',
+    // },
+    {
+      name: 'maxLength',
+      title: { label: '最大长度', tip: '最大长度' },
+      propType: 'number',
+      setter: 'NumberSetter',
+    },
+    {
+      name: 'size',
+      title: { label: '控件大小', tip: '控件大小' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '大',
+              value: 'large',
+            },
+            {
+              title: '中',
+              value: 'middle',
+            },
+            {
+              title: '小',
+              value: 'small',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
+      defaultValue: 'middle',
+    },
+    {
+      name: 'addonAfter',
+      title: { label: '后置标签', tip: '后置标签' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+      setter: ['PisellI18nSetter', 'SlotSetter']
+    },
+    {
+      name: 'addonBefore',
+      title: { label: '前置标签', tip: '前置标签' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+      setter: ['PisellI18nSetter', 'SlotSetter']
+    },
+    {
+      name: 'prefix',
+      title: { label: '前缀', tip: '前缀' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+      setter: ['PisellI18nSetter', 'SlotSetter']
+    },
+    // {
+    //   name: 'suffix',
+    //   title: { label: '后缀', tip: '后缀' },
+    //   propType: { type: 'oneOfType', value: ['string', 'node'] },
+    //   setter: ['PisellI18nSetter', 'SlotSetter']
+    // },
+    {
+      name: 'onChange',
+      title: { label: '输入框内容变化时的回调', tip: '输入框内容变化时的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onPressEnter',
+      title: { label: '按下回车的回调', tip: '按下回车的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onFocus',
+      title: { label: '获取焦点回调', tip: '获取焦点回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onKeyDown',
+      title: { label: '按键按下时的回调', tip: '按键按下时的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onKeyPress',
+      title: { label: '按键按下后的回调', tip: '按键按下之后释放之前的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onKeyUp',
+      title: { label: '按键释放回调', tip: '按键释放之后的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onBlur',
+      title: { label: '失去焦点回调', tip: '失去焦点回调' },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(event,${extParams}){\n// 输入框内容变化时的回调\nconsole.log('onChange',event);}",
+        },
+        {
+          name: 'onPressEnter',
+          template:
+            "onPressEnter(event,${extParams}){\n// 按下回车的回调\nconsole.log('onPressEnter',event);}",
+        },
+        {
+          name: 'onFocus',
+          template: "onFocus(event,${extParams}){\n// 获取焦点回调\nconsole.log('onFocus',event);}",
+        },
+        {
+          name: 'onKeyDown',
+          template:
+            "onKeyDown(event,${extParams}){\n// 按键按下时的回调\nconsole.log('onKeyDown',event);}",
+        },
+        {
+          name: 'onKeyPress',
+          template:
+            "onKeyPress(event,${extParams}){\n// 按键按下后的回调\nconsole.log('onKeyPress',event);}",
+        },
+        {
+          name: 'onKeyUp',
+          template: "onKeyUp(event,${extParams}){\n// 按键释放回调\nconsole.log('onKeyUp',event);}",
+        },
+        {
+          name: 'onBlur',
+          template: "onBlur(event,${extParams}){\n// 按键释放回调\nconsole.log('onBlur',event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/translation/snippets.ts

@@ -0,0 +1,12 @@
+export default [
+  {
+    title: '多语言输入框',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/input-1.png',
+    schema: {
+      componentName: 'Translation',
+      props: {
+        placeholder: '请输入',
+      },
+    },
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.83",
+  "version": "1.0.85",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",

package/dist/umd/materials.min.css

@@ -1 +0,0 @@
-.materials-grid{display:flex;flex-direction:column;height:100%;width:100%}.materials-grid-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.materials-grid-header .right-wrap{align-items:center;display:flex;gap:8px}.materials-grid-actions{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.materials-grid-actions .left-wrap{align-items:center;display:flex;flex:1 1}.materials-grid-actions .left-wrap .pisell-lowcode-form-item{margin-bottom:0}.materials-grid-actions .right-wrap{align-items:center;display:flex;gap:8px}.materials-grid-actions .right-wrap .icon{cursor:pointer;transition:.2s}.materials-grid-actions .right-wrap .icon:hover{color:var(--theme-color)}.materials-grid-actions .right-wrap .button{align-items:center;display:flex;font-size:12px;height:28px;justify-content:center}.filter-dropdown-wrap{display:flex;flex-direction:column;max-height:400px;max-width:calc(100vw - 24px);min-width:250px;padding:4px;width:400px}.filter-dropdown-wrap .filter-dropdown-wrap-content{flex:1 1;overflow:auto}.filter-dropdown-wrap .filter-dropdown-drag-item{align-items:center;background:#f9fafb;background:var(--gray-50,#f9fafb);border-radius:8px;display:flex;margin-bottom:12px;padding:8px 12px 12px}.filter-dropdown-wrap .filter-dropdown-drag-item .dots-six-icon{color:#98a2b3;cursor:pointer;font-size:24px}.filter-dropdown-wrap .filter-dropdown-drag-item .pisell-lowcode-form-item{margin-bottom:0}.filter-dropdown-wrap .filter-dropdown-drag-item .filter-dropdown-drag-item-right{flex:1 1;margin-left:16px}.filter-dropdown-wrap .filter-dropdown-drag-item .filter-dropdown-drag-item-right .filter-dropdown-drag-item-title{color:#777;color:var(--text-text-2,#777);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.filter-dropdown-container-wrap{border-bottom:1px solid #e2e2e2;border-bottom:1px solid var(--surface-surface-4,#e2e2e2);margin-bottom:20px;min-height:70px}.filter-dropdown-container-wrap:last-child{border:none}.filter-dropdown-container-wrap .filter-dropdown-container-title-wrap{align-items:center;color:#919191;color:var(--text-text-3,#919191);display:flex;font-size:16px;font-style:normal;font-weight:600;line-height:22px;margin-bottom:12px}.filter-dropdown-container-wrap .filter-dropdown-container-title-wrap .filter-dropdown-container-title{color:#101828;color:var(--gray-900,#101828);font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-right:6px}.filter-dropdown-container-wrap .filter-dropdown-container-title-wrap .filter-dropdown-container-icon-help{color:#98a2b3;color:var(--gray-400,#98a2b3);font-size:20px}.filter-dropdown-container-wrap .filter-dropdown-container-filter-wrap{min-height:80px}.materials-sort-list-empty{color:#5a5a5a;display:block;padding-top:22px;text-align:center}.materials-grid-summary{margin-bottom:16px}.grid-view-table-wrap{position:relative}.materials-grid-paginator{align-items:center;background-color:#fff;border:1px solid #f0f0f0;border-radius:0 0 8px 8px;border-top:none;display:flex;height:50px;justify-content:center;margin:0!important;padding:0 20px;width:100%}.materials-grid-paginator .pisell-lowcode-pagination-total-text{color:#667085;color:var(--gray-500,#667085);font-size:14px;font-style:normal;font-weight:500;margin-right:auto}.materials-grid-paginator .pisell-lowcode-pagination-item{border:1px solid #d0d5dd;border-radius:0;border-right:0;margin:0;position:relative}.materials-grid-paginator .pisell-lowcode-pagination-jump-next,.materials-grid-paginator .pisell-lowcode-pagination-jump-prev{border:1px solid #d0d5dd;border-radius:0;border-right:none;margin:0}.materials-grid-paginator .pisell-lowcode-pagination-item-link:hover{color:rgba(0,0,0,.88)!important;font-weight:450!important}.materials-grid-paginator .pisell-lowcode-pagination-item-link:hover .pisell-lowcode-pagination-item-link-icon{color:rgba(0,0,0,.88)!important;font-weight:450!important}.materials-grid-paginator .pisell-lowcode-pagination-item-active:hover{border-color:#d0d5dd!important}.materials-grid-paginator .pisell-lowcode-pagination-item-active{background-color:rgba(0,0,0,.06)}.materials-grid-paginator .pisell-lowcode-pagination-item-active a{color:rgba(0,0,0,.88)!important;font-weight:450!important}.materials-grid-paginator .pisell-lowcode-pagination-prev{align-items:center;border:1px solid #d0d5dd;border-radius:8px 0 0 8px;border-right:none;display:flex;justify-content:center;margin:0;min-width:auto}.materials-grid-paginator .pisell-lowcode-pagination-next{align-items:center;border:1px solid #d0d5dd;border-radius:0 8px 8px 0;display:flex;justify-content:center;margin:0;min-width:auto}.paginator-page-btn{align-items:center;border-radius:4px 4px 4px 4px;color:#344054;color:var(--gray-700,#344054);cursor:pointer;display:flex;font-size:12px;font-weight:400;justify-content:center;padding:10px 16px;transition:.2s;-ms-user-select:none;user-select:none}.paginator-page-btn .paginator-page-btn-text{font-weight:600}.paginator-page-btn .paginator-page-btn-left-icon,.paginator-page-btn .paginator-page-btn-right-icon{font-size:20px}.paginator-page-btn .paginator-page-btn-left-icon{margin-right:8px}.paginator-page-btn .paginator-page-btn-right-icon{margin-left:8px}.paginator-page-btn.left{margin-right:auto}.paginator-page-btn.left .icon{font-size:18px;margin-right:8px}.paginator-page-btn.right{margin-left:auto}.paginator-page-btn.right .icon{font-size:18px;margin-left:8px;transform:rotate(180deg)}.materials-grid-paginator-mini{align-items:center;background-color:#fff;border:1px solid #f0f0f0;border-radius:0 0 8px 8px;border-top:none;display:flex;height:50px;justify-content:space-between;margin:0!important;overflow:hidden;padding:0 20px;width:100%}.materials-grid-paginator-mini .paginator-page-btn{padding:8px}.materials-grid-paginator-mini .materials-grid-paginator-center{align-items:center;display:flex;gap:4px;justify-content:center}.materials-grid-paginator-mini .materials-grid-paginator-center .materials-grid-paginator-center-text{color:#344054;color:var(--gray-700,#344054);font-size:14px;font-style:normal;font-weight:400}.materials-grid-paginator-mini .materials-grid-paginator-center .materials-grid-paginator-center-value{color:#344054;color:var(--gray-700,#344054);font-size:14px;font-style:normal;font-weight:500}.materials-grid-paginator-mini .pisell-lowcode-pagination-next,.materials-grid-paginator-mini .pisell-lowcode-pagination-prev{border:1px solid #d0d5dd;border-radius:8px;margin:0}.materials-grid-paginator-mini .pisell-lowcode-pagination-next .paginator-page-btn-left-icon,.materials-grid-paginator-mini .pisell-lowcode-pagination-prev .paginator-page-btn-left-icon{margin-right:0}.materials-grid-paginator-mini .pisell-lowcode-pagination-next .paginator-page-btn-right-icon,.materials-grid-paginator-mini .pisell-lowcode-pagination-prev .paginator-page-btn-right-icon{margin-left:0}.react-resizable{position:relative}.react-resizable-handle{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgd2lkdGg9IjYiIGhlaWdodD0iNiI+PHBhdGggZD0iTTYgNkgwVjQuMmg0LjJWMEg2djZaIiBvcGFjaXR5PSIuMzAyIi8+PC9zdmc+);background-origin:content-box;background-position:100% 100%;background-repeat:no-repeat;box-sizing:border-box;height:20px;padding:0 3px 3px 0;position:absolute;width:20px}.react-resizable-handle-sw{bottom:0;cursor:sw-resize;left:0;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;cursor:se-resize;right:0}.react-resizable-handle-nw{cursor:nw-resize;left:0;top:0;transform:rotate(180deg)}.react-resizable-handle-ne{cursor:ne-resize;right:0;top:0;transform:rotate(270deg)}.react-resizable-handle-e,.react-resizable-handle-w{cursor:ew-resize;margin-top:-10px;top:50%}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{cursor:ns-resize;left:50%;margin-left:-10px}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.materials-grid-table-header-cell{align-items:center;display:flex;height:44px;padding:0 14px}.materials-grid-table-header-cell .field-icon{color:#777;font-size:18px}.materials-grid-table-header-cell .materials-grid-table-header-cell-content{color:#1b1b1b;flex:auto;font-size:14px;font-weight:600;overflow:hidden;padding-right:10px;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.materials-grid-table-header-cell .actions{align-items:center;display:flex;gap:8px}.materials-grid-table-header-cell .actions .action{color:#ababab;cursor:pointer;font-size:14px}.editable-cell-value-wrap{height:100%;width:100%}.materials-grid-table-cell{height:1px;padding:0!important}.cell-provider{align-items:center;border-radius:4px;cursor:pointer;display:flex;height:100%;justify-content:center;padding:12px;position:relative;width:100%}.cell-provider.focus{box-shadow:var(--theme-color) 0 0 0 1px!important}