@sankhyalabs/sankhyablocks 1.4.0-beta.7 → 1.4.0-beta.8

package/dist/collection/components/snk-form/subcomponents/snk-config-options/snk-config-options.js

@@ -0,0 +1,248 @@
+import { h, Host } from "@stencil/core";
+import { ApplicationContext } from '@sankhyalabs/core';
+import { formFieldBuilder } from "@sankhyalabs/ezui/dist/collection/utils";
+import { DataType, getConvertedValue } from "@sankhyalabs/core/dist/dataunit/metadata/DataType";
+import { CONFIG_EVENTS, DEFAULT_TYPE, VARS_BY_TYPE } from "../../../../lib/utils/constants";
+export class SnkConfigOptions {
+  constructor() {
+    /**
+     * Armazena as propriedades do campo
+     */
+    this.fieldConfig = {};
+  }
+  onConfigDefault(optionSelected) {
+    if (optionSelected != undefined) {
+      this._defaultType = optionSelected;
+      this.fieldConfig.defaultValue = {
+        type: this._defaultType
+      };
+      this.configOptionsChanged.emit(this.fieldConfig);
+    }
+  }
+  buildOptions() {
+    var _a, _b, _c;
+    const interfaceField = (_c = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.name)) === null || _c === void 0 ? void 0 : _c.userInterface;
+    return VARS_BY_TYPE.UserInterface[interfaceField];
+  }
+  enabledValueDefault() {
+    var _a, _b, _c;
+    const field = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.name);
+    if (((_c = field === null || field === void 0 ? void 0 : field.properties) === null || _c === void 0 ? void 0 : _c.allowDefault) === "true" && VARS_BY_TYPE.UserInterface.hasOwnProperty(field === null || field === void 0 ? void 0 : field.userInterface)) {
+      return true;
+    }
+    return false;
+  }
+  getFieldProperties(field) {
+    var _a;
+    if (field != undefined) {
+      return (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField(field);
+    }
+  }
+  getMessage(key, params) {
+    return this._application.messagesBuilder.getMessage(key, params);
+  }
+  getDefaultType() {
+    var _a;
+    return (_a = this.fieldConfig.defaultValue.type) !== null && _a !== void 0 ? _a : DEFAULT_TYPE.fixed;
+  }
+  getValidatedValue(fieldValue) {
+    var _a, _b;
+    if (fieldValue == undefined) {
+      return;
+    }
+    const field = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.name);
+    const dataType = field === null || field === void 0 ? void 0 : field.dataType;
+    if (dataType == undefined) {
+      return;
+    }
+    const value = dataType !== DataType.OBJECT && dataType !== DataType.DATE
+      && typeof fieldValue === "object" && "value" in fieldValue
+      ? fieldValue.value
+      : fieldValue;
+    return dataType === DataType.OBJECT ? JSON.stringify(value) : value;
+  }
+  onChange(evt) {
+    this.fieldConfig.defaultValue.value = this.getValidatedValue(evt === null || evt === void 0 ? void 0 : evt.detail);
+    this.configOptionsChanged.emit(this.fieldConfig);
+  }
+  onSearch(searchArgument) {
+    if (this._application != undefined && this.fieldConfig != undefined) {
+      return this._application.executeSearch(searchArgument, this.fieldConfig.name, this.dataUnit);
+    }
+  }
+  loadDataField() {
+    this._element.querySelectorAll("[data-field-name]")
+      .forEach((field) => {
+      var _a, _b, _c, _d;
+      field.enabled = ((_b = (_a = this._fieldProperties) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.allowDefault) === "true";
+      if (field.enabled) {
+        const value = this.fieldConfig.defaultValue.value;
+        if (value != undefined) {
+          const fieldName = field.dataset.fieldName;
+          const dataType = (_d = (_c = this.dataUnit) === null || _c === void 0 ? void 0 : _c.getField(fieldName)) === null || _d === void 0 ? void 0 : _d.dataType;
+          field.value = getConvertedValue(dataType, value);
+        }
+        field.addEventListener(CONFIG_EVENTS.fieldChanged, (evt) => {
+          return this.onChange(evt);
+        });
+        if (field.tagName === "EZ-SEARCH") {
+          field.optionLoader = (searchArgument) => {
+            return this.onSearch(searchArgument);
+          };
+        }
+      }
+    });
+  }
+  loadDefaultValue() {
+    var _a;
+    if (this.fieldConfig == undefined) {
+      this._defaultType = DEFAULT_TYPE.fixed;
+      this.fieldConfig = {
+        defaultValue: {
+          type: this._defaultType
+        }
+      };
+    }
+    else if (((_a = this.fieldConfig.defaultValue) === null || _a === void 0 ? void 0 : _a.type) == undefined) {
+      this._defaultType = DEFAULT_TYPE.fixed;
+      this.fieldConfig.defaultValue = {
+        type: this._defaultType
+      };
+    }
+    else {
+      this._defaultType = this.fieldConfig.defaultValue.type;
+    }
+  }
+  getEnabledByProperty(property) {
+    const properties = this._fieldProperties;
+    if (properties != undefined && properties[property] === true) {
+      return false;
+    }
+    return true;
+  }
+  getValueByProperty(property) {
+    const properties = this._fieldProperties;
+    if (properties != undefined && properties[property] === true) {
+      return true;
+    }
+    return this.fieldConfig[property];
+  }
+  componentWillLoad() {
+    var _a;
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this.loadDefaultValue();
+    this._fieldProperties = this.getFieldProperties((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.name);
+  }
+  componentDidRender() {
+    this.loadDataField();
+  }
+  render() {
+    var _a, _b, _c, _d;
+    return (h(Host, null, h("div", { id: this.idConfig }, h("div", { class: "ez-row ez-padding--medium" }, h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-text-input", { label: this.getMessage("snkConfigOptions.label.nameField"), value: (_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.label, onEzChange: (evt) => { this.fieldConfig.label = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-combo-box", { label: this.getMessage("snkConfigOptions.label.typeValueDefault"), suppressEmptyOption: true, enabled: ((_c = (_b = this._fieldProperties) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.allowDefault) === "true", onEzChange: (evt) => { var _a; return this.onConfigDefault((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value); }, value: this.getDefaultType() }, h("option", { value: DEFAULT_TYPE.fixed }, this.getMessage("snkConfigOptions.options.valueFixed")), h("option", { value: DEFAULT_TYPE.variable }, this.getMessage("snkConfigOptions.options.variable")))), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, this._defaultType === DEFAULT_TYPE.variable ?
+      h("ez-combo-box", { label: this.getMessage("snkConfigOptions.label.valueDefault"), enabled: this.enabledValueDefault(), onEzChange: (evt) => { var _a; this.fieldConfig.defaultValue.value = (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value; this.configOptionsChanged.emit(this.fieldConfig); }, value: this.fieldConfig.defaultValue.value, options: this.buildOptions() })
+      :
+        ((_d = this._fieldProperties) === null || _d === void 0 ? void 0 : _d.userInterface) &&
+          formFieldBuilder({
+            descriptor: this._fieldProperties,
+            config: this.fieldConfig
+          }).$children$)), h("div", { class: "ez-row ez-padding--medium config-options__switch-row" }, h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: "switch", label: this.getMessage("snkConfigOptions.label.clearDuplicate"), value: this.fieldConfig.cleanOnCopy, onEzChange: (evt) => { this.fieldConfig.cleanOnCopy = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: "switch", label: this.getMessage("snkConfigOptions.label.requiredField"), enabled: this.getEnabledByProperty("required"), value: this.getValueByProperty("required"), onEzChange: (evt) => { this.fieldConfig.required = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: "switch", label: this.getMessage("snkConfigOptions.label.protectedField"), enabled: this.getEnabledByProperty("readOnly"), value: this.getValueByProperty("readOnly"), onEzChange: (evt) => { this.fieldConfig.readOnly = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } }))))));
+  }
+  static get is() { return "snk-config-options"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-config-options.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-config-options.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "fieldConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IFieldConfig",
+          "resolved": "IFieldConfig",
+          "references": {
+            "IFieldConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-form/ez-form"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Armazena as propriedades do campo"
+        },
+        "defaultValue": "{} as IFieldConfig"
+      },
+      "idConfig": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Armazena a chave de op\u00E7\u00F5es de configura\u00E7\u00E3o"
+        },
+        "attribute": "id-config",
+        "reflect": true
+      },
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Reposit\u00F3rio de dados respons\u00E1vel por controlar a manipula\u00E7\u00E3o dos dados"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_defaultType": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "configOptionsChanged",
+        "name": "configOptionsChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado ao realizar alguma altera\u00E7\u00E3o nos campos"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/snk-form/subcomponents/snk-field-config/snk-field-config.css

@@ -0,0 +1,164 @@
+:host {
+  /* dimensions */
+  /*@doc Define a altura do componente.*/
+  --snk-field-config--height: 42px;
+  /*@doc Define a largura do componente.*/
+  --snk-field-config--width: 100%;
+  /*@doc Define a largura do slot que contém o ícone.*/
+  --snk-field-config__icon--width: 48px;
+  /*@doc Define a altura do componente em modo "slim".*/
+  --snk-field-config--height--slim: 32px;
+
+  /* general */
+  /*@doc Define o raio da borda do input do componente.*/
+  --snk-field-config--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define o tamanho da fonte do input e label do componente.*/
+  --snk-field-config--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
+  --snk-field-config--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do label do componente.*/
+  --snk-field-config--font-weight: var(--text-weight--medium, 400);
+  /*@doc Define a cor da fonte do input e label do componente.*/
+  --snk-field-config--color: var(--title--primary, #000);
+
+  /* input */
+  /*@doc Define a cor de fundo do input.*/
+  --snk-field-config__input--background-color: var(--background--medium, #e0e0e0);
+  /*@doc Define o estilo da borda do input.*/
+  --snk-field-config__input--border: var(--border--medium, 2px solid);
+  /*@doc Define a cor da borda do input.*/
+  --snk-field-config__input--border-color: var(--background--xlight, #fff);
+  /*no modo normal usamos a borda com a mesma cor do bg*/
+  --snk-field-config__required--color: var(--color--error, #FF0000);
+
+   /*no modo normal usamos a borda com a mesma cor do bg*/
+   --snk-field-config__transition--visibility: var(--transition, 0.2s linear);
+   --snk-field-config__transition--opacity: var(--transition, 0.15s linear);
+
+  /***************
+  host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+
+  /*public*/
+  width: var(--snk-field-config--width);
+}
+
+.field-config {
+  /*private*/
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+
+  /*public*/
+  padding-left: var(--space--medium, 6px);
+  font-weight: var(--snk-field-config--font-weight);
+  height: var(--snk-field-config--height);
+  border-radius: var(--snk-field-config--border-radius);
+  font-family: var(--snk-field-config--font-family);
+  font-size: var(--snk-field-config--font-size);
+  border: var(--snk-field-config__input--border);
+  border-color: var(--snk-field-config__input--border-color);
+  background-color: var(--snk-field-config__input--background-color);
+  color: var(--snk-field-config--color);
+}
+
+.field-config__config-popover {
+  width: 40px;
+  margin-left: auto;
+  z-index: var(--more-visible, 2);
+}
+
+.field-config__required-label {
+  padding-left: var(--space--extra-small, 3px);
+
+  /*public*/
+  color: var(--snk-field-config__required--color);
+}
+
+.field-config__add {
+  display: flex;
+  margin-left: auto;
+
+  visibility:hidden;
+  opacity:0;
+  transition: visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity);
+}
+
+
+.field-config__options {
+  display: flex;
+  margin-left: auto;
+
+  visibility:hidden;
+  opacity:0;
+  transition: visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity);
+}
+
+.field-config__options--is-active {
+  display: flex;
+  visibility:visible;
+  opacity:1;
+}
+
+.field-config__remove-icon {
+  margin-right: -15px;
+}
+
+.field-config:hover .field-config__options {
+  display: flex;
+  visibility:visible;
+  opacity:1;
+}
+
+.field-config:hover .field-config__add {
+  visibility:visible;
+  opacity:1;
+}
+
+
+.field-config__draggable {
+  padding-right: var(--space--small, 6px);
+}
+
+.field-config__config-outer-arrow {
+  background-color: var(--color--secondary-200);
+  clip-path: polygon(50% 0, 90% 100%, 10% 100%);
+  border-radius: 0.25em 0 0 0;
+  width: 30px;
+  height: 15px;
+  padding-top: 3px;
+  border-bottom: 1px solid #FFFFFF;
+}
+
+.field-config__config-inner-arrow {
+  background-color: #FFFFFF;
+  clip-path: polygon(50% 0, 90% 100%, 10% 100%);
+  border-radius: 0.25em 0 0 0;
+  width: 30px;
+  height: 15px;
+}
+
+.ez-box__container ez-collapsible-box {
+  --snk-collapsible-box__header--padding-left: 6px;
+}
+
+ez-icon {
+  /*public*/
+  --snk-icon--color: var(--snk-field-config--color)
+}
+
+ez-popover {
+  --snk-popover__box--background-color: transparent;
+  --snk-popover__box--box-shadow: none
+}
+
+.field-config__options ez-button {
+  --snk-button--background-color: transparent;
+  --snk-button--focus--border: none;
+  --snk-button--focus--box-shadow: none;
+}

package/dist/collection/components/snk-form/subcomponents/snk-field-config/snk-field-config.js

@@ -0,0 +1,140 @@
+import { ApplicationContext } from "@sankhyalabs/core";
+import { h, Host } from "@stencil/core";
+import { ACTION_CONFIG } from "../../../../lib/utils/constants";
+export class SnkFieldConfig {
+  constructor() {
+    /**
+     * Define se o popover de configuração está ativo.
+     */
+    this.isConfigActive = false;
+    /**
+     * Define se o componente está em modo de inserção
+     */
+    this.modeInsertion = true;
+  }
+  handleAction(evt, type) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    const field = this.fieldConfig;
+    if (type !== ACTION_CONFIG.configuration) {
+      field.group = undefined;
+    }
+    this.ezClickIcon.emit({ field, type });
+  }
+  /**
+   * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
+   * através de um pequeno modulo na estrutura da aplicação:
+   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
+   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-form.msg.ts"
+   */
+  getMessage(key) {
+    return this._application.messagesBuilder.getMessage(key, {});
+  }
+  componentWillLoad() {
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+  }
+  render() {
+    if (this.fieldConfig == undefined) {
+      return;
+    }
+    return (h(Host, null, h("div", { class: "field-config" }, h("div", { class: "field-config__draggable" }, h("ez-icon", { iconName: "drag-indicator", size: "small" })), h("div", null, this.fieldConfig.label, this.fieldConfig.required && h("span", { class: "field-config__required-label" }, "*")), this.modeInsertion ?
+      h("div", { class: "field-config__add" }, h("ez-button", { onClick: (evt) => this.handleAction(evt, ACTION_CONFIG.add), mode: "icon", class: "ez-button--tertiary", iconName: "plus", size: "large", title: this.getMessage("snkFieldConfig.titleAdd") })) :
+      h("div", { class: "field-config__options" + (this.isConfigActive ? " field-config__options--is-active" : " ") }, h("ez-button", { mode: "icon", class: "ez-button--tertiary field-config__remove-icon", onClick: (evt) => this.handleAction(evt, ACTION_CONFIG.remove), iconName: "minus", size: "large", title: this.getMessage("snkFieldConfig.titleRemove") }), h("ez-button", { id: "buttonConfig_" + this.fieldConfig.name, mode: "icon", class: "ez-button--tertiary", onClick: (evt) => this.handleAction(evt, ACTION_CONFIG.configuration), iconName: this.isConfigActive ? "chevron-up" : "settings-inverted", size: "large", title: this.getMessage("snkFieldConfig.titleConfigurations") }))), this.isConfigActive && h("div", { class: "field-config__config-popover" }, h("div", { class: "field-config__config-outer-arrow" }, h("div", { class: "field-config__config-inner-arrow" })))));
+  }
+  static get is() { return "snk-field-config"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-field-config.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-field-config.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "isConfigActive": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Boolean",
+          "resolved": "Boolean",
+          "references": {
+            "Boolean": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o popover de configura\u00E7\u00E3o est\u00E1 ativo."
+        },
+        "defaultValue": "false"
+      },
+      "fieldConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IFieldConfig",
+          "resolved": "IFieldConfig",
+          "references": {
+            "IFieldConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-form/ez-form"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Armazena as propriedades do campo"
+        }
+      },
+      "modeInsertion": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente est\u00E1 em modo de inser\u00E7\u00E3o"
+        },
+        "attribute": "mode-insertion",
+        "reflect": true,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezClickIcon",
+        "name": "ezClickIcon",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado ao pressionar button icon(onEzClickIcon)"
+        },
+        "complexType": {
+          "original": "Object",
+          "resolved": "Object",
+          "references": {
+            "Object": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+}