@sankhyalabs/sankhyablocks 9.0.1-rc.1 → 9.1.0-dev.1

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

@@ -1,219 +0,0 @@
-:host {
-  /*@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-slim--height: 32px;
-  /*@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);
-  /*@doc Define o espaçamento interno esquerdo do componente.*/
-  --snk-field-config--padding-left: var(--space--medium, 6px);
-  /*@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);
-  /*@doc Define no modo normal a borda com a mesma cor do bg.*/
-  --snk-field-config__required--color: var(--color--error, #FF0000);
-  /*@doc Define o espeçamento entre os elementos internos do label.*/
-  --snk-field-config__label--gap: var(--space--extra-small, 3px);
-  /*@doc Define o efeito de visualização do componente.*/
-  --snk-field-config__transition--visibility: var(--transition, 0.2s linear);
-  /*@doc Define o efeito de opacidade do componente.*/
-  --snk-field-config__transition--opacity: var(--transition, 0.15s linear);
-  /*@doc Define o z-index do popover.*/
-  --snk-field-config__config-popover--z-index: var(--more-visible, 2);
-  /*@doc Define a cor de fundo da seta externa do popover.*/
-  --snk-field-config__config-outer-arrow--background-color: var(--color--secondary-200, #D2D3DA);
-  /*@doc Define o espaçamento interno direito do componente arrastável.*/
-  --snk-field-config__draggable--padding-right: var(--space--small, 6px);
-
-  /***************
-  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(--snk-field-config--padding-left);
-  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 {
-  /*private*/
-  width: 40px;
-  margin-left: auto;
-
-  /*public*/
-  z-index: var(--snk-field-config__config-popover--z-index);
-}
-
-.field-config__label {
-  /*private*/
-  display: flex;
-  flex-direction: row-reverse;
-
-  /*public*/
-  line-height: calc(var(--snk-field-config--font-size) + 2px);
-  gap: var(--snk-field-config__label--gap);
-}
-
-.field-config__label-text {
-  /*private*/
-  overflow: hidden;
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  hyphens: auto;
-  height: auto;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  display: -webkit-box;
-  -o-text-overflow: ellipsis;
-  text-overflow: ellipsis;
-  word-break: break-word;
-}
-
-.field-config__label-required {
-  /*public*/
-  color: var(--snk-field-config__required--color);
-}
-
-.field-config__add {
-  /*private*/
-  display: flex;
-  margin-left: auto;
-  visibility:hidden;
-  opacity:0;
-
-  /*public*/
-  transition: visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity);
-}
-
-
-.field-config__options {
-  /*private*/
-  display: flex;
-  margin-left: auto;
-  visibility:hidden;
-  opacity:0;
-
-  /*public*/
-  transition: visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity);
-}
-
-.field-config__options--is-active {
-  /*private*/
-  display: flex;
-  visibility:visible;
-  opacity:1;
-}
-
-.field-config__remove-icon {
-  /*private*/
-  margin-right: -15px;
-}
-
-.field-config:hover .field-config__options {
-  /*private*/
-  display: flex;
-  visibility:visible;
-  opacity:1;
-}
-
-.field-config:hover .field-config__add {
-  /*private*/
-  visibility:visible;
-  opacity:1;
-}
-
-
-.field-config__draggable {
-  /*public*/
-  padding-right: var(--snk-field-config__draggable--padding-right);
-}
-
-.field-config__config-outer-arrow {
-  /*private*/
-  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;
-
-  /*public*/
-  background-color: var(--snk-field-config__config-outer-arrow--background-color);
-}
-
-.field-config__config-inner-arrow {
-  /*private*/
-  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 {
-  /*private*/
-  --snk-collapsible-box__header--padding-left: 6px;
-}
-
-ez-icon {
-  /*public*/
-  --snk-icon--color: var(--snk-field-config--color)
-}
-
-ez-popover {
-  /*private*/
-  --snk-popover__box--background-color: transparent;
-  --snk-popover__box--box-shadow: none
-}
-
-.field-config__options ez-button {
-  /*private*/
-  --snk-button--background-color: transparent;
-  --snk-button--focus--border: none;
-  --snk-button--focus--box-shadow: none;
-}
-
-@media screen and (min-width: 1200px) {
-  .field-config__label {
-    /*private*/
-    flex-direction: row;
-  }
-}

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

@@ -1,184 +0,0 @@
-import { ElementIDUtils } from "@sankhyalabs/core";
-import { h, Host } from "@stencil/core";
-import { ACTION_CONFIG } from "../../../../lib/utils/constants";
-export class SnkFieldConfig {
-  constructor() {
-    this._lang = "pt"; // Controla qual idioma será usado para definir a regras de hifenização.
-    this.isConfigActive = false;
-    this.fieldConfig = undefined;
-    this.modeInsertion = true;
-    this.dataUnit = undefined;
-    this.messagesBuilder = undefined;
-  }
-  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.messagesBuilder.getMessage(key, {});
-  }
-  isRequired() {
-    var _a, _b;
-    const fieldMD = this.dataUnit && this.dataUnit.getField((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.name);
-    return (fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.required) === true || ((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.required) === true;
-  }
-  componentDidLoad() {
-    ElementIDUtils.addIDInfo(this._element);
-  }
-  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", { class: "field-config__label" }, h("span", { class: "field-config__label-text", lang: this._lang, title: this.fieldConfig.label }, this.fieldConfig.label), this.isRequired() && h("span", { class: "field-config__label-required" }, "*")), 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/utils/form/interfaces"
-            }
-          }
-        },
-        "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"
-      },
-      "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, controla a manipula\u00E7\u00E3o dos dados."
-        }
-      },
-      "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."
-        }
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "ezClickIcon",
-        "name": "ezClickIcon",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitido ao clicar no \u00EDcone do bot\u00E3o."
-        },
-        "complexType": {
-          "original": "Object",
-          "resolved": "Object",
-          "references": {
-            "Object": {
-              "location": "global"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "_element"; }
-}