@sankhyalabs/sankhyablocks 8.16.0-dev.114 → 8.16.0-dev.116

package/dist/cjs/{taskbar-elements-6f4e06af.js → taskbar-elements-3b74cd21.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const index = require('./index-f9e81701.js');
+const index = require('./index-1cf293c1.js');
 const index$2 = require('./index-e3e39724.js');
-const index$1 = require('./index-102ba62d.js');
+const index$1 = require('./index-0ad2baeb.js');
 
 exports.TaskbarElement = void 0;
 (function (TaskbarElement) {

package/dist/cjs/teste-pesquisa.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f9e81701.js');
+const index = require('./index-1cf293c1.js');
 const core = require('@sankhyalabs/core');
 
 const testePesquisaCss = ":host{display:block}";

package/dist/collection/collection-manifest.json

@@ -35,10 +35,14 @@
     "./components/snk-filter-bar/filter-modal/subcomponents/snk-default-filter/snk-default-filter.js",
     "./components/snk-filter-field-search/snk-filter-field-search.js",
     "./components/snk-form/snk-form.js",
-    "./components/snk-form-config/subcomponents/snk-tab-config/snk-tab-config.js",
     "./components/snk-form-config/snk-form-config.js",
-    "./components/snk-form-config/subcomponents/snk-config-options/snk-config-options.js",
-    "./components/snk-form-config/subcomponents/snk-field-config/snk-field-config.js",
+    "./components/snk-form-config/config-header/config-header.js",
+    "./components/snk-form-config/config-header/configs-button/configs-button.js",
+    "./components/snk-form-config/field-item/field-item.js",
+    "./components/snk-form-config/field-item/field-config/field-config.js",
+    "./components/snk-form-config/fields-layout/fields-layout.js",
+    "./components/snk-form-config/fields-selector/fields-selector.js",
+    "./components/snk-form-config/guides-configurator/guides-configurator.js",
     "./components/snk-grid/snk-grid.js",
     "./components/snk-grid-config/snk-grid-config.js",
     "./components/snk-grid-config/snk-select-box/snk-select-box.js",
@@ -72,11 +76,6 @@
         "snk-application"
       ]
     },
-    {
-      "components": [
-        "snk-tab-config"
-      ]
-    },
     {
       "components": [
         "snk-configurator"
@@ -122,11 +121,6 @@
         "snk-data-unit"
       ]
     },
-    {
-      "components": [
-        "snk-field-config"
-      ]
-    },
     {
       "components": [
         "snk-grid"
@@ -144,7 +138,6 @@
     },
     {
       "components": [
-        "snk-config-options",
         "snk-form",
         "snk-form-config"
       ]

package/dist/collection/components/snk-crud/subcomponents/snk-guides-viewer.js

@@ -544,7 +544,7 @@ export class SnkGuidesViewer {
   render() {
     var _a, _b;
     if (this._formEditorConfigManager != undefined) {
-      return (h("snk-form-config", { tabindex: -1, dataUnit: this._formEditorDataUnit, messagesBuilder: this.messagesBuilder, configManager: this._formEditorConfigManager, onConfigClose: () => this._formEditorConfigManager = null, ignoreReadOnlyFormFields: this.ignoreReadOnlyFormFields }));
+      return (h("snk-form-config", { ref: ref => this._container = ref, tabindex: -1, dataUnit: this._formEditorDataUnit, messagesBuilder: this.messagesBuilder, configManager: this._formEditorConfigManager, onConfigClose: () => this._formEditorConfigManager = null }));
     }
     if (!this.dataUnit || !this._configManager.isLoaded) {
       return;

package/dist/collection/components/snk-filter-bar/snk-filter-bar.css

@@ -97,6 +97,7 @@
 
 .snk-filter-bar__divider{
   margin-bottom: var(--space--small);
+  height: 80%;
 }
 
 .snk-filter-bar__filter-item-container {

package/dist/collection/components/snk-form-config/FormConfigHelper.js

@@ -0,0 +1,245 @@
+import { DataType, UserInterface } from '@sankhyalabs/core';
+import { DEFAULT_TYPE, GROUP_NAMES, TAB_NAMES } from '../../lib/utils/constants';
+const iconMap = new Map([
+  [UserInterface.DATE, 'calendar'],
+  [UserInterface.DATETIME, 'calendar-clock'],
+  [UserInterface.ELAPSEDTIME, 'timer-outline'],
+  [UserInterface.TIME, 'timer-outline'],
+  [UserInterface.DECIMALNUMBER, 'number'],
+  [UserInterface.INTEGERNUMBER, 'number'],
+  [UserInterface.FILE, 'zip'],
+  [UserInterface.IMAGE, 'pdf'],
+  [UserInterface.HTML, 'tag_code'],
+  [UserInterface.SEARCH, 'search'],
+  [UserInterface.SEARCHPLUS, 'search'],
+  [UserInterface.OPTIONSELECTOR, 'list'],
+  [UserInterface.CHECKBOX, 'list'],
+  [UserInterface.SWITCH, 'boolean'],
+  [UserInterface.PASSWORD, 'eye-off'],
+]);
+export const ID_AVAILABLE_FIELDS = 'container-available-fields';
+export var SORTABLE_PATH;
+(function (SORTABLE_PATH) {
+  SORTABLE_PATH["FROM"] = "from";
+  SORTABLE_PATH["TO"] = "to";
+})(SORTABLE_PATH || (SORTABLE_PATH = {}));
+export function getFieldsStructure(evt, path, group, tab) {
+  var _a;
+  const htmlStructure = (_a = evt === null || evt === void 0 ? void 0 : evt[path]) === null || _a === void 0 ? void 0 : _a.children;
+  if (!htmlStructure)
+    return [];
+  return Array.from(htmlStructure).map(({ fieldConfig }) => {
+    return Object.assign(Object.assign({}, fieldConfig), { group, tab });
+  });
+}
+export function updateTabInFieldsFromGroupList(guideGroups, updatedName) {
+  return guideGroups.map(group => {
+    return Object.assign(Object.assign({}, group), { fields: group.fields.map(field => (Object.assign(Object.assign({}, field), { tab: updatedName }))) });
+  });
+}
+export function getValidatedFieldValue(fieldValue, dataUnit, fieldName) {
+  var _a;
+  if (fieldValue == undefined || !dataUnit || !fieldName)
+    return;
+  const dataType = (_a = dataUnit.getField(fieldName)) === null || _a === void 0 ? void 0 : _a.dataType;
+  if (dataType == undefined)
+    return;
+  if ((fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.waitmessage) !== undefined)
+    return undefined;
+  const isNonObjectValue = dataType !== DataType.OBJECT &&
+    dataType !== DataType.DATE &&
+    typeof fieldValue === 'object';
+  const processedValue = isNonObjectValue ? fieldValue.value : fieldValue;
+  return dataType === DataType.OBJECT
+    ? JSON.stringify(processedValue)
+    : processedValue;
+}
+export function getEnabledByProperty(attribName, propertyName, fieldDescriptor) {
+  if (!fieldDescriptor)
+    return true;
+  const fieldProperties = fieldDescriptor.properties || {};
+  const fromAttribName = fieldDescriptor[attribName] !== true;
+  return fieldProperties.hasOwnProperty(propertyName)
+    ? fieldProperties[propertyName] !== 'S'
+    : fromAttribName;
+}
+export function getValueByProperty(property, fieldDescriptor, defaultValue) {
+  if (fieldDescriptor && fieldDescriptor[property] === true) {
+    return true;
+  }
+  return defaultValue;
+}
+export function getIconName(userInterface) {
+  return iconMap.get(userInterface) || 'text';
+}
+export function buildNewGuideName(guidesList) {
+  var _a, _b;
+  const qtdWithNewGuideName = (_b = (_a = guidesList.filter(g => g.name.includes(TAB_NAMES.newGuide))) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+  return qtdWithNewGuideName === 0
+    ? TAB_NAMES.newGuide
+    : `${TAB_NAMES.newGuide} (${qtdWithNewGuideName})`;
+}
+export function getFieldsToSave(guidesMap) {
+  const fieldsToSave = [];
+  guidesMap.forEach(groups => {
+    groups.forEach(({ fields }) => {
+      fields === null || fields === void 0 ? void 0 : fields.forEach((fieldConfig) => {
+        fieldsToSave.push(buildFieldToSave(fieldConfig));
+      });
+    });
+  });
+  return fieldsToSave;
+}
+export function buildGuidesMap(rawFields, tabs, dataUnit, generalTab) {
+  const fields = handleFieldsTabNames(rawFields);
+  const guidesMap = initGuidesMap(tabs);
+  if (!(fields === null || fields === void 0 ? void 0 : fields.length))
+    return;
+  for (let guideName of guidesMap.keys()) {
+    const fieldsFromGuide = getFieldsFromGuide(fields, guideName, generalTab);
+    const fieldsByGroupMap = getGroupsFromGuide(fieldsFromGuide, dataUnit, generalTab);
+    const groupsList = parserGroupMapIntoList(fieldsByGroupMap);
+    guidesMap.set(guideName, groupsList);
+  }
+  return guidesMap;
+}
+export function buildGuides(config, mainArea) {
+  let tabs = config.tabs ? [...config.tabs] : buildTabsFromFields(config === null || config === void 0 ? void 0 : config.fields);
+  tabs = getPossibleGuides(tabs);
+  tabs = initializeTabsNames(tabs);
+  return handleMainTab(tabs, mainArea);
+}
+function handleFieldsTabNames(allFields) {
+  // Campos que não fazem parte de nenhuma aba ou da aba "Geral", devem ser movidos para a aba __main.
+  return allFields.map(field => {
+    const tabName = field.tab;
+    return Object.assign(Object.assign({}, field), { tab: (!tabName || tabName === TAB_NAMES.general) ? TAB_NAMES.main : field.tab });
+  });
+}
+function initializeTabsNames(tabs) {
+  return tabs.map((tab) => {
+    return Object.assign(Object.assign({}, tab), { name: tab.name ? tab.name : tab.label });
+  });
+}
+function handleMainTab(tabs, mainTabName) {
+  const mainTab = { name: TAB_NAMES.main, label: mainTabName, visible: true };
+  const hasTabMain = tabs.some((tab) => tab.name === TAB_NAMES.main);
+  if (hasTabMain) {
+    tabs = tabs.map(tab => tab.name === TAB_NAMES.main ? mainTab : tab);
+  }
+  else {
+    tabs.unshift(mainTab);
+  }
+  return tabs;
+}
+function getPossibleGuides(tabs) {
+  //O usuário não pode criar uma guia com o nome "Geral".
+  // Nesses casos, precisamos mover os campos dessa guia, para a guia __main.
+  return [...tabs.filter(tab => tab.label !== TAB_NAMES.general)];
+}
+function initGuidesMap(tabs) {
+  const map = new Map();
+  let possibleGuides = getPossibleGuides(tabs);
+  possibleGuides.forEach(tab => {
+    map.set(tab.name, []);
+  });
+  return map;
+}
+function handleFieldLabel(field, fieldDescriptor) {
+  if (!field.label) {
+    field.label = fieldDescriptor.label;
+  }
+}
+function handleFieldTab(field, generalTabName) {
+  if (!field.tab) {
+    field.tab = generalTabName;
+  }
+}
+function handleFieldGroup(field) {
+  if (!field.group) {
+    field.group = GROUP_NAMES.noGroup;
+  }
+}
+function isVisibleOnConfig(fieldDescriptor) {
+  var _a;
+  /**
+   * Quando um campo é ocultado pelo dev, mas queremos manter ele na config precisamos fazer essa tratativa.
+   */
+  return ((_a = fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.properties) === null || _a === void 0 ? void 0 : _a.visibleOnConfig) === true && (fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.visible) === false;
+}
+function getGroupsFromGuide(fieldsFromGuide, dataUnit, generalTabName) {
+  const groupsMap = new Map();
+  groupsMap.set(GROUP_NAMES.noGroup, []);
+  for (let field of fieldsFromGuide) {
+    const fieldDescriptor = dataUnit.getField(field.name);
+    if (!(fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.visible) && !isVisibleOnConfig(fieldDescriptor))
+      continue;
+    handleFieldLabel(field, fieldDescriptor);
+    handleFieldTab(field, generalTabName);
+    handleFieldGroup(field);
+    if (groupsMap.has(field.group)) {
+      groupsMap.get(field.group).push(field);
+    }
+    else {
+      groupsMap.set(field.group, [field]);
+    }
+  }
+  return groupsMap;
+}
+function getFieldsFromGuide(fields, guideName, generalTabName) {
+  return fields.filter(field => {
+    const fieldTab = getTabName(field.tab, generalTabName);
+    return fieldTab === guideName;
+  });
+}
+function getTabName(tab, generalTabName) {
+  var _a;
+  if (typeof tab === 'string')
+    return tab;
+  return (_a = tab === null || tab === void 0 ? void 0 : tab.label) !== null && _a !== void 0 ? _a : generalTabName;
+}
+function parserGroupMapIntoList(groupsMap) {
+  const groupsList = [];
+  for (let groupName of groupsMap.keys()) {
+    groupsList.push({ name: groupName, fields: groupsMap.get(groupName) });
+  }
+  return groupsList;
+}
+function canAddTab(tab, guideList) {
+  return tab && !(guideList.map(g => g.name).includes(tab));
+}
+function buildTabsFromFields(fields) {
+  const guideList = [];
+  let order = 1;
+  fields === null || fields === void 0 ? void 0 : fields.forEach((field) => {
+    const tab = field.tab;
+    if (canAddTab(tab, guideList)) {
+      guideList.push({ name: tab, label: tab, visible: true, order });
+      order = order + 1;
+    }
+  });
+  return guideList;
+}
+function buildFieldToSave(fieldConfig) {
+  const fieldToSave = {
+    cleanOnCopy: fieldConfig.cleanOnCopy || false,
+    group: fieldConfig.group === GROUP_NAMES.noGroup ? undefined : fieldConfig.group,
+    label: fieldConfig.label,
+    name: fieldConfig.name,
+    required: fieldConfig.required,
+    readOnly: fieldConfig.readOnly,
+    tab: fieldConfig.tab,
+  };
+  if (fieldConfig.defaultValue != undefined) {
+    if (fieldConfig.defaultValue.type == undefined) {
+      fieldToSave.defaultValue = {
+        type: DEFAULT_TYPE.fixed,
+        value: fieldConfig.defaultValue,
+      };
+    }
+    else {
+      fieldToSave.defaultValue = fieldConfig.defaultValue;
+    }
+  }
+  return fieldToSave;
+}

package/dist/collection/components/snk-form-config/SnkFormConfigManager.js

@@ -1,7 +1,7 @@
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
-import { ObjectUtils, StringUtils } from "@sankhyalabs/core";
-import { FormConfigFetcher } from "../../lib/http/data-fetcher/fetchers/form-config-fetcher";
-import { TAB_NAMES } from "../../lib/utils/constants";
+import { ObjectUtils, StringUtils } from '@sankhyalabs/core';
+import { FormConfigFetcher } from '../../lib/http/data-fetcher/fetchers/form-config-fetcher';
+import { TAB_NAMES } from '../../lib/utils/constants';
 export class SnkFormConfigManager {
   constructor(configName, resourceID, onConfigChange, dataUnit) {
     this._resourceID = resourceID;
@@ -28,8 +28,7 @@ export class SnkFormConfigManager {
     });
   }
   getEmptyConfig() {
-    const config = this.buildFormMetadataUITabs({ fields: [], emptyConfig: true }, true);
-    return config;
+    return this.buildFormMetadataUITabs({ fields: [], emptyConfig: true }, true);
   }
   saveConfig(config) {
     const configToSave = ObjectUtils.copy(config);

package/dist/collection/components/snk-form-config/config-header/config-header.css

@@ -0,0 +1,18 @@
+:host{
+  display: flex;
+  padding-top: 12px;
+  padding-left: 12px;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.left-group{
+  display: flex;
+  gap: 8px;
+}
+
+.right-group{
+  padding-right: 18px;
+  display: flex;
+}

package/dist/collection/components/snk-form-config/config-header/config-header.js

@@ -0,0 +1,236 @@
+import { h, Host } from '@stencil/core';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+export class ConfigHeader {
+  constructor() {
+    this.isEditingGuide = false;
+    this.isEditingGroup = false;
+    this.configOptions = [];
+    this.selectedConfig = undefined;
+    this.messagesBuilder = undefined;
+    this.hasChanges = false;
+    this.optionConfigChanged = false;
+  }
+  handleIsEditingGuideName({ detail }) {
+    this.isEditingGuide = detail;
+  }
+  handleIsEditingGroupName({ detail }) {
+    this.isEditingGroup = detail;
+  }
+  saveFormConfig() {
+    if (this.isEditingGuide || this.isEditingGroup) {
+      const title = this.getMessage('snkFormConfig.confirm.title');
+      const message = this.isEditingGuide
+        ? this.getMessage('snkFormConfig.alert.titleGuideEditing')
+        : this.getMessage('snkFormConfig.alert.titleGroupEditing');
+      ApplicationUtils.alert(title, message);
+      return;
+    }
+    this.saveConfig.emit();
+  }
+  async closeFormConfig() {
+    if (this.hasChanges) {
+      const title = this.getMessage('snkFormConfig.confirm.title');
+      const msg = this.getMessage('snkFormConfig.confirm.cancel');
+      const confirm = await ApplicationUtils.confirm(title, msg);
+      if (!confirm)
+        return;
+    }
+    this.configClose.emit();
+  }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
+  openConfirmDialog(msg = '', title = this.getMessage('snkFormConfig.confirm.title')) {
+    return ApplicationUtils.confirm(title, msg);
+  }
+  async applyOptionConfig() {
+    var _a, _b;
+    const name = (_b = (_a = this.selectedConfig) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.getMessage('snkFormConfig.configs.selectedConfig');
+    const msg = this.getMessage('snkFormConfig.confirm.apply').replace('{0}', name);
+    const confirm = await this.openConfirmDialog(msg);
+    if (confirm) {
+      this.saveConfig.emit();
+    }
+  }
+  renderSaveActions() {
+    if (!this.hasChanges && !this.optionConfigChanged)
+      return;
+    if (this.hasChanges) {
+      return (h("div", { class: "right-group" }, h("ez-button", { title: 'Cancelar', label: 'Cancelar', onClick: this.closeFormConfig.bind(this), size: "medium" }), h("ez-button", { title: 'Salvar', label: 'Salvar', class: 'ez-button--primary ez-padding-left--medium', onClick: () => this.saveFormConfig(), size: "medium" })));
+    }
+    return (h("div", { class: "right-group" }, h("ez-button", { title: 'Cancelar', label: 'Cancelar', onClick: this.closeFormConfig.bind(this), size: "medium" }), h("ez-button", { title: 'Salvar', label: this.getMessage('snkFormConfig.applyConfig'), class: 'ez-button--primary ez-padding-left--medium', onClick: async () => await this.applyOptionConfig(), size: "medium" })));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'left-group' }, h("ez-button", { mode: "icon", title: this.getMessage('snkFormConfig.goBackTitle'), iconName: "arrow_back", class: "ez-padding--small", size: "small", onClick: this.closeFormConfig.bind(this), id: "formConfigToBack" }), h("h1", { class: "ez-title ez-title--primary ez-title--extra-large ez-padding--small" }, this.getMessage('snkFormConfig.title')), h("configs-button", { hasChanges: this.hasChanges, configOptions: this.configOptions, selectedConfig: this.selectedConfig, messagesBuilder: this.messagesBuilder })), this.renderSaveActions()));
+  }
+  static get is() { return "config-header"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["config-header.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["config-header.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "configOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<IUserConfig>",
+          "resolved": "IUserConfig[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IUserConfig": {
+              "location": "import",
+              "path": "../../../lib/http/data-fetcher/fetchers/form-config-fetcher"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "selectedConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IUserConfig",
+          "resolved": "IUserConfig",
+          "references": {
+            "IUserConfig": {
+              "location": "import",
+              "path": "../../../lib/http/data-fetcher/fetchers/form-config-fetcher"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "messagesBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkMessageBuilder",
+          "resolved": "SnkMessageBuilder",
+          "references": {
+            "SnkMessageBuilder": {
+              "location": "import",
+              "path": "../../../lib/message/SnkMessageBuilder"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "hasChanges": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-changes",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "optionConfigChanged": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "option-config-changed",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isEditingGuide": {},
+      "isEditingGroup": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "configClose",
+        "name": "configClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "saveConfig",
+        "name": "saveConfig",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "isEditingGuideName",
+        "method": "handleIsEditingGuideName",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "isEditingGroupName",
+        "method": "handleIsEditingGroupName",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/snk-form-config/config-header/configs-button/configs-button.css

@@ -0,0 +1,41 @@
+.dropdown-container{
+  font-family: 'Roboto';
+  font-size: 12px;
+  font-weight: 400;
+  display: flex;
+  flex-direction: column;
+  color: #2b3a54;
+  width: 200px
+}
+
+.main-item{
+  padding: 12px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all .2s ease-in-out;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: start;
+}
+
+.main-item ez-icon{
+  --ez-icon--color: #008561;
+}
+
+.main-item:nth-of-type(1){
+  padding-bottom: 6px;
+}
+
+.main-item:nth-of-type(2){
+  padding-top: 6px;
+}
+
+.main-item:hover{
+  background-color: #FAFCFF;
+}
+
+.item-label {
+  display: flex;
+}