@sankhyalabs/sankhyablocks 9.1.14 → 9.2.0-dev.10

package/dist/cjs/field-config_2.cjs.entry.js

@@ -7,7 +7,7 @@ const core = require('@sankhyalabs/core');
 const constants = require('./constants-6d82e405.js');
 const DataType = require('@sankhyalabs/core/dist/dataunit/metadata/DataType');
 const utils = require('@sankhyalabs/ezui/dist/collection/utils');
-const FormConfigHelper = require('./FormConfigHelper-c664dbae.js');
+const FormConfigHelper = require('./FormConfigHelper-ebb77625.js');
 
 const fieldConfigCss = ".field-config-container.sc-field-config{font-family:'Roboto';color:#2b3a54;display:flex;flex-direction:column;gap:10px;width:330px;justify-content:space-between}.header.sc-field-config{display:flex;font-weight:500;font-size:16px}.actions.sc-field-config{display:flex;align-items:flex-end;gap:12px}";
 
@@ -237,7 +237,7 @@ const FieldConfig = class {
     this._popoupElement.opened = false;
   }
   applyErrorMessage() {
-    this.fieldLabelErrorMessage = `Informe um valor para ${this.getMessage('snkConfigOptions.label.nameField')}`;
+    this.fieldLabelErrorMessage = `${this.getMessage('snkConfigOptions.validation.requiredField')} ${this.getMessage('snkConfigOptions.label.nameField')}`;
   }
   handleDiscardChanges() {
     this.initializeValues();
@@ -248,7 +248,7 @@ const FieldConfig = class {
     this._application = core.ApplicationContext.getContextValue('__SNK__APPLICATION__');
   }
   render() {
-    return (index.h("ez-popup", { heightMode: 'auto', size: 'auto', "ez-title": 'Configuração do campo', onEzClosePopup: () => this.handleDiscardChanges(), ref: ref => this._popoupElement = ref }, index.h("div", { class: 'field-config-container' }, index.h("ez-text-input", { label: this.getMessage('snkConfigOptions.label.nameField'), value: this.fieldLabel, errorMessage: this.fieldLabelErrorMessage, hasInvalid: !!this.fieldLabelErrorMessage, onEzChange: (e) => this.handleLabelChanged(e) }), index.h("ez-combo-box", { label: this.getMessage('snkConfigOptions.label.typeValueDefault'), suppressEmptyOption: true, enabled: this.enabledValueDefault(), onEzChange: (e) => this.handleDefaultTypeChanged(e), value: this.getDefaultType() }, index.h("option", { value: constants.DEFAULT_TYPE.fixed }, this.getMessage('snkConfigOptions.options.valueFixed')), index.h("option", { value: constants.DEFAULT_TYPE.variable }, this.getMessage('snkConfigOptions.options.variable'))), this.renderDefaultValueEditor(), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.clearDuplicate'), value: this.fieldCleanOnCopy, onEzChange: (e) => this.handleClearDuplicateChanged(e) }), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.requiredField'), enabled: FormConfigHelper.getEnabledByProperty('required', 'systemRequired', this.fieldDescriptor), value: FormConfigHelper.getValueByProperty('required', this.fieldDescriptor, this.fieldRequired), onEzChange: (e) => this.handleRequiredChanged(e) }), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.protectedField'), enabled: FormConfigHelper.getEnabledByProperty('readOnly', 'systemReadOnly', this.fieldDescriptor), value: FormConfigHelper.getValueByProperty('readOnly', this.fieldDescriptor, this.fieldReadOnly), onEzChange: (e) => this.handleReadOnlyChanged(e) }), index.h("div", { class: 'actions' }, index.h("ez-button", { label: 'Cancelar', onClick: () => this.handleDiscardChanges() }), index.h("ez-button", { label: 'Confirmar', class: "ez-button--primary", onClick: () => this.handleApplyChanges() })))));
+    return (index.h("ez-popup", { heightMode: 'auto', size: 'auto', "ez-title": this.getMessage('snkConfigOptions.fieldConfig.title'), onEzClosePopup: () => this.handleDiscardChanges(), ref: ref => this._popoupElement = ref }, index.h("div", { class: 'field-config-container' }, index.h("ez-text-input", { label: this.getMessage('snkConfigOptions.label.nameField'), value: this.fieldLabel, errorMessage: this.fieldLabelErrorMessage, hasInvalid: !!this.fieldLabelErrorMessage, onEzChange: (e) => this.handleLabelChanged(e) }), index.h("ez-combo-box", { label: this.getMessage('snkConfigOptions.label.typeValueDefault'), suppressEmptyOption: true, enabled: this.enabledValueDefault(), onEzChange: (e) => this.handleDefaultTypeChanged(e), value: this.getDefaultType() }, index.h("option", { value: constants.DEFAULT_TYPE.fixed }, this.getMessage('snkConfigOptions.options.valueFixed')), index.h("option", { value: constants.DEFAULT_TYPE.variable }, this.getMessage('snkConfigOptions.options.variable'))), this.renderDefaultValueEditor(), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.clearDuplicate'), value: this.fieldCleanOnCopy, onEzChange: (e) => this.handleClearDuplicateChanged(e) }), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.requiredField'), enabled: FormConfigHelper.getEnabledByProperty('required', 'systemRequired', this.fieldDescriptor), value: FormConfigHelper.getValueByProperty('required', this.fieldDescriptor, this.fieldRequired), onEzChange: (e) => this.handleRequiredChanged(e) }), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.protectedField'), enabled: FormConfigHelper.getEnabledByProperty('readOnly', 'systemReadOnly', this.fieldDescriptor), value: FormConfigHelper.getValueByProperty('readOnly', this.fieldDescriptor, this.fieldReadOnly), onEzChange: (e) => this.handleReadOnlyChanged(e) }), index.h("div", { class: 'actions' }, index.h("ez-button", { label: this.getMessage('snkConfigOptions.fieldConfig.buttons.cancel'), onClick: () => this.handleDiscardChanges() }), index.h("ez-button", { label: this.getMessage('snkConfigOptions.fieldConfig.buttons.confirm'), class: "ez-button--primary", onClick: () => this.handleApplyChanges() })))));
   }
   static get watchers() { return {
     "fieldLabel": ["observeFieldLabel"]
@@ -283,14 +283,17 @@ const FieldItem = class {
   }
   renderFieldConfig() {
     if (this.onLayoutConfig && this.dataUnit && this.messagesBuilder) {
-      return (index.h("field-config", { ref: ref => this._refFieldConfig = ref, fieldConfig: this.fieldConfig, dataUnit: this.dataUnit, fieldDescriptor: this.fieldDescriptor, messagesBuilder: this.messagesBuilder, onFieldConfigChanged: () => index.forceUpdate(this) }));
+      return (index.h("field-config", { ref: (ref) => this._refFieldConfig = ref, fieldConfig: this.fieldConfig, dataUnit: this.dataUnit, fieldDescriptor: this.fieldDescriptor, messagesBuilder: this.messagesBuilder, onFieldConfigChanged: () => index.forceUpdate(this) }));
     }
   }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
   renderActions() {
     if (this.onLayoutConfig) {
-      return (index.h("div", { class: 'actions hiddeble' }, index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.setFieldAsAvailable.emit(this.fieldConfig), size: "medium", iconName: 'minus', title: 'Remover' }), index.h("ez-button", { ref: ref => this._editIconRef = ref, mode: "icon", class: "ez-button--tertiary", onClick: this.showFieldConfig.bind(this), iconName: 'edit', size: "medium", title: 'Editar' })));
+      return (index.h("div", { class: 'actions hiddeble' }, index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.setFieldAsAvailable.emit(this.fieldConfig), size: "medium", iconName: 'minus', title: this.getMessage('snkFieldConfig.titleRemove') }), index.h("ez-button", { ref: ref => this._editIconRef = ref, mode: "icon", class: "ez-button--tertiary", onClick: this.showFieldConfig.bind(this), iconName: 'edit', size: "medium", title: this.getMessage('snkFieldConfig.titleEdit') })));
     }
-    return (index.h("div", { class: 'actions hiddeble' }, index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.addFieldToGuide.emit(this.fieldConfig), iconName: 'plus', size: "medium", title: 'Adicionar ao Layout' })));
+    return (index.h("div", { class: 'actions hiddeble' }, index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.addFieldToGuide.emit(this.fieldConfig), iconName: 'plus', size: "medium", title: this.getMessage('snkFieldConfig.titleAddToLayout') })));
   }
   loadFieldDescriptor() {
     if (this.dataUnit) {

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

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1cf293c1.js');
 const core = require('@sankhyalabs/core');
 const sortable_esm = require('./sortable.esm-9a110bb7.js');
-const FormConfigHelper = require('./FormConfigHelper-c664dbae.js');
+const FormConfigHelper = require('./FormConfigHelper-ebb77625.js');
 const constants = require('./constants-6d82e405.js');
 const utils = require('@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:grid;gap:12px;min-height:65px;width:100%;padding:6px 0;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))}.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;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 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:grid;gap:12px;min-height:65px;width:100%;padding:6px 0;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))}.group-content.empty-content.sc-fields-layout{position:relative}.group-content.empty-content.sc-fields-layout::before{content:var(--empty-content-message, \"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;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:var(--no-group-message, \"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) {
@@ -31,8 +31,10 @@ const FieldLayoutComponent = class {
     this.dataUnit = undefined;
     this.messagesBuilder = undefined;
   }
-  handleFieldConfigChanged({ detail }) {
-    const updatedField = detail;
+  onMessagesBuilderChange() {
+    this.setCustomCSSProperties();
+  }
+  handleFieldConfigChanged({ detail: updatedField }) {
     const groupToUpdate = this.groupsListMemory.find(g => g.name === updatedField.group);
     if (!groupToUpdate)
       return;
@@ -83,10 +85,9 @@ const FieldLayoutComponent = class {
   }
   buildNewGroupName() {
     var _a, _b;
-    const qtdWithNewGroupName = (_b = (_a = this.groupsListMemory.filter(g => g.name.includes(constants.GROUP_NAMES.newGroup))) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-    return qtdWithNewGroupName === 0
-      ? constants.GROUP_NAMES.newGroup
-      : `${constants.GROUP_NAMES.newGroup} (${qtdWithNewGroupName})`;
+    const newGroupMessage = this.getMessage('snkFormConfig.form.newGroup');
+    const qtdWithNewGroupName = (_b = (_a = this.groupsListMemory.filter(g => g.name.includes(newGroupMessage))) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    return qtdWithNewGroupName === 0 ? newGroupMessage : `${newGroupMessage} (${qtdWithNewGroupName})`;
   }
   makeDynamicFieldsContainersDraggable() {
     const draggableGroups = this.groupsList.filter((g) => g.name !== constants.GROUP_NAMES.noGroup);
@@ -162,7 +163,7 @@ const FieldLayoutComponent = class {
       });
     }
     catch (e) {
-      console.error('Falha ao tornar container de grupos arrastável: ', this.ID_GROUPS);
+      console.error(this.getMessage('snkFormConfig.errors.failMakeGroupsDraggable'), this.ID_GROUPS);
     }
   }
   makeFieldContainerDraggable(containerId) {
@@ -181,7 +182,7 @@ const FieldLayoutComponent = class {
       });
     }
     catch (e) {
-      console.error('Falha ao tornar grupo arrastável: ', containerId);
+      console.error(this.getMessage('snkFormConfig.errors.failMakeFieldContainerDraggable'), containerId);
     }
   }
   getContainerElement(id) {
@@ -316,21 +317,27 @@ const FieldLayoutComponent = class {
     var _a;
     if (((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name) === constants.TAB_NAMES.main)
       return;
-    return (index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.startGuideNameEdition(), size: "medium", iconName: 'edit', title: 'Renomear' }));
+    return (index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.startGuideNameEdition(), size: "medium", iconName: 'edit', title: this.getMessage('snkFormConfig.buttons.rename') }));
+  }
+  setCustomCSSProperties() {
+    document.documentElement.style.setProperty('--empty-content-message', `"${this.getMessage('snkFormConfig.form.labelDropField')}"`);
+    document.documentElement.style.setProperty('--no-group-message', `"${this.getMessage('snkFormConfig.form.subTitleInfo')}"`);
   }
   componentDidRender() {
     this.makeGroupsDraggable();
     this.makeDynamicFieldsContainersDraggable();
     this.makeFieldContainerDraggable(constants.GROUP_NAMES.noGroup);
+    this.setCustomCSSProperties();
   }
   render() {
     if (!this.selectedGuide) {
-      return (index.h(index.Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, index.h("span", { class: 'no-guide-selected' }, "Selecione uma guia e comece a configurar")));
+      return (index.h(index.Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, index.h("span", { class: 'no-guide-selected' }, this.getMessage('snkFormConfig.form.noGuideSelected'))));
     }
-    return (index.h(index.Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, this.renderGuideName(), index.h("div", { class: 'layout-container' }, index.h("ez-scroller", { direction: 'vertical', activeShadow: true }, index.h("div", { class: 'no-group-container' }, index.h("div", { id: constants.GROUP_NAMES.noGroup, class: 'group-content', "data-group-name": constants.GROUP_NAMES.noGroup }, this.renderFixedFields())), index.h("hr", null), index.h("div", { id: this.ID_GROUPS, class: 'groups-container' }, this.renderDraggableGroups()))), index.h("div", { class: 'add-group-container', onClick: this.handleAddGroup.bind(this) }, index.h("ez-icon", { slot: "leftIcon", iconName: "plus" }), index.h("span", null, "Criar novo grupo"))));
+    return (index.h(index.Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, this.renderGuideName(), index.h("div", { class: 'layout-container' }, index.h("ez-scroller", { direction: 'vertical', activeShadow: true }, index.h("div", { class: 'no-group-container' }, index.h("div", { id: constants.GROUP_NAMES.noGroup, class: 'group-content', "data-group-name": constants.GROUP_NAMES.noGroup }, this.renderFixedFields())), index.h("hr", null), index.h("div", { id: this.ID_GROUPS, class: 'groups-container' }, this.renderDraggableGroups()))), index.h("div", { class: 'add-group-container', onClick: this.handleAddGroup.bind(this) }, index.h("ez-icon", { slot: "leftIcon", iconName: "plus" }), index.h("span", null, this.getMessage('snkFormConfig.form.createNewGroup')))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
+    "messagesBuilder": ["onMessagesBuilderChange"],
     "selectedGuide": ["observeSelectedGuide"],
     "groupsList": ["observeGroupList"],
     "isEditGuideNameActive": ["observeIsEditGuideNameActive"]

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1cf293c1.js');
 const sortable_esm = require('./sortable.esm-9a110bb7.js');
-const FormConfigHelper = require('./FormConfigHelper-c664dbae.js');
+const FormConfigHelper = require('./FormConfigHelper-ebb77625.js');
 const core = require('@sankhyalabs/core');
 require('./constants-6d82e405.js');
 
@@ -17,6 +17,7 @@ const FieldsSelector = class {
     this.availableFields = [];
     this.dataUnit = undefined;
     this.filterTerm = '';
+    this.messagesBuilder = undefined;
   }
   onAddField(evt) {
     const newIndex = evt.newIndex;
@@ -42,14 +43,14 @@ const FieldsSelector = class {
   }
   renderFields() {
     const fieldsToShow = core.ArrayUtils.applyStringFilter(this.filterTerm, this.availableFields);
-    return fieldsToShow.map(field => (index.h("field-item", { key: field.name, dataUnit: this.dataUnit, fieldConfig: field })));
+    return fieldsToShow.map(field => (index.h("field-item", { key: field.name, dataUnit: this.dataUnit, fieldConfig: field, messagesBuilder: this.messagesBuilder })));
   }
   getCountText() {
     if (!this.availableFields.length)
-      return 'Nenhum campo disponível';
+      return this.getMessage('snkFormConfig.availableFields.labelNoFields');
     if (this.availableFields.length === 1)
-      return '1 campo disponível';
-    return `${this.availableFields.length} campos disponíveis`;
+      return this.getMessage('snkFormConfig.availableFields.labelOneField');
+    return `${this.availableFields.length} ${this.getMessage('snkFormConfig.availableFields.labelAvailableFields')}`;
   }
   initializeDraggableContainer() {
     new sortable_esm.Sortable(this.el.querySelector(`#${FormConfigHelper.ID_AVAILABLE_FIELDS}`), {
@@ -61,11 +62,15 @@ const FieldsSelector = class {
       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 (index.h(index.Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, index.h("span", { class: 'fields-label ez-padding-bottom--small' }, "Campos dispon\u00EDveis"), index.h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: "Buscar campo", onEzChange: evt => this.filterTerm = evt.detail }), index.h("span", { class: 'fields-count' }, this.getCountText()), index.h("ez-scroller", { direction: 'vertical', activeShadow: true }, index.h("div", { id: FormConfigHelper.ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
+    return (index.h(index.Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, index.h("span", { class: 'fields-label ez-padding-bottom--small' }, this.getMessage('snkFormConfig.availableFields.title')), index.h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: this.getMessage('snkFormConfig.availableFields.labelSearchField'), onEzChange: evt => this.filterTerm = evt.detail }), index.h("span", { class: 'fields-count' }, this.getCountText()), index.h("ez-scroller", { direction: 'vertical', activeShadow: true }, index.h("div", { id: FormConfigHelper.ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/form-config-fetcher-f6e66d64.js

@@ -0,0 +1,310 @@
+'use strict';
+
+const DataFetcher = require('./DataFetcher-ad9fb3bb.js');
+const core = require('@sankhyalabs/core');
+
+class ResourceFetcher {
+  constructor() {
+    this.templateByQuery = new Map();
+    this.buldTemplates();
+  }
+  buldTemplates() {
+    this.templateByQuery.set("fetchResource", DataFetcher.dist.gql `query($name: String!) {
+                    $queryAlias$: fetchResource(name: $name){
+                        resource
+                    }
+                  }`);
+    this.templateByQuery.set("saveResource", DataFetcher.dist.gql `mutation($resource: InputResource!) {
+                $queryAlias$: saveResource(resource: $resource){
+                    name
+                    resource                    
+                }
+              }`);
+  }
+  loadResource(name) {
+    if (ResourceFetcher._loadingResource.has(name)) {
+      return ResourceFetcher._loadingResource.get(name);
+    }
+    const promiseLoadResource = new Promise((resolve, reject) => {
+      DataFetcher.DataFetcher.get()
+        .callGraphQL({
+        values: { name },
+        query: this.templateByQuery.get("fetchResource"),
+      })
+        .then((result) => {
+        resolve(result === null || result === void 0 ? void 0 : result.resource);
+        ResourceFetcher._loadingResource.delete(name);
+      })
+        .catch((error) => {
+        reject(error);
+        ResourceFetcher._loadingResource.delete(name);
+      });
+    });
+    ResourceFetcher._loadingResource.set(name, promiseLoadResource);
+    return promiseLoadResource;
+  }
+  saveResource(resource, name) {
+    return new Promise((resolve, reject) => {
+      DataFetcher.DataFetcher.get()
+        .callGraphQL({
+        values: {
+          resource: {
+            name: name,
+            resource: JSON.stringify(resource)
+          }
+        },
+        query: this.templateByQuery.get("saveResource")
+      })
+        .then((resp) => {
+        resolve(resp);
+      })
+        .catch((error) => {
+        reject(error);
+      });
+    });
+  }
+}
+ResourceFetcher._loadingResource = new Map();
+
+class FormConfigFetcher extends ResourceFetcher {
+  constructor() {
+    super();
+    this.queryConfig = new Map();
+    this.buildTemplatesConfig();
+  }
+  buildTemplatesConfig() {
+    this.queryConfig.set("fetchUserAvailableConfigs", DataFetcher.dist.gql `query($name: String!) {
+                    $queryAlias$: fetchUserAvailableConfigs(name: $name){
+                        name
+                        origin
+                        key
+                  }
+                }`);
+    this.queryConfig.set("fetchLegacyConfig", DataFetcher.dist.gql `query($name: String!) {
+                    $queryAlias$: fetchLegacyConfig(name: $name){
+                        name
+                        resource
+                  }
+                }`);
+    this.queryConfig.set("fetchDefaultConfig", DataFetcher.dist.gql `query($name: String!) {
+                    $queryAlias$: fetchDefaultConfig(name: $name){
+                        name
+                        resource
+                  }
+                }`);
+  }
+  loadFormConfig(formName, resourceID) {
+    return new Promise((accept, reject) => {
+      Promise.all([
+        this.loadResource(this.getPath(resourceID, formName)),
+        this.loadResource(this.getPath(`FormCardState:${resourceID}`, formName, "form-card")),
+        this.loadResource(this.getPath(resourceID, formName, "summary")),
+        this.loadResource(this.getPath(resourceID, formName, "defaultValues"))
+      ])
+        .then(([configAsString, formCardState, summary, defaultValues]) => {
+        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)); });
+          }
+          config.fields = fields === null || fields === void 0 ? void 0 : fields.map((field) => {
+            if ("readonly" in field) {
+              const readOnly = field['readonly'] === true;
+              delete field['readonly'];
+              field.readOnly = readOnly;
+            }
+            return field;
+          });
+        }
+        if (formCardState != undefined) {
+          if (config == undefined) {
+            config = { emptyConfig: true, fields: [] };
+          }
+          config.cardsState = new Map(JSON.parse(formCardState));
+        }
+        if (summary != undefined) {
+          if (config == undefined) {
+            config = { emptyConfig: true, fields: [] };
+          }
+          config.summary = new Map(Object.entries(JSON.parse(summary)));
+        }
+        if (defaultValues != undefined) {
+          if (config == undefined) {
+            config = { emptyConfig: true, fields: [] };
+          }
+          config.defaultVars = new Map(Object.entries(JSON.parse(defaultValues)));
+        }
+        accept(config);
+      })
+        .catch((error) => {
+        reject(error);
+      });
+    });
+  }
+  getTabName(tab) {
+    if (typeof tab === 'object') { // ITabConfig type
+      return tab.label;
+    }
+    return tab; //string type
+  }
+  saveCardState(cardsState, formName, resourceID) {
+    const completePath = this.getPath(`FormCardState:${resourceID}`, formName, "form-card");
+    return new Promise((resolve, reject) => {
+      this.saveResource(Array.from(cardsState.entries()), completePath)
+        .then((resp) => {
+        resolve(new Map(JSON.parse(resp.resource)));
+      })
+        .catch((error) => {
+        reject(error);
+      });
+    });
+  }
+  saveConfig(config, formName, resourceID) {
+    //Essas informações não devem ser salvas na configuração
+    delete config.cardsState;
+    delete config.defaultVars;
+    delete config.summary;
+    const completePath = this.getPath(resourceID, formName);
+    return new Promise((resolve, reject) => {
+      this.saveResource(config, completePath)
+        .then((resp) => {
+        resolve(JSON.parse(resp.resource));
+      })
+        .catch((error) => {
+        reject(error);
+      });
+    });
+  }
+  fetchUserAvailableConfigs(formName, resourceID) {
+    const name = this.getPath(resourceID, formName);
+    return new Promise((resolve, reject) => {
+      DataFetcher.DataFetcher.get()
+        .callGraphQL({
+        values: { name },
+        query: this.queryConfig.get("fetchUserAvailableConfigs"),
+      })
+        .then((result) => {
+        resolve(result);
+      })
+        .catch((error) => {
+        reject(error);
+      });
+    });
+  }
+  fetchLegacyConfig(formName, resourceID) {
+    const name = this.getPath(resourceID, formName);
+    return new Promise((resolve, reject) => {
+      DataFetcher.DataFetcher.get()
+        .callGraphQL({
+        values: { name },
+        query: this.queryConfig.get("fetchLegacyConfig"),
+      })
+        .then((result) => {
+        resolve(core.ObjectUtils.stringToObject((result === null || result === void 0 ? void 0 : result.resource) || ''));
+      })
+        .catch((error) => {
+        reject(error);
+      });
+    });
+  }
+  fetchDefaultConfig(formName, resourceID) {
+    const name = this.getPath(resourceID, formName);
+    return new Promise((resolve, reject) => {
+      DataFetcher.DataFetcher.get()
+        .callGraphQL({
+        values: { name },
+        query: this.queryConfig.get("fetchDefaultConfig"),
+      })
+        .then((result) => {
+        if (!(result === null || result === void 0 ? void 0 : result.resource)) {
+          resolve(null);
+        }
+        resolve(core.ObjectUtils.stringToObject(result === null || result === void 0 ? void 0 : result.resource));
+      })
+        .catch((error) => {
+        reject(error);
+      });
+    });
+  }
+  getPath(resourceID, name, authority = "form") {
+    if (name) {
+      return `cfg://${authority}/${resourceID}/${name}`;
+    }
+    return `cfg://${authority}/${resourceID}`;
+  }
+  async fetchLegacyConfigurableForm(configName) {
+    const payload = { 'requestBody': { 'config': { 'chave': configName, 'tipo': 'T' } } };
+    const response = await DataFetcher.DataFetcher.get().callServiceBroker('SystemUtilsSP.getConf', JSON.stringify(payload));
+    if (core.ObjectUtils.isEmpty(response))
+      return undefined;
+    return this.buildLegacyConfigurableForm(response);
+  }
+  async fetchSimpleFormConfig(configName) {
+    const payload = { 'requestBody': { 'formConfig': { 'configName': configName } } };
+    const response = await DataFetcher.DataFetcher.get().callServiceBroker('FormConfig.getFormConfig', JSON.stringify(payload));
+    return this.processConfig(response);
+  }
+  async saveSimpleFormConfig(configName, fieldList) {
+    const payload = this.buildSaveSimpleFormConfigPayload(configName, fieldList);
+    const response = await DataFetcher.DataFetcher.get().callServiceBroker('FormConfig.saveFormConfig', JSON.stringify(payload));
+    this.processConfig(response);
+  }
+  processConfig(response) {
+    if (core.ObjectUtils.isEmpty(response))
+      return [];
+    const fields = this.getResponseAsArray(response);
+    return fields.map(field => field.name);
+  }
+  getResponseAsArray(response) {
+    var _a, _b, _c;
+    const rawFields = (_c = (_b = (_a = response === null || response === void 0 ? void 0 : response.formConfig) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.field) !== null && _c !== void 0 ? _c : [];
+    return Array.isArray(rawFields) ? rawFields : [rawFields];
+  }
+  buildSaveSimpleFormConfigPayload(configName, fieldNameList) {
+    const fieldList = fieldNameList.map(fieldName => { return { name: fieldName }; });
+    return {
+      formConfig: {
+        configName,
+        layout: {
+          field: fieldList,
+        },
+        metadata: { field: [] },
+      }
+    };
+  }
+  async restoreFormConfig(configName) {
+    const payload = { 'requestBody': { 'formConfig': { 'configName': configName } } };
+    await DataFetcher.DataFetcher.get().callServiceBroker('FormConfig.restoreFormConfig', JSON.stringify(payload));
+  }
+  buildLegacyConfigurableForm(config) {
+    var _a, _b, _c;
+    const rawFields = (_c = (_b = (_a = config === null || config === void 0 ? void 0 : config.formConfig) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.field) !== null && _c !== void 0 ? _c : [];
+    return { emptyConfig: false, fields: Array.isArray(rawFields) ? rawFields : [rawFields] };
+  }
+  async fetchLayoutFormConfig(configName) {
+    const payload = { 'requestBody': { 'config': { 'chave': configName, 'tipo': 'T' } } };
+    const response = await DataFetcher.DataFetcher.get().callServiceBroker('SystemUtilsSP.getConf', JSON.stringify(payload));
+    if (core.ObjectUtils.isEmpty(response))
+      return undefined;
+    return response.config;
+  }
+  async saveLayoutFormConfig(configName, config) {
+    const payload = { 'requestBody': { 'config': Object.assign(Object.assign({}, config), { 'chave': configName, 'tipo': 'T' }) } };
+    const response = await DataFetcher.DataFetcher.get().callServiceBroker('SystemUtilsSP.saveConf', JSON.stringify(payload));
+    if (core.ObjectUtils.isEmpty(response))
+      return undefined;
+    return response;
+  }
+}
+exports.UserConfigType = void 0;
+(function (UserConfigType) {
+  UserConfigType["USER"] = "USER";
+  UserConfigType["DEFAULT"] = "DEFAULT";
+  UserConfigType["SHARED"] = "SHARED";
+})(exports.UserConfigType || (exports.UserConfigType = {}));
+
+exports.FormConfigFetcher = FormConfigFetcher;
+exports.ResourceFetcher = ResourceFetcher;

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

@@ -8,7 +8,7 @@ const core = require('@sankhyalabs/core');
 const utils = require('@sankhyalabs/ezui/dist/collection/utils');
 const constants = require('./constants-6d82e405.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 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:var(--no-hidden-guides-message, \"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:var(--no-visible-guides-message, \"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) {
@@ -33,6 +33,9 @@ const GuidesConfigurator = class {
     this.selectedGuide = undefined;
     this.messagesBuilder = undefined;
   }
+  onMessagesBuilderChange() {
+    this.setCustomCSSProperties();
+  }
   observeVisibleGuides(newGuides) {
     this.initGuidesConfig(newGuides);
   }
@@ -99,7 +102,9 @@ const GuidesConfigurator = class {
     const guidesToShow = core.ArrayUtils.applyStringFilter(this.filterTerm, guides);
     return guidesToShow.map(guide => {
       var _a;
-      return (index.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) }, index.h("span", null, index.h("ez-icon", { iconName: "drag-indicator", class: 'ez-margin-right--small' })), index.h("span", { class: 'item-label' }, guide.label), index.h("div", { class: 'actions' }, index.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' }), index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: e => this.handleDeleteGuide(guide, e), size: "medium", iconName: 'delete', title: 'Excluir' }))));
+      return (index.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) }, index.h("span", null, index.h("ez-icon", { iconName: "drag-indicator", class: 'ez-margin-right--small' })), index.h("span", { class: 'item-label' }, guide.label), index.h("div", { class: 'actions' }, index.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 ?
+          this.getMessage('snkFormConfig.guidesConfigurator.actions.hide') :
+          this.getMessage('snkFormConfig.guidesConfigurator.actions.show') }), index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: e => this.handleDeleteGuide(guide, e), size: "medium", iconName: 'delete', title: this.getMessage('snkFormConfig.guidesConfigurator.actions.delete') }))));
     });
   }
   getContainerElement(id) {
@@ -145,16 +150,22 @@ const GuidesConfigurator = class {
   handleSelectMainGuide() {
     this.guideSelected.emit(this.mainGuide);
   }
+  setCustomCSSProperties() {
+    document.documentElement.style.setProperty('--no-hidden-guides-message', `"${this.getMessage('snkFormConfig.guidesConfigurator.noHiddenGuides')}"`);
+    document.documentElement.style.setProperty('--no-visible-guides-message', `"${this.getMessage('snkFormConfig.guidesConfigurator.noVisibleGuides')}"`);
+  }
   componentDidLoad() {
     this.initializeDraggableContainers();
     this.initGuidesConfig(this.guidesList);
+    this.setCustomCSSProperties();
   }
   render() {
     var _a, _b, _c;
-    return (index.h("ez-sidebar-navigator", { class: 'ezSidebarNavigator', type: 'fixed', size: 'md', titleMenu: 'Guias' }, index.h("div", { class: 'navigator-container' }, index.h("ez-filter-input", { slot: "content", mode: "slim", label: "Buscar guia", onEzChange: evt => this.filterTerm = evt.detail }), index.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' : ''}` }, index.h("span", null, (_c = this.mainGuide) === null || _c === void 0 ? void 0 : _c.label)), index.h("div", { class: 'collapsible-container' }, index.h("div", { class: 'collapsible-item' }, index.h("ez-collapsible-box", { label: "Guias vis\u00EDveis", headerSize: "large" }, index.h("div", { id: this.ID_VISIBLE_GUIDES, class: `guide-list ${!this.visibleGuides.length ? 'visible-empty-content' : ''}` }, this.renderItems(this.visibleGuides)))), index.h("div", { class: 'collapsible-item' }, index.h("ez-collapsible-box", { label: "Guias ocultas", headerSize: "large" }, index.h("div", { id: this.ID_HIDDEN_GUIDES, class: `guide-list ${!this.hiddenGuides.length ? 'hidden-empty-content' : ''}` }, this.renderItems(this.hiddenGuides))))), index.h("div", { class: 'add-button-container', onClick: this.handleAddGuide.bind(this) }, index.h("ez-icon", { slot: "leftIcon", iconName: "plus" }), index.h("span", null, "Criar nova guia")))));
+    return (index.h("ez-sidebar-navigator", { class: 'ezSidebarNavigator', type: 'fixed', size: 'md', titleMenu: this.getMessage('snkFormConfig.guidesConfigurator.title') }, index.h("div", { class: 'navigator-container' }, index.h("ez-filter-input", { slot: "content", mode: "slim", label: this.getMessage('snkFormConfig.guidesConfigurator.searchGuide'), onEzChange: evt => this.filterTerm = evt.detail }), index.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' : ''}` }, index.h("span", null, (_c = this.mainGuide) === null || _c === void 0 ? void 0 : _c.label)), index.h("div", { class: 'collapsible-container' }, index.h("div", { class: 'collapsible-item' }, index.h("ez-collapsible-box", { label: this.getMessage('snkFormConfig.guidesConfigurator.visibleGuides'), headerSize: "large" }, index.h("div", { id: this.ID_VISIBLE_GUIDES, class: `guide-list ${!this.visibleGuides.length ? 'visible-empty-content' : ''}` }, this.renderItems(this.visibleGuides)))), index.h("div", { class: 'collapsible-item' }, index.h("ez-collapsible-box", { label: this.getMessage('snkFormConfig.guidesConfigurator.hiddenGuides'), headerSize: "large" }, index.h("div", { id: this.ID_HIDDEN_GUIDES, class: `guide-list ${!this.hiddenGuides.length ? 'hidden-empty-content' : ''}` }, this.renderItems(this.hiddenGuides))))), index.h("div", { class: 'add-button-container', onClick: this.handleAddGuide.bind(this) }, index.h("ez-icon", { slot: "leftIcon", iconName: "plus" }), index.h("span", null, this.getMessage('snkFormConfig.guidesConfigurator.createNewGuide'))))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
+    "messagesBuilder": ["onMessagesBuilderChange"],
     "guidesList": ["observeVisibleGuides"],
     "selectedGuide": ["observeSelectedGuide"]
   }; }