From f76c4de7f369efd109a1aba398e01deca089ff34 Mon Sep 17 00:00:00 2001 From: karantalapalli Date: Thu, 10 Mar 2022 19:01:47 +0530 Subject: [PATCH 1/9] feat: add content type visualizer extension [ECO-656] --- README.md | 3 + content-type-visualizer/.eslintrc.json | 18 + content-type-visualizer/.gitignore | 4 + content-type-visualizer/LICENSE | 21 + content-type-visualizer/README.md | 30 ++ content-type-visualizer/gulpfile.js | 50 ++ content-type-visualizer/index.html | 160 +++++++ content-type-visualizer/package.json | 27 ++ content-type-visualizer/source/index.html | 161 +++++++ content-type-visualizer/source/index.js | 510 ++++++++++++++++++++ content-type-visualizer/source/style.css | 559 ++++++++++++++++++++++ 11 files changed, 1543 insertions(+) create mode 100644 content-type-visualizer/.eslintrc.json create mode 100644 content-type-visualizer/.gitignore create mode 100644 content-type-visualizer/LICENSE create mode 100644 content-type-visualizer/README.md create mode 100644 content-type-visualizer/gulpfile.js create mode 100644 content-type-visualizer/index.html create mode 100644 content-type-visualizer/package.json create mode 100644 content-type-visualizer/source/index.html create mode 100644 content-type-visualizer/source/index.js create mode 100644 content-type-visualizer/source/style.css diff --git a/README.md b/README.md index 000fa639..29760be0 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,9 @@ This extension lets you fetch and display Youtube videos into a field of your co [External API Lookup](./external-api-lookup-template): This extension lets you fetch data from an external API and display the data as possible values for the field on an entry page in Contentstack. +[Conten Type Visualizer](./content-type-visualizer) +Content Type Visualizer Dashboard Widget offers a graphical representation of all content types, along with their fields, in a particular stack. + ### Examples of custom widgets created using Extensions Here are some examples/use cases of custom widgets that can be created using Extensions. These examples come with readme files that explain how to install and get started with these widgets. diff --git a/content-type-visualizer/.eslintrc.json b/content-type-visualizer/.eslintrc.json new file mode 100644 index 00000000..5a437149 --- /dev/null +++ b/content-type-visualizer/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "env": { + "browser": true, + "es6": true, + "jquery": true + }, + "extends": "airbnb-base/legacy", + "parserOptions": { + "ecmaVersion": 2016, + "sourceType": "module" + }, + "globals": { + "ContentstackUIExtension": false + }, + "rules": { + "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"] + } +} \ No newline at end of file diff --git a/content-type-visualizer/.gitignore b/content-type-visualizer/.gitignore new file mode 100644 index 00000000..92a6367f --- /dev/null +++ b/content-type-visualizer/.gitignore @@ -0,0 +1,4 @@ +*.log +.cache +package-lock.json +node_modules diff --git a/content-type-visualizer/LICENSE b/content-type-visualizer/LICENSE new file mode 100644 index 00000000..0302523a --- /dev/null +++ b/content-type-visualizer/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 Contentstack + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/content-type-visualizer/README.md b/content-type-visualizer/README.md new file mode 100644 index 00000000..04db54d5 --- /dev/null +++ b/content-type-visualizer/README.md @@ -0,0 +1,30 @@ +# Content Type Visualizer – Contentstack Extension + +#### About this extension. +Content Type Visualizer Dashboard Widget offers a graphical representation of all content types, along with their fields, in a particular stack. + +![Content Type Visualizer Screenshot](https://images.contentstack.io/v3/assets/blt83726f918894d893/bltae909a9786341bbf/5f394a3ddb5c28785b6f048d/content-type-visualizer.png) + + +#### How to use this extension +We have created a step-by-step guide on how to create a Content Type Visualizer extension for your content types. You can refer the [Content Type Visualizer extension guide]() on our documentation site for more info. + + +#### Other Documentation +- [Extensions guide](https://www.contentstack.com/docs/guide/extensions) +- [Common questions about extensions](https://www.contentstack.com/docs/faqs#extensions) + + +#### Modifying Extension + +To modify the extension, first clone this repo and install the dependencies. Then, edit the HTML, CSS and JS files from the source folder, and create a build using gulp task. + +To install dependencies, run the following command in the root folder +``` +npm install gulp-cli -g +npm install +``` +To create new build for the extension, run the following command (index.html): + + gulp build + diff --git a/content-type-visualizer/gulpfile.js b/content-type-visualizer/gulpfile.js new file mode 100644 index 00000000..b274fd76 --- /dev/null +++ b/content-type-visualizer/gulpfile.js @@ -0,0 +1,50 @@ +const gulp = require('gulp'); +const inline = require('gulp-inline'); +const uglify = require('gulp-uglify'); +const gulpStylelint = require('gulp-stylelint'); +const minifyCss = require('gulp-clean-css'); +const babel = require('gulp-babel'); +const eslint = require('gulp-eslint'); + + +gulp.task('lint-js', () => { + return gulp.src('source/*.js') + .pipe(eslint()) + .pipe(eslint.format()) + .pipe(eslint.failAfterError()); +}); + +gulp.task('lint-css', () => { + return gulp + .src('source/*.css') + .pipe(gulpStylelint({ + config: { + extends: 'stylelint-config-standard' + }, + reporters: [{ + formatter: 'string', + console: true + }], + failAfterError: false + })); +}); + +gulp.task('inline', () => { + return gulp.src('./source/index.html') + .pipe(inline({ + js: [babel({ + presets: ["@babel/preset-env"] + }), uglify], + css: [minifyCss], + disabledTypes: ['svg', 'img'] + })) + .pipe(gulp.dest('./')); +}); + +gulp.task('build', gulp.series('lint-js', 'lint-css', 'inline')); + +gulp.task('watch', () => { + gulp.watch('source/*', gulp.series('build')); +}); + +gulp.task('default', gulp.series('build')); diff --git a/content-type-visualizer/index.html b/content-type-visualizer/index.html new file mode 100644 index 00000000..0480dbbc --- /dev/null +++ b/content-type-visualizer/index.html @@ -0,0 +1,160 @@ + + + + + + External API UI Extension Sample + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+ _ Content Types +
+
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+ JSON View + + Field count: 0 +
+ + Entry count: _ +
+
+ +
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/content-type-visualizer/package.json b/content-type-visualizer/package.json new file mode 100644 index 00000000..db2bb5c6 --- /dev/null +++ b/content-type-visualizer/package.json @@ -0,0 +1,27 @@ +{ + "name": "@contentstack/extension-custom-dashboard-content-type-visualizer", + "version": "1.0.0", + "description": "A diagrammatic representation of all content types in a stack.", + "main": "gulpfile.js", + "scripts": { + "build": "npx gulp build" + }, + "author": "Contentstack", + "license": "MIT", + "devDependencies": { + "@babel/cli": "7.5.0", + "@babel/core": "7.5.4", + "@babel/preset-env": "7.5.4", + "eslint": "5.6.0", + "eslint-config-airbnb-base": "13.1.0", + "gulp": "4.0.0", + "gulp-babel": "8.0.0", + "gulp-clean-css": "4.2.0", + "gulp-eslint": "6.0.0", + "gulp-inline": "0.1.3", + "gulp-stylelint": "7.0.0", + "gulp-uglify": "3.0.0", + "stylelint": "13.2.0", + "stylelint-config-standard": "20.0.0" + } +} diff --git a/content-type-visualizer/source/index.html b/content-type-visualizer/source/index.html new file mode 100644 index 00000000..313aa067 --- /dev/null +++ b/content-type-visualizer/source/index.html @@ -0,0 +1,161 @@ + + + + + + External API UI Extension Sample + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+ _ Content Types +
+
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+ JSON View + + Field count: 0 +
+ + Entry count: _ +
+
+ +
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/content-type-visualizer/source/index.js b/content-type-visualizer/source/index.js new file mode 100644 index 00000000..aa73b604 --- /dev/null +++ b/content-type-visualizer/source/index.js @@ -0,0 +1,510 @@ +/* global Handlebars,jsPlumb,dagre,_,ClipboardJS */ +/* eslint no-undef: "error" */ +/* eslint-disable radix */ +/* eslint-disable no-param-reassign */ +/* eslint-disable default-case */ +/* eslint-disable no-underscore-dangle */ +/* eslint-disable one-var */ +/* eslint-disable no-plusplus */ +/* eslint-disable no-else-return */ +/* eslint-disable no-prototype-builtins */ + +let extensionField; +let referenceConnections = {}; +let labels = {}; +let json = {}; +let count = {}; +let entryCount = {}; +let env = []; +let loader = $('.reference-loading'); +let envArray; +let apiKey; +let appHost; +let blockLength = 0; + +// Counts number of fields in a content type +function countFields(schema, uid) { + if (count.hasOwnProperty(uid)) { + count[uid] += schema.length + blockLength; + blockLength = 0; + } else { + Object.defineProperty(count, uid, { + value: schema.length, + writable: true + }); + } +} + +// Reads the content type schema +function readSchema(schema, uid) { + schema.forEach(field => { + if (field.data_type === 'group' || field.data_type === 'global_field') { + readSchema(field.schema, uid); + } + + if (field.data_type === 'blocks') { + blockLength += field.blocks.length; + field.blocks.forEach(block => { + readSchema(block.schema, uid); + }); + } + + if (field.data_type === 'reference') { + if (referenceConnections.hasOwnProperty(uid)) { + referenceConnections[uid] = referenceConnections[uid].concat(field.reference_to); + } else { + let references = [field.reference_to]; + Object.defineProperty(referenceConnections, uid, { + value: references.flat(1), + writable: true + }); + } + } + }); + + countFields(schema, uid); +} + +// To add labels on the connections +function connectorLabel(source, target) { + let sourceLabel = (labels[source] === true) ? '1' : 'M'; + let targetLabel = (labels[target] === true) ? '1' : 'M'; + return sourceLabel + ':' + targetLabel; +} + +function removeDuplicates(originalArray, prop) { + /* eslint-disable guard-for-in */ + /* eslint-disable vars-on-top */ + var newArray = []; + var lookupObject = {}; + /* eslint-disable block-scoped-var */ + for (var i in originalArray) { + lookupObject[originalArray[i][prop]] = originalArray[i]; + } + for (i in lookupObject) { + newArray.push(lookupObject[i]); + } + return newArray; +} + +function updateSidebarDetails(id) { + envArray.forEach(envData => { + extensionField.stack.ContentType(id).Entry + .Query() + .environment(envData.env) + .includeCount() + .find() + .then(result => { + if (entryCount.hasOwnProperty(id)) { + entryCount[id][envData.env] = result.count; + } else { + entryCount[id] = { + [envData.env]: result.count + }; + } + }); + }); + + $('.copy-btn').attr('data-clipboard-text', JSON.stringify(json[id], null, 2)); + $('#json-collapsed').JSONView(json[id], { + collapsed: false + }); + $('.title').text(json[id].title); + $('.edit-icon').attr('href', `https://${appHost}/#!/stack/${apiKey}/content-type/${id}/content-type-builder`); + $('.count').text('Field count: ' + count[id]); + $('#environments').val('default').change(); + $('#entry-count').text('Entry count: _'); + $('#environments').click(function () { + let selectedEnv = $(this).children('option:selected').val(); + if (selectedEnv === 'default') { + $('#entry-count').text('Entry count: _'); + } else { + $('#entry-count').text('Entry count: ' + entryCount[id][selectedEnv]); + } + }); +} + +function init() { + let diagramSource = $('#diagram-template').html(); + let diagramTemplate = Handlebars.compile(diagramSource); + + // Helper that handles if else conditions + Handlebars.registerHelper('if_eq', function (a, b, opts) { + if (a === b) { + return opts.fn(this); + } else { + return opts.inverse(this); + } + }); + + // Helper that returns field icon image url for each field in the content type + Handlebars.registerHelper('fieldIcon', function (type, metaData, displayType) { + let iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI4cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5OdW1iZXIgSWNvbiBDb3B5PC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz48L2RlZnM+DQogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJuZXctYnVpbGRlci0tLXdpdGgtc2VsZWN0LWZpZWxkLWNob2ljZXMtYWRkZWQtY29weS01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTk4LjAwMDAwMCwgLTYwMS4wMDAwMDApIj4NCiAgICAgICAgICAgIDxnIGlkPSJEYXRhLXR5cGVzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4wMDAwMDAsIDE5NS4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8ZyBpZD0iQm9vbGVhbi1maWVsZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTM0LjAwMDAwMCwgMzYwLjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iTnVtYmVyLUljb24tQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDkuMDAwMDAwLCA0Ni4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtNCIgc3Ryb2tlPSIjNUE1QTVBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMjciIGhlaWdodD0iMTkiIHJ4PSIxIj48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICA8dGV4dCBpZD0iMC0xIiBmb250LWZhbWlseT0iVGltZXNOZXdSb21hblBTTVQsIFRpbWVzIE5ldyBSb21hbiIgZm9udC1zaXplPSIxMyIgZm9udC13ZWlnaHQ9Im5vcm1hbCIgZmlsbD0iIzVBNUE1QSI+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRzcGFuIHg9IjYuMzc1IiB5PSIxNCI+MCAxPC90c3Bhbj4NCiAgICAgICAgICAgICAgICAgICAgICAgIDwvdGV4dD4NCiAgICAgICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg=='; + + if (type === 'text') { + switch (true) { + case (metaData.multiline === true): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI4cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5NdWx0aSBsaW5lIGljb248L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9Im5ldy1idWlsZGVyLS0td2l0aC1zZWxlY3QtZmllbGQtY2hvaWNlcy1hZGRlZC1jb3B5LTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMjQxLjAwMDAwMCkiIGZpbGwtcnVsZT0ibm9uemVybyI+DQogICAgICAgICAgICA8ZyBpZD0iRGF0YS10eXBlcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUuMDAwMDAwLCAxOTUuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9Ik11bHRpbGluZS1GaWVsZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTM0LjAwMDAwMCwgMC4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM2LjAwMDAwMCwgNDYuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iTXVsdGktbGluZS1pY29uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMy4wMDAwMDAsIDAuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS00IiBzdHJva2U9IiM1QTVBNUEiIHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMjciIGhlaWdodD0iMTkiIHJ4PSIxIj48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01IiBmaWxsPSIjNUE1QTVBIiB4PSI2IiB5PSI2IiB3aWR0aD0iMTYiIGhlaWdodD0iMSI+PC9yZWN0Pg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtNS1Db3B5IiBmaWxsPSIjNUE1QTVBIiB4PSI2IiB5PSIxMiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg=='; + break; + case (metaData.allow_rich_text === true): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjE1cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDE1IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5Hcm91cDwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0ibmV3LWJ1aWxkZXItLS13aXRoLXNlbGVjdC1maWVsZC1jaG9pY2VzLWFkZGVkLWNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcxLjAwMDAwMCwgLTM2MS4wMDAwMDApIiBmaWxsPSIjNUE1QTVBIj4NCiAgICAgICAgICAgIDxnIGlkPSJEYXRhLXR5cGVzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4wMDAwMDAsIDE5NS4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8ZyBpZD0iUmljaC10ZXh0LWZpZWxkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMTIwLjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU2LjAwMDAwMCwgNDYuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgICAgICA8dGV4dCBpZD0iVCIgZm9udC1mYW1pbHk9IlRpbWVzTmV3Um9tYW5QU01ULCBUaW1lcyBOZXcgUm9tYW4iIGZvbnQtc2l6ZT0iMTgiIGZvbnQtd2VpZ2h0PSJub3JtYWwiPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0c3BhbiB4PSIyLjAwMjQ0MTQxIiB5PSIxNiI+VDwvdHNwYW4+DQogICAgICAgICAgICAgICAgICAgICAgICA8L3RleHQ+DQogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTYiIGZpbGwtcnVsZT0ibm9uemVybyIgeD0iMCIgeT0iMTgiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyIj48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4='; + break; + case (metaData.markdown === true): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI4cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5NYXJrIERvd24gSUNPTjwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0ibmV3LWJ1aWxkZXItLS13aXRoLXNlbGVjdC1maWVsZC1jaG9pY2VzLWFkZGVkLWNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE5OC4wMDAwMDAsIC0zNjEuMDAwMDAwKSI+DQogICAgICAgICAgICA8ZyBpZD0iRGF0YS10eXBlcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUuMDAwMDAwLCAxOTUuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9Ik1hcmtkb3duLUZpZWxkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzQuMDAwMDAwLCAxMjAuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJNYXJrLURvd24tSUNPTiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDkuMDAwMDAwLCA0Ni4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJNdWx0aS1saW5lLWljb24iIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjNUE1QTVBIj4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTQiIHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMjciIGhlaWdodD0iMTkiIHJ4PSIxIj48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC4wMDAwMDAsIDIuMDAwMDAwKSIgZmlsbD0iIzVBNUE1QSI+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRleHQgaWQ9Ik0iIGZvbnQtZmFtaWx5PSJUaW1lc05ld1JvbWFuUFNNVCwgVGltZXMgTmV3IFJvbWFuIiBmb250LXNpemU9IjEzIiBmb250LXdlaWdodD0ibm9ybWFsIj4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRzcGFuIHg9IjAuMjIwNDU4OTg0IiB5PSIxMiI+TTwvdHNwYW4+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC90ZXh0Pg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4wMDAwMDAsIDMuMDAwMDAwKSIgZmlsbC1ydWxlPSJub256ZXJvIj4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS03IiB4PSIyIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSI4Ij48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoLTIiIHBvaW50cz0iMC41NDc5NDQ2MDEgNi4wNjQzNzYwMSA0LjQ5MjQyMTI2IDYuMDY0Mzc2MDEgMi41MjAxODI5MyA5LjA3NDA2MzYzIj48L3BvbHlnb24+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+'; + break; + case (metaData.extension === true): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI4cHgiIGhlaWdodD0iMTlweCIgdmlld0JveD0iMCAwIDI4IDE5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTIuNCAoNjczNzgpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT4yOHgxOCBleHRlbnNpb248L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8cGF0aCBkPSJNOC41MjE3MzkxMyw3LjMwNDM0NzgzIEw4LjUyMTczOTEzLDYuNjk1NjUyMTcgQzguNTIxNzM5MTMsMi45OTc3NDU1OSAxMS41MTk0ODQ3LDYuNzkyOTQ0MmUtMTYgMTUuMjE3MzkxMywwIEwyMC45MTMwNDM1LDAgQzIxLjQ2NTMyODIsLTEuMDE0NTMwNjNlLTE2IDIxLjkxMzA0MzUsMC40NDc3MTUyNSAyMS45MTMwNDM1LDEgTDIxLjkxMzA0MzUsMy42NTIxNzM5MSBMMjYuNzgyNjA4NywzLjY1MjE3MzkxIEMyNy40NTQ5NTUzLDMuNjUyMTczOTEgMjgsNC4xOTcyMTg1NyAyOCw0Ljg2OTU2NTIyIEMyOCw1LjU0MTkxMTg3IDI3LjQ1NDk1NTMsNi4wODY5NTY1MiAyNi43ODI2MDg3LDYuMDg2OTU2NTIgTDIxLjkxMzA0MzUsNi4wODY5NTY1MiBMMjEuOTEzMDQzNSwxMi4xNzM5MTMgTDI2Ljc4MjYwODcsMTIuMTczOTEzIEMyNy40NTQ5NTUzLDEyLjE3MzkxMyAyOCwxMi43MTg5NTc3IDI4LDEzLjM5MTMwNDMgQzI4LDE0LjA2MzY1MSAyNy40NTQ5NTUzLDE0LjYwODY5NTcgMjYuNzgyNjA4NywxNC42MDg2OTU3IEwyMS45MTMwNDM1LDE0LjYwODY5NTcgTDIxLjkxMzA0MzUsMTcuMjYwODY5NiBDMjEuOTEzMDQzNSwxNy44MTMxNTQzIDIxLjQ2NTMyODIsMTguMjYwODY5NiAyMC45MTMwNDM1LDE4LjI2MDg2OTYgTDE1LjIxNzM5MTMsMTguMjYwODY5NiBDMTEuNTE5NDg0NywxOC4yNjA4Njk2IDguNTIxNzM5MTMsMTUuMjYzMTI0IDguNTIxNzM5MTMsMTEuNTY1MjE3NCBMOC41MjE3MzkxMywxMC45NTY1MjE3IEwxLjgyNjA4Njk2LDEwLjk1NjUyMTcgQzAuODE3NTY2OTc5LDEwLjk1NjUyMTcgMS4yMzUwODA3NmUtMTYsMTAuMTM4OTU0OCAwLDkuMTMwNDM0NzggQy0xLjIzNTA4MDc2ZS0xNiw4LjEyMTkxNDggMC44MTc1NjY5NzksNy4zMDQzNDc4MyAxLjgyNjA4Njk2LDcuMzA0MzQ3ODMgTDguNTIxNzM5MTMsNy4zMDQzNDc4MyBaIE05Ljg2MDg2OTU3LDguNTIxNzM5MTMgTDEuODI2MDg2OTYsOC41MjE3MzkxMyBDMS40ODk5MTM2Myw4LjUyMTczOTEzIDEuMjE3MzkxMyw4Ljc5NDI2MTQ2IDEuMjE3MzkxMyw5LjEzMDQzNDc4IEMxLjIxNzM5MTMsOS40NjY2MDgxMSAxLjQ4OTkxMzYzLDkuNzM5MTMwNDMgMS44MjYwODY5Niw5LjczOTEzMDQzIEw5Ljg2MDg2OTU3LDkuNzM5MTMwNDMgTDkuODYwODY5NTcsMTEuNDgxMTA2NiBDOS44NjA4Njk1NywxNC40MTI1MzggMTIuMjM3MjY0MiwxNi43ODg5MzI3IDE1LjE2ODY5NTYsMTYuNzg4OTMyNyBMMTkuOTc2NTIxNywxNi43ODg5MzI3IEMyMC4yNTI2NjQsMTYuNzg4OTMyNyAyMC40NzY1MjE3LDE2LjU2NTA3NTEgMjAuNDc2NTIxNywxNi4yODg5MzI3IEwyMC40NzY1MjE3LDEuOTYwODY5NTcgQzIwLjQ3NjUyMTcsMS42ODQ3MjcxOSAyMC4yNTI2NjQsMS40NjA4Njk1NyAxOS45NzY1MjE3LDEuNDYwODY5NTcgTDE1LjE2ODY5NTYsMS40NjA4Njk1NyBDMTIuMjM3MjY0MiwxLjQ2MDg2OTU3IDkuODYwODY5NTcsMy44MzcyNjQyMyA5Ljg2MDg2OTU3LDYuNzY4Njk1NjEgTDkuODYwODY5NTcsOC41MjE3MzkxMyBaIiBpZD0iMjh4MTgtZXh0ZW5zaW9uIiBmaWxsPSIjNjM3NDgwIj48L3BhdGg+DQogICAgPC9nPg0KPC9zdmc+'; + break; + case (displayType === 'dropdown'): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI4cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5TaW5nbGUgbGluZSBpY29uIENvcHk8L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9Im5ldy1idWlsZGVyLS0td2l0aC1zZWxlY3QtZmllbGQtY2hvaWNlcy1hZGRlZC1jb3B5LTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTcuMDAwMDAwLCAtNDgxLjAwMDAwMCkiIGZpbGwtcnVsZT0ibm9uemVybyI+DQogICAgICAgICAgICA8ZyBpZD0iRGF0YS10eXBlcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUuMDAwMDAwLCAxOTUuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9IlNlbGVjdC1maWVsZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTM0LjAwMDAwMCwgMjQwLjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iU2luZ2xlLWxpbmUtaWNvbi1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0OC4wMDAwMDAsIDQ2LjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS00IiBzdHJva2U9IiM1QTVBNUEiIHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMjciIGhlaWdodD0iMTkiIHJ4PSIxIj48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi4wMDAwMDAsIDUuMDAwMDAwKSIgZmlsbD0iIzVBNUE1QSI+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTciPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTE2IiB4PSIwIiB5PSIwIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiByeD0iMSI+PC9yZWN0Pg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTUiIHg9IjUiIHk9IjAuNSIgd2lkdGg9IjEwLjYiIGhlaWdodD0iMSI+PC9yZWN0Pg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNy1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgNC4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0xNiIgeD0iMCIgeT0iMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIgcng9IjEiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01IiB4PSI1IiB5PSIwLjUiIHdpZHRoPSIxMC42IiBoZWlnaHQ9IjEiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTctQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgOC4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0xNiIgeD0iMCIgeT0iMCIgd2lkdGg9IjIiIGhlaWdodD0iMiIgcng9IjEiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01IiB4PSI1IiB5PSIwLjUiIHdpZHRoPSIxMC42IiBoZWlnaHQ9IjEiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4='; + break; + default: + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI4cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5TaW5nbGUgbGluZSBpY29uPC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz48L2RlZnM+DQogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJuZXctYnVpbGRlci0tLXdpdGgtc2VsZWN0LWZpZWxkLWNob2ljZXMtYWRkZWQtY29weS01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjQuMDAwMDAwLCAtMjQxLjAwMDAwMCkiIGZpbGwtcnVsZT0ibm9uemVybyI+DQogICAgICAgICAgICA8ZyBpZD0iRGF0YS10eXBlcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUuMDAwMDAwLCAxOTUuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9IlNpbmdsZS1saW5lLWZpZWxkIj4NCiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxLjAwMDAwMCwgNDYuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iU2luZ2xlLWxpbmUtaWNvbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTguMDAwMDAwLCAwLjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtNCIgc3Ryb2tlPSIjNUE1QTVBIiB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjI3IiBoZWlnaHQ9IjE5IiByeD0iMSI+PC9yZWN0Pg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtNSIgZmlsbD0iIzVBNUE1QSIgeD0iNS42IiB5PSI2LjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxIj48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4='; + } + } else { + switch (true) { + case (type === 'number'): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI4cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5OdW1iZXIgSWNvbjwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0ibmV3LWJ1aWxkZXItLS13aXRoLXNlbGVjdC1maWVsZC1jaG9pY2VzLWFkZGVkLWNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTY0LjAwMDAwMCwgLTYwMS4wMDAwMDApIj4NCiAgICAgICAgICAgIDxnIGlkPSJEYXRhLXR5cGVzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4wMDAwMDAsIDE5NS4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8ZyBpZD0iTnVtYmVyLWZpZWxkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMzYwLjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iTnVtYmVyLUljb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ5LjAwMDAwMCwgNDYuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTQiIHN0cm9rZT0iIzVBNUE1QSIgZmlsbC1ydWxlPSJub256ZXJvIiB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjI3IiBoZWlnaHQ9IjE5IiByeD0iMSI+PC9yZWN0Pg0KICAgICAgICAgICAgICAgICAgICAgICAgPHRleHQgaWQ9IjEtMiIgZm9udC1mYW1pbHk9IlRpbWVzTmV3Um9tYW5QU01ULCBUaW1lcyBOZXcgUm9tYW4iIGZvbnQtc2l6ZT0iMTMiIGZvbnQtd2VpZ2h0PSJub3JtYWwiIGZpbGw9IiM1QTVBNUEiPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0c3BhbiB4PSI1LjM3NSIgeT0iMTQiPjEgMjwvdHNwYW4+DQogICAgICAgICAgICAgICAgICAgICAgICA8L3RleHQ+DQogICAgICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4='; + break; + case (type === 'boolean'): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI4cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5OdW1iZXIgSWNvbiBDb3B5PC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz48L2RlZnM+DQogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJuZXctYnVpbGRlci0tLXdpdGgtc2VsZWN0LWZpZWxkLWNob2ljZXMtYWRkZWQtY29weS01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTk4LjAwMDAwMCwgLTYwMS4wMDAwMDApIj4NCiAgICAgICAgICAgIDxnIGlkPSJEYXRhLXR5cGVzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4wMDAwMDAsIDE5NS4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8ZyBpZD0iQm9vbGVhbi1maWVsZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTM0LjAwMDAwMCwgMzYwLjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iTnVtYmVyLUljb24tQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDkuMDAwMDAwLCA0Ni4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtNCIgc3Ryb2tlPSIjNUE1QTVBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMjciIGhlaWdodD0iMTkiIHJ4PSIxIj48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICA8dGV4dCBpZD0iMC0xIiBmb250LWZhbWlseT0iVGltZXNOZXdSb21hblBTTVQsIFRpbWVzIE5ldyBSb21hbiIgZm9udC1zaXplPSIxMyIgZm9udC13ZWlnaHQ9Im5vcm1hbCIgZmlsbD0iIzVBNUE1QSI+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRzcGFuIHg9IjYuMzc1IiB5PSIxNCI+MCAxPC90c3Bhbj4NCiAgICAgICAgICAgICAgICAgICAgICAgIDwvdGV4dD4NCiAgICAgICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg=='; + break; + case (type === 'isodate'): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjIxcHgiIGhlaWdodD0iMjFweCIgdmlld0JveD0iMCAwIDIxIDIxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5jYWxlbmRhciAoMSk8L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9Im5ldy1idWlsZGVyLS0td2l0aC1zZWxlY3QtZmllbGQtY2hvaWNlcy1hZGRlZC1jb3B5LTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02OC4wMDAwMDAsIC03MjIuMDAwMDAwKSIgZmlsbD0iIzVBNUE1QSIgZmlsbC1ydWxlPSJub256ZXJvIj4NCiAgICAgICAgICAgIDxnIGlkPSJEYXRhLXR5cGVzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNS4wMDAwMDAsIDE5NS4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8ZyBpZD0iRGF0ZS1maWVsZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDQ4MS4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImNhbGVuZGFyLSgxKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTMuMDAwMDAwLCA0Ni4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNC40Mzc1LDE1LjMxMjUgTDEyLjY4NzUsMTUuMzEyNSBMMTIuNjg3NSwxNy4wNjI1IEwxNC40Mzc1LDE3LjA2MjUgTDE0LjQzNzUsMTUuMzEyNSBaIE0xMS4zNzUsOS4xODc1IEw5LjYyNSw5LjE4NzUgTDkuNjI1LDEwLjkzNzUgTDExLjM3NSwxMC45Mzc1IEwxMS4zNzUsOS4xODc1IFogTTE0LjQzNzUsMTIuMjUgTDEyLjY4NzUsMTIuMjUgTDEyLjY4NzUsMTQgTDE0LjQzNzUsMTQgTDE0LjQzNzUsMTIuMjUgWiBNMTQuNDM3NSw5LjE4NzUgTDEyLjY4NzUsOS4xODc1IEwxMi42ODc1LDEwLjkzNzUgTDE0LjQzNzUsMTAuOTM3NSBMMTQuNDM3NSw5LjE4NzUgWiBNMTcuNSw5LjE4NzUgTDE1Ljc1LDkuMTg3NSBMMTUuNzUsMTAuOTM3NSBMMTcuNSwxMC45Mzc1IEwxNy41LDkuMTg3NSBaIE0xNy41LDEyLjI1IEwxNS43NSwxMi4yNSBMMTUuNzUsMTQgTDE3LjUsMTQgTDE3LjUsMTIuMjUgWiBNMTEuMzc1LDEyLjI1IEw5LjYyNSwxMi4yNSBMOS42MjUsMTQgTDExLjM3NSwxNCBMMTEuMzc1LDEyLjI1IFogTTguMzEyNSw5LjE4NzUgTDYuNTYyNSw5LjE4NzUgTDYuNTYyNSwxMC45Mzc1IEw4LjMxMjUsMTAuOTM3NSBMOC4zMTI1LDkuMTg3NSBaIE01LjI1LDEyLjI1IEwzLjUsMTIuMjUgTDMuNSwxNCBMNS4yNSwxNCBMNS4yNSwxMi4yNSBaIE04LjMxMjUsMTUuMzEyNSBMNi41NjI1LDE1LjMxMjUgTDYuNTYyNSwxNy4wNjI1IEw4LjMxMjUsMTcuMDYyNSBMOC4zMTI1LDE1LjMxMjUgWiBNNS4yNSwxNS4zMTI1IEwzLjUsMTUuMzEyNSBMMy41LDE3LjA2MjUgTDUuMjUsMTcuMDYyNSBMNS4yNSwxNS4zMTI1IFogTTguMzEyNSwxMi4yNSBMNi41NjI1LDEyLjI1IEw2LjU2MjUsMTQgTDguMzEyNSwxNCBMOC4zMTI1LDEyLjI1IFogTTExLjM3NSwxNS4zMTI1IEw5LjYyNSwxNS4zMTI1IEw5LjYyNSwxNy4wNjI1IEwxMS4zNzUsMTcuMDYyNSBMMTEuMzc1LDE1LjMxMjUgWiBNMTcuMDYyNSwxLjc1IEwxNy4wNjI1LDAgTDE2LjE4NzUsMCBMMTYuMTg3NSwxLjc1IEw0LjgxMjUsMS43NSBMNC44MTI1LDAgTDMuOTM3NSwwIEwzLjkzNzUsMS43NSBMMCwxLjc1IEwwLDIxIEwyMSwyMSBMMjEsMS43NSBMMTcuMDYyNSwxLjc1IFogTTIwLjEyNSwyMC4xMjUgTDAuODc1LDIwLjEyNSBMMC44NzUsNyBMMjAuMTI1LDcgTDIwLjEyNSwyMC4xMjUgWiBNMjAuMTI1LDYuMTI1IEwwLjg3NSw2LjEyNSBMMC44NzUsMi42MjUgTDMuOTM3NSwyLjYyNSBMMy45Mzc1LDMuNSBMNC44MTI1LDMuNSBMNC44MTI1LDIuNjI1IEwxNi4xODc1LDIuNjI1IEwxNi4xODc1LDMuNSBMMTcuMDYyNSwzLjUgTDE3LjA2MjUsMi42MjUgTDIwLjEyNSwyLjYyNSBMMjAuMTI1LDYuMTI1IFoiIGlkPSJTaGFwZSI+PC9wYXRoPg0KICAgICAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+'; + break; + case (type === 'file' && metaData.rich_text_type === 'standard'): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjVweCIgdmlld0JveD0iMCAwIDIwIDI1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5maWxlPC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz48L2RlZnM+DQogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJuZXctYnVpbGRlci0tLXdpdGgtc2VsZWN0LWZpZWxkLWNob2ljZXMtYWRkZWQtY29weS01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAwMDAwMCwgLTk2MC4wMDAwMDApIiBmaWxsPSIjNUE1QTVBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPg0KICAgICAgICAgICAgPGcgaWQ9IkRhdGEtdHlwZXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1LjAwMDAwMCwgMTk1LjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgIDxnIGlkPSJGaWxlLWZpZWxkLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzNC4wMDAwMDAsIDcyMS4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImZpbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUzLjAwMDAwMCwgNDQuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNC40MTY2NjY2Nyw3IEw4LjU4MzMzMzMzLDcgQzguODEzMzMzMzMsNyA5LDYuNzc2NSA5LDYuNSBDOSw2LjIyMzUgOC44MTMzMzMzMyw2IDguNTgzMzMzMzMsNiBMNC40MTY2NjY2Nyw2IEM0LjE4NjY2NjY3LDYgNCw2LjIyMzUgNCw2LjUgQzQsNi43NzY1IDQuMTg2NjY2NjcsNyA0LjQxNjY2NjY3LDcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTQuNTkyNTkyNiwxMiBMNC40MDc0MDc0MSwxMiBDNC4xODI1MTg1MiwxMiA0LDEyLjIyMzUgNCwxMi41IEM0LDEyLjc3NjUgNC4xODI1MTg1MiwxMyA0LjQwNzQwNzQxLDEzIEwxNC41OTI1OTI2LDEzIEMxNC44MTc0ODE1LDEzIDE1LDEyLjc3NjUgMTUsMTIuNSBDMTUsMTIuMjIzNSAxNC44MTc0ODE1LDEyIDE0LjU5MjU5MjYsMTIgWiIgaWQ9IlNoYXBlIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTMuNzkzMTkxNSwwIEwwLDAgTDAsMjUgTDIwLDI1IEwyMCw2LjA3NzUgTDEzLjc5MzE5MTUsMCBaIE0xNC4wNDI1NTMyLDEuNDIyNSBMMTguNTQ3MjM0LDUuODMzMzMzMzMgTDE0LjA0MjU1MzIsNS44MzMzMzMzMyBMMTQuMDQyNTUzMiwxLjQyMjUgWiBNMC44NTEwNjM4MywyNC4xNjY2NjY3IEwwLjg1MTA2MzgzLDAuODMzMzMzMzMzIEwxMy4xOTE0ODk0LDAuODMzMzMzMzMzIEwxMy4xOTE0ODk0LDYuNjY2NjY2NjcgTDE5LjE0ODkzNjIsNi42NjY2NjY2NyBMMTkuMTQ4OTM2MiwyNC4xNjY2NjY3IEwwLjg1MTA2MzgzLDI0LjE2NjY2NjcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4='; + break; + case (type === 'link'): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjIxcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDIxIDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5saW5rPC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz48L2RlZnM+DQogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJuZXctYnVpbGRlci0tLXdpdGgtc2VsZWN0LWZpZWxkLWNob2ljZXMtYWRkZWQtY29weS01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjguMDAwMDAwLCAtMTA4Mi4wMDAwMDApIiBmaWxsPSIjNUE1QTVBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPg0KICAgICAgICAgICAgPGcgaWQ9IkRhdGEtdHlwZXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1LjAwMDAwMCwgMTk1LjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgIDxnIGlkPSJMaW5rLWZpZWxkLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCA4NDEuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJsaW5rIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1My4wMDAwMDAsIDQ2LjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTExLjA5NTY1MjIsOC40MDQzNDc4MyBDMTAuODY1MjE3NCw4LjYzNDc4MjYxIDEwLjg2NTIxNzQsOS4wMDQzNDc4MyAxMS4wOTU2NTIyLDkuMjM0NzgyNjEgQzEyLjA0NzgyNjEsMTAuMTg2OTU2NSAxMi4wNDc4MjYxLDExLjczNDc4MjYgMTEuMDk1NjUyMiwxMi42ODY5NTY1IEw2LjA5NTY1MjE3LDE3LjY4Njk1NjUgQzUuMTQzNDc4MjYsMTguNjM5MTMwNCAzLjU5NTY1MjE3LDE4LjYzOTEzMDQgMi42NDM0NzgyNiwxNy42ODY5NTY1IEwxLjg5MTMwNDM1LDE2LjkzNDc4MjYgQzAuOTM5MTMwNDM1LDE1Ljk4MjYwODcgMC45MzkxMzA0MzUsMTQuNDM0NzgyNiAxLjg5MTMwNDM1LDEzLjQ4MjYwODcgTDYuODkxMzA0MzUsOC40ODI2MDg3IEM3LjEyMTczOTEzLDguMjUyMTczOTEgNy4xMjE3MzkxMyw3Ljg4MjYwODcgNi44OTEzMDQzNSw3LjY1MjE3MzkxIEM2LjY2MDg2OTU3LDcuNDIxNzM5MTMgNi4yOTEzMDQzNSw3LjQyMTczOTEzIDYuMDYwODY5NTcsNy42NTIxNzM5MSBMMS4wNjA4Njk1NywxMi42NTIxNzM5IEMwLjM3ODI2MDg3LDEzLjMzNDc4MjYgMCwxNC4yNDM0NzgzIDAsMTUuMjA4Njk1NyBDMCwxNi4xNzM5MTMgMC4zNzM5MTMwNDMsMTcuMDgyNjA4NyAxLjA2MDg2OTU3LDE3Ljc2NTIxNzQgTDEuODEzMDQzNDgsMTguNTE3MzkxMyBDMi41MTczOTEzLDE5LjIyMTczOTEgMy40NDM0NzgyNiwxOS41NzM5MTMgNC4zNjk1NjUyMiwxOS41NzM5MTMgQzUuMjk1NjUyMTcsMTkuNTczOTEzIDYuMjIxNzM5MTMsMTkuMjIxNzM5MSA2LjkyNjA4Njk2LDE4LjUxNzM5MTMgTDExLjkyNjA4NywxMy41MTczOTEzIEMxMy4zMzQ3ODI2LDEyLjEwODY5NTcgMTMuMzM0NzgyNiw5LjgxMzA0MzQ4IDExLjkyNjA4Nyw4LjQwNDM0NzgzIEMxMS43LDguMTczOTEzMDQgMTEuMzI2MDg3LDguMTczOTEzMDQgMTEuMDk1NjUyMiw4LjQwNDM0NzgzIFoiIGlkPSJTaGFwZSI+PC9wYXRoPg0KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE5LjkzNDc4MjYsMS44MzQ3ODI2MSBMMTkuMTgyNjA4NywxLjA4MjYwODcgQzE3Ljc3MzkxMywtMC4zMjYwODY5NTcgMTUuNDc4MjYwOSwtMC4zMjYwODY5NTcgMTQuMDY5NTY1MiwxLjA4MjYwODcgTDkuMDY5NTY1MjIsNi4wODI2MDg3IEM3LjY2MDg2OTU3LDcuNDkxMzA0MzUgNy42NjA4Njk1Nyw5Ljc4Njk1NjUyIDkuMDY5NTY1MjIsMTEuMTk1NjUyMiBDOS4zLDExLjQyNjA4NyA5LjY2OTU2NTIyLDExLjQyNjA4NyA5LjksMTEuMTk1NjUyMiBDMTAuMTMwNDM0OCwxMC45NjUyMTc0IDEwLjEzMDQzNDgsMTAuNTk1NjUyMiA5LjksMTAuMzY1MjE3NCBDOC45NDc4MjYwOSw5LjQxMzA0MzQ4IDguOTQ3ODI2MDksNy44NjUyMTczOSA5LjksNi45MTMwNDM0OCBMMTQuOSwxLjkxMzA0MzQ4IEMxNS44NTIxNzM5LDAuOTYwODY5NTY1IDE3LjQsMC45NjA4Njk1NjUgMTguMzUyMTczOSwxLjkxMzA0MzQ4IEwxOS4xMDQzNDc4LDIuNjY1MjE3MzkgQzIwLjA1NjUyMTcsMy42MTczOTEzIDIwLjA1NjUyMTcsNS4xNjUyMTczOSAxOS4xMDQzNDc4LDYuMTE3MzkxMyBMMTQuMTA0MzQ3OCwxMS4xMTczOTEzIEMxMy44NzM5MTMsMTEuMzQ3ODI2MSAxMy44NzM5MTMsMTEuNzE3MzkxMyAxNC4xMDQzNDc4LDExLjk0NzgyNjEgQzE0LjIxNzM5MTMsMTIuMDYwODY5NiAxNC4zNjk1NjUyLDEyLjEyMTczOTEgMTQuNTE3MzkxMywxMi4xMjE3MzkxIEMxNC42NjUyMTc0LDEyLjEyMTczOTEgMTQuODE3MzkxMywxMi4wNjUyMTc0IDE0LjkzMDQzNDgsMTEuOTQ3ODI2MSBMMTkuOTMwNDM0OCw2Ljk0NzgyNjA5IEMyMC42MTMwNDM1LDYuMjY1MjE3MzkgMjAuOTkxMzA0Myw1LjM1NjUyMTc0IDIwLjk5MTMwNDMsNC4zOTEzMDQzNSBDMjAuOTkxMzA0MywzLjQyNjA4Njk2IDIwLjYxNzM5MTMsMi41MTczOTEzIDE5LjkzNDc4MjYsMS44MzQ3ODI2MSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4NCiAgICAgICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg=='; + break; + case (type === 'reference'): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI4cHgiIGhlaWdodD0iMTVweCIgdmlld0JveD0iMCAwIDI4IDE1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5OdW1iZXIgSWNvbiBDb3B5IDQ8L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9Im5ldy1idWlsZGVyLS0td2l0aC1zZWxlY3QtZmllbGQtY2hvaWNlcy1hZGRlZC1jb3B5LTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTA4NS4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iPg0KICAgICAgICAgICAgPGcgaWQ9IkRhdGEtdHlwZXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1LjAwMDAwMCwgMTk1LjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWZlcmVuY2UtZmllbGQtQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTM0LjAwMDAwMCwgODQxLjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iTnVtYmVyLUljb24tQ29weS00IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0OS4wMDAwMDAsIDQ5LjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS00IiBzdHJva2U9IiM1QTVBNUEiIHg9IjUuNSIgeT0iMC41IiB3aWR0aD0iMTciIGhlaWdodD0iMTQiIHJ4PSIxIj48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNS4wMDAwMDAsIDMuNTAwMDAwKSByb3RhdGUoLTI3MC4wMDAwMDApIHRyYW5zbGF0ZSgtNS4wMDAwMDAsIC0zLjUwMDAwMCkgdHJhbnNsYXRlKDIuNTAwMDAwLCAtMS41MDAwMDApIiBmaWxsPSIjNUE1QTVBIj4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTciIHg9IjIiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjguOCI+PC9yZWN0Pg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoLTIiIHBvaW50cz0iMC41NDc5NDQ2MDEgNi42NzA4MTM2MSA0LjQ5MjQyMTI2IDYuNjcwODEzNjEgMi41MjAxODI5MyA5Ljk4MTQ2OTk5Ij48L3BvbHlnb24+DQogICAgICAgICAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMi1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMy4wMDAwMDAsIDExLjUwMDAwMCkgcm90YXRlKC05MC4wMDAwMDApIHRyYW5zbGF0ZSgtMjMuMDAwMDAwLCAtMTEuNTAwMDAwKSB0cmFuc2xhdGUoMjAuNTAwMDAwLCA2LjUwMDAwMCkiIGZpbGw9IiM1QTVBNUEiPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtNyIgeD0iMiIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iOC44Ij48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlBhdGgtMiIgcG9pbnRzPSIwLjU0Nzk0NDYwMSA2LjY3MDgxMzYxIDQuNDkyNDIxMjYgNi42NzA4MTM2MSAyLjUyMDE4MjkzIDkuOTgxNDY5OTkiPjwvcG9seWdvbj4NCiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg=='; + break; + case (type === 'group'): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI3cHgiIGhlaWdodD0iMTlweCIgdmlld0JveD0iMCAwIDI3IDE5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5Hcm91cCBpY29uIENvcHk8L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9Im5ldy1idWlsZGVyLS0td2l0aC1zZWxlY3QtZmllbGQtY2hvaWNlcy1hZGRlZC1jb3B5LTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NC4wMDAwMDAsIC05NjIuMDAwMDAwKSIgZmlsbC1ydWxlPSJub256ZXJvIj4NCiAgICAgICAgICAgIDxnIGlkPSJHcm91cC1pY29uLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0LjAwMDAwMCwgOTYyLjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOS43MjIyMjIyLDE3Ljc3Nzc3NzggTDE5LjcyMjIyMjIsNi44MjYwMjA3NSBDMTkuNzIyMjIyMiw2LjU0OTg3ODM4IDE5LjQ5ODM2NDYsNi4zMjYwMjA3NSAxOS4yMjIyMjIyLDYuMzI2MDIwNzUgTDE1LjQxNTQ4OCw2LjMyNjAyMDc1IEwxNS40MTU0ODgsMy44ODg4ODg4OSBDMTUuNDE1NDg4LDMuNjEyNzQ2NTEgMTUuMTkxNjMwNCwzLjM4ODg4ODg5IDE0LjkxNTQ4OCwzLjM4ODg4ODg5IEwxLDMuMzg4ODg4ODkgQzAuNzIzODU3NjI1LDMuMzg4ODg4ODkgMC41LDMuNjEyNzQ2NTEgMC41LDMuODg4ODg4ODkgTDAuNSwxNy43Nzc3Nzc4IEMwLjUsMTguMDUzOTIwMiAwLjcyMzg1NzYyNSwxOC4yNzc3Nzc4IDEsMTguMjc3Nzc3OCBMMTkuMjIyMjIyMiwxOC4yNzc3Nzc4IEMxOS40OTgzNjQ2LDE4LjI3Nzc3NzggMTkuNzIyMjIyMiwxOC4wNTM5MjAyIDE5LjcyMjIyMjIsMTcuNzc3Nzc3OCBaIiBpZD0iUmVjdGFuZ2xlLTI1IiBzdHJva2U9IiM1QTVBNUEiPjwvcGF0aD4NCiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNi44Nzc4OTMwNSw5LjE2NjY2NjY3IEM2LjcwMDUyNTQsOS4xNjY2NjY2NyA2LjUzNjQzMjYyLDkuMjYwNjMyMTIgNi40NDY2NjI2Myw5LjQxMzYwNDc4IEwxLjY4Njc2NDA0LDE3LjUyNDcxNTkgQzEuNjQxNzM0MTksMTcuNjAxNDQ5MSAxLjYxNzk5NDQ2LDE3LjY4ODgwNzcgMS42MTc5OTQ0NiwxNy43Nzc3Nzc4IEMxLjYxNzk5NDQ2LDE4LjA1MzkyMDIgMS44NDE4NTIwOSwxOC4yNzc3Nzc4IDIuMTE3OTk0NDYsMTguMjc3Nzc3OCBMMjAuNTY2NTUxNCwxOC4yNzc3Nzc4IEMyMC43NDM5MTksMTguMjc3Nzc3OCAyMC45MDgwMTE4LDE4LjE4MzgxMjMgMjAuOTk3NzgxOCwxOC4wMzA4Mzk3IEwyNS43NTc2ODA0LDkuOTE5NzI4NTYgQzI1LjgwMjcxMDMsOS44NDI5OTUzOSAyNS44MjY0NSw5Ljc1NTYzNjcgMjUuODI2NDUsOS42NjY2NjY2NyBDMjUuODI2NDUsOS4zOTA1MjQyOSAyNS42MDI1OTI0LDkuMTY2NjY2NjcgMjUuMzI2NDUsOS4xNjY2NjY2NyBMNi44Nzc4OTMwNSw5LjE2NjY2NjY3IFoiIGlkPSJSZWN0YW5nbGUtMjUtQ29weSIgc3Ryb2tlPSIjNUE1QTVBIj48L3BhdGg+DQogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC43Nzc3NzgsIDAuMDAwMDAwKSIgZmlsbD0iIzVBNUE1QSI+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMjYiIHg9IjIuODg4ODg4ODkiIHk9IjAiIHdpZHRoPSIxLjQ0NDQ0NDQ0IiBoZWlnaHQ9IjcuMjIyMjIyMjIiIHJ4PSIwLjUiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yNi1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjYxMTExMSwgMy42MTExMTEpIHJvdGF0ZSgtMjcwLjAwMDAwMCkgdHJhbnNsYXRlKC0zLjYxMTExMSwgLTMuNjExMTExKSAiIHg9IjIuODg4ODg4ODkiIHk9IjAiIHdpZHRoPSIxLjQ0NDQ0NDQ0IiBoZWlnaHQ9IjcuMjIyMjIyMjIiIHJ4PSIwLjUiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4='; + break; + case (type === 'global_field'): + iconUrl = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNzA3MDcwIj48cGF0aCBkPSJNMTAgMGMyLjY3IDAgNS4xODIgMS4wNCA3LjA3IDIuOTMuNDE2LjQxNi43OS44NjIgMS4xMjIgMS4zMzNoLS44MDdjLS4yMzgtLjMwNS0uNDk2LS41OTctLjc3NC0uODc1LS4yMzYtLjIzNi0uNDg0LS40NTgtLjc0LS42NjZoLS42NDJsLjE5LjI0MmMuMzA2LjQwNi41ODMuODQuODMgMS4zaC0uNzQ0YTguNzUgOC43NSAwIDAgMC0xLjEzLTEuNTQxaC0xLjQ4OGwuMTMyLjMxN2MuMTUyLjM4NC4yOS43OTMuNDE0IDEuMjI0aC0uMzJ2MS45MTVoLTIuNzl2My41aDIuNzl2LjY0OGgtMi43OXYzLjVoMi43OXYyLjI0M2guMjJsLS4zMTYuODk2LS4xMzIuMzE3aDEuNDg4YTguNTggOC41OCAwIDAgMCAuOTMxLTEuMjEzaC43NmMtLjE5OC4zNC0uNDEzLjY2My0uNjQ1Ljk3bC0uMTkuMjQyaC42NDJjLjI1Ni0uMjA3LjUwMy0uNDMuNzQtLjY2NmwuNTA2LS41NDdoLjgzNGExMC4xOCAxMC4xOCAwIDAgMS0uODgxIDEuMDA2QzE1LjE4MiAxOC45NiAxMi42NyAyMCAxMCAyMHMtNS4xODItMS4wNC03LjA3LTIuOTNTMCAxMi42NyAwIDEwczEuMDQtNS4xODIgMi45My03LjA3UzcuMzMgMCAxMCAwek0yLjM4IDEwLjMyNEguNjU0YTkuMzEgOS4zMSAwIDAgMCAuODA2IDMuNDk5aDEuNWMtLjM0Ni0xLjEtLjU0LTIuMjgtLjU3LTMuNXptLjU3LTQuMTQ3aC0xLjVhOS4zMSA5LjMxIDAgMCAwLS44MDYgMy40OTlIMi4zOGMuMDMtMS4yMTguMjI0LTIuNC41Ny0zLjV6bTcuMzc0IDExLjFoMS44NTJsLjI0Mi0uNTU2Yy4yNjgtLjY3NC41LTEuNDMyLjY2My0yLjI1MmgtMi43NTd2Mi44MDh6bTAgLjY0OHYxLjM4MmMuNTI1LS4xNCAxLjA0NC0uNjIgMS41MDUtMS4zODJoLTEuNTA1em0tLjY0OCAwSDguMTdjLjQ2Mi43NjIuOTggMS4yNCAxLjUwNSAxLjM4MnYtMS4zODJ6TTYuOTIgMTQuNDdhMTMuOTUgMTMuOTUgMCAwIDAgLjY2MyAyLjI1MmwuMjQyLjU1NmgxLjg1MlYxNC40N0g2Ljkyek05LjY3NiAyLjcySDcuODI0bC0uMjQyLjU1NmMtLjI2OC42NzQtLjUgMS40MzItLjY2MyAyLjI1MmgyLjc1N1YyLjcyem0wLS42NDhWLjY5MmMtLjUyNS4xNC0xLjA0NC42Mi0xLjUwNSAxLjM4MmgxLjUwNXptLjY0OCAwaDEuNTA1Yy0uNDYyLS43NjItLjk4LTEuMjQtMS41MDUtMS4zODJ2MS4zODJ6TTEzLjA4IDUuNTNhMTMuOTUgMTMuOTUgMCAwIDAtLjY2My0yLjI1MmwtLjI0Mi0uNTU2aC0xLjg1MlY1LjUzaDIuNzU3ek05LjY3NiA5LjY3NnYtMy41aC0yLjg4YTIyLjI4IDIyLjI4IDAgMCAwLS4zMTMgMy40OTloMy4xOTR6bTAgNC4xNDd2LTMuNUg2LjQ4MmMuMDE2IDEuMjI0LjEyMyAyLjQwNy4zMTMgMy41aDIuODh6TTExLjgzNS45NzdhNS44OSA1Ljg5IDAgMCAxIC43NCAxLjA5N2gxLjEyM2MtLjU3LS40OC0xLjE5Ny0uODUzLTEuODYzLTEuMDk3ek02LjMwMiAyLjA3M2gxLjEyM2MuMjMtLjQzLjQ3OC0uNzk3Ljc0LTEuMDk3LS42NjYuMjQ0LTEuMjkyLjYxNi0xLjg2MyAxLjA5N3ptLjY3OC45NjVsLjEzMi0uMzE3SDUuNjI1Yy0uNzEyLjc3LTEuMzEgMS43MjQtMS43NSAyLjgwOGgyLjM4NGExNC43NyAxNC43NyAwIDAgMSAuNzIyLTIuNDkxek01LjgzNCA5LjY3NmMuMDE2LTEuMjIuMTItMi40LjMwNC0zLjVIMy42MzRhMTEuOTggMTEuOTggMCAwIDAtLjYwNSAzLjQ5OWgyLjgwNXptMCAuNjQ4SDMuMDI4YTExLjk4IDExLjk4IDAgMCAwIC42MDUgMy40OTloMi41MDRjLS4xODUtMS4wOTgtLjI4OC0yLjI4LS4zMDQtMy41em0xLjE0NyA2LjYzOGMtLjI5NS0uNzQzLS41MzgtMS41ODMtLjcyMi0yLjQ5SDMuODc0Yy40NDIgMS4wODMgMS4wNCAyLjAzNyAxLjc1IDIuODA4aDEuNDg4bC0uMTMyLS4zMTd6bTEuMTg1IDIuMDYyYy0uMjYyLS4zLS41LS42NjctLjc0LTEuMDk3SDYuMzAyYy41Ny40OCAxLjE5Ny44NTMgMS44NjMgMS4wOTd6bTUuNTMzLTEuMDk3aC0xLjEyM2MtLjIzLjQzLS40NzguNzk2LS43NCAxLjA5Ny42NjYtLjI0NCAxLjI5Mi0uNjE2IDEuODYzLTEuMDk3em0uOTU2LTE1Ljg1M2guMzE1bC0uNzktLjQ0NS40NzYuNDQ1em0tOS42MjMgMGguMzE1bC40NzYtLjQ0NS0uNzkuNDQ1em0tLjkwNC42NDhhOS41MiA5LjUyIDAgMCAwLS43NC42NjYgOS4zOSA5LjM5IDAgMCAwLTEuNjA2IDIuMTQyaDEuMzkzYy4zNTctLjkzNi44MjgtMS44MDIgMS40MDUtMi41NjZsLjE5LS4yNDJoLS42NDJ6bS0uOTUyIDExLjc1SDEuNzgyYy40MjQuNzc3Ljk2MiAxLjUgMS42MDYgMi4xNDJhOS41MSA5LjUxIDAgMCAwIC43NC42NjZoLjY0MmwtLjE5LS4yNDJjLS41NzctLjc2NC0xLjA0OC0xLjYzLTEuNDA1LTIuNTY2em0yLjE3MiAzLjQ1Nkg1LjAzbC43OS40NDUtLjQ3Ni0uNDQ1em05LjYyMyAwaC0uMzE1bC0uNDc2LjQ0NS43OS0uNDQ1eiIvPjxwYXRoIGQ9Ik0yMi45NSAzLjYwN0gxMi40NlYxNi43MkgyMi45NVYzLjYwN3ptLS42NTYuNjU2aC05LjE4djExLjgwM2g5LjE4VjQuMjYyeiIvPjwvZz48cGF0aCBkPSJNMTQuNDI2IDYuMjNoNi41NTd2LjY1NmgtNi41NTdWNi4yM3ptLjY1NiAyLjYyMmg1LjI0NnYuNjU2aC01LjI0NnYtLjY1NnoiIGZpbGw9IiM3MDcwNzAiLz48L3N2Zz4='; + break; + case (type === 'blocks'): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI4cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5NYXJrZG93biBpY29uPC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz48L2RlZnM+DQogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJuZXctYnVpbGRlci0tLXdpdGgtc2VsZWN0LWZpZWxkLWNob2ljZXMtYWRkZWQtY29weS01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjQuMDAwMDAwLCAtNDgxLjAwMDAwMCkiIGZpbGwtcnVsZT0ibm9uemVybyI+DQogICAgICAgICAgICA8ZyBpZD0iRGF0YS10eXBlcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUuMDAwMDAwLCAxOTUuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9Ik1vZHVsYXItQmxvY2stRmllbGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAyNDAuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJNYXJrZG93bi1pY29uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0OS4wMDAwMDAsIDQ2LjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS00IiBzdHJva2U9IiM1QTVBNUEiIHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMjciIGhlaWdodD0iMTkiIHJ4PSIxIj48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTQtQ29weSIgc3Ryb2tlPSIjNUE1QTVBIiB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjI3IiBoZWlnaHQ9IjE5IiByeD0iMSI+PC9yZWN0Pg0KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMDAwMDAwLCA0LjAwMDAwMCkiIGZpbGw9IiM1QTVBNUEiPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTIiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTEzIiB4PSI0IiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSI4Ij48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0xNCIgeD0iNCIgeT0iNyIgd2lkdGg9IjgiIGhlaWdodD0iMSI+PC9yZWN0Pg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTUiIHg9IjExIiB5PSI3IiB3aWR0aD0iMSIgaGVpZ2h0PSI1Ij48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0xMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMTIiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMDAwMDAwLCAxMS41MDAwMDApIHJvdGF0ZSgtMjcwLjAwMDAwMCkgdHJhbnNsYXRlKC02LjAwMDAwMCwgLTExLjUwMDAwMCkgIiB4PSI1LjUiIHk9IjUuNSIgd2lkdGg9IjEiIGhlaWdodD0iMTIiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0zLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE3LjAwMDAwMCwgMTAuMDAwMDAwKSBzY2FsZSgxLCAtMSkgcm90YXRlKC05MC4wMDAwMDApIHRyYW5zbGF0ZSgtMTcuMDAwMDAwLCAtMTAuMDAwMDAwKSB0cmFuc2xhdGUoMTEuMDAwMDAwLCA0LjAwMDAwMCkiIGZpbGw9IiM1QTVBNUEiPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTIiIHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTEzIiB4PSI0IiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSI4Ij48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0xNCIgeD0iNCIgeT0iNyIgd2lkdGg9IjgiIGhlaWdodD0iMSI+PC9yZWN0Pg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTUiIHg9IjExIiB5PSI3IiB3aWR0aD0iMSIgaGVpZ2h0PSI1Ij48L3JlY3Q+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0xMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMTIiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMDAwMDAwLCAxMS41MDAwMDApIHJvdGF0ZSgtMjcwLjAwMDAwMCkgdHJhbnNsYXRlKC02LjAwMDAwMCwgLTExLjUwMDAwMCkgIiB4PSI1LjUiIHk9IjUuNSIgd2lkdGg9IjEiIGhlaWdodD0iMTIiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg=='; + break; + case (metaData.extension === true): + iconUrl = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI4cHgiIGhlaWdodD0iMTlweCIgdmlld0JveD0iMCAwIDI4IDE5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTIuNCAoNjczNzgpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT4yOHgxOCBleHRlbnNpb248L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8cGF0aCBkPSJNOC41MjE3MzkxMyw3LjMwNDM0NzgzIEw4LjUyMTczOTEzLDYuNjk1NjUyMTcgQzguNTIxNzM5MTMsMi45OTc3NDU1OSAxMS41MTk0ODQ3LDYuNzkyOTQ0MmUtMTYgMTUuMjE3MzkxMywwIEwyMC45MTMwNDM1LDAgQzIxLjQ2NTMyODIsLTEuMDE0NTMwNjNlLTE2IDIxLjkxMzA0MzUsMC40NDc3MTUyNSAyMS45MTMwNDM1LDEgTDIxLjkxMzA0MzUsMy42NTIxNzM5MSBMMjYuNzgyNjA4NywzLjY1MjE3MzkxIEMyNy40NTQ5NTUzLDMuNjUyMTczOTEgMjgsNC4xOTcyMTg1NyAyOCw0Ljg2OTU2NTIyIEMyOCw1LjU0MTkxMTg3IDI3LjQ1NDk1NTMsNi4wODY5NTY1MiAyNi43ODI2MDg3LDYuMDg2OTU2NTIgTDIxLjkxMzA0MzUsNi4wODY5NTY1MiBMMjEuOTEzMDQzNSwxMi4xNzM5MTMgTDI2Ljc4MjYwODcsMTIuMTczOTEzIEMyNy40NTQ5NTUzLDEyLjE3MzkxMyAyOCwxMi43MTg5NTc3IDI4LDEzLjM5MTMwNDMgQzI4LDE0LjA2MzY1MSAyNy40NTQ5NTUzLDE0LjYwODY5NTcgMjYuNzgyNjA4NywxNC42MDg2OTU3IEwyMS45MTMwNDM1LDE0LjYwODY5NTcgTDIxLjkxMzA0MzUsMTcuMjYwODY5NiBDMjEuOTEzMDQzNSwxNy44MTMxNTQzIDIxLjQ2NTMyODIsMTguMjYwODY5NiAyMC45MTMwNDM1LDE4LjI2MDg2OTYgTDE1LjIxNzM5MTMsMTguMjYwODY5NiBDMTEuNTE5NDg0NywxOC4yNjA4Njk2IDguNTIxNzM5MTMsMTUuMjYzMTI0IDguNTIxNzM5MTMsMTEuNTY1MjE3NCBMOC41MjE3MzkxMywxMC45NTY1MjE3IEwxLjgyNjA4Njk2LDEwLjk1NjUyMTcgQzAuODE3NTY2OTc5LDEwLjk1NjUyMTcgMS4yMzUwODA3NmUtMTYsMTAuMTM4OTU0OCAwLDkuMTMwNDM0NzggQy0xLjIzNTA4MDc2ZS0xNiw4LjEyMTkxNDggMC44MTc1NjY5NzksNy4zMDQzNDc4MyAxLjgyNjA4Njk2LDcuMzA0MzQ3ODMgTDguNTIxNzM5MTMsNy4zMDQzNDc4MyBaIE05Ljg2MDg2OTU3LDguNTIxNzM5MTMgTDEuODI2MDg2OTYsOC41MjE3MzkxMyBDMS40ODk5MTM2Myw4LjUyMTczOTEzIDEuMjE3MzkxMyw4Ljc5NDI2MTQ2IDEuMjE3MzkxMyw5LjEzMDQzNDc4IEMxLjIxNzM5MTMsOS40NjY2MDgxMSAxLjQ4OTkxMzYzLDkuNzM5MTMwNDMgMS44MjYwODY5Niw5LjczOTEzMDQzIEw5Ljg2MDg2OTU3LDkuNzM5MTMwNDMgTDkuODYwODY5NTcsMTEuNDgxMTA2NiBDOS44NjA4Njk1NywxNC40MTI1MzggMTIuMjM3MjY0MiwxNi43ODg5MzI3IDE1LjE2ODY5NTYsMTYuNzg4OTMyNyBMMTkuOTc2NTIxNywxNi43ODg5MzI3IEMyMC4yNTI2NjQsMTYuNzg4OTMyNyAyMC40NzY1MjE3LDE2LjU2NTA3NTEgMjAuNDc2NTIxNywxNi4yODg5MzI3IEwyMC40NzY1MjE3LDEuOTYwODY5NTcgQzIwLjQ3NjUyMTcsMS42ODQ3MjcxOSAyMC4yNTI2NjQsMS40NjA4Njk1NyAxOS45NzY1MjE3LDEuNDYwODY5NTcgTDE1LjE2ODY5NTYsMS40NjA4Njk1NyBDMTIuMjM3MjY0MiwxLjQ2MDg2OTU3IDkuODYwODY5NTcsMy44MzcyNjQyMyA5Ljg2MDg2OTU3LDYuNzY4Njk1NjEgTDkuODYwODY5NTcsOC41MjE3MzkxMyBaIiBpZD0iMjh4MTgtZXh0ZW5zaW9uIiBmaWxsPSIjNjM3NDgwIj48L3BhdGg+DQogICAgPC9nPg0KPC9zdmc+'; + break; + } + } + return iconUrl; + }); + + // Helper that returns the url which redirects to the particular content type builder + Handlebars.registerHelper('contentTypeBuilderUrl', function (uid) { + let url; + if (uid) { + url = `https://${appHost}/#!/stack/${apiKey}/content-type/${uid}/content-type-builder`; + } + return url; + }); + + // Retrieves all the content types from the stack + extensionField.stack.getContentTypes('', { include_count: true, include_global_field_schema: true }) + .then(res => { + res.content_types.forEach((contentType) => { + labels[contentType.uid] = contentType.options.singleton; + json[contentType.uid] = contentType; + readSchema(contentType.schema, contentType.uid); + }); + + // Using handlebars to pass content type data to render in HTML template + Handlebars.registerPartial('list', $('#partial').html()); + $('#diagram-placeholder').html(diagramTemplate({ diagramData: res.content_types })); + + $('.content-type-count span').text(res.count); + + // Sidebar toggle + const sidebar = document.querySelector('.sidebar'); + const mainContainer = document.querySelector('.container'); + const button = document.querySelector('.toggle'); + + var defaultId = Object.keys(json)[0]; + updateSidebarDetails(defaultId); + + document.querySelector('.toggle').onclick = function (e) { + e.preventDefault(); + var defaultJsonId = Object.keys(json)[0]; + updateSidebarDetails(defaultJsonId); + sidebar.classList.toggle('toggle-sidebar'); + mainContainer.classList.toggle('toggle-container'); + button.classList.toggle('toggle-button'); + }; + + // Event listener for jsonview tab + $('.icon-eye-open').on('click', function () { + var id = $(this).data('id'); + updateSidebarDetails(id); + sidebar.classList.remove('toggle-sidebar'); + mainContainer.classList.remove('toggle-container'); + button.classList.remove('toggle-button'); + }); + + // Copy button text change + let clipboard = new ClipboardJS('.btn'); + + $('.copy-btn').on('click', function () { + let copyBtn = $(this); + clipboard.on('success', function (e) { + copyBtn.text('Copied'); + setTimeout(function () { + copyBtn.text('Copy'); + }, 1000); + e.clearSelection(); + }); + }); + + // Building diagram using jsplumb + jsPlumb.ready(function () { + let $container = $('.container'); + let $panzoom = null; + let sourceAnchors = [ + [0.2, 0, 0, -1, 0, 0], + [1, 0.2, 1, 0, 0, 0], + [0.8, 1, 0, 1, 0, 0], + [0, 0.8, -1, 0, 0, 0] + ], + targetAnchors = [ + [0.6, 0, 0, -1], + [1, 0.6, 1, 0], + [0.4, 1, 0, 1], + [0, 0.4, -1, 0] + ], + connector = ['Flowchart', + { + cornerRadius: 5, + stub: 16 + } + ], + connectorStyle = { + gradient: { + stops: [ + [0, '#00f'], + [0.5, '#09098e'], + [1, '#00f'] + ] + }, + strokeWidth: 3, + stroke: '#00f', + outlineStroke: 'white', + outlineWidth: 4 + }, + endpoint = ['Dot', { cssClass: 'endpointClass', radius: 10, hoverClass: 'endpointHoverClass' }], + anEndpoint = { + endpoint: endpoint, + paintStyle: { fill: '#00f' }, + isSource: true, + isTarget: true, + maxConnections: -1, + connector: connector, + connectorStyle: connectorStyle + }; + + let plumb = jsPlumb.getInstance({ + DragOptions: { cursor: 'pointer', zIndex: 2000 }, + Anchors: [['Left', 'Right', 'Bottom'], ['Top', 'Bottom']], + Container: $container.find('.diagram') + }); + + plumb.batch(function () { + let endpoints = {}, + divsWithWindowClass = jsPlumb.getSelector('.container .window'); + + // Adding endpoints for each content type element + for (let i = 0; i < divsWithWindowClass.length; i++) { + let id = plumb.getId(divsWithWindowClass[i]); + endpoints[id] = [ + plumb.addEndpoint(id, anEndpoint, { anchor: sourceAnchors }), + plumb.addEndpoint(id, anEndpoint, { anchor: targetAnchors }) + ]; + } + + // Adding connections between the content type elements + for (let e in endpoints) { + if (referenceConnections[e]) { + for (let j = 0; j < referenceConnections[e].length; j++) { + plumb.connect({ + source: endpoints[e][0], + target: endpoints[referenceConnections[e][j]][1], + overlays: [ + ['Label', { label: connectorLabel((endpoints[e][0]).elementId, (endpoints[referenceConnections[e][j]][1]).elementId), cssClass: 'aLabel', location: 0.5 }] + ] + }); + } + } + } + + plumb.draggable(divsWithWindowClass); + + // Positioning and laying out all the content type elements on the canvas + let dg = new dagre.graphlib.Graph(); + dg.setGraph({ + nodesep: 30, ranksep: 30, marginx: 50, marginy: 50 + }); + dg.setDefaultEdgeLabel(function () { return {}; }); + $container.find('.window').each( + function (idx, node) { + let $n = $(node); + let box = { + width: Math.round($n.outerWidth()), + height: Math.round($n.outerHeight()) + }; + dg.setNode($n.attr('id'), box); + } + ); + plumb.getAllConnections() + .forEach(function (edge) { dg.setEdge(edge.source.id, edge.target.id); }); + dagre.layout(dg); + dg.nodes().forEach( + function (n) { + let node = dg.node(n); + let top = Math.round(node.y - node.height / 2) + 100 + 'px'; + let left = Math.round(node.x - node.width / 2) - 400 + 'px'; + $('#' + n).css({ left: left, top: top }); + } + ); + plumb.repaintEverything(); + + // Zooming and paning the diagram + _.defer(function () { + $panzoom = $container.find('.panzoom').panzoom({ + $zoomIn: $('.zoom-in'), + $zoomOut: $('.zoom-out'), + minScale: 0.2, + maxScale: 1, + increment: 0.1, + cursor: '', + startTransform: 'scale(0.5)', + ignoreChildrensEvents: true + }).on('panzoomstart', function () { + $panzoom.css('cursor', 'move'); + }) + .on('panzoomend', function () { + $panzoom.css('cursor', ''); + }); + + $panzoom.parent() + .on('mousewheel.focal', function (e) { + if (e.ctrlKey || e.originalEvent.ctrlKey) { + e.preventDefault(); + let delta = e.delta || e.originalEvent.wheelDelta; + let zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0; + $panzoom.panzoom('zoom', zoomOut, { + animate: true, + exponential: false + }); + } else { + e.preventDefault(); + let deltaY = e.deltaY || e.originalEvent.wheelDeltaY || (-e.originalEvent.deltaY); + let deltaX = e.deltaX || e.originalEvent.wheelDeltaX || (-e.originalEvent.deltaX); + $panzoom.panzoom('pan', deltaX / 2, deltaY / 2, { + animate: true, + relative: true + }); + } + }) + .on('mousedown touchstart', function (ev) { + let matrix = $container.find('.panzoom').panzoom('getMatrix'); + let offsetX = matrix[4]; + let offsetY = matrix[5]; + let dragstart = { + x: ev.pageX, y: ev.pageY, dx: offsetX, dy: offsetY + }; + $(ev.target).css('cursor', 'move'); + $(this).data('dragstart', dragstart); + }) + .on('mousemove touchmove', function (ev) { + let dragstart = $(this).data('dragstart'); + if (dragstart) { + let deltaX = dragstart.x - ev.pageX; + let deltaY = dragstart.y - ev.pageY; + let matrix = $container.find('.panzoom').panzoom('getMatrix'); + matrix[4] = parseInt(dragstart.dx) - deltaX; + matrix[5] = parseInt(dragstart.dy) - deltaY; + $container.find('.panzoom').panzoom('setMatrix', matrix); + } + }) + .on('mouseup touchend touchcancel', function (ev) { + $(this).data('dragstart', null); + $(ev.target).css('cursor', ''); + }); + }); + + // Dragging all the content type elements + let currentScale = 1; + $container.find('.diagram .window').draggable({ + /* eslint-disable no-unused-vars */ + start: function (e) { + let pz = $container.find('.panzoom'); + currentScale = pz.panzoom('getMatrix')[0]; + $(this).css('cursor', 'move'); + pz.panzoom('disable'); + }, + drag: function (e, ui) { + ui.position.left /= currentScale; + ui.position.top /= currentScale; + if ($(this).hasClass('jsplumb-connected')) { + plumb.repaint($(this).attr('id'), ui.position); + } + }, + stop: function (e, ui) { + let nodeId = $(this).attr('id'); + if ($(this).hasClass('jsplumb-connected')) { + plumb.repaint(nodeId, ui.position); + } + $(this).css('cursor', ''); + $container.find('.panzoom').panzoom('enable'); + } + }); + }); + }); + + loader.hide(); + $('.sidebar').show(); + $('.parent-container').css('opacity', '1'); + }); +} + +function refresh() { + loader.show(); + count = {}; + $('.parent-container').css('opacity', '0.5'); + init(); +} + +$(document).ready(() => { + ContentstackUIExtension.init().then(extension => { + extensionField = extension; + Object.assign(extensionField.config, extensionField.fieldConfig); + apiKey = extensionField.stack._data.api_key; + appHost = extensionField.config.appHost; + + extensionField.stack.getEnvironments().then(res => { + res.environments.forEach(environment => { + env.push({ + env: environment.name + }); + }); + envArray = removeDuplicates(env, 'env'); + $.each(envArray, function (i, item) { + $('#environments').append($('