@sankhyalabs/sankhyablocks 9.0.3 → 9.1.0-dev.10

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

@@ -0,0 +1,146 @@
+import { h, Host } from '@stencil/core';
+import Sortable from 'sortablejs';
+import { ID_AVAILABLE_FIELDS } from '../FormConfigHelper';
+import { ArrayUtils } from '@sankhyalabs/core';
+export class FieldsSelector {
+  constructor() {
+    this.availableFields = [];
+    this.dataUnit = undefined;
+    this.filterTerm = '';
+  }
+  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("field-item", { key: field.name, dataUnit: this.dataUnit, fieldConfig: field })));
+  }
+  getCountText() {
+    if (!this.availableFields.length)
+      return 'Nenhum campo disponível';
+    if (this.availableFields.length === 1)
+      return '1 campo disponível';
+    return `${this.availableFields.length} campos disponíveis`;
+  }
+  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),
+    });
+  }
+  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' }, "Campos dispon\u00EDveis"), h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: "Buscar campo", 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 "fields-selector"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["fields-selector.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["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": ""
+        }
+      }
+    };
+  }
+  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-form-config/guides-configurator/guides-configurator.css

@@ -0,0 +1,132 @@
+.ezSidebarNavigator {
+  --ez-sidebar-navigator--height: calc(100vh - 118px);
+}
+
+.navigator-container {
+  height: calc(100vh - 175px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+
+.collapsible-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex-grow: 1;
+  max-height: calc(100vh - 240px);
+  overflow: auto;
+}
+
+.collapsible-item {
+  padding: 6px;
+  border-radius: 6px;
+  border: 1px solid #dce0e8; /*Usar token*/
+}
+
+.add-button-container {
+  display: flex;
+  align-items: center;
+  border-top: 1px solid #dce0e8;
+  padding-top: 22px;
+  gap: 6px;
+  cursor: pointer;
+  justify-content: center;
+}
+
+.add-button-container span {
+  display: block;
+}
+
+
+.guide-list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 10px;
+}
+
+.guide-list.hidden-empty-content::before {
+  content: "Nenhuma guia oculta";
+  display: block;
+  font-size: 16px;
+  font-weight: 400;
+  color: #AFB6C0;
+  margin: auto;
+  padding: 8px;
+}
+
+.guide-list.visible-empty-content::before {
+  content: "Nenhuma guia visível";
+  display: block;
+  font-size: 16px;
+  font-weight: 400;
+  color: #AFB6C0;
+  margin: auto;
+  padding: 8px;
+}
+
+.item-label {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+
+.guide-item {
+  margin: 0 3px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  border-radius: 6px;
+  transition: all 0.2s ease-in-out;
+  height: 32px;
+}
+
+
+.guide-item .actions {
+  display: flex;
+  gap: 8px;
+  transition: 0.2s ease-in-out;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.guide-item:hover .actions {
+  visibility: visible;
+  opacity: 1;
+}
+
+ez-button {
+  width: 24px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.ghost {
+  opacity: .5;
+  background: #e2eaf4;
+}
+
+.main-guide {
+  padding: 12px;
+  margin: 12px 0;
+  border: 1px solid #dce0e8;
+  border-radius: 6px;
+  transition: all 0.2s ease-in-out;
+}
+
+.guide-item.selected,
+.main-guide.selected {
+  background: #E2F4EF;
+}
+
+.guide-item:hover,
+.main-guide:hover {
+  background: #f5fcfa;
+}

package/dist/collection/components/snk-form-config/guides-configurator/guides-configurator.js

@@ -0,0 +1,317 @@
+import { h } from '@stencil/core';
+import Sortable from 'sortablejs';
+import { ArrayUtils, ObjectUtils } from '@sankhyalabs/core';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+import { TAB_NAMES } from '../../../lib/utils/constants';
+export class GuidesConfigurator {
+  constructor() {
+    this.ID_VISIBLE_GUIDES = 'container-visible-guides';
+    this.ID_HIDDEN_GUIDES = 'container-hidden-guides';
+    this.sortLogic = (a, b) => {
+      var _a, _b;
+      const orderA = (_a = a.order) !== null && _a !== void 0 ? _a : Number.MAX_VALUE;
+      const orderB = (_b = b.order) !== null && _b !== void 0 ? _b : Number.MAX_VALUE;
+      return orderA - orderB;
+    };
+    this.mainGuide = undefined;
+    this.filterTerm = '';
+    this.visibleGuides = [];
+    this.hiddenGuides = [];
+    this.guidesList = [];
+    this.selectedGuide = undefined;
+    this.messagesBuilder = undefined;
+  }
+  observeVisibleGuides(newGuides) {
+    this.initGuidesConfig(newGuides);
+  }
+  observeSelectedGuide(newGuide) {
+    this.guideSelected.emit(newGuide);
+  }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
+  initGuidesConfig(newGuides) {
+    const visibleAux = [...newGuides.filter(guide => (guide.visible && guide.name !== TAB_NAMES.main))];
+    const hiddenAux = [...newGuides.filter(guide => (!guide.visible && guide.name !== TAB_NAMES.main))];
+    this.visibleGuides = [...visibleAux.sort(this.sortLogic)];
+    this.hiddenGuides = [...hiddenAux.sort(this.sortLogic)];
+    this.mainGuide = newGuides.find(g => g.name === TAB_NAMES.main);
+  }
+  handleAddGuide() {
+    this.createNewGuide.emit();
+  }
+  handleSelectGuide(guide, evt) {
+    evt.stopPropagation();
+    this.selectedGuide = guide;
+  }
+  toggleGuideVisibility(guide, evt) {
+    evt.stopPropagation();
+    const updatedGuide = Object.assign(Object.assign({}, guide), { visible: !guide.visible });
+    let visibleAux;
+    let hiddenAux;
+    if (guide.visible) {
+      visibleAux = [...this.visibleGuides.filter(g => g.name !== guide.name)];
+      hiddenAux = [...this.hiddenGuides, updatedGuide];
+    }
+    else {
+      visibleAux = [...this.visibleGuides, updatedGuide];
+      hiddenAux = [...this.hiddenGuides.filter(g => g.name !== guide.name)];
+    }
+    const updatedGuideList = [...visibleAux, ...hiddenAux];
+    this.applyGuidesUpdate(updatedGuideList);
+  }
+  adjustListOrder(guideList) {
+    return guideList.map((g, index) => {
+      return Object.assign(Object.assign({}, g), { order: index });
+    });
+  }
+  applyGuidesUpdate(updatedGuideList) {
+    let newGuidesList = this.adjustListOrder(updatedGuideList);
+    newGuidesList = [this.mainGuide, ...newGuidesList];
+    if (!ObjectUtils.equals(newGuidesList, this.guidesList)) {
+      this.guideListChanged.emit(newGuidesList);
+    }
+  }
+  async handleDeleteGuide(guide, e) {
+    e.stopPropagation();
+    const title = this.getMessage('snkFormConfig.confirm.title');
+    const message = this.getMessage('snkFormConfig.confirm.deleteGuide').replace('{0}', guide.label);
+    const canRemove = await ApplicationUtils.confirm(title, message);
+    if (!canRemove)
+      return;
+    this.guideDeleted.emit(guide);
+    const deletedMessage = this.getMessage('snkFormConfig.info.successfullyGuideDeleted').replace('{0}', guide.label);
+    ApplicationUtils.info(deletedMessage);
+  }
+  renderItems(guides) {
+    const guidesToShow = ArrayUtils.applyStringFilter(this.filterTerm, guides);
+    return guidesToShow.map(guide => {
+      var _a;
+      return (h("div", { key: guide.name, "data-guide-name": guide.name, title: guide.label, class: `guide-item ${((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.label) === guide.label ? 'selected' : ''} ${this.filterTerm.length ? 'disable-sort' : ''}`, onClick: e => this.handleSelectGuide(guide, e) }, h("span", null, h("ez-icon", { iconName: "drag-indicator", class: 'ez-margin-right--small' })), h("span", { class: 'item-label' }, guide.label), h("div", { class: 'actions' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: e => this.toggleGuideVisibility(guide, e), size: "medium", iconName: guide.visible ? 'eye-off' : 'eye', title: guide.visible ? 'Ocultar' : 'Tornar visível' }), h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: e => this.handleDeleteGuide(guide, e), size: "medium", iconName: 'delete', title: 'Excluir' }))));
+    });
+  }
+  getContainerElement(id) {
+    return this.el.querySelector(`[id="${id}"]`);
+  }
+  handleSortGuide() {
+    const updatedGuideList = [...this.getGuidesFromStatus(true), ...this.getGuidesFromStatus(false)];
+    this.applyGuidesUpdate(updatedGuideList);
+  }
+  getGuidesFromStatus(visible) {
+    let updatedGuideList = [];
+    const orderedGuides = this.getOrderedGuideNames(visible ? this.ID_VISIBLE_GUIDES : this.ID_HIDDEN_GUIDES);
+    orderedGuides.forEach(guideName => {
+      const updatedGuide = this.guidesList.find(g => g.name === guideName);
+      if (updatedGuide) {
+        updatedGuideList.push(Object.assign(Object.assign({}, updatedGuide), { visible }));
+      }
+    });
+    return updatedGuideList;
+  }
+  getOrderedGuideNames(containerId) {
+    var _a;
+    const guidesCollection = (_a = this.getContainerElement(containerId)) === null || _a === void 0 ? void 0 : _a.children;
+    return Array.from(guidesCollection).map((element) => element.getAttribute('data-guide-name'));
+  }
+  initializeDraggableContainers() {
+    this._sortableVisibleGuides = new Sortable(this.getContainerElement(this.ID_VISIBLE_GUIDES), {
+      group: 'guides',
+      ghostClass: 'ghost',
+      direction: 'vertical',
+      filter: '.disable-sort',
+      animation: 15,
+      onSort: () => this.handleSortGuide(),
+    });
+    this._sortableInvisibleGuides = new Sortable(this.getContainerElement(this.ID_HIDDEN_GUIDES), {
+      group: 'guides',
+      ghostClass: 'ghost',
+      animation: 15,
+      filter: '.disable-sort',
+      onSort: () => this.handleSortGuide(),
+    });
+  }
+  handleSelectMainGuide() {
+    this.guideSelected.emit(this.mainGuide);
+  }
+  componentDidLoad() {
+    this.initializeDraggableContainers();
+    this.initGuidesConfig(this.guidesList);
+  }
+  render() {
+    var _a, _b, _c;
+    return (h("ez-sidebar-navigator", { class: 'ezSidebarNavigator', type: 'fixed', size: 'md', titleMenu: 'Guias' }, h("div", { class: 'navigator-container' }, h("ez-filter-input", { slot: "content", mode: "slim", label: "Buscar guia", onEzChange: evt => this.filterTerm = evt.detail }), h("div", { onClick: this.handleSelectMainGuide.bind(this), class: `main-guide ${((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name) === ((_b = this.mainGuide) === null || _b === void 0 ? void 0 : _b.name) ? 'selected' : ''}` }, h("span", null, (_c = this.mainGuide) === null || _c === void 0 ? void 0 : _c.label)), h("div", { class: 'collapsible-container' }, h("div", { class: 'collapsible-item' }, h("ez-collapsible-box", { label: "Guias vis\u00EDveis", headerSize: "large" }, h("div", { id: this.ID_VISIBLE_GUIDES, class: `guide-list ${!this.visibleGuides.length ? 'visible-empty-content' : ''}` }, this.renderItems(this.visibleGuides)))), h("div", { class: 'collapsible-item' }, h("ez-collapsible-box", { label: "Guias ocultas", headerSize: "large" }, h("div", { id: this.ID_HIDDEN_GUIDES, class: `guide-list ${!this.hiddenGuides.length ? 'hidden-empty-content' : ''}` }, this.renderItems(this.hiddenGuides))))), h("div", { class: 'add-button-container', onClick: this.handleAddGuide.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus" }), h("span", null, "Criar nova guia")))));
+  }
+  static get is() { return "guides-configurator"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["guides-configurator.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["guides-configurator.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "guidesList": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IGuideConfig[]",
+          "resolved": "IGuideConfig[]",
+          "references": {
+            "IGuideConfig": {
+              "location": "import",
+              "path": "../FormConfigHelper"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "selectedGuide": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IGuideConfig",
+          "resolved": "IGuideConfig",
+          "references": {
+            "IGuideConfig": {
+              "location": "import",
+              "path": "../FormConfigHelper"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "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 {
+      "mainGuide": {},
+      "filterTerm": {},
+      "visibleGuides": {},
+      "hiddenGuides": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "guideSelected",
+        "name": "guideSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IGuideConfig",
+          "resolved": "IGuideConfig",
+          "references": {
+            "IGuideConfig": {
+              "location": "import",
+              "path": "../FormConfigHelper"
+            }
+          }
+        }
+      }, {
+        "method": "guideListChanged",
+        "name": "guideListChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IGuideConfig[]",
+          "resolved": "IGuideConfig[]",
+          "references": {
+            "IGuideConfig": {
+              "location": "import",
+              "path": "../FormConfigHelper"
+            }
+          }
+        }
+      }, {
+        "method": "guideDeleted",
+        "name": "guideDeleted",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IGuideConfig",
+          "resolved": "IGuideConfig",
+          "references": {
+            "IGuideConfig": {
+              "location": "import",
+              "path": "../FormConfigHelper"
+            }
+          }
+        }
+      }, {
+        "method": "createNewGuide",
+        "name": "createNewGuide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "guidesList",
+        "methodName": "observeVisibleGuides"
+      }, {
+        "propName": "selectedGuide",
+        "methodName": "observeSelectedGuide"
+      }];
+  }
+}