@sankhyalabs/sankhyablocks 8.16.0-dev.113 → 8.16.0-dev.115

package/dist/esm/fields-layout.entry.js

@@ -0,0 +1,337 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-479e1293.js';
+import { StringUtils, ObjectUtils } from '@sankhyalabs/core';
+import { S as Sortable } from './sortable.esm-842f85a3.js';
+import { S as SORTABLE_PATH, d as getFieldsStructure, I as ID_AVAILABLE_FIELDS } from './FormConfigHelper-49fe72ca.js';
+import { a as TAB_NAMES, G as GROUP_NAMES } from './constants-7b422de0.js';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+
+const fieldsLayoutCss = ".sc-fields-layout-h{display:flex;padding:12px;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);flex-direction:column}.layout-container.sc-fields-layout{container-type:inline-size;display:flex;flex-direction:column;overflow:auto;height:calc(100vh - 225px)}.guide-header.sc-fields-layout{display:flex;width:100%;font-size:20px;border-bottom:1px solid #dce0e8;margin-bottom:6px;align-items:center;height:45px}.guide-header.sc-fields-layout ez-button.sc-fields-layout{transition:all 0.2s ease-in-out;visibility:hidden;opacity:0}.guide-header.sc-fields-layout:hover ez-button.sc-fields-layout{visibility:visible;opacity:1}.guide-header-label.sc-fields-layout{display:block;padding:10px 0}.group-config.sc-fields-layout{padding:12px 0;display:flex;flex-direction:column;width:100%}.group-content.sc-fields-layout{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;min-height:65px;width:100%;padding:6px 0}.group-content.empty-content.sc-fields-layout{position:relative}.group-content.empty-content.sc-fields-layout::before{content:\"Arraste e solte um campo aqui\";color:#cbcfd7;font-size:16px;font-weight:500;text-align:center;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity 0.3s;width:100%;height:100%;box-sizing:border-box;padding:10px;background:#f9f9f9;border:1px dashed #dce0e8;border-radius:6px}.no-group-container.sc-fields-layout{padding:12px 0;width:100%;border-bottom:1px solid #dce0e8}.no-group-container.sc-fields-layout::before{content:\"Inclua estes campos nos grupos ou deixe-os separados no topo do formulário\";width:100%;display:block;font-size:16px;font-weight:400;color:#AFB6C0;padding-bottom:12px}.add-group-container.sc-fields-layout{display:flex;align-items:center;border-top:1px solid #dce0e8;padding-top:22px;padding-bottom:12px;gap:6px;cursor:pointer;justify-content:center;width:100%;height:55px}.no-guide-selected.sc-fields-layout{display:block;margin:auto;font-size:24px;color:#AFB6C0;font-weight:500}.ghost.sc-fields-layout{opacity:.5;background:#c8fbe2}";
+
+const FieldLayoutComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isEditingGuideName = createEvent(this, "isEditingGuideName", 7);
+    this.isEditingGroupName = createEvent(this, "isEditingGroupName", 7);
+    this.layoutChanged = createEvent(this, "layoutChanged", 7);
+    this.setFieldListAsAvailable = createEvent(this, "setFieldListAsAvailable", 7);
+    this.guideRenamed = createEvent(this, "guideRenamed", 7);
+    this.ID_GROUPS = 'container-groups';
+    this.ID_FIELDS = 'container-fields';
+    this.reservedGuideNames = [TAB_NAMES.main.toLowerCase(), TAB_NAMES.general.toLocaleLowerCase()];
+    this.groupsListMemory = [];
+    this.groupsRefList = [];
+    this.isEditGuideNameActive = false;
+    this.selectedGuide = undefined;
+    this.groupsList = [];
+    this.guideNames = [];
+    this.dataUnit = undefined;
+    this.messagesBuilder = undefined;
+  }
+  handleFieldConfigChanged({ detail }) {
+    const updatedField = detail;
+    const groupToUpdate = this.groupsListMemory.find(g => g.name === updatedField.group);
+    if (!groupToUpdate)
+      return;
+    const updatedFields = groupToUpdate.fields.map(field => {
+      return (field.name === updatedField.name) ? updatedField : field;
+    });
+    const updatedGroupList = this.groupsListMemory.map(group => {
+      return (group.name === groupToUpdate.name)
+        ? { name: group.name, fields: updatedFields }
+        : group;
+    });
+    this.applyGroupUpdate(updatedGroupList);
+  }
+  observeSelectedGuide() {
+    this.isEditGuideNameActive = false;
+    forceUpdate(this);
+    this.isEditingGroupName.emit(false);
+  }
+  observeGroupList(newValue) {
+    this.groupsListMemory = [...newValue];
+  }
+  observeIsEditGuideNameActive(newValue) {
+    this.isEditingGuideName.emit(newValue);
+  }
+  async addFieldToLayout(incomingField) {
+    incomingField.group = GROUP_NAMES.noGroup;
+    incomingField.tab = this.selectedGuide.name;
+    const fixedFieldsGroup = this.getFixedFieldsGroup();
+    const newFixedFieldsGroup = {
+      name: GROUP_NAMES.noGroup,
+      fields: fixedFieldsGroup ? [...fixedFieldsGroup.fields, incomingField] : [incomingField],
+    };
+    const updatedGroupListMemory = fixedFieldsGroup
+      ? [newFixedFieldsGroup, ...this.groupsListMemory.slice(1)]
+      : [newFixedFieldsGroup, ...this.groupsListMemory];
+    this.applyGroupUpdate(updatedGroupListMemory);
+  }
+  getFixedFieldsGroup() {
+    return this.groupsListMemory.find(g => g.name === GROUP_NAMES.noGroup);
+  }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
+  handleAddGroup() {
+    const newGroup = { name: this.buildNewGroupName(), fields: [] };
+    const updatedGroupsList = [...this.groupsListMemory, newGroup];
+    this.applyGroupUpdate(updatedGroupsList);
+  }
+  buildNewGroupName() {
+    var _a, _b;
+    const qtdWithNewGroupName = (_b = (_a = this.groupsListMemory.filter(g => g.name.includes(GROUP_NAMES.newGroup))) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    return qtdWithNewGroupName === 0
+      ? GROUP_NAMES.newGroup
+      : `${GROUP_NAMES.newGroup} (${qtdWithNewGroupName})`;
+  }
+  makeDynamicFieldsContainersDraggable() {
+    const draggableGroups = this.groupsList.filter((g) => g.name !== GROUP_NAMES.noGroup);
+    draggableGroups.forEach(group => {
+      this.makeFieldContainerDraggable(this.getFieldsContainerId(group.name));
+    });
+  }
+  getFieldsContainerId(groupName) {
+    return `${this.ID_FIELDS}-${StringUtils.replaceBlankCharacters(groupName)}`;
+  }
+  handleSortGroups(evt) {
+    var _a;
+    const htmlStructure = (_a = evt.to) === null || _a === void 0 ? void 0 : _a.children;
+    if (!htmlStructure)
+      return;
+    const groupsOrder = Array.from(htmlStructure).map(el => el.getAttribute('data-group-name'));
+    const updatedOrderGroupsList = [];
+    const fixedGroup = this.getFixedFieldsGroup();
+    if (fixedGroup) {
+      updatedOrderGroupsList.push(fixedGroup);
+    }
+    groupsOrder.forEach(groupName => {
+      const group = this.groupsListMemory.find(g => g.name === groupName);
+      if (group) {
+        updatedOrderGroupsList.push(group);
+      }
+    });
+    this.applyGroupUpdate(updatedOrderGroupsList);
+  }
+  handleFieldsChanged(evt) {
+    let updatedGroupsList = [...this.groupsListMemory];
+    updatedGroupsList = [...this.handleFieldsOnGroupUpdate(updatedGroupsList, evt, SORTABLE_PATH.FROM)];
+    updatedGroupsList = [...this.handleFieldsOnGroupUpdate(updatedGroupsList, evt, SORTABLE_PATH.TO)];
+    this.applyGroupUpdate(updatedGroupsList);
+  }
+  applyGroupUpdate(updatedGroupList) {
+    var _a;
+    (_a = this.groupsRefList) === null || _a === void 0 ? void 0 : _a.forEach((group) => group === null || group === void 0 ? void 0 : group.cancelEdition());
+    if (ObjectUtils.equals(updatedGroupList, this.groupsListMemory)) {
+      return false;
+    }
+    this.groupsListMemory = [...updatedGroupList];
+    this.layoutChanged.emit(this.groupsListMemory);
+    return true;
+  }
+  handleFieldsOnGroupUpdate(groupList, evt, path) {
+    const element = evt[path];
+    const isAvailableFields = element.id === ID_AVAILABLE_FIELDS;
+    return isAvailableFields ? groupList : this.updateGroupList(groupList, element, path, evt);
+  }
+  updateGroupList(groupList, element, path, evt) {
+    const groupName = element.getAttribute('data-group-name');
+    const updatedGroup = {
+      name: groupName,
+      fields: getFieldsStructure(evt, path, groupName, this.selectedGuide.name),
+    };
+    return this.replaceGroup(groupList, updatedGroup);
+  }
+  replaceGroup(groupList, newGroup) {
+    return groupList.map(group => group.name === newGroup.name ? newGroup : group);
+  }
+  makeGroupsDraggable() {
+    try {
+      const element = this.getContainerElement(this.ID_GROUPS);
+      if (!element)
+        return;
+      new Sortable(element, {
+        group: 'groups',
+        ghostClass: 'ghost',
+        direction: 'horizontal',
+        animation: 15,
+        onSort: (evt) => this.handleSortGroups(evt),
+      });
+    }
+    catch (e) {
+      console.error('Falha ao tornar container de grupos arrastável: ', this.ID_GROUPS);
+    }
+  }
+  makeFieldContainerDraggable(containerId) {
+    try {
+      const element = this.getContainerElement(containerId);
+      if (!element)
+        return;
+      new Sortable(element, {
+        group: 'fields',
+        ghostClass: 'ghost',
+        direction: 'vertical',
+        animation: 15,
+        onAdd: (evt) => this.handleFieldsChanged(evt),
+        onRemove: (evt) => this.handleFieldsChanged(evt),
+        onSort: (evt) => this.handleFieldsChanged(evt),
+      });
+    }
+    catch (e) {
+      console.error('Falha ao tornar grupo arrastável: ', containerId);
+    }
+  }
+  getContainerElement(id) {
+    return this.el.querySelector(`[id="${id}"]`);
+  }
+  handleSetFieldAsAvailable(field) {
+    var _a;
+    const groupName = (_a = field.group) !== null && _a !== void 0 ? _a : GROUP_NAMES.noGroup;
+    const group = this.groupsListMemory.find(group => group.name === groupName);
+    const fields = group.fields.filter(f => f.name !== field.name);
+    const updatedGroup = { name: groupName, fields };
+    const updatedList = [...this.replaceGroup(this.groupsListMemory, updatedGroup)];
+    this.applyGroupUpdate(updatedList);
+  }
+  removeGroup(group) {
+    var _a, _b;
+    const groupFields = (_b = (_a = this.groupsListMemory.find(f => f.name === group.name)) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : [];
+    const updatedGroupList = [...this.groupsListMemory.filter(g => g.name !== group.name)];
+    if (this.applyGroupUpdate(updatedGroupList)) {
+      this.setFieldListAsAvailable.emit(groupFields);
+    }
+  }
+  handleRenameGroup(editDetails) {
+    const { value: actualName, newValue: newGroupName } = editDetails.detail;
+    const updatedGroupList = this.groupsListMemory.map(group => {
+      if (group.name !== actualName)
+        return Object.assign({}, group);
+      const updatedFields = group.fields.map(f => {
+        return Object.assign(Object.assign({}, f), { group: newGroupName });
+      });
+      return { name: newGroupName, fields: updatedFields };
+    });
+    this.applyGroupUpdate(updatedGroupList);
+  }
+  canSaveGroup(newLabel, index) {
+    const hasOtherWithThisName = this.groupsList.some(group => {
+      var _a;
+      return ((_a = group.name) !== null && _a !== void 0 ? _a : '').toLocaleLowerCase() === (newLabel !== null && newLabel !== void 0 ? newLabel : '').toLocaleLowerCase();
+    });
+    if (!hasOtherWithThisName)
+      return true;
+    const title = this.getMessage('snkFormConfig.confirm.title');
+    const message = this.buildDuplicatedGroupNameContent(newLabel);
+    ApplicationUtils.alert(title, message).then(() => { var _a; return (_a = this.groupsRefList[index]) === null || _a === void 0 ? void 0 : _a.applyFocusTextEdit(); });
+    return false;
+  }
+  buildDuplicatedGroupNameContent(newLabel) {
+    const tabName = this.selectedGuide.name;
+    return `
+        ${this.getMessage('snkFormConfig.alert.titleGroupExists')}
+        <b>${newLabel}</b>
+        ${this.getMessage('snkFormConfig.alert.inTab')}
+        <b>${tabName === TAB_NAMES.main ? this.getMessage('snkFormConfig.form.mainArea') : tabName}</b>.
+        <br/><br/>
+        ${this.getMessage('snkFormConfig.alert.infoValidTitle')}
+      `;
+  }
+  buildDuplicatedTabNameContent(newLabel) {
+    return `
+        ${this.getMessage('snkFormConfig.alert.titleGuideExists')}
+        <b>${newLabel}</b>.
+        <br/><br/>
+        ${this.getMessage('snkFormConfig.alert.infoValidTitle')}
+      `;
+  }
+  buildReservedTabNameContent(newLabel) {
+    return `
+        ${this.getMessage('snkFormConfig.alert.titleGuideReservedName')}
+        <br/><br/>
+        <b>${newLabel}</b>.
+        <br/><br/>
+        ${this.getMessage('snkFormConfig.alert.infoValidTitle')}
+      `;
+  }
+  renderFields(fields) {
+    if (fields.length === 0)
+      return;
+    return fields.map(field => (h("field-item", { key: field.name, fieldConfig: field, onLayoutConfig: true, dataUnit: this.dataUnit, messagesBuilder: this.messagesBuilder, onSetFieldAsAvailable: (e) => this.handleSetFieldAsAvailable(e.detail) })));
+  }
+  renderDraggableGroups() {
+    const draggableGroups = this.groupsList.filter(g => g.name !== GROUP_NAMES.noGroup);
+    return (draggableGroups.map((group, index) => {
+      var _a;
+      return (h("div", { key: group.name, class: 'group-config', "data-group-name": group.name }, h("ez-collapsible-box", { ref: ref => this.groupsRefList[index] = ref, label: group.name, headerSize: "large", editable: true, removable: true, "icon-placement": "left", onEzRemove: () => this.removeGroup(group), onEzSaveEditLabel: (event => this.handleRenameGroup(event)), onEzEditLabelMode: ({ detail }) => this.isEditingGroupName.emit(detail), conditionalSave: (newLabel) => this.canSaveGroup(newLabel, index) }, h("div", { id: this.getFieldsContainerId(group.name), class: `group-content ${!((_a = group.fields) === null || _a === void 0 ? void 0 : _a.length) ? 'empty-content' : ''}`, "data-group-name": group.name }, this.renderFields(group.fields)))));
+    }));
+  }
+  renderFixedFields() {
+    var _a, _b;
+    const noGroupFields = (_b = (_a = this.groupsList.find(g => g.name === GROUP_NAMES.noGroup)) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : [];
+    return this.renderFields(noGroupFields);
+  }
+  handleRenameGuide(editDetails) {
+    const { value: actualValue, newValue } = editDetails.detail;
+    this.isEditGuideNameActive = false;
+    if (newValue === actualValue) {
+      return;
+    }
+    const duplicatedName = this.guideNames.includes(newValue.toLowerCase());
+    const forbiddenName = this.reservedGuideNames.includes(newValue.toLowerCase());
+    if (forbiddenName || duplicatedName) {
+      const title = this.getMessage('snkFormConfig.confirm.title');
+      const message = forbiddenName ? this.buildReservedTabNameContent(newValue) : this.buildDuplicatedTabNameContent(newValue);
+      ApplicationUtils.alert(title, message).then(() => this._refTextEdit.applyFocusSelect());
+      return;
+    }
+    this.guideRenamed.emit(newValue);
+  }
+  cancelEditGuideName() {
+    this.isEditGuideNameActive = false;
+  }
+  async startGuideNameEdition() {
+    this.isEditGuideNameActive = true;
+    setTimeout(async () => {
+      await this._refTextEdit.applyFocusSelect();
+    }, 200);
+  }
+  getTextEditStyle() {
+    return {
+      fontSize: '20px',
+      fontWeight: '500',
+      fontFamily: 'Roboto',
+    };
+  }
+  renderGuideName() {
+    var _a, _b;
+    if (this.isEditGuideNameActive) {
+      return (h("div", { class: 'guide-header' }, h("ez-text-edit", { class: "collapsible-box__text-edit", ref: ref => this._refTextEdit = ref, value: (_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.label, styled: this.getTextEditStyle(), onSaveEdition: (ev) => this.handleRenameGuide(ev), onCancelEdition: () => this.cancelEditGuideName() })));
+    }
+    return (h("div", { class: 'guide-header' }, h("span", { class: 'guide-header-label' }, (_b = this.selectedGuide) === null || _b === void 0 ? void 0 : _b.label), this.renderEditGuideNameButton()));
+  }
+  renderEditGuideNameButton() {
+    var _a;
+    if (((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name) === TAB_NAMES.main)
+      return;
+    return (h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.startGuideNameEdition(), size: "medium", iconName: 'edit', title: 'Renomear' }));
+  }
+  componentDidRender() {
+    this.makeGroupsDraggable();
+    this.makeDynamicFieldsContainersDraggable();
+    this.makeFieldContainerDraggable(GROUP_NAMES.noGroup);
+  }
+  render() {
+    if (!this.selectedGuide) {
+      return (h(Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, h("span", { class: 'no-guide-selected' }, "Selecione uma guia e comece a configurar")));
+    }
+    return (h(Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, this.renderGuideName(), h("div", { class: 'layout-container' }, h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { class: 'no-group-container' }, h("div", { id: GROUP_NAMES.noGroup, class: 'group-content', "data-group-name": GROUP_NAMES.noGroup }, this.renderFixedFields())), h("hr", null), h("div", { id: this.ID_GROUPS, class: 'groups-container' }, this.renderDraggableGroups()))), h("div", { class: 'add-group-container', onClick: this.handleAddGroup.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus" }), h("span", null, "Criar novo grupo"))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "selectedGuide": ["observeSelectedGuide"],
+    "groupsList": ["observeGroupList"],
+    "isEditGuideNameActive": ["observeIsEditGuideNameActive"]
+  }; }
+};
+FieldLayoutComponent.style = fieldsLayoutCss;
+
+export { FieldLayoutComponent as fields_layout };

package/dist/esm/fields-selector.entry.js

@@ -0,0 +1,70 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-479e1293.js';
+import { S as Sortable } from './sortable.esm-842f85a3.js';
+import { I as ID_AVAILABLE_FIELDS } from './FormConfigHelper-49fe72ca.js';
+import { ArrayUtils } from '@sankhyalabs/core';
+import './constants-7b422de0.js';
+
+const fieldsSelectorCss = ".sc-fields-selector-h{width:33.33333%;display:flex;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);max-width:260px}.fields-label.sc-fields-selector{display:block;font-size:16px;font-weight:500;width:100%}.fields-count.sc-fields-selector{display:block;color:#AFB6C0;font-size:14px;padding:12px 0;font-weight:400;width:100%}.fields-container.sc-fields-selector{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 220px);width:100%}.ghost.sc-fields-selector{opacity:.5;background:#c8fbe2}";
+
+const FieldsSelector = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.fieldListChanged = createEvent(this, "fieldListChanged", 7);
+    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", { 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()))));
+  }
+  get el() { return getElement(this); }
+};
+FieldsSelector.style = fieldsSelectorCss;
+
+export { FieldsSelector as fields_selector };

package/dist/esm/{filter-type.enum-a80c1b6b.js → filter-type.enum-f6a8fe23.js}

@@ -3,6 +3,7 @@ var FilterType;
   FilterType["QUICK_FILTER"] = "QUICK_FILTER";
   FilterType["CUSTOM_FILTER"] = "CUSTOM_FILTER";
   FilterType["OTHER_FILTERS"] = "OTHER_FILTERS";
+  FilterType["DEFAULT_FILTER"] = "DEFAULT_FILTER";
 })(FilterType || (FilterType = {}));
 const FilterType$1 = FilterType;
 

package/dist/esm/guides-configurator.entry.js

@@ -0,0 +1,160 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-479e1293.js';
+import { S as Sortable } from './sortable.esm-842f85a3.js';
+import { ObjectUtils, ArrayUtils } from '@sankhyalabs/core';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+import { a as TAB_NAMES } from './constants-7b422de0.js';
+
+const guidesConfiguratorCss = ".ezSidebarNavigator.sc-guides-configurator{--ez-sidebar-navigator--height:calc(100vh - 118px)}.navigator-container.sc-guides-configurator{height:calc(100vh - 175px);display:flex;flex-direction:column;justify-content:space-between}.collapsible-container.sc-guides-configurator{display:flex;flex-direction:column;gap:12px;flex-grow:1;max-height:calc(100vh - 240px);overflow:auto}.collapsible-item.sc-guides-configurator{padding:6px;border-radius:6px;border:1px solid #dce0e8}.add-button-container.sc-guides-configurator{display:flex;align-items:center;border-top:1px solid #dce0e8;padding-top:22px;gap:6px;cursor:pointer;justify-content:center}.add-button-container.sc-guides-configurator span.sc-guides-configurator{display:block}.guide-list.sc-guides-configurator{display:flex;flex-direction:column;width:100%;min-height:10px}.guide-list.hidden-empty-content.sc-guides-configurator::before{content:\"Nenhuma guia oculta\";display:block;font-size:16px;font-weight:400;color:#AFB6C0;margin:auto;padding:8px}.guide-list.visible-empty-content.sc-guides-configurator::before{content:\"Nenhuma guia visível\";display:block;font-size:16px;font-weight:400;color:#AFB6C0;margin:auto;padding:8px}.item-label.sc-guides-configurator{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1}.guide-item.sc-guides-configurator{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.sc-guides-configurator .actions.sc-guides-configurator{display:flex;gap:8px;transition:0.2s ease-in-out;visibility:hidden;opacity:0}.guide-item.sc-guides-configurator:hover .actions.sc-guides-configurator{visibility:visible;opacity:1}ez-button.sc-guides-configurator{width:24px;align-items:center;justify-content:center;display:flex}.ghost.sc-guides-configurator{opacity:.5;background:#e2eaf4}.main-guide.sc-guides-configurator{padding:12px;margin:12px 0;border:1px solid #dce0e8;border-radius:6px;transition:all 0.2s ease-in-out}.guide-item.selected.sc-guides-configurator,.main-guide.selected.sc-guides-configurator{background:#E2F4EF}.guide-item.sc-guides-configurator:hover,.main-guide.sc-guides-configurator:hover{background:#f5fcfa}";
+
+const GuidesConfigurator = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.guideSelected = createEvent(this, "guideSelected", 7);
+    this.guideListChanged = createEvent(this, "guideListChanged", 7);
+    this.guideDeleted = createEvent(this, "guideDeleted", 7);
+    this.createNewGuide = createEvent(this, "createNewGuide", 7);
+    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")))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "guidesList": ["observeVisibleGuides"],
+    "selectedGuide": ["observeSelectedGuide"]
+  }; }
+};
+GuidesConfigurator.style = guidesConfiguratorCss;
+
+export { GuidesConfigurator as guides_configurator };