@sankhyalabs/sankhyablocks 5.19.0 → 6.0.0

package/dist/cjs/snk-expression-group.cjs.entry.js

@@ -0,0 +1,246 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-aaaa2af5.js');
+const IExpressionItem = require('./IExpressionItem-1090c3fd.js');
+const utils = require('@sankhyalabs/ezui/dist/collection/utils');
+const core = require('@sankhyalabs/core');
+
+const snkExpressionGroupCss = ".sc-snk-expression-group-h{display:block;--snk-expression-group--container-condition--width:184px;--snk-expression-group--container-condition--height:38px;--snk-expression-group--container-condition--border-radius:var(--border--radius-medium, 12px);--snk-expression-group--container-option--width:85px;--snk-expression-group__container-condition--background-and:#66B6A0;--snk-expression-group__container-condition--background-or:#EBC65E;--snk-expression-group__container-expression--padding-left:26px;--snk-expression-group__background-color-dashed:var(--background--body, #fafcff)}.snk-expression-group__container-condition.sc-snk-expression-group{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.sc-snk-expression-group{width:var(--snk-expression-group--container-option--width)}.snk-expression-group__container-condition[data-condition=\"AND\"].sc-snk-expression-group{background-color:var(--snk-expression-group__container-condition--background-and)}.snk-expression-group__container-condition[data-condition=\"OR\"].sc-snk-expression-group{background-color:var(--snk-expression-group__container-condition--background-or)}.snk-expression-group__container-expression.sc-snk-expression-group{padding-left:var(--snk-expression-group__container-expression--padding-left)}.dashes.sc-snk-expression-group{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.sc-snk-expression-group{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.sc-snk-expression-group{display:none}";
+
+const LIMIT_GROUP_LEVEL = 4;
+const SnkExpressionGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezFilterGroupChange = index.createEvent(this, "ezFilterGroupChange", 7);
+    this.ezFilterGroupRemove = index.createEvent(this, "ezFilterGroupRemove", 7);
+    this.ezExpressionGroupLayoutChanged = index.createEvent(this, "ezExpressionLayoutChanged", 7);
+    this.FIRST_LEVEL = "0";
+    this.application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this._conditionOperator = IExpressionItem.FilterGroupCondition.AND;
+    this._group = undefined;
+    this._selfTop = 0;
+    this.canAddExpression = true;
+    this._showDashes = true;
+    this.parentTop = 0;
+    this.group = undefined;
+    this.messagesBuilder = undefined;
+    this.filterId = undefined;
+    this.entityURI = undefined;
+  }
+  /**
+   * Listener para capturar adição e remoção de grupos e items de expressão.
+   */
+  todoCompletedHandler(_) {
+    this.updateDashes();
+  }
+  /*
+  * Retorna o grupo da expressão.
+  */
+  async getExpressionGroup() {
+    return this._group;
+  }
+  watchGroup(newValue) {
+    this._group = newValue;
+    this._conditionOperator = !this._group.operand ? IExpressionItem.FilterGroupCondition.AND : this._group.operand;
+  }
+  componentWillLoad() {
+    this._group = this.group;
+    this._conditionOperator = !this._group.operand ? IExpressionItem.FilterGroupCondition.AND : this._group.operand;
+    if (!this.getDataGroupLevel()) {
+      this._element.setAttribute('data-group-level', this.FIRST_LEVEL);
+    }
+    if (!this.filterId) {
+      this.canAddExpression = false;
+    }
+  }
+  componentDidRender() {
+    this.setSelfTop();
+  }
+  changeHandler() {
+    this.ezExpressionGroupLayoutChanged.emit();
+  }
+  /**
+   * Função que define o valor atualizado da propriedade top do elemento em tela para calcular o tamanho do tracejado.
+   */
+  setSelfTop() {
+    this._selfTop = this._element.getBoundingClientRect().top;
+  }
+  /**
+   * Função que calcula o tamanho que deve ter o tracejado.
+   */
+  getDashedHeight() {
+    return this._selfTop - this.parentTop;
+  }
+  getMessage(key, params) {
+    return this.application.messagesBuilder.getMessage(key, params);
+  }
+  updateDashes() {
+    this._showDashes = false;
+    this.setSelfTop();
+    this._showDashes = true;
+  }
+  renderExpressionItems() {
+    var _a;
+    return (_a = this._group.items) === null || _a === void 0 ? void 0 : _a.map((item) => (index.h("snk-expression-item", { key: item.id, class: "ez-padding-top--small snk-expression-group__item", expression: item, canRemove: this._group.items.length > 1, onEzFilterItemChange: () => this.handleFilterItemChange(), onEzFilterItemRemove: (evt) => this.handleFilterItemRemove(evt, item.id), messagesBuilder: this.messagesBuilder, entityURI: this.entityURI })));
+  }
+  renderGroups() {
+    var _a;
+    const currentLevel = parseInt(this.getDataGroupLevel() || '0');
+    const newLevel = currentLevel + 1;
+    return (_a = this._group.childrenGroups) === null || _a === void 0 ? void 0 : _a.map((group) => (index.h("snk-expression-group", { key: group.id, group: group, messagesBuilder: this.messagesBuilder, parentTop: this._selfTop, "data-group-level": newLevel, onEzFilterGroupRemove: (evt) => this.handleFilterGroupRemove(evt, group.id), entityURI: this.entityURI })));
+  }
+  handleFilterGroupRemove(evt, groupId) {
+    this.onStopPropagation(evt);
+    this._group.childrenGroups = this._group.childrenGroups.filter(group => group.id !== groupId);
+    index.forceUpdate(this);
+    this.ezFilterGroupChange.emit(this._group);
+    this.changeHandler();
+  }
+  handleFilterItemRemove(evt, itemId) {
+    this.onStopPropagation(evt);
+    this._group.items = this._group.items.filter(item => item.id !== itemId);
+    index.forceUpdate(this);
+    this.ezFilterGroupChange.emit(this._group);
+    this.changeHandler();
+    this.canAddExpression = true;
+  }
+  handleFilterItemChange() {
+    this.ezFilterGroupChange.emit(this._group);
+    this.canAddExpression = this.group.items.every(item => {
+      if (!item.fieldName || !item.operand)
+        return false;
+      if (item.operand === 'NULL' || item.operand === 'NOT_NULL') {
+        return true;
+      }
+      else {
+        return item.paramVariable || (item.userInterface === 'SWITCH') ? true : !!item.value;
+      }
+    });
+  }
+  handleAddExpression() {
+    const newItem = {
+      id: core.StringUtils.generateUUID(),
+      entityName: "",
+      fieldName: "",
+      description: "",
+      label: "Valor",
+      type: undefined,
+      expression: undefined,
+      operand: undefined,
+      paramVariable: false,
+      value: undefined,
+      systemConfig: null,
+      userConfig: null
+    };
+    this._group.items.push(newItem);
+    index.forceUpdate(this);
+    this.ezFilterGroupChange.emit(this.group);
+    this.changeHandler();
+    this.canAddExpression = false;
+  }
+  handleAddGroup() {
+    var _a;
+    const newGroup = {
+      id: core.StringUtils.generateUUID(),
+      items: [
+        {
+          id: core.StringUtils.generateUUID(),
+          entityName: "",
+          fieldName: "",
+          description: "",
+          label: "Valor",
+          type: undefined,
+          expression: undefined,
+          operand: undefined,
+          paramVariable: false,
+          value: undefined,
+          systemConfig: null,
+          userConfig: null
+        }
+      ],
+      childrenGroups: [],
+      operand: IExpressionItem.FilterGroupCondition.AND
+    };
+    this._group.childrenGroups = (_a = this._group.childrenGroups) !== null && _a !== void 0 ? _a : [];
+    this._group.childrenGroups.push(newGroup);
+    index.forceUpdate(this);
+    this.ezFilterGroupChange.emit(this.group);
+    this.changeHandler();
+  }
+  buildGroupStyle() {
+    return {
+      height: `${this.getDashedHeight()}px`,
+      marginTop: `${-(this.getDashedHeight()) + 20}px`,
+    };
+  }
+  handleConditionOperatorChange(newOperator) {
+    this._conditionOperator = newOperator;
+    this._group.operand = IExpressionItem.FilterGroupCondition[newOperator];
+    this.ezFilterGroupChange.emit(this._group);
+  }
+  confirmRemoveGroup(evt) {
+    this.onStopPropagation(evt);
+    utils.ApplicationUtils.confirm(this.getMessage("snkPersonalizedFilter.confirmGroup.title"), this.getMessage("snkPersonalizedFilter.confirmGroup.description"))
+      .then((canRemove) => {
+      if (canRemove) {
+        this.ezFilterGroupRemove.emit(this._group);
+      }
+    });
+  }
+  getTooltipMessageForOperator() {
+    const groupLevel = this.getDataGroupLevel();
+    if (groupLevel === this.FIRST_LEVEL && this._group.items.length === 1) {
+      return this.getMessage("snkPersonalizedFilter.operador.firstLevel");
+    }
+    if (this._conditionOperator === IExpressionItem.FilterGroupCondition.AND) {
+      return this.getMessage("snkPersonalizedFilter.operador.and");
+    }
+    else if (this._conditionOperator === IExpressionItem.FilterGroupCondition.OR) {
+      return this.getMessage("snkPersonalizedFilter.operador.or");
+    }
+  }
+  getDataGroupLevel() {
+    return this._element.getAttribute('data-group-level');
+  }
+  canAddGroup() {
+    const dataGroupLevel = Number(this.getDataGroupLevel() || this.FIRST_LEVEL);
+    return dataGroupLevel < LIMIT_GROUP_LEVEL;
+  }
+  isFirstLevel() {
+    return Boolean(this.getDataGroupLevel() === this.FIRST_LEVEL);
+  }
+  onStopPropagation(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+  handleMessageAddTooltip() {
+    if (this.isFirstLevel()) {
+      const allValidItems = this.group.items.every(item => {
+        if (!item.fieldName || !item.operand)
+          return false;
+        return item.paramVariable || !!item.value;
+      });
+      return allValidItems ? this.getMessage("snkPersonalizedFilter.info.labelAddNewExpression") : this.getMessage("snkPersonalizedFilter.info.labelDisabledAddExpressionButton");
+    }
+    else {
+      return this.canAddExpression ? this.getMessage("snkPersonalizedFilter.info.labelAddNewExpression") : this.getMessage("snkPersonalizedFilter.info.labelDisabledAddExpressionButton");
+    }
+  }
+  canChangeGroupCondition() {
+    const membersCount = this._group.items.length + this._group.childrenGroups.length;
+    return membersCount > 1;
+  }
+  render() {
+    const canAddGroup = this.canAddGroup();
+    return (index.h(index.Host, null, index.h("div", { class: !this.isFirstLevel() && this._showDashes ? 'dashes' : 'hidden', style: this.buildGroupStyle() }), index.h("div", { class: !this.isFirstLevel() && this._showDashes ? 'horizontal-dashes' : 'hidden' }), index.h("div", { class: 'ez-flex ez-flex--align-items-center' }, index.h("div", { class: 'snk-expression-group__container-condition ez-flex ez-flex-item--align-center ez-flex--align-items-center', "data-condition": this._conditionOperator, title: this.getTooltipMessageForOperator() }, index.h("label", { class: "ez-label ez-padding-right--medium ez-padding-left--medium ez-title--primary" }, "Condi\u00E7\u00E3o:"), index.h("div", null, index.h("ez-combo-box", Object.assign({ class: "snk-expression-group__container-option", canShowError: false, mode: "slim", suppressEmptyOption: true, enabled: this.canChangeGroupCondition(), value: this._conditionOperator, onEzChange: (evt) => this.handleConditionOperatorChange(evt.detail.value) }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `comboBoxConditions_level_${this.getDataGroupLevel()}` }), index.h("option", { value: IExpressionItem.FilterGroupCondition.AND }, "E"), index.h("option", { value: IExpressionItem.FilterGroupCondition.OR }, "OU")))), index.h("ez-button", { class: "ez-padding-right--medium ez-padding-left--medium", mode: "icon", iconName: "plus", size: "small", enabled: this.canAddExpression, title: this.handleMessageAddTooltip(), onClick: () => this.handleAddExpression() }), index.h("ez-button", { label: "Adicionar grupo", size: "small", enabled: canAddGroup, title: !canAddGroup ? this.getMessage('snkPersonalizedFilter.info.labelDisabledAddGroupButton', { LIMIT_GROUP_LEVEL: LIMIT_GROUP_LEVEL + 1 }) : '', onClick: () => this.handleAddGroup() }, index.h("ez-icon", { slot: "leftIcon", iconName: "plus" })), !this.isFirstLevel() && index.h("ez-button", { title: this.getMessage("snkPersonalizedFilter.info.labelDeleteExpression"), class: "ez-padding-left--medium", mode: "icon", iconName: "delete", size: "small", onClick: (evt) => this.confirmRemoveGroup(evt) })), index.h("div", { class: "ez-padding-top--small snk-expression-group__container-expression" }, index.h("div", { class: "ez-padding-top--small" }, this.renderExpressionItems())), index.h("div", { class: "ez-padding-top--small snk-expression-group__container-expression" }, index.h("div", { class: "ez-padding-top--small" }, this.renderGroups()))));
+  }
+  get _element() { return index.getElement(this); }
+  static get watchers() { return {
+    "group": ["watchGroup"]
+  }; }
+};
+SnkExpressionGroup.style = snkExpressionGroupCss;
+
+exports.snk_expression_group = SnkExpressionGroup;