iguazio.dashboard-react-controls 3.1.3 → 3.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/FormChipCell/FormChipCell.d.ts.map +1 -1
- package/dist/components/FormChipCell/FormChipCell.mjs +43 -43
- package/dist/components/FormChipCell/FormChipCell.mjs.map +1 -1
- package/dist/hooks/useChipCell.hook.d.ts.map +1 -1
- package/dist/hooks/useChipCell.hook.mjs +27 -24
- package/dist/hooks/useChipCell.hook.mjs.map +1 -1
- package/dist/hooks/useDetails.hook.d.ts.map +1 -1
- package/dist/hooks/useDetails.hook.mjs +19 -18
- package/dist/hooks/useDetails.hook.mjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/scss/common.scss +1 -0
- package/dist/utils/form.util.d.ts.map +1 -1
- package/dist/utils/form.util.mjs +23 -20
- package/dist/utils/form.util.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormChipCell.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormChipCell/FormChipCell.jsx"],"names":[],"mappings":";AAiCA;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"FormChipCell.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FormChipCell/FormChipCell.jsx"],"names":[],"mappings":";AAiCA;;;;;;;;;;;;;;;;;;;;;;gBAwWC;;;;;;;;;;;;;;;;;;;6BAlX4B,aAAa"}
|
|
@@ -2,7 +2,7 @@ import { jsxs as ne, jsx as T } from "react/jsx-runtime";
|
|
|
2
2
|
import pe, { useState as k, useMemo as ce, useCallback as y } from "react";
|
|
3
3
|
import he, { get as F, set as O, isEmpty as D, isNil as ae } from "lodash";
|
|
4
4
|
import de from "classnames";
|
|
5
|
-
import
|
|
5
|
+
import o from "prop-types";
|
|
6
6
|
import fe from "./FormChipCellView.mjs";
|
|
7
7
|
import { CHIP_OPTIONS as me } from "../../types.mjs";
|
|
8
8
|
import { CLICK as Ce, TAB as H, TAB_SHIFT as U } from "../../constants.mjs";
|
|
@@ -28,7 +28,7 @@ let R = ({
|
|
|
28
28
|
initialValues: q,
|
|
29
29
|
isEditable: m = !1,
|
|
30
30
|
label: V = null,
|
|
31
|
-
name:
|
|
31
|
+
name: r,
|
|
32
32
|
onClick: w = () => {
|
|
33
33
|
},
|
|
34
34
|
shortChips: $ = !1,
|
|
@@ -56,28 +56,28 @@ let R = ({
|
|
|
56
56
|
isNewChip: !1
|
|
57
57
|
});
|
|
58
58
|
let E = ce(() => m || I === "all" ? {
|
|
59
|
-
visibleChips: F(n.values,
|
|
59
|
+
visibleChips: F(n.values, r),
|
|
60
60
|
hiddenChips: []
|
|
61
61
|
} : ye(
|
|
62
|
-
F(n.values,
|
|
62
|
+
F(n.values, r),
|
|
63
63
|
I || j
|
|
64
|
-
), [I, m, j, n.values,
|
|
64
|
+
), [I, m, j, n.values, r]);
|
|
65
65
|
const N = y(
|
|
66
66
|
(e) => {
|
|
67
|
-
Ie(F(q,
|
|
67
|
+
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 });
|
|
68
68
|
},
|
|
69
|
-
[q,
|
|
69
|
+
[q, r, n]
|
|
70
70
|
), M = y(
|
|
71
71
|
(e, i) => {
|
|
72
72
|
var t;
|
|
73
|
-
const
|
|
74
|
-
!p.isEdit && !p.chipIndex && n.form.mutators.push(
|
|
75
|
-
id:
|
|
73
|
+
const u = ((t = i.value) == null ? void 0 : t.length) || 0;
|
|
74
|
+
!p.isEdit && !p.chipIndex && n.form.mutators.push(r, {
|
|
75
|
+
id: u + /* @__PURE__ */ new Date(),
|
|
76
76
|
key: "",
|
|
77
77
|
value: "",
|
|
78
78
|
delimiter: _
|
|
79
79
|
}), P && K(!1), C({
|
|
80
|
-
chipIndex:
|
|
80
|
+
chipIndex: u,
|
|
81
81
|
isEdit: !0,
|
|
82
82
|
isKeyFocused: !0,
|
|
83
83
|
isValueFocused: !1,
|
|
@@ -89,27 +89,27 @@ let R = ({
|
|
|
89
89
|
p.chipIndex,
|
|
90
90
|
P,
|
|
91
91
|
n.form.mutators,
|
|
92
|
-
|
|
92
|
+
r,
|
|
93
93
|
_,
|
|
94
94
|
K
|
|
95
95
|
]
|
|
96
96
|
), g = y(
|
|
97
|
-
(e, i,
|
|
97
|
+
(e, i, u, t = !1) => {
|
|
98
98
|
N(
|
|
99
|
-
he.chain(n).get(["values",
|
|
100
|
-
), i.
|
|
99
|
+
he.chain(n).get(["values", r]).filter((s, l) => l !== u).value()
|
|
100
|
+
), i.length === 1 ? n.form.change(r, []) : i.remove(u), d && d(), e && !t && e.stopPropagation();
|
|
101
101
|
},
|
|
102
|
-
[N, n,
|
|
102
|
+
[N, n, r, d]
|
|
103
103
|
), ee = y(
|
|
104
|
-
(e, i,
|
|
104
|
+
(e, i, u, t) => {
|
|
105
105
|
const { key: s, value: l } = i.value[p.chipIndex], h = !!(s != null && s.trim() && (l != null && l.trim()));
|
|
106
|
-
|
|
106
|
+
u === Ce ? (h || g(e, i, p.chipIndex, t), C({
|
|
107
107
|
chipIndex: null,
|
|
108
108
|
isEdit: !1,
|
|
109
109
|
isKeyFocused: !1,
|
|
110
110
|
isValueFocused: !1,
|
|
111
111
|
isNewChip: !1
|
|
112
|
-
}), h && d && d()) :
|
|
112
|
+
}), h && d && d()) : u === H ? (h || g(e, i, p.chipIndex), C((a) => {
|
|
113
113
|
const c = a.chipIndex + 1 > i.value.length - 1;
|
|
114
114
|
return h && c && d && d(), {
|
|
115
115
|
chipIndex: c ? null : a.chipIndex + 1,
|
|
@@ -118,7 +118,7 @@ let R = ({
|
|
|
118
118
|
isValueFocused: !1,
|
|
119
119
|
isNewChip: !1
|
|
120
120
|
};
|
|
121
|
-
})) :
|
|
121
|
+
})) : u === U && (h || g(e, i, p.chipIndex), C((a) => {
|
|
122
122
|
const c = a.chipIndex === 0;
|
|
123
123
|
return h && c && d && d(), {
|
|
124
124
|
chipIndex: c ? null : a.chipIndex - 1,
|
|
@@ -127,18 +127,18 @@ let R = ({
|
|
|
127
127
|
isValueFocused: !c,
|
|
128
128
|
isNewChip: !1
|
|
129
129
|
};
|
|
130
|
-
})), N(F(n.values,
|
|
130
|
+
})), 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();
|
|
131
131
|
},
|
|
132
132
|
[
|
|
133
133
|
p.chipIndex,
|
|
134
134
|
N,
|
|
135
135
|
n.values,
|
|
136
|
-
|
|
136
|
+
r,
|
|
137
137
|
d,
|
|
138
138
|
g
|
|
139
139
|
]
|
|
140
140
|
), ie = y(
|
|
141
|
-
(e, i,
|
|
141
|
+
(e, i, u) => {
|
|
142
142
|
if (m) {
|
|
143
143
|
const { clientX: t, clientY: s } = e;
|
|
144
144
|
let l = !1;
|
|
@@ -157,7 +157,7 @@ let R = ({
|
|
|
157
157
|
t,
|
|
158
158
|
s,
|
|
159
159
|
e.target.firstElementChild
|
|
160
|
-
)) : l = e.target.name ===
|
|
160
|
+
)) : l = e.target.name === u, C((a) => ({
|
|
161
161
|
...a,
|
|
162
162
|
chipIndex: i,
|
|
163
163
|
isEdit: !0,
|
|
@@ -171,14 +171,14 @@ let R = ({
|
|
|
171
171
|
), se = (e) => {
|
|
172
172
|
if (!e) return null;
|
|
173
173
|
let i = [];
|
|
174
|
-
const
|
|
174
|
+
const u = (t, s) => !e.some(({ key: l }, h) => t === l && h !== s);
|
|
175
175
|
return D(v) || (i = e.map((t) => {
|
|
176
176
|
const [s, l] = le(t);
|
|
177
177
|
return s && l ? { key: s, value: l } : s ? { key: s } : l ? { value: l } : null;
|
|
178
178
|
})), e.forEach((t, s) => {
|
|
179
|
-
|
|
179
|
+
u(t.key, s) || (F(i, [s, "key"], !1) ? i.at(s).key.push(z) : O(i, [s, "key"], [z]));
|
|
180
180
|
}), D(i) && x && (i = x(e)), i.every((t) => ae(t)) ? null : i;
|
|
181
|
-
}, le = ({ key: e, value: i, disabled:
|
|
181
|
+
}, le = ({ key: e, value: i, disabled: u }) => {
|
|
182
182
|
const t = (s, l) => {
|
|
183
183
|
const [h, a] = ge(
|
|
184
184
|
v[l].filter((f) => f.pattern),
|
|
@@ -186,9 +186,9 @@ let R = ({
|
|
|
186
186
|
);
|
|
187
187
|
return a ? null : h.filter((f) => !f.isValid).map((f) => ({ name: f.name, label: f.label }));
|
|
188
188
|
};
|
|
189
|
-
return
|
|
189
|
+
return u ? [null, null] : [t(e, "key"), t(i, "value")];
|
|
190
190
|
};
|
|
191
|
-
return /* @__PURE__ */ ne("div", { className: W, "data-testid": `${
|
|
191
|
+
return /* @__PURE__ */ ne("div", { className: W, "data-testid": `${r}-chips`, children: [
|
|
192
192
|
V && /* @__PURE__ */ T("div", { className: "chips__label", children: V }),
|
|
193
193
|
/* @__PURE__ */ T("div", { className: V ? "chips__wrapper" : "", children: /* @__PURE__ */ T(
|
|
194
194
|
fe,
|
|
@@ -204,7 +204,7 @@ let R = ({
|
|
|
204
204
|
handleShowElements: J,
|
|
205
205
|
handleToEditMode: ie,
|
|
206
206
|
isEditable: m,
|
|
207
|
-
name:
|
|
207
|
+
name: r,
|
|
208
208
|
ref: { chipsCellRef: A, chipsWrapperRef: G, hiddenChipsCounterRef: L, hiddenChipsPopUpRef: Q },
|
|
209
209
|
setChipSizeIsRecalculated: Y,
|
|
210
210
|
setChipsSizes: Z,
|
|
@@ -220,19 +220,19 @@ let R = ({
|
|
|
220
220
|
};
|
|
221
221
|
R.propTypes = {
|
|
222
222
|
chipOptions: me,
|
|
223
|
-
className:
|
|
224
|
-
delimiter:
|
|
225
|
-
formState:
|
|
226
|
-
initialValues:
|
|
227
|
-
isEditable:
|
|
228
|
-
label:
|
|
229
|
-
name:
|
|
230
|
-
onClick:
|
|
231
|
-
onExitEditModeCallback:
|
|
232
|
-
shortChips:
|
|
233
|
-
validationRules:
|
|
234
|
-
validator:
|
|
235
|
-
visibleChipsMaxLength:
|
|
223
|
+
className: o.string,
|
|
224
|
+
delimiter: o.oneOfType([o.string, o.element]),
|
|
225
|
+
formState: o.object.isRequired,
|
|
226
|
+
initialValues: o.object.isRequired,
|
|
227
|
+
isEditable: o.bool,
|
|
228
|
+
label: o.string,
|
|
229
|
+
name: o.string.isRequired,
|
|
230
|
+
onClick: o.func,
|
|
231
|
+
onExitEditModeCallback: o.func,
|
|
232
|
+
shortChips: o.bool,
|
|
233
|
+
validationRules: o.object,
|
|
234
|
+
validator: o.func,
|
|
235
|
+
visibleChipsMaxLength: o.oneOfType([o.string, o.number])
|
|
236
236
|
};
|
|
237
237
|
R = pe.memo(R);
|
|
238
238
|
const He = R;
|
|
@@ -1 +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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"}
|
|
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\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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChipCell.hook.d.ts","sourceRoot":"","sources":["../../src/lib/hooks/useChipCell.hook.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useChipCell.hook.d.ts","sourceRoot":"","sources":["../../src/lib/hooks/useChipCell.hook.js"],"names":[],"mappings":"AA6BO;;;;;;;;;;;EA4IN"}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
import { useState as
|
|
1
|
+
import { useState as w, useMemo as S, useRef as g, useCallback as C, useEffect as v, useLayoutEffect as H } from "react";
|
|
2
2
|
import { throttle as P } from "lodash";
|
|
3
|
-
import { getTransitionEndEventName as N, isEveryObjectValueEmpty as
|
|
4
|
-
import { getFirstScrollableParent as
|
|
5
|
-
const
|
|
6
|
-
const [o, l] =
|
|
3
|
+
import { getScssVariableValue as I, getTransitionEndEventName as N, isEveryObjectValueEmpty as W } from "../utils/common.util.mjs";
|
|
4
|
+
import { getFirstScrollableParent as x } from "../utils/getFirstScrollableParent.util.mjs";
|
|
5
|
+
const A = (s, b) => {
|
|
6
|
+
const [o, l] = w(!1), [c, k] = w({}), [z, B] = w(!1), [j, y] = w(8), E = S(
|
|
7
|
+
() => parseInt(I("--chipBlockMarginRight")),
|
|
8
|
+
[]
|
|
9
|
+
), m = S(() => N(), []), L = g(), O = g(), a = g(), n = g(), f = C(
|
|
7
10
|
(e) => {
|
|
8
11
|
var u, i;
|
|
9
12
|
(!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) => {
|
|
|
11
14
|
[s, o, b]
|
|
12
15
|
);
|
|
13
16
|
v(() => (o && window.addEventListener("click", f, !0), () => window.removeEventListener("click", f, !0)), [o, f]);
|
|
14
|
-
const
|
|
17
|
+
const p = C(
|
|
15
18
|
(e) => {
|
|
16
19
|
e.target.parentElement !== (n == null ? void 0 : n.current) && l(!1);
|
|
17
20
|
},
|
|
18
21
|
[n]
|
|
19
22
|
);
|
|
20
|
-
v(() => (o && window.addEventListener("scroll",
|
|
21
|
-
const
|
|
23
|
+
v(() => (o && window.addEventListener("scroll", p, !0), () => window.removeEventListener("scroll", p, !0)), [p, o]);
|
|
24
|
+
const h = C(() => {
|
|
22
25
|
var e, u;
|
|
23
26
|
if (n != null && n.current) {
|
|
24
|
-
const r =
|
|
27
|
+
const r = x(a.current.offsetParent).getBoundingClientRect(), t = (e = a.current) == null ? void 0 : e.getBoundingClientRect();
|
|
25
28
|
(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);
|
|
26
29
|
}
|
|
27
|
-
if (!s && !
|
|
28
|
-
const i = (u =
|
|
30
|
+
if (!s && !W(c)) {
|
|
31
|
+
const i = (u = L.current) == null ? void 0 : u.getBoundingClientRect().width;
|
|
29
32
|
let r = 0, t = 0;
|
|
30
|
-
const
|
|
31
|
-
Object.values(c).every((
|
|
33
|
+
const V = 65;
|
|
34
|
+
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);
|
|
32
35
|
}
|
|
33
|
-
}, [c, s]);
|
|
36
|
+
}, [E, c, s]);
|
|
34
37
|
return H(() => {
|
|
35
|
-
|
|
36
|
-
}, [
|
|
37
|
-
const e = P(
|
|
38
|
+
h();
|
|
39
|
+
}, [h]), v(() => {
|
|
40
|
+
const e = P(h, 500);
|
|
38
41
|
if (!s)
|
|
39
|
-
return window.addEventListener("resize", e), window.addEventListener(
|
|
40
|
-
window.removeEventListener("resize", e), window.removeEventListener(
|
|
42
|
+
return window.addEventListener("resize", e), window.addEventListener(m, e), () => {
|
|
43
|
+
window.removeEventListener("resize", e), window.removeEventListener(m, e);
|
|
41
44
|
};
|
|
42
|
-
}, [
|
|
43
|
-
chipsCellRef:
|
|
45
|
+
}, [h, s, m]), {
|
|
46
|
+
chipsCellRef: L,
|
|
44
47
|
chipsWrapperRef: O,
|
|
45
48
|
handleShowElements: f,
|
|
46
49
|
hiddenChipsCounterRef: a,
|
|
47
50
|
hiddenChipsPopUpRef: n,
|
|
48
|
-
setChipsSizes:
|
|
51
|
+
setChipsSizes: k,
|
|
49
52
|
setShowHiddenChips: l,
|
|
50
|
-
showChips:
|
|
53
|
+
showChips: z,
|
|
51
54
|
showHiddenChips: o,
|
|
52
55
|
visibleChipsCount: j
|
|
53
56
|
};
|
|
54
57
|
};
|
|
55
58
|
export {
|
|
56
|
-
|
|
59
|
+
A as useChipCell
|
|
57
60
|
};
|
|
58
61
|
//# sourceMappingURL=useChipCell.hook.mjs.map
|
|
@@ -1 +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 {
|
|
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 {\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":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDetails.hook.d.ts","sourceRoot":"","sources":["../../src/lib/hooks/useDetails.hook.jsx"],"names":[],"mappings":"AAyIO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useDetails.hook.d.ts","sourceRoot":"","sources":["../../src/lib/hooks/useDetails.hook.jsx"],"names":[],"mappings":"AAyIO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuLN"}
|
|
@@ -11,8 +11,8 @@ import { useParams as ne, useLocation as re } from "react-router-dom";
|
|
|
11
11
|
import se from "../components/BlockerSpy/BlockerSpy.mjs";
|
|
12
12
|
import oe from "../components/ErrorMessage/ErrorMessage.mjs";
|
|
13
13
|
import ae from "../components/Loader/Loader.mjs";
|
|
14
|
-
import
|
|
15
|
-
import
|
|
14
|
+
import ce from "../components/TabsSlider/TabsSlider.mjs";
|
|
15
|
+
import ie from "../components/ConfirmDialog/ConfirmDialog.mjs";
|
|
16
16
|
import { setDetailsPopUpInfoContent as me, removeDetailsPopUpInfoContent as ue, setInfoContent as de, removeInfoContent as le, resetChanges as j, showWarning as A, setFiltersWasHandled as D, setEditMode as he } from "../reducers/commonDetailsReducer.mjs";
|
|
17
17
|
import { PRIMARY_BUTTON as fe, TERTIARY_BUTTON as pe, VIEW_SEARCH_PARAMETER as x } from "../constants.mjs";
|
|
18
18
|
import { DETAILS_MENU as ge } from "../types.mjs";
|
|
@@ -31,19 +31,19 @@ const H = ({
|
|
|
31
31
|
leavePage: T,
|
|
32
32
|
params: h,
|
|
33
33
|
renderHeader: n,
|
|
34
|
-
renderTabsContent:
|
|
34
|
+
renderTabsContent: i,
|
|
35
35
|
setBlocker: S,
|
|
36
36
|
setDetailsPopUpSelectedTab: b = null,
|
|
37
37
|
shouldDetailsBlock: v,
|
|
38
38
|
withActionMenu: k = !0
|
|
39
39
|
}) => /* @__PURE__ */ d(X, { form: q.current, onSubmit: () => {
|
|
40
|
-
}, children: (
|
|
40
|
+
}, children: (c) => /* @__PURE__ */ W("div", { className: a, ref: g, "data-testid": "detailsPanel", children: [
|
|
41
41
|
s.loadingCounter > 0 && /* @__PURE__ */ d(ae, {}),
|
|
42
42
|
s.error && /* @__PURE__ */ d(oe, { message: s.error.message }),
|
|
43
43
|
/* @__PURE__ */ W("div", { className: "item-header-wrapper", children: [
|
|
44
44
|
n(),
|
|
45
45
|
k && /* @__PURE__ */ d(
|
|
46
|
-
|
|
46
|
+
ce,
|
|
47
47
|
{
|
|
48
48
|
initialTab: t ? E : h.tab,
|
|
49
49
|
isDetailsPopUp: t,
|
|
@@ -53,9 +53,9 @@ const H = ({
|
|
|
53
53
|
}
|
|
54
54
|
)
|
|
55
55
|
] }),
|
|
56
|
-
/* @__PURE__ */ d("div", { className: "item-info", children: c
|
|
56
|
+
/* @__PURE__ */ d("div", { className: "item-info", children: i(c) }),
|
|
57
57
|
(f.state === "blocked" || p.showWarning) && /* @__PURE__ */ d(
|
|
58
|
-
|
|
58
|
+
ie,
|
|
59
59
|
{
|
|
60
60
|
cancelButton: {
|
|
61
61
|
handler: R,
|
|
@@ -103,14 +103,14 @@ const De = ({
|
|
|
103
103
|
isDetailsScreen: E,
|
|
104
104
|
selectedItem: g
|
|
105
105
|
}) => {
|
|
106
|
-
const [s, R] = G({}), q = w(), t = ee(), T = w(), h = ne(), n = te((e) => e.commonDetailsStore),
|
|
107
|
-
|
|
106
|
+
const [s, R] = G({}), q = w(), t = ee(), T = w(), h = ne(), n = te((e) => e.commonDetailsStore), i = re(), [S, b] = J(() => a ? [me, ue] : [de, le], [a]), v = w(
|
|
107
|
+
i.pathname.substring(0, i.pathname.lastIndexOf(h.tab))
|
|
108
108
|
), k = Q(
|
|
109
109
|
"table__item",
|
|
110
110
|
n.showWarning && "pop-up-dialog-opened",
|
|
111
111
|
E && "table__item_big",
|
|
112
112
|
a && "table__item-popup"
|
|
113
|
-
),
|
|
113
|
+
), c = w(
|
|
114
114
|
V({
|
|
115
115
|
initialValues: o,
|
|
116
116
|
mutators: { ...K, setFieldState: Re },
|
|
@@ -146,14 +146,14 @@ const De = ({
|
|
|
146
146
|
);
|
|
147
147
|
C(() => {
|
|
148
148
|
var e, m;
|
|
149
|
-
|
|
149
|
+
c.current && n.changes.counter === 0 && !Z(y(o), y((e = c.current.getState()) == null ? void 0 : e.values)) && !((m = c.current.getState()) != null && m.active) && c.current.restart(o);
|
|
150
150
|
}, [o, n.changes.counter]), C(() => {
|
|
151
|
-
const e =
|
|
151
|
+
const e = i.pathname.substring(
|
|
152
152
|
0,
|
|
153
|
-
|
|
153
|
+
i.pathname.lastIndexOf(h.tab)
|
|
154
154
|
);
|
|
155
|
-
v.current !== e && !a && (
|
|
156
|
-
}, [t, o, a,
|
|
155
|
+
v.current !== e && !a && (c.current.restart(o), t(he(!1)), v.current = e);
|
|
156
|
+
}, [t, o, a, i.pathname, h.tab]);
|
|
157
157
|
const O = l(() => {
|
|
158
158
|
f(n.changes).then(() => {
|
|
159
159
|
t(j());
|
|
@@ -161,6 +161,7 @@ const De = ({
|
|
|
161
161
|
setTimeout(() => {
|
|
162
162
|
p(e, g);
|
|
163
163
|
});
|
|
164
|
+
}).catch(() => {
|
|
164
165
|
});
|
|
165
166
|
}, [
|
|
166
167
|
f,
|
|
@@ -169,7 +170,7 @@ const De = ({
|
|
|
169
170
|
t,
|
|
170
171
|
g
|
|
171
172
|
]), _ = l(() => {
|
|
172
|
-
n.changes.counter > 0 && (t(j()),
|
|
173
|
+
n.changes.counter > 0 && (t(j()), c.current.reset(o));
|
|
173
174
|
}, [n.changes.counter, t, o]), F = l(() => {
|
|
174
175
|
var e;
|
|
175
176
|
_(), u(!1), n.filtersWasHandled && t(D(!1)), (e = s.proceed) == null || e.call(s), window.dispatchEvent(new CustomEvent("discardChanges"));
|
|
@@ -187,10 +188,10 @@ const De = ({
|
|
|
187
188
|
detailsRef: T,
|
|
188
189
|
commonDetailsStore: n,
|
|
189
190
|
doNotLeavePage: Y,
|
|
190
|
-
formRef:
|
|
191
|
+
formRef: c,
|
|
191
192
|
handleShowWarning: u,
|
|
192
193
|
leavePage: F,
|
|
193
|
-
location:
|
|
194
|
+
location: i,
|
|
194
195
|
params: h,
|
|
195
196
|
removeDetailsInfo: b,
|
|
196
197
|
setBlocker: R,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDetails.hook.mjs","sources":["../../src/lib/hooks/useDetails.hook.jsx"],"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 React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport arrayMutators from 'final-form-arrays'\nimport classnames from 'classnames'\nimport { Form } from 'react-final-form'\nimport { cloneDeep, isEqual, pickBy } from 'lodash'\nimport { createForm } from 'final-form'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { useLocation, useParams } from 'react-router-dom'\n\nimport BlockerSpy from '../components/BlockerSpy/BlockerSpy'\nimport ErrorMessage from '../components/ErrorMessage/ErrorMessage'\nimport Loader from '../components/Loader/Loader'\nimport TabsSlider from '../components/TabsSlider/TabsSlider'\nimport ConfirmDialog from '../components/ConfirmDialog/ConfirmDialog'\n\nimport {\n removeDetailsPopUpInfoContent,\n removeInfoContent,\n resetChanges,\n setDetailsPopUpInfoContent,\n setEditMode,\n setFiltersWasHandled,\n setInfoContent,\n showWarning\n} from '../reducers/commonDetailsReducer'\nimport { PRIMARY_BUTTON, TERTIARY_BUTTON } from '../constants'\nimport { VIEW_SEARCH_PARAMETER } from '../constants'\nimport { DETAILS_MENU } from '../types'\nimport { setFieldState } from '../utils/form.util'\n\nconst DetailsContainer = ({\n blocker,\n commonDetailsStore,\n detailsMenu,\n detailsPanelClassNames,\n detailsPopUpSelectedTab = '',\n detailsRef,\n detailsStore,\n doNotLeavePage,\n formRef,\n isDetailsPopUp = null,\n leavePage,\n params,\n renderHeader,\n renderTabsContent,\n setBlocker,\n setDetailsPopUpSelectedTab = null,\n shouldDetailsBlock,\n withActionMenu = true\n}) => {\n return (\n <Form form={formRef.current} onSubmit={() => {}}>\n {formState => (\n <div className={detailsPanelClassNames} ref={detailsRef} data-testid=\"detailsPanel\">\n {detailsStore.loadingCounter > 0 && <Loader />}\n {detailsStore.error && <ErrorMessage message={detailsStore.error.message} />}\n <div className=\"item-header-wrapper\">\n {renderHeader()}\n {withActionMenu && (\n <TabsSlider\n initialTab={isDetailsPopUp ? detailsPopUpSelectedTab : params.tab}\n isDetailsPopUp={isDetailsPopUp}\n onClick={newTab => setDetailsPopUpSelectedTab && setDetailsPopUpSelectedTab(newTab)}\n skipLink={isDetailsPopUp}\n tabsList={detailsMenu}\n />\n )}\n </div>\n <div className=\"item-info\">{renderTabsContent(formState)}</div>\n {(blocker.state === 'blocked' || commonDetailsStore.showWarning) && (\n <ConfirmDialog\n cancelButton={{\n handler: doNotLeavePage,\n label: 'Cancel',\n variant: TERTIARY_BUTTON\n }}\n closePopUp={doNotLeavePage}\n confirmButton={{\n handler: leavePage,\n label: 'Yes',\n variant: PRIMARY_BUTTON\n }}\n header=\"You have unsaved changes.\"\n isOpen={blocker.state === 'blocked' || commonDetailsStore.showWarning}\n message=\"Do you want to discard the changes?\"\n />\n )}\n {!isDetailsPopUp && (\n <BlockerSpy setBlocker={setBlocker} shouldBlock={shouldDetailsBlock} />\n )}\n </div>\n )}\n </Form>\n )\n}\n\nDetailsContainer.propTypes = {\n blocker: PropTypes.object.isRequired,\n detailsMenu: DETAILS_MENU.isRequired,\n detailsPanelClassNames: PropTypes.string.isRequired,\n detailsPopUpSelectedTab: PropTypes.string,\n detailsRef: PropTypes.object.isRequired,\n detailsStore: PropTypes.object.isRequired,\n commonDetailsStore: PropTypes.object.isRequired,\n doNotLeavePage: PropTypes.func.isRequired,\n formRef: PropTypes.object.isRequired,\n isDetailsPopUp: PropTypes.bool,\n leavePage: PropTypes.func.isRequired,\n params: PropTypes.object.isRequired,\n renderHeader: PropTypes.func.isRequired,\n renderTabsContent: PropTypes.func.isRequired,\n setBlocker: PropTypes.func.isRequired,\n setDetailsPopUpSelectedTab: PropTypes.func,\n shouldDetailsBlock: PropTypes.func.isRequired,\n withActionMenu: PropTypes.bool\n}\n\nexport const useDetails = ({\n applyDetailsChanges,\n applyDetailsChangesCallback,\n formInitialValues,\n isDetailsPopUp,\n isDetailsScreen,\n selectedItem\n}) => {\n const [blocker, setBlocker] = useState({})\n const applyChangesRef = useRef()\n const dispatch = useDispatch()\n const detailsRef = useRef()\n const params = useParams()\n const commonDetailsStore = useSelector(store => store.commonDetailsStore)\n const location = useLocation()\n const [setDetailsInfo, removeDetailsInfo] = useMemo(() => {\n return isDetailsPopUp\n ? [setDetailsPopUpInfoContent, removeDetailsPopUpInfoContent]\n : [setInfoContent, removeInfoContent]\n }, [isDetailsPopUp])\n const previousPathnameRef = useRef(\n location.pathname.substring(0, location.pathname.lastIndexOf(params.tab))\n )\n const detailsPanelClassNames = classnames(\n 'table__item',\n commonDetailsStore.showWarning && 'pop-up-dialog-opened',\n isDetailsScreen && 'table__item_big',\n isDetailsPopUp && 'table__item-popup'\n )\n\n const formRef = useRef(\n createForm({\n initialValues: formInitialValues,\n mutators: { ...arrayMutators, setFieldState },\n onSubmit: () => {}\n })\n )\n\n useEffect(() => {\n return () => {\n if (!isDetailsPopUp) {\n dispatch(resetChanges())\n }\n }\n }, [dispatch, isDetailsPopUp])\n\n const handleShowWarning = useCallback(\n show => {\n dispatch(showWarning(show))\n },\n [dispatch]\n )\n\n const handleRefreshClick = useCallback(\n event => {\n if (\n commonDetailsStore.changes.counter > 0 &&\n document.getElementById('refresh')?.contains(event.target)\n ) {\n handleShowWarning(true)\n dispatch(setFiltersWasHandled(true))\n }\n },\n [commonDetailsStore.changes.counter, dispatch, handleShowWarning]\n )\n\n useEffect(() => {\n window.addEventListener('click', handleRefreshClick)\n\n return () => {\n window.removeEventListener('click', handleRefreshClick)\n }\n }, [handleRefreshClick])\n\n const shouldDetailsBlock = useCallback(\n ({ currentLocation, nextLocation }) => {\n const currentDetailsView = currentLocation.search.split(`${VIEW_SEARCH_PARAMETER}=`)?.[1]\n const nextDetailsView = nextLocation.search.split(`${VIEW_SEARCH_PARAMETER}=`)?.[1]\n const currentLocationPathname = currentLocation.pathname.split('/')\n const nextLocationPathname = nextLocation.pathname.split('/')\n currentLocationPathname.pop()\n nextLocationPathname.pop()\n\n return (\n commonDetailsStore.changes.counter > 0 &&\n (currentLocationPathname.join('/') !== nextLocationPathname.join('/') ||\n currentDetailsView !== nextDetailsView)\n )\n },\n [commonDetailsStore.changes.counter]\n )\n\n useEffect(() => {\n if (\n formRef.current &&\n commonDetailsStore.changes.counter === 0 &&\n !isEqual(pickBy(formInitialValues), pickBy(formRef.current.getState()?.values)) &&\n !formRef.current.getState()?.active\n ) {\n formRef.current.restart(formInitialValues)\n }\n }, [formInitialValues, commonDetailsStore.changes.counter])\n\n useEffect(() => {\n const currentPathname = location.pathname.substring(\n 0,\n location.pathname.lastIndexOf(params.tab)\n )\n\n if (previousPathnameRef.current !== currentPathname && !isDetailsPopUp) {\n formRef.current.restart(formInitialValues)\n dispatch(setEditMode(false))\n previousPathnameRef.current = currentPathname\n }\n }, [dispatch, formInitialValues, isDetailsPopUp, location.pathname, params.tab])\n\n const applyChanges = useCallback(() => {\n applyDetailsChanges(commonDetailsStore.changes).then(() => {\n dispatch(resetChanges())\n\n const changes = cloneDeep(commonDetailsStore.changes)\n\n // todo [redux-toolkit] rework it after redux-toolkit will be added to the details store. Need to remove setTimeout and use a Promise that resolves after the state is updated.\n setTimeout(() => {\n applyDetailsChangesCallback(changes, selectedItem)\n })\n })\n }, [\n applyDetailsChanges,\n applyDetailsChangesCallback,\n commonDetailsStore.changes,\n dispatch,\n selectedItem\n ])\n\n const cancelChanges = useCallback(() => {\n if (commonDetailsStore.changes.counter > 0) {\n dispatch(resetChanges())\n formRef.current.reset(formInitialValues)\n }\n }, [commonDetailsStore.changes.counter, dispatch, formInitialValues])\n\n const leavePage = useCallback(() => {\n cancelChanges()\n handleShowWarning(false)\n\n if (commonDetailsStore.filtersWasHandled) {\n dispatch(setFiltersWasHandled(false))\n }\n\n blocker.proceed?.()\n\n window.dispatchEvent(new CustomEvent('discardChanges'))\n }, [blocker, cancelChanges, commonDetailsStore.filtersWasHandled, dispatch, handleShowWarning])\n\n const doNotLeavePage = useCallback(() => {\n blocker.reset?.()\n dispatch(showWarning(false))\n window.dispatchEvent(new CustomEvent('cancelLeave'))\n }, [blocker, dispatch])\n\n return {\n DetailsContainer,\n applyChanges,\n applyChangesRef,\n blocker,\n cancelChanges,\n detailsPanelClassNames,\n detailsRef,\n commonDetailsStore,\n doNotLeavePage,\n formRef,\n handleShowWarning,\n leavePage,\n location,\n params,\n removeDetailsInfo,\n setBlocker,\n setDetailsInfo,\n shouldDetailsBlock\n }\n}\n"],"names":["DetailsContainer","blocker","commonDetailsStore","detailsMenu","detailsPanelClassNames","detailsPopUpSelectedTab","detailsRef","detailsStore","doNotLeavePage","formRef","isDetailsPopUp","leavePage","params","renderHeader","renderTabsContent","setBlocker","setDetailsPopUpSelectedTab","shouldDetailsBlock","withActionMenu","Form","jsxs","jsx","Loader","ErrorMessage","TabsSlider","newTab","formState","ConfirmDialog","TERTIARY_BUTTON","PRIMARY_BUTTON","BlockerSpy","PropTypes","DETAILS_MENU","useDetails","applyDetailsChanges","applyDetailsChangesCallback","formInitialValues","isDetailsScreen","selectedItem","useState","applyChangesRef","useRef","dispatch","useDispatch","useParams","useSelector","store","location","useLocation","setDetailsInfo","removeDetailsInfo","useMemo","setDetailsPopUpInfoContent","removeDetailsPopUpInfoContent","setInfoContent","removeInfoContent","previousPathnameRef","classnames","createForm","arrayMutators","setFieldState","useEffect","resetChanges","handleShowWarning","useCallback","show","showWarning","handleRefreshClick","event","_a","setFiltersWasHandled","currentLocation","nextLocation","currentDetailsView","VIEW_SEARCH_PARAMETER","nextDetailsView","_b","currentLocationPathname","nextLocationPathname","isEqual","pickBy","currentPathname","setEditMode","applyChanges","changes","cloneDeep","cancelChanges"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useDetails.hook.mjs","sources":["../../src/lib/hooks/useDetails.hook.jsx"],"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 React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport arrayMutators from 'final-form-arrays'\nimport classnames from 'classnames'\nimport { Form } from 'react-final-form'\nimport { cloneDeep, isEqual, pickBy } from 'lodash'\nimport { createForm } from 'final-form'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { useLocation, useParams } from 'react-router-dom'\n\nimport BlockerSpy from '../components/BlockerSpy/BlockerSpy'\nimport ErrorMessage from '../components/ErrorMessage/ErrorMessage'\nimport Loader from '../components/Loader/Loader'\nimport TabsSlider from '../components/TabsSlider/TabsSlider'\nimport ConfirmDialog from '../components/ConfirmDialog/ConfirmDialog'\n\nimport {\n removeDetailsPopUpInfoContent,\n removeInfoContent,\n resetChanges,\n setDetailsPopUpInfoContent,\n setEditMode,\n setFiltersWasHandled,\n setInfoContent,\n showWarning\n} from '../reducers/commonDetailsReducer'\nimport { PRIMARY_BUTTON, TERTIARY_BUTTON } from '../constants'\nimport { VIEW_SEARCH_PARAMETER } from '../constants'\nimport { DETAILS_MENU } from '../types'\nimport { setFieldState } from '../utils/form.util'\n\nconst DetailsContainer = ({\n blocker,\n commonDetailsStore,\n detailsMenu,\n detailsPanelClassNames,\n detailsPopUpSelectedTab = '',\n detailsRef,\n detailsStore,\n doNotLeavePage,\n formRef,\n isDetailsPopUp = null,\n leavePage,\n params,\n renderHeader,\n renderTabsContent,\n setBlocker,\n setDetailsPopUpSelectedTab = null,\n shouldDetailsBlock,\n withActionMenu = true\n}) => {\n return (\n <Form form={formRef.current} onSubmit={() => {}}>\n {formState => (\n <div className={detailsPanelClassNames} ref={detailsRef} data-testid=\"detailsPanel\">\n {detailsStore.loadingCounter > 0 && <Loader />}\n {detailsStore.error && <ErrorMessage message={detailsStore.error.message} />}\n <div className=\"item-header-wrapper\">\n {renderHeader()}\n {withActionMenu && (\n <TabsSlider\n initialTab={isDetailsPopUp ? detailsPopUpSelectedTab : params.tab}\n isDetailsPopUp={isDetailsPopUp}\n onClick={newTab => setDetailsPopUpSelectedTab && setDetailsPopUpSelectedTab(newTab)}\n skipLink={isDetailsPopUp}\n tabsList={detailsMenu}\n />\n )}\n </div>\n <div className=\"item-info\">{renderTabsContent(formState)}</div>\n {(blocker.state === 'blocked' || commonDetailsStore.showWarning) && (\n <ConfirmDialog\n cancelButton={{\n handler: doNotLeavePage,\n label: 'Cancel',\n variant: TERTIARY_BUTTON\n }}\n closePopUp={doNotLeavePage}\n confirmButton={{\n handler: leavePage,\n label: 'Yes',\n variant: PRIMARY_BUTTON\n }}\n header=\"You have unsaved changes.\"\n isOpen={blocker.state === 'blocked' || commonDetailsStore.showWarning}\n message=\"Do you want to discard the changes?\"\n />\n )}\n {!isDetailsPopUp && (\n <BlockerSpy setBlocker={setBlocker} shouldBlock={shouldDetailsBlock} />\n )}\n </div>\n )}\n </Form>\n )\n}\n\nDetailsContainer.propTypes = {\n blocker: PropTypes.object.isRequired,\n detailsMenu: DETAILS_MENU.isRequired,\n detailsPanelClassNames: PropTypes.string.isRequired,\n detailsPopUpSelectedTab: PropTypes.string,\n detailsRef: PropTypes.object.isRequired,\n detailsStore: PropTypes.object.isRequired,\n commonDetailsStore: PropTypes.object.isRequired,\n doNotLeavePage: PropTypes.func.isRequired,\n formRef: PropTypes.object.isRequired,\n isDetailsPopUp: PropTypes.bool,\n leavePage: PropTypes.func.isRequired,\n params: PropTypes.object.isRequired,\n renderHeader: PropTypes.func.isRequired,\n renderTabsContent: PropTypes.func.isRequired,\n setBlocker: PropTypes.func.isRequired,\n setDetailsPopUpSelectedTab: PropTypes.func,\n shouldDetailsBlock: PropTypes.func.isRequired,\n withActionMenu: PropTypes.bool\n}\n\nexport const useDetails = ({\n applyDetailsChanges,\n applyDetailsChangesCallback,\n formInitialValues,\n isDetailsPopUp,\n isDetailsScreen,\n selectedItem\n}) => {\n const [blocker, setBlocker] = useState({})\n const applyChangesRef = useRef()\n const dispatch = useDispatch()\n const detailsRef = useRef()\n const params = useParams()\n const commonDetailsStore = useSelector(store => store.commonDetailsStore)\n const location = useLocation()\n const [setDetailsInfo, removeDetailsInfo] = useMemo(() => {\n return isDetailsPopUp\n ? [setDetailsPopUpInfoContent, removeDetailsPopUpInfoContent]\n : [setInfoContent, removeInfoContent]\n }, [isDetailsPopUp])\n const previousPathnameRef = useRef(\n location.pathname.substring(0, location.pathname.lastIndexOf(params.tab))\n )\n const detailsPanelClassNames = classnames(\n 'table__item',\n commonDetailsStore.showWarning && 'pop-up-dialog-opened',\n isDetailsScreen && 'table__item_big',\n isDetailsPopUp && 'table__item-popup'\n )\n\n const formRef = useRef(\n createForm({\n initialValues: formInitialValues,\n mutators: { ...arrayMutators, setFieldState },\n onSubmit: () => {}\n })\n )\n\n useEffect(() => {\n return () => {\n if (!isDetailsPopUp) {\n dispatch(resetChanges())\n }\n }\n }, [dispatch, isDetailsPopUp])\n\n const handleShowWarning = useCallback(\n show => {\n dispatch(showWarning(show))\n },\n [dispatch]\n )\n\n const handleRefreshClick = useCallback(\n event => {\n if (\n commonDetailsStore.changes.counter > 0 &&\n document.getElementById('refresh')?.contains(event.target)\n ) {\n handleShowWarning(true)\n dispatch(setFiltersWasHandled(true))\n }\n },\n [commonDetailsStore.changes.counter, dispatch, handleShowWarning]\n )\n\n useEffect(() => {\n window.addEventListener('click', handleRefreshClick)\n\n return () => {\n window.removeEventListener('click', handleRefreshClick)\n }\n }, [handleRefreshClick])\n\n const shouldDetailsBlock = useCallback(\n ({ currentLocation, nextLocation }) => {\n const currentDetailsView = currentLocation.search.split(`${VIEW_SEARCH_PARAMETER}=`)?.[1]\n const nextDetailsView = nextLocation.search.split(`${VIEW_SEARCH_PARAMETER}=`)?.[1]\n const currentLocationPathname = currentLocation.pathname.split('/')\n const nextLocationPathname = nextLocation.pathname.split('/')\n currentLocationPathname.pop()\n nextLocationPathname.pop()\n\n return (\n commonDetailsStore.changes.counter > 0 &&\n (currentLocationPathname.join('/') !== nextLocationPathname.join('/') ||\n currentDetailsView !== nextDetailsView)\n )\n },\n [commonDetailsStore.changes.counter]\n )\n\n useEffect(() => {\n if (\n formRef.current &&\n commonDetailsStore.changes.counter === 0 &&\n !isEqual(pickBy(formInitialValues), pickBy(formRef.current.getState()?.values)) &&\n !formRef.current.getState()?.active\n ) {\n formRef.current.restart(formInitialValues)\n }\n }, [formInitialValues, commonDetailsStore.changes.counter])\n\n useEffect(() => {\n const currentPathname = location.pathname.substring(\n 0,\n location.pathname.lastIndexOf(params.tab)\n )\n\n if (previousPathnameRef.current !== currentPathname && !isDetailsPopUp) {\n formRef.current.restart(formInitialValues)\n dispatch(setEditMode(false))\n previousPathnameRef.current = currentPathname\n }\n }, [dispatch, formInitialValues, isDetailsPopUp, location.pathname, params.tab])\n\n const applyChanges = useCallback(() => {\n applyDetailsChanges(commonDetailsStore.changes)\n .then(() => {\n dispatch(resetChanges())\n\n const changes = cloneDeep(commonDetailsStore.changes)\n\n // todo [redux-toolkit] rework it after redux-toolkit will be added to the details store. Need to remove setTimeout and use a Promise that resolves after the state is updated.\n setTimeout(() => {\n applyDetailsChangesCallback(changes, selectedItem)\n })\n })\n .catch(() => {})\n }, [\n applyDetailsChanges,\n applyDetailsChangesCallback,\n commonDetailsStore.changes,\n dispatch,\n selectedItem\n ])\n\n const cancelChanges = useCallback(() => {\n if (commonDetailsStore.changes.counter > 0) {\n dispatch(resetChanges())\n formRef.current.reset(formInitialValues)\n }\n }, [commonDetailsStore.changes.counter, dispatch, formInitialValues])\n\n const leavePage = useCallback(() => {\n cancelChanges()\n handleShowWarning(false)\n\n if (commonDetailsStore.filtersWasHandled) {\n dispatch(setFiltersWasHandled(false))\n }\n\n blocker.proceed?.()\n\n window.dispatchEvent(new CustomEvent('discardChanges'))\n }, [blocker, cancelChanges, commonDetailsStore.filtersWasHandled, dispatch, handleShowWarning])\n\n const doNotLeavePage = useCallback(() => {\n blocker.reset?.()\n dispatch(showWarning(false))\n window.dispatchEvent(new CustomEvent('cancelLeave'))\n }, [blocker, dispatch])\n\n return {\n DetailsContainer,\n applyChanges,\n applyChangesRef,\n blocker,\n cancelChanges,\n detailsPanelClassNames,\n detailsRef,\n commonDetailsStore,\n doNotLeavePage,\n formRef,\n handleShowWarning,\n leavePage,\n location,\n params,\n removeDetailsInfo,\n setBlocker,\n setDetailsInfo,\n shouldDetailsBlock\n }\n}\n"],"names":["DetailsContainer","blocker","commonDetailsStore","detailsMenu","detailsPanelClassNames","detailsPopUpSelectedTab","detailsRef","detailsStore","doNotLeavePage","formRef","isDetailsPopUp","leavePage","params","renderHeader","renderTabsContent","setBlocker","setDetailsPopUpSelectedTab","shouldDetailsBlock","withActionMenu","Form","jsxs","jsx","Loader","ErrorMessage","TabsSlider","newTab","formState","ConfirmDialog","TERTIARY_BUTTON","PRIMARY_BUTTON","BlockerSpy","PropTypes","DETAILS_MENU","useDetails","applyDetailsChanges","applyDetailsChangesCallback","formInitialValues","isDetailsScreen","selectedItem","useState","applyChangesRef","useRef","dispatch","useDispatch","useParams","useSelector","store","location","useLocation","setDetailsInfo","removeDetailsInfo","useMemo","setDetailsPopUpInfoContent","removeDetailsPopUpInfoContent","setInfoContent","removeInfoContent","previousPathnameRef","classnames","createForm","arrayMutators","setFieldState","useEffect","resetChanges","handleShowWarning","useCallback","show","showWarning","handleRefreshClick","event","_a","setFiltersWasHandled","currentLocation","nextLocation","currentDetailsView","VIEW_SEARCH_PARAMETER","nextDetailsView","_b","currentLocationPathname","nextLocationPathname","isEqual","pickBy","currentPathname","setEditMode","applyChanges","changes","cloneDeep","cancelChanges"],"mappings":"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"}
|
package/dist/index.css
CHANGED
|
@@ -1 +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}
|
|
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%}.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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.util.d.ts","sourceRoot":"","sources":["../../src/lib/utils/form.util.js"],"names":[],"mappings":"AAkBO,2DAUN;AAEM,+
|
|
1
|
+
{"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
CHANGED
|
@@ -1,26 +1,29 @@
|
|
|
1
|
-
import { set as
|
|
2
|
-
const
|
|
3
|
-
let
|
|
4
|
-
if (
|
|
5
|
-
for (let s in
|
|
6
|
-
|
|
7
|
-
},
|
|
8
|
-
const
|
|
9
|
-
if (
|
|
10
|
-
return
|
|
1
|
+
import { set as u, isEqual as l, mapValues as d, some as m, get as c, isNil as o, isEmpty as f } from "lodash";
|
|
2
|
+
const p = (e, t) => {
|
|
3
|
+
let r = e[0], i = e[1], n = t.fields[r];
|
|
4
|
+
if (n)
|
|
5
|
+
for (let s in i)
|
|
6
|
+
u(n, s, i[s]);
|
|
7
|
+
}, b = (e, t) => {
|
|
8
|
+
const r = (i, n) => {
|
|
9
|
+
if (n !== "")
|
|
10
|
+
return n;
|
|
11
11
|
};
|
|
12
|
-
return !
|
|
13
|
-
|
|
12
|
+
return !l(
|
|
13
|
+
JSON.stringify(a(e), r),
|
|
14
|
+
JSON.stringify(a(t), r)
|
|
15
|
+
);
|
|
16
|
+
}, O = (e = []) => e.reduce((t, r) => (t[r.data.key] = r.data.value, t), {}), g = (e = {}) => Object.entries(e).map(([t, r]) => ({
|
|
14
17
|
data: {
|
|
15
|
-
key:
|
|
16
|
-
value:
|
|
18
|
+
key: t,
|
|
19
|
+
value: r
|
|
17
20
|
}
|
|
18
|
-
})),
|
|
21
|
+
})), 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);
|
|
19
22
|
export {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
b as areFormValuesChanged,
|
|
24
|
+
O as generateObjectFromKeyValue,
|
|
25
|
+
F as isSubmitDisabled,
|
|
26
|
+
g as parseObjectToKeyValue,
|
|
27
|
+
p as setFieldState
|
|
25
28
|
};
|
|
26
29
|
//# sourceMappingURL=form.util.mjs.map
|
|
@@ -1 +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)
|
|
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 { 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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "iguazio.dashboard-react-controls",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.5",
|
|
4
4
|
"description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"main": "./dist/index.mjs",
|