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

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"; }
-}

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

@@ -1,323 +0,0 @@
-@keyframes activate {
-  0% {
-    clip-path: inset(calc(100% - 3px) 50% 0px 50%);
-  }
-
-  100% {
-    clip-path: inset(calc(100% - 3px) 0px 0px 0px);
-  }
-}
-
-:host {
-  /*@doc Contém o ícone de voltar para a aba anterior.*/
-  --snk-tab-config--backward-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
-  /*@doc Contém o ícone de avançar para a aba posterior.*/
-  --snk-tab-config--forward-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
-  /*@doc Define a cor de fundo da barra do componente.*/
-  --snk-tab-config__lower-bar--background-color: var(--color--disable-primary, #e5eaf0);
-  /*@doc Define a borda da barra do componente.*/
-  --snk-tab-config__lower-bar--border: 2px solid var(--color--disable-primary, #e5eaf0);
-  /*@doc Define a cor do texto do componente.*/
-  --snk-tab-config__tab--color: var(--text--primary, #626e82);
-  /*@doc Define a fonte do texto do componente.*/
-  --snk-tab-config__tab--font-family: var(--font-pattern, "Roboto");
-  /*@doc Define o tamanho do texto do componente.*/
-  --snk-tab-config__tab--font-size: var(--title--small, 14px);
-  /*@doc Define o espaçamento interno do componente.*/
-  --snk-tab-config__tab--padding: var(--space--small, 6px) var(--space--medium, 12px);
-  /*@doc Define a cor do texto ativo do componente.*/
-  --snk-tab-config__tab-is-active--color: var(--color--primary, #008561);
-  /*@doc Define a cor no hover do texto do componente.*/
-  --snk-tab-config__tab-hover--color: var(--color--secondary, #383c45);
-  /*@doc Define a borda no foco do componente.*/
-  --snk-tab-config__tab-is-focused--border: 1px dashed var(--color--primary, #008561);
-  /*@doc Define a sombra do label do componente.*/
-  --snk-tab-config__tab-label--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
-  /*@doc Define o espaçamento externo inferior do label do componente.*/
-  --snk-tab-config__tab-label--margin-bottom: var(--space--extra-small, 3px);
-  /*@doc Define a cor do icone do botão de nova aba do componente.*/
-  --snk-tab-config__new-button-icon--color: var(--color--secondary-700, #1C1D22);
-  /*@doc Define a cor de fundo dos botões de navegação na barra do componente.*/
-  --snk-tab-config__forward-button--background-color: var(--text--primary, #626e82);
-  /*@doc Define a cor de fundo no hover dos botões de navegação na barra do componente.*/
-  --snk-tab-config__forward-button-hover--background-color: var(--color--primary, #008561);
-  /*@doc Define o espaçamento interno direito do icone esquerdo do componente.*/
-  --snk-tab-config__left-icon--padding-right: var(--space--small, 6px);
-  /*@doc Define a cor do icone esquerdo do componente.*/
-  --snk-tab-config__left-icon--color: var(--text--disable, #AFB6C0);
-  /*@doc Define a cor do label desabilitado do componente.*/
-  --snk-tab-config__tab-label-disabled--color: var(--text--disable, #AFB6C0);
-  /*@doc Define o espaçamento externo esquerdo no slot do componente.*/
-  --snk-tab-config__slot--margin-left: var(--space--small, 6px);
-
-  /*private*/
-  display: flex;
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.tab-config__scroll {
-  /*private*/
-  display: flex;
-  width: 100%;
-  scroll-behavior: smooth;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.tab-config__lower-bar {
-  /*private*/
-  position: absolute;
-  left: 0%;
-  right: 0%;
-  top: 91%;
-  bottom: 0%;
-  border-radius: 2px;
-
-  /*public*/
-  background-color: var(--snk-tab-config__lower-bar--background-color);
-  border: var(--snk-tab-config__lower-bar--border);
-}
-
-.tab-config__tab {
-  /*private*/
-  display: flex;
-  border: none;
-  background-color: unset;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  min-width: fit-content;
-
-  /*public*/
-  color: var(--snk-tab-config__tab--color);
-  font-family: var(--snk-tab-config__tab--font-family);
-  font-size: var(--snk-tab-config__tab--font-size);
-  padding: var(--snk-tab-config__tab--padding);
-}
-
-.tab-config__tab:focus,
-.tab-config__forward-button,
-.tab-config__backward-button {
-  /*private*/
-  outline: none;
-}
-
-.tab-config__tab--is-active {
-  /*private*/
-  position: relative;
-
-  /*public*/
-  color: var(--snk-tab-config__tab-is-active--color);
-}
-
-.tab-config__tab:hover {
-  /*public*/
-  color: var(--snk-tab-config__tab-hover--color);
-}
-
-.tab-config__tab--is-active:hover {
-  /*public*/
-  color: var(--snk-tab-config__tab-is-active--color);
-}
-
-.tab-config__tab--is-active::after {
-  /*private*/
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  clip-path: inset(calc(100% - 3px) 0px 0px 0px);
-  animation: activate 0.25s ease-in-out;
-
-  /*public*/
-  background-color: var(--snk-tab-config__tab-is-active--color);
-}
-
-.tab-config__tab--is-focused {
-  /*public*/
-  border: var(--snk-tab-config__tab-is-focused--border);
-}
-
-.tab-config__tab-label {
-  /*private*/
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  /*public*/
-  text-shadow: var(--snk-tab-config__tab-label--text-shadow);
-  margin-bottom: var(--snk-tab-config__tab-label--margin-bottom);
-}
-
-.tab-config__forward-button,
-.tab-config__backward-button {
-  /*private*/
-  position: absolute;
-  z-index: 1;
-  display: flex;
-  box-sizing: border-box;
-  padding: 0px;
-  top: 0px;
-  right: 0px;
-  width: 16px;
-  height: 100%;
-  border: none;
-  background-color: unset;
-  cursor: pointer;
-  justify-content: center;
-  align-items: center;
-}
-
-.tab-config__new-button {
-  /*private*/
-  position: absolute;
-  z-index: 1;
-  display: flex;
-  box-sizing: border-box;
-  padding: 0px;
-  top: 0px;
-  right: 0px;
-  height: 100%;
-  border: none;
-  background-color: unset;
-  cursor: pointer;
-  justify-content: center;
-  align-items: center;
-}
-
-.tab-config__new-button ez-icon {
-  /*public*/
-  --ez-icon--color: var(--snk-tab-config__new-button-icon--color);
-}
-
-.tab-config__backward-button {
-  /*private*/
-  left: 0px;
-  box-shadow: 10px 10px 5px 5px white;
-  background: white;
-}
-
-.tab-config__forward-button {
-  /*private*/
-  box-shadow: 10px 10px 5px 20px white;
-  background: white;
-}
-
-.tab-config__forward-button::after,
-.tab-config__backward-button::after {
-  /*private*/
-  content: '';
-  display: flex;
-  width: 10px;
-  height: 16px;
-
-  /*public*/
-  background-color: var(--snk-tab-config__forward-button--background-color);
-}
-
-.tab-config__forward-button::after {
-  /*public*/
-  -webkit-mask-image: var(--snk-tab-config--forward-icon);
-  mask-image: var(--snk-tab-config--forward-icon);
-}
-
-.tab-config__backward-button::after {
-  /*public*/
-  -webkit-mask-image: var(--snk-tab-config--backward-icon);
-  mask-image: var(--snk-tab-config--backward-icon);
-}
-
-.tab-config__forward-button:hover::after,
-.tab-config__backward-button:hover::after {
-  /*public*/
-  background-color: var(--snk-tab-config__forward-button-hover--background-color);
-}
-
-.tab-config__new-button:hover ez-icon {
-  /*public*/
-  --ez-icon--color: var(--snk-tab-config__forward-button-hover--background-color);
-}
-
-.tab-config__hidden {
-  /*private*/
-  display: none;
-}
-
-.tab-config__scroll::-webkit-scrollbar {
-  /*private*/
-  display: none;
-}
-
-.tab-config__left-icon {
-  /*public*/
-  padding-right: var(--snk-tab-config__left-icon--padding-right);
-  --ez-icon--color: var(--snk-tab-config__left-icon--color);
-}
-
-.tab-config__left-icon--eye-off {
-  /*public*/
-  --ez-icon--color: var(--snk-tab-config__left-icon--color);
-}
-
-.tab-config__right-icon {
-  /*private*/
-  visibility: hidden;
-
-  /*public*/
-  padding-left: var(--snk-tab-config__left-icon--padding-right);
-}
-
-.tab-config__tab:hover .tab-config__right-icon {
-  /*private*/
-  visibility: visible;
-}
-
-.tab-config__tab--is-active .tab-config__right-icon {
-  /*private*/
-  visibility: visible;
-
-  /*public*/
-  --ez-icon--color: var(--snk-tab-config__tab-is-active--color);
-}
-
-.tab-config__tab:hover .tab-config__right-icon {
-  /*public*/
-  --ez-icon--color: var(--snk-tab-config__tab-hover--color);
-}
-
-.tab-config__tab--is-active:hover .tab-config__right-icon {
-  /*public*/
-  --ez-icon--color: var(--snk-tab-config__tab-is-active--color);
-}
-
-.tab-config__actions-button {
-  /*private*/
-  --ez-actions-button__btn-action--min-width: 100px;
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility 1s linear, opacity 0.3s linear;
-}
-
-.tab-config__tab:hover .tab-config__actions-button {
-  /*private*/
-  visibility: visible;
-  opacity: 1;
-  transition: visibility 0.2s linear, opacity 0.10s linear;
-}
-
-[data-draggable-element] {
-  /*private*/
-  cursor: grab;
-}
-
-.tab-config__tab-label-disabled {
-  /*public*/
-  color: var(--snk-tab-config__tab-label-disabled--color);
-}
-
-.tab-config__slot {
-  /*public*/
-  margin-left: var(--snk-tab-config__slot--margin-left);
-}