@vgip/meta-ui 2.1.2 → 2.1.3

package/src/lib/common/metaNormalizer.ts

@@ -0,0 +1,366 @@
+/*
+ * @Author: Alexander.Vangelov@vonage.com
+ * @Date: 2019-09-19 17:34:49
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2023-02-10 09:44:59
+ */
+
+import { fieldNormalizer } from './fieldNormalizer';
+import { uniqueNameFilter } from './fieldNormalizer/uniqueNameFilter';
+
+const sortObj = (obj) => {
+  if (typeof(obj) !== 'object' || obj === null) {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((e) => sortObj(e)).sort();
+  }
+
+  return Object.keys(obj).sort().reduce((sorted, k) => {
+    sorted[k] = sortObj(obj[k]);
+    return sorted;
+  }, {});
+};
+
+export const metaNormalizer = (meta, integration, resourceType) => {
+  const uniqFieldNames = [];
+  const integrationCode = (integration || '').toUpperCase();
+  const metaV3: any = {
+    integration,
+    resourceType,
+    availableLayouts: meta.availableLayouts,
+    layout: {
+      id: meta.layout.id,
+      name: meta.layout.name,
+      label: meta.layout.label,
+      version: '3.0.0',
+      sections: (meta.layout.sections || []).map((s) => {
+        const section: any = {
+          label: s.label,
+          fields: uniqueNameFilter(s.fields || [], uniqFieldNames).map((v) => fieldNormalizer(v, uniqFieldNames)) // VIST-424
+        };
+        if (s.visible || s.alwaysVisible) {
+          section.visible = s.visible || s.alwaysVisible;
+        }
+        return section;
+      })
+    }
+  };
+  if (meta.layout.origLayoutId) {
+    metaV3.layout.origLayoutId = meta.layout.origLayoutId;
+  }
+  if (meta.drafts) {
+    metaV3.drafts = meta.drafts;
+  }
+  if (meta.layout.children) {
+    metaV3.layout.children = meta.layout.children;
+  }
+
+  const fieldFixesByIntegration = (f) => {
+    if (f.type === 'boolean' && ((typeof(f.default) !== 'boolean') && f.default && !f.default.value) ) {
+      delete f.default;
+    } else if (f.type === 'reference') {
+      const references = (f.reference instanceof Array) ? f.reference : [f.reference];
+      for (const r of references) {
+        if (r && r.creatable === false && typeof(r.updatable) === 'undefined') {
+          r.updatable = false; // User missing updatable, may be other too
+        }
+      }
+    }
+    switch (integrationCode) {
+      case 'BULLHORN': {
+        if (resourceType === 'Appointment') {
+          if (['dateBegin', 'dateEnd'].indexOf(f.name) !== -1) {
+            if (!f.validations) {
+              f.validations = { step: 1800 };
+            } else {
+              f.validations.step = 1800;
+            }
+            f.default = f.name === 'dateBegin' ? 'now' : '30.minutes';
+            if (!f.auto) {
+              f.auto = {};
+            }
+            f.auto[f.name === 'dateBegin' ? 'lt' : 'gt'] = {
+              against: f.name === 'dateBegin' ? 'dateEnd' : 'dateBegin',
+              offset: `${f.name === 'dateBegin' ? '-30' : '30'}.minutes`
+            };
+          }
+        }
+        if (f.name === 'comments') {
+          if (!f.validations) {
+            f.valudations = { required: true };
+          } else {
+            f.validations.required = true;
+          }
+          if (resourceType === 'Note') {
+            f.type = 'richtext';
+          }
+        }
+        if (f.name === 'address.state') {
+          f.creatable = false;
+          f.updatable = false;
+        }
+        break;
+      }
+      case 'GOOGLE': {
+        if (f.name === 'contactId') {
+          f.label = 'Contact';
+        } else if (['start', 'end'].indexOf(f.name) !== -1) {
+          if (!f.auto) {
+            f.auto = {};
+          }
+          f.auto[f.name === 'start' ? 'lt' : 'gt'] = {
+            against: f.name === 'start' ? 'end' : 'start',
+            offset: `${f.name === 'start' ? '-30' : '30'}.minutes`
+          };
+        }
+        break;
+      }
+      case 'OFFICE365': {
+        if (resourceType === 'Events') {
+          if (['start', 'end'].indexOf(f.name) !== -1) {
+            if (!f.validations) {
+              f.validations = { step: 1800 };
+            } else {
+              f.validations.step = 1800;
+            }
+            f.default = f.name === 'start' ? 'now' : '30.minutes';
+          }
+        }
+        if (resourceType === 'Tasks' && f.name === 'checklist') {
+          f.creatable = false;
+        }
+        if (f.name === 'description' && resourceType !== 'Tasks') {
+          f.type = 'richtext';
+        } else if (f.name === 'content') {
+          f.type = 'text';
+        }
+        break;
+      }
+      case 'SALESFORCE': {
+        if (resourceType === 'Task' && f.name === 'WhatId') {
+          f.disabled = {
+            'WhoId.type': 'Lead'
+          };
+        }
+        if (['Description', 'ParentId'].indexOf(f.name) !== -1) {
+          if (!f.visible) {
+            f.visible = true;
+          }
+        }
+        if (f.type === 'reference') {
+          const references = (f.reference instanceof Array) ? f.reference : [f.reference];
+          for (const r of references) {
+            if (r && ['Account'].indexOf(r.name) !== -1) { // force creatable
+              r.creatable = true;
+              r.updatable = true;
+            }
+          }
+        }
+        break;
+      }
+      case 'SUGAR': {
+        if (['description', 'parent_id', 'contact_id', 'contacts'].indexOf(f.name) !== -1) {
+          if (!f.visible) {
+            f.visible = true;
+          }
+        }
+        if (f.type === 'reference') {
+          const references = (f.reference instanceof Array) ? f.reference : [f.reference];
+          for (const r of references) {
+            if (r && ['Accounts', 'Contacts', 'Leads'].indexOf(r.name) !== -1) {
+              r.label = r.name.slice(0, -1); // Use singular labels
+              r.creatable = true;
+              r.updatable = true;
+            }
+          }
+        }
+        break;
+      }
+      case 'ZENDESK': {
+        if (resourceType === 'Ticket' && f.name === 'assignee') {
+          f.reference.updatable = false;
+        }
+        if (resourceType === 'Comment' && f.name === 'body') {
+          f.visible = true;
+        }
+        break;
+      }
+      case 'HUBSPOT': {
+        if (
+          (resourceType === 'LogCall' && ['body', 'hs_call_body'].indexOf(f.name) !== -1) ||
+          (resourceType === 'LogSMS' && f.name === 'hs_communication_body')
+        ) {
+          f.type = 'richtext';
+        }
+        break;
+      }
+      case 'NETSUITE': {
+        if (f.name === 'company' && !f.auto) {
+          f.auto = {
+            search: {
+              params: {
+                contactId: 'contact.id'
+              },
+              url: '../Contact/${contactId}?expand=company',
+              extract: 'company'
+            }
+          };
+        }
+        break;
+      }
+      case 'ZOHO': {
+        if (['Calls', 'Tasks', 'Events'].indexOf(resourceType) !== -1 && ['Who_Id', 'What_Id'].indexOf(f.name) !== -1) {
+          if (f.name === 'What_Id') {
+            f.visible = true;
+            f.disabled = {
+              'Who_Id.type': 'Leads'
+            };
+          }
+          if (f.reference instanceof Array) {
+            f.reference.forEach((r) => {
+              r.creatable = true;
+              r.updatable = true;
+            });
+          }
+        }
+        if (resourceType === 'Calls' && f.name === 'Description') {
+          f.label = 'Description'
+          f.visible = true;
+          f.hidden = {
+            "Call_Type": "Missed"
+          }
+        }
+        break;
+      }
+    }
+    if (f.type === 'composite' && f.fields) {
+      for (const ff of f.fields) {
+        fieldFixesByIntegration(ff);
+      }
+    }
+  };
+
+  // common fixes for all integrations
+  if (metaV3.layout.sections.length) {
+    for (const s of (metaV3.layout.sections)) {
+      if (!s || !s.fields) {
+        break;
+      }
+      for (const f of s.fields) {
+        fieldFixesByIntegration(f);
+      }
+    }
+  }
+
+  // Google Gmail children enhancement
+  if (integrationCode === 'GOOGLE') {
+    if (resourceType === 'Mail') {
+      metaV3.layout.editable = false;
+      if (!metaV3.layout.children) {
+        metaV3.layout.children = [{ // should be included in v3 api
+          label: 'Comments',
+          name: 'comments',
+          reference: {
+            resourceType: 'Comment',
+            label: 'Comment',
+            editable: false
+          }
+        }];
+      }
+    } else if (resourceType === 'Task') {
+      if (!metaV3.layout.children) {
+        metaV3.layout.children = [{
+          label: 'Subtasks',
+          name: 'subTasks',
+          reference: {
+            resourceType: 'Subtask',
+            label: 'Subtask'
+          }
+        }];
+      }
+    } else if (resourceType === 'Comment') {
+      metaV3.layout.editable = false;
+    }
+  } else if (integrationCode === 'ZENDESK') {
+    if (resourceType === 'Ticket') {
+      if (!metaV3.layout.children) {
+        metaV3.layout.children = [{ // Zendesk Ticket children enhancement
+          label: 'Comments',
+          name: 'comments',
+          reference: {
+            resourceType: 'Comment',
+            label: 'Comment',
+            editable: false
+          }
+        }];
+      }
+    } else if (resourceType === 'Comment') {
+      metaV3.layout.editable = false;
+    }
+  } else if (integrationCode === 'MSDYNAMICS' && !metaV3.fieldsMap) {
+    if (resourceType === 'phonecall') {
+      metaV3.fieldsMap = {
+        contactables: ['from', 'to'],
+        subject: 'subject',
+        phoneNumber: 'phonenumber',
+      };
+    } else if (resourceType === 'contact') {
+      metaV3.fieldsMap = {
+        phoneNumber: 'telephone1',
+        firstName: 'firstname',
+        lastName: 'lastname'
+      };
+    } else if (resourceType === 'account') {
+      metaV3.fieldsMap = {
+        phoneNumber: 'telephone1',
+        displayName: 'name'
+      };
+    }
+  } else if (integrationCode === 'OFFICE365') {
+    if (resourceType === 'Conversations') {
+      metaV3.layout.editable = false;
+      metaV3.layout.children = [{ // children enhancement
+        label: 'Comments',
+        name: 'comments',
+        reference: {
+          resourceType: 'Comment',
+          label: 'Comment',
+          editable: false
+        }
+      }];
+    } else if (resourceType === 'Comment') {
+      metaV3.layout.editable = false;
+    }
+  } else if (integrationCode === 'JOBDIVA') {
+    if (resourceType === 'CandidateNote' || resourceType === 'ContactNote') {
+      metaV3.layout.editable = false;
+    }
+  } else if (integrationCode === 'CLIO' && resourceType === 'Contact') {
+    metaV3.layout.sections[0].fields.push({
+      name: 'custom_field_values',
+      type: 'hidden'
+    });
+  } else if (integrationCode === 'CONNECTWISE' && ['companies', 'contacts'].indexOf(resourceType) !== -1) {
+    metaV3.layout.sections[0].fields.push({
+      name: 'billToCompany',
+      type: 'hidden'
+    });
+    metaV3.layout.sections[0].fields.push({
+      name: 'identifier',
+      type: 'hidden'
+    });
+    metaV3.layout.sections[0].fields.push({
+      name: 'status',
+      type: 'hidden'
+    });
+  }
+  else if (integrationCode === 'ZOHO' && resourceType === 'Tasks') {
+    metaV3.layout.sections[0].fields.push({
+      name: 'module',
+      type: 'hidden'
+    });
+  }
+  return sortObj(metaV3);
+};

package/src/lib/common/metaStripHtml.pipe.ts

@@ -0,0 +1,18 @@
+/*
+* @Author: Alexander.Vangelov@vonage.com
+* @Date: 2020-04-14 12:15:36
+ * @Last Modified by: Alexander.Vangelov@vonage.com
+ * @Last Modified time: 2020-04-14 12:21:57
+*/
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'metaStripHtml',
+    standalone: false
+})
+export class MetaStripHtmlPipe implements PipeTransform {
+  transform(value: string): any {
+    return value.replace(/<[^>]*>/g, '');
+  }
+}

package/src/lib/common/utils/colorThemes.ts

@@ -0,0 +1,86 @@
+export interface MetaTheme {
+  name: string;
+  properties: { [key: string]: string };
+}
+
+export const metaLight: MetaTheme = {
+  name: 'light',
+  properties: {
+    '--vgip-meta-resource-bg-color': '#f3f3f5',
+    '--vgip-meta-resource-color': '#131415',
+    '--vgip-meta-resource-bar-color': '#ffffff',
+    '--vgip-meta-separator-color': '#e1e2e6',
+    '--vgip-meta-scrollbar-color': '#131415',
+    '--vgip-meta-overlay-background': 'rgba(19, 20, 21, 0.5)',
+
+    '--vgip-meta-link-color': '#871fff',
+    '--vgip-meta-link-hover-color': '#441080',
+
+    '--vgip-meta-input-color': '#131415',
+    '--vgip-meta-input-bg-color': '#ffffff',
+    '--vgip-meta-input-label-color': '#616266',
+    '--vgip-meta-input-border-color': '#c2c4cc',
+    '--vgip-meta-input-active-border-color': '#2c2d30',
+    '--vgip-meta-input-action-hover-bg-color': '#e1e2e6',
+    '--vgip-meta-input-accent-bg-color': '#e1e2e6',
+    '--vgip-meta-input-accent-color': '#131415',
+    '--vgip-meta-input-placeholder-color': '#c2c4cc',
+    '--vgip-meta-input-disabled-bg-color': '#f3f3f5',
+    '--vgip-meta-input-disabled-border-color': '#e1e2e6',
+    '--vgip-meta-input-hint-color': '#616266',
+    // eslint-disable-next-line max-len
+    '--vgip-meta-dropdown-icon': 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIHN0eWxlPSJmaWxsOiMxMzE0MTU7IiBkPSJNNyw3LjhDNi43LDcuNSw2LjIsNy42LDUuOSw3LjlTNS43LDguNyw2LDlsNCwzLjRsNC0zLjRjMC4zLTAuMywwLjMtMC44LDAtMS4xDQoJYy0wLjMtMC4zLTAuNy0wLjMtMS0wLjFsLTMsMi42TDcsNy44TDcsNy44eiIvPg0KPC9zdmc+)',
+    '--vgip-meta-suggestions-bg-color': '#f3e9ff',
+    // eslint-disable-next-line max-len
+    '--vgip-meta-dropdown-check-icon': 'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMTMxNDE1IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0yLjkwNCAxMi4xMUwxLjUgMTMuNTIgNy45NTggMjAgMjIuNSA1LjQwOSAyMS4wOTYgNCA3Ljk1OCAxNy4xODJ6Ii8+PC9zdmc+)',
+    '--vgip-meta-dropdown-bg-color': '#ffffff',
+    '--vgip-meta-dropdown-shadow': 'inset 0 0 0 1px #e1e2e6, 0 2px 5px rgba(19, 20, 21, 0.15)',
+    '--vgip-meta-submit-hover-bg-color': '#43474b',
+    '--vgip-meta-button-border-color': '#131415',
+    // eslint-disable-next-line max-len
+    '--vgip-meta-date-icon': 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDE2IDE2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNiAxNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjMTMxNDE1IiBkPSJNMTQuNSwySDEyVjAuNUMxMiwwLjIsMTEuOCwwLDExLjUsMFMxMSwwLjIsMTEsMC41VjJINVYwLjVDNSwwLjIsNC44LDAsNC41LDBTNCwwLjIsNCwwLjVWMkgxLjUKCUMwLjcsMiwwLDIuNywwLDMuNXYydjlDMCwxNS4zLDAuNywxNiwxLjUsMTZoMTNjMC44LDAsMS41LTAuNywxLjUtMS41di05di0yQzE2LDIuNywxNS4zLDIsMTQuNSwyeiBNMTUsMTQuNWMwLDAuMy0wLjIsMC41LTAuNSwwLjUKCWgtMTNDMS4yLDE1LDEsMTQuOCwxLDE0LjVWNmgxNFYxNC41eiBNMTUsNUgxVjMuNUMxLDMuMiwxLjIsMywxLjUsM2gzaDdoM0MxNC44LDMsMTUsMy4yLDE1LDMuNVY1eiIvPgo8L3N2Zz4K)',
+    // eslint-disable-next-line max-len
+    '--vgip-meta-time-icon': 'url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbD0iIzEzMTQxNSIgZD0iTTEuNiAxMkMxLjYgNi4yNTYyNCA2LjI1NjI0IDEuNiAxMiAxLjZDMTcuNzQzOCAxLjYgMjIuNCA2LjI1NjI0IDIyLjQgMTJDMjIuNCAxNy43NDM4IDE3Ljc0MzggMjIuNCAxMiAyMi40QzYuMjU2MjQgMjIuNCAxLjYgMTcuNzQzOCAxLjYgMTJaTTEyIDBDNS4zNzI1OCAwIDAgNS4zNzI1OCAwIDEyQzAgMTguNjI3NCA1LjM3MjU4IDI0IDEyIDI0QzE4LjYyNzQgMjQgMjQgMTguNjI3NCAyNCAxMkMyNCA1LjM3MjU4IDE4LjYyNzQgMCAxMiAwWk0xMi44IDUuNkMxMi44IDUuMTU4MTggMTIuNDQxOCA0LjggMTIgNC44QzExLjU1ODIgNC44IDExLjIgNS4xNTgxOCAxMS4yIDUuNlYxMkMxMS4yIDEyLjQ0MTggMTEuNTU4MiAxMi44IDEyIDEyLjhIMTguNEMxOC44NDE4IDEyLjggMTkuMiAxMi40NDE4IDE5LjIgMTJDMTkuMiAxMS41NTgyIDE4Ljg0MTggMTEuMiAxOC40IDExLjJIMTIuOFY1LjZaIi8+Cjwvc3ZnPgo=)'
+  }
+};
+
+export const metaDark: MetaTheme = {
+  name: 'dark',
+  properties: {
+    '--vgip-meta-resource-bg-color': '#131415',
+    '--vgip-meta-resource-color': '#ffffff',
+    '--vgip-meta-resource-bar-color': '#242426',
+    '--vgip-meta-separator-color': '#616266',
+    '--vgip-meta-scrollbar-color': '#636366',
+    '--vgip-meta-overlay-background': 'rgba(200,201,204,.32)',
+
+    '--vgip-meta-link-color': '#B779FF',
+    '--vgip-meta-link-hover-color': '#c798ff',
+
+    '--vgip-meta-input-color': '#ffffff',
+    '--vgip-meta-input-bg-color': '#242426',
+    '--vgip-meta-input-label-color': '#959596',
+    '--vgip-meta-input-border-color': '#616266',
+    '--vgip-meta-input-active-border-color': '#c2c4cc',
+    '--vgip-meta-input-action-hover-bg-color': '#313133',
+    '--vgip-meta-input-accent-bg-color': '#313133',
+    '--vgip-meta-input-accent-color': '#ffffff',
+    '--vgip-meta-input-placeholder-color': '#48484A',
+    '--vgip-meta-input-disabled-bg-color': '#131415',
+    '--vgip-meta-input-disabled-border-color': '#313133',
+    '--vgip-meta-input-hint-color': '#898a90',
+    // eslint-disable-next-line max-len
+    '--vgip-meta-dropdown-icon': 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIHN0eWxlPSJmaWxsOiNmZmZmZmY7IiBkPSJNNyw3LjhDNi43LDcuNSw2LjIsNy42LDUuOSw3LjlTNS43LDguNyw2LDlsNCwzLjRsNC0zLjRjMC4zLTAuMywwLjMtMC44LDAtMS4xDQoJYy0wLjMtMC4zLTAuNy0wLjMtMS0wLjFsLTMsMi42TDcsNy44TDcsNy44eiIvPg0KPC9zdmc+)',
+    '--vgip-meta-suggestions-bg-color': '#871fff',
+    // eslint-disable-next-line max-len
+    '--vgip-meta-dropdown-check-icon': 'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0yLjkwNCAxMi4xMUwxLjUgMTMuNTIgNy45NTggMjAgMjIuNSA1LjQwOSAyMS4wOTYgNCA3Ljk1OCAxNy4xODJ6Ii8+PC9zdmc+)',
+    '--vgip-meta-dropdown-bg-color': '#48484A',
+    '--vgip-meta-dropdown-shadow': 'none',
+    '--vgip-meta-submit-hover-bg-color': '#131415',
+    '--vgip-meta-button-border-color': '#616266',
+    // eslint-disable-next-line max-len
+    '--vgip-meta-date-icon': 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDE2IDE2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNiAxNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTQuNSwySDEyVjAuNUMxMiwwLjIsMTEuOCwwLDExLjUsMFMxMSwwLjIsMTEsMC41VjJINVYwLjVDNSwwLjIsNC44LDAsNC41LDBTNCwwLjIsNCwwLjVWMkgxLjUKCUMwLjcsMiwwLDIuNywwLDMuNXYydjlDMCwxNS4zLDAuNywxNiwxLjUsMTZoMTNjMC44LDAsMS41LTAuNywxLjUtMS41di05di0yQzE2LDIuNywxNS4zLDIsMTQuNSwyeiBNMTUsMTQuNWMwLDAuMy0wLjIsMC41LTAuNSwwLjUKCWgtMTNDMS4yLDE1LDEsMTQuOCwxLDE0LjVWNmgxNFYxNC41eiBNMTUsNUgxVjMuNUMxLDMuMiwxLjIsMywxLjUsM2gzaDdoM0MxNC44LDMsMTUsMy4yLDE1LDMuNVY1eiIvPgo8L3N2Zz4K)',
+    // eslint-disable-next-line max-len
+    '--vgip-meta-time-icon': 'url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEuNiAxMkMxLjYgNi4yNTYyNCA2LjI1NjI0IDEuNiAxMiAxLjZDMTcuNzQzOCAxLjYgMjIuNCA2LjI1NjI0IDIyLjQgMTJDMjIuNCAxNy43NDM4IDE3Ljc0MzggMjIuNCAxMiAyMi40QzYuMjU2MjQgMjIuNCAxLjYgMTcuNzQzOCAxLjYgMTJaTTEyIDBDNS4zNzI1OCAwIDAgNS4zNzI1OCAwIDEyQzAgMTguNjI3NCA1LjM3MjU4IDI0IDEyIDI0QzE4LjYyNzQgMjQgMjQgMTguNjI3NCAyNCAxMkMyNCA1LjM3MjU4IDE4LjYyNzQgMCAxMiAwWk0xMi44IDUuNkMxMi44IDUuMTU4MTggMTIuNDQxOCA0LjggMTIgNC44QzExLjU1ODIgNC44IDExLjIgNS4xNTgxOCAxMS4yIDUuNlYxMkMxMS4yIDEyLjQ0MTggMTEuNTU4MiAxMi44IDEyIDEyLjhIMTguNEMxOC44NDE4IDEyLjggMTkuMiAxMi40NDE4IDE5LjIgMTJDMTkuMiAxMS41NTgyIDE4Ljg0MTggMTEuMiAxOC40IDExLjJIMTIuOFY1LjZaIi8+Cjwvc3ZnPgo=)'
+  }
+};