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

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

@@ -0,0 +1,326 @@
+import { ObjectUtils } from '@sankhyalabs/core';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+import { h } from '@stencil/core';
+export class SnkDynaformGuidesConfigurator {
+  constructor() {
+    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.handleAddGuide = () => {
+      this.createNewGuide.emit();
+    };
+    this.mainGuide = undefined;
+    this.visibleGuides = [];
+    this.hiddenGuides = [];
+    this.guidesList = [];
+    this.selectedGuide = undefined;
+    this.mainGuideName = undefined;
+    this.messagesBuilder = undefined;
+  }
+  observeGuidesList(newGuides) {
+    this.initGuidesConfig(newGuides);
+  }
+  observeMainGuideName() {
+    this.initGuidesConfig(this.guidesList);
+  }
+  observeSelectedGuide(newGuide) {
+    this.guideSelected.emit(newGuide);
+  }
+  componentWillLoad() {
+    this.initGuidesConfig(this.guidesList);
+  }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
+  initGuidesConfig(newGuides) {
+    const mainName = this.mainGuideName;
+    const isMain = (guide) => !!mainName && guide.name === mainName;
+    const visibleAux = newGuides.filter(guide => guide.visible && !isMain(guide));
+    const hiddenAux = newGuides.filter(guide => !guide.visible && !isMain(guide));
+    this.visibleGuides = [...visibleAux].sort(this.sortLogic);
+    this.hiddenGuides = [...hiddenAux].sort(this.sortLogic);
+    this.mainGuide = newGuides.find(g => isMain(g));
+  }
+  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);
+    }
+    this.applyGuidesUpdate([...visibleAux, ...hiddenAux]);
+  }
+  adjustListOrder(guideList) {
+    return guideList.map((g, index) => (Object.assign(Object.assign({}, g), { order: index })));
+  }
+  applyGuidesUpdate(updatedGuideList) {
+    let newGuidesList = this.adjustListOrder(updatedGuideList);
+    if (this.mainGuide) {
+      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);
+  }
+  buildTabs() {
+    return this.visibleGuides.map((guide, i) => ({
+      tabKey: guide.name,
+      label: guide.label,
+      index: i,
+    }));
+  }
+  handleTabChange(tab) {
+    var _a;
+    if (!tab)
+      return;
+    const guide = this.guidesList.find(g => g.name === tab.tabKey);
+    if (guide && guide.name !== ((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name)) {
+      this.selectedGuide = guide;
+    }
+  }
+  handleReorder(reorderedTabs) {
+    const visibleReordered = reorderedTabs
+      .map(t => this.visibleGuides.find(g => g.name === t.tabKey))
+      .filter(Boolean);
+    this.applyGuidesUpdate([...visibleReordered, ...this.hiddenGuides]);
+  }
+  renderTabActions() {
+    return this.visibleGuides.map((guide, i) => {
+      const slotIndex = i;
+      const isProtected = guide.isCustom || guide.isDetail;
+      return (h("div", { key: guide.name, slot: `tab${slotIndex}`, class: "tab-actions", onClick: (e) => e.stopPropagation() }, h("ez-button", { mode: "icon", class: "ez-button--tertiary tab-action-btn", size: "small", iconName: "eye-off", title: this.getMessage('snkFormConfig.guidesConfigurator.actions.hide'), onClick: (e) => this.toggleGuideVisibility(guide, e) }), h("ez-button", { mode: "icon", class: "ez-button--tertiary tab-action-btn", size: "small", iconName: "delete", isDisabled: isProtected, title: isProtected
+          ? this.getMessage('snkFormConfig.guidesConfigurator.canNotDeleteCustomGuide')
+          : this.getMessage('snkFormConfig.guidesConfigurator.actions.delete'), onClick: (e) => this.handleDeleteGuide(guide, e) })));
+    });
+  }
+  renderHiddenGuidesBar() {
+    if (this.hiddenGuides.length === 0)
+      return null;
+    return (h("div", { class: "hidden-guides-bar" }, h("span", { class: "hidden-guides-label" }, this.getMessage('snkFormConfig.guidesConfigurator.hiddenGuides'), ":"), this.hiddenGuides.map(guide => {
+      const isProtected = guide.isCustom || guide.isDetail;
+      return (h("div", { key: guide.name, class: "hidden-guide-chip", title: guide.label }, h("span", { class: "chip-label", onClick: (e) => this.handleSelectGuide(guide, e) }, guide.label), h("ez-button", { mode: "icon", class: "ez-button--tertiary", size: "small", iconName: "eye", title: this.getMessage('snkFormConfig.guidesConfigurator.actions.show'), onClick: (e) => this.toggleGuideVisibility(guide, e) }), h("ez-button", { mode: "icon", class: "ez-button--tertiary", size: "small", iconName: "delete", isDisabled: isProtected, title: isProtected
+          ? this.getMessage('snkFormConfig.guidesConfigurator.canNotDeleteCustomGuide')
+          : this.getMessage('snkFormConfig.guidesConfigurator.actions.delete'), onClick: (e) => this.handleDeleteGuide(guide, e) })));
+    })));
+  }
+  render() {
+    var _a;
+    const tabs = this.buildTabs();
+    return (h("div", { class: "guides-tab-configurator" }, h("div", { class: "tab-bar-row" }, h("ez-tabselector", { class: "guides-tabselector", tabs: tabs, selectedTab: (_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name, reorderable: true, onEzChange: (evt) => this.handleTabChange(evt.detail), onEzReorder: (evt) => this.handleReorder(evt.detail) }, this.renderTabActions()), h("ez-button", { label: this.getMessage('snkFormConfig.guidesConfigurator.createNewGuide'), variant: "secondary", size: "medium", leftIconName: "plus", onClick: this.handleAddGuide })), this.renderHiddenGuidesBar()));
+  }
+  static get is() { return "snk-dynaform-guides-configurator"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-dynaform-guides-configurator.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-dynaform-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": ""
+        }
+      },
+      "mainGuideName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "main-guide-name",
+        "reflect": false
+      },
+      "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": {},
+      "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 watchers() {
+    return [{
+        "propName": "guidesList",
+        "methodName": "observeGuidesList"
+      }, {
+        "propName": "mainGuideName",
+        "methodName": "observeMainGuideName"
+      }, {
+        "propName": "selectedGuide",
+        "methodName": "observeSelectedGuide"
+      }];
+  }
+}

package/dist/collection/components/snk-grid/snk-grid.css

@@ -9,7 +9,6 @@
 .snk-grid__container {
   display: flex;
   height: 100%;
-  width: calc(100% - var(--space--12, 12px));
   margin: var(--snk-grid-margin);
   outline: none;
   border: 1px solid var(--color--strokes, #E1E2E5);
@@ -63,6 +62,9 @@
 
 .snk-grid-container__footer {
   background-color: var(--background--xlight, #FFF);
-  border-top: 1px solid var(--color--strokes, #E1E2E5);
   border-radius: 0 0 var(--border--radius-medium) var(--border--radius-medium);
 }
+
+.snk-grid-container__footer:has(*) {
+  border-top: 1px solid var(--color--strokes, #E1E2E5);
+}

package/dist/collection/lib/http/data-fetcher/fetchers/form-config-fetcher.js

@@ -29,6 +29,22 @@ export class FormConfigFetcher extends ResourceFetcher {
                   }
                 }`);
   }
+  getDistinctTabs(config) {
+    const fieldTabs = config.fields.map((field, index) => ({
+      label: field.tab,
+      name: field.tab,
+      order: index,
+      visible: true,
+      isDetail: false,
+      isCustom: false,
+    }));
+    return fieldTabs.reduce((total, item) => {
+      if (!total.some((tab) => tab.name === item.name)) {
+        return [...total, item];
+      }
+      return total;
+    }, []);
+  }
   loadFormConfig(formName, resourceID) {
     return new Promise((accept, reject) => {
       Promise.all([
@@ -38,14 +54,16 @@ export class FormConfigFetcher extends ResourceFetcher {
         this.loadResource(this.getPath(resourceID, formName, "defaultValues"))
       ])
         .then(([configAsString, formCardState, summary, defaultValues]) => {
+        var _a;
         let config;
         if (configAsString != undefined) {
           config = Object.assign(Object.assign({}, JSON.parse(configAsString)), { emptyConfig: false });
-          const { tabs, fields } = config;
-          if (tabs) {
-            const allTabs = new Map(tabs.map(t => [t.label, t]));
-            fields === null || fields === void 0 ? void 0 : fields.forEach(f => { var _a; return f.tab = ((_a = allTabs.get(this.getTabName(f.tab))) === null || _a === void 0 ? void 0 : _a.label) || allTabs.get(this.getTabName(f.tab)); });
+          if (!config.tabs) {
+            config.tabs = (_a = this.getDistinctTabs(config)) !== null && _a !== void 0 ? _a : [];
           }
+          const { tabs, fields } = config;
+          const allTabs = new Map(tabs.map(t => [t.label, t]));
+          fields === null || fields === void 0 ? void 0 : fields.forEach(f => { var _a; return f.tab = ((_a = allTabs.get(this.getTabName(f.tab))) === null || _a === void 0 ? void 0 : _a.label) || allTabs.get(this.getTabName(f.tab)); });
           config.fields = fields === null || fields === void 0 ? void 0 : fields.map((field) => {
             if ("readonly" in field) {
               const readOnly = field['readonly'] === true;

package/dist/components/form-config-fetcher.js

@@ -109,6 +109,22 @@ class FormConfigFetcher extends ResourceFetcher {
                   }
                 }`);
   }
+  getDistinctTabs(config) {
+    const fieldTabs = config.fields.map((field, index) => ({
+      label: field.tab,
+      name: field.tab,
+      order: index,
+      visible: true,
+      isDetail: false,
+      isCustom: false,
+    }));
+    return fieldTabs.reduce((total, item) => {
+      if (!total.some((tab) => tab.name === item.name)) {
+        return [...total, item];
+      }
+      return total;
+    }, []);
+  }
   loadFormConfig(formName, resourceID) {
     return new Promise((accept, reject) => {
       Promise.all([
@@ -118,14 +134,16 @@ class FormConfigFetcher extends ResourceFetcher {
         this.loadResource(this.getPath(resourceID, formName, "defaultValues"))
       ])
         .then(([configAsString, formCardState, summary, defaultValues]) => {
+        var _a;
         let config;
         if (configAsString != undefined) {
           config = Object.assign(Object.assign({}, JSON.parse(configAsString)), { emptyConfig: false });
-          const { tabs, fields } = config;
-          if (tabs) {
-            const allTabs = new Map(tabs.map(t => [t.label, t]));
-            fields === null || fields === void 0 ? void 0 : fields.forEach(f => { var _a; return f.tab = ((_a = allTabs.get(this.getTabName(f.tab))) === null || _a === void 0 ? void 0 : _a.label) || allTabs.get(this.getTabName(f.tab)); });
+          if (!config.tabs) {
+            config.tabs = (_a = this.getDistinctTabs(config)) !== null && _a !== void 0 ? _a : [];
           }
+          const { tabs, fields } = config;
+          const allTabs = new Map(tabs.map(t => [t.label, t]));
+          fields === null || fields === void 0 ? void 0 : fields.forEach(f => { var _a; return f.tab = ((_a = allTabs.get(this.getTabName(f.tab))) === null || _a === void 0 ? void 0 : _a.label) || allTabs.get(this.getTabName(f.tab)); });
           config.fields = fields === null || fields === void 0 ? void 0 : fields.map((field) => {
             if ("readonly" in field) {
               const readOnly = field['readonly'] === true;

package/dist/components/index.d.ts

@@ -21,6 +21,18 @@ export { SnkDataExporter as SnkDataExporter } from '../types/components/snk-data
 export { SnkDataUnit as SnkDataUnit } from '../types/components/snk-data-unit/snk-data-unit';
 export { SnkDefaultFilter as SnkDefaultFilter } from '../types/components/snk-filter-bar/filter-modal/subcomponents/snk-default-filter/snk-default-filter';
 export { SnkDetailView as SnkDetailView } from '../types/components/snk-crud/subcomponents/snk-detail-view/snk-detail-view';
+export { SnkDynaform as SnkDynaform } from '../types/components/snk-dynaform/snk-dynaform';
+export { SnkDynaformConfigHeader as SnkDynaformConfigHeader } from '../types/components/snk-dynaform-form-config/snk-dynaform-config-header/snk-dynaform-config-header';
+export { SnkDynaformConfigsButton as SnkDynaformConfigsButton } from '../types/components/snk-dynaform-form-config/snk-dynaform-config-header/snk-dynaform-configs-button/snk-dynaform-configs-button';
+export { SnkDynaformDetailView as SnkDynaformDetailView } from '../types/components/snk-dynaform/subcomponents/snk-dynaform-detail-view/snk-dynaform-detail-view';
+export { SnkDynaformFieldConfig as SnkDynaformFieldConfig } from '../types/components/snk-dynaform-form-config/snk-dynaform-field-item/snk-dynaform-field-config/snk-dynaform-field-config';
+export { SnkDynaformFieldItem as SnkDynaformFieldItem } from '../types/components/snk-dynaform-form-config/snk-dynaform-field-item/snk-dynaform-field-item';
+export { SnkDynaformFieldsLayout as SnkDynaformFieldsLayout } from '../types/components/snk-dynaform-form-config/snk-dynaform-fields-layout/snk-dynaform-fields-layout';
+export { SnkDynaformFieldsSelector as SnkDynaformFieldsSelector } from '../types/components/snk-dynaform-form-config/snk-dynaform-fields-selector/snk-dynaform-fields-selector';
+export { SnkDynaformFormConfig as SnkDynaformFormConfig } from '../types/components/snk-dynaform-form-config/snk-dynaform-form-config';
+export { SnkDynaformFormView as SnkDynaformFormView } from '../types/components/snk-dynaform/subcomponents/snk-dynaform-form-view/snk-dynaform-form-view';
+export { SnkDynaformGuidesConfigurator as SnkDynaformGuidesConfigurator } from '../types/components/snk-dynaform-form-config/snk-dynaform-guides-configurator/snk-dynaform-guides-configurator';
+export { SnkDynaformGuidesViewer as SnkDynaformGuidesView } from '../types/components/snk-dynaform/subcomponents/snk-dynaform-guides-view/snk-dynaform-guides-view';
 export { SnkEntityList as SnkEntityList } from '../types/components/snk-entity-list/snk-entity-list';
 export { SnkEntitySearch as SnkEntitySearch } from '../types/components/snk-crud/subcomponents/snk-entity-search';
 export { SnkExporterEmailSender as SnkExporterEmailSender } from '../types/components/snk-data-exporter/exporter-email-sender/snk-exporter-email-sender';

package/dist/components/index.js

@@ -21,6 +21,18 @@ export { SnkDataExporter, defineCustomElement as defineCustomElementSnkDataExpor
 export { SnkDataUnit, defineCustomElement as defineCustomElementSnkDataUnit } from './snk-data-unit.js';
 export { SnkDefaultFilter, defineCustomElement as defineCustomElementSnkDefaultFilter } from './snk-default-filter.js';
 export { SnkDetailView, defineCustomElement as defineCustomElementSnkDetailView } from './snk-detail-view.js';
+export { SnkDynaform, defineCustomElement as defineCustomElementSnkDynaform } from './snk-dynaform.js';
+export { SnkDynaformConfigHeader, defineCustomElement as defineCustomElementSnkDynaformConfigHeader } from './snk-dynaform-config-header.js';
+export { SnkDynaformConfigsButton, defineCustomElement as defineCustomElementSnkDynaformConfigsButton } from './snk-dynaform-configs-button.js';
+export { SnkDynaformDetailView, defineCustomElement as defineCustomElementSnkDynaformDetailView } from './snk-dynaform-detail-view.js';
+export { SnkDynaformFieldConfig, defineCustomElement as defineCustomElementSnkDynaformFieldConfig } from './snk-dynaform-field-config.js';
+export { SnkDynaformFieldItem, defineCustomElement as defineCustomElementSnkDynaformFieldItem } from './snk-dynaform-field-item.js';
+export { SnkDynaformFieldsLayout, defineCustomElement as defineCustomElementSnkDynaformFieldsLayout } from './snk-dynaform-fields-layout.js';
+export { SnkDynaformFieldsSelector, defineCustomElement as defineCustomElementSnkDynaformFieldsSelector } from './snk-dynaform-fields-selector.js';
+export { SnkDynaformFormConfig, defineCustomElement as defineCustomElementSnkDynaformFormConfig } from './snk-dynaform-form-config.js';
+export { SnkDynaformFormView, defineCustomElement as defineCustomElementSnkDynaformFormView } from './snk-dynaform-form-view.js';
+export { SnkDynaformGuidesConfigurator, defineCustomElement as defineCustomElementSnkDynaformGuidesConfigurator } from './snk-dynaform-guides-configurator.js';
+export { SnkDynaformGuidesView, defineCustomElement as defineCustomElementSnkDynaformGuidesView } from './snk-dynaform-guides-view.js';
 export { SnkEntityList, defineCustomElement as defineCustomElementSnkEntityList } from './snk-entity-list.js';
 export { SnkEntitySearch, defineCustomElement as defineCustomElementSnkEntitySearch } from './snk-entity-search.js';
 export { SnkExporterEmailSender, defineCustomElement as defineCustomElementSnkExporterEmailSender } from './snk-exporter-email-sender.js';