iguazio.dashboard-react-controls 3.1.4 → 3.1.6

package/dist/components/FormChipCell/FormChipCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormChipCell.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormChipCell/FormChipCell.jsx"],"names":[],"mappings":";AAiCA;;;;;;;;;;;;;;;;;;;;;;gBAkWC;;;;;;;;;;;;;;;;;;;6BA5W4B,aAAa"}
+{"version":3,"file":"FormChipCell.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormChipCell/FormChipCell.jsx"],"names":[],"mappings":";AAiCA;;;;;;;;;;;;;;;;;;;;;;gBAwWC;;;;;;;;;;;;;;;;;;;6BAlX4B,aAAa"}

package/dist/components/FormChipCell/FormChipCell.mjs

@@ -2,7 +2,7 @@ import { jsxs as ne, jsx as T } from "react/jsx-runtime";
 import pe, { useState as k, useMemo as ce, useCallback as y } from "react";
 import he, { get as F, set as O, isEmpty as D, isNil as ae } from "lodash";
 import de from "classnames";
-import u from "prop-types";
+import o from "prop-types";
 import fe from "./FormChipCellView.mjs";
 import { CHIP_OPTIONS as me } from "../../types.mjs";
 import { CLICK as Ce, TAB as H, TAB_SHIFT as U } from "../../constants.mjs";
@@ -28,7 +28,7 @@ let R = ({
   initialValues: q,
   isEditable: m = !1,
   label: V = null,
-  name: o,
+  name: r,
   onClick: w = () => {
   },
   shortChips: $ = !1,
@@ -56,28 +56,28 @@ let R = ({
     isNewChip: !1
   });
   let E = ce(() => m || I === "all" ? {
-    visibleChips: F(n.values, o),
+    visibleChips: F(n.values, r),
     hiddenChips: []
   } : ye(
-    F(n.values, o),
+    F(n.values, r),
     I || j
-  ), [I, m, j, n.values, o]);
+  ), [I, m, j, n.values, r]);
   const N = y(
     (e) => {
-      Ie(F(q, o), e, ["id"]) && O(n.initialValues, o, e), n.form.mutators.setFieldState(o, { modified: !0 }), n.form.mutators.setFieldState(o, { touched: !0 });
+      Ie(F(q, r), e, ["id"]) && O(n.initialValues, r, e), n.form.mutators.setFieldState(r, { modified: !0 }), n.form.mutators.setFieldState(r, { touched: !0 });
     },
-    [q, o, n]
+    [q, r, n]
   ), M = y(
     (e, i) => {
       var t;
-      const r = ((t = i.value) == null ? void 0 : t.length) || 0;
-      !p.isEdit && !p.chipIndex && n.form.mutators.push(o, {
-        id: r + /* @__PURE__ */ new Date(),
+      const u = ((t = i.value) == null ? void 0 : t.length) || 0;
+      !p.isEdit && !p.chipIndex && n.form.mutators.push(r, {
+        id: u + /* @__PURE__ */ new Date(),
         key: "",
         value: "",
         delimiter: _
       }), P && K(!1), C({
-        chipIndex: r,
+        chipIndex: u,
         isEdit: !0,
         isKeyFocused: !0,
         isValueFocused: !1,
@@ -89,27 +89,27 @@ let R = ({
       p.chipIndex,
       P,
       n.form.mutators,
-      o,
+      r,
       _,
       K
     ]
   ), g = y(
-    (e, i, r, t = !1) => {
+    (e, i, u, t = !1) => {
       N(
-        he.chain(n).get(["values", o]).filter((s, l) => l !== r).value()
-      ), i.remove(r), d && d(), e && !t && e.stopPropagation();
+        he.chain(n).get(["values", r]).filter((s, l) => l !== u).value()
+      ), i.length === 1 ? n.form.change(r, []) : i.remove(u), d && d(), e && !t && e.stopPropagation();
     },
-    [N, n, o, d]
+    [N, n, r, d]
   ), ee = y(
-    (e, i, r, t) => {
+    (e, i, u, t) => {
       const { key: s, value: l } = i.value[p.chipIndex], h = !!(s != null && s.trim() && (l != null && l.trim()));
-      r === Ce ? (h || g(e, i, p.chipIndex, t), C({
+      u === Ce ? (h || g(e, i, p.chipIndex, t), C({
         chipIndex: null,
         isEdit: !1,
         isKeyFocused: !1,
         isValueFocused: !1,
         isNewChip: !1
-      }), h && d && d()) : r === H ? (h || g(e, i, p.chipIndex), C((a) => {
+      }), h && d && d()) : u === H ? (h || g(e, i, p.chipIndex), C((a) => {
         const c = a.chipIndex + 1 > i.value.length - 1;
         return h && c && d && d(), {
           chipIndex: c ? null : a.chipIndex + 1,
@@ -118,7 +118,7 @@ let R = ({
           isValueFocused: !1,
           isNewChip: !1
         };
-      })) : r === U && (h || g(e, i, p.chipIndex), C((a) => {
+      })) : u === U && (h || g(e, i, p.chipIndex), C((a) => {
         const c = a.chipIndex === 0;
         return h && c && d && d(), {
           chipIndex: c ? null : a.chipIndex - 1,
@@ -127,18 +127,18 @@ let R = ({
           isValueFocused: !c,
           isNewChip: !1
         };
-      })), N(F(n.values, o)), (p.chipIndex > 0 && p.chipIndex < i.value.length - 1 || i.value.length > 1 && p.chipIndex === 0 && r !== U || i.value.length > 1 && p.chipIndex === i.value.length - 1 && r !== H) && e && e.preventDefault();
+      })), N(F(n.values, r)), (p.chipIndex > 0 && p.chipIndex < i.value.length - 1 || i.value.length > 1 && p.chipIndex === 0 && u !== U || i.value.length > 1 && p.chipIndex === i.value.length - 1 && u !== H) && e && e.preventDefault();
     },
     [
       p.chipIndex,
       N,
       n.values,
-      o,
+      r,
       d,
       g
     ]
   ), ie = y(
-    (e, i, r) => {
+    (e, i, u) => {
       if (m) {
         const { clientX: t, clientY: s } = e;
         let l = !1;
@@ -157,7 +157,7 @@ let R = ({
           t,
           s,
           e.target.firstElementChild
-        )) : l = e.target.name === r, C((a) => ({
+        )) : l = e.target.name === u, C((a) => ({
           ...a,
           chipIndex: i,
           isEdit: !0,
@@ -171,14 +171,14 @@ let R = ({
   ), se = (e) => {
     if (!e) return null;
     let i = [];
-    const r = (t, s) => !e.some(({ key: l }, h) => t === l && h !== s);
+    const u = (t, s) => !e.some(({ key: l }, h) => t === l && h !== s);
     return D(v) || (i = e.map((t) => {
       const [s, l] = le(t);
       return s && l ? { key: s, value: l } : s ? { key: s } : l ? { value: l } : null;
     })), e.forEach((t, s) => {
-      r(t.key, s) || (F(i, [s, "key"], !1) ? i.at(s).key.push(z) : O(i, [s, "key"], [z]));
+      u(t.key, s) || (F(i, [s, "key"], !1) ? i.at(s).key.push(z) : O(i, [s, "key"], [z]));
     }), D(i) && x && (i = x(e)), i.every((t) => ae(t)) ? null : i;
-  }, le = ({ key: e, value: i, disabled: r }) => {
+  }, le = ({ key: e, value: i, disabled: u }) => {
     const t = (s, l) => {
       const [h, a] = ge(
         v[l].filter((f) => f.pattern),
@@ -186,9 +186,9 @@ let R = ({
       );
       return a ? null : h.filter((f) => !f.isValid).map((f) => ({ name: f.name, label: f.label }));
     };
-    return r ? [null, null] : [t(e, "key"), t(i, "value")];
+    return u ? [null, null] : [t(e, "key"), t(i, "value")];
   };
-  return /* @__PURE__ */ ne("div", { className: W, "data-testid": `${o}-chips`, children: [
+  return /* @__PURE__ */ ne("div", { className: W, "data-testid": `${r}-chips`, children: [
     V && /* @__PURE__ */ T("div", { className: "chips__label", children: V }),
     /* @__PURE__ */ T("div", { className: V ? "chips__wrapper" : "", children: /* @__PURE__ */ T(
       fe,
@@ -204,7 +204,7 @@ let R = ({
         handleShowElements: J,
         handleToEditMode: ie,
         isEditable: m,
-        name: o,
+        name: r,
         ref: { chipsCellRef: A, chipsWrapperRef: G, hiddenChipsCounterRef: L, hiddenChipsPopUpRef: Q },
         setChipSizeIsRecalculated: Y,
         setChipsSizes: Z,
@@ -220,19 +220,19 @@ let R = ({
 };
 R.propTypes = {
   chipOptions: me,
-  className: u.string,
-  delimiter: u.oneOfType([u.string, u.element]),
-  formState: u.object.isRequired,
-  initialValues: u.object.isRequired,
-  isEditable: u.bool,
-  label: u.string,
-  name: u.string.isRequired,
-  onClick: u.func,
-  onExitEditModeCallback: u.func,
-  shortChips: u.bool,
-  validationRules: u.object,
-  validator: u.func,
-  visibleChipsMaxLength: u.oneOfType([u.string, u.number])
+  className: o.string,
+  delimiter: o.oneOfType([o.string, o.element]),
+  formState: o.object.isRequired,
+  initialValues: o.object.isRequired,
+  isEditable: o.bool,
+  label: o.string,
+  name: o.string.isRequired,
+  onClick: o.func,
+  onExitEditModeCallback: o.func,
+  shortChips: o.bool,
+  validationRules: o.object,
+  validator: o.func,
+  visibleChipsMaxLength: o.oneOfType([o.string, o.number])
 };
 R = pe.memo(R);
 const He = R;

package/dist/components/FormChipCell/FormChipCell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormChipCell.mjs","sources":["../../../src/lib/components/FormChipCell/FormChipCell.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useState, useCallback, useMemo } from 'react'\nimport lodash, { get, isEmpty, set, isNil } from 'lodash'\nimport classnames from 'classnames'\nimport PropTypes from 'prop-types'\n\nimport FormChipCellView from './FormChipCellView'\n\nimport { CHIP_OPTIONS } from '../../types'\nimport { CLICK, TAB, TAB_SHIFT } from '../../constants'\nimport { areArraysEqual } from '../../utils/common.util'\nimport { checkPatternsValidity } from '../../utils/validation.util'\nimport { generateChipsList } from '../../utils/generateChipsList.util'\nimport { uniquenessError } from './formChipCell.util'\nimport { useChipCell } from '../../hooks'\n\nimport './formChipCell.scss'\n\nlet FormChipCell = ({\n  chipOptions = {\n    background: 'purple',\n    boldValue: false,\n    borderRadius: 'primary',\n    borderColor: 'transparent',\n    density: 'dense',\n    font: 'purple'\n  },\n  className = '',\n  delimiter = null,\n  formState,\n  initialValues,\n  isEditable = false,\n  label = null,\n  name,\n  onClick = () => {},\n  shortChips = false,\n  validationRules = {},\n  validator = null,\n  onExitEditModeCallback = null,\n  visibleChipsMaxLength = null\n}) => {\n  const chipsClassName = classnames('chips', className)\n  const [chipSizeIsRecalculated, setChipSizeIsRecalculated] = useState(false)\n  const {\n    chipsCellRef,\n    chipsWrapperRef,\n    handleShowElements,\n    hiddenChipsCounterRef,\n    hiddenChipsPopUpRef,\n    setChipsSizes,\n    setShowHiddenChips,\n    showChips,\n    showHiddenChips,\n    visibleChipsCount\n  } = useChipCell(isEditable, visibleChipsMaxLength)\n\n  const [editConfig, setEditConfig] = useState({\n    chipIndex: null,\n    isEdit: false,\n    isKeyFocused: false,\n    isValueFocused: false,\n    isNewChip: false\n  })\n\n  let chips = useMemo(() => {\n    return isEditable || visibleChipsMaxLength === 'all'\n      ? {\n          visibleChips: get(formState.values, name),\n          hiddenChips: []\n        }\n      : generateChipsList(\n          get(formState.values, name),\n          visibleChipsMaxLength ? visibleChipsMaxLength : visibleChipsCount\n        )\n  }, [visibleChipsMaxLength, isEditable, visibleChipsCount, formState.values, name])\n\n  const checkChipsList = useCallback(\n    currentChipsList => {\n      if (areArraysEqual(get(initialValues, name), currentChipsList, ['id'])) {\n        set(formState.initialValues, name, currentChipsList)\n      }\n\n      formState.form.mutators.setFieldState(name, { modified: true })\n      formState.form.mutators.setFieldState(name, { touched: true })\n    },\n    [initialValues, name, formState]\n  )\n\n  const handleAddNewChip = useCallback(\n    (event, fields) => {\n      const fieldsLength = fields.value?.length || 0\n\n      if (!editConfig.isEdit && !editConfig.chipIndex) {\n        formState.form.mutators.push(name, {\n          id: fieldsLength + new Date(),\n          key: '',\n          value: '',\n          delimiter: delimiter\n        })\n      }\n\n      if (showHiddenChips) {\n        setShowHiddenChips(false)\n      }\n\n      setEditConfig({\n        chipIndex: fieldsLength,\n        isEdit: true,\n        isKeyFocused: true,\n        isValueFocused: false,\n        isNewChip: true\n      })\n\n      event && event.preventDefault()\n    },\n    [\n      editConfig.isEdit,\n      editConfig.chipIndex,\n      showHiddenChips,\n      formState.form.mutators,\n      name,\n      delimiter,\n      setShowHiddenChips\n    ]\n  )\n\n  const handleRemoveChip = useCallback(\n    (event, fields, chipIndex, isOutsideClick = false) => {\n      checkChipsList(\n        lodash\n          .chain(formState)\n          .get(['values', name])\n          .filter((_, index) => index !== chipIndex)\n          .value()\n      )\n      fields.remove(chipIndex)\n      onExitEditModeCallback && onExitEditModeCallback()\n      event && !isOutsideClick && event.stopPropagation()\n    },\n    [checkChipsList, formState, name, onExitEditModeCallback]\n  )\n\n  const handleEditChip = useCallback(\n    (event, fields, nameEvent, isOutsideClick) => {\n      const { key, value } = fields.value[editConfig.chipIndex]\n      const isChipNotEmpty = !!(key?.trim() && value?.trim())\n\n      if (nameEvent === CLICK) {\n        if (!isChipNotEmpty) {\n          handleRemoveChip(event, fields, editConfig.chipIndex, isOutsideClick)\n        }\n\n        setEditConfig({\n          chipIndex: null,\n          isEdit: false,\n          isKeyFocused: false,\n          isValueFocused: false,\n          isNewChip: false\n        })\n        isChipNotEmpty && onExitEditModeCallback && onExitEditModeCallback()\n      } else if (nameEvent === TAB) {\n        if (!isChipNotEmpty) {\n          handleRemoveChip(event, fields, editConfig.chipIndex)\n        }\n\n        setEditConfig(prevState => {\n          const lastChipSelected = prevState.chipIndex + 1 > fields.value.length - 1\n\n          isChipNotEmpty && lastChipSelected && onExitEditModeCallback && onExitEditModeCallback()\n\n          return {\n            chipIndex: lastChipSelected ? null : prevState.chipIndex + 1,\n            isEdit: !lastChipSelected,\n            isKeyFocused: !lastChipSelected,\n            isValueFocused: false,\n            isNewChip: false\n          }\n        })\n      } else if (nameEvent === TAB_SHIFT) {\n        if (!isChipNotEmpty) {\n          handleRemoveChip(event, fields, editConfig.chipIndex)\n        }\n\n        setEditConfig(prevState => {\n          const firstChipIsSelected = prevState.chipIndex === 0\n\n          isChipNotEmpty &&\n            firstChipIsSelected &&\n            onExitEditModeCallback &&\n            onExitEditModeCallback()\n\n          return {\n            chipIndex: firstChipIsSelected ? null : prevState.chipIndex - 1,\n            isEdit: !firstChipIsSelected,\n            isKeyFocused: false,\n            isValueFocused: !firstChipIsSelected,\n            isNewChip: false\n          }\n        })\n      }\n\n      checkChipsList(get(formState.values, name))\n\n      if (\n        (editConfig.chipIndex > 0 && editConfig.chipIndex < fields.value.length - 1) ||\n        (fields.value.length > 1 && editConfig.chipIndex === 0 && nameEvent !== TAB_SHIFT) ||\n        (fields.value.length > 1 &&\n          editConfig.chipIndex === fields.value.length - 1 &&\n          nameEvent !== TAB)\n      ) {\n        event && event.preventDefault()\n      }\n    },\n    [\n      editConfig.chipIndex,\n      checkChipsList,\n      formState.values,\n      name,\n      onExitEditModeCallback,\n      handleRemoveChip\n    ]\n  )\n\n  const handleToEditMode = useCallback(\n    (event, chipIndex, keyName) => {\n      if (isEditable) {\n        const { clientX: pointerCoordinateX, clientY: pointerCoordinateY } = event\n        let isKeyClicked = false\n        const isClickedInsideInputElement = (\n          pointerCoordinateX,\n          pointerCoordinateY,\n          inputElement\n        ) => {\n          if (inputElement) {\n            const {\n              top: topPosition,\n              left: leftPosition,\n              right: rightPosition,\n              bottom: bottomPosition\n            } = inputElement.getBoundingClientRect()\n            if (pointerCoordinateX > rightPosition || pointerCoordinateX < leftPosition)\n              return false\n            if (pointerCoordinateY > bottomPosition || pointerCoordinateY < topPosition)\n              return false\n\n            return true\n          }\n        }\n        event.stopPropagation()\n\n        if (event.target.nodeName !== 'INPUT') {\n          if (event.target.firstElementChild) {\n            isKeyClicked = isClickedInsideInputElement(\n              pointerCoordinateX,\n              pointerCoordinateY,\n              event.target.firstElementChild\n            )\n          }\n        } else {\n          isKeyClicked = event.target.name === keyName\n        }\n\n        setEditConfig(preState => ({\n          ...preState,\n          chipIndex,\n          isEdit: true,\n          isKeyFocused: isKeyClicked,\n          isValueFocused: !isKeyClicked\n        }))\n      }\n\n      onClick && onClick()\n    },\n    [isEditable, onClick]\n  )\n\n  const validateFields = fieldsArray => {\n    if (!fieldsArray) return null\n\n    let errorData = []\n\n    const uniquenessValidator = (newValue, idx) => {\n      return !fieldsArray.some(({ key }, index) => {\n        return newValue === key && index !== idx\n      })\n    }\n\n    if (!isEmpty(validationRules)) {\n      errorData = fieldsArray.map(chip => {\n        const [keyValidation, valueValidation] = validateChip(chip)\n\n        if (keyValidation && valueValidation) return { key: keyValidation, value: valueValidation }\n\n        if (keyValidation) return { key: keyValidation }\n\n        if (valueValidation) return { value: valueValidation }\n\n        return null\n      })\n    }\n\n    // uniqueness\n    fieldsArray.forEach((chip, index) => {\n      const isUnique = uniquenessValidator(chip.key, index)\n\n      if (!isUnique) {\n        if (get(errorData, [index, 'key'], false)) {\n          errorData.at(index).key.push(uniquenessError)\n        } else {\n          set(errorData, [index, 'key'], [uniquenessError])\n        }\n      }\n    })\n\n    if (isEmpty(errorData) && validator) {\n      errorData = validator(fieldsArray)\n    }\n\n    if (errorData.every(label => isNil(label))) {\n      return null\n    }\n\n    return errorData\n  }\n\n  const validateChip = ({ key, value, disabled }) => {\n    const validateField = (value, field) => {\n      const [newRules, isValidField] = checkPatternsValidity(\n        validationRules[field].filter(rule => rule.pattern),\n        value\n      )\n\n      if (isValidField) return null\n\n      const invalidRules = newRules.filter(rule => !rule.isValid)\n\n      return invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n    }\n\n    return disabled ? [null, null] : [validateField(key, 'key'), validateField(value, 'value')]\n  }\n\n  return (\n    <div className={chipsClassName} data-testid={`${name}-chips`}>\n      {label && <div className=\"chips__label\">{label}</div>}\n      <div className={label ? 'chips__wrapper' : ''}>\n        <FormChipCellView\n          chipOptions={chipOptions}\n          chipSizeIsRecalculated={chipSizeIsRecalculated}\n          chips={chips}\n          editConfig={editConfig}\n          formState={formState}\n          handleAddNewChip={handleAddNewChip}\n          handleEditChip={handleEditChip}\n          handleRemoveChip={handleRemoveChip}\n          handleShowElements={handleShowElements}\n          handleToEditMode={handleToEditMode}\n          isEditable={isEditable}\n          name={name}\n          ref={{ chipsCellRef, chipsWrapperRef, hiddenChipsCounterRef, hiddenChipsPopUpRef }}\n          setChipSizeIsRecalculated={setChipSizeIsRecalculated}\n          setChipsSizes={setChipsSizes}\n          setEditConfig={setEditConfig}\n          shortChips={shortChips}\n          showChips={showChips}\n          showHiddenChips={showHiddenChips}\n          validateFields={validateFields}\n          validationRules={validationRules}\n        />\n      </div>\n    </div>\n  )\n}\n\nFormChipCell.propTypes = {\n  chipOptions: CHIP_OPTIONS,\n  className: PropTypes.string,\n  delimiter: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  formState: PropTypes.object.isRequired,\n  initialValues: PropTypes.object.isRequired,\n  isEditable: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  onClick: PropTypes.func,\n  onExitEditModeCallback: PropTypes.func,\n  shortChips: PropTypes.bool,\n  validationRules: PropTypes.object,\n  validator: PropTypes.func,\n  visibleChipsMaxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n}\n\nFormChipCell = React.memo(FormChipCell)\n\nexport default FormChipCell\n"],"names":["FormChipCell","chipOptions","className","delimiter","formState","initialValues","isEditable","label","name","onClick","shortChips","validationRules","validator","onExitEditModeCallback","visibleChipsMaxLength","chipsClassName","classnames","chipSizeIsRecalculated","setChipSizeIsRecalculated","useState","chipsCellRef","chipsWrapperRef","handleShowElements","hiddenChipsCounterRef","hiddenChipsPopUpRef","setChipsSizes","setShowHiddenChips","showChips","showHiddenChips","visibleChipsCount","useChipCell","editConfig","setEditConfig","chips","useMemo","get","generateChipsList","checkChipsList","useCallback","currentChipsList","areArraysEqual","set","handleAddNewChip","event","fields","fieldsLength","_a","handleRemoveChip","chipIndex","isOutsideClick","lodash","_","index","handleEditChip","nameEvent","key","value","isChipNotEmpty","CLICK","TAB","prevState","lastChipSelected","TAB_SHIFT","firstChipIsSelected","handleToEditMode","keyName","pointerCoordinateX","pointerCoordinateY","isKeyClicked","isClickedInsideInputElement","inputElement","topPosition","leftPosition","rightPosition","bottomPosition","preState","validateFields","fieldsArray","errorData","uniquenessValidator","newValue","idx","isEmpty","chip","keyValidation","valueValidation","validateChip","uniquenessError","isNil","disabled","validateField","field","newRules","isValidField","checkPatternsValidity","rule","jsx","FormChipCellView","CHIP_OPTIONS","PropTypes","React","FormChipCell$1"],"mappings":"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"}
+{"version":3,"file":"FormChipCell.mjs","sources":["../../../src/lib/components/FormChipCell/FormChipCell.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { useState, useCallback, useMemo } from 'react'\nimport lodash, { get, isEmpty, set, isNil } from 'lodash'\nimport classnames from 'classnames'\nimport PropTypes from 'prop-types'\n\nimport FormChipCellView from './FormChipCellView'\n\nimport { CHIP_OPTIONS } from '../../types'\nimport { CLICK, TAB, TAB_SHIFT } from '../../constants'\nimport { areArraysEqual } from '../../utils/common.util'\nimport { checkPatternsValidity } from '../../utils/validation.util'\nimport { generateChipsList } from '../../utils/generateChipsList.util'\nimport { uniquenessError } from './formChipCell.util'\nimport { useChipCell } from '../../hooks'\n\nimport './formChipCell.scss'\n\nlet FormChipCell = ({\n  chipOptions = {\n    background: 'purple',\n    boldValue: false,\n    borderRadius: 'primary',\n    borderColor: 'transparent',\n    density: 'dense',\n    font: 'purple'\n  },\n  className = '',\n  delimiter = null,\n  formState,\n  initialValues,\n  isEditable = false,\n  label = null,\n  name,\n  onClick = () => {},\n  shortChips = false,\n  validationRules = {},\n  validator = null,\n  onExitEditModeCallback = null,\n  visibleChipsMaxLength = null\n}) => {\n  const chipsClassName = classnames('chips', className)\n  const [chipSizeIsRecalculated, setChipSizeIsRecalculated] = useState(false)\n  const {\n    chipsCellRef,\n    chipsWrapperRef,\n    handleShowElements,\n    hiddenChipsCounterRef,\n    hiddenChipsPopUpRef,\n    setChipsSizes,\n    setShowHiddenChips,\n    showChips,\n    showHiddenChips,\n    visibleChipsCount\n  } = useChipCell(isEditable, visibleChipsMaxLength)\n\n  const [editConfig, setEditConfig] = useState({\n    chipIndex: null,\n    isEdit: false,\n    isKeyFocused: false,\n    isValueFocused: false,\n    isNewChip: false\n  })\n\n  let chips = useMemo(() => {\n    return isEditable || visibleChipsMaxLength === 'all'\n      ? {\n          visibleChips: get(formState.values, name),\n          hiddenChips: []\n        }\n      : generateChipsList(\n          get(formState.values, name),\n          visibleChipsMaxLength ? visibleChipsMaxLength : visibleChipsCount\n        )\n  }, [visibleChipsMaxLength, isEditable, visibleChipsCount, formState.values, name])\n\n  const checkChipsList = useCallback(\n    currentChipsList => {\n      if (areArraysEqual(get(initialValues, name), currentChipsList, ['id'])) {\n        set(formState.initialValues, name, currentChipsList)\n      }\n\n      formState.form.mutators.setFieldState(name, { modified: true })\n      formState.form.mutators.setFieldState(name, { touched: true })\n    },\n    [initialValues, name, formState]\n  )\n\n  const handleAddNewChip = useCallback(\n    (event, fields) => {\n      const fieldsLength = fields.value?.length || 0\n\n      if (!editConfig.isEdit && !editConfig.chipIndex) {\n        formState.form.mutators.push(name, {\n          id: fieldsLength + new Date(),\n          key: '',\n          value: '',\n          delimiter: delimiter\n        })\n      }\n\n      if (showHiddenChips) {\n        setShowHiddenChips(false)\n      }\n\n      setEditConfig({\n        chipIndex: fieldsLength,\n        isEdit: true,\n        isKeyFocused: true,\n        isValueFocused: false,\n        isNewChip: true\n      })\n\n      event && event.preventDefault()\n    },\n    [\n      editConfig.isEdit,\n      editConfig.chipIndex,\n      showHiddenChips,\n      formState.form.mutators,\n      name,\n      delimiter,\n      setShowHiddenChips\n    ]\n  )\n\n  const handleRemoveChip = useCallback(\n    (event, fields, chipIndex, isOutsideClick = false) => {\n      checkChipsList(\n        lodash\n          .chain(formState)\n          .get(['values', name])\n          .filter((_, index) => index !== chipIndex)\n          .value()\n      )\n\n      if (fields.length === 1) {\n        formState.form.change(name, [])\n      } else {\n        fields.remove(chipIndex)\n      }\n\n      onExitEditModeCallback && onExitEditModeCallback()\n      event && !isOutsideClick && event.stopPropagation()\n    },\n    [checkChipsList, formState, name, onExitEditModeCallback]\n  )\n\n  const handleEditChip = useCallback(\n    (event, fields, nameEvent, isOutsideClick) => {\n      const { key, value } = fields.value[editConfig.chipIndex]\n      const isChipNotEmpty = !!(key?.trim() && value?.trim())\n\n      if (nameEvent === CLICK) {\n        if (!isChipNotEmpty) {\n          handleRemoveChip(event, fields, editConfig.chipIndex, isOutsideClick)\n        }\n\n        setEditConfig({\n          chipIndex: null,\n          isEdit: false,\n          isKeyFocused: false,\n          isValueFocused: false,\n          isNewChip: false\n        })\n        isChipNotEmpty && onExitEditModeCallback && onExitEditModeCallback()\n      } else if (nameEvent === TAB) {\n        if (!isChipNotEmpty) {\n          handleRemoveChip(event, fields, editConfig.chipIndex)\n        }\n\n        setEditConfig(prevState => {\n          const lastChipSelected = prevState.chipIndex + 1 > fields.value.length - 1\n\n          isChipNotEmpty && lastChipSelected && onExitEditModeCallback && onExitEditModeCallback()\n\n          return {\n            chipIndex: lastChipSelected ? null : prevState.chipIndex + 1,\n            isEdit: !lastChipSelected,\n            isKeyFocused: !lastChipSelected,\n            isValueFocused: false,\n            isNewChip: false\n          }\n        })\n      } else if (nameEvent === TAB_SHIFT) {\n        if (!isChipNotEmpty) {\n          handleRemoveChip(event, fields, editConfig.chipIndex)\n        }\n\n        setEditConfig(prevState => {\n          const firstChipIsSelected = prevState.chipIndex === 0\n\n          isChipNotEmpty &&\n            firstChipIsSelected &&\n            onExitEditModeCallback &&\n            onExitEditModeCallback()\n\n          return {\n            chipIndex: firstChipIsSelected ? null : prevState.chipIndex - 1,\n            isEdit: !firstChipIsSelected,\n            isKeyFocused: false,\n            isValueFocused: !firstChipIsSelected,\n            isNewChip: false\n          }\n        })\n      }\n\n      checkChipsList(get(formState.values, name))\n\n      if (\n        (editConfig.chipIndex > 0 && editConfig.chipIndex < fields.value.length - 1) ||\n        (fields.value.length > 1 && editConfig.chipIndex === 0 && nameEvent !== TAB_SHIFT) ||\n        (fields.value.length > 1 &&\n          editConfig.chipIndex === fields.value.length - 1 &&\n          nameEvent !== TAB)\n      ) {\n        event && event.preventDefault()\n      }\n    },\n    [\n      editConfig.chipIndex,\n      checkChipsList,\n      formState.values,\n      name,\n      onExitEditModeCallback,\n      handleRemoveChip\n    ]\n  )\n\n  const handleToEditMode = useCallback(\n    (event, chipIndex, keyName) => {\n      if (isEditable) {\n        const { clientX: pointerCoordinateX, clientY: pointerCoordinateY } = event\n        let isKeyClicked = false\n        const isClickedInsideInputElement = (\n          pointerCoordinateX,\n          pointerCoordinateY,\n          inputElement\n        ) => {\n          if (inputElement) {\n            const {\n              top: topPosition,\n              left: leftPosition,\n              right: rightPosition,\n              bottom: bottomPosition\n            } = inputElement.getBoundingClientRect()\n            if (pointerCoordinateX > rightPosition || pointerCoordinateX < leftPosition)\n              return false\n            if (pointerCoordinateY > bottomPosition || pointerCoordinateY < topPosition)\n              return false\n\n            return true\n          }\n        }\n        event.stopPropagation()\n\n        if (event.target.nodeName !== 'INPUT') {\n          if (event.target.firstElementChild) {\n            isKeyClicked = isClickedInsideInputElement(\n              pointerCoordinateX,\n              pointerCoordinateY,\n              event.target.firstElementChild\n            )\n          }\n        } else {\n          isKeyClicked = event.target.name === keyName\n        }\n\n        setEditConfig(preState => ({\n          ...preState,\n          chipIndex,\n          isEdit: true,\n          isKeyFocused: isKeyClicked,\n          isValueFocused: !isKeyClicked\n        }))\n      }\n\n      onClick && onClick()\n    },\n    [isEditable, onClick]\n  )\n\n  const validateFields = fieldsArray => {\n    if (!fieldsArray) return null\n\n    let errorData = []\n\n    const uniquenessValidator = (newValue, idx) => {\n      return !fieldsArray.some(({ key }, index) => {\n        return newValue === key && index !== idx\n      })\n    }\n\n    if (!isEmpty(validationRules)) {\n      errorData = fieldsArray.map(chip => {\n        const [keyValidation, valueValidation] = validateChip(chip)\n\n        if (keyValidation && valueValidation) return { key: keyValidation, value: valueValidation }\n\n        if (keyValidation) return { key: keyValidation }\n\n        if (valueValidation) return { value: valueValidation }\n\n        return null\n      })\n    }\n\n    // uniqueness\n    fieldsArray.forEach((chip, index) => {\n      const isUnique = uniquenessValidator(chip.key, index)\n\n      if (!isUnique) {\n        if (get(errorData, [index, 'key'], false)) {\n          errorData.at(index).key.push(uniquenessError)\n        } else {\n          set(errorData, [index, 'key'], [uniquenessError])\n        }\n      }\n    })\n\n    if (isEmpty(errorData) && validator) {\n      errorData = validator(fieldsArray)\n    }\n\n    if (errorData.every(label => isNil(label))) {\n      return null\n    }\n\n    return errorData\n  }\n\n  const validateChip = ({ key, value, disabled }) => {\n    const validateField = (value, field) => {\n      const [newRules, isValidField] = checkPatternsValidity(\n        validationRules[field].filter(rule => rule.pattern),\n        value\n      )\n\n      if (isValidField) return null\n\n      const invalidRules = newRules.filter(rule => !rule.isValid)\n\n      return invalidRules.map(rule => ({ name: rule.name, label: rule.label }))\n    }\n\n    return disabled ? [null, null] : [validateField(key, 'key'), validateField(value, 'value')]\n  }\n\n  return (\n    <div className={chipsClassName} data-testid={`${name}-chips`}>\n      {label && <div className=\"chips__label\">{label}</div>}\n      <div className={label ? 'chips__wrapper' : ''}>\n        <FormChipCellView\n          chipOptions={chipOptions}\n          chipSizeIsRecalculated={chipSizeIsRecalculated}\n          chips={chips}\n          editConfig={editConfig}\n          formState={formState}\n          handleAddNewChip={handleAddNewChip}\n          handleEditChip={handleEditChip}\n          handleRemoveChip={handleRemoveChip}\n          handleShowElements={handleShowElements}\n          handleToEditMode={handleToEditMode}\n          isEditable={isEditable}\n          name={name}\n          ref={{ chipsCellRef, chipsWrapperRef, hiddenChipsCounterRef, hiddenChipsPopUpRef }}\n          setChipSizeIsRecalculated={setChipSizeIsRecalculated}\n          setChipsSizes={setChipsSizes}\n          setEditConfig={setEditConfig}\n          shortChips={shortChips}\n          showChips={showChips}\n          showHiddenChips={showHiddenChips}\n          validateFields={validateFields}\n          validationRules={validationRules}\n        />\n      </div>\n    </div>\n  )\n}\n\nFormChipCell.propTypes = {\n  chipOptions: CHIP_OPTIONS,\n  className: PropTypes.string,\n  delimiter: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  formState: PropTypes.object.isRequired,\n  initialValues: PropTypes.object.isRequired,\n  isEditable: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  onClick: PropTypes.func,\n  onExitEditModeCallback: PropTypes.func,\n  shortChips: PropTypes.bool,\n  validationRules: PropTypes.object,\n  validator: PropTypes.func,\n  visibleChipsMaxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n}\n\nFormChipCell = React.memo(FormChipCell)\n\nexport default FormChipCell\n"],"names":["FormChipCell","chipOptions","className","delimiter","formState","initialValues","isEditable","label","name","onClick","shortChips","validationRules","validator","onExitEditModeCallback","visibleChipsMaxLength","chipsClassName","classnames","chipSizeIsRecalculated","setChipSizeIsRecalculated","useState","chipsCellRef","chipsWrapperRef","handleShowElements","hiddenChipsCounterRef","hiddenChipsPopUpRef","setChipsSizes","setShowHiddenChips","showChips","showHiddenChips","visibleChipsCount","useChipCell","editConfig","setEditConfig","chips","useMemo","get","generateChipsList","checkChipsList","useCallback","currentChipsList","areArraysEqual","set","handleAddNewChip","event","fields","fieldsLength","_a","handleRemoveChip","chipIndex","isOutsideClick","lodash","_","index","handleEditChip","nameEvent","key","value","isChipNotEmpty","CLICK","TAB","prevState","lastChipSelected","TAB_SHIFT","firstChipIsSelected","handleToEditMode","keyName","pointerCoordinateX","pointerCoordinateY","isKeyClicked","isClickedInsideInputElement","inputElement","topPosition","leftPosition","rightPosition","bottomPosition","preState","validateFields","fieldsArray","errorData","uniquenessValidator","newValue","idx","isEmpty","chip","keyValidation","valueValidation","validateChip","uniquenessError","isNil","disabled","validateField","field","newRules","isValidField","checkPatternsValidity","rule","jsx","FormChipCellView","CHIP_OPTIONS","PropTypes","React","FormChipCell$1"],"mappings":"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"}

package/dist/hooks/useChipCell.hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChipCell.hook.d.ts","sourceRoot":"","sources":["../../src/lib/hooks/useChipCell.hook.js"],"names":[],"mappings":"AAyBO;;;;;;;;;;;EAuIN"}
+{"version":3,"file":"useChipCell.hook.d.ts","sourceRoot":"","sources":["../../src/lib/hooks/useChipCell.hook.js"],"names":[],"mappings":"AA6BO;;;;;;;;;;;EA4IN"}

package/dist/hooks/useChipCell.hook.mjs

@@ -1,9 +1,12 @@
-import { useState as h, useMemo as B, useRef as m, useCallback as p, useEffect as v, useLayoutEffect as H } from "react";
+import { useState as w, useMemo as S, useRef as g, useCallback as C, useEffect as v, useLayoutEffect as H } from "react";
 import { throttle as P } from "lodash";
-import { getTransitionEndEventName as N, isEveryObjectValueEmpty as V } from "../utils/common.util.mjs";
-import { getFirstScrollableParent as W } from "../utils/getFirstScrollableParent.util.mjs";
-const T = (s, b) => {
-  const [o, l] = h(!1), [c, S] = h({}), [R, z] = h(!1), [j, y] = h(8), d = B(() => N(), []), E = m(), O = m(), a = m(), n = m(), f = p(
+import { getScssVariableValue as I, getTransitionEndEventName as N, isEveryObjectValueEmpty as W } from "../utils/common.util.mjs";
+import { getFirstScrollableParent as x } from "../utils/getFirstScrollableParent.util.mjs";
+const A = (s, b) => {
+  const [o, l] = w(!1), [c, k] = w({}), [z, B] = w(!1), [j, y] = w(8), E = S(
+    () => parseInt(I("--chipBlockMarginRight")),
+    []
+  ), m = S(() => N(), []), L = g(), O = g(), a = g(), n = g(), f = C(
     (e) => {
       var u, i;
       (!s || s && b) && ((u = a.current) != null && u.contains(e.target) && !o ? l(!0) : l(!1)), e && ((i = a.current) != null && i.contains(e.target)) && e.stopPropagation();
@@ -11,48 +14,48 @@ const T = (s, b) => {
     [s, o, b]
   );
   v(() => (o && window.addEventListener("click", f, !0), () => window.removeEventListener("click", f, !0)), [o, f]);
-  const C = p(
+  const p = C(
     (e) => {
       e.target.parentElement !== (n == null ? void 0 : n.current) && l(!1);
     },
     [n]
   );
-  v(() => (o && window.addEventListener("scroll", C, !0), () => window.removeEventListener("scroll", C, !0)), [C, o]);
-  const w = p(() => {
+  v(() => (o && window.addEventListener("scroll", p, !0), () => window.removeEventListener("scroll", p, !0)), [p, o]);
+  const h = C(() => {
     var e, u;
     if (n != null && n.current) {
-      const r = W(a.current.offsetParent).getBoundingClientRect(), t = (e = a.current) == null ? void 0 : e.getBoundingClientRect();
+      const r = x(a.current.offsetParent).getBoundingClientRect(), t = (e = a.current) == null ? void 0 : e.getBoundingClientRect();
       (t.left < r.left || t.top < r.top || t.right > r.right || t.bottom > r.bottom || t.right > window.innerWidth || t.bottom > window.innerHeight) && l(!1);
     }
-    if (!s && !V(c)) {
-      const i = (u = E.current) == null ? void 0 : u.getBoundingClientRect().width;
+    if (!s && !W(c)) {
+      const i = (u = L.current) == null ? void 0 : u.getBoundingClientRect().width;
       let r = 0, t = 0;
-      const k = 65;
-      Object.values(c).every((g, L) => r + g > i || Object.values(c).length > 1 && r + g + k > i ? (t = L, !1) : (r += g, L === Object.values(c).length - 1 && (t = 8), !0)), y(t), z(!0);
+      const V = 65;
+      Object.values(c).every((d, R) => r + d > i || Object.values(c).length > 1 && r + d + E + V > i ? (t = R, !1) : (r += d, R === Object.values(c).length - 1 && (t = 8), !0)), y(t), B(!0);
     }
-  }, [c, s]);
+  }, [E, c, s]);
   return H(() => {
-    w();
-  }, [w]), v(() => {
-    const e = P(w, 500);
+    h();
+  }, [h]), v(() => {
+    const e = P(h, 500);
     if (!s)
-      return window.addEventListener("resize", e), window.addEventListener(d, e), () => {
-        window.removeEventListener("resize", e), window.removeEventListener(d, e);
+      return window.addEventListener("resize", e), window.addEventListener(m, e), () => {
+        window.removeEventListener("resize", e), window.removeEventListener(m, e);
       };
-  }, [w, s, d]), {
-    chipsCellRef: E,
+  }, [h, s, m]), {
+    chipsCellRef: L,
     chipsWrapperRef: O,
     handleShowElements: f,
     hiddenChipsCounterRef: a,
     hiddenChipsPopUpRef: n,
-    setChipsSizes: S,
+    setChipsSizes: k,
     setShowHiddenChips: l,
-    showChips: R,
+    showChips: z,
     showHiddenChips: o,
     visibleChipsCount: j
   };
 };
 export {
-  T as useChipCell
+  A as useChipCell
 };
 //# sourceMappingURL=useChipCell.hook.mjs.map

package/dist/hooks/useChipCell.hook.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useChipCell.hook.mjs","sources":["../../src/lib/hooks/useChipCell.hook.js"],"sourcesContent":["/*\nCopyright 2019 Iguazio Systems Ltd.\n\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\n\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport { useCallback, useEffect, useMemo, useRef, useState, useLayoutEffect } from 'react'\nimport { throttle } from 'lodash'\n\nimport { getTransitionEndEventName, isEveryObjectValueEmpty } from '../utils/common.util'\nimport { getFirstScrollableParent } from '../utils/getFirstScrollableParent.util'\n\nexport const useChipCell = (isEditMode, visibleChipsMaxLength) => {\n  const [showHiddenChips, setShowHiddenChips] = useState(false)\n  const [chipsSizes, setChipsSizes] = useState({})\n  const [showChips, setShowChips] = useState(false)\n  const [visibleChipsCount, setVisibleChipsCount] = useState(8)\n\n  const transitionEndEventName = useMemo(() => getTransitionEndEventName(), [])\n\n  const chipsCellRef = useRef()\n  const chipsWrapperRef = useRef()\n  const hiddenChipsCounterRef = useRef()\n  const hiddenChipsPopUpRef = useRef()\n\n  const handleShowElements = useCallback(\n    event => {\n      if (!isEditMode || (isEditMode && visibleChipsMaxLength)) {\n        if (hiddenChipsCounterRef.current?.contains(event.target) && !showHiddenChips) {\n          setShowHiddenChips(true)\n        } else {\n          setShowHiddenChips(false)\n        }\n      }\n\n      event && hiddenChipsCounterRef.current?.contains(event.target) && event.stopPropagation()\n    },\n    [isEditMode, showHiddenChips, visibleChipsMaxLength]\n  )\n\n  useEffect(() => {\n    if (showHiddenChips) {\n      window.addEventListener('click', handleShowElements, true)\n    }\n\n    return () => window.removeEventListener('click', handleShowElements, true)\n  }, [showHiddenChips, handleShowElements])\n\n  const handleScroll = useCallback(\n    event => {\n      if (event.target.parentElement !== hiddenChipsPopUpRef?.current) {\n        setShowHiddenChips(false)\n      }\n    },\n    [hiddenChipsPopUpRef]\n  )\n\n  useEffect(() => {\n    if (showHiddenChips) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n\n    return () => window.removeEventListener('scroll', handleScroll, true)\n  }, [handleScroll, showHiddenChips])\n\n  const resizeChipCell = useCallback(() => {\n    if (hiddenChipsPopUpRef?.current) {\n      const scrollableParent = getFirstScrollableParent(hiddenChipsCounterRef.current.offsetParent)\n      const scrollableParentRect = scrollableParent.getBoundingClientRect()\n      const hiddenChipsCounterRect = hiddenChipsCounterRef.current?.getBoundingClientRect()\n\n      // Check if the hiddenChipsCounterRect is outside the boundaries of the scrollableParentRect or the window\n      if (\n        hiddenChipsCounterRect.left < scrollableParentRect.left ||\n        hiddenChipsCounterRect.top < scrollableParentRect.top ||\n        hiddenChipsCounterRect.right > scrollableParentRect.right ||\n        hiddenChipsCounterRect.bottom > scrollableParentRect.bottom ||\n        hiddenChipsCounterRect.right > window.innerWidth ||\n        hiddenChipsCounterRect.bottom > window.innerHeight\n      ) {\n        setShowHiddenChips(false)\n      }\n    }\n\n    if (!isEditMode && !isEveryObjectValueEmpty(chipsSizes)) {\n      const parentSize = chipsCellRef.current?.getBoundingClientRect().width\n\n      let maxLength = 0\n      let chipIndex = 0\n      const padding = 65\n\n      Object.values(chipsSizes).every((chipSize, index) => {\n        // Check if adding chipSize to maxLength exceeds parentSize\n        // or if adding chipSize and padding exceeds parentSize when there are multiple chips\n        if (\n          maxLength + chipSize > parentSize ||\n          (Object.values(chipsSizes).length > 1 && maxLength + chipSize + padding > parentSize)\n        ) {\n          chipIndex = index\n\n          return false\n        } else {\n          maxLength += chipSize\n\n          if (index === Object.values(chipsSizes).length - 1) {\n            chipIndex = 8\n          }\n\n          return true\n        }\n      })\n\n      setVisibleChipsCount(chipIndex)\n      setShowChips(true)\n    }\n  }, [chipsSizes, isEditMode])\n\n  useLayoutEffect(() => {\n    resizeChipCell()\n  }, [resizeChipCell])\n\n  useEffect(() => {\n    const resizeChipCellDebounced = throttle(resizeChipCell, 500)\n\n    if (!isEditMode) {\n      window.addEventListener('resize', resizeChipCellDebounced)\n      window.addEventListener(transitionEndEventName, resizeChipCellDebounced)\n\n      return () => {\n        window.removeEventListener('resize', resizeChipCellDebounced)\n        window.removeEventListener(transitionEndEventName, resizeChipCellDebounced)\n      }\n    }\n  }, [resizeChipCell, isEditMode, transitionEndEventName])\n\n  return {\n    chipsCellRef,\n    chipsWrapperRef,\n    handleShowElements,\n    hiddenChipsCounterRef,\n    hiddenChipsPopUpRef,\n    setChipsSizes,\n    setShowHiddenChips,\n    showChips,\n    showHiddenChips,\n    visibleChipsCount\n  }\n}\n"],"names":["useChipCell","isEditMode","visibleChipsMaxLength","showHiddenChips","setShowHiddenChips","useState","chipsSizes","setChipsSizes","showChips","setShowChips","visibleChipsCount","setVisibleChipsCount","transitionEndEventName","useMemo","getTransitionEndEventName","chipsCellRef","useRef","chipsWrapperRef","hiddenChipsCounterRef","hiddenChipsPopUpRef","handleShowElements","useCallback","event","_a","_b","useEffect","handleScroll","resizeChipCell","scrollableParentRect","getFirstScrollableParent","hiddenChipsCounterRect","isEveryObjectValueEmpty","parentSize","maxLength","chipIndex","padding","chipSize","index","useLayoutEffect","resizeChipCellDebounced","throttle"],"mappings":"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"}
+{"version":3,"file":"useChipCell.hook.mjs","sources":["../../src/lib/hooks/useChipCell.hook.js"],"sourcesContent":["/*\nCopyright 2019 Iguazio Systems Ltd.\n\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\n\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport { useCallback, useEffect, useMemo, useRef, useState, useLayoutEffect } from 'react'\nimport { throttle } from 'lodash'\n\nimport {\n  getScssVariableValue,\n  getTransitionEndEventName,\n  isEveryObjectValueEmpty\n} from '../utils/common.util'\nimport { getFirstScrollableParent } from '../utils/getFirstScrollableParent.util'\n\nexport const useChipCell = (isEditMode, visibleChipsMaxLength) => {\n  const [showHiddenChips, setShowHiddenChips] = useState(false)\n  const [chipsSizes, setChipsSizes] = useState({})\n  const [showChips, setShowChips] = useState(false)\n  const [visibleChipsCount, setVisibleChipsCount] = useState(8)\n\n  const chipBlockMarginRight = useMemo(\n    () => parseInt(getScssVariableValue('--chipBlockMarginRight')),\n    []\n  )\n  const transitionEndEventName = useMemo(() => getTransitionEndEventName(), [])\n\n  const chipsCellRef = useRef()\n  const chipsWrapperRef = useRef()\n  const hiddenChipsCounterRef = useRef()\n  const hiddenChipsPopUpRef = useRef()\n\n  const handleShowElements = useCallback(\n    event => {\n      if (!isEditMode || (isEditMode && visibleChipsMaxLength)) {\n        if (hiddenChipsCounterRef.current?.contains(event.target) && !showHiddenChips) {\n          setShowHiddenChips(true)\n        } else {\n          setShowHiddenChips(false)\n        }\n      }\n\n      event && hiddenChipsCounterRef.current?.contains(event.target) && event.stopPropagation()\n    },\n    [isEditMode, showHiddenChips, visibleChipsMaxLength]\n  )\n\n  useEffect(() => {\n    if (showHiddenChips) {\n      window.addEventListener('click', handleShowElements, true)\n    }\n\n    return () => window.removeEventListener('click', handleShowElements, true)\n  }, [showHiddenChips, handleShowElements])\n\n  const handleScroll = useCallback(\n    event => {\n      if (event.target.parentElement !== hiddenChipsPopUpRef?.current) {\n        setShowHiddenChips(false)\n      }\n    },\n    [hiddenChipsPopUpRef]\n  )\n\n  useEffect(() => {\n    if (showHiddenChips) {\n      window.addEventListener('scroll', handleScroll, true)\n    }\n\n    return () => window.removeEventListener('scroll', handleScroll, true)\n  }, [handleScroll, showHiddenChips])\n\n  const resizeChipCell = useCallback(() => {\n    if (hiddenChipsPopUpRef?.current) {\n      const scrollableParent = getFirstScrollableParent(hiddenChipsCounterRef.current.offsetParent)\n      const scrollableParentRect = scrollableParent.getBoundingClientRect()\n      const hiddenChipsCounterRect = hiddenChipsCounterRef.current?.getBoundingClientRect()\n\n      // Check if the hiddenChipsCounterRect is outside the boundaries of the scrollableParentRect or the window\n      if (\n        hiddenChipsCounterRect.left < scrollableParentRect.left ||\n        hiddenChipsCounterRect.top < scrollableParentRect.top ||\n        hiddenChipsCounterRect.right > scrollableParentRect.right ||\n        hiddenChipsCounterRect.bottom > scrollableParentRect.bottom ||\n        hiddenChipsCounterRect.right > window.innerWidth ||\n        hiddenChipsCounterRect.bottom > window.innerHeight\n      ) {\n        setShowHiddenChips(false)\n      }\n    }\n\n    if (!isEditMode && !isEveryObjectValueEmpty(chipsSizes)) {\n      const parentSize = chipsCellRef.current?.getBoundingClientRect().width\n\n      let maxLength = 0\n      let chipIndex = 0\n      const padding = 65\n\n      Object.values(chipsSizes).every((chipSize, index) => {\n        // Check if adding chipSize to maxLength exceeds parentSize\n        // or if adding chipSize and padding exceeds parentSize when there are multiple chips\n        if (\n          maxLength + chipSize > parentSize ||\n          (Object.values(chipsSizes).length > 1 &&\n            maxLength + chipSize + chipBlockMarginRight + padding > parentSize)\n        ) {\n          chipIndex = index\n\n          return false\n        } else {\n          maxLength += chipSize\n\n          if (index === Object.values(chipsSizes).length - 1) {\n            chipIndex = 8\n          }\n\n          return true\n        }\n      })\n\n      setVisibleChipsCount(chipIndex)\n      setShowChips(true)\n    }\n  }, [chipBlockMarginRight, chipsSizes, isEditMode])\n\n  useLayoutEffect(() => {\n    resizeChipCell()\n  }, [resizeChipCell])\n\n  useEffect(() => {\n    const resizeChipCellDebounced = throttle(resizeChipCell, 500)\n\n    if (!isEditMode) {\n      window.addEventListener('resize', resizeChipCellDebounced)\n      window.addEventListener(transitionEndEventName, resizeChipCellDebounced)\n\n      return () => {\n        window.removeEventListener('resize', resizeChipCellDebounced)\n        window.removeEventListener(transitionEndEventName, resizeChipCellDebounced)\n      }\n    }\n  }, [resizeChipCell, isEditMode, transitionEndEventName])\n\n  return {\n    chipsCellRef,\n    chipsWrapperRef,\n    handleShowElements,\n    hiddenChipsCounterRef,\n    hiddenChipsPopUpRef,\n    setChipsSizes,\n    setShowHiddenChips,\n    showChips,\n    showHiddenChips,\n    visibleChipsCount\n  }\n}\n"],"names":["useChipCell","isEditMode","visibleChipsMaxLength","showHiddenChips","setShowHiddenChips","useState","chipsSizes","setChipsSizes","showChips","setShowChips","visibleChipsCount","setVisibleChipsCount","chipBlockMarginRight","useMemo","getScssVariableValue","transitionEndEventName","getTransitionEndEventName","chipsCellRef","useRef","chipsWrapperRef","hiddenChipsCounterRef","hiddenChipsPopUpRef","handleShowElements","useCallback","event","_a","_b","useEffect","handleScroll","resizeChipCell","scrollableParentRect","getFirstScrollableParent","hiddenChipsCounterRect","isEveryObjectValueEmpty","parentSize","maxLength","chipIndex","padding","chipSize","index","useLayoutEffect","resizeChipCellDebounced","throttle"],"mappings":";;;;AA6BY,MAACA,IAAc,CAACC,GAAYC,MAA0B;AAChE,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAK,GACtD,CAACC,GAAYC,CAAa,IAAIF,EAAS,CAAE,CAAA,GACzC,CAACG,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAC1C,CAACK,GAAmBC,CAAoB,IAAIN,EAAS,CAAC,GAEtDO,IAAuBC;AAAA,IAC3B,MAAM,SAASC,EAAqB,wBAAwB,CAAC;AAAA,IAC7D,CAAA;AAAA,EACJ,GACQC,IAAyBF,EAAQ,MAAMG,EAA2B,GAAE,CAAE,CAAA,GAEtEC,IAAeC,EAAM,GACrBC,IAAkBD,EAAM,GACxBE,IAAwBF,EAAM,GAC9BG,IAAsBH,EAAM,GAE5BI,IAAqBC;AAAA,IACzB,CAAAC,MAAS;;AACP,OAAI,CAACvB,KAAeA,KAAcC,QAC5BuB,IAAAL,EAAsB,YAAtB,QAAAK,EAA+B,SAASD,EAAM,WAAW,CAACrB,IAC5DC,EAAmB,EAAI,IAEvBA,EAAmB,EAAK,IAI5BoB,OAASE,IAAAN,EAAsB,YAAtB,QAAAM,EAA+B,SAASF,EAAM,YAAWA,EAAM,gBAAe;AAAA,IACxF;AAAA,IACD,CAACvB,GAAYE,GAAiBD,CAAqB;AAAA,EACvD;AAEE,EAAAyB,EAAU,OACJxB,KACF,OAAO,iBAAiB,SAASmB,GAAoB,EAAI,GAGpD,MAAM,OAAO,oBAAoB,SAASA,GAAoB,EAAI,IACxE,CAACnB,GAAiBmB,CAAkB,CAAC;AAExC,QAAMM,IAAeL;AAAA,IACnB,CAAAC,MAAS;AACP,MAAIA,EAAM,OAAO,mBAAkBH,KAAA,gBAAAA,EAAqB,YACtDjB,EAAmB,EAAK;AAAA,IAE3B;AAAA,IACD,CAACiB,CAAmB;AAAA,EACxB;AAEE,EAAAM,EAAU,OACJxB,KACF,OAAO,iBAAiB,UAAUyB,GAAc,EAAI,GAG/C,MAAM,OAAO,oBAAoB,UAAUA,GAAc,EAAI,IACnE,CAACA,GAAczB,CAAe,CAAC;AAElC,QAAM0B,IAAiBN,EAAY,MAAM;;AACvC,QAAIF,KAAA,QAAAA,EAAqB,SAAS;AAEhC,YAAMS,IADmBC,EAAyBX,EAAsB,QAAQ,YAAY,EAC9C,sBAAqB,GAC7DY,KAAyBP,IAAAL,EAAsB,YAAtB,gBAAAK,EAA+B;AAG9D,OACEO,EAAuB,OAAOF,EAAqB,QACnDE,EAAuB,MAAMF,EAAqB,OAClDE,EAAuB,QAAQF,EAAqB,SACpDE,EAAuB,SAASF,EAAqB,UACrDE,EAAuB,QAAQ,OAAO,cACtCA,EAAuB,SAAS,OAAO,gBAEvC5B,EAAmB,EAAK;AAAA,IAEhC;AAEI,QAAI,CAACH,KAAc,CAACgC,EAAwB3B,CAAU,GAAG;AACvD,YAAM4B,KAAaR,IAAAT,EAAa,YAAb,gBAAAS,EAAsB,wBAAwB;AAEjE,UAAIS,IAAY,GACZC,IAAY;AAChB,YAAMC,IAAU;AAEhB,aAAO,OAAO/B,CAAU,EAAE,MAAM,CAACgC,GAAUC,MAIvCJ,IAAYG,IAAWJ,KACtB,OAAO,OAAO5B,CAAU,EAAE,SAAS,KAClC6B,IAAYG,IAAW1B,IAAuByB,IAAUH,KAE1DE,IAAYG,GAEL,OAEPJ,KAAaG,GAETC,MAAU,OAAO,OAAOjC,CAAU,EAAE,SAAS,MAC/C8B,IAAY,IAGP,GAEV,GAEDzB,EAAqByB,CAAS,GAC9B3B,EAAa,EAAI;AAAA,IACvB;AAAA,EACA,GAAK,CAACG,GAAsBN,GAAYL,CAAU,CAAC;AAEjD,SAAAuC,EAAgB,MAAM;AACpB,IAAAX,EAAc;AAAA,EACf,GAAE,CAACA,CAAc,CAAC,GAEnBF,EAAU,MAAM;AACd,UAAMc,IAA0BC,EAASb,GAAgB,GAAG;AAE5D,QAAI,CAAC5B;AACH,oBAAO,iBAAiB,UAAUwC,CAAuB,GACzD,OAAO,iBAAiB1B,GAAwB0B,CAAuB,GAEhE,MAAM;AACX,eAAO,oBAAoB,UAAUA,CAAuB,GAC5D,OAAO,oBAAoB1B,GAAwB0B,CAAuB;AAAA,MAClF;AAAA,EAEA,GAAK,CAACZ,GAAgB5B,GAAYc,CAAsB,CAAC,GAEhD;AAAA,IACL,cAAAE;AAAA,IACA,iBAAAE;AAAA,IACA,oBAAAG;AAAA,IACA,uBAAAF;AAAA,IACA,qBAAAC;AAAA,IACA,eAAAd;AAAA,IACA,oBAAAH;AAAA,IACA,WAAAI;AAAA,IACA,iBAAAL;AAAA,IACA,mBAAAO;AAAA,EACJ;AACA;"}

package/dist/images/notification-badge.svg

@@ -0,0 +1,5 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7.33334" cy="7.00007" r="6.5" fill="#E54158" stroke="white"/>
+<path d="M7.8745 10.7701C7.702 10.9234 7.48825 11.0001 7.23325 11.0001C6.97825 11.0001 6.7645 10.9234 6.592 10.7701C6.4195 10.6168 6.33325 10.4268 6.33325 10.2001C6.33325 9.97342 6.4195 9.78342 6.592 9.63009C6.7645 9.47676 6.97825 9.40009 7.23325 9.40009C7.48825 9.40009 7.702 9.47676 7.8745 9.63009C8.047 9.78342 8.13325 9.97342 8.13325 10.2001C8.13325 10.4268 8.047 10.6168 7.8745 10.7701Z" fill="white"/>
+<path d="M8.13325 7.80009H6.33325V3.00009H8.13325V7.80009Z" fill="white"/>
+</svg>

package/dist/index.css

@@ -1 +1 @@
-.tooltip-template{padding:6px 8px;word-break:break-word}.tooltip__text{color:#fff;background-color:#4b4760;border-radius:4px}.tooltip__warning{color:#ea336a;background-color:#fff;box-shadow:0 5px 11px #0000002e}.btn{display:flex;align-items:center;justify-content:center;min-width:90px;height:40px;padding:0 16px;color:#fff;font-weight:500;font-size:.875rem;font-style:normal;border:1px solid transparent;border-radius:4px}.btn-dense{height:36px}.btn-normal{height:40px}.btn-medium{height:44px}.btn-chunky{height:48px}.btn svg>*{fill:currentColor}.btn:focus{border-color:#0006}.btn:active{border-color:#0006}.btn:disabled{color:#adabb0;background:#fff;cursor:not-allowed}.btn:disabled svg>*{fill:#dadada}.btn :not(:last-child){margin-right:10px}.btn :last-child{margin:0}.btn-secondary{background:#0fddaf}.btn-secondary:hover:not(:disabled){background:#1fcc9e}.btn-secondary:active:not(:disabled){background:#1db284}.btn-secondary:disabled{border:1px solid #0fddaf}.btn-tertiary{color:#4b4760;background:#fff;border:1px solid rgba(0,0,0,.2)}.btn-tertiary svg>*{fill:#4b4760}.btn-tertiary:hover:not(:disabled){background:#f8f7f8}.btn-tertiary:active:not(:disabled){background:#e7e7e7}.btn-tertiary:disabled{border:1px solid rgba(0,0,0,.2)}.btn-primary{color:#fff;background:#869cff}.btn-primary:hover:not(:disabled){background:#6279e7}.btn-primary:active:not(:disabled){background:#5468c7}.btn-primary:disabled{border:1px solid #869cff}.btn-danger{color:#fff;background:#ea336a}.btn-danger:hover:not(:disabled){background:#d22a5d}.btn-danger:active:not(:disabled){background:#bc2553}.btn-danger:disabled{border:1px solid #ea336a}.btn-label{color:#4b4760;background:transparent;border:0}.btn-label svg>*{fill:#4b4760}.btn-label:focus:not(:disabled){border-color:transparent}.btn-label:hover:not(:disabled){color:#7f7989}.btn-label:active:not(:disabled){color:#000;border-color:transparent}.btn-label:disabled{border-color:transparent}.round-icon-cp{position:relative;display:flex;align-items:center;margin:0 .2rem}.round-icon-cp__circle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:4px}.round-icon-cp__circle>*{position:relative;z-index:2;display:inline-flex;margin:0!important}.round-icon-cp__circle:before{position:absolute;right:0;left:0;z-index:1;width:inherit;height:inherit;background-color:#483f561f;border-radius:50%;opacity:0;transition:opacity .3s ease-in-out;content:""}.round-icon-cp__circle:hover:before,.round-icon-cp__circle-active:before{opacity:1}.round-icon-cp__circle-disabled path{fill:#adabb0}.round-icon-cp__circle-disabled:hover:before{opacity:0}.pop-up-dialog{position:relative;width:477px;max-height:90vh;padding:20px;overflow-y:auto;background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0003}.pop-up-dialog__buttons_wrapper{display:flex}.pop-up-dialog__overlay{position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#333333bf;z-index:9}.pop-up-dialog__overlay.custom-position{width:auto;height:auto;background:unset}.pop-up-dialog__header{display:flex;align-items:baseline;justify-content:space-between;min-height:30px;margin-bottom:15px}.pop-up-dialog__header-text{width:100%;color:#4b4760;font-size:24px;line-height:28px;word-break:break-word}.pop-up-dialog__header-close{width:14px;height:14px;margin:5px 0 5px auto;cursor:pointer}.pop-up-dialog__footer-container{display:flex;justify-content:flex-end;margin-top:20px}.pop-up-dialog__btn_cancel{margin:0 10px}.pop-up-dialog__btn_close{position:absolute;top:10px;right:10px}.pop-up-dialog__form-input{width:100%}.confirm-dialog{color:#4b4760}.confirm-dialog__message{font-size:15px;line-height:24px}.confirm-dialog__message-only{font-size:22px}.confirm-dialog__btn-container{display:flex;justify-content:flex-end;margin-top:20px}.confirm-dialog__body{margin:20px 0}.tooltip{position:fixed;font-weight:400;font-size:15px;line-height:1.4;display:flex;max-width:400px;z-index:9}.actions-menu__icon{display:none;align-items:center;justify-content:center;width:25px;height:25px;margin-right:5px}.actions-menu__icon svg path:first-child{fill:#7f7989}.actions-menu__icon_visible{display:flex}.actions-menu__option{padding:10px;color:#4b4760;cursor:pointer}.actions-menu__option:hover{background-color:#f8f7f8}.actions-menu__option_danger{color:#ea336a}.actions-menu__option_danger svg path:first-child{fill:#ea336a}.actions-menu__option_disabled{color:#adabb0;cursor:not-allowed}.actions-menu__option_disabled .actions-menu__icon svg path:first-child{fill:#0003}.actions-menu__option>*{display:flex;flex:1;align-items:center;justify-content:flex-start;width:100%}.actions-menu{position:relative}.actions-menu__container{position:relative;display:none}.actions-menu__container_extended{position:absolute;right:0;display:none;align-items:center;justify-content:center;background-color:#f5f7ff;height:100%}.actions-menu__container_extended:before{content:"";width:30px;height:100%;position:absolute;display:block;left:-30px;background:linear-gradient(90deg,#fff0,#f5f7ff)}.actions-menu__container_extended .actions-menu{padding:0 5px 0 0}.actions-menu__container-active{display:flex}.actions-menu__main-actions-wrapper{display:flex;align-items:center;justify-content:center}.actions-menu__body{min-width:150px;max-width:250px}.actions-menu__body .pop-up-dialog{width:100%;padding:0}.actions-menu__list{list-style-type:none;margin:0;padding:0}.options-menu__body{width:100%;max-height:250px;margin:0;padding:0;overflow-y:auto;color:#483f56de;font-size:1rem;list-style-type:none;background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:4px;box-shadow:0 2px 10px #0003}.options-menu .pop-up-dialog{width:100%;padding:0}.options-menu-transition-enter{opacity:0}.options-menu-transition-enter-active{opacity:1;transition:opacity .3s ease-in-out}.options-menu-transition-exit{opacity:1}.options-menu-transition-exit-active{opacity:0;transition:opacity .3s ease-in-out}.validation-option{display:flex;align-items:flex-start;margin:.6rem 0;padding:0 1rem;font-size:.875rem}.validation-option__icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:.5rem}.validation-option__icon_valid{width:14px;height:15px}.validation-option__icon_valid path{fill:#0fddaf}.validation-option__icon_invalid{width:12px;height:12px}.validation-option__icon_invalid path{fill:#ea336a}.edit-chip-container{display:inline-flex;max-width:100%;margin:2px 8px 2px 0;padding:0 8px;font-size:14px;line-height:22px}.edit-chip-container input.item_edited::placeholder{color:#adabb0}.edit-chip-container input::placeholder{color:#4b4760}.edit-chip__icon-close{display:flex;align-items:center;justify-content:center}.edit-chip__icon-close svg{transform:scale(.7)}.chip__label_invalid{color:#ea336a}.chip .item-icon-close{display:flex;align-items:center;justify-content:center;margin-left:5px;padding:0}.chip .item-icon-close svg{transform:scale(.7)}.error{display:flex;justify-content:space-between;padding:10px 14px;color:#ea336a;background-color:#ea336a1a;border:1px solid #ea336a}.error__data{display:flex;align-items:center}.error__message{margin-right:10px;word-break:break-word}.error__icon{width:22px;height:22px;margin-right:10px;padding:5px;background-color:#eb5757;border-radius:50%}.loader-wrapper{position:fixed;top:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#00000029}.loader-wrapper .loader{display:flex}.loader-wrapper .loader:after{display:block;width:64px;height:64px;border:6px solid #6279e7;border-color:#6279e7 transparent #6279e7 transparent;border-radius:50%;animation:rotate 1.5s linear infinite;content:" "}.loader-wrapper.section-loader{position:relative;z-index:2;background-color:transparent}.loader-wrapper.small-loader .loader:after{width:20px;height:20px;border-width:2px}.loader-wrapper.secondary-loader .loader:after{border-color:#adabb0 transparent #adabb0 transparent}@keyframes rotate{to{transform:rotate(360deg)}}.tip-container{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--arrow-length)}.tip{position:fixed;display:block;padding:10px;color:#fff;white-space:pre-line;background:#4b4760;border-radius:4px;z-index:9}.tip-wrapper{display:inline-flex;align-items:center}.tip_top:after{bottom:calc(var(--tipArrowLength) * -.5)}.tip_bottom:after{top:calc(var(--tipArrowLength) * -.5)}.tip_left:after{right:calc(var(--tipArrowOffset))}.tip_right:after{left:calc(var(--tipArrowOffset))}.tip_small{min-width:100px;max-width:250px}.tip_big{min-width:250px;max-width:400px}.tip:after{position:absolute;width:var(--tipArrowLength);height:var(--tipArrowLength);background:#4b4760;transform:rotate(45deg);content:""}.fade-enter{opacity:0}.fade-enter-active{opacity:1;transition:opacity .2s}.fade-exit{opacity:1}.fade-exit-active{opacity:0;transition:opacity .2s}.btn-load{display:flex;align-items:center;justify-content:center;min-width:90px;height:40px;padding:0 16px;color:#4b4760;font-weight:500;font-size:14px;font-style:normal;line-height:16px;background:#fff;border:1px solid rgba(0,0,0,.2);border-radius:4px}.btn-load svg path{fill:#fff}.btn-load:active{background:#eee}.btn-load:hover{background:#f8f7f8}.btn-load:disabled{color:#adabb0;background:#fff;cursor:not-allowed}.btn-load:disabled svg path{fill:#dadada}.btn-load :first-child{margin-right:5px}.btn-load-primary{border-bottom:4px solid #0fddaf}.btn-load-primary:disabled{border-bottom:4px solid #c5f7ec}.btn-load-secondary{border-bottom:4px solid #869cff}.btn-load-secondary:disabled{border-bottom:4px solid #e2e7ff}.btn-load-tertiary{border-bottom:4px solid #adabb0}.btn-load-tertiary svg path{fill:#4b4760}.btn-load-tertiary:disabled{border-bottom:4px solid #ebebec}.chips-wrapper{display:flex;align-items:center;max-width:100%}.form-field-checkbox{display:inline-flex;align-items:center;justify-content:flex-start;color:#4b4760}.form-field-checkbox_readonly input{pointer-events:none;opacity:.5}.form-field-checkbox_readonly input~label,.form-field-checkbox_readonly input~.label{pointer-events:none;opacity:.5}.form-field-checkbox input[type=checkbox]{flex:0 0 18px;width:18px;height:18px;border-radius:4px;transition:background .2s ease-in-out;position:relative;background:#fff;border:1px solid #869cff;color:#869cff;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;outline:0;cursor:pointer}.form-field-checkbox input[type=checkbox]:checked:hover{color:#6279e7}.form-field-checkbox input[type=checkbox]:checked:hover:disabled{color:#adabb0;border-color:currentColor}.form-field-checkbox input[type=checkbox]:disabled{color:#adabb0;border-color:currentColor;cursor:not-allowed;pointer-events:none}.form-field-checkbox input[type=checkbox]:disabled:hover{color:#adabb0;border-color:currentColor}.form-field-checkbox input[type=checkbox]:disabled~label,.form-field-checkbox input[type=checkbox]:disabled~.label{color:#adabb0;cursor:not-allowed}.form-field-checkbox input[type=checkbox]:not(:disabled):focus,.form-field-checkbox input[type=checkbox]:not(:disabled):active{animation:pulse-animation .5s ease-out}.form-field-checkbox input[type=checkbox]:not(:disabled):hover{color:#6279e7;border-color:currentColor}.form-field-checkbox input[type=checkbox]~label,.form-field-checkbox input[type=checkbox]~.label{display:flex;flex:1;align-items:center;position:relative;cursor:pointer;font-size:1em;padding:0 0 0 .45em;height:inherit;-webkit-user-select:none;user-select:none;white-space:nowrap}.form-field-checkbox input[type=checkbox]:before{content:"";display:block;position:absolute;top:1px;left:5px;width:6px;height:11px;border-style:solid;border-color:#fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.form-field-checkbox input[type=checkbox]:checked{background:currentColor}.form-field-checkbox input[type=checkbox]:checked:hover{background:currentColor}.form-field-checkbox input[type=checkbox]:checked:hover:disabled{background:currentColor}.form-field-checkbox input[type=checkbox]:disabled:hover{background:#fff}.form-field-checkbox input[type=checkbox]:not(:disabled):checked~label.highlighted{color:#fff;background-color:#869cff}.form-field-checkbox input[type=checkbox]:not(:disabled):checked:hover~label.highlighted{background-color:#6279e7}.form-field-checkbox input[type=checkbox]~label.highlighted{background-color:#e9e8eb;font-size:12px;font-weight:700;margin-left:10px;padding:4px 8px;border-radius:4px}.form-field-checkbox input[type=checkbox]:not(:disabled):hover~label.highlighted{background-color:#dfe2e5}.edit-chip-container{display:inline-flex;max-width:100%;margin:2px 0;padding:0 8px;font-size:14px;line-height:22px}.edit-chip-container input{display:flex;padding:0;font-size:14px;background-color:transparent;border:none}.edit-chip-container input[disabled]{pointer-events:none}.edit-chip-container input.item_edited_invalid{color:#ea336a}.edit-chip-container input.input-label-key::placeholder,.edit-chip-container input.input-label-value::placeholder{color:#7f7989}.edit-chip-container-background_none{background-color:transparent}.edit-chip-container-background_green{background-color:#13bbb13d}.edit-chip-container-background_grey{background-color:#483f561f}.edit-chip-container-background_orange{background-color:#ffd0775c}.edit-chip-container-background_purple{background-color:#a44cc529}.edit-chip-container-background_amethyst{background-color:#a44cc5}.edit-chip-container-background_sorbus{background-color:#f98b0a}.edit-chip-container-background_java{background-color:#13bbb1}.edit-chip-container-border_transparent{border:1px solid transparent}.edit-chip-container-border_green{border:1px solid #49af53}.edit-chip-container-border_grey{border:1px solid rgba(0,0,0,.2)}.edit-chip-container-border_orange{border:1px solid #ea7f54}.edit-chip-container-border_purple{border:1px solid #a44cc5}.edit-chip-container-border_primary{border-radius:4px}.edit-chip-container-border_secondary{border-radius:20px}.edit-chip-container-density_dense{height:26px}.edit-chip-container-density_normal{height:32px;padding:8px 15px}.edit-chip-container-density_medium{height:34px;padding:8px 15px;font-size:15px}.edit-chip-container-font_primary,.edit-chip-container-font_primary .input-label-key,.edit-chip-container-font_primary .input-label-value,.edit-chip-container-font_primary .edit-label-separator{color:#4b4760}.edit-chip-container-font_primary .item-icon-close svg path{fill:#4b4760}.edit-chip-container-font_green,.edit-chip-container-font_green .input-label-key,.edit-chip-container-font_green .input-label-value,.edit-chip-container-font_green .edit-label-separator{color:#49af53}.edit-chip-container-font_green .item-icon-close svg path{fill:#49af53}.edit-chip-container-font_white,.edit-chip-container-font_white .input-label-key,.edit-chip-container-font_white .input-label-value,.edit-chip-container-font_white .edit-label-separator{color:#fff}.edit-chip-container-font_white .item-icon-close svg path{fill:#fff}.edit-chip-container-font_orange,.edit-chip-container-font_orange .input-label-key,.edit-chip-container-font_orange .input-label-value,.edit-chip-container-font_orange .edit-label-separator{color:#f98b0a}.edit-chip-container-font_orange .item-icon-close svg path{fill:#f98b0a}.edit-chip-container-font_purple,.edit-chip-container-font_purple .input-label-key,.edit-chip-container-font_purple .input-label-value,.edit-chip-container-font_purple .edit-label-separator{color:#a44cc5}.edit-chip-container-font_purple .item-icon-close svg path{fill:#a44cc5}.edit-chip-container-font_disabled,.edit-chip-container-font_disabled .input-label-key,.edit-chip-container-font_disabled .input-label-value,.edit-chip-container-font_disabled .edit-label-separator{color:#adabb0}.edit-chip-container-font_disabled .item-icon-close svg path{fill:#adabb0}.edit-chip-container .item-icon-close{display:flex;align-items:center;justify-content:center}.edit-chip-container .item-icon-close_hidden{display:none}.edit-chip-container .item-icon-close_invisible{visibility:hidden}.edit-chip-container .item-icon-close svg{transform:scale(.7)}.edit-chip-container_disabled{cursor:not-allowed}.edit-chip-separator{margin-right:5px}.chip{position:relative;margin:2px 8px 2px 0;padding:4px 8px;font-size:14px;line-height:16px;visibility:hidden;cursor:default}.chip_visible{visibility:visible}.chip_invisible{visibility:hidden;height:30px}.chip__content{display:flex;align-items:center}.chip__content-item{flex:1 1 50%;max-width:fit-content;align-self:flex-start}.chip__delimiter{display:flex;align-items:center;margin:0 4px}.chip__value{min-width:10px}.chip.editable{cursor:pointer}.chip.chips_button{padding:8px 7px}.chip-background_none{background-color:transparent}.chip-background_green{background-color:#13bbb13d}.chip-background_grey{background-color:#483f561f}.chip-background_orange{background-color:#ffd0775c}.chip-background_purple{background-color:#a44cc529}.chip-background_amethyst{background-color:#a44cc5}.chip-background_sorbus{background-color:#f98b0a}.chip-background_java{background-color:#13bbb1}.chip-border_transparent{border:1px solid transparent}.chip-border_green{border:1px solid #49af53}.chip-border_grey{border:1px solid rgba(0,0,0,.2)}.chip-border_orange{border:1px solid #ea7f54}.chip-border_purple{border:1px solid #a44cc5}.chip-border_primary{border-radius:4px}.chip-border_secondary{border-radius:20px}.chip-density_dense{height:26px}.chip-density_normal{height:32px;padding:8px 15px}.chip-density_medium{height:34px;padding:8px 15px;font-size:15px}.chip-density_medium .item-icon-close{transform:scale(1.2)}.chip-font_white{color:#fff}.chip-font_white .item-icon-close svg path{fill:#fff}.chip-font_green{color:#49af53}.chip-font_green .item-icon-close svg path{fill:#49af53}.chip-font_purple{color:#a44cc5}.chip-font_purple .item-icon-close svg path{fill:#a44cc5}.chip-font_primary{color:#4b4760}.chip-font_primary .item-icon-close svg path{fill:#4b4760}.chip-font_orange{color:#f98b0a}.chip-font_orange .item-icon-close svg path{fill:#f98b0a}.chip-value_bold{font-weight:700;font-size:15px}.chips{height:auto;position:relative;display:flex;flex-flow:column nowrap;height:100%;width:100%}.chips__label{display:flex;align-items:center;margin-bottom:5px;color:#7f7989;font-size:12px;text-align:left;background-color:transparent}.chips__label:first-letter{text-transform:uppercase}.chips__label-mandatory{color:#ea336a}.chips__label-disabled,.chips__label-disabled .form-field__label-mandatory{color:#adabb0}.chips__wrapper{display:flex;flex:1;flex-flow:row nowrap;position:relative;width:100%;color:#4b4760;background-color:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px}.chips__wrapper-disabled{border:1px solid rgba(173,171,176,.3);color:#adabb0;cursor:not-allowed}.chips__wrapper-invalid{border:1px solid #ea336a}.chips__wrapper.without-border{border-color:transparent}.chips__wrapper-dense{height:36px}.chips__wrapper-normal{height:40px}.chips__wrapper-medium{height:44px}.chips__wrapper-chunky{height:48px}.chips__control{position:relative;display:flex;flex:1;align-items:center;overflow:hidden}.chips__icons{display:flex;flex-shrink:0;align-items:center;min-height:25px}.chips__icons>*{display:flex;align-items:center;padding:0 4px}.chips__icons>*:last-child{margin-right:4px}.chips__wrapper{padding:12px 16px}.chips-wrapper{display:flex;flex-flow:row wrap;align-items:center}.chips-cell{display:flex;flex:1;align-items:center;max-width:100%}.chips-cell .fixed-max-width{max-width:100%}.chips-cell .chip-block{position:relative;max-width:100%}.chips-cell .button-add{display:flex;align-items:center;justify-content:center;margin:2px 0;border-radius:32px}.chips-cell .button-add-background_orange{background-color:#ffd0775c}.chips-cell .button-add-background_orange:hover{background-color:#f98b0a}.chips-cell .button-add-background_purple{background-color:#a44cc529}.chips-cell .button-add-background_purple:hover{background-color:#a44cc5}.chips-cell .button-add-background_green{background-color:#13bbb13d}.chips-cell .button-add-background_green:hover{background-color:#13bbb1}.chips-cell .button-add-background_grey{background-color:#483f561f}.chips-cell .button-add-background_grey:hover{background-color:#7f7989}.chips-cell .button-add_border_transparent{border:1px solid transparent}.chips-cell .button-add_border_green{border:1px solid #49af53}.chips-cell .button-add_border_grey{border:1px solid rgba(0,0,0,.2)}.chips-cell .button-add_border_orange{border:1px solid #ea7f54}.chips-cell .button-add_border_purple{border:1px solid #a44cc5}.chips-cell .button-add_border_primary{border-radius:4px}.chips-cell .button-add_border_secondary{border-radius:20px}.chips-cell .button-add-density_dense{width:26px;height:26px}.chips-cell .button-add-density_normal{width:32px;height:32px}.chips-cell .button-add-density_medium{width:34px;height:34px}.chips-cell .button-add-font_primary svg rect,.chips-cell .button-add-font_primary svg path{fill:#7f7989}.chips-cell .button-add-font_primary:hover svg rect,.chips-cell .button-add-font_primary:hover svg path{fill:#fff}.chips-cell .button-add-font_green svg rect,.chips-cell .button-add-font_green svg path{fill:#49af53}.chips-cell .button-add-font_green:hover svg rect,.chips-cell .button-add-font_green:hover svg path{fill:#fff}.chips-cell .button-add-font_orange svg rect,.chips-cell .button-add-font_orange svg path{fill:#f98b0a}.chips-cell .button-add-font_orange:hover svg rect,.chips-cell .button-add-font_orange:hover svg path{fill:#fff}.chips-cell .button-add-font_purple svg rect,.chips-cell .button-add-font_purple svg path{fill:#a44cc5}.chips-cell .button-add-font_purple:hover svg rect,.chips-cell .button-add-font_purple:hover svg path{fill:#fff}.chips input:disabled{cursor:default}.form-field.form-field-combobox{width:100%}.form-field.form-field-combobox .form-field{position:relative;display:flex;flex-flow:column nowrap;height:100%;width:100%}.form-field.form-field-combobox .form-field__label{display:flex;align-items:center;margin-bottom:5px;color:#7f7989;font-size:12px;text-align:left;background-color:transparent}.form-field.form-field-combobox .form-field__label:first-letter{text-transform:uppercase}.form-field.form-field-combobox .form-field__label-mandatory{color:#ea336a}.form-field.form-field-combobox .form-field__label-disabled,.form-field.form-field-combobox .form-field__label-disabled .form-field__label-mandatory{color:#adabb0}.form-field.form-field-combobox .form-field__wrapper{display:flex;flex:1;flex-flow:row nowrap;position:relative;width:100%;color:#4b4760;background-color:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px}.form-field.form-field-combobox .form-field__wrapper-disabled{border:1px solid rgba(173,171,176,.3);color:#adabb0;cursor:not-allowed}.form-field.form-field-combobox .form-field__wrapper-invalid{border:1px solid #ea336a}.form-field.form-field-combobox .form-field__wrapper.without-border{border-color:transparent}.form-field.form-field-combobox .form-field__wrapper-dense{height:36px}.form-field.form-field-combobox .form-field__wrapper-normal{height:40px}.form-field.form-field-combobox .form-field__wrapper-medium{height:44px}.form-field.form-field-combobox .form-field__wrapper-chunky{height:48px}.form-field.form-field-combobox .form-field__control{position:relative;display:flex;flex:1;align-items:center;overflow:hidden}.form-field.form-field-combobox .form-field__icons{display:flex;flex-shrink:0;align-items:center;min-height:25px}.form-field.form-field-combobox .form-field__icons>*{display:flex;align-items:center;padding:0 4px}.form-field.form-field-combobox .form-field__icons>*:last-child{margin-right:4px}.form-field.form-field-combobox .form-field__icons .form-field-combobox__icon{cursor:pointer;padding:0;transition:transform .2s linear}.form-field.form-field-combobox .form-field__icons .form-field-combobox__icon_open{transform:rotate(90deg);transform-origin:center center}.form-field.form-field-combobox .form-field-combobox__placeholder{color:#7f7989;font-size:15px;text-align:left;text-transform:capitalize;background-color:transparent}.form-field.form-field-combobox .form-field-combobox__placeholder label{cursor:inherit}.form-field.form-field-combobox .form-field-combobox__select{padding:0;overflow:visible}.form-field.form-field-combobox .form-field-combobox__select-header{display:flex;flex:1;align-items:center;cursor:pointer;height:100%}.form-field.form-field-combobox .form-field-combobox__input{width:100%;padding:0 8px 0 0}.form-field.form-field-combobox .form-field-combobox__input_hidden{flex:0}.form-field-combobox__search{width:100%;padding:12px 0}.form-field-combobox__search-wrapper{position:sticky;top:0;display:flex;align-items:center;margin:0 9px;border-bottom:1px solid rgba(72,63,86,.12);background-color:#fff}.form-field-combobox__dropdown-select{max-width:220px}.form-field-combobox__dropdown-suggestions{max-width:350px}.form-field-combobox__dropdown-list{margin:0;padding:0;min-width:140px;list-style-type:none}.form-field-combobox__dropdown-list-option{padding:8px 15px;word-break:break-all;cursor:pointer}.form-field-combobox__dropdown-list-option:hover{background-color:#f8f7f8}.form-field-combobox__dropdown .pop-up-dialog{width:100%;max-height:250px;padding:0}.form-field-combobox .path-type-store,.form-field-combobox__dropdown .path-type-store{color:#a44cc5}.form-field-combobox .path-type-v3io,.form-field-combobox__dropdown .path-type-v3io{color:#5871f4}.form-field-combobox .path-type-az,.form-field-combobox .path-type-gs,.form-field-combobox .path-type-http,.form-field-combobox .path-type-https,.form-field-combobox .path-type-s3,.form-field-combobox__dropdown .path-type-az,.form-field-combobox__dropdown .path-type-gs,.form-field-combobox__dropdown .path-type-http,.form-field-combobox__dropdown .path-type-https,.form-field-combobox__dropdown .path-type-s3{color:#f98b0a}.form-field-combobox .path-type-dbfs,.form-field-combobox__dropdown .path-type-dbfs{color:#49af53}.form-field-range{align-self:stretch}.form-field-range .range__buttons{display:flex;flex-direction:column;justify-content:center;width:28px;height:100%}.form-field-range .range__button{display:flex;width:100%;height:calc(50% + 1px);align-items:center;justify-content:center;padding:0;background-color:#f5f5f5;cursor:pointer}.form-field-range .range__button svg path{fill:#7f7989}.form-field-range .range__button:hover{background-color:#e7e7e7}.form-field-range .range__button:hover svg path{fill:#4b4760}.form-field-range .range__button:focus{border:1px solid #7f7989}.form-field-range .range__button:active{background-color:#0003;border:1px solid #7f7989}.form-field-range .range__button:active svg path{fill:#4b4760}.form-field-range .range__button:disabled{cursor:not-allowed}.form-field-range .range__button:disabled svg path{fill:#adabb0}.form-field-range .range__button:disabled:focus{border:none}.form-field-range .range__button:disabled:hover{background-color:#f5f5f5}.form-field-range .range__button-increase{border-bottom:1px solid transparent;border-left:1px solid transparent;border-top-right-radius:4px}.form-field-range .range__button-decrease{border-top:1px solid transparent;border-left:1px solid transparent;border-bottom-right-radius:4px}.form-field-range .range__button .decrease{transform:rotate(180deg)}.form-field-range .range-warning{border:1px solid #ea336a}.form-field-range .range-warning_asterisk{position:absolute;top:50%;right:35px;color:#ea336a;transform:translateY(-50%)}.form-field-range .range-warning .range__button-increase{border-top:1px solid #ea336a;border-right:1px solid #ea336a}.form-field-range .range-warning .range__button-decrease{border-right:1px solid #ea336a;border-bottom:1px solid #ea336a}.form-field-range .range__warning-icon{position:absolute;top:50%;right:30px;transform:translateY(-50%)}.form-field-input{width:100%}.form-field-input input{height:inherit;width:100%;padding:12px 16px}.form-field-input .form-field{position:relative;display:flex;flex-flow:column nowrap;height:100%;width:100%}.form-field-input .form-field__label{display:flex;align-items:center;margin-bottom:5px;color:#7f7989;font-size:12px;text-align:left;background-color:transparent}.form-field-input .form-field__label:first-letter{text-transform:uppercase}.form-field-input .form-field__label-mandatory{color:#ea336a}.form-field-input .form-field__label-disabled,.form-field-input .form-field__label-disabled .form-field__label-mandatory{color:#adabb0}.form-field-input .form-field__wrapper{display:flex;flex:1;flex-flow:row nowrap;position:relative;width:100%;color:#4b4760;background-color:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px}.form-field-input .form-field__wrapper-disabled{border:1px solid rgba(173,171,176,.3);color:#adabb0;cursor:not-allowed}.form-field-input .form-field__wrapper-invalid{border:1px solid #ea336a}.form-field-input .form-field__wrapper.without-border{border-color:transparent}.form-field-input .form-field__wrapper-dense{height:36px}.form-field-input .form-field__wrapper-normal{height:40px}.form-field-input .form-field__wrapper-medium{height:44px}.form-field-input .form-field__wrapper-chunky{height:48px}.form-field-input .form-field__control{position:relative;display:flex;flex:1;align-items:center;overflow:hidden}.form-field-input .form-field__icons{display:flex;flex-shrink:0;align-items:center;min-height:25px}.form-field-input .form-field__icons>*{display:flex;align-items:center;padding:0 4px}.form-field-input .form-field__icons>*:last-child{margin-right:4px}.form-field-input .form-field__label-icon{display:inline-flex;margin-left:3px}.form-field-input .form-field__label-icon>*,.form-field-input .form-field__label-icon a{display:inline-flex}.form-field-input .form-field__label-icon a{transform:translateY(-1px)}.form-field-input .form-field__label-icon svg{width:12px;height:12px}.form-field-input .form-field__label-icon svg path{fill:#6279e7}.form-field-input .form-field__suggestion-list{position:absolute;top:100%;left:0;z-index:5;margin:0;padding:7px 0;background-color:#fff;border-radius:4px;box-shadow:0 2px 10px #0003}.form-field-input .form-field__suggestion-list .suggestion-item{padding:7px 15px;color:#483f56;list-style-type:none}.form-field-input .form-field__suggestion-list .suggestion-item:hover{background-color:#f8f7f8;cursor:pointer}.form-field-input input[type=number]{border:none;-moz-appearance:textfield}.form-field-input input[type=number]::-webkit-outer-spin-button,.form-field-input input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.select__item{display:flex;align-items:center;flex-flow:row wrap;width:100%;min-height:45px;padding:10px 15px}.select__item.multiple{padding:0 15px;min-height:0}.select__item.multiple input[type=checkbox]~label{padding-top:16px;padding-bottom:16px}.select__item.hidden{display:none}.select__item .form-field-checkbox{flex:1;height:100%;width:100%}.select__item:hover{background-color:#f8f7f8;cursor:pointer}.select__item.disabled{color:#adabb0;background:#fff;cursor:not-allowed}.select__item .status{margin:0 10px}.select__item .all{margin:0;display:inline-block;width:8px;height:8px;min-width:8px;border-radius:50%;background-color:none}.select__item .label-row{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;width:100%}.select__item-label{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start;flex:1}.select__item-main-label{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start}.select__item-sub-label{margin-top:5px;font-size:13px;width:100%}.select__item-icon{display:flex;margin-right:10px}.select__item .checkmark{align-self:flex-start;margin:0 0 0 10px}.select__item .checkmark path{fill:#49af53}.select-tooltip,.form-field-select{width:100%}.form-field-select .form-field{position:relative;display:flex;flex-flow:column nowrap;height:100%;width:100%}.form-field-select .form-field__label{display:flex;align-items:center;margin-bottom:5px;color:#7f7989;font-size:12px;text-align:left;background-color:transparent}.form-field-select .form-field__label:first-letter{text-transform:uppercase}.form-field-select .form-field__label-mandatory{color:#ea336a}.form-field-select .form-field__label-disabled,.form-field-select .form-field__label-disabled .form-field__label-mandatory{color:#adabb0}.form-field-select .form-field__wrapper{display:flex;flex:1;flex-flow:row nowrap;position:relative;width:100%;color:#4b4760;background-color:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px}.form-field-select .form-field__wrapper-disabled{border:1px solid rgba(173,171,176,.3);color:#adabb0;cursor:not-allowed}.form-field-select .form-field__wrapper-invalid{border:1px solid #ea336a}.form-field-select .form-field__wrapper.without-border{border-color:transparent}.form-field-select .form-field__wrapper-dense{height:36px}.form-field-select .form-field__wrapper-normal{height:40px}.form-field-select .form-field__wrapper-medium{height:44px}.form-field-select .form-field__wrapper-chunky{height:48px}.form-field-select .form-field__control{position:relative;display:flex;flex:1;align-items:center;overflow:hidden}.form-field-select .form-field__icons{display:flex;flex-shrink:0;align-items:center;min-height:25px}.form-field-select .form-field__icons>*{display:flex;align-items:center;padding:0 4px}.form-field-select .form-field__icons>*:last-child{margin-right:4px}.form-field-select .form-field__wrapper{cursor:pointer}.form-field-select .form-field__wrapper-active{background:#f8f7f8}.form-field-select .form-field__wrapper-disabled{cursor:not-allowed}.form-field-select .form-field__wrapper-disabled .form-field__caret path{fill:#adabb0}.form-field-select .form-field__select{display:flex;align-items:center;width:100%;padding:0 20px 0 16px}.form-field-select .form-field__select-value{display:block;font-size:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-field-select .form-field__select-placeholder{color:#adabb0}.form-field-select .form-field__select-sub_label{display:block;margin-left:10px;overflow:hidden;color:#7f7989;white-space:nowrap;text-overflow:ellipsis}.form-field-select__options-list .pop-up-dialog{width:100%;padding:0;border-radius:0}.form-field-select__options-list .options-list{margin:0;padding:0;list-style-type:none;max-height:250px;overflow-y:auto}.form-field-select__options-list .options-list__body{width:100%;color:#483f56de;background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:4px;box-shadow:0 4px 8px #0000003b}.form-field-select__options-list .options-list__search{width:100%}.form-field-select__options-list .options-list__search input{width:100%;padding:10px;border:none;border-bottom:1px solid rgba(0,0,0,.2)}.form-field-radio{display:inline-flex;align-items:center;justify-content:flex-start;color:#4b4760;margin-right:15px}.form-field-radio_readonly input{pointer-events:none;opacity:.5}.form-field-radio_readonly input~label,.form-field-radio_readonly input~.label{pointer-events:none;opacity:.5}.form-field-radio input[type=radio]{width:16px;height:16px;border-radius:50%;position:relative;background:#fff;border:1px solid #869cff;color:#869cff;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;outline:0;cursor:pointer}.form-field-radio input[type=radio]:checked:hover{color:#6279e7}.form-field-radio input[type=radio]:checked:hover:disabled{color:#adabb0;border-color:currentColor}.form-field-radio input[type=radio]:disabled{color:#adabb0;border-color:currentColor;cursor:not-allowed;pointer-events:none}.form-field-radio input[type=radio]:disabled:hover{color:#adabb0;border-color:currentColor}.form-field-radio input[type=radio]:disabled~label,.form-field-radio input[type=radio]:disabled~.label{color:#adabb0;cursor:not-allowed}@keyframes pulse-animation{20%{box-shadow:0 0 #6279e780}to{box-shadow:0 0 0 6px #6279e700}}.form-field-radio input[type=radio]:not(:disabled):focus,.form-field-radio input[type=radio]:not(:disabled):active{animation:pulse-animation .5s ease-out}.form-field-radio input[type=radio]:not(:disabled):hover{color:#6279e7;border-color:currentColor}.form-field-radio input[type=radio]~label,.form-field-radio input[type=radio]~.label{display:flex;flex:1;align-items:center;position:relative;cursor:pointer;font-size:1em;padding:0 0 0 .45em;height:inherit;-webkit-user-select:none;user-select:none;white-space:nowrap}.form-field-radio input[type=radio]:before{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;transform:scale(0);transition:transform .2s ease-in-out;box-shadow:inset 1em 1em currentColor}.form-field-radio input[type=radio]:checked:before{transform:scale(1)}.form-field-textarea{width:100%}.form-field-textarea textarea{height:inherit;width:100%;padding:12px 16px;white-space:normal}.form-field-textarea .form-field{position:relative;display:flex;flex-flow:column nowrap;height:100%;width:100%}.form-field-textarea .form-field__label{display:flex;align-items:center;margin-bottom:5px;color:#7f7989;font-size:12px;text-align:left;background-color:transparent}.form-field-textarea .form-field__label:first-letter{text-transform:uppercase}.form-field-textarea .form-field__label-mandatory{color:#ea336a}.form-field-textarea .form-field__label-disabled,.form-field-textarea .form-field__label-disabled .form-field__label-mandatory{color:#adabb0}.form-field-textarea .form-field__wrapper{display:flex;flex:1;flex-flow:row nowrap;position:relative;width:100%;color:#4b4760;background-color:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px}.form-field-textarea .form-field__wrapper-disabled{border:1px solid rgba(173,171,176,.3);color:#adabb0;cursor:not-allowed}.form-field-textarea .form-field__wrapper-invalid{border:1px solid #ea336a}.form-field-textarea .form-field__wrapper.without-border{border-color:transparent}.form-field-textarea .form-field__wrapper-dense{height:36px}.form-field-textarea .form-field__wrapper-normal{height:40px}.form-field-textarea .form-field__wrapper-medium{height:44px}.form-field-textarea .form-field__wrapper-chunky{height:48px}.form-field-textarea .form-field__control{position:relative;display:flex;flex:1;align-items:center;overflow:hidden}.form-field-textarea .form-field__icons{display:flex;flex-shrink:0;align-items:center;min-height:25px}.form-field-textarea .form-field__icons>*{display:flex;align-items:center;padding:0 4px}.form-field-textarea .form-field__icons>*:last-child{margin-right:4px}.form-field-textarea .form-field__wrapper .form-field__control{padding:0}.form-field-textarea .form-field__counter{color:#7f7989;font-size:12px;margin-top:5px;text-align:right}.form-field-toggle{position:relative}.form-field-toggle__switch{height:24px;width:48px;display:flex;cursor:pointer;align-items:center;background-color:#dadada;border-radius:20px;transition:all .2s ease}.form-field-toggle__switch:before{content:"";width:20px;height:20px;background-color:#fff;border-radius:50%;transform:translate(2px);transition:all .2s ease}.form-field-toggle .form-field{position:relative;display:flex;flex-flow:column nowrap;height:100%;width:100%}.form-field-toggle .form-field__label{display:flex;align-items:center;margin-bottom:5px;color:#7f7989;font-size:12px;text-align:left;background-color:transparent}.form-field-toggle .form-field__label:first-letter{text-transform:uppercase}.form-field-toggle .form-field__label-mandatory{color:#ea336a}.form-field-toggle .form-field__label-disabled,.form-field-toggle .form-field__label-disabled .form-field__label-mandatory{color:#adabb0}.form-field-toggle .form-field__wrapper{display:flex;flex:1;flex-flow:row nowrap;position:relative;width:100%;color:#4b4760;background-color:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px}.form-field-toggle .form-field__wrapper-disabled{border:1px solid rgba(173,171,176,.3);color:#adabb0;cursor:not-allowed}.form-field-toggle .form-field__wrapper-invalid{border:1px solid #ea336a}.form-field-toggle .form-field__wrapper.without-border{border-color:transparent}.form-field-toggle .form-field__wrapper-dense{height:36px}.form-field-toggle .form-field__wrapper-normal{height:40px}.form-field-toggle .form-field__wrapper-medium{height:44px}.form-field-toggle .form-field__wrapper-chunky{height:48px}.form-field-toggle .form-field__control{position:relative;display:flex;flex:1;align-items:center;overflow:hidden}.form-field-toggle .form-field__icons{display:flex;flex-shrink:0;align-items:center;min-height:25px}.form-field-toggle .form-field__icons>*{display:flex;align-items:center;padding:0 4px}.form-field-toggle .form-field__icons>*:last-child{margin-right:4px}.form-field-toggle .form-field__wrapper{border:none}.form-field-toggle input[type=checkbox]{display:none;width:0;height:0}.form-field-toggle input[type=checkbox]:disabled+* .form-field-toggle__switch{opacity:.5;pointer-events:none;cursor:default}.form-field-toggle input[type=checkbox]:checked+* .form-field-toggle__switch{background-color:#869cff}.form-field-toggle input[type=checkbox]:checked+* .form-field-toggle__switch:before{transform:translate(26px)}.backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;z-index:9}.backdrop-transition-enter{opacity:0}.backdrop-transition-enter-active,.backdrop-transition-enter-done{opacity:.5;transition:opacity .3s ease-in-out}.backdrop-transition-exit{opacity:.5}.backdrop-transition-exit-active{opacity:0;transition:opacity .3s ease-in-out}.modal{position:fixed;top:50%;left:50%;width:100%;height:660px;max-width:96%;min-width:300px;max-height:96%;outline:0;transform:translate(-50%,-50%);z-index:9}@media screen and (min-width: 1200px){.modal{width:1000px}.modal.modal-sm{width:700px}.modal.modal-lg{width:1400px}.modal.modal-max{width:95vw;height:95vh}}.modal.modal-min{width:500px;height:auto}.modal.modal-max{width:96vw;height:94vw}.modal__content{display:flex;flex-flow:column nowrap;position:relative;min-height:inherit;height:100%;width:100%;max-height:100%;background-color:#fff;border-radius:8px;box-shadow:0 6px 26px #0003;text-align:left}.modal__header{position:relative;border-bottom:1px solid rgba(0,0,0,.2);min-height:92px;padding:1rem 3rem;display:flex;align-items:center;justify-content:center;flex-direction:column}.modal__header-title{color:#4b4760;font-size:2em;text-transform:capitalize;margin:0}.modal__header-sub-title{color:#7f7989;font-size:1.5em;font-weight:500;margin:10px 0 0}.modal__header-preview-text{position:absolute;top:1rem;left:1rem;font-size:1rem}.modal__header-button{position:absolute;top:10px;right:10px}.modal__body{overflow-y:auto;overflow-x:hidden;flex:1 0;padding:1.5rem 2rem 0;margin-bottom:1rem}.modal__footer{display:flex;flex-flow:row nowrap;flex-shrink:0;justify-content:space-between;padding:1rem 2rem;min-height:50px}.modal__footer-actions{display:flex;flex:1 0 auto;justify-content:flex-end;align-items:center}.modal__footer-actions>*:not(:last-child){margin-right:10px}.modal-transition-enter{opacity:0;transform:translate(-50%,100vh)}.modal-transition-enter-active,.modal-transition-enter-done{opacity:1;transform:translate(-50%,-50%);transition:all .3s ease-in-out}.modal-transition-exit{opacity:1;transform:translate(-50%,-50%)}.modal-transition-exit-active{opacity:0;transform:translate(-50%,-70%);transition:all .3s ease-in-out}.table .table-body__cell{line-height:20px}.table .table-body__cell .name-wrapper{display:flex;flex:1;flex-wrap:wrap;align-items:center}.table .table-body__cell .name-wrapper .item-name{color:#4b4760;font-weight:700}.table .table-body__cell .name-wrapper .item-name.function-name{max-width:120px}.table .table-body__cell .name-wrapper .item-tag{max-width:150px}.table .table-body__cell .name-wrapper .item-tag span{display:inline}.table .table-body__cell .name-wrapper .link{display:flex;width:100%;color:#4b4760}.table .table-body__cell .link-subtext{color:#7f7989}.table .table-body__cell .date-uid-row{display:flex;align-items:center;justify-content:space-between;font-weight:400;font-size:12px;font-family:Roboto,sans-serif;font-style:normal;margin-top:5px;width:max-content;min-width:100%}.table .table-body__cell .date-uid-row>span:not(:last-child){margin-right:10px}.table .table-body__cell .date-uid-row span{width:auto}.wizard-steps{display:flex;flex-flow:row nowrap;background-color:#fff;min-width:260px;margin:1.5rem 0;padding:0 2rem}@media screen and (min-width: 1200px){.wizard-steps{flex-flow:column nowrap;overflow-y:auto;padding:0 1rem}.wizard-steps>*:not(:last-child){margin-bottom:10px}}.wizard-steps .wizard-steps__item{display:block;background-color:inherit;color:#4b4760;border:0;border-radius:8px;font-size:1em;padding:8px;min-height:52px;height:auto;width:100%}@media screen and (min-width: 1200px){.wizard-steps .wizard-steps__item{display:flex;align-items:center;justify-content:flex-start}.wizard-steps .wizard-steps__item>*{text-align:left;white-space:normal}}.wizard-steps .wizard-steps__item .wizard-steps__indicator{border-color:#869cff;color:#869cff;background-color:inherit}.wizard-steps .wizard-steps__item.wizard-steps__item_active{background-color:#869cff1f;color:#6279e7}.wizard-steps .wizard-steps__item.wizard-steps__item_active .wizard-steps__indicator{border-color:transparent;color:#fff;background-color:#869cff}.wizard-steps .wizard-steps__item.wizard-steps__item_invalid{color:#ea336a}.wizard-steps .wizard-steps__item.wizard-steps__item_invalid.wizard-steps__item_active{background-color:#ea336a26}.wizard-steps .wizard-steps__item.wizard-steps__item_invalid .wizard-steps__indicator{border-color:#ea336a;color:#ea336a;background-color:inherit}.wizard-steps .wizard-steps__item:disabled{border:0;color:#adabb0}.wizard-steps .wizard-steps__item:disabled .wizard-steps__indicator{border-color:#adabb0;color:#adabb0;background-color:inherit}.wizard-steps .wizard-steps__indicator{display:inline-flex;align-items:center;justify-content:center;border:2px solid transparent;border-radius:50%;padding:10px;margin:0 0 10px;width:36px;height:36px}@media screen and (min-width: 1200px){.wizard-steps .wizard-steps__indicator{flex-flow:row nowrap;text-align:left;margin:0 10px 0 0}}.wizard-form .modal__body{display:flex;flex-flow:column nowrap;overflow:hidden;padding:0}@media screen and (min-width: 1200px){.wizard-form .modal__body{flex-flow:row nowrap}}.wizard-form .wizard-form__content-container{overflow-y:auto;height:100%;width:100%;padding:0 2rem 1.5rem}@media screen and (min-width: 1200px){.wizard-form .wizard-form__content-container{padding:1.5rem 2rem 1.5rem 1rem}}.wizard-form .wizard-form__content{min-width:350px;height:100%}.wizard-form .wizard-form__content .wizard-form__hidden-content-item{position:absolute;visibility:hidden;height:0;opacity:0;pointer-events:none}.wizard-form .wizard-form__content .wizard-form__visible-content-item{height:100%}.wizard-form__back-button svg,.wizard-form__next-button svg{width:14px}.wizard-form__next-button svg{rotate:180deg}
+.tooltip-template{padding:6px 8px;word-break:break-word}.tooltip__text{color:#fff;background-color:#4b4760;border-radius:4px}.tooltip__warning{color:#ea336a;background-color:#fff;box-shadow:0 5px 11px #0000002e}.btn{display:flex;align-items:center;justify-content:center;min-width:90px;height:40px;padding:0 16px;color:#fff;font-weight:500;font-size:.875rem;font-style:normal;border:1px solid transparent;border-radius:4px}.btn-dense{height:36px}.btn-normal{height:40px}.btn-medium{height:44px}.btn-chunky{height:48px}.btn svg>*{fill:currentColor}.btn:focus{border-color:#0006}.btn:active{border-color:#0006}.btn:disabled{color:#adabb0;background:#fff;cursor:not-allowed}.btn:disabled svg>*{fill:#dadada}.btn :not(:last-child){margin-right:10px}.btn :last-child{margin:0}.btn-secondary{background:#0fddaf}.btn-secondary:hover:not(:disabled){background:#1fcc9e}.btn-secondary:active:not(:disabled){background:#1db284}.btn-secondary:disabled{border:1px solid #0fddaf}.btn-tertiary{color:#4b4760;background:#fff;border:1px solid rgba(0,0,0,.2)}.btn-tertiary svg>*{fill:#4b4760}.btn-tertiary:hover:not(:disabled){background:#f8f7f8}.btn-tertiary:active:not(:disabled){background:#e7e7e7}.btn-tertiary:disabled{border:1px solid rgba(0,0,0,.2)}.btn-primary{color:#fff;background:#869cff}.btn-primary:hover:not(:disabled){background:#6279e7}.btn-primary:active:not(:disabled){background:#5468c7}.btn-primary:disabled{border:1px solid #869cff}.btn-danger{color:#fff;background:#ea336a}.btn-danger:hover:not(:disabled){background:#d22a5d}.btn-danger:active:not(:disabled){background:#bc2553}.btn-danger:disabled{border:1px solid #ea336a}.btn-label{color:#4b4760;background:transparent;border:0}.btn-label svg>*{fill:#4b4760}.btn-label:focus:not(:disabled){border-color:transparent}.btn-label:hover:not(:disabled){color:#7f7989}.btn-label:active:not(:disabled){color:#000;border-color:transparent}.btn-label:disabled{border-color:transparent}.round-icon-cp{position:relative;display:flex;align-items:center;margin:0 .2rem}.round-icon-cp__circle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:4px}.round-icon-cp__circle>*{position:relative;z-index:2;display:inline-flex;margin:0!important}.round-icon-cp__circle:before{position:absolute;right:0;left:0;z-index:1;width:inherit;height:inherit;background-color:#483f561f;border-radius:50%;opacity:0;transition:opacity .3s ease-in-out;content:""}.round-icon-cp__circle:hover:before,.round-icon-cp__circle-active:before{opacity:1}.round-icon-cp__circle-disabled path{fill:#adabb0}.round-icon-cp__circle-disabled:hover:before{opacity:0}.pop-up-dialog{position:relative;width:477px;max-height:90vh;padding:20px;overflow-y:auto;background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0003}.pop-up-dialog__buttons_wrapper{display:flex}.pop-up-dialog__overlay{position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#333333bf;z-index:9}.pop-up-dialog__overlay.custom-position{width:auto;height:auto;background:unset}.pop-up-dialog__header{display:flex;align-items:baseline;justify-content:space-between;min-height:30px;margin-bottom:15px}.pop-up-dialog__header-text{width:100%;color:#4b4760;font-size:24px;line-height:28px;word-break:break-word}.pop-up-dialog__header-close{width:14px;height:14px;margin:5px 0 5px auto;cursor:pointer}.pop-up-dialog__footer-container{display:flex;justify-content:flex-end;margin-top:20px}.pop-up-dialog__btn_cancel{margin:0 10px}.pop-up-dialog__btn_close{position:absolute;top:10px;right:10px}.pop-up-dialog__form-input{width:100%}.confirm-dialog{color:#4b4760}.confirm-dialog__message{font-size:15px;line-height:24px}.confirm-dialog__message-only{font-size:22px}.confirm-dialog__btn-container{display:flex;justify-content:flex-end;margin-top:20px}.confirm-dialog__body{margin:20px 0}.tooltip{position:fixed;font-weight:400;font-size:15px;line-height:1.4;display:flex;max-width:400px;z-index:9}.actions-menu__icon{display:none;align-items:center;justify-content:center;width:25px;height:25px;margin-right:5px}.actions-menu__icon svg path:first-child{fill:#7f7989}.actions-menu__icon_visible{display:flex}.actions-menu__option{padding:10px;color:#4b4760;cursor:pointer}.actions-menu__option:hover{background-color:#f8f7f8}.actions-menu__option_danger{color:#ea336a}.actions-menu__option_danger svg path:first-child{fill:#ea336a}.actions-menu__option_disabled{color:#adabb0;cursor:not-allowed}.actions-menu__option_disabled .actions-menu__icon svg path:first-child{fill:#0003}.actions-menu__option>*{display:flex;flex:1;align-items:center;justify-content:flex-start;width:100%}.actions-menu{position:relative}.actions-menu__container{position:relative;display:none}.actions-menu__container_extended{position:absolute;right:0;display:none;align-items:center;justify-content:center;background-color:#f5f7ff;height:100%}.actions-menu__container_extended:before{content:"";width:30px;height:100%;position:absolute;display:block;left:-30px;background:linear-gradient(90deg,#fff0,#f5f7ff)}.actions-menu__container_extended .actions-menu{padding:0 5px 0 0}.actions-menu__container-active{display:flex}.actions-menu__main-actions-wrapper{display:flex;align-items:center;justify-content:center}.actions-menu__body{min-width:150px;max-width:250px}.actions-menu__body .pop-up-dialog{width:100%;padding:0}.actions-menu__list{list-style-type:none;margin:0;padding:0}.options-menu__body{width:100%;max-height:250px;margin:0;padding:0;overflow-y:auto;color:#483f56de;font-size:1rem;list-style-type:none;background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:4px;box-shadow:0 2px 10px #0003}.options-menu .pop-up-dialog{width:100%;padding:0}.options-menu-transition-enter{opacity:0}.options-menu-transition-enter-active{opacity:1;transition:opacity .3s ease-in-out}.options-menu-transition-exit{opacity:1}.options-menu-transition-exit-active{opacity:0;transition:opacity .3s ease-in-out}.validation-option{display:flex;align-items:flex-start;margin:.6rem 0;padding:0 1rem;font-size:.875rem}.validation-option__icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:.5rem}.validation-option__icon_valid{width:14px;height:15px}.validation-option__icon_valid path{fill:#0fddaf}.validation-option__icon_invalid{width:12px;height:12px}.validation-option__icon_invalid path{fill:#ea336a}.edit-chip-container{display:inline-flex;max-width:100%;margin:2px 8px 2px 0;padding:0 8px;font-size:14px;line-height:22px}.edit-chip-container input.item_edited::placeholder{color:#adabb0}.edit-chip-container input::placeholder{color:#4b4760}.edit-chip__icon-close{display:flex;align-items:center;justify-content:center}.edit-chip__icon-close svg{transform:scale(.7)}.chip__label_invalid{color:#ea336a}.chip .item-icon-close{display:flex;align-items:center;justify-content:center;margin-left:5px;padding:0}.chip .item-icon-close svg{transform:scale(.7)}.error{display:flex;justify-content:space-between;padding:10px 14px;color:#ea336a;background-color:#ea336a1a;border:1px solid #ea336a}.error__data{display:flex;align-items:center}.error__message{margin-right:10px;word-break:break-word}.error__icon{width:22px;height:22px;margin-right:10px;padding:5px;background-color:#eb5757;border-radius:50%}.loader-wrapper{position:fixed;top:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#00000029}.loader-wrapper .loader{display:flex}.loader-wrapper .loader:after{display:block;width:64px;height:64px;border:6px solid #6279e7;border-color:#6279e7 transparent #6279e7 transparent;border-radius:50%;animation:rotate 1.5s linear infinite;content:" "}.loader-wrapper.section-loader{position:relative;z-index:2;background-color:transparent}.loader-wrapper.small-loader .loader:after{width:20px;height:20px;border-width:2px}.loader-wrapper.secondary-loader .loader:after{border-color:#adabb0 transparent #adabb0 transparent}@keyframes rotate{to{transform:rotate(360deg)}}.tip-container{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--arrow-length)}.tip{position:fixed;display:block;padding:10px;color:#fff;white-space:pre-line;background:#4b4760;border-radius:4px;z-index:9}.tip-wrapper{display:inline-flex;align-items:center}.tip_top:after{bottom:calc(var(--tipArrowLength) * -.5)}.tip_bottom:after{top:calc(var(--tipArrowLength) * -.5)}.tip_left:after{right:calc(var(--tipArrowOffset))}.tip_right:after{left:calc(var(--tipArrowOffset))}.tip_small{min-width:100px;max-width:250px}.tip_big{min-width:250px;max-width:400px}.tip:after{position:absolute;width:var(--tipArrowLength);height:var(--tipArrowLength);background:#4b4760;transform:rotate(45deg);content:""}.fade-enter{opacity:0}.fade-enter-active{opacity:1;transition:opacity .2s}.fade-exit{opacity:1}.fade-exit-active{opacity:0;transition:opacity .2s}.btn-load{display:flex;align-items:center;justify-content:center;min-width:90px;height:40px;padding:0 16px;color:#4b4760;font-weight:500;font-size:14px;font-style:normal;line-height:16px;background:#fff;border:1px solid rgba(0,0,0,.2);border-radius:4px}.btn-load svg path{fill:#fff}.btn-load:active{background:#eee}.btn-load:hover{background:#f8f7f8}.btn-load:disabled{color:#adabb0;background:#fff;cursor:not-allowed}.btn-load:disabled svg path{fill:#dadada}.btn-load :first-child{margin-right:5px}.btn-load-primary{border-bottom:4px solid #0fddaf}.btn-load-primary:disabled{border-bottom:4px solid #c5f7ec}.btn-load-secondary{border-bottom:4px solid #869cff}.btn-load-secondary:disabled{border-bottom:4px solid #e2e7ff}.btn-load-tertiary{border-bottom:4px solid #adabb0}.btn-load-tertiary svg path{fill:#4b4760}.btn-load-tertiary:disabled{border-bottom:4px solid #ebebec}.chips-wrapper{display:flex;align-items:center;max-width:100%}.chips-cell .chip-block{position:relative;max-width:100%}.form-field-checkbox{display:inline-flex;align-items:center;justify-content:flex-start;color:#4b4760}.form-field-checkbox_readonly input{pointer-events:none;opacity:.5}.form-field-checkbox_readonly input~label,.form-field-checkbox_readonly input~.label{pointer-events:none;opacity:.5}.form-field-checkbox input[type=checkbox]{flex:0 0 18px;width:18px;height:18px;border-radius:4px;transition:background .2s ease-in-out;position:relative;background:#fff;border:1px solid #869cff;color:#869cff;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;outline:0;cursor:pointer}.form-field-checkbox input[type=checkbox]:checked:hover{color:#6279e7}.form-field-checkbox input[type=checkbox]:checked:hover:disabled{color:#adabb0;border-color:currentColor}.form-field-checkbox input[type=checkbox]:disabled{color:#adabb0;border-color:currentColor;cursor:not-allowed;pointer-events:none}.form-field-checkbox input[type=checkbox]:disabled:hover{color:#adabb0;border-color:currentColor}.form-field-checkbox input[type=checkbox]:disabled~label,.form-field-checkbox input[type=checkbox]:disabled~.label{color:#adabb0;cursor:not-allowed}.form-field-checkbox input[type=checkbox]:not(:disabled):focus,.form-field-checkbox input[type=checkbox]:not(:disabled):active{animation:pulse-animation .5s ease-out}.form-field-checkbox input[type=checkbox]:not(:disabled):hover{color:#6279e7;border-color:currentColor}.form-field-checkbox input[type=checkbox]~label,.form-field-checkbox input[type=checkbox]~.label{display:flex;flex:1;align-items:center;position:relative;cursor:pointer;font-size:1em;padding:0 0 0 .45em;height:inherit;-webkit-user-select:none;user-select:none;white-space:nowrap}.form-field-checkbox input[type=checkbox]:before{content:"";display:block;position:absolute;top:1px;left:5px;width:6px;height:11px;border-style:solid;border-color:#fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.form-field-checkbox input[type=checkbox]:checked{background:currentColor}.form-field-checkbox input[type=checkbox]:checked:hover{background:currentColor}.form-field-checkbox input[type=checkbox]:checked:hover:disabled{background:currentColor}.form-field-checkbox input[type=checkbox]:disabled:hover{background:#fff}.form-field-checkbox input[type=checkbox]:not(:disabled):checked~label.highlighted{color:#fff;background-color:#869cff}.form-field-checkbox input[type=checkbox]:not(:disabled):checked:hover~label.highlighted{background-color:#6279e7}.form-field-checkbox input[type=checkbox]~label.highlighted{background-color:#e9e8eb;font-size:12px;font-weight:700;margin-left:10px;padding:4px 8px;border-radius:4px}.form-field-checkbox input[type=checkbox]:not(:disabled):hover~label.highlighted{background-color:#dfe2e5}.edit-chip-container{display:inline-flex;max-width:100%;margin:2px 0;padding:0 8px;font-size:14px;line-height:22px}.edit-chip-container input{display:flex;padding:0;font-size:14px;background-color:transparent;border:none}.edit-chip-container input[disabled]{pointer-events:none}.edit-chip-container input.item_edited_invalid{color:#ea336a}.edit-chip-container input.input-label-key::placeholder,.edit-chip-container input.input-label-value::placeholder{color:#7f7989}.edit-chip-container-background_none{background-color:transparent}.edit-chip-container-background_green{background-color:#13bbb13d}.edit-chip-container-background_grey{background-color:#483f561f}.edit-chip-container-background_orange{background-color:#ffd0775c}.edit-chip-container-background_purple{background-color:#a44cc529}.edit-chip-container-background_amethyst{background-color:#a44cc5}.edit-chip-container-background_sorbus{background-color:#f98b0a}.edit-chip-container-background_java{background-color:#13bbb1}.edit-chip-container-border_transparent{border:1px solid transparent}.edit-chip-container-border_green{border:1px solid #49af53}.edit-chip-container-border_grey{border:1px solid rgba(0,0,0,.2)}.edit-chip-container-border_orange{border:1px solid #ea7f54}.edit-chip-container-border_purple{border:1px solid #a44cc5}.edit-chip-container-border_primary{border-radius:4px}.edit-chip-container-border_secondary{border-radius:20px}.edit-chip-container-density_dense{height:26px}.edit-chip-container-density_normal{height:32px;padding:8px 15px}.edit-chip-container-density_medium{height:34px;padding:8px 15px;font-size:15px}.edit-chip-container-font_primary,.edit-chip-container-font_primary .input-label-key,.edit-chip-container-font_primary .input-label-value,.edit-chip-container-font_primary .edit-label-separator{color:#4b4760}.edit-chip-container-font_primary .item-icon-close svg path{fill:#4b4760}.edit-chip-container-font_green,.edit-chip-container-font_green .input-label-key,.edit-chip-container-font_green .input-label-value,.edit-chip-container-font_green .edit-label-separator{color:#49af53}.edit-chip-container-font_green .item-icon-close svg path{fill:#49af53}.edit-chip-container-font_white,.edit-chip-container-font_white .input-label-key,.edit-chip-container-font_white .input-label-value,.edit-chip-container-font_white .edit-label-separator{color:#fff}.edit-chip-container-font_white .item-icon-close svg path{fill:#fff}.edit-chip-container-font_orange,.edit-chip-container-font_orange .input-label-key,.edit-chip-container-font_orange .input-label-value,.edit-chip-container-font_orange .edit-label-separator{color:#f98b0a}.edit-chip-container-font_orange .item-icon-close svg path{fill:#f98b0a}.edit-chip-container-font_purple,.edit-chip-container-font_purple .input-label-key,.edit-chip-container-font_purple .input-label-value,.edit-chip-container-font_purple .edit-label-separator{color:#a44cc5}.edit-chip-container-font_purple .item-icon-close svg path{fill:#a44cc5}.edit-chip-container-font_disabled,.edit-chip-container-font_disabled .input-label-key,.edit-chip-container-font_disabled .input-label-value,.edit-chip-container-font_disabled .edit-label-separator{color:#adabb0}.edit-chip-container-font_disabled .item-icon-close svg path{fill:#adabb0}.edit-chip-container .item-icon-close{display:flex;align-items:center;justify-content:center}.edit-chip-container .item-icon-close_hidden{display:none}.edit-chip-container .item-icon-close_invisible{visibility:hidden}.edit-chip-container .item-icon-close svg{transform:scale(.7)}.edit-chip-container_disabled{cursor:not-allowed}.edit-chip-separator{margin-right:5px}.chip{position:relative;margin:2px 8px 2px 0;padding:4px 8px;font-size:14px;line-height:16px;visibility:hidden;cursor:default}.chip_visible{visibility:visible}.chip_invisible{visibility:hidden;height:30px}.chip__content{display:flex;align-items:center}.chip__content-item{flex:1 1 50%;max-width:fit-content;align-self:flex-start}.chip__delimiter{display:flex;align-items:center;margin:0 4px}.chip__value{min-width:10px}.chip.editable{cursor:pointer}.chip.chips_button{padding:8px 7px}.chip-background_none{background-color:transparent}.chip-background_green{background-color:#13bbb13d}.chip-background_grey{background-color:#483f561f}.chip-background_orange{background-color:#ffd0775c}.chip-background_purple{background-color:#a44cc529}.chip-background_amethyst{background-color:#a44cc5}.chip-background_sorbus{background-color:#f98b0a}.chip-background_java{background-color:#13bbb1}.chip-border_transparent{border:1px solid transparent}.chip-border_green{border:1px solid #49af53}.chip-border_grey{border:1px solid rgba(0,0,0,.2)}.chip-border_orange{border:1px solid #ea7f54}.chip-border_purple{border:1px solid #a44cc5}.chip-border_primary{border-radius:4px}.chip-border_secondary{border-radius:20px}.chip-density_dense{height:26px}.chip-density_normal{height:32px;padding:8px 15px}.chip-density_medium{height:34px;padding:8px 15px;font-size:15px}.chip-density_medium .item-icon-close{transform:scale(1.2)}.chip-font_white{color:#fff}.chip-font_white .item-icon-close svg path{fill:#fff}.chip-font_green{color:#49af53}.chip-font_green .item-icon-close svg path{fill:#49af53}.chip-font_purple{color:#a44cc5}.chip-font_purple .item-icon-close svg path{fill:#a44cc5}.chip-font_primary{color:#4b4760}.chip-font_primary .item-icon-close svg path{fill:#4b4760}.chip-font_orange{color:#f98b0a}.chip-font_orange .item-icon-close svg path{fill:#f98b0a}.chip-value_bold{font-weight:700;font-size:15px}.chips{position:relative;display:flex;flex-flow:column nowrap;height:100%;width:100%}.chips__label{display:flex;align-items:center;margin-bottom:5px;color:#7f7989;font-size:12px;text-align:left;background-color:transparent}.chips__label:first-letter{text-transform:uppercase}.chips__label-mandatory{color:#ea336a}.chips__label-disabled,.chips__label-disabled .form-field__label-mandatory{color:#adabb0}.chips__wrapper{display:flex;flex:1;flex-flow:row nowrap;position:relative;width:100%;color:#4b4760;background-color:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px}.chips__wrapper-disabled{border:1px solid rgba(173,171,176,.3);color:#adabb0;cursor:not-allowed}.chips__wrapper-invalid{border:1px solid #ea336a}.chips__wrapper.without-border{border-color:transparent}.chips__wrapper-dense{height:36px}.chips__wrapper-normal{height:40px}.chips__wrapper-medium{height:44px}.chips__wrapper-chunky{height:48px}.chips__control{position:relative;display:flex;flex:1;align-items:center;overflow:hidden}.chips__icons{display:flex;flex-shrink:0;align-items:center;min-height:25px}.chips__icons>*{display:flex;align-items:center;padding:0 4px}.chips__icons>*:last-child{margin-right:4px}.chips{height:auto}.chips__wrapper{padding:12px 16px}.chips-wrapper{display:flex;flex-flow:row wrap;align-items:center}.chips-cell{display:flex;flex:1;align-items:center;max-width:100%}.chips-cell .fixed-max-width{max-width:100%}.chips-cell .chip-block{position:relative;max-width:100%;margin-right:calc(var(--chipBlockMarginRight))}.chips-cell .button-add{display:flex;align-items:center;justify-content:center;margin:2px 0;border-radius:32px}.chips-cell .button-add-background_orange{background-color:#ffd0775c}.chips-cell .button-add-background_orange:hover{background-color:#f98b0a}.chips-cell .button-add-background_purple{background-color:#a44cc529}.chips-cell .button-add-background_purple:hover{background-color:#a44cc5}.chips-cell .button-add-background_green{background-color:#13bbb13d}.chips-cell .button-add-background_green:hover{background-color:#13bbb1}.chips-cell .button-add-background_grey{background-color:#483f561f}.chips-cell .button-add-background_grey:hover{background-color:#7f7989}.chips-cell .button-add_border_transparent{border:1px solid transparent}.chips-cell .button-add_border_green{border:1px solid #49af53}.chips-cell .button-add_border_grey{border:1px solid rgba(0,0,0,.2)}.chips-cell .button-add_border_orange{border:1px solid #ea7f54}.chips-cell .button-add_border_purple{border:1px solid #a44cc5}.chips-cell .button-add_border_primary{border-radius:4px}.chips-cell .button-add_border_secondary{border-radius:20px}.chips-cell .button-add-density_dense{width:26px;height:26px}.chips-cell .button-add-density_normal{width:32px;height:32px}.chips-cell .button-add-density_medium{width:34px;height:34px}.chips-cell .button-add-font_primary svg rect,.chips-cell .button-add-font_primary svg path{fill:#7f7989}.chips-cell .button-add-font_primary:hover svg rect,.chips-cell .button-add-font_primary:hover svg path{fill:#fff}.chips-cell .button-add-font_green svg rect,.chips-cell .button-add-font_green svg path{fill:#49af53}.chips-cell .button-add-font_green:hover svg rect,.chips-cell .button-add-font_green:hover svg path{fill:#fff}.chips-cell .button-add-font_orange svg rect,.chips-cell .button-add-font_orange svg path{fill:#f98b0a}.chips-cell .button-add-font_orange:hover svg rect,.chips-cell .button-add-font_orange:hover svg path{fill:#fff}.chips-cell .button-add-font_purple svg rect,.chips-cell .button-add-font_purple svg path{fill:#a44cc5}.chips-cell .button-add-font_purple:hover svg rect,.chips-cell .button-add-font_purple:hover svg path{fill:#fff}.chips input:disabled{cursor:default}.form-field.form-field-combobox{width:100%}.form-field.form-field-combobox .form-field{position:relative;display:flex;flex-flow:column nowrap;height:100%;width:100%}.form-field.form-field-combobox .form-field__label{display:flex;align-items:center;margin-bottom:5px;color:#7f7989;font-size:12px;text-align:left;background-color:transparent}.form-field.form-field-combobox .form-field__label:first-letter{text-transform:uppercase}.form-field.form-field-combobox .form-field__label-mandatory{color:#ea336a}.form-field.form-field-combobox .form-field__label-disabled,.form-field.form-field-combobox .form-field__label-disabled .form-field__label-mandatory{color:#adabb0}.form-field.form-field-combobox .form-field__wrapper{display:flex;flex:1;flex-flow:row nowrap;position:relative;width:100%;color:#4b4760;background-color:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px}.form-field.form-field-combobox .form-field__wrapper-disabled{border:1px solid rgba(173,171,176,.3);color:#adabb0;cursor:not-allowed}.form-field.form-field-combobox .form-field__wrapper-invalid{border:1px solid #ea336a}.form-field.form-field-combobox .form-field__wrapper.without-border{border-color:transparent}.form-field.form-field-combobox .form-field__wrapper-dense{height:36px}.form-field.form-field-combobox .form-field__wrapper-normal{height:40px}.form-field.form-field-combobox .form-field__wrapper-medium{height:44px}.form-field.form-field-combobox .form-field__wrapper-chunky{height:48px}.form-field.form-field-combobox .form-field__control{position:relative;display:flex;flex:1;align-items:center;overflow:hidden}.form-field.form-field-combobox .form-field__icons{display:flex;flex-shrink:0;align-items:center;min-height:25px}.form-field.form-field-combobox .form-field__icons>*{display:flex;align-items:center;padding:0 4px}.form-field.form-field-combobox .form-field__icons>*:last-child{margin-right:4px}.form-field.form-field-combobox .form-field__icons .form-field-combobox__icon{cursor:pointer;padding:0;transition:transform .2s linear}.form-field.form-field-combobox .form-field__icons .form-field-combobox__icon_open{transform:rotate(90deg);transform-origin:center center}.form-field.form-field-combobox .form-field-combobox__placeholder{color:#7f7989;font-size:15px;text-align:left;text-transform:capitalize;background-color:transparent}.form-field.form-field-combobox .form-field-combobox__placeholder label{cursor:inherit}.form-field.form-field-combobox .form-field-combobox__select{padding:0;overflow:visible}.form-field.form-field-combobox .form-field-combobox__select-header{display:flex;flex:1;align-items:center;cursor:pointer;height:100%}.form-field.form-field-combobox .form-field-combobox__input{width:100%;padding:0 8px 0 0}.form-field.form-field-combobox .form-field-combobox__input_hidden{flex:0}.form-field-combobox__search{width:100%;padding:12px 0}.form-field-combobox__search-wrapper{position:sticky;top:0;display:flex;align-items:center;margin:0 9px;border-bottom:1px solid rgba(72,63,86,.12);background-color:#fff}.form-field-combobox__dropdown-select{max-width:220px}.form-field-combobox__dropdown-suggestions{max-width:350px}.form-field-combobox__dropdown-list{margin:0;padding:0;min-width:140px;list-style-type:none}.form-field-combobox__dropdown-list-option{padding:8px 15px;word-break:break-all;cursor:pointer}.form-field-combobox__dropdown-list-option:hover{background-color:#f8f7f8}.form-field-combobox__dropdown .pop-up-dialog{width:100%;max-height:250px;padding:0}.form-field-combobox .path-type-store,.form-field-combobox__dropdown .path-type-store{color:#a44cc5}.form-field-combobox .path-type-v3io,.form-field-combobox__dropdown .path-type-v3io{color:#5871f4}.form-field-combobox .path-type-az,.form-field-combobox .path-type-gs,.form-field-combobox .path-type-http,.form-field-combobox .path-type-https,.form-field-combobox .path-type-s3,.form-field-combobox__dropdown .path-type-az,.form-field-combobox__dropdown .path-type-gs,.form-field-combobox__dropdown .path-type-http,.form-field-combobox__dropdown .path-type-https,.form-field-combobox__dropdown .path-type-s3{color:#f98b0a}.form-field-combobox .path-type-dbfs,.form-field-combobox__dropdown .path-type-dbfs{color:#49af53}.form-field-range{align-self:stretch}.form-field-range .range__buttons{display:flex;flex-direction:column;justify-content:center;width:28px;height:100%}.form-field-range .range__button{display:flex;width:100%;height:calc(50% + 1px);align-items:center;justify-content:center;padding:0;background-color:#f5f5f5;cursor:pointer}.form-field-range .range__button svg path{fill:#7f7989}.form-field-range .range__button:hover{background-color:#e7e7e7}.form-field-range .range__button:hover svg path{fill:#4b4760}.form-field-range .range__button:focus{border:1px solid #7f7989}.form-field-range .range__button:active{background-color:#0003;border:1px solid #7f7989}.form-field-range .range__button:active svg path{fill:#4b4760}.form-field-range .range__button:disabled{cursor:not-allowed}.form-field-range .range__button:disabled svg path{fill:#adabb0}.form-field-range .range__button:disabled:focus{border:none}.form-field-range .range__button:disabled:hover{background-color:#f5f5f5}.form-field-range .range__button-increase{border-bottom:1px solid transparent;border-left:1px solid transparent;border-top-right-radius:4px}.form-field-range .range__button-decrease{border-top:1px solid transparent;border-left:1px solid transparent;border-bottom-right-radius:4px}.form-field-range .range__button .decrease{transform:rotate(180deg)}.form-field-range .range-warning{border:1px solid #ea336a}.form-field-range .range-warning_asterisk{position:absolute;top:50%;right:35px;color:#ea336a;transform:translateY(-50%)}.form-field-range .range-warning .range__button-increase{border-top:1px solid #ea336a;border-right:1px solid #ea336a}.form-field-range .range-warning .range__button-decrease{border-right:1px solid #ea336a;border-bottom:1px solid #ea336a}.form-field-range .range__warning-icon{position:absolute;top:50%;right:30px;transform:translateY(-50%)}.form-field-input{width:100%}.form-field-input input{height:inherit;width:100%;padding:12px 16px}.form-field-input .form-field{position:relative;display:flex;flex-flow:column nowrap;height:100%;width:100%}.form-field-input .form-field__label{display:flex;align-items:center;margin-bottom:5px;color:#7f7989;font-size:12px;text-align:left;background-color:transparent}.form-field-input .form-field__label:first-letter{text-transform:uppercase}.form-field-input .form-field__label-mandatory{color:#ea336a}.form-field-input .form-field__label-disabled,.form-field-input .form-field__label-disabled .form-field__label-mandatory{color:#adabb0}.form-field-input .form-field__wrapper{display:flex;flex:1;flex-flow:row nowrap;position:relative;width:100%;color:#4b4760;background-color:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px}.form-field-input .form-field__wrapper-disabled{border:1px solid rgba(173,171,176,.3);color:#adabb0;cursor:not-allowed}.form-field-input .form-field__wrapper-invalid{border:1px solid #ea336a}.form-field-input .form-field__wrapper.without-border{border-color:transparent}.form-field-input .form-field__wrapper-dense{height:36px}.form-field-input .form-field__wrapper-normal{height:40px}.form-field-input .form-field__wrapper-medium{height:44px}.form-field-input .form-field__wrapper-chunky{height:48px}.form-field-input .form-field__control{position:relative;display:flex;flex:1;align-items:center;overflow:hidden}.form-field-input .form-field__icons{display:flex;flex-shrink:0;align-items:center;min-height:25px}.form-field-input .form-field__icons>*{display:flex;align-items:center;padding:0 4px}.form-field-input .form-field__icons>*:last-child{margin-right:4px}.form-field-input .form-field__label-icon{display:inline-flex;margin-left:3px}.form-field-input .form-field__label-icon>*,.form-field-input .form-field__label-icon a{display:inline-flex}.form-field-input .form-field__label-icon a{transform:translateY(-1px)}.form-field-input .form-field__label-icon svg{width:12px;height:12px}.form-field-input .form-field__label-icon svg path{fill:#6279e7}.form-field-input .form-field__suggestion-list{position:absolute;top:100%;left:0;z-index:5;margin:0;padding:7px 0;background-color:#fff;border-radius:4px;box-shadow:0 2px 10px #0003}.form-field-input .form-field__suggestion-list .suggestion-item{padding:7px 15px;color:#483f56;list-style-type:none}.form-field-input .form-field__suggestion-list .suggestion-item:hover{background-color:#f8f7f8;cursor:pointer}.form-field-input input[type=number]{border:none;-moz-appearance:textfield}.form-field-input input[type=number]::-webkit-outer-spin-button,.form-field-input input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.select__item{display:flex;align-items:center;flex-flow:row wrap;width:100%;min-height:45px;padding:10px 15px}.select__item.multiple{padding:0 15px;min-height:0}.select__item.multiple input[type=checkbox]~label{padding-top:16px;padding-bottom:16px}.select__item.hidden{display:none}.select__item .form-field-checkbox{flex:1;height:100%;width:100%}.select__item:hover{background-color:#f8f7f8;cursor:pointer}.select__item.disabled{color:#adabb0;background:#fff;cursor:not-allowed}.select__item .status{margin:0 10px}.select__item .all{margin:0;display:inline-block;width:8px;height:8px;min-width:8px;border-radius:50%;background-color:none}.select__item .label-row{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;width:100%}.select__item-label{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start;flex:1}.select__item-main-label{width:100%;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start}.select__item-sub-label{margin-top:5px;font-size:13px;width:100%}.select__item-icon{display:flex;margin-right:10px}.select__item .checkmark{align-self:flex-start;margin:0 0 0 10px}.select__item .checkmark path{fill:#49af53}.select-tooltip,.form-field-select{width:100%}.form-field-select .form-field{position:relative;display:flex;flex-flow:column nowrap;height:100%;width:100%}.form-field-select .form-field__label{display:flex;align-items:center;margin-bottom:5px;color:#7f7989;font-size:12px;text-align:left;background-color:transparent}.form-field-select .form-field__label:first-letter{text-transform:uppercase}.form-field-select .form-field__label-mandatory{color:#ea336a}.form-field-select .form-field__label-disabled,.form-field-select .form-field__label-disabled .form-field__label-mandatory{color:#adabb0}.form-field-select .form-field__wrapper{display:flex;flex:1;flex-flow:row nowrap;position:relative;width:100%;color:#4b4760;background-color:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px}.form-field-select .form-field__wrapper-disabled{border:1px solid rgba(173,171,176,.3);color:#adabb0;cursor:not-allowed}.form-field-select .form-field__wrapper-invalid{border:1px solid #ea336a}.form-field-select .form-field__wrapper.without-border{border-color:transparent}.form-field-select .form-field__wrapper-dense{height:36px}.form-field-select .form-field__wrapper-normal{height:40px}.form-field-select .form-field__wrapper-medium{height:44px}.form-field-select .form-field__wrapper-chunky{height:48px}.form-field-select .form-field__control{position:relative;display:flex;flex:1;align-items:center;overflow:hidden}.form-field-select .form-field__icons{display:flex;flex-shrink:0;align-items:center;min-height:25px}.form-field-select .form-field__icons>*{display:flex;align-items:center;padding:0 4px}.form-field-select .form-field__icons>*:last-child{margin-right:4px}.form-field-select .form-field__wrapper{cursor:pointer}.form-field-select .form-field__wrapper-active{background:#f8f7f8}.form-field-select .form-field__wrapper-disabled{cursor:not-allowed}.form-field-select .form-field__wrapper-disabled .form-field__caret path{fill:#adabb0}.form-field-select .form-field__select{display:flex;align-items:center;width:100%;padding:0 20px 0 16px}.form-field-select .form-field__select-value{display:block;font-size:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-field-select .form-field__select-placeholder{color:#adabb0}.form-field-select .form-field__select-sub_label{display:block;margin-left:10px;overflow:hidden;color:#7f7989;white-space:nowrap;text-overflow:ellipsis}.form-field-select__options-list .pop-up-dialog{width:100%;padding:0;border-radius:0}.form-field-select__options-list .options-list{margin:0;padding:0;list-style-type:none;max-height:250px;overflow-y:auto}.form-field-select__options-list .options-list__body{width:100%;color:#483f56de;background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:4px;box-shadow:0 4px 8px #0000003b}.form-field-select__options-list .options-list__search{width:100%}.form-field-select__options-list .options-list__search input{width:100%;padding:10px;border:none;border-bottom:1px solid rgba(0,0,0,.2)}.form-field-radio{display:inline-flex;align-items:center;justify-content:flex-start;color:#4b4760;margin-right:15px}.form-field-radio_readonly input{pointer-events:none;opacity:.5}.form-field-radio_readonly input~label,.form-field-radio_readonly input~.label{pointer-events:none;opacity:.5}.form-field-radio input[type=radio]{width:16px;height:16px;border-radius:50%;position:relative;background:#fff;border:1px solid #869cff;color:#869cff;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;outline:0;cursor:pointer}.form-field-radio input[type=radio]:checked:hover{color:#6279e7}.form-field-radio input[type=radio]:checked:hover:disabled{color:#adabb0;border-color:currentColor}.form-field-radio input[type=radio]:disabled{color:#adabb0;border-color:currentColor;cursor:not-allowed;pointer-events:none}.form-field-radio input[type=radio]:disabled:hover{color:#adabb0;border-color:currentColor}.form-field-radio input[type=radio]:disabled~label,.form-field-radio input[type=radio]:disabled~.label{color:#adabb0;cursor:not-allowed}@keyframes pulse-animation{20%{box-shadow:0 0 #6279e780}to{box-shadow:0 0 0 6px #6279e700}}.form-field-radio input[type=radio]:not(:disabled):focus,.form-field-radio input[type=radio]:not(:disabled):active{animation:pulse-animation .5s ease-out}.form-field-radio input[type=radio]:not(:disabled):hover{color:#6279e7;border-color:currentColor}.form-field-radio input[type=radio]~label,.form-field-radio input[type=radio]~.label{display:flex;flex:1;align-items:center;position:relative;cursor:pointer;font-size:1em;padding:0 0 0 .45em;height:inherit;-webkit-user-select:none;user-select:none;white-space:nowrap}.form-field-radio input[type=radio]:before{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;transform:scale(0);transition:transform .2s ease-in-out;box-shadow:inset 1em 1em currentColor}.form-field-radio input[type=radio]:checked:before{transform:scale(1)}.form-field-textarea{width:100%}.form-field-textarea textarea{height:inherit;width:100%;padding:12px 16px;white-space:normal}.form-field-textarea .form-field{position:relative;display:flex;flex-flow:column nowrap;height:100%;width:100%}.form-field-textarea .form-field__label{display:flex;align-items:center;margin-bottom:5px;color:#7f7989;font-size:12px;text-align:left;background-color:transparent}.form-field-textarea .form-field__label:first-letter{text-transform:uppercase}.form-field-textarea .form-field__label-mandatory{color:#ea336a}.form-field-textarea .form-field__label-disabled,.form-field-textarea .form-field__label-disabled .form-field__label-mandatory{color:#adabb0}.form-field-textarea .form-field__wrapper{display:flex;flex:1;flex-flow:row nowrap;position:relative;width:100%;color:#4b4760;background-color:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px}.form-field-textarea .form-field__wrapper-disabled{border:1px solid rgba(173,171,176,.3);color:#adabb0;cursor:not-allowed}.form-field-textarea .form-field__wrapper-invalid{border:1px solid #ea336a}.form-field-textarea .form-field__wrapper.without-border{border-color:transparent}.form-field-textarea .form-field__wrapper-dense{height:36px}.form-field-textarea .form-field__wrapper-normal{height:40px}.form-field-textarea .form-field__wrapper-medium{height:44px}.form-field-textarea .form-field__wrapper-chunky{height:48px}.form-field-textarea .form-field__control{position:relative;display:flex;flex:1;align-items:center;overflow:hidden}.form-field-textarea .form-field__icons{display:flex;flex-shrink:0;align-items:center;min-height:25px}.form-field-textarea .form-field__icons>*{display:flex;align-items:center;padding:0 4px}.form-field-textarea .form-field__icons>*:last-child{margin-right:4px}.form-field-textarea .form-field__wrapper .form-field__control{padding:0}.form-field-textarea .form-field__counter{color:#7f7989;font-size:12px;margin-top:5px;text-align:right}.form-field-toggle{position:relative}.form-field-toggle__switch{height:24px;width:48px;display:flex;cursor:pointer;align-items:center;background-color:#dadada;border-radius:20px;transition:all .2s ease}.form-field-toggle__switch:before{content:"";width:20px;height:20px;background-color:#fff;border-radius:50%;transform:translate(2px);transition:all .2s ease}.form-field-toggle .form-field{position:relative;display:flex;flex-flow:column nowrap;height:100%;width:100%}.form-field-toggle .form-field__label{display:flex;align-items:center;margin-bottom:5px;color:#7f7989;font-size:12px;text-align:left;background-color:transparent}.form-field-toggle .form-field__label:first-letter{text-transform:uppercase}.form-field-toggle .form-field__label-mandatory{color:#ea336a}.form-field-toggle .form-field__label-disabled,.form-field-toggle .form-field__label-disabled .form-field__label-mandatory{color:#adabb0}.form-field-toggle .form-field__wrapper{display:flex;flex:1;flex-flow:row nowrap;position:relative;width:100%;color:#4b4760;background-color:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px}.form-field-toggle .form-field__wrapper-disabled{border:1px solid rgba(173,171,176,.3);color:#adabb0;cursor:not-allowed}.form-field-toggle .form-field__wrapper-invalid{border:1px solid #ea336a}.form-field-toggle .form-field__wrapper.without-border{border-color:transparent}.form-field-toggle .form-field__wrapper-dense{height:36px}.form-field-toggle .form-field__wrapper-normal{height:40px}.form-field-toggle .form-field__wrapper-medium{height:44px}.form-field-toggle .form-field__wrapper-chunky{height:48px}.form-field-toggle .form-field__control{position:relative;display:flex;flex:1;align-items:center;overflow:hidden}.form-field-toggle .form-field__icons{display:flex;flex-shrink:0;align-items:center;min-height:25px}.form-field-toggle .form-field__icons>*{display:flex;align-items:center;padding:0 4px}.form-field-toggle .form-field__icons>*:last-child{margin-right:4px}.form-field-toggle .form-field__wrapper{border:none}.form-field-toggle input[type=checkbox]{display:none;width:0;height:0}.form-field-toggle input[type=checkbox]:disabled+* .form-field-toggle__switch{opacity:.5;pointer-events:none;cursor:default}.form-field-toggle input[type=checkbox]:checked+* .form-field-toggle__switch{background-color:#869cff}.form-field-toggle input[type=checkbox]:checked+* .form-field-toggle__switch:before{transform:translate(26px)}.backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;z-index:9}.backdrop-transition-enter{opacity:0}.backdrop-transition-enter-active,.backdrop-transition-enter-done{opacity:.5;transition:opacity .3s ease-in-out}.backdrop-transition-exit{opacity:.5}.backdrop-transition-exit-active{opacity:0;transition:opacity .3s ease-in-out}.modal{position:fixed;top:50%;left:50%;width:100%;height:660px;max-width:96%;min-width:300px;max-height:96%;outline:0;transform:translate(-50%,-50%);z-index:9}@media screen and (min-width: 1200px){.modal{width:1000px}.modal.modal-sm{width:700px}.modal.modal-lg{width:1400px}.modal.modal-max{width:95vw;height:95vh}}.modal.modal-min{width:500px;height:auto}.modal.modal-max{width:96vw;height:94vw}.modal__content{display:flex;flex-flow:column nowrap;position:relative;min-height:inherit;height:100%;width:100%;max-height:100%;background-color:#fff;border-radius:8px;box-shadow:0 6px 26px #0003;text-align:left}.modal__header{position:relative;border-bottom:1px solid rgba(0,0,0,.2);min-height:92px;padding:1rem 3rem;display:flex;align-items:center;justify-content:center;flex-direction:column}.modal__header-title{color:#4b4760;font-size:2em;text-transform:capitalize;margin:0}.modal__header-sub-title{color:#7f7989;font-size:1.5em;font-weight:500;margin:10px 0 0}.modal__header-preview-text{position:absolute;top:1rem;left:1rem;font-size:1rem}.modal__header-button{position:absolute;top:10px;right:10px}.modal__body{overflow-y:auto;overflow-x:hidden;flex:1 0;padding:1.5rem 2rem 0;margin-bottom:1rem}.modal__footer{display:flex;flex-flow:row nowrap;flex-shrink:0;justify-content:space-between;padding:1rem 2rem;min-height:50px}.modal__footer-actions{display:flex;flex:1 0 auto;justify-content:flex-end;align-items:center}.modal__footer-actions>*:not(:last-child){margin-right:10px}.modal-transition-enter{opacity:0;transform:translate(-50%,100vh)}.modal-transition-enter-active,.modal-transition-enter-done{opacity:1;transform:translate(-50%,-50%);transition:all .3s ease-in-out}.modal-transition-exit{opacity:1;transform:translate(-50%,-50%)}.modal-transition-exit-active{opacity:0;transform:translate(-50%,-70%);transition:all .3s ease-in-out}.table .table-body__cell{line-height:20px}.table .table-body__cell .name-wrapper{display:flex;flex:1;flex-wrap:wrap;align-items:center}.table .table-body__cell .name-wrapper .item-name{color:#4b4760;font-weight:700}.table .table-body__cell .name-wrapper .item-name.function-name{max-width:120px}.table .table-body__cell .name-wrapper .item-tag{max-width:150px}.table .table-body__cell .name-wrapper .item-tag span{display:inline}.table .table-body__cell .name-wrapper .link{display:flex;width:100%;color:#4b4760}.table .table-body__cell .link-subtext{color:#7f7989}.table .table-body__cell .date-uid-row{display:flex;align-items:center;justify-content:space-between;font-weight:400;font-size:12px;font-family:Roboto,sans-serif;font-style:normal;margin-top:5px;width:max-content;min-width:100%}.table .table-body__cell .date-uid-row>span:not(:last-child){margin-right:10px}.table .table-body__cell .date-uid-row span{width:auto}.wizard-steps{display:flex;flex-flow:row nowrap;background-color:#fff;min-width:260px;margin:1.5rem 0;padding:0 2rem}@media screen and (min-width: 1200px){.wizard-steps{flex-flow:column nowrap;overflow-y:auto;padding:0 1rem}.wizard-steps>*:not(:last-child){margin-bottom:10px}}.wizard-steps .wizard-steps__item{display:block;background-color:inherit;color:#4b4760;border:0;border-radius:8px;font-size:1em;padding:8px;min-height:52px;height:auto;width:100%}@media screen and (min-width: 1200px){.wizard-steps .wizard-steps__item{display:flex;align-items:center;justify-content:flex-start}.wizard-steps .wizard-steps__item>*{text-align:left;white-space:normal}}.wizard-steps .wizard-steps__item .wizard-steps__indicator{border-color:#869cff;color:#869cff;background-color:inherit}.wizard-steps .wizard-steps__item.wizard-steps__item_active{background-color:#869cff1f;color:#6279e7}.wizard-steps .wizard-steps__item.wizard-steps__item_active .wizard-steps__indicator{border-color:transparent;color:#fff;background-color:#869cff}.wizard-steps .wizard-steps__item.wizard-steps__item_invalid{color:#ea336a}.wizard-steps .wizard-steps__item.wizard-steps__item_invalid.wizard-steps__item_active{background-color:#ea336a26}.wizard-steps .wizard-steps__item.wizard-steps__item_invalid .wizard-steps__indicator{border-color:#ea336a;color:#ea336a;background-color:inherit}.wizard-steps .wizard-steps__item:disabled{border:0;color:#adabb0}.wizard-steps .wizard-steps__item:disabled .wizard-steps__indicator{border-color:#adabb0;color:#adabb0;background-color:inherit}.wizard-steps .wizard-steps__indicator{display:inline-flex;align-items:center;justify-content:center;border:2px solid transparent;border-radius:50%;padding:10px;margin:0 0 10px;width:36px;height:36px}@media screen and (min-width: 1200px){.wizard-steps .wizard-steps__indicator{flex-flow:row nowrap;text-align:left;margin:0 10px 0 0}}.wizard-form .modal__body{display:flex;flex-flow:column nowrap;overflow:hidden;padding:0}@media screen and (min-width: 1200px){.wizard-form .modal__body{flex-flow:row nowrap}}.wizard-form .wizard-form__content-container{overflow-y:auto;height:100%;width:100%;padding:0 2rem 1.5rem}@media screen and (min-width: 1200px){.wizard-form .wizard-form__content-container{padding:1.5rem 2rem 1.5rem 1rem}}.wizard-form .wizard-form__content{min-width:350px;height:100%}.wizard-form .wizard-form__content .wizard-form__hidden-content-item{position:absolute;visibility:hidden;height:0;opacity:0;pointer-events:none}.wizard-form .wizard-form__content .wizard-form__visible-content-item{height:100%}.wizard-form__back-button svg,.wizard-form__next-button svg{width:14px}.wizard-form__next-button svg{rotate:180deg}

package/dist/scss/common.scss

@@ -5,6 +5,7 @@
 @use './mixins';
 
 :root {
+  --chipBlockMarginRight: 5px;
   --tipArrowLength: 10px;
   --tipIconLength: 16px;
   --tipArrowOffset: 20px;

package/dist/utils/form.util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.util.d.ts","sourceRoot":"","sources":["../../src/lib/utils/form.util.js"],"names":[],"mappings":"AAkBO,2DAUN;AAEM,+EAUN;AAEM,sEAMN;AAEM;;;;;IASN;AAEM,sDAEN"}
+{"version":3,"file":"form.util.d.ts","sourceRoot":"","sources":["../../src/lib/utils/form.util.js"],"names":[],"mappings":"AAkBO,2DAUN;AAEM,+EAaN;AAEM,sEAMN;AAEM;;;;;IASN;AAEM,sDAEN"}

package/dist/utils/form.util.mjs

@@ -1,26 +1,29 @@
-import { set as a, isEqual as u } from "lodash";
-const d = (e, r) => {
-  let t = e[0], n = e[1], i = r.fields[t];
-  if (i)
-    for (let s in n)
-      a(i, s, n[s]);
-}, o = (e, r) => {
-  const t = (n, i) => {
-    if (i !== "")
-      return i;
+import { set as u, isEqual as l, mapValues as d, some as m, get as c, isNil as o, isEmpty as f } from "lodash";
+const p = (e, t) => {
+  let r = e[0], i = e[1], n = t.fields[r];
+  if (n)
+    for (let s in i)
+      u(n, s, i[s]);
+}, b = (e, t) => {
+  const r = (i, n) => {
+    if (n !== "")
+      return n;
   };
-  return !u(JSON.stringify(e, t), JSON.stringify(r, t));
-}, c = (e = []) => e.reduce((r, t) => (r[t.data.key] = t.data.value, r), {}), f = (e = {}) => Object.entries(e).map(([r, t]) => ({
+  return !l(
+    JSON.stringify(a(e), r),
+    JSON.stringify(a(t), r)
+  );
+}, O = (e = []) => e.reduce((t, r) => (t[r.data.key] = r.data.value, t), {}), g = (e = {}) => Object.entries(e).map(([t, r]) => ({
   data: {
-    key: r,
-    value: t
+    key: t,
+    value: r
   }
-})), m = (e) => e.submitting || e.invalid && e.submitFailed;
+})), F = (e) => e.submitting || e.invalid && e.submitFailed, a = (e = {}) => d(e, (t) => Array.isArray(t) ? t.filter((r) => m(c(r, "data", r), (i) => !o(i) && !f(i))) : t);
 export {
-  o as areFormValuesChanged,
-  c as generateObjectFromKeyValue,
-  m as isSubmitDisabled,
-  f as parseObjectToKeyValue,
-  d as setFieldState
+  b as areFormValuesChanged,
+  O as generateObjectFromKeyValue,
+  F as isSubmitDisabled,
+  g as parseObjectToKeyValue,
+  p as setFieldState
 };
 //# sourceMappingURL=form.util.mjs.map

package/dist/utils/form.util.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"form.util.mjs","sources":["../../src/lib/utils/form.util.js"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport { isEqual, set } from 'lodash'\n\nexport const setFieldState = (args, state) => {\n  let fieldName = args[0]\n  let states = args[1]\n  let field = state.fields[fieldName]\n\n  if (field) {\n    for (let stateName in states) {\n      set(field, stateName, states[stateName])\n    }\n  }\n}\n\nexport const areFormValuesChanged = (initialValues, values) => {\n  const replacer = (key, value) => {\n    if (value === '') {\n      return undefined\n    }\n\n    return value\n  }\n\n  return !isEqual(JSON.stringify(initialValues, replacer), JSON.stringify(values, replacer))\n}\n\nexport const generateObjectFromKeyValue = (keyValueList = []) => {\n  return keyValueList.reduce((acc, keyValue) => {\n    acc[keyValue.data.key] = keyValue.data.value\n\n    return acc\n  }, {})\n}\n\nexport const parseObjectToKeyValue = (object = {}) => {\n  return Object.entries(object).map(([key, value]) => {\n    return {\n      data: {\n        key,\n        value\n      }\n    }\n  })\n}\n\nexport const isSubmitDisabled = formState => {\n  return formState.submitting || (formState.invalid && formState.submitFailed)\n}\n"],"names":["setFieldState","args","state","fieldName","states","field","stateName","set","areFormValuesChanged","initialValues","values","replacer","key","value","isEqual","generateObjectFromKeyValue","keyValueList","acc","keyValue","parseObjectToKeyValue","object","isSubmitDisabled","formState"],"mappings":";AAkBY,MAACA,IAAgB,CAACC,GAAMC,MAAU;AAC5C,MAAIC,IAAYF,EAAK,CAAC,GAClBG,IAASH,EAAK,CAAC,GACfI,IAAQH,EAAM,OAAOC,CAAS;AAElC,MAAIE;AACF,aAASC,KAAaF;AACpB,MAAAG,EAAIF,GAAOC,GAAWF,EAAOE,CAAS,CAAC;AAG7C,GAEaE,IAAuB,CAACC,GAAeC,MAAW;AAC7D,QAAMC,IAAW,CAACC,GAAKC,MAAU;AAC/B,QAAIA,MAAU;AAId,aAAOA;AAAA,EACX;AAEE,SAAO,CAACC,EAAQ,KAAK,UAAUL,GAAeE,CAAQ,GAAG,KAAK,UAAUD,GAAQC,CAAQ,CAAC;AAC3F,GAEaI,IAA6B,CAACC,IAAe,OACjDA,EAAa,OAAO,CAACC,GAAKC,OAC/BD,EAAIC,EAAS,KAAK,GAAG,IAAIA,EAAS,KAAK,OAEhCD,IACN,CAAE,CAAA,GAGME,IAAwB,CAACC,IAAS,OACtC,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACR,GAAKC,CAAK,OACrC;AAAA,EACL,MAAM;AAAA,IACJ,KAAAD;AAAA,IACA,OAAAC;AAAA,EACR;AACA,EACG,GAGUQ,IAAmB,CAAAC,MACvBA,EAAU,cAAeA,EAAU,WAAWA,EAAU;"}
+{"version":3,"file":"form.util.mjs","sources":["../../src/lib/utils/form.util.js"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport { get, isEmpty, isEqual, isNil, mapValues, set, some } from 'lodash'\n\nexport const setFieldState = (args, state) => {\n  let fieldName = args[0]\n  let states = args[1]\n  let field = state.fields[fieldName]\n\n  if (field) {\n    for (let stateName in states) {\n      set(field, stateName, states[stateName])\n    }\n  }\n}\n\nexport const areFormValuesChanged = (initialValues, values) => {\n  const replacer = (key, value) => {\n    if (value === '') {\n      return undefined\n    }\n\n    return value\n  }\n\n  return !isEqual(\n    JSON.stringify(clearObjectFromEmptyArrayElements(initialValues), replacer),\n    JSON.stringify(clearObjectFromEmptyArrayElements(values), replacer)\n  )\n}\n\nexport const generateObjectFromKeyValue = (keyValueList = []) => {\n  return keyValueList.reduce((acc, keyValue) => {\n    acc[keyValue.data.key] = keyValue.data.value\n\n    return acc\n  }, {})\n}\n\nexport const parseObjectToKeyValue = (object = {}) => {\n  return Object.entries(object).map(([key, value]) => {\n    return {\n      data: {\n        key,\n        value\n      }\n    }\n  })\n}\n\nexport const isSubmitDisabled = formState => {\n  return formState.submitting || (formState.invalid && formState.submitFailed)\n}\n\nconst clearObjectFromEmptyArrayElements = (obj = {}) => {\n  return mapValues(obj, objValue => {\n    if (!Array.isArray(objValue)) return objValue\n\n    return objValue.filter(arrayElement => {\n      return some(get(arrayElement, 'data', arrayElement), val => !isNil(val) && !isEmpty(val))\n    })\n  })\n}\n"],"names":["setFieldState","args","state","fieldName","states","field","stateName","set","areFormValuesChanged","initialValues","values","replacer","key","value","isEqual","clearObjectFromEmptyArrayElements","generateObjectFromKeyValue","keyValueList","acc","keyValue","parseObjectToKeyValue","object","isSubmitDisabled","formState","obj","mapValues","objValue","arrayElement","some","get","val","isNil","isEmpty"],"mappings":";AAkBY,MAACA,IAAgB,CAACC,GAAMC,MAAU;AAC5C,MAAIC,IAAYF,EAAK,CAAC,GAClBG,IAASH,EAAK,CAAC,GACfI,IAAQH,EAAM,OAAOC,CAAS;AAElC,MAAIE;AACF,aAASC,KAAaF;AACpB,MAAAG,EAAIF,GAAOC,GAAWF,EAAOE,CAAS,CAAC;AAG7C,GAEaE,IAAuB,CAACC,GAAeC,MAAW;AAC7D,QAAMC,IAAW,CAACC,GAAKC,MAAU;AAC/B,QAAIA,MAAU;AAId,aAAOA;AAAA,EACX;AAEE,SAAO,CAACC;AAAA,IACN,KAAK,UAAUC,EAAkCN,CAAa,GAAGE,CAAQ;AAAA,IACzE,KAAK,UAAUI,EAAkCL,CAAM,GAAGC,CAAQ;AAAA,EACtE;AACA,GAEaK,IAA6B,CAACC,IAAe,OACjDA,EAAa,OAAO,CAACC,GAAKC,OAC/BD,EAAIC,EAAS,KAAK,GAAG,IAAIA,EAAS,KAAK,OAEhCD,IACN,CAAE,CAAA,GAGME,IAAwB,CAACC,IAAS,OACtC,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACT,GAAKC,CAAK,OACrC;AAAA,EACL,MAAM;AAAA,IACJ,KAAAD;AAAA,IACA,OAAAC;AAAA,EACR;AACA,EACG,GAGUS,IAAmB,CAAAC,MACvBA,EAAU,cAAeA,EAAU,WAAWA,EAAU,cAG3DR,IAAoC,CAACS,IAAM,OACxCC,EAAUD,GAAK,CAAAE,MACf,MAAM,QAAQA,CAAQ,IAEpBA,EAAS,OAAO,CAAAC,MACdC,EAAKC,EAAIF,GAAc,QAAQA,CAAY,GAAG,CAAAG,MAAO,CAACC,EAAMD,CAAG,KAAK,CAACE,EAAQF,CAAG,CAAC,CACzF,IAJoCJ,CAKtC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "3.1.4",
+    "version": "3.1.6",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "module": "./dist/index.mjs",
     "main": "./dist/index.mjs",

package/dist/images/severity-warning.svg

@@ -1,10 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9993 -0.000671387C18.6266 -0.000671387 23.9993 5.372 23.9993 12C23.9993 18.6273 18.6266 23.9993 11.9993 23.9993C5.37127 23.9993 -0.000732422 18.6273 -0.000732422 12C-0.000732422 5.372 5.37127 -0.000671387 11.9993 -0.000671387ZM11.3279 15.9893H12.6699C13.0399 15.9893 13.3406 16.288 13.3406 16.6567V17.992C13.3406 18.3607 13.0399 18.6593 12.6699 18.6593H11.3279C11.2401 18.6595 11.1531 18.6424 11.0719 18.6089C10.9908 18.5755 10.9169 18.5264 10.8547 18.4644C10.7925 18.4025 10.7431 18.3288 10.7093 18.2478C10.6756 18.1667 10.6581 18.0798 10.6579 17.992V16.6567C10.6579 16.288 10.9579 15.9893 11.3279 15.9893ZM11.3279 5.33H12.6699C13.0399 5.33 13.3406 5.61466 13.3406 5.966V13.3413C13.3406 13.7093 13.0399 14.0073 12.6699 14.0073H11.3279C11.2402 14.0076 11.1533 13.9906 11.0722 13.9572C10.991 13.9239 10.9172 13.8749 10.855 13.8131C10.7928 13.7512 10.7434 13.6778 10.7095 13.5968C10.6757 13.5159 10.6582 13.4291 10.6579 13.3413V5.966C10.6579 5.61466 10.9579 5.33 11.3279 5.33Z" fill="#F7DD00"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>