@sankhyalabs/sankhyablocks 10.1.0-dev.51 → 10.1.0-dev.53

package/dist/collection/components/snk-dynaform-form-config/snk-dynaform-fields-selector/snk-dynaform-fields-selector.js

@@ -0,0 +1,171 @@
+import { h, Host } from '@stencil/core';
+import Sortable from 'sortablejs';
+import { ID_AVAILABLE_FIELDS } from '../FormConfigHelper';
+import { ArrayUtils } from '@sankhyalabs/core';
+export class SnkDynaformFieldsSelector {
+  constructor() {
+    this.availableFields = [];
+    this.dataUnit = undefined;
+    this.filterTerm = '';
+    this.messagesBuilder = undefined;
+  }
+  onAddField(evt) {
+    const newIndex = evt.newIndex;
+    const item = evt.item;
+    const fieldConfig = item.fieldConfig;
+    const updatedFields = this.addItemInPosition(newIndex, fieldConfig);
+    this.fieldListChanged.emit(updatedFields);
+  }
+  addItemInPosition(newIndex, fieldConfig) {
+    return [
+      ...this.availableFields.slice(0, newIndex),
+      fieldConfig,
+      ...this.availableFields.slice(newIndex),
+    ];
+  }
+  onRemoveField(evt) {
+    const item = evt.item;
+    const fieldName = item.fieldConfig.name;
+    const updatedFields = [...this.availableFields.filter(f => f.name !== fieldName)];
+    this.fieldListChanged.emit(updatedFields);
+    requestAnimationFrame(() => item.remove());
+    return;
+  }
+  renderFields() {
+    const fieldsToShow = ArrayUtils.applyStringFilter(this.filterTerm, this.availableFields);
+    return fieldsToShow.map(field => (h("snk-dynaform-field-item", { key: field.name, dataUnit: this.dataUnit, fieldConfig: field, messagesBuilder: this.messagesBuilder })));
+  }
+  getCountText() {
+    if (!this.availableFields.length)
+      return this.getMessage('snkFormConfig.availableFields.labelNoFields');
+    if (this.availableFields.length === 1)
+      return this.getMessage('snkFormConfig.availableFields.labelOneField');
+    return `${this.availableFields.length} ${this.getMessage('snkFormConfig.availableFields.labelAvailableFields')}`;
+  }
+  initializeDraggableContainer() {
+    new Sortable(this.el.querySelector(`#${ID_AVAILABLE_FIELDS}`), {
+      group: 'fields',
+      direction: 'vertical',
+      ghostClass: 'ghost',
+      animation: 15,
+      onAdd: (evt) => this.onAddField(evt),
+      onRemove: (evt) => this.onRemoveField(evt),
+    });
+  }
+  getMessage(key, params) {
+    var _a;
+    return (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, params);
+  }
+  componentDidRender() {
+    this.initializeDraggableContainer();
+  }
+  render() {
+    return (h(Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, h("span", { class: 'fields-label ez-padding-bottom--small' }, this.getMessage('snkFormConfig.availableFields.title')), h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: this.getMessage('snkFormConfig.availableFields.labelSearchField'), onEzChange: evt => this.filterTerm = evt.detail }), h("span", { class: 'fields-count' }, this.getCountText()), h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { id: ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
+  }
+  static get is() { return "snk-dynaform-fields-selector"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-dynaform-fields-selector.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-dynaform-fields-selector.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "availableFields": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IFieldConfig[]",
+          "resolved": "IFieldConfig[]",
+          "references": {
+            "IFieldConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/src/utils/interfaces/IFieldConfig"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "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": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "filterTerm": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "fieldListChanged",
+        "name": "fieldListChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IFieldConfig[]",
+          "resolved": "IFieldConfig[]",
+          "references": {
+            "IFieldConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/src/utils/interfaces/IFieldConfig"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,66 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  font-family: var(--font-pattern, "Roboto");
+  background: white;
+  color: #2b3a54;
+  --snk-form-config-container-height: calc(100vh - 95px);
+  outline: none;
+}
+
+.form-config-body {
+  height: var(--snk-form-config-container-height);
+  overflow: hidden;
+  padding-top: var(--space--12, 12px);
+}
+
+.form-config-layout {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  gap: 20px;
+  align-items: stretch;
+}
+
+.main-editing-area {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+  gap: 12px;
+}
+
+.main-editing-area > snk-dynaform-fields-layout {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  flex-direction: row;
+}
+
+.main-editing-area > snk-dynaform-guides-configurator {
+  flex: 0 0 auto;
+}
+
+.main-fields-section {
+  flex: 0 0 40vh;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+
+.guide-header {
+  display: flex;
+  width: 100%;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #dce0e8; /*Usar token*/
+  height: 30px;
+  font-weight: 500;
+  font-size: 16px;
+}
+