@sankhyalabs/sankhyablocks 10.1.0-dev.23 → 10.1.0-dev.25

package/dist/components/snk-form-view2.js

@@ -1,11 +1,24 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
+import { Action, UserInterface, ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
 import { DataBinder } from '@sankhyalabs/ezui/dist/collection/utils/form';
 import { focusOnFieldSerch, SEARCH_FIELD_FULL_WIDTH, FormLayout } from '@sankhyalabs/ezui/dist/collection/utils';
-import { d as defineCustomElement$1 } from './snk-form-summary2.js';
+import { g as getPKs, d as defineCustomElement$1 } from './snk-image-input2.js';
+import { d as defineCustomElement$2 } from './snk-form-summary2.js';
 
 const snkFormViewCss = ".sc-snk-form-view-h{display:flex;width:100%;--ez-form-card-summary-field-content-weight:700}.level-path.sc-snk-form-view{color:var(--color--title-primary, #2B3A54);font-weight:var(--text-weight--medium, 400);padding-right:3px}.summary-wrapper.sc-snk-form-view{display:flex;overflow:hidden}.summary-header.sc-snk-form-view{border-bottom:1px solid var(--color--strokes);margin-bottom:var(--space--medium);padding-bottom:var(--space--medium)}.summary-container.sc-snk-form-view{display:flex;flex-direction:column}.summary-container.sc-snk-form-view{padding-right:calc(var(--space--extra-large) / 1.5)}.summary-field.sc-snk-form-view{min-width:30px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-field__title.sc-snk-form-view{color:var(--text--primary, #626e82);font-size:var(--title--small);white-space:nowrap;font-weight:var(--text-weight--medium)}.summary-field__content.sc-snk-form-view{color:var(--title--primary, #2b3a54);font-size:var(--text--large);font-weight:var(--ez-form-card-summary-field-content-weight)}";
 
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
 const SnkFormView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -15,7 +28,23 @@ const SnkFormView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.formItemsReady = createEvent(this, "formItemsReady", 7);
     this._customEditors = new Map();
     this._fieldProps = new Map();
+    this.dataUnitObserver = async (action) => {
+      if (action.type === Action.RECORDS_COPIED) {
+        const sourcePK = this.buildSourceRecordPK(action);
+        this.getImageField().forEach(async (field) => {
+          this.dataUnit.setFieldValue(field.name, JSON.stringify(sourcePK));
+        });
+      }
+    };
+    this.customUiBuilders = new Map([
+      [UserInterface.IMAGE, (_a) => {
+          var { name } = _a, props = __rest(_a, ["name"]);
+          return h("snk-image-input", Object.assign({ dataUnit: this.dataUnit, maxSize: Infinity, fieldName: name, entityName: this.entityPath }, props));
+        }
+      ]
+    ]);
     this._singleColumn = false;
+    this._currentFormLayout = undefined;
     this.levelPath = undefined;
     this.fieldSearch = undefined;
     this.label = undefined;
@@ -32,6 +61,7 @@ const SnkFormView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.fieldToFocus = undefined;
     this.customEditors = undefined;
     this.fieldsProps = undefined;
+    this.entityPath = undefined;
   }
   async showUp() {
     if (this._formView) {
@@ -81,6 +111,11 @@ const SnkFormView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     }
   }
+  async observeDataUnit(newValue, oldValue) {
+    if (newValue !== oldValue && newValue) {
+      newValue.subscribe(this.dataUnitObserver);
+    }
+  }
   changeFix() {
     this.fixed = !this.fixed;
     this.emitEvent("fixed");
@@ -138,28 +173,41 @@ const SnkFormView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this._dataBinder != undefined) {
       this._dataBinder.onDisconnectedCallback();
     }
+    if (this.dataUnit) {
+      this.dataUnit.unsubscribe(this.dataUnitObserver);
+    }
+  }
+  async componentWillLoad() {
+    await this.initLayoutFormConfig();
+  }
+  async componentWillLoad() {
+    await this.initLayoutFormConfig();
   }
   componentDidLoad() {
     this.observePropsCustomEditor(this.customEditors);
     this.observeFieldsProps(this.fieldsProps);
-    this.initLayoutFormConfig();
   }
   async initLayoutFormConfig() {
-    const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-    const layoutFormConfig = await (_application === null || _application === void 0 ? void 0 : _application.getLayoutFormConfig());
+    var _a;
+    if (!this._application) {
+      this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    }
+    const layoutFormConfig = await ((_a = this._application) === null || _a === void 0 ? void 0 : _a.getLayoutFormConfig());
     if (layoutFormConfig) {
       this.setSingleColumn(layoutFormConfig);
       this.registerNotifyListeners(layoutFormConfig);
     }
   }
   setSingleColumn(layoutFormConfig) {
-    this._singleColumn = (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CASCADE;
+    this._singleColumn = (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CASCADE || (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CLASSIC_CASCADE;
+    this._currentFormLayout = layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config;
   }
   registerNotifyListeners(layoutFormConfig) {
     if (!layoutFormConfig)
       return;
     layoutFormConfig.onConfigChange((config) => {
-      this._singleColumn = (config === FormLayout.CASCADE);
+      this._singleColumn = (config === FormLayout.CASCADE || config === FormLayout.CLASSIC_CASCADE);
+      this._currentFormLayout = config;
     });
   }
   componentDidRender() {
@@ -196,6 +244,22 @@ const SnkFormView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       });
     }
   }
+  buildSourceRecordPK(action) {
+    var _a, _b;
+    const currentRecord = ((_a = action.payload) === null || _a === void 0 ? void 0 : _a[0]) || {};
+    const sourceBase64 = currentRecord["__record__source__id__"];
+    const sourceRecord = JSON.parse(atob(sourceBase64 || ''));
+    delete sourceRecord["__DATA_UNIT_NAME__"];
+    const pkFields = Object.keys(getPKs(this.dataUnit));
+    const filteredSourceRecord = {};
+    for (const pkField of pkFields) {
+      filteredSourceRecord[pkField] = (_b = sourceRecord[pkField]) === null || _b === void 0 ? void 0 : _b.value;
+    }
+    return filteredSourceRecord;
+  }
+  getImageField() {
+    return this.dataUnit.metadata.fields.filter(field => field.userInterface === UserInterface.IMAGE);
+  }
   render() {
     return (h(Host, { class: "ez-box__container" }, h("div", { class: "summary-header ez-flex ez-size-width--full", ref: ref => this._headerContainer = ref }, h("div", { class: "ez-flex ez-text ez-title--primary ez-text--bold ez-flex--justify-start ez-flex--align-items-center ez-col--sd-9" }, this.levelPath ? h("span", { class: "level-path" }, this.levelPath + " /") : undefined, this.label), h("div", { class: "ez-flex ez-flex--justify-end ez-col--sd-3" }, this.canFix &&
       h("ez-button", { class: "ez-padding-left--medium", mode: "icon", size: "small", iconName: this.fixed ? "un-pin" : "push-pin", "data-element-id": ElementIDUtils.getInternalIDInfo("toggleFixed_ezFormCard"), onClick: () => this.changeFix(), title: this.fixed ? "Desafixar" : "Fixar" }), this.canExpand &&
@@ -203,11 +267,12 @@ const SnkFormView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       ?
         h("snk-form-summary", { summary: this.getCardSummary() })
       :
-        h("ez-form-view", { ref: ref => this._formView = ref, fields: this.fields, onEzContentReady: evt => this.bindFields(evt.detail), onFormItemsReady: (event) => this.handleFormItemsReady(event), singleColumn: this._singleColumn }), this.fieldSearch && h("ez-popover", { ref: elem => (this._ezPopoverFieldColumn = elem), overlayType: "none" }, this.fieldSearch)));
+        h("ez-form-view", { ref: ref => this._formView = ref, fields: this.fields, onEzContentReady: evt => this.bindFields(evt.detail), onFormItemsReady: (event) => this.handleFormItemsReady(event), singleColumn: this._singleColumn, customUiBuilders: this.customUiBuilders, formLayout: this._currentFormLayout }), this.fieldSearch && h("ez-popover", { ref: elem => (this._ezPopoverFieldColumn = elem), overlayType: "none" }, this.fieldSearch)));
   }
   static get watchers() { return {
     "customEditors": ["observePropsCustomEditor"],
-    "fieldsProps": ["observeFieldsProps"]
+    "fieldsProps": ["observeFieldsProps"],
+    "dataUnit": ["observeDataUnit"]
   }; }
   static get style() { return snkFormViewCss; }
 }, [6, "snk-form-view", {
@@ -227,7 +292,9 @@ const SnkFormView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "fieldToFocus": [1, "field-to-focus"],
     "customEditors": [16],
     "fieldsProps": [16],
+    "entityPath": [1, "entity-path"],
     "_singleColumn": [32],
+    "_currentFormLayout": [32],
     "showUp": [64],
     "addCustomEditor": [64],
     "setFieldProp": [64],
@@ -237,7 +304,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-form-view", "snk-form-summary"];
+  const components = ["snk-form-view", "snk-form-summary", "snk-image-input"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-form-view":
       if (!customElements.get(tagName)) {
@@ -245,6 +312,11 @@ function defineCustomElement() {
       }
       break;
     case "snk-form-summary":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "snk-image-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/snk-grid2.js

@@ -563,7 +563,7 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return disabledButtons;
   }
   getInvisibleButtons() {
-    var _a, _b;
+    var _a, _b, _c;
     let invisibleButtons = [];
     if (!this._dataUnit || this._dataUnit.records.length === 0)
       invisibleButtons.push(TaskbarElement.DATA_EXPORTER);
@@ -571,6 +571,8 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       invisibleButtons.push(TaskbarElement.ACTIONS_BUTTON);
     if (((_b = this._dataState) === null || _b === void 0 ? void 0 : _b.selectionInfo.length) === 1)
       invisibleButtons.push(TaskbarElement.UPDATE_MULTIPLE);
+    if (!((_c = this._dataState) === null || _c === void 0 ? void 0 : _c.selectionInfo.length))
+      invisibleButtons.push(TaskbarElement.FORM_MODE);
     return invisibleButtons;
   }
   componentWillRender() {

package/dist/components/snk-image-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkImageInput extends Components.SnkImageInput, HTMLElement {}
+export const SnkImageInput: {
+  prototype: SnkImageInput;
+  new (): SnkImageInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-image-input.js

@@ -0,0 +1,6 @@
+import { S as SnkImageInput$1, d as defineCustomElement$1 } from './snk-image-input2.js';
+
+const SnkImageInput = SnkImageInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkImageInput, defineCustomElement };

package/dist/components/snk-image-input2.js

@@ -0,0 +1,302 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { ApplicationContext, Action } from '@sankhyalabs/core';
+import { S as SnkMessageBuilder } from './SnkMessageBuilder.js';
+
+async function base64ToBlob(base64) {
+  const response = await fetch(base64);
+  return await response.blob();
+}
+function buildFileKey(entityName, fieldName) {
+  if (entityName) {
+    return `${entityName}_${fieldName}`;
+  }
+  else {
+    return fieldName;
+  }
+}
+function hasSpecialCharacters(value) {
+  const specialChars = /[ !@#$%^&*()+\-=\[\]{};':"\\|,.<>\/?]/;
+  return specialChars.test(value);
+}
+/**
+ * Gera a URL base para upload de sessão
+ */
+function getSessionUploadBaseUrl(fileKey, context = 'mge') {
+  let url = `/${context}/sessionUpload.${context}?sessionkey=${fileKey}`;
+  // Verifica se precisa processar caracteres especiais
+  if (canProcessSpecialKeys(context) && hasSpecialCharacters(fileKey)) {
+    url += `&encodedKey=${btoa(encodeURI(fileKey))}`;
+  }
+  return url;
+}
+/**
+ * Verifica se pode processar chaves especiais
+ * Baseado no método canProcessSpecialKeys do sessionfileupload.service.js
+ */
+async function canProcessSpecialKeys(context) {
+  var _a;
+  const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+  if (!application)
+    return false;
+  const resourceId = await ((_a = application.getResourceID) === null || _a === void 0 ? void 0 : _a.call(application)) || '';
+  const adPrefix = "br.com.sankhya.menu.adicional";
+  return context === 'mge' && resourceId.startsWith(adPrefix);
+}
+/**
+ * Constrói a URL de upload
+ * Baseado no método buildUploadURL do sessionfileupload.service.js
+ */
+function buildUploadURL(fileKey) {
+  let url = getSessionUploadBaseUrl(fileKey);
+  url += "&fitem=S&salvar=S&useCache=N";
+  return url;
+}
+/**
+ * Faz upload de arquivo para a sessão usando XMLHttpRequest
+ * Baseado no método uploadSessionFile do sessionfileupload.service.js
+ */
+async function sessionFileUpload(blob, entityName, fieldName, onProgress) {
+  const fileKey = buildFileKey(entityName, fieldName);
+  const uploadUrl = buildUploadURL(fileKey);
+  return new Promise((resolve, reject) => {
+    const formData = new FormData();
+    formData.append('arquivo', blob);
+    const http = new XMLHttpRequest();
+    http.addEventListener("load", () => {
+      if (http.status >= 200 && http.status < 300) {
+        resolve(`/mge/UPLOADING_${fileKey}.dbimage`);
+      }
+      else {
+        reject(new Error(`Upload failed: ${http.statusText}`));
+      }
+    });
+    http.addEventListener("error", () => {
+      reject(new Error('Upload error'));
+    });
+    if (onProgress) {
+      http.upload.addEventListener("progress", onProgress);
+    }
+    http.open("POST", uploadUrl);
+    http.send(formData);
+  });
+}
+function getUrlBase() {
+  return window.location.origin;
+}
+function getBaseUrl(pk, entityName, fieldName) {
+  if (!pk)
+    return undefined;
+  const baseUrl = getUrlBase();
+  let url = `${baseUrl}/mge/${entityName}@${fieldName}`;
+  for (const pkField in pk) {
+    url += `@${pkField}=${pk[pkField]}`;
+  }
+  url += '.dbimage';
+  return url;
+}
+function getPKs(dataUnit) {
+  if (!dataUnit) {
+    return undefined;
+  }
+  const pk = {};
+  const fields = dataUnit.metadata.fields;
+  const selectedRecord = dataUnit.getSelectedRecord();
+  fields.forEach((field) => {
+    if (field.properties['isPrimaryKey']) {
+      pk[field.name] = selectedRecord[field.name];
+    }
+  });
+  return pk;
+}
+async function imageBlobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+async function downloadImage(pks, fieldName, entityName) {
+  const uploadUrl = getBaseUrl(pks, entityName, fieldName);
+  if (!uploadUrl) {
+    return;
+  }
+  try {
+    const response = await fetch(uploadUrl);
+    if (response.ok) {
+      const blob = await response.blob();
+      return await imageBlobToBase64(blob);
+    }
+  }
+  catch (error) {
+    console.error('Error downloading image:', error);
+  }
+}
+
+const snkImageInputCss = ":host{display:block}";
+
+const SnkImageInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.imageError = createEvent(this, "imageError", 7);
+    this.dataUnitObserver = async (action) => {
+      var _a;
+      const actionsMoveSelection = [Action.NEXT_SELECTED, Action.PREVIOUS_SELECTED];
+      if (actionsMoveSelection.includes(action.type)) {
+        await this.loadImage();
+        return;
+      }
+      const selection = ((_a = action.payload) === null || _a === void 0 ? void 0 : _a.selection) || [];
+      if (action.type === Action.SELECTION_CHANGED && selection.length > 0) {
+        await this.loadImage();
+        return;
+      }
+      if (action.type === Action.RECORDS_ADDED) {
+        await this.clearImage();
+        return;
+      }
+    };
+    this.dataUnit = undefined;
+    this.fieldName = undefined;
+    this.entityName = undefined;
+    this.enabled = true;
+    this.acceptType = undefined;
+    this.maxSize = undefined;
+    this.label = undefined;
+    this.imageValue = undefined;
+    this.loading = true;
+  }
+  /**
+   * Força o reload da imagem
+   */
+  async reloadImage(pks) {
+    await this.loadImage(pks);
+  }
+  getMessage(key, params) {
+    if (!this.messagesBuilder) {
+      this.messagesBuilder = new SnkMessageBuilder();
+    }
+    return this.messagesBuilder.getMessage(key, params);
+  }
+  async clearImage() {
+    this.imageValue = undefined;
+  }
+  async handleImageChange(event) {
+    const base64 = event.detail;
+    if (!base64) {
+      await this.clearImage();
+      await this.updatedataUnitField(true);
+      return;
+    }
+    const blob = await base64ToBlob(base64);
+    if (this.maxSize && blob.size > this.maxSize * 1024) {
+      const errorMsg = this.getMessage('snkImageInput.errorImageSize') + this.maxSize + '(KB)';
+      this.imageError.emit(errorMsg);
+      if (this.application) {
+        await this.application.error(this.getMessage('snkImageInput.errorTitle'), errorMsg);
+      }
+      return;
+    }
+    this.imageValue = base64;
+    await sessionFileUpload(blob, this.entityName, this.fieldName);
+    await this.updatedataUnitField();
+  }
+  async updatedataUnitField(deleted = false) {
+    if (!this.dataUnit || !this.dataUnit.getSelectedRecord()) {
+      return;
+    }
+    if (deleted) {
+      await this.dataUnit.setFieldValue(this.fieldName, 'deletado');
+    }
+    else {
+      await this.dataUnit.setFieldValue(this.fieldName, `$file.session.key{${buildFileKey(this.entityName, this.fieldName)}}`);
+    }
+  }
+  async handleImageError(event) {
+    this.imageError.emit(event.detail);
+    if (this.application) {
+      await this.application.error(this.getMessage('snkImageInput.errorTitle'), event.detail);
+    }
+  }
+  getPksFromDataUnit() {
+    if (!this.dataUnit) {
+      return undefined;
+    }
+    const selectedRecord = this.dataUnit.getSelectedRecord();
+    if (!selectedRecord) {
+      return undefined;
+    }
+    const fieldValue = selectedRecord[this.fieldName];
+    if (!fieldValue) {
+      return undefined;
+    }
+    try {
+      const pk = JSON.parse(fieldValue);
+      return pk;
+    }
+    catch (error) {
+      console.error('Error parsing PK from data unit field:', error);
+      return undefined;
+    }
+  }
+  async loadImage(pks) {
+    var _a;
+    this.loading = true;
+    if (this.dataUnit && this.entityName) {
+      pks = (_a = pks !== null && pks !== void 0 ? pks : this.getPksFromDataUnit()) !== null && _a !== void 0 ? _a : getPKs(this.dataUnit);
+      this.imageValue = await downloadImage(pks, this.fieldName, this.entityName);
+    }
+    this.loading = false;
+  }
+  async componentWillLoad() {
+    this.application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (!this.messagesBuilder) {
+      this.messagesBuilder = new SnkMessageBuilder();
+    }
+    if (this.dataUnit) {
+      this.dataUnit.subscribe(this.dataUnitObserver);
+    }
+  }
+  disconnectedCallback() {
+    if (this.dataUnit) {
+      this.dataUnit.unsubscribe(this.dataUnitObserver);
+    }
+  }
+  async componentDidLoad() {
+    await this.loadImage();
+  }
+  render() {
+    return (h(Host, null, h("ez-image-input", { enabled: this.enabled, label: this.label, name: this.fieldName, value: this.imageValue, maxFileSize: this.maxSize ? this.maxSize * 1024 : undefined, accept: this.acceptType || 'image/png,image/jpeg,image/gif', onEzChange: (e) => this.handleImageChange(e), onEzError: (e) => this.handleImageError(e), loading: this.loading })));
+  }
+  static get style() { return snkImageInputCss; }
+}, [1, "snk-image-input", {
+    "dataUnit": [16],
+    "fieldName": [1, "field-name"],
+    "entityName": [1, "entity-name"],
+    "enabled": [4],
+    "acceptType": [1, "accept-type"],
+    "maxSize": [2, "max-size"],
+    "label": [1],
+    "imageValue": [32],
+    "loading": [32],
+    "reloadImage": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-image-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-image-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkImageInput);
+      }
+      break;
+  } });
+}
+
+export { SnkImageInput as S, defineCustomElement as d, getPKs as g };

package/dist/components/snk-layout-form-config2.js

@@ -56,7 +56,7 @@ const SnkLayoutFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     return (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, params);
   }
   render() {
-    return (h("div", { class: "ez-flex ez-flex--column" }, h("div", { class: "ez-margin-bottom--small" }, h("ez-check", { label: this.getMessage('snkLayoutFormConfig.cascadeLayout.label'), class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.CASCADE), value: this.layoutType === FormLayout.CASCADE }), h("snk-view-representation", { mode: FormLayout.CASCADE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, this.getMessage('snkLayoutFormConfig.cascadeLayout.description'))), h("div", null, h("ez-check", { label: this.getMessage('snkLayoutFormConfig.sideBySideLayout.label'), class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.SIDE_BY_SIDE), value: this.layoutType === FormLayout.SIDE_BY_SIDE }), h("snk-view-representation", { mode: FormLayout.SIDE_BY_SIDE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, this.getMessage('snkLayoutFormConfig.sideBySideLayout.description')))));
+    return (h("div", { class: "ez-flex ez-flex--column" }, h("div", { class: "ez-margin-bottom--small" }, h("ez-check", { label: this.getMessage('snkLayoutFormConfig.cascadeLayout.label'), class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.CASCADE), value: this.layoutType === FormLayout.CASCADE }), h("snk-view-representation", { mode: FormLayout.CASCADE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, this.getMessage('snkLayoutFormConfig.cascadeLayout.description'))), h("div", { class: "ez-margin-bottom--small" }, h("ez-check", { label: this.getMessage('snkLayoutFormConfig.classicCascadeLayout.label'), class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.CLASSIC_CASCADE), value: this.layoutType === FormLayout.CLASSIC_CASCADE }), h("snk-view-representation", { mode: FormLayout.CLASSIC_CASCADE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, this.getMessage('snkLayoutFormConfig.classicCascadeLayout.description'))), h("div", { class: "ez-margin-bottom--small" }, h("ez-check", { label: this.getMessage('snkLayoutFormConfig.sideBySideLayout.label'), class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.SIDE_BY_SIDE), value: this.layoutType === FormLayout.SIDE_BY_SIDE }), h("snk-view-representation", { mode: FormLayout.SIDE_BY_SIDE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, this.getMessage('snkLayoutFormConfig.sideBySideLayout.description'))), h("div", null, h("ez-check", { label: this.getMessage('snkLayoutFormConfig.classicSideBySideLayout.label'), class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.CLASSIC_SIDE_BY_SIDE), value: this.layoutType === FormLayout.CLASSIC_SIDE_BY_SIDE }), h("snk-view-representation", { mode: FormLayout.CLASSIC_SIDE_BY_SIDE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, this.getMessage('snkLayoutFormConfig.classicSideBySideLayout.description')))));
   }
   static get style() { return snkLayoutFormConfigCss; }
 }, [2, "snk-layout-form-config", {

package/dist/components/snk-view-representation2.js

@@ -16,7 +16,7 @@ const SnkViewRepresentation = /*@__PURE__*/ proxyCustomElement(class extends HTM
     return (h("div", { class: "svg-container__inline" }, [...Array(2)].map(() => this.renderCascadeLayout())));
   }
   render() {
-    return (h("div", { class: "svg-container ez-margin-left--small" }, h("div", { class: "svg-container__background" }, h("div", { class: "svg-container__header" }, h("div", { class: "svg-container__circle svg-container__circle--red" }), h("div", { class: "svg-container__circle svg-container__circle--yellow" }), h("div", { class: "svg-container__circle svg-container__circle--green" })), this.mode === FormLayout.CASCADE
+    return (h("div", { class: "svg-container ez-margin-left--small" }, h("div", { class: "svg-container__background" }, h("div", { class: "svg-container__header" }, h("div", { class: "svg-container__circle svg-container__circle--red" }), h("div", { class: "svg-container__circle svg-container__circle--yellow" }), h("div", { class: "svg-container__circle svg-container__circle--green" })), (this.mode === FormLayout.CASCADE || this.mode === FormLayout.CLASSIC_CASCADE)
       ? this.renderCascadeLayout()
       : this.renderSideBySideLayout())));
   }

package/dist/esm/{ConfigStorage-39ac8fef.js → ConfigStorage-d15d2014.js}

@@ -1,5 +1,5 @@
-import { R as ResourceFetcher, F as FormConfigFetcher } from './form-config-fetcher-7cda6254.js';
-import { D as DataFetcher, d as dist } from './DataFetcher-0b9da57d.js';
+import { R as ResourceFetcher, F as FormConfigFetcher } from './form-config-fetcher-fcc7b62f.js';
+import { D as DataFetcher, d as dist } from './DataFetcher-1dd7e8c0.js';
 import { F as FilterItemType } from './filter-item-type.enum-d45e026f.js';
 import { ObjectUtils } from '@sankhyalabs/core';