@sankhyalabs/sankhyablocks 0.0.0-feat-dev-kb-4158.0

package/dist/collection/components/snk-personalized-filter/interfaces/IExpressionItem.js

@@ -0,0 +1,5 @@
+export var FilterGroupCondition;
+(function (FilterGroupCondition) {
+  FilterGroupCondition["AND"] = "AND";
+  FilterGroupCondition["OR"] = "OR";
+})(FilterGroupCondition || (FilterGroupCondition = {}));

package/dist/collection/components/snk-personalized-filter/interfaces/IParameter.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/snk-personalized-filter/interfaces/IPersonalizedFilter.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/snk-personalized-filter/interfaces/ISystemFilterConfig.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/snk-personalized-filter/interfaces/IUserFilterConfig.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/snk-personalized-filter/interfaces/index.js

@@ -0,0 +1,39 @@
+export * from './IExpressionItem';
+export * from './ISystemFilterConfig';
+export * from './IUserFilterConfig';
+export var FilterConfigType;
+(function (FilterConfigType) {
+  FilterConfigType["SYSTEM_CONFIG"] = "S";
+  FilterConfigType["USER_CONFIG"] = "E";
+})(FilterConfigType || (FilterConfigType = {}));
+export var FilterUserConfigTypes;
+(function (FilterUserConfigTypes) {
+  FilterUserConfigTypes["DATE"] = "D";
+  FilterUserConfigTypes["HORA"] = "H";
+  FilterUserConfigTypes["TEXT"] = "S";
+  FilterUserConfigTypes["INTEGER"] = "I";
+  FilterUserConfigTypes["DECIMAL"] = "F";
+  FilterUserConfigTypes["NUMBER"] = "NUMBER";
+})(FilterUserConfigTypes || (FilterUserConfigTypes = {}));
+export var FilterOperand;
+(function (FilterOperand) {
+  FilterOperand["AND"] = "AND";
+  FilterOperand["OR"] = "OR";
+  FilterOperand["IN"] = "IN";
+  FilterOperand["DIFFERENT"] = "<>";
+  FilterOperand["LIKE"] = "LIKE";
+  FilterOperand["START_WITH"] = "LIKE_START";
+  FilterOperand["FINISHED_WITH"] = "LIKE_END";
+  FilterOperand["NULL"] = "NULL";
+  FilterOperand["NOT_NULL"] = "NOT NULL";
+  FilterOperand["EQUAL"] = "=";
+  FilterOperand["LARGER"] = ">";
+  FilterOperand["LARGER_EQUAL"] = ">=";
+  FilterOperand["SMALLER"] = "<";
+  FilterOperand["SMALLER_EQUAL"] = "<=";
+})(FilterOperand || (FilterOperand = {}));
+export var FilterEntities;
+(function (FilterEntities) {
+  FilterEntities["FIELD"] = "Campo";
+  FilterEntities["INSTANCE"] = "Instancia";
+})(FilterEntities || (FilterEntities = {}));

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

@@ -0,0 +1,45 @@
+:host {
+  /*private*/
+  display: flex;
+  height: 100%;
+  padding: var(--space--large, 24px);
+
+  /*@doc Define a largura do container.*/
+  --snk-personalized-filter--width: 100%;
+  /*@doc Define a altura do container.*/
+  --snk-personalized-filter--height: 100%;
+  /*@doc Define a cor da linha de separação.*/
+  --snk-personalized-filter--background-color-line: var(--color--disable-secondary);
+  /*@doc Define a margem da linha de separação.*/
+  --snk-personalized-filter--margin-line: var(--border--radius-medium, 12px);
+}
+
+.snk-personalized-filter{
+  height: var(--snk-personalized-filter--width);
+  width: var(--snk-personalized-filter--height);
+}
+
+.snk-personalized-filter__header-actions {
+  display: flex;
+  gap: var(--space--medium);
+}
+
+.snk-personalized-filter__group{
+  flex: 1;
+}
+
+.snk-personalized-filter__expression-input--line {
+  width: 100%;
+  height: 2px; 
+  background-color: var(--snk-personalized-filter--background-color-line);
+  margin-top: var(--snk-personalized-filter--margin-line);
+  margin-bottom: var(--snk-personalized-filter--margin-line);
+}
+
+.ez-box__main {
+  height: 90%;
+}
+
+.snk-personalized-filter__button-mode{
+  height: 35px;
+}

package/dist/collection/components/snk-personalized-filter/snk-personalized-filter.js

@@ -0,0 +1,440 @@
+import { h, Host, Fragment } from '@stencil/core';
+import { ApplicationContext, StringUtils } from '@sankhyalabs/core';
+import { PersonalizedFilterUtils } from './subcomponents/snk-filter-param-config/utils/PersonalizedFilterUtils';
+import { ConfigStorage } from "../../lib/configs/ConfigStorage";
+import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
+import { ObjectUtils, ElementIDUtils } from "@sankhyalabs/core";
+import { FilterGroupCondition } from './interfaces/IExpressionItem';
+import store from '../../lib/store';
+import PersonalizedFilterFetcher from "../../lib/http/data-fetcher/fetchers/personalized-filter-fetcher";
+export class SnkPersonalizedFilter {
+  constructor() {
+    this._personalizedFilterFetcher = new PersonalizedFilterFetcher();
+    this._filterMetadataStorage = new Map();
+    this._dataSourceFetcher = {
+      fetchData: async (entity) => {
+        let entityURI = entity === null || entity === void 0 ? void 0 : entity.uri;
+        if (StringUtils.isEmpty(entityURI)) {
+          entityURI = this.entityUri;
+        }
+        if (!this._filterMetadataStorage.has(entityURI)) {
+          const filterMetadata = await this._personalizedFilterFetcher.loadFields(entityURI);
+          this._filterMetadataStorage.set(entityURI, filterMetadata);
+        }
+        return this._filterMetadataStorage.get(entityURI);
+      }
+    };
+    this._filterAssistentMode = true;
+    this._filterAssistent = undefined;
+    this.messagesBuilder = undefined;
+    this.entityUri = undefined;
+    this.filterId = undefined;
+    this.configName = undefined;
+  }
+  /*
+   * Cria um novo filtro se não houver nenhum filtro existente
+   */
+  async createPersonalizedFilter() {
+    const newPersonalizedFilter = {
+      name: "",
+      active: true,
+      expression: "",
+      parameters: [],
+      assistent: {
+        id: StringUtils.generateUUID(),
+        items: [
+          {
+            id: StringUtils.generateUUID(),
+            entityName: "",
+            fieldName: "",
+            description: "",
+            fieldLabel: "Valor",
+            type: undefined,
+            expression: undefined,
+            operand: undefined,
+            paramVariable: false,
+            value: undefined,
+            systemConfig: null,
+            userConfig: null
+          }
+        ],
+        childrenGroups: [],
+        operand: FilterGroupCondition.AND
+      }
+    };
+    this._originalFilterAssistent = ObjectUtils.copy(newPersonalizedFilter);
+    this._filterAssistent = ObjectUtils.copy(newPersonalizedFilter);
+  }
+  loadFilter(newValue, oldValue) {
+    if (newValue == null || oldValue == newValue) {
+      return;
+    }
+    ConfigStorage.get().then((_instance) => {
+      ConfigStorage.loadPersonalizedFilter(newValue, this.configName)
+        .then((resp) => {
+        const personalizedFilter = this.addLabelToItems(resp);
+        this._filterAssistent = personalizedFilter;
+        this._originalFilterAssistent = ObjectUtils.copy(personalizedFilter);
+        this._filterAssistentMode = this._filterAssistent.hasOwnProperty("assistent") && this._filterAssistent.assistent != undefined;
+      });
+    });
+  }
+  componentWillLoad() {
+    var _a;
+    if (store.get(`filterFieldsDataSource.${this.entityUri}`) == undefined) {
+      store.set(`filterFieldsDataSource.${this.entityUri}`, this._dataSourceFetcher);
+    }
+    if (!this.messagesBuilder) {
+      this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      this.messagesBuilder = (_a = this._application) === null || _a === void 0 ? void 0 : _a.messagesBuilder;
+    }
+    this.loadFilter(this.filterId, undefined);
+  }
+  componentDidRender() {
+    var _a;
+    (_a = this._viewStackRef) === null || _a === void 0 ? void 0 : _a.show(this._filterAssistentMode ? 0 : 1);
+    if (this._elButtonMode) {
+      this._elButtonMode.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, ElementIDUtils.getInternalIDInfo(`${this._filterAssistentMode ? "advancedMode_ezButton" : "assistentMode_ezButton"}`));
+    }
+  }
+  getMessage(key, params) {
+    return this._application.messagesBuilder.getMessage(key, params);
+  }
+  saveFilter() {
+    ConfigStorage.savePersonalizedFilter(this._filterAssistent, this.configName).then((personalizedFilter) => {
+      this._elButtonSave.enabled = false;
+      const messageToken = !!this._filterAssistent.id ? 'confirmEdit' : 'confirmSave';
+      ApplicationUtils.info(this.getMessage(`snkPersonalizedFilter.${messageToken}.title`), { iconName: "check" });
+      const updatedFilterAssistent = Object.assign(Object.assign({}, personalizedFilter), this._filterAssistent);
+      updatedFilterAssistent.parameters = PersonalizedFilterUtils.buildVariableParameters(this._filterAssistent.assistent);
+      this._originalFilterAssistent = ObjectUtils.copy(updatedFilterAssistent);
+      this._filterAssistent = ObjectUtils.copy(updatedFilterAssistent);
+    });
+  }
+  removeFilter() {
+    ConfigStorage.removePersonalizedFilter(this._filterAssistent, this.configName);
+  }
+  hasChangesToSave() {
+    return JSON.stringify(this._filterAssistent) === JSON.stringify(this._originalFilterAssistent);
+  }
+  async handleSave() {
+    if (this._filterAssistentMode) {
+      const isValid = PersonalizedFilterUtils.validateFields(this._filterAssistent.assistent);
+      if (!isValid || !this._filterAssistent.name)
+        return this._application.error(this.getMessage("snkPersonalizedFilter.error.title"), this.getMessage("snkPersonalizedFilter.error.description"));
+      this.saveAssistentMode();
+    }
+    else {
+      if (!this._filterAssistent.expression || !this._filterAssistent.name)
+        return this._application.error(this.getMessage("snkPersonalizedFilter.error.title"), this.getMessage("snkPersonalizedFilter.error.description"));
+      const isValidExpressionForAdvancedMode = await this.validateExpressionBeforeSaving();
+      if (!isValidExpressionForAdvancedMode)
+        return;
+      this.saveAdvancedMode();
+    }
+  }
+  saveAssistentMode() {
+    const { assistent, expression } = this._filterAssistent;
+    const expressionQuery = !!assistent ? PersonalizedFilterUtils.buildGroupExpression(assistent) : expression;
+    this._filterAssistent.expression = expressionQuery;
+    this.ezSave.emit(expressionQuery);
+    this.saveFilter();
+  }
+  saveAdvancedMode() {
+    if (this._originalFilterAssistent.expression !== this._filterAssistent.expression && this._filterAssistent.assistent) {
+      ApplicationUtils.confirm(this.getMessage("snkPersonalizedFilter.confirmSaveModeAdvanced.title"), this.getMessage("snkPersonalizedFilter.confirmSaveModeAdvanced.description"))
+        .then((confirm) => {
+        if (!confirm)
+          return;
+        this.saveAndTransformToAdvancedMode();
+      });
+    }
+    else if (!this._filterAssistent.assistent) {
+      this.saveAndTransformToAdvancedMode();
+    }
+    else {
+      this.saveAssistentMode();
+    }
+  }
+  saveAndTransformToAdvancedMode() {
+    this._filterAssistent.assistent = undefined;
+    this.ezSave.emit(this._filterAssistent.expression);
+    this.saveFilter();
+  }
+  async validateExpressionBeforeSaving() {
+    const { valid, message = "" } = await this._personalizedFilterFetcher.validatePersonalizedFilter(this.entityUri, this._filterAssistent.expression);
+    valid || this._application.error(this.getMessage("snkPersonalizedFilter.errorValidation.title"), message.replace(/.*Exception: /, ''));
+    return valid;
+  }
+  handleCancel() {
+    if (this.hasChangesToSave()) {
+      return this.ezCancel.emit();
+    }
+    ApplicationUtils.confirm(this.getMessage("snkPersonalizedFilter.confirmCancel.title"), this.getMessage("snkPersonalizedFilter.confirmCancel.description"))
+      .then((canCancel) => {
+      var _a;
+      if (!canCancel)
+        return;
+      this._filterAssistent = ObjectUtils.copy((_a = this._originalFilterAssistent) !== null && _a !== void 0 ? _a : {});
+      this.ezCancel.emit();
+      this._elButtonSave.enabled = false;
+    });
+  }
+  handleTitleChange(name) {
+    this._filterAssistent = Object.assign(Object.assign({}, this._filterAssistent), { name });
+    this._elButtonSave.enabled = !this.hasChangesToSave();
+  }
+  addLabelToItems(resp) {
+    //Workaround: Alguns filtros foram salvos sem o fieldLabel. Para evitar transtornos
+    //tentamos usar o fieldLabel que pode estar informado no parametro.
+    if (resp.assistent && resp.assistent.items && resp.assistent.items.length > 0) {
+      resp.assistent.items.forEach(item => {
+        if (item.fieldLabel == undefined) {
+          const param = (resp.parameters || []).find(param => param.fieldName === item.fieldName);
+          if (param) {
+            item.fieldLabel = param.label;
+          }
+        }
+      });
+    }
+    return resp;
+  }
+  handleExpressionChangeAdvancedMode(expression) {
+    this._filterAssistent = Object.assign(Object.assign({}, this._filterAssistent), { expression });
+    this._elButtonSave.enabled = !this.hasChangesToSave();
+  }
+  handleChangeFilterAssistentMode(filterAssistent) {
+    this._elButtonSave.enabled = !this.hasChangesToSave();
+    this._filterAssistent = Object.assign({}, filterAssistent);
+  }
+  selectField(fieldName) {
+    if (!('name' in fieldName))
+      return;
+    const fieldExpression = this.buildExpression(fieldName.entityName, fieldName.name, fieldName.entityPath);
+    const textAreaElement = this._elAdvancedMode.querySelector('ez-text-area');
+    textAreaElement.appendTextToSelection(fieldExpression);
+  }
+  buildExpression(entityName, fieldName, entityPath) {
+    if (entityPath.length > 0) {
+      entityPath.shift();
+    }
+    return entityPath.length > 0 ? `${entityPath.join("->")}->${fieldName}` : `${entityName}.${fieldName}`;
+  }
+  onAddField(target) {
+    const textAreaElement = this._elAdvancedMode.querySelector('ez-text-area');
+    const options = { horizontalGap: 0, verticalGap: 12, fromRight: true };
+    textAreaElement.setFocus();
+    target.setBlur();
+    if (this._elFilterFieldSearch)
+      this._elFilterFieldSearch.show(target, options);
+  }
+  renderButtonAddField() {
+    if (this._filterAssistentMode)
+      return;
+    return (h(Fragment, null, h("ez-button", { class: "snk-personalized-filter__button-mode", label: this.getMessage("snkPersonalizedFilter.info.addField"), enabled: true, onClick: (evt) => this.onAddField(evt.target) }, h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: "plus" })), h("snk-filter-field-search", { class: "ez-padding-left--medium", ref: ref => this._elFilterFieldSearch = ref, onEzSelectFilterItem: (evt) => this.selectField(evt.detail), fieldsDataSource: this._dataSourceFetcher })));
+  }
+  buildContainerPersonalizedFilter() {
+    return (h("ez-view-stack", { ref: (ref) => this._viewStackRef = ref }, h("stack-item", null, this._filterAssistentMode &&
+      h("snk-filter-assistent-mode", { filterAssistent: this._filterAssistent, messagesBuilder: this.messagesBuilder, filterId: this.filterId, entityUri: this.entityUri, application: this._application, onEzChangeFilter: (ev) => this.handleChangeFilterAssistentMode(ev.detail) })), h("stack-item", null, h("snk-filter-advanced-mode", { ref: (ref) => this._elAdvancedMode = ref, filterAssistent: this._filterAssistent, application: this._application, onEzExpressionChange: (ev) => this.handleExpressionChangeAdvancedMode(ev.detail) }))));
+  }
+  handleModeChange() {
+    var _a, _b;
+    if (this._filterAssistentMode) {
+      ApplicationUtils.confirm(this.getMessage("snkPersonalizedFilter.confirmChangeModeAssistent.title"), this.getMessage("snkPersonalizedFilter.confirmChangeModeAssistent.description"))
+        .then((canCancel) => {
+        if (!canCancel)
+          return;
+        this._filterAssistentMode = !this._filterAssistentMode;
+        if (!this.hasChangesToSave()) {
+          const expression = PersonalizedFilterUtils.buildGroupExpression(this._filterAssistent.assistent);
+          this._filterAssistent.expression = expression;
+          this._elButtonSave.enabled = !this.hasChangesToSave();
+        }
+      });
+    }
+    else {
+      if (((_a = this._filterAssistent) === null || _a === void 0 ? void 0 : _a.expression) === ((_b = this._originalFilterAssistent) === null || _b === void 0 ? void 0 : _b.expression)) {
+        this._filterAssistentMode = !this._filterAssistentMode;
+      }
+      else {
+        const expressionBefore = this._filterAssistent.expression;
+        const expression = PersonalizedFilterUtils.buildGroupExpression(this._filterAssistent.assistent);
+        if (expressionBefore !== expression) {
+          ApplicationUtils.confirm(this.getMessage("snkPersonalizedFilter.confirmChangeModeAdvanced.title"), this.getMessage("snkPersonalizedFilter.confirmChangeModeAdvanced.description"))
+            .then((canCancel) => {
+            if (!canCancel)
+              return;
+            this._filterAssistent = Object.assign(Object.assign({}, this._filterAssistent), { expression });
+            this._filterAssistentMode = !this._filterAssistentMode;
+          });
+        }
+        else {
+          this._filterAssistentMode = !this._filterAssistentMode;
+        }
+      }
+    }
+  }
+  render() {
+    var _a, _b, _c, _d;
+    if (!((_a = this._filterAssistent) === null || _a === void 0 ? void 0 : _a.assistent) && this._filterAssistentMode) {
+      return;
+    }
+    return (h(Host, null, h("div", { class: "snk-personalized-filter" }, h("div", null, h("snk-simple-bar", { label: this.filterId ? this.getMessage("snkPersonalizedFilter.info.titleEdit") : this.getMessage("snkPersonalizedFilter.info.titleAdd"), onExit: () => this.handleCancel() }, h("div", { class: "snk-personalized-filter__header-actions", slot: "rightSlot" }, h("ez-button", { size: "small", label: this.getMessage("snkPersonalizedFilter.info.labelCancel"), onClick: () => this.handleCancel() }), h("ez-button", { size: "small", ref: (el) => this._elButtonSave = el, enabled: false, class: "ez-button--primary", label: this.getMessage("snkPersonalizedFilter.info.labelSave"), onClick: this.handleSave.bind(this) })))), h("div", { class: "ez-box ez-margin-bottom--medium ez-box__main" }, h("div", { class: "ez-box__container" }, h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, h("div", { class: "ez-flex" }, h("ez-text-input", { class: "ez-padding-right--medium", label: this.getMessage("snkPersonalizedFilter.info.labelNameFilter"), value: (_b = this._filterAssistent) === null || _b === void 0 ? void 0 : _b.name, onEzChange: (evt) => this.handleTitleChange(evt.detail) }), this.renderButtonAddField(), h("ez-button", { ref: (el) => this._elButtonMode = el, class: "snk-personalized-filter__button-mode", label: this._filterAssistentMode ? this.getMessage("snkPersonalizedFilter.info.activeModeAdvanced") : this.getMessage("snkPersonalizedFilter.info.activeModeAssistent"), onClick: () => this.handleModeChange(), "data-tooltip": !(this._filterAssistentMode || ((_c = this._filterAssistent) === null || _c === void 0 ? void 0 : _c.assistent)) ? this.getMessage("snkPersonalizedFilter.info.tooltipDisabledAssistentMode") : undefined, "data-flow": "bottom", enabled: (!this._filterAssistent.name || Boolean(this._filterAssistentMode || ((_d = this._filterAssistent) === null || _d === void 0 ? void 0 : _d.assistent))) })), this.buildContainerPersonalizedFilter()))))));
+  }
+  static get is() { return "snk-personalized-filter"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-personalized-filter.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-personalized-filter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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": "Respons\u00E1vel por flexibilizar e padronizar o uso de mensagens nos blocos de constru\u00E7\u00E3o."
+        }
+      },
+      "entityUri": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Respons\u00E1vel por receber a URI da entidade."
+        },
+        "attribute": "entity-uri",
+        "reflect": false
+      },
+      "filterId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id do filtro que ser\u00E1 carregado."
+        },
+        "attribute": "filter-id",
+        "reflect": false
+      },
+      "configName": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome da config para buscar no resourceId"
+        },
+        "attribute": "config-name",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_filterAssistentMode": {},
+      "_filterAssistent": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezCancel",
+        "name": "ezCancel",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "ezSave",
+        "name": "ezSave",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "createPersonalizedFilter": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IPersonalizedFilter": {
+              "location": "import",
+              "path": "./interfaces/IPersonalizedFilter"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "filterId",
+        "methodName": "loadFilter"
+      }];
+  }
+}

package/dist/collection/components/snk-personalized-filter/subcomponents/snk-expression-group/snk-expression-group.css

@@ -0,0 +1,73 @@
+:host {
+  display: block;
+
+  /*@doc Define a largura do container.*/
+  --snk-expression-group--container-condition--width: 184px;
+  /*@doc Define a altura do container.*/
+  --snk-expression-group--container-condition--height: 38px;
+  /*@doc Define o tamanho da borda.*/
+  --snk-expression-group--container-condition--border-radius: var(--border--radius-medium, 12px);
+
+  /*@doc Define a altura do container.*/
+  --snk-expression-group--container-option--width: 85px;
+  /*@doc Define a cor da condition AND*/
+  --snk-expression-group__container-condition--background-and: #66B6A0;
+  /*@doc Define a cor da condition OR*/
+  --snk-expression-group__container-condition--background-or: #EBC65E;
+
+  /*@doc Define o padding da expression*/
+  --snk-expression-group__container-expression--padding-left: 26px;
+
+  /*@doc Define a cor de efeito de tracejado.*/
+  --snk-expression-group__background-color-dashed: var(--background--body, #fafcff);
+}
+
+.snk-expression-group__container-condition {
+  width: var(--snk-expression-group--container-condition--width);
+  height: var(--snk-expression-group--container-condition--height);
+  border-radius: var(--snk-expression-group--container-condition--border-radius);
+  z-index: var(--more-visible--2x, 3);
+}
+
+.snk-expression-group__container-option {
+  width: var(--snk-expression-group--container-option--width);
+}
+
+.snk-expression-group__container-condition[data-condition="AND"] {
+  background-color: var(--snk-expression-group__container-condition--background-and);
+}
+
+.snk-expression-group__container-condition[data-condition="OR"] {
+  background-color: var(--snk-expression-group__container-condition--background-or);
+}
+
+.snk-expression-group__container-expression{
+  padding-left: var(--snk-expression-group__container-expression--padding-left);
+}
+
+.dashes{
+  z-index: var(--visible, 1);
+  background: var(--snk-expression-group__background-color-dashed);
+  border-left: 2px dashed var(--text-secondary, #A2ABB9);
+  position: absolute;
+  width: 15px;
+  height: 58px;
+  margin-left: -15px;
+  margin-top: -36.5px;
+}
+
+.horizontal-dashes {
+  z-index: var(--more-visible, 2);
+  border-bottom: 2px dashed var(--text-secondary, #A2ABB9);
+  position: absolute;
+  width: 15px;
+  height: 54px;
+  margin-left: -15px;
+  margin-top: -33.5px;
+}
+
+.hidden{
+  display: none;
+}
+
+