@webiny/app-admin 5.27.0 → 5.29.0-beta.0

package/components/FileManager/FileDetails/Tags.js

@@ -1,42 +1,81 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tagWithoutScopePrefix = exports.formatTagAsLabel = exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _emotion = require("emotion");
+
+var _reactHooks = require("@apollo/react-hooks");
+
+var _set = _interopRequireDefault(require("lodash/set"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _Chips = require("@webiny/ui/Chips");
+
+var _Button = require("@webiny/ui/Button");
+
+var _AutoComplete = require("@webiny/ui/AutoComplete");
+
+var _Icon = require("@webiny/ui/Icon");
+
+var _form = require("@webiny/form");
+
+var _useSnackbar2 = require("../../../hooks/useSnackbar");
+
+var _FileManagerContext = require("./../FileManagerContext");
+
+var _graphql = require("./../graphql");
+
+var _roundEdit24px = require("./../icons/round-edit-24px.svg");
+
+var _roundLabel24px = require("./../icons/round-label-24px.svg");
+
 var _excluded = ["value"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useCallback, useState } from "react";
-import classNames from "classnames";
-import { css } from "emotion";
-import { useApolloClient, useQuery } from "@apollo/react-hooks";
-import set from "lodash/set";
-import get from "lodash/get";
-import cloneDeep from "lodash/cloneDeep";
-import { Chips, Chip } from "@webiny/ui/Chips";
-import { ButtonSecondary, ButtonPrimary, ButtonDefault, IconButton } from "@webiny/ui/Button";
-import { MultiAutoComplete } from "@webiny/ui/AutoComplete";
-import { Icon } from "@webiny/ui/Icon";
-import { Form } from "@webiny/form";
-import { useSnackbar } from "../../../hooks/useSnackbar";
-import { getWhere, useFileManager } from "./../FileManagerContext";
-import { UPDATE_FILE, LIST_FILES, LIST_TAGS } from "./../graphql";
-import { ReactComponent as EditIcon } from "./../icons/round-edit-24px.svg";
-import { ReactComponent as LabelIcon } from "./../icons/round-label-24px.svg";
 var SCOPE_SEPARATOR = ":";
-export var formatTagAsLabel = function formatTagAsLabel(tag, scope) {
+
+var formatTagAsLabel = function formatTagAsLabel(tag, scope) {
   if (!scope) {
     return tag;
   }
 
   return tag.replace("".concat(scope).concat(SCOPE_SEPARATOR), "");
 };
-export var tagWithoutScopePrefix = function tagWithoutScopePrefix(tags, scope) {
+
+exports.formatTagAsLabel = formatTagAsLabel;
+
+var tagWithoutScopePrefix = function tagWithoutScopePrefix(tags, scope) {
   return tags.filter(function (tag) {
     return tag !== scope;
   }).map(function (tag) {
     return formatTagAsLabel(tag, scope);
   });
 };
-var chipsStyle = /*#__PURE__*/css({
+
+exports.tagWithoutScopePrefix = tagWithoutScopePrefix;
+var chipsStyle = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-chip-set": {
     padding: 0,
     marginLeft: -4,
@@ -45,13 +84,13 @@ var chipsStyle = /*#__PURE__*/css({
     }
   }
 }, "label:chipsStyle;");
-var iconButtonStyle = /*#__PURE__*/css({
+var iconButtonStyle = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-icon-button svg": {
     width: 20,
     height: 20
   }
 }, "label:iconButtonStyle;");
-var addTagsStyle = /*#__PURE__*/css({
+var addTagsStyle = /*#__PURE__*/(0, _emotion.css)({
   "&.mdc-button:not(:disabled)": {
     color: "var(--mdc-theme-text-secondary-on-background)",
     textTransform: "capitalize",
@@ -59,7 +98,7 @@ var addTagsStyle = /*#__PURE__*/css({
     marginLeft: -8
   }
 }, "label:addTagsStyle;");
-var actionWrapperStyle = /*#__PURE__*/css({
+var actionWrapperStyle = /*#__PURE__*/(0, _emotion.css)({
   marginTop: 16,
   "& button:first-child": {
     marginRight: 16
@@ -69,41 +108,41 @@ var actionWrapperStyle = /*#__PURE__*/css({
 var Tags = function Tags(_ref) {
   var file = _ref.file,
       canEdit = _ref.canEdit;
-  var client = useApolloClient();
+  var client = (0, _reactHooks.useApolloClient)();
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       editing = _useState2[0],
       setEdit = _useState2[1];
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       saving = _useState4[0],
       setSaving = _useState4[1];
 
-  var _useState5 = useState(Array.isArray(file.tags) ? _toConsumableArray(file.tags) : []),
-      _useState6 = _slicedToArray(_useState5, 2),
+  var _useState5 = (0, _react.useState)(Array.isArray(file.tags) ? (0, _toConsumableArray2.default)(file.tags) : []),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
       initialTags = _useState6[0],
       setInitialTags = _useState6[1];
 
-  var _useSnackbar = useSnackbar(),
+  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
       showSnackbar = _useSnackbar.showSnackbar;
 
-  var _useFileManager = useFileManager(),
+  var _useFileManager = (0, _FileManagerContext.useFileManager)(),
       queryParams = _useFileManager.queryParams;
 
-  var handleEdit = useCallback(function () {
+  var handleEdit = (0, _react.useCallback)(function () {
     return setEdit(true);
   }, []);
-  var listTagsQuery = useQuery(LIST_TAGS, {
+  var listTagsQuery = (0, _reactHooks.useQuery)(_graphql.LIST_TAGS, {
     variables: {
-      where: getWhere(queryParams.scope)
+      where: (0, _FileManagerContext.getWhere)(queryParams.scope)
     }
   });
-  var listTags = get(listTagsQuery, "data.fileManager.listTags", []);
+  var listTags = (0, _get.default)(listTagsQuery, "data.fileManager.listTags", []);
   var allTags = tagWithoutScopePrefix(listTags, queryParams.scope);
   var isEditingAllowed = canEdit(file);
-  var renderHeaderContent = useCallback(function (_ref2) {
+  var renderHeaderContent = (0, _react.useCallback)(function (_ref2) {
     var data = _ref2.data;
 
     if (editing) {
@@ -114,45 +153,45 @@ var Tags = function Tags(_ref) {
 
     if (hasTags) {
       // Render existing tags and "edit tags" action.
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Chips, {
-        className: classNames("list-item__content", chipsStyle)
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Chips.Chips, {
+        className: (0, _classnames.default)("list-item__content", chipsStyle)
       }, data.tags.filter(function (tag) {
         return tag !== queryParams.scope;
       }).map(function (tag, index) {
         var label = typeof tag === "string" ? tag : tag.name;
-        return /*#__PURE__*/React.createElement(Chip, {
+        return /*#__PURE__*/_react.default.createElement(_Chips.Chip, {
           key: label + index,
           label: formatTagAsLabel(label, queryParams.scope)
         });
-      })), isEditingAllowed && /*#__PURE__*/React.createElement(IconButton, {
+      })), isEditingAllowed && /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
         className: iconButtonStyle,
-        icon: /*#__PURE__*/React.createElement(EditIcon, null),
+        icon: /*#__PURE__*/_react.default.createElement(_roundEdit24px.ReactComponent, null),
         onClick: handleEdit
       }));
     } // Render "add tags" action.
 
 
-    return /*#__PURE__*/React.createElement(ButtonDefault, {
+    return /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
       className: addTagsStyle,
       onClick: handleEdit,
       disabled: !isEditingAllowed
     }, "Add tags...");
   }, [editing, isEditingAllowed]);
-  return /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       tags: initialTags
     },
     onSubmit: /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
+      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref3) {
         var tags;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 tags = _ref3.tags;
                 setSaving(true);
                 client.mutate({
-                  mutation: UPDATE_FILE,
+                  mutation: _graphql.UPDATE_FILE,
                   variables: {
                     id: file.id,
                     data: {
@@ -160,10 +199,10 @@ var Tags = function Tags(_ref) {
                     }
                   },
                   update: function update(cache, updated) {
-                    var newFileData = get(updated, "data.fileManager.updateFile.data"); // 1. Update files list cache
+                    var newFileData = (0, _get.default)(updated, "data.fileManager.updateFile.data"); // 1. Update files list cache
 
-                    var data = cloneDeep(cache.readQuery({
-                      query: LIST_FILES,
+                    var data = (0, _cloneDeep.default)(cache.readQuery({
+                      query: _graphql.LIST_FILES,
                       variables: queryParams
                     }));
 
@@ -176,17 +215,17 @@ var Tags = function Tags(_ref) {
                     }
 
                     cache.writeQuery({
-                      query: LIST_FILES,
+                      query: _graphql.LIST_FILES,
                       variables: queryParams,
                       data: data
                     }); // 2. Update "LIST_TAGS" cache
 
                     if (Array.isArray(newFileData.tags)) {
                       // Get list tags data
-                      var listTagsData = cloneDeep(cache.readQuery({
-                        query: LIST_TAGS,
+                      var listTagsData = (0, _cloneDeep.default)(cache.readQuery({
+                        query: _graphql.LIST_TAGS,
                         variables: {
-                          where: getWhere(queryParams.scope)
+                          where: (0, _FileManagerContext.getWhere)(queryParams.scope)
                         }
                       }));
 
@@ -195,7 +234,7 @@ var Tags = function Tags(_ref) {
                       } // Add new tag in list
 
 
-                      var updatedTagsList = _toConsumableArray(newFileData.tags);
+                      var updatedTagsList = (0, _toConsumableArray2.default)(newFileData.tags);
 
                       if (Array.isArray(listTagsData.fileManager.listTags)) {
                         listTagsData.fileManager.listTags.forEach(function (tag) {
@@ -205,12 +244,12 @@ var Tags = function Tags(_ref) {
                         });
                       }
 
-                      set(listTagsData, "fileManager.listTags", updatedTagsList); // Write it to cache
+                      (0, _set.default)(listTagsData, "fileManager.listTags", updatedTagsList); // Write it to cache
 
                       cache.writeQuery({
-                        query: LIST_TAGS,
+                        query: _graphql.LIST_TAGS,
                         variables: {
-                          where: getWhere(queryParams.scope)
+                          where: (0, _FileManagerContext.getWhere)(queryParams.scope)
                         },
                         data: listTagsData
                       });
@@ -240,14 +279,14 @@ var Tags = function Tags(_ref) {
         data = _ref5.data,
         setValue = _ref5.setValue,
         submit = _ref5.submit;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li-title", null, /*#__PURE__*/React.createElement(Icon, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li-title", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
       className: "list-item__icon",
-      icon: /*#__PURE__*/React.createElement(LabelIcon, null)
+      icon: /*#__PURE__*/_react.default.createElement(_roundLabel24px.ReactComponent, null)
     }), renderHeaderContent({
       // TODO @ts-refactor
       // @ts-ignore
       data: data
-    })), editing && /*#__PURE__*/React.createElement("li-content", null, /*#__PURE__*/React.createElement(Bind, {
+    })), editing && /*#__PURE__*/_react.default.createElement("li-content", null, /*#__PURE__*/_react.default.createElement(Bind, {
       name: "tags",
       beforeChange: function beforeChange(tags, baseOnChange) {
         var formattedTags = tags.map(function (tag) {
@@ -266,9 +305,8 @@ var Tags = function Tags(_ref) {
       }
     }, function (_ref6) {
       var value = _ref6.value,
-          bindProps = _objectWithoutProperties(_ref6, _excluded);
-
-      return /*#__PURE__*/React.createElement(MultiAutoComplete, Object.assign({}, bindProps, {
+          bindProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_AutoComplete.MultiAutoComplete, Object.assign({}, bindProps, {
         value: tagWithoutScopePrefix(value, queryParams.scope),
         options: allTags,
         placeholder: "homepage asset",
@@ -278,15 +316,15 @@ var Tags = function Tags(_ref) {
         useSimpleValues: true,
         disabled: saving
       }));
-    }), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/_react.default.createElement("div", {
       className: actionWrapperStyle
-    }, /*#__PURE__*/React.createElement(ButtonPrimary, {
+    }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
       small: true,
       onClick: function onClick(ev) {
         submit(ev);
       },
       "data-testid": "fm.tags.submit"
-    }, "Submit"), /*#__PURE__*/React.createElement(ButtonSecondary, {
+    }, "Submit"), /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
       small: true,
       onClick: function onClick() {
         setValue("tags", initialTags);
@@ -296,4 +334,5 @@ var Tags = function Tags(_ref) {
   });
 };
 
-export default Tags;
+var _default = Tags;
+exports.default = _default;

package/components/FileManager/FileDetails/Tags.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tags.tsx"],"names":["React","useCallback","useState","classNames","css","useApolloClient","useQuery","set","get","cloneDeep","Chips","Chip","ButtonSecondary","ButtonPrimary","ButtonDefault","IconButton","MultiAutoComplete","Icon","Form","useSnackbar","getWhere","useFileManager","UPDATE_FILE","LIST_FILES","LIST_TAGS","ReactComponent","EditIcon","LabelIcon","SCOPE_SEPARATOR","formatTagAsLabel","tag","scope","replace","tagWithoutScopePrefix","tags","filter","map","chipsStyle","padding","marginLeft","backgroundColor","iconButtonStyle","width","height","addTagsStyle","color","textTransform","letterSpacing","actionWrapperStyle","marginTop","marginRight","Tags","file","canEdit","client","editing","setEdit","saving","setSaving","Array","isArray","initialTags","setInitialTags","showSnackbar","queryParams","handleEdit","listTagsQuery","variables","where","listTags","allTags","isEditingAllowed","renderHeaderContent","data","hasTags","length","index","label","name","mutate","mutation","id","update","cache","updated","newFileData","readQuery","query","fileManager","listFiles","forEach","item","key","writeQuery","listTagsData","updatedTagsList","includes","push","then","Bind","setValue","submit","baseOnChange","formattedTags","tagInLowerCase","toLowerCase","startsWith","value","bindProps","ev"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { useApolloClient, useQuery } from \"@apollo/react-hooks\";\nimport set from \"lodash/set\";\nimport get from \"lodash/get\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { Chips, Chip } from \"@webiny/ui/Chips\";\nimport { ButtonSecondary, ButtonPrimary, ButtonDefault, IconButton } from \"@webiny/ui/Button\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Form } from \"@webiny/form\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport { getWhere, useFileManager } from \"./../FileManagerContext\";\nimport {\n    UPDATE_FILE,\n    LIST_FILES,\n    LIST_TAGS,\n    ListFilesQueryResponse,\n    ListFileTagsQueryResponse\n} from \"./../graphql\";\nimport { ReactComponent as EditIcon } from \"./../icons/round-edit-24px.svg\";\nimport { ReactComponent as LabelIcon } from \"./../icons/round-label-24px.svg\";\nimport { FileItem } from \"../types\";\n\nconst SCOPE_SEPARATOR = \":\";\n\nexport const formatTagAsLabel = (tag: string, scope: string | undefined) => {\n    if (!scope) {\n        return tag;\n    }\n    return tag.replace(`${scope}${SCOPE_SEPARATOR}`, \"\");\n};\n\nexport const tagWithoutScopePrefix = (tags: string[], scope: string) => {\n    return tags.filter(tag => tag !== scope).map(tag => formatTagAsLabel(tag, scope));\n};\n\nconst chipsStyle = css({\n    \"&.mdc-chip-set\": {\n        padding: 0,\n        marginLeft: -4,\n        \"& .mdc-chip\": {\n            backgroundColor: \"var(--mdc-theme-background)\"\n        }\n    }\n});\nconst iconButtonStyle = css({\n    \"&.mdc-icon-button svg\": {\n        width: 20,\n        height: 20\n    }\n});\nconst addTagsStyle = css({\n    \"&.mdc-button:not(:disabled)\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\",\n        textTransform: \"capitalize\",\n        letterSpacing: \"initial\",\n        marginLeft: -8\n    }\n});\nconst actionWrapperStyle = css({\n    marginTop: 16,\n    \"& button:first-child\": {\n        marginRight: 16\n    }\n});\n\ninterface TagsProps {\n    file: FileItem;\n    canEdit: (file: FileItem) => boolean;\n}\n\nconst Tags: React.FC<TagsProps> = ({ file, canEdit }) => {\n    const client = useApolloClient();\n\n    const [editing, setEdit] = useState(false);\n    const [saving, setSaving] = useState(false);\n    const [initialTags, setInitialTags] = useState(Array.isArray(file.tags) ? [...file.tags] : []);\n    const { showSnackbar } = useSnackbar();\n    const { queryParams } = useFileManager();\n    const handleEdit = useCallback(() => setEdit(true), []);\n    const listTagsQuery = useQuery(LIST_TAGS, {\n        variables: { where: getWhere(queryParams.scope) }\n    });\n    const listTags = get(listTagsQuery, \"data.fileManager.listTags\", []);\n    const allTags = tagWithoutScopePrefix(listTags, queryParams.scope);\n\n    const isEditingAllowed = canEdit(file);\n\n    const renderHeaderContent = useCallback(\n        ({ data }: { data: { tags: { name: string }[] } }) => {\n            if (editing) {\n                return null;\n            }\n            const hasTags = data.tags.length > 0;\n\n            if (hasTags) {\n                // Render existing tags and \"edit tags\" action.\n                return (\n                    <>\n                        <Chips className={classNames(\"list-item__content\", chipsStyle)}>\n                            {data.tags\n                                .filter(tag => tag !== queryParams.scope)\n                                .map((tag, index) => {\n                                    const label = typeof tag === \"string\" ? tag : tag.name;\n                                    return (\n                                        <Chip\n                                            key={label + index}\n                                            label={formatTagAsLabel(label, queryParams.scope)}\n                                        />\n                                    );\n                                })}\n                        </Chips>\n                        {isEditingAllowed && (\n                            <IconButton\n                                className={iconButtonStyle}\n                                icon={<EditIcon />}\n                                onClick={handleEdit}\n                            />\n                        )}\n                    </>\n                );\n            }\n            // Render \"add tags\" action.\n            return (\n                <ButtonDefault\n                    className={addTagsStyle}\n                    onClick={handleEdit}\n                    disabled={!isEditingAllowed}\n                >\n                    Add tags...\n                </ButtonDefault>\n            );\n        },\n        [editing, isEditingAllowed]\n    );\n\n    return (\n        <Form\n            data={{\n                tags: initialTags\n            }}\n            onSubmit={async ({ tags }) => {\n                setSaving(true);\n                client\n                    .mutate({\n                        mutation: UPDATE_FILE,\n                        variables: {\n                            id: file.id,\n                            data: { tags }\n                        },\n                        update: (cache, updated) => {\n                            const newFileData: FileItem = get(\n                                updated,\n                                \"data.fileManager.updateFile.data\"\n                            );\n\n                            // 1. Update files list cache\n                            const data = cloneDeep(\n                                cache.readQuery<ListFilesQueryResponse>({\n                                    query: LIST_FILES,\n                                    variables: queryParams\n                                })\n                            );\n\n                            if (data) {\n                                data.fileManager.listFiles.data.forEach(item => {\n                                    if (item.key === newFileData.key) {\n                                        item.tags = newFileData.tags;\n                                    }\n                                });\n                            }\n\n                            cache.writeQuery({\n                                query: LIST_FILES,\n                                variables: queryParams,\n                                data\n                            });\n                            // 2. Update \"LIST_TAGS\" cache\n                            if (Array.isArray(newFileData.tags)) {\n                                // Get list tags data\n                                const listTagsData = cloneDeep(\n                                    cache.readQuery<ListFileTagsQueryResponse>({\n                                        query: LIST_TAGS,\n                                        variables: { where: getWhere(queryParams.scope) }\n                                    })\n                                );\n                                if (!listTagsData) {\n                                    return;\n                                }\n                                // Add new tag in list\n                                const updatedTagsList = [...newFileData.tags];\n\n                                if (Array.isArray(listTagsData.fileManager.listTags)) {\n                                    listTagsData.fileManager.listTags.forEach(tag => {\n                                        if (!updatedTagsList.includes(tag)) {\n                                            updatedTagsList.push(tag);\n                                        }\n                                    });\n                                }\n\n                                set(listTagsData, \"fileManager.listTags\", updatedTagsList);\n                                // Write it to cache\n                                cache.writeQuery({\n                                    query: LIST_TAGS,\n                                    variables: { where: getWhere(queryParams.scope) },\n                                    data: listTagsData\n                                });\n                            }\n                        }\n                    })\n                    .then(() => {\n                        setInitialTags(tags);\n                        setSaving(false);\n                        setEdit(false);\n                        showSnackbar(\"Tags successfully updated.\");\n                    });\n            }}\n        >\n            {({ Bind, data, setValue, submit }) => (\n                <React.Fragment>\n                    <li-title>\n                        <Icon className={\"list-item__icon\"} icon={<LabelIcon />} />\n                        {renderHeaderContent({\n                            // TODO @ts-refactor\n                            // @ts-ignore\n                            data\n                        })}\n                    </li-title>\n                    {editing && (\n                        <li-content>\n                            <Bind\n                                name={\"tags\"}\n                                beforeChange={(\n                                    tags: string[],\n                                    baseOnChange: (tags: string[]) => void\n                                ) => {\n                                    const formattedTags = tags.map(tag => {\n                                        const tagInLowerCase = tag.toLowerCase();\n                                        /**\n                                         * If \"scope\" exists, prefix tag with \"scope\" if not already.\n                                         */\n                                        if (\n                                            queryParams.scope &&\n                                            !tagInLowerCase.startsWith(queryParams.scope)\n                                        ) {\n                                            return `${queryParams.scope}${SCOPE_SEPARATOR}${tagInLowerCase}`;\n                                        }\n                                        return tagInLowerCase;\n                                    });\n                                    baseOnChange(formattedTags);\n                                }}\n                            >\n                                {({ value, ...bindProps }) => (\n                                    <MultiAutoComplete\n                                        {...bindProps}\n                                        value={tagWithoutScopePrefix(value, queryParams.scope)}\n                                        options={allTags}\n                                        placeholder={\"homepage asset\"}\n                                        description={\"Type in a new tag or select an existing one.\"}\n                                        unique={true}\n                                        allowFreeInput={true}\n                                        useSimpleValues={true}\n                                        disabled={saving}\n                                    />\n                                )}\n                            </Bind>\n                            <div className={actionWrapperStyle}>\n                                <ButtonPrimary\n                                    small\n                                    onClick={ev => {\n                                        submit(ev);\n                                    }}\n                                    data-testid={\"fm.tags.submit\"}\n                                >\n                                    Submit\n                                </ButtonPrimary>\n                                <ButtonSecondary\n                                    small\n                                    onClick={() => {\n                                        setValue(\"tags\", initialTags);\n                                        setEdit(false);\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                            </div>\n                        </li-content>\n                    )}\n                </React.Fragment>\n            )}\n        </Form>\n    );\n};\n\nexport default Tags;\n"]}
+{"version":3,"names":["SCOPE_SEPARATOR","formatTagAsLabel","tag","scope","replace","tagWithoutScopePrefix","tags","filter","map","chipsStyle","css","padding","marginLeft","backgroundColor","iconButtonStyle","width","height","addTagsStyle","color","textTransform","letterSpacing","actionWrapperStyle","marginTop","marginRight","Tags","file","canEdit","client","useApolloClient","useState","editing","setEdit","saving","setSaving","Array","isArray","initialTags","setInitialTags","useSnackbar","showSnackbar","useFileManager","queryParams","handleEdit","useCallback","listTagsQuery","useQuery","LIST_TAGS","variables","where","getWhere","listTags","get","allTags","isEditingAllowed","renderHeaderContent","data","hasTags","length","classNames","index","label","name","mutate","mutation","UPDATE_FILE","id","update","cache","updated","newFileData","cloneDeep","readQuery","query","LIST_FILES","fileManager","listFiles","forEach","item","key","writeQuery","listTagsData","updatedTagsList","includes","push","set","then","Bind","setValue","submit","baseOnChange","formattedTags","tagInLowerCase","toLowerCase","startsWith","value","bindProps","ev"],"sources":["Tags.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport classNames from \"classnames\";\nimport { css } from \"emotion\";\nimport { useApolloClient, useQuery } from \"@apollo/react-hooks\";\nimport set from \"lodash/set\";\nimport get from \"lodash/get\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { Chips, Chip } from \"@webiny/ui/Chips\";\nimport { ButtonSecondary, ButtonPrimary, ButtonDefault, IconButton } from \"@webiny/ui/Button\";\nimport { MultiAutoComplete } from \"@webiny/ui/AutoComplete\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Form } from \"@webiny/form\";\nimport { useSnackbar } from \"~/hooks/useSnackbar\";\nimport { getWhere, useFileManager } from \"./../FileManagerContext\";\nimport {\n    UPDATE_FILE,\n    LIST_FILES,\n    LIST_TAGS,\n    ListFilesQueryResponse,\n    ListFileTagsQueryResponse\n} from \"./../graphql\";\nimport { ReactComponent as EditIcon } from \"./../icons/round-edit-24px.svg\";\nimport { ReactComponent as LabelIcon } from \"./../icons/round-label-24px.svg\";\nimport { FileItem } from \"../types\";\n\nconst SCOPE_SEPARATOR = \":\";\n\nexport const formatTagAsLabel = (tag: string, scope: string | undefined) => {\n    if (!scope) {\n        return tag;\n    }\n    return tag.replace(`${scope}${SCOPE_SEPARATOR}`, \"\");\n};\n\nexport const tagWithoutScopePrefix = (tags: string[], scope: string) => {\n    return tags.filter(tag => tag !== scope).map(tag => formatTagAsLabel(tag, scope));\n};\n\nconst chipsStyle = css({\n    \"&.mdc-chip-set\": {\n        padding: 0,\n        marginLeft: -4,\n        \"& .mdc-chip\": {\n            backgroundColor: \"var(--mdc-theme-background)\"\n        }\n    }\n});\nconst iconButtonStyle = css({\n    \"&.mdc-icon-button svg\": {\n        width: 20,\n        height: 20\n    }\n});\nconst addTagsStyle = css({\n    \"&.mdc-button:not(:disabled)\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\",\n        textTransform: \"capitalize\",\n        letterSpacing: \"initial\",\n        marginLeft: -8\n    }\n});\nconst actionWrapperStyle = css({\n    marginTop: 16,\n    \"& button:first-child\": {\n        marginRight: 16\n    }\n});\n\ninterface TagsProps {\n    file: FileItem;\n    canEdit: (file: FileItem) => boolean;\n}\n\nconst Tags: React.FC<TagsProps> = ({ file, canEdit }) => {\n    const client = useApolloClient();\n\n    const [editing, setEdit] = useState(false);\n    const [saving, setSaving] = useState(false);\n    const [initialTags, setInitialTags] = useState(Array.isArray(file.tags) ? [...file.tags] : []);\n    const { showSnackbar } = useSnackbar();\n    const { queryParams } = useFileManager();\n    const handleEdit = useCallback(() => setEdit(true), []);\n    const listTagsQuery = useQuery(LIST_TAGS, {\n        variables: { where: getWhere(queryParams.scope) }\n    });\n    const listTags = get(listTagsQuery, \"data.fileManager.listTags\", []);\n    const allTags = tagWithoutScopePrefix(listTags, queryParams.scope);\n\n    const isEditingAllowed = canEdit(file);\n\n    const renderHeaderContent = useCallback(\n        ({ data }: { data: { tags: { name: string }[] } }) => {\n            if (editing) {\n                return null;\n            }\n            const hasTags = data.tags.length > 0;\n\n            if (hasTags) {\n                // Render existing tags and \"edit tags\" action.\n                return (\n                    <>\n                        <Chips className={classNames(\"list-item__content\", chipsStyle)}>\n                            {data.tags\n                                .filter(tag => tag !== queryParams.scope)\n                                .map((tag, index) => {\n                                    const label = typeof tag === \"string\" ? tag : tag.name;\n                                    return (\n                                        <Chip\n                                            key={label + index}\n                                            label={formatTagAsLabel(label, queryParams.scope)}\n                                        />\n                                    );\n                                })}\n                        </Chips>\n                        {isEditingAllowed && (\n                            <IconButton\n                                className={iconButtonStyle}\n                                icon={<EditIcon />}\n                                onClick={handleEdit}\n                            />\n                        )}\n                    </>\n                );\n            }\n            // Render \"add tags\" action.\n            return (\n                <ButtonDefault\n                    className={addTagsStyle}\n                    onClick={handleEdit}\n                    disabled={!isEditingAllowed}\n                >\n                    Add tags...\n                </ButtonDefault>\n            );\n        },\n        [editing, isEditingAllowed]\n    );\n\n    return (\n        <Form\n            data={{\n                tags: initialTags\n            }}\n            onSubmit={async ({ tags }) => {\n                setSaving(true);\n                client\n                    .mutate({\n                        mutation: UPDATE_FILE,\n                        variables: {\n                            id: file.id,\n                            data: { tags }\n                        },\n                        update: (cache, updated) => {\n                            const newFileData: FileItem = get(\n                                updated,\n                                \"data.fileManager.updateFile.data\"\n                            );\n\n                            // 1. Update files list cache\n                            const data = cloneDeep(\n                                cache.readQuery<ListFilesQueryResponse>({\n                                    query: LIST_FILES,\n                                    variables: queryParams\n                                })\n                            );\n\n                            if (data) {\n                                data.fileManager.listFiles.data.forEach(item => {\n                                    if (item.key === newFileData.key) {\n                                        item.tags = newFileData.tags;\n                                    }\n                                });\n                            }\n\n                            cache.writeQuery({\n                                query: LIST_FILES,\n                                variables: queryParams,\n                                data\n                            });\n                            // 2. Update \"LIST_TAGS\" cache\n                            if (Array.isArray(newFileData.tags)) {\n                                // Get list tags data\n                                const listTagsData = cloneDeep(\n                                    cache.readQuery<ListFileTagsQueryResponse>({\n                                        query: LIST_TAGS,\n                                        variables: { where: getWhere(queryParams.scope) }\n                                    })\n                                );\n                                if (!listTagsData) {\n                                    return;\n                                }\n                                // Add new tag in list\n                                const updatedTagsList = [...newFileData.tags];\n\n                                if (Array.isArray(listTagsData.fileManager.listTags)) {\n                                    listTagsData.fileManager.listTags.forEach(tag => {\n                                        if (!updatedTagsList.includes(tag)) {\n                                            updatedTagsList.push(tag);\n                                        }\n                                    });\n                                }\n\n                                set(listTagsData, \"fileManager.listTags\", updatedTagsList);\n                                // Write it to cache\n                                cache.writeQuery({\n                                    query: LIST_TAGS,\n                                    variables: { where: getWhere(queryParams.scope) },\n                                    data: listTagsData\n                                });\n                            }\n                        }\n                    })\n                    .then(() => {\n                        setInitialTags(tags);\n                        setSaving(false);\n                        setEdit(false);\n                        showSnackbar(\"Tags successfully updated.\");\n                    });\n            }}\n        >\n            {({ Bind, data, setValue, submit }) => (\n                <React.Fragment>\n                    <li-title>\n                        <Icon className={\"list-item__icon\"} icon={<LabelIcon />} />\n                        {renderHeaderContent({\n                            // TODO @ts-refactor\n                            // @ts-ignore\n                            data\n                        })}\n                    </li-title>\n                    {editing && (\n                        <li-content>\n                            <Bind\n                                name={\"tags\"}\n                                beforeChange={(\n                                    tags: string[],\n                                    baseOnChange: (tags: string[]) => void\n                                ) => {\n                                    const formattedTags = tags.map(tag => {\n                                        const tagInLowerCase = tag.toLowerCase();\n                                        /**\n                                         * If \"scope\" exists, prefix tag with \"scope\" if not already.\n                                         */\n                                        if (\n                                            queryParams.scope &&\n                                            !tagInLowerCase.startsWith(queryParams.scope)\n                                        ) {\n                                            return `${queryParams.scope}${SCOPE_SEPARATOR}${tagInLowerCase}`;\n                                        }\n                                        return tagInLowerCase;\n                                    });\n                                    baseOnChange(formattedTags);\n                                }}\n                            >\n                                {({ value, ...bindProps }) => (\n                                    <MultiAutoComplete\n                                        {...bindProps}\n                                        value={tagWithoutScopePrefix(value, queryParams.scope)}\n                                        options={allTags}\n                                        placeholder={\"homepage asset\"}\n                                        description={\"Type in a new tag or select an existing one.\"}\n                                        unique={true}\n                                        allowFreeInput={true}\n                                        useSimpleValues={true}\n                                        disabled={saving}\n                                    />\n                                )}\n                            </Bind>\n                            <div className={actionWrapperStyle}>\n                                <ButtonPrimary\n                                    small\n                                    onClick={ev => {\n                                        submit(ev);\n                                    }}\n                                    data-testid={\"fm.tags.submit\"}\n                                >\n                                    Submit\n                                </ButtonPrimary>\n                                <ButtonSecondary\n                                    small\n                                    onClick={() => {\n                                        setValue(\"tags\", initialTags);\n                                        setEdit(false);\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                            </div>\n                        </li-content>\n                    )}\n                </React.Fragment>\n            )}\n        </Form>\n    );\n};\n\nexport default Tags;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;;AAGA,IAAMA,eAAe,GAAG,GAAxB;;AAEO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,GAAD,EAAcC,KAAd,EAA4C;EACxE,IAAI,CAACA,KAAL,EAAY;IACR,OAAOD,GAAP;EACH;;EACD,OAAOA,GAAG,CAACE,OAAJ,WAAeD,KAAf,SAAuBH,eAAvB,GAA0C,EAA1C,CAAP;AACH,CALM;;;;AAOA,IAAMK,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,IAAD,EAAiBH,KAAjB,EAAmC;EACpE,OAAOG,IAAI,CAACC,MAAL,CAAY,UAAAL,GAAG;IAAA,OAAIA,GAAG,KAAKC,KAAZ;EAAA,CAAf,EAAkCK,GAAlC,CAAsC,UAAAN,GAAG;IAAA,OAAID,gBAAgB,CAACC,GAAD,EAAMC,KAAN,CAApB;EAAA,CAAzC,CAAP;AACH,CAFM;;;AAIP,IAAMM,UAAU,gBAAG,IAAAC,YAAA,EAAI;EACnB,kBAAkB;IACdC,OAAO,EAAE,CADK;IAEdC,UAAU,EAAE,CAAC,CAFC;IAGd,eAAe;MACXC,eAAe,EAAE;IADN;EAHD;AADC,CAAJ,sBAAnB;AASA,IAAMC,eAAe,gBAAG,IAAAJ,YAAA,EAAI;EACxB,yBAAyB;IACrBK,KAAK,EAAE,EADc;IAErBC,MAAM,EAAE;EAFa;AADD,CAAJ,2BAAxB;AAMA,IAAMC,YAAY,gBAAG,IAAAP,YAAA,EAAI;EACrB,+BAA+B;IAC3BQ,KAAK,EAAE,+CADoB;IAE3BC,aAAa,EAAE,YAFY;IAG3BC,aAAa,EAAE,SAHY;IAI3BR,UAAU,EAAE,CAAC;EAJc;AADV,CAAJ,wBAArB;AAQA,IAAMS,kBAAkB,gBAAG,IAAAX,YAAA,EAAI;EAC3BY,SAAS,EAAE,EADgB;EAE3B,wBAAwB;IACpBC,WAAW,EAAE;EADO;AAFG,CAAJ,8BAA3B;;AAYA,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,OAAuB;EAAA,IAApBC,IAAoB,QAApBA,IAAoB;EAAA,IAAdC,OAAc,QAAdA,OAAc;EACrD,IAAMC,MAAM,GAAG,IAAAC,2BAAA,GAAf;;EAEA,gBAA2B,IAAAC,eAAA,EAAS,KAAT,CAA3B;EAAA;EAAA,IAAOC,OAAP;EAAA,IAAgBC,OAAhB;;EACA,iBAA4B,IAAAF,eAAA,EAAS,KAAT,CAA5B;EAAA;EAAA,IAAOG,MAAP;EAAA,IAAeC,SAAf;;EACA,iBAAsC,IAAAJ,eAAA,EAASK,KAAK,CAACC,OAAN,CAAcV,IAAI,CAACnB,IAAnB,qCAA+BmB,IAAI,CAACnB,IAApC,IAA4C,EAArD,CAAtC;EAAA;EAAA,IAAO8B,WAAP;EAAA,IAAoBC,cAApB;;EACA,mBAAyB,IAAAC,yBAAA,GAAzB;EAAA,IAAQC,YAAR,gBAAQA,YAAR;;EACA,sBAAwB,IAAAC,kCAAA,GAAxB;EAAA,IAAQC,WAAR,mBAAQA,WAAR;;EACA,IAAMC,UAAU,GAAG,IAAAC,kBAAA,EAAY;IAAA,OAAMZ,OAAO,CAAC,IAAD,CAAb;EAAA,CAAZ,EAAiC,EAAjC,CAAnB;EACA,IAAMa,aAAa,GAAG,IAAAC,oBAAA,EAASC,kBAAT,EAAoB;IACtCC,SAAS,EAAE;MAAEC,KAAK,EAAE,IAAAC,4BAAA,EAASR,WAAW,CAACtC,KAArB;IAAT;EAD2B,CAApB,CAAtB;EAGA,IAAM+C,QAAQ,GAAG,IAAAC,YAAA,EAAIP,aAAJ,EAAmB,2BAAnB,EAAgD,EAAhD,CAAjB;EACA,IAAMQ,OAAO,GAAG/C,qBAAqB,CAAC6C,QAAD,EAAWT,WAAW,CAACtC,KAAvB,CAArC;EAEA,IAAMkD,gBAAgB,GAAG3B,OAAO,CAACD,IAAD,CAAhC;EAEA,IAAM6B,mBAAmB,GAAG,IAAAX,kBAAA,EACxB,iBAAsD;IAAA,IAAnDY,IAAmD,SAAnDA,IAAmD;;IAClD,IAAIzB,OAAJ,EAAa;MACT,OAAO,IAAP;IACH;;IACD,IAAM0B,OAAO,GAAGD,IAAI,CAACjD,IAAL,CAAUmD,MAAV,GAAmB,CAAnC;;IAEA,IAAID,OAAJ,EAAa;MACT;MACA,oBACI,yEACI,6BAAC,YAAD;QAAO,SAAS,EAAE,IAAAE,mBAAA,EAAW,oBAAX,EAAiCjD,UAAjC;MAAlB,GACK8C,IAAI,CAACjD,IAAL,CACIC,MADJ,CACW,UAAAL,GAAG;QAAA,OAAIA,GAAG,KAAKuC,WAAW,CAACtC,KAAxB;MAAA,CADd,EAEIK,GAFJ,CAEQ,UAACN,GAAD,EAAMyD,KAAN,EAAgB;QACjB,IAAMC,KAAK,GAAG,OAAO1D,GAAP,KAAe,QAAf,GAA0BA,GAA1B,GAAgCA,GAAG,CAAC2D,IAAlD;QACA,oBACI,6BAAC,WAAD;UACI,GAAG,EAAED,KAAK,GAAGD,KADjB;UAEI,KAAK,EAAE1D,gBAAgB,CAAC2D,KAAD,EAAQnB,WAAW,CAACtC,KAApB;QAF3B,EADJ;MAMH,CAVJ,CADL,CADJ,EAcKkD,gBAAgB,iBACb,6BAAC,kBAAD;QACI,SAAS,EAAEvC,eADf;QAEI,IAAI,eAAE,6BAAC,6BAAD,OAFV;QAGI,OAAO,EAAE4B;MAHb,EAfR,CADJ;IAwBH,CAhCiD,CAiClD;;;IACA,oBACI,6BAAC,qBAAD;MACI,SAAS,EAAEzB,YADf;MAEI,OAAO,EAAEyB,UAFb;MAGI,QAAQ,EAAE,CAACW;IAHf,iBADJ;EASH,CA5CuB,EA6CxB,CAACvB,OAAD,EAAUuB,gBAAV,CA7CwB,CAA5B;EAgDA,oBACI,6BAAC,UAAD;IACI,IAAI,EAAE;MACF/C,IAAI,EAAE8B;IADJ,CADV;IAII,QAAQ;MAAA,mGAAE;QAAA;QAAA;UAAA;YAAA;cAAA;gBAAS9B,IAAT,SAASA,IAAT;gBACN2B,SAAS,CAAC,IAAD,CAAT;gBACAN,MAAM,CACDmC,MADL,CACY;kBACJC,QAAQ,EAAEC,oBADN;kBAEJjB,SAAS,EAAE;oBACPkB,EAAE,EAAExC,IAAI,CAACwC,EADF;oBAEPV,IAAI,EAAE;sBAAEjD,IAAI,EAAJA;oBAAF;kBAFC,CAFP;kBAMJ4D,MAAM,EAAE,gBAACC,KAAD,EAAQC,OAAR,EAAoB;oBACxB,IAAMC,WAAqB,GAAG,IAAAlB,YAAA,EAC1BiB,OAD0B,EAE1B,kCAF0B,CAA9B,CADwB,CAMxB;;oBACA,IAAMb,IAAI,GAAG,IAAAe,kBAAA,EACTH,KAAK,CAACI,SAAN,CAAwC;sBACpCC,KAAK,EAAEC,mBAD6B;sBAEpC1B,SAAS,EAAEN;oBAFyB,CAAxC,CADS,CAAb;;oBAOA,IAAIc,IAAJ,EAAU;sBACNA,IAAI,CAACmB,WAAL,CAAiBC,SAAjB,CAA2BpB,IAA3B,CAAgCqB,OAAhC,CAAwC,UAAAC,IAAI,EAAI;wBAC5C,IAAIA,IAAI,CAACC,GAAL,KAAaT,WAAW,CAACS,GAA7B,EAAkC;0BAC9BD,IAAI,CAACvE,IAAL,GAAY+D,WAAW,CAAC/D,IAAxB;wBACH;sBACJ,CAJD;oBAKH;;oBAED6D,KAAK,CAACY,UAAN,CAAiB;sBACbP,KAAK,EAAEC,mBADM;sBAEb1B,SAAS,EAAEN,WAFE;sBAGbc,IAAI,EAAJA;oBAHa,CAAjB,EAtBwB,CA2BxB;;oBACA,IAAIrB,KAAK,CAACC,OAAN,CAAckC,WAAW,CAAC/D,IAA1B,CAAJ,EAAqC;sBACjC;sBACA,IAAM0E,YAAY,GAAG,IAAAV,kBAAA,EACjBH,KAAK,CAACI,SAAN,CAA2C;wBACvCC,KAAK,EAAE1B,kBADgC;wBAEvCC,SAAS,EAAE;0BAAEC,KAAK,EAAE,IAAAC,4BAAA,EAASR,WAAW,CAACtC,KAArB;wBAAT;sBAF4B,CAA3C,CADiB,CAArB;;sBAMA,IAAI,CAAC6E,YAAL,EAAmB;wBACf;sBACH,CAVgC,CAWjC;;;sBACA,IAAMC,eAAe,oCAAOZ,WAAW,CAAC/D,IAAnB,CAArB;;sBAEA,IAAI4B,KAAK,CAACC,OAAN,CAAc6C,YAAY,CAACN,WAAb,CAAyBxB,QAAvC,CAAJ,EAAsD;wBAClD8B,YAAY,CAACN,WAAb,CAAyBxB,QAAzB,CAAkC0B,OAAlC,CAA0C,UAAA1E,GAAG,EAAI;0BAC7C,IAAI,CAAC+E,eAAe,CAACC,QAAhB,CAAyBhF,GAAzB,CAAL,EAAoC;4BAChC+E,eAAe,CAACE,IAAhB,CAAqBjF,GAArB;0BACH;wBACJ,CAJD;sBAKH;;sBAED,IAAAkF,YAAA,EAAIJ,YAAJ,EAAkB,sBAAlB,EAA0CC,eAA1C,EAtBiC,CAuBjC;;sBACAd,KAAK,CAACY,UAAN,CAAiB;wBACbP,KAAK,EAAE1B,kBADM;wBAEbC,SAAS,EAAE;0BAAEC,KAAK,EAAE,IAAAC,4BAAA,EAASR,WAAW,CAACtC,KAArB;wBAAT,CAFE;wBAGboD,IAAI,EAAEyB;sBAHO,CAAjB;oBAKH;kBACJ;gBAhEG,CADZ,EAmEKK,IAnEL,CAmEU,YAAM;kBACRhD,cAAc,CAAC/B,IAAD,CAAd;kBACA2B,SAAS,CAAC,KAAD,CAAT;kBACAF,OAAO,CAAC,KAAD,CAAP;kBACAQ,YAAY,CAAC,4BAAD,CAAZ;gBACH,CAxEL;;cAFM;cAAA;gBAAA;YAAA;UAAA;QAAA;MAAA,CAAF;;MAAA;QAAA;MAAA;IAAA;EAJZ,GAiFK;IAAA,IAAG+C,IAAH,SAAGA,IAAH;IAAA,IAAS/B,IAAT,SAASA,IAAT;IAAA,IAAegC,QAAf,SAAeA,QAAf;IAAA,IAAyBC,MAAzB,SAAyBA,MAAzB;IAAA,oBACG,6BAAC,cAAD,CAAO,QAAP,qBACI,4DACI,6BAAC,UAAD;MAAM,SAAS,EAAE,iBAAjB;MAAoC,IAAI,eAAE,6BAAC,8BAAD;IAA1C,EADJ,EAEKlC,mBAAmB,CAAC;MACjB;MACA;MACAC,IAAI,EAAJA;IAHiB,CAAD,CAFxB,CADJ,EASKzB,OAAO,iBACJ,8DACI,6BAAC,IAAD;MACI,IAAI,EAAE,MADV;MAEI,YAAY,EAAE,sBACVxB,IADU,EAEVmF,YAFU,EAGT;QACD,IAAMC,aAAa,GAAGpF,IAAI,CAACE,GAAL,CAAS,UAAAN,GAAG,EAAI;UAClC,IAAMyF,cAAc,GAAGzF,GAAG,CAAC0F,WAAJ,EAAvB;UACA;AACxC;AACA;;UACwC,IACInD,WAAW,CAACtC,KAAZ,IACA,CAACwF,cAAc,CAACE,UAAf,CAA0BpD,WAAW,CAACtC,KAAtC,CAFL,EAGE;YACE,iBAAUsC,WAAW,CAACtC,KAAtB,SAA8BH,eAA9B,SAAgD2F,cAAhD;UACH;;UACD,OAAOA,cAAP;QACH,CAZqB,CAAtB;QAaAF,YAAY,CAACC,aAAD,CAAZ;MACH;IApBL,GAsBK;MAAA,IAAGI,KAAH,SAAGA,KAAH;MAAA,IAAaC,SAAb;MAAA,oBACG,6BAAC,+BAAD,oBACQA,SADR;QAEI,KAAK,EAAE1F,qBAAqB,CAACyF,KAAD,EAAQrD,WAAW,CAACtC,KAApB,CAFhC;QAGI,OAAO,EAAEiD,OAHb;QAII,WAAW,EAAE,gBAJjB;QAKI,WAAW,EAAE,8CALjB;QAMI,MAAM,EAAE,IANZ;QAOI,cAAc,EAAE,IAPpB;QAQI,eAAe,EAAE,IARrB;QASI,QAAQ,EAAEpB;MATd,GADH;IAAA,CAtBL,CADJ,eAqCI;MAAK,SAAS,EAAEX;IAAhB,gBACI,6BAAC,qBAAD;MACI,KAAK,MADT;MAEI,OAAO,EAAE,iBAAA2E,EAAE,EAAI;QACXR,MAAM,CAACQ,EAAD,CAAN;MACH,CAJL;MAKI,eAAa;IALjB,YADJ,eAUI,6BAAC,uBAAD;MACI,KAAK,MADT;MAEI,OAAO,EAAE,mBAAM;QACXT,QAAQ,CAAC,MAAD,EAASnD,WAAT,CAAR;QACAL,OAAO,CAAC,KAAD,CAAP;MACH;IALL,YAVJ,CArCJ,CAVR,CADH;EAAA,CAjFL,CADJ;AA4JH,CA7ND;;eA+NeP,I"}