@sankhyalabs/sankhyablocks 1.4.0-beta.1 → 1.4.0-beta.11

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

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

@@ -0,0 +1,185 @@
+:host {
+  /* Título */
+  /*@doc Define o estilo da mensagem exibida no título.*/
+  --snk-form-config__title--font-pattern: var(--font-pattern, "Roboto");
+  /*@doc Define o peso do título.*/
+  --snk-form-config__title--weight--large: var(--text-weight--large, 600);
+  
+  /*private*/
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  /*public*/
+  z-index: var(--more-visible, 2);
+  background-color: var(--background--xlight); 
+}
+
+.form-config__title {
+  display: flex;
+  margin: 0;
+  line-height: 1.3;
+
+  /*public*/
+  font-family: var(--snk-form-config__title--font-pattern);
+  font-weight: var(--snk-form-config__title--weight--large);
+}
+
+.form-config__header-container {
+  display: flex;
+}
+
+.form-config__field-container {
+  width: 32%;
+  padding: 6px;
+}
+
+.form-config__hide-content {
+  display: none;
+} 
+
+ez-icon .left-icon {
+  --ez-icon--color: var(--text--disable);
+}
+
+.ez-box__label-counter {
+  font-weight: var(--text-weight--extra-small);
+  margin-top: -7px;  
+}
+
+.form-config__btn-options {
+  --ez-button--min-width: 300px;
+  --ez-button--background-color: #FFFFFF;
+}
+
+[data-draggable-parent] {
+  position: relative;
+}
+
+.form-config__field-config--selected {
+  position: static;
+}
+
+.form-config__field-config--dragged .draggable-mirror {
+  z-index: var(--more-visible, 2);
+}
+
+.form-config__config-options {
+  position: relative;
+  margin-top: -3px;
+  min-width: 100%;
+  z-index: 1;
+}
+
+.form-config__tab-container,
+.form-config__fields-available {
+  position: relative;
+  height: 100%;
+  max-height: calc(100vh - 92px);
+}
+
+.form-config__tab-container .ez-box__container,
+.form-config__fields-available .ez-box__container {
+  align-content: flex-start;
+  height: 100%;
+}
+
+.form-config__fields-available [data-draggable-parent] {
+  align-content: flex-start;
+  overflow-y: auto;
+  height: 100%;
+  max-height: calc(100% - 122px);
+}
+
+.form-config__tab-content {
+  align-content: flex-start;
+  overflow-y: auto;
+  height: auto;
+  max-height: calc(100% - 128px);
+}
+
+[data-draggable-element] {
+  cursor: grab;
+}
+
+.form-config__actions-button {
+  --ez-actions-button__btn-action--min-width: 250px;
+}
+
+.form-config__add-group {
+  position: relative;
+  min-height: 120px;
+  margin-bottom: 10px;
+}
+
+.form-config__add-group-container {
+  position: absolute;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: var(--border--radius-medium, 12px);
+  background-color: var(--background--medium, #d2dce9);
+  padding: var(--space--small, 6px);
+}
+
+.form-config__add-group-content {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border: 2px dashed var(--color-strokes, #DCE0E8);
+  border-radius: var(--border--radius-small, 6px);
+}
+
+.form-config__add-group-label {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: var(--space--large, 24px);
+}
+
+.form-config__btn-add-group {
+  position: relative;
+  padding: var(--space--large, 24px) var(--space--medium, 12px) 0;
+}
+
+.form-config__btn-add-group-container {
+  padding: var(--space--medium, 12px);
+  border-radius: var(--border--radius-medium, 12px);
+  border: 2px solid var(--color-strokes, #DCE0E8);
+  background-color: var(--background--body, #fafcff);
+}
+
+.form-config__left-icon--eye-off{
+  padding-top: var(--space--medium, 8px);
+}
+
+ez-collapsible-box.draggable-mirror {
+  display: table;
+  background-color: #FFFFFF;
+}
+
+ez-collapsible-box{
+  margin-bottom: 10px;
+}
+
+@media screen and (min-width: 480px) {
+  .form-config__field-config--selected .ez-flex.form-config__config-options {
+    min-width: calc(300% + 12px);
+  }
+
+  .form-config__field-config--selected:nth-child(3n+2) .ez-flex.form-config__config-options {
+    transform: translate(calc(100% / 3 * -1));
+  }
+  
+  .form-config__field-config--selected:nth-child(3n+3) .ez-flex.form-config__config-options {
+    transform: translate(calc(100% / 3 * -2));
+  }
+}