@sankhyalabs/sankhyablocks 1.4.0-beta.8 → 2.0.0-beta.1

package/dist/components/snk-config-options2.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { ApplicationContext } from '@sankhyalabs/core';
-import { formFieldBuilder } from '@sankhyalabs/ezui/dist/collection/utils';
+import { UserInterface, ObjectUtils, ApplicationContext } from '@sankhyalabs/core';
 import { DataType, getConvertedValue } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
-import { a as VARS_BY_TYPE, D as DEFAULT_TYPE, C as CONFIG_EVENTS } from './constants.js';
+import { CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
+import { a as VARS_BY_TYPE, D as DEFAULT_TYPE, T as TAGS_BY_TYPE } from './constants.js';
 
 const snkConfigOptionsCss = ".sc-snk-config-options-h{width:100%;border:2px solid var(--color--secondary-200);border-radius:15px}.config-options__switch-row.sc-snk-config-options{margin-top:-30px}";
 
@@ -33,71 +33,20 @@ const SnkConfigOptions = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   enabledValueDefault() {
     var _a, _b, _c;
     const field = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.name);
-    if (((_c = field === null || field === void 0 ? void 0 : field.properties) === null || _c === void 0 ? void 0 : _c.allowDefault) === "true" && VARS_BY_TYPE.UserInterface.hasOwnProperty(field === null || field === void 0 ? void 0 : field.userInterface)) {
+    const allowDefault = (_c = field === null || field === void 0 ? void 0 : field.properties) === null || _c === void 0 ? void 0 : _c.allowDefault;
+    const hasVariableVar = VARS_BY_TYPE.UserInterface.hasOwnProperty(field === null || field === void 0 ? void 0 : field.userInterface);
+    if ((allowDefault == undefined || allowDefault === "true") && hasVariableVar) {
       return true;
     }
     return false;
   }
-  getFieldProperties(field) {
-    var _a;
-    if (field != undefined) {
-      return (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField(field);
-    }
-  }
-  getMessage(key, params) {
-    return this._application.messagesBuilder.getMessage(key, params);
-  }
-  getDefaultType() {
-    var _a;
-    return (_a = this.fieldConfig.defaultValue.type) !== null && _a !== void 0 ? _a : DEFAULT_TYPE.fixed;
-  }
-  getValidatedValue(fieldValue) {
+  isAllowDefault() {
     var _a, _b;
-    if (fieldValue == undefined) {
-      return;
-    }
-    const field = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.name);
-    const dataType = field === null || field === void 0 ? void 0 : field.dataType;
-    if (dataType == undefined) {
-      return;
-    }
-    const value = dataType !== DataType.OBJECT && dataType !== DataType.DATE
-      && typeof fieldValue === "object" && "value" in fieldValue
-      ? fieldValue.value
-      : fieldValue;
-    return dataType === DataType.OBJECT ? JSON.stringify(value) : value;
-  }
-  onChange(evt) {
-    this.fieldConfig.defaultValue.value = this.getValidatedValue(evt === null || evt === void 0 ? void 0 : evt.detail);
-    this.configOptionsChanged.emit(this.fieldConfig);
-  }
-  onSearch(searchArgument) {
-    if (this._application != undefined && this.fieldConfig != undefined) {
-      return this._application.executeSearch(searchArgument, this.fieldConfig.name, this.dataUnit);
+    const allowDefault = (_b = (_a = this._fieldProperties) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.allowDefault;
+    if (allowDefault == undefined) {
+      return true;
     }
-  }
-  loadDataField() {
-    this._element.querySelectorAll("[data-field-name]")
-      .forEach((field) => {
-      var _a, _b, _c, _d;
-      field.enabled = ((_b = (_a = this._fieldProperties) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.allowDefault) === "true";
-      if (field.enabled) {
-        const value = this.fieldConfig.defaultValue.value;
-        if (value != undefined) {
-          const fieldName = field.dataset.fieldName;
-          const dataType = (_d = (_c = this.dataUnit) === null || _c === void 0 ? void 0 : _c.getField(fieldName)) === null || _d === void 0 ? void 0 : _d.dataType;
-          field.value = getConvertedValue(dataType, value);
-        }
-        field.addEventListener(CONFIG_EVENTS.fieldChanged, (evt) => {
-          return this.onChange(evt);
-        });
-        if (field.tagName === "EZ-SEARCH") {
-          field.optionLoader = (searchArgument) => {
-            return this.onSearch(searchArgument);
-          };
-        }
-      }
-    });
+    return allowDefault === "true";
   }
   loadDefaultValue() {
     var _a;
@@ -119,6 +68,19 @@ const SnkConfigOptions = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       this._defaultType = this.fieldConfig.defaultValue.type;
     }
   }
+  getFieldProperties(field) {
+    var _a;
+    if (field != undefined) {
+      return (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField(field);
+    }
+  }
+  getMessage(key, params) {
+    return this._application.messagesBuilder.getMessage(key, params);
+  }
+  getDefaultType() {
+    var _a;
+    return (_a = this.fieldConfig.defaultValue.type) !== null && _a !== void 0 ? _a : DEFAULT_TYPE.fixed;
+  }
   getEnabledByProperty(property) {
     const properties = this._fieldProperties;
     if (properties != undefined && properties[property] === true) {
@@ -133,25 +95,130 @@ const SnkConfigOptions = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
     return this.fieldConfig[property];
   }
+  getValidatedValue(fieldValue) {
+    var _a, _b;
+    if (fieldValue == undefined) {
+      return;
+    }
+    const field = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.name);
+    const dataType = field === null || field === void 0 ? void 0 : field.dataType;
+    if (dataType == undefined) {
+      return;
+    }
+    const value = (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.waitmessage) != undefined ? undefined :
+      dataType !== DataType.OBJECT && dataType !== DataType.DATE
+        && typeof fieldValue === "object"
+        ? fieldValue.value
+        : fieldValue;
+    return dataType === DataType.OBJECT ? JSON.stringify(value) : value;
+  }
+  buildInputDefault({ value, enabled, label, name, required, userInterface }, properties = undefined, mode = undefined) {
+    let options;
+    let precision = 0;
+    let prettyPrecision = 0;
+    const TagName = userInterface == undefined || TAGS_BY_TYPE[userInterface] == undefined
+      ? TAGS_BY_TYPE.DEFAULT
+      : TAGS_BY_TYPE[userInterface];
+    if (userInterface === UserInterface.OPTIONSELECTOR) {
+      const prop = properties === null || properties === void 0 ? void 0 : properties.options;
+      if (typeof prop === "string") {
+        const parsed = ObjectUtils.stringToObject(prop);
+        options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+      }
+      else {
+        options = prop;
+      }
+    }
+    else if (userInterface === UserInterface.DECIMALNUMBER) {
+      precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
+      prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
+    }
+    return h(TagName, Object.assign({ value: value, enabled: enabled, label: label, "data-field-name": name, key: name, onEzChange: (evt) => this.onChange(evt === null || evt === void 0 ? void 0 : evt.detail) }, (this.getConditionalAttributes(userInterface, required, options, precision, prettyPrecision, mode))));
+  }
+  getConditionalAttributes(userInterface, required, options, precision, prettyPrecision, mode) {
+    switch (userInterface) {
+      case UserInterface.SEARCH:
+        return {
+          suppressEmptyOption: required,
+          optionLoader: (searchArgument) => this.onSearch(searchArgument)
+        };
+      case UserInterface.OPTIONSELECTOR:
+        return {
+          suppressEmptyOption: required,
+          options
+        };
+      case UserInterface.CHECKBOX:
+      case UserInterface.SWITCH:
+        return {
+          mode
+        };
+      case UserInterface.INTEGERNUMBER:
+      case UserInterface.DECIMALNUMBER:
+        return {
+          precision,
+          prettyPrecision,
+          onEzStartChange: (evt) => this.onChange(evt === null || evt === void 0 ? void 0 : evt.detail)
+        };
+      case UserInterface.DATE:
+      case UserInterface.DATETIME:
+      case UserInterface.TIME:
+        return {
+          onEzStartChange: (evt) => this.onChange(evt === null || evt === void 0 ? void 0 : evt.detail)
+        };
+      default:
+        return {};
+    }
+  }
+  onChange(fieldValue) {
+    this.fieldConfig.defaultValue.value = this.getValidatedValue(fieldValue);
+    this.configOptionsChanged.emit(this.fieldConfig);
+  }
+  onSearch(searchArgument) {
+    if (this._application != undefined && this.fieldConfig != undefined) {
+      return this._application.executeSearch(searchArgument, this.fieldConfig.name, this.dataUnit);
+    }
+  }
+  buildField(field) {
+    const { config, descriptor } = field;
+    const { name, label, readOnly, required, defaultValue } = config;
+    const { userInterface, properties } = descriptor;
+    const enabled = (properties === null || properties === void 0 ? void 0 : properties.allowDefault) != undefined ? properties.allowDefault === "true" : !readOnly;
+    let value;
+    if (enabled) {
+      value = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value;
+      if (value != undefined) {
+        value = getConvertedValue(descriptor === null || descriptor === void 0 ? void 0 : descriptor.dataType, value);
+      }
+    }
+    const configField = { value, enabled, label, name, required, userInterface };
+    switch (userInterface) {
+      case UserInterface.SWITCH:
+        return this.buildInputDefault(configField, undefined, CheckMode.SWITCH);
+      case UserInterface.CHECKBOX:
+        return this.buildInputDefault(configField, undefined, CheckMode.REGULAR);
+      case UserInterface.OPTIONSELECTOR:
+      case UserInterface.DECIMALNUMBER:
+        return this.buildInputDefault(configField, properties);
+      default:
+        return this.buildInputDefault(configField);
+    }
+  }
   componentWillLoad() {
     var _a;
-    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this.loadDefaultValue();
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this._fieldProperties = this.getFieldProperties((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.name);
   }
-  componentDidRender() {
-    this.loadDataField();
-  }
   render() {
-    var _a, _b, _c, _d;
-    return (h(Host, null, h("div", { id: this.idConfig }, h("div", { class: "ez-row ez-padding--medium" }, h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-text-input", { label: this.getMessage("snkConfigOptions.label.nameField"), value: (_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.label, onEzChange: (evt) => { this.fieldConfig.label = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-combo-box", { label: this.getMessage("snkConfigOptions.label.typeValueDefault"), suppressEmptyOption: true, enabled: ((_c = (_b = this._fieldProperties) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.allowDefault) === "true", onEzChange: (evt) => { var _a; return this.onConfigDefault((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value); }, value: this.getDefaultType() }, h("option", { value: DEFAULT_TYPE.fixed }, this.getMessage("snkConfigOptions.options.valueFixed")), h("option", { value: DEFAULT_TYPE.variable }, this.getMessage("snkConfigOptions.options.variable")))), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, this._defaultType === DEFAULT_TYPE.variable ?
-      h("ez-combo-box", { label: this.getMessage("snkConfigOptions.label.valueDefault"), enabled: this.enabledValueDefault(), onEzChange: (evt) => { var _a; this.fieldConfig.defaultValue.value = (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value; this.configOptionsChanged.emit(this.fieldConfig); }, value: this.fieldConfig.defaultValue.value, options: this.buildOptions() })
+    var _a, _b;
+    return (h(Host, null, h("div", { id: this.idConfig }, h("div", { class: "ez-row ez-padding--medium" }, h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-text-input", { label: this.getMessage("snkConfigOptions.label.nameField"), value: (_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.label, onEzChange: (evt) => { this.fieldConfig.label = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-combo-box", { label: this.getMessage("snkConfigOptions.label.typeValueDefault"), suppressEmptyOption: true, enabled: this.enabledValueDefault(), onEzChange: (evt) => { var _a; return this.onConfigDefault((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value); }, value: this.getDefaultType() }, h("option", { value: DEFAULT_TYPE.fixed }, this.getMessage("snkConfigOptions.options.valueFixed")), h("option", { value: DEFAULT_TYPE.variable }, this.getMessage("snkConfigOptions.options.variable")))), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, this._defaultType === DEFAULT_TYPE.variable ?
+      h("ez-combo-box", { label: this.getMessage("snkConfigOptions.label.valueDefault"), enabled: this.isAllowDefault(), onEzChange: (evt) => { var _a; this.fieldConfig.defaultValue.value = (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value; this.configOptionsChanged.emit(this.fieldConfig); }, value: this.fieldConfig.defaultValue.value, options: this.buildOptions() })
       :
-        ((_d = this._fieldProperties) === null || _d === void 0 ? void 0 : _d.userInterface) &&
-          formFieldBuilder({
+        ((_b = this._fieldProperties) === null || _b === void 0 ? void 0 : _b.userInterface) &&
+          this.buildField({
             descriptor: this._fieldProperties,
             config: this.fieldConfig
-          }).$children$)), h("div", { class: "ez-row ez-padding--medium config-options__switch-row" }, h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: "switch", label: this.getMessage("snkConfigOptions.label.clearDuplicate"), value: this.fieldConfig.cleanOnCopy, onEzChange: (evt) => { this.fieldConfig.cleanOnCopy = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: "switch", label: this.getMessage("snkConfigOptions.label.requiredField"), enabled: this.getEnabledByProperty("required"), value: this.getValueByProperty("required"), onEzChange: (evt) => { this.fieldConfig.required = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: "switch", label: this.getMessage("snkConfigOptions.label.protectedField"), enabled: this.getEnabledByProperty("readOnly"), value: this.getValueByProperty("readOnly"), onEzChange: (evt) => { this.fieldConfig.readOnly = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } }))))));
+          }))), h("div", { class: "ez-row ez-padding--medium config-options__switch-row" }, h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: CheckMode.SWITCH, label: this.getMessage("snkConfigOptions.label.clearDuplicate"), value: this.fieldConfig.cleanOnCopy, onEzChange: (evt) => { this.fieldConfig.cleanOnCopy = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: CheckMode.SWITCH, label: this.getMessage("snkConfigOptions.label.requiredField"), enabled: this.getEnabledByProperty("required"), value: this.getValueByProperty("required"), onEzChange: (evt) => { this.fieldConfig.required = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: CheckMode.SWITCH, label: this.getMessage("snkConfigOptions.label.protectedField"), enabled: this.getEnabledByProperty("readOnly"), value: this.getValueByProperty("readOnly"), onEzChange: (evt) => { this.fieldConfig.readOnly = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } }))))));
   }
   get _element() { return this; }
   static get style() { return snkConfigOptionsCss; }

package/dist/components/snk-data-unit.js

@@ -177,7 +177,7 @@ const SnkDataUnit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
             }
             else {
               const removeConfirmationTitle = this.getMessage("snkDataUnit.removeConfirmationTitle");
-              ApplicationUtils.confirm(removeConfirmationTitle, removeConfirmation, "delete", DialogType.CRITICAL, { btnConfirmDanger: true })
+              ApplicationUtils.confirm(removeConfirmationTitle, removeConfirmation, "delete", DialogType.WARN)
                 .then((result) => resolve(result ? action : undefined));
             }
           }

package/dist/components/snk-field-config2.js

@@ -36,6 +36,11 @@ const SnkFieldConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   getMessage(key) {
     return this._application.messagesBuilder.getMessage(key, {});
   }
+  isRequired() {
+    var _a, _b;
+    const fieldMD = this.dataUnit && this.dataUnit.getField((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.name);
+    return (fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.required) === true || ((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.required) === true;
+  }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
   }
@@ -43,7 +48,7 @@ const SnkFieldConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     if (this.fieldConfig == undefined) {
       return;
     }
-    return (h(Host, null, h("div", { class: "field-config" }, h("div", { class: "field-config__draggable" }, h("ez-icon", { iconName: "drag-indicator", size: "small" })), h("div", null, this.fieldConfig.label, this.fieldConfig.required && h("span", { class: "field-config__required-label" }, "*")), this.modeInsertion ?
+    return (h(Host, null, h("div", { class: "field-config" }, h("div", { class: "field-config__draggable" }, h("ez-icon", { iconName: "drag-indicator", size: "small" })), h("div", null, this.fieldConfig.label, this.isRequired() && h("span", { class: "field-config__required-label" }, "*")), this.modeInsertion ?
       h("div", { class: "field-config__add" }, h("ez-button", { onClick: (evt) => this.handleAction(evt, ACTION_CONFIG.add), mode: "icon", class: "ez-button--tertiary", iconName: "plus", size: "large", title: this.getMessage("snkFieldConfig.titleAdd") })) :
       h("div", { class: "field-config__options" + (this.isConfigActive ? " field-config__options--is-active" : " ") }, h("ez-button", { mode: "icon", class: "ez-button--tertiary field-config__remove-icon", onClick: (evt) => this.handleAction(evt, ACTION_CONFIG.remove), iconName: "minus", size: "large", title: this.getMessage("snkFieldConfig.titleRemove") }), h("ez-button", { id: "buttonConfig_" + this.fieldConfig.name, mode: "icon", class: "ez-button--tertiary", onClick: (evt) => this.handleAction(evt, ACTION_CONFIG.configuration), iconName: this.isConfigActive ? "chevron-up" : "settings-inverted", size: "large", title: this.getMessage("snkFieldConfig.titleConfigurations") }))), this.isConfigActive && h("div", { class: "field-config__config-popover" }, h("div", { class: "field-config__config-outer-arrow" }, h("div", { class: "field-config__config-inner-arrow" })))));
   }
@@ -51,7 +56,8 @@ const SnkFieldConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
 }, [2, "snk-field-config", {
     "isConfigActive": [16],
     "fieldConfig": [16],
-    "modeInsertion": [516, "mode-insertion"]
+    "modeInsertion": [516, "mode-insertion"],
+    "dataUnit": [16]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/snk-filter-modal2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { ModalAction, ModalButtonStatus } from '@sankhyalabs/ezui/dist/collection/components/ez-modal-container';
 import { ArrayUtils } from '@sankhyalabs/core';
+import { CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
 
 const SnkFilterModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -9,7 +10,7 @@ const SnkFilterModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   updateValue(id, value = undefined) {
     this.items = this.items.map(item => {
-      if (item.id === id) {
+      if (item.id === id && item.enabled) {
         if (value == undefined) {
           value = !item.active;
         }
@@ -27,7 +28,7 @@ const SnkFilterModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   buildItems(list) {
     return list.map(item => {
-      return (h("button", { onClick: () => this.updateValue(item.id), class: "ez-padding--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item ez-align--middle ez-margin-bottom--small" }, h("ez-check", { id: `checkbox_${item.id}`, tabIndex: "-1", class: "sc-snk-filter-bar snk-filter-bar__filter-modal-item__check", onEzChange: evt => this.updateValue(item.id, evt.detail), enabled: item.enabled, value: item.active, mode: "switch" }), h("div", { class: "ez-text ez-title--primary ez-text--medium ez-margin-left--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item__label" }, item.label)));
+      return (h("button", { onClick: () => this.updateValue(item.id), class: "ez-padding--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item ez-align--middle ez-margin-bottom--small" }, h("ez-check", { id: `checkbox_${item.id}`, tabIndex: "-1", class: "sc-snk-filter-bar snk-filter-bar__filter-modal-item__check", onEzChange: evt => this.updateValue(item.id, evt.detail), enabled: item.enabled, value: item.active, mode: CheckMode.SWITCH }), h("div", { class: "ez-text ez-title--primary ez-text--medium ez-margin-left--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item__label" }, item.label)));
     });
   }
   itemKeyBoardSelect(event, item) {

package/dist/components/snk-filter-personalized.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { UserInterface, ApplicationContext } from '@sankhyalabs/core';
 import { convertType } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
+import { CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
 import { F as FilterItemType } from './filter-item-type.enum.js';
 
 const SnkFilterPersonalized$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -52,7 +53,7 @@ const SnkFilterPersonalized$1 = /*@__PURE__*/ proxyCustomElement(class extends H
           return h("ez-search", { id: elemId, suppressEmptyOption: true, value: this.getValue(param, index), onEzChange: evt => this.setValue(index, evt.detail), label: param.label, optionLoader: ({ mode, argument }) => this.doSearch(mode, argument, param) });
         case UserInterface.SWITCH:
         case UserInterface.CHECKBOX:
-          const mode = UserInterface.SWITCH === param.type ? "switch" : "regular";
+          const mode = UserInterface.SWITCH === param.type ? CheckMode.SWITCH : CheckMode.REGULAR;
           return h("ez-check", { id: elemId, class: "ez-padding-bottom--medium", mode: mode, value: this.getValue(param, index), label: param.label, onEzChange: evt => this.setValue(index, evt.detail) });
         case UserInterface.DECIMALNUMBER:
         case UserInterface.INTEGERNUMBER:

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

@@ -2,12 +2,12 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { a as draggable_bundle, d as defineCustomElement$1 } from './snk-tab-config2.js';
 import { ObjectUtils, ArrayUtils, ApplicationContext } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
-import { C as CONFIG_EVENTS, T as TAB_NAMES, A as ACTION_CONFIG } from './constants.js';
+import { C as CONFIG_EVENTS, b as TAB_NAMES, A as ACTION_CONFIG, D as DEFAULT_TYPE } from './constants.js';
 import { a as UserConfigType } from './form-config-fetcher.js';
 import { d as defineCustomElement$3 } from './snk-config-options2.js';
 import { d as defineCustomElement$2 } from './snk-field-config2.js';
 
-const snkFormConfigCss = ".sc-snk-form-config-h{--snk-form-config__title--font-pattern:var(--font-pattern, \"'Sora', 'Algerian'\");--snk-form-config__title--weight--large:var(--text-weight--large, 600);display:flex;flex-direction:column;position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--more-visible, 2);background-color:var(--background--xlight)}.form-config__title.sc-snk-form-config{display:flex;margin:0;line-height:1.3;font-family:var(--snk-form-config__title--font-pattern);font-weight:var(--snk-form-config__title--weight--large)}.form-config__header-container.sc-snk-form-config{display:flex}.form-config__field-container.sc-snk-form-config{width:32%;padding:6px}.form-config__hide-content.sc-snk-form-config{display:none}ez-icon.sc-snk-form-config .left-icon.sc-snk-form-config{--ez-icon--color:var(--text--disable)}.ez-box__label-counter.sc-snk-form-config{font-weight:var(--text-weight--extra-small);margin-top:-7px}.form-config__btn-options.sc-snk-form-config{--ez-button--min-width:300px;--ez-button--background-color:#FFFFFF}[data-draggable-parent].sc-snk-form-config{position:relative}.form-config__field-config--selected.sc-snk-form-config{position:static}.form-config__field-config--dragged.sc-snk-form-config .draggable-mirror.sc-snk-form-config{z-index:var(--more-visible, 2)}.form-config__config-options.sc-snk-form-config{position:relative;margin-top:-3px;min-width:100%;z-index:1}.form-config__tab-container.sc-snk-form-config,.form-config__fields-available.sc-snk-form-config{position:relative;height:100%;max-height:calc(100vh - 92px)}.form-config__tab-container.sc-snk-form-config .ez-box__container.sc-snk-form-config,.form-config__fields-available.sc-snk-form-config .ez-box__container.sc-snk-form-config{align-content:flex-start;height:100%}.form-config__fields-available.sc-snk-form-config [data-draggable-parent].sc-snk-form-config{align-content:flex-start;overflow-y:auto;height:100%;max-height:calc(100% - 122px)}.form-config__tab-content.sc-snk-form-config{align-content:flex-start;overflow-y:auto;height:auto;max-height:calc(100% - 128px)}[data-draggable-element].sc-snk-form-config{cursor:grab}.form-config__actions-button.sc-snk-form-config{--ez-actions-button__btn-action--min-width:250px}.form-config__add-group.sc-snk-form-config{position:relative;min-height:120px;margin-bottom:10px}.form-config__add-group-container.sc-snk-form-config{position:absolute;display:flex;flex-wrap:wrap;width:100%;box-sizing:border-box;border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #d2dce9);padding:var(--space--small, 6px)}.form-config__add-group-content.sc-snk-form-config{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;box-sizing:border-box;border:2px dashed var(--color-strokes, #DCE0E8);border-radius:var(--border--radius-small, 6px)}.form-config__add-group-label.sc-snk-form-config{display:flex;justify-content:center;box-sizing:border-box;padding:var(--space--large, 24px)}.form-config__btn-add-group.sc-snk-form-config{position:relative;padding:var(--space--large, 24px) var(--space--medium, 12px) 0}.form-config__btn-add-group-container.sc-snk-form-config{padding:var(--space--medium, 12px);border-radius:var(--border--radius-medium, 12px);border:2px solid var(--color-strokes, #DCE0E8);background-color:var(--background--body, #fafcff)}.form-config__left-icon--eye-off.sc-snk-form-config{padding-top:var(--space--medium, 8px)}ez-collapsible-box.draggable-mirror.sc-snk-form-config{display:table;background-color:#FFFFFF}ez-collapsible-box.sc-snk-form-config{margin-bottom:10px}@media screen and (min-width: 480px){.form-config__field-config--selected.sc-snk-form-config .ez-flex.form-config__config-options.sc-snk-form-config{min-width:calc(300% + 12px)}.form-config__field-config--selected.sc-snk-form-config:nth-child(3n+2) .ez-flex.form-config__config-options.sc-snk-form-config{transform:translate(calc(100% / 3 * -1))}.form-config__field-config--selected.sc-snk-form-config:nth-child(3n+3) .ez-flex.form-config__config-options.sc-snk-form-config{transform:translate(calc(100% / 3 * -2))}}";
+const snkFormConfigCss = ".sc-snk-form-config-h{--snk-form-config__title--font-pattern:var(--font-pattern, \"Roboto\");--snk-form-config__title--weight--large:var(--text-weight--large, 600);display:flex;flex-direction:column;position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--more-visible, 2);background-color:var(--background--xlight)}.form-config__title.sc-snk-form-config{display:flex;margin:0;line-height:1.3;font-family:var(--snk-form-config__title--font-pattern);font-weight:var(--snk-form-config__title--weight--large)}.form-config__header-container.sc-snk-form-config{display:flex}.form-config__field-container.sc-snk-form-config{width:32%;padding:6px}.form-config__hide-content.sc-snk-form-config{display:none}ez-icon.sc-snk-form-config .left-icon.sc-snk-form-config{--ez-icon--color:var(--text--disable)}.ez-box__label-counter.sc-snk-form-config{font-weight:var(--text-weight--extra-small);margin-top:-7px}.form-config__btn-options.sc-snk-form-config{--ez-button--min-width:300px;--ez-button--background-color:#FFFFFF}[data-draggable-parent].sc-snk-form-config{position:relative}.form-config__field-config--selected.sc-snk-form-config{position:static}.form-config__field-config--dragged.sc-snk-form-config .draggable-mirror.sc-snk-form-config{z-index:var(--more-visible, 2)}.form-config__config-options.sc-snk-form-config{position:relative;margin-top:-3px;min-width:100%;z-index:1}.form-config__tab-container.sc-snk-form-config,.form-config__fields-available.sc-snk-form-config{position:relative;height:100%;max-height:calc(100vh - 92px)}.form-config__tab-container.sc-snk-form-config .ez-box__container.sc-snk-form-config,.form-config__fields-available.sc-snk-form-config .ez-box__container.sc-snk-form-config{align-content:flex-start;height:100%}.form-config__fields-available.sc-snk-form-config [data-draggable-parent].sc-snk-form-config{align-content:flex-start;overflow-y:auto;height:100%;max-height:calc(100% - 122px)}.form-config__tab-content.sc-snk-form-config{align-content:flex-start;overflow-y:auto;height:auto;max-height:calc(100% - 128px)}[data-draggable-element].sc-snk-form-config{cursor:grab}.form-config__actions-button.sc-snk-form-config{--ez-actions-button__btn-action--min-width:250px}.form-config__add-group.sc-snk-form-config{position:relative;min-height:120px;margin-bottom:10px}.form-config__add-group-container.sc-snk-form-config{position:absolute;display:flex;flex-wrap:wrap;width:100%;box-sizing:border-box;border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #d2dce9);padding:var(--space--small, 6px)}.form-config__add-group-content.sc-snk-form-config{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;box-sizing:border-box;border:2px dashed var(--color-strokes, #DCE0E8);border-radius:var(--border--radius-small, 6px)}.form-config__add-group-label.sc-snk-form-config{display:flex;justify-content:center;box-sizing:border-box;padding:var(--space--large, 24px)}.form-config__btn-add-group.sc-snk-form-config{position:relative;padding:var(--space--large, 24px) var(--space--medium, 12px) 0}.form-config__btn-add-group-container.sc-snk-form-config{padding:var(--space--medium, 12px);border-radius:var(--border--radius-medium, 12px);border:2px solid var(--color-strokes, #DCE0E8);background-color:var(--background--body, #fafcff)}.form-config__left-icon--eye-off.sc-snk-form-config{padding-top:var(--space--medium, 8px)}ez-collapsible-box.draggable-mirror.sc-snk-form-config{display:table;background-color:#FFFFFF}ez-collapsible-box.sc-snk-form-config{margin-bottom:10px}@media screen and (min-width: 480px){.form-config__field-config--selected.sc-snk-form-config .ez-flex.form-config__config-options.sc-snk-form-config{min-width:calc(300% + 12px)}.form-config__field-config--selected.sc-snk-form-config:nth-child(3n+2) .ez-flex.form-config__config-options.sc-snk-form-config{transform:translate(calc(100% / 3 * -1))}.form-config__field-config--selected.sc-snk-form-config:nth-child(3n+3) .ez-flex.form-config__config-options.sc-snk-form-config{transform:translate(calc(100% / 3 * -2))}}";
 
 const CONTAINER_ID = {
   collapsibleBox: "EZ-COLLAPSIBLE-BOX",
@@ -129,19 +129,30 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     const snkFieldConfigs = this._formContainer.querySelectorAll('snk-field-config');
     snkFieldConfigs.forEach((snkField) => {
       const fieldConfig = snkField.fieldConfig;
-      if (fieldConfig) {
-        const fieldToSave = {
-          cleanOnCopy: fieldConfig.cleanOnCopy || false,
-          group: fieldConfig.group,
-          label: fieldConfig.label,
-          name: fieldConfig.name,
-          required: fieldConfig.required,
-          readOnly: fieldConfig.readOnly,
-          tab: fieldConfig.tab,
-          defaultValue: fieldConfig.defaultValue
-        };
-        fields.push(fieldToSave);
+      if (fieldConfig == undefined) {
+        return;
       }
+      const fieldToSave = {
+        cleanOnCopy: fieldConfig.cleanOnCopy || false,
+        group: fieldConfig.group,
+        label: fieldConfig.label,
+        name: fieldConfig.name,
+        required: fieldConfig.required,
+        readOnly: fieldConfig.readOnly,
+        tab: fieldConfig.tab
+      };
+      if (fieldConfig.defaultValue != undefined) {
+        if (fieldConfig.defaultValue.type == undefined) {
+          fieldToSave.defaultValue = {
+            type: DEFAULT_TYPE.fixed,
+            value: fieldConfig.defaultValue
+          };
+        }
+        else {
+          fieldToSave.defaultValue = fieldConfig.defaultValue;
+        }
+      }
+      fields.push(fieldToSave);
     });
     return fields;
   }
@@ -218,8 +229,8 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     var _a;
     return ((_a = group.fields) === null || _a === void 0 ? void 0 : _a.length) ? group.fields.map((field) => {
       var _a, _b;
-      return h("div", { key: field.name, class: this.getFieldConfigStyle(field), "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, modeInsertion: false, fieldConfig: field, isConfigActive: ((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === field.name }), ((_b = this._fieldConfigSelected) === null || _b === void 0 ? void 0 : _b.name) === field.name &&
-        h("div", { class: "ez-flex form-config__config-options" }, h("snk-config-options", { idConfig: field.name, dataUnit: this.dataUnit, fieldConfig: this._fieldConfigSelected, onConfigOptionsChanged: (ev) => this.handleconfigOptionsChanged(ev.detail) })));
+      return h("div", { key: field.name, class: this.getFieldConfigStyle(field), "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, modeInsertion: false, fieldConfig: field, dataUnit: this.dataUnit, isConfigActive: ((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === field.name }), ((_b = this._fieldConfigSelected) === null || _b === void 0 ? void 0 : _b.name) === field.name &&
+        h("div", { class: "ez-flex form-config__config-options" }, h("snk-config-options", { idConfig: field.name, dataUnit: this.dataUnit, fieldConfig: this._fieldConfigSelected, onConfigOptionsChanged: (evt) => this.handleconfigOptionsChanged(evt.detail) })));
     }) : h("div", { class: "form-config__add-group-container" }, h("div", { class: "form-config__add-group-content" }, h("div", { class: "form-config__add-group-label" }, h("label", { class: "ez-text ez-text--center ez-text--medium ez-text--primary ez-text--bold" }, this.getMessage("snkFormConfig.form.labelDropField")))));
   }
   handleconfigOptionsChanged(fieldEdited) {
@@ -944,7 +955,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           return h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, h("label", { class: "ez-text ez-text--secondary ez-margin-vertical--small" }, this.getMessage("snkFormConfig.form.subTitleInfo")), h("div", { id: CONTAINER_ID.withoutGroup, class: "ez-row", "data-draggable-parent": "field" }, this.getFieldsByGroup(group)), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" }));
         }
       }), this.renderTempGroupByTab(tab.tab))), h("div", { class: "form-config__btn-add-group ez-row" }, h("div", { class: "form-config__btn-add-group-container ez-col ez-col--sd-12 ez-col--tb-12 ez-align--center" }, h("ez-button", { label: this.getMessage("snkFormConfig.form.labelNewGroup"), class: "ez-padding-horizontal--small ez-button--primary", size: "small", onClick: () => this.addNewGroup() }, h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "plus" })))))), h("div", { class: "form-config__fields-available ez-col ez-col--sd-3 ez-col--tb-3" }, h("section", { class: "ez-box__container ez-col ez-col--pn-12" }, h("h1", { class: "ez-title ez-title--large ez-title--primary ez-padding-bottom--medium" }, this.getMessage("snkFormConfig.availableFields.title")), h("ez-filter-input", { ref: ref => this._filterFieldsAvailable = ref, label: this.getMessage("snkFormConfig.availableFields.labelSearchField"), onEzChange: evt => this.onFilterChange(evt.detail) }), h("span", { class: "ez-box__label-counter ez-text ez-text--medium ez-text--primary ez-margin-bottom--medium" }, this.handleLabelCounter((_c = this._fieldsAvailable) === null || _c === void 0 ? void 0 : _c.length)), ((_d = this._layoutFormConfig) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
-      h("div", { id: CONTAINER_ID.fieldsAvailable, class: "ez-row", "data-draggable-parent": "field" }, this.orderFieldsAvailable(this._fieldsAvailable).map((field) => h("div", { key: field.name, class: this._fieldsAvailableStyle, "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, fieldConfig: field })))))))));
+      h("div", { id: CONTAINER_ID.fieldsAvailable, class: "ez-row", "data-draggable-parent": "field" }, this.orderFieldsAvailable(this._fieldsAvailable).map((field) => h("div", { key: field.name, class: this._fieldsAvailableStyle, "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, dataUnit: this.dataUnit, fieldConfig: field })))))))));
   }
   static get watchers() { return {
     "formConfig": ["observeFormConfig"]

package/dist/components/snk-tab-config2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { c as createCommonjsModule } from './_commonjsHelpers.js';
 import { ApplicationContext } from '@sankhyalabs/core';
-import { C as CONFIG_EVENTS, K as KEY_EVENTS, b as TYPE_ACTIONS, T as TAB_NAMES } from './constants.js';
+import { C as CONFIG_EVENTS, K as KEY_EVENTS, c as TYPE_ACTIONS, b as TAB_NAMES } from './constants.js';
 
 var draggable_bundle = createCommonjsModule(function (module, exports) {
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -6884,7 +6884,7 @@ exports.Plugins = Plugins;
 });
 });
 
-const snkTabConfigCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}.sc-snk-tab-config-h{--snk-tab-config--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--snk-tab-config--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');display:flex;position:relative;width:100%;overflow:hidden}.tab-config__scroll.sc-snk-tab-config{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.tab-config__scroll--start-hidden.sc-snk-tab-config{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.tab-config__scroll--middle.sc-snk-tab-config{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab-config__scroll--end-hidden.sc-snk-tab-config{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab-config__lower-bar.sc-snk-tab-config{position:absolute;left:0%;right:0%;top:91%;bottom:0%;border-radius:2px;background:var(--color--disable-primary);border:2px solid var(--color--disable-primary)}.tab-config__tab.sc-snk-tab-config{display:flex;border:none;background-color:unset;cursor:pointer;align-items:center;justify-content:center;min-width:fit-content;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Sora, Algerian\");font-size:var(--title--small, 14px);padding:var(--space--small, 6px) var(--space--medium, 12px)}.tab-config__tab.sc-snk-tab-config:focus,.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{outline:none}.tab-config__tab--is-active.sc-snk-tab-config{position:relative;color:var(--color--primary, #008561)}.tab-config__tab.sc-snk-tab-config:hover{color:var(--color--secondary, #383c45)}.tab-config__tab--is-active.sc-snk-tab-config:hover{color:var(--color--primary, #008561)}.tab-config__tab--is-active.sc-snk-tab-config::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.tab-config__tab--is-focused.sc-snk-tab-config{border:1px dashed var(--color--primary, #000000c5)}.tab-config__tab-label.sc-snk-tab-config{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config ez-icon.sc-snk-tab-config{--ez-icon--color:var(--color--secondary-700, #1C1D22)}.tab-config__backward-button.sc-snk-tab-config{left:0px;box-shadow:10px 10px 5px 5px white;background:white}.tab-config__forward-button.sc-snk-tab-config{box-shadow:10px 10px 5px 20px white;background:white}.tab-config__forward-button.sc-snk-tab-config::after,.tab-config__backward-button.sc-snk-tab-config::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.tab-config__forward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--forward-icon);mask-image:var(--snk-tab-config--forward-icon)}.tab-config__backward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--backward-icon);mask-image:var(--snk-tab-config--backward-icon)}.tab-config__forward-button.sc-snk-tab-config:hover::after,.tab-config__backward-button.sc-snk-tab-config:hover::after{background-color:var(--color--primary, #4e4e4e)}.tab-config__new-button.sc-snk-tab-config:hover ez-icon.sc-snk-tab-config{--ez-icon--color:var(--color--primary, #4e4e4e)}.tab-config__hidden.sc-snk-tab-config{display:none}.tab-config__scroll.sc-snk-tab-config::-webkit-scrollbar{display:none}.tab-config__left-icon.sc-snk-tab-config{padding-right:var(--space--small);--ez-icon--color:var(--text--disable)}.tab-config__left-icon--eye-off.sc-snk-tab-config{--ez-icon--color:var(--text--disable, #AFB6C0)}.tab-config__right-icon.sc-snk-tab-config{visibility:hidden;padding-left:var(--space--small)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{visibility:visible}.tab-config__tab--is-active.sc-snk-tab-config .tab-config__right-icon.sc-snk-tab-config{visibility:visible;--ez-icon--color:var(--color--primary)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--color--secondary, #383c45)}.tab-config__tab--is-active.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--color--primary)}.tab-config__actions-button.sc-snk-tab-config{--ez-actions-button__btn-action--min-width:100px;visibility:hidden;opacity:0;transition:visibility 1s linear,opacity 0.3s linear}.tab-config__tab.sc-snk-tab-config:hover .tab-config__actions-button.sc-snk-tab-config{visibility:visible;opacity:1;transition:visibility 0.2s linear, opacity 0.10s linear}[data-draggable-element].sc-snk-tab-config{cursor:grab}.tab-config__tab-label-disabled.sc-snk-tab-config{color:var(--text--disable, #AFB6C0)}.tab-config__slot.sc-snk-tab-config{margin-left:var(--space--small, 6px)}";
+const snkTabConfigCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}.sc-snk-tab-config-h{--snk-tab-config--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--snk-tab-config--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');display:flex;position:relative;width:100%;overflow:hidden}.tab-config__scroll.sc-snk-tab-config{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.tab-config__scroll--start-hidden.sc-snk-tab-config{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.tab-config__scroll--middle.sc-snk-tab-config{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab-config__scroll--end-hidden.sc-snk-tab-config{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab-config__lower-bar.sc-snk-tab-config{position:absolute;left:0%;right:0%;top:91%;bottom:0%;border-radius:2px;background:var(--color--disable-primary);border:2px solid var(--color--disable-primary)}.tab-config__tab.sc-snk-tab-config{display:flex;border:none;background-color:unset;cursor:pointer;align-items:center;justify-content:center;min-width:fit-content;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px);padding:var(--space--small, 6px) var(--space--medium, 12px)}.tab-config__tab.sc-snk-tab-config:focus,.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{outline:none}.tab-config__tab--is-active.sc-snk-tab-config{position:relative;color:var(--color--primary, #008561)}.tab-config__tab.sc-snk-tab-config:hover{color:var(--color--secondary, #383c45)}.tab-config__tab--is-active.sc-snk-tab-config:hover{color:var(--color--primary, #008561)}.tab-config__tab--is-active.sc-snk-tab-config::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.tab-config__tab--is-focused.sc-snk-tab-config{border:1px dashed var(--color--primary, #000000c5)}.tab-config__tab-label.sc-snk-tab-config{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config ez-icon.sc-snk-tab-config{--ez-icon--color:var(--color--secondary-700, #1C1D22)}.tab-config__backward-button.sc-snk-tab-config{left:0px;box-shadow:10px 10px 5px 5px white;background:white}.tab-config__forward-button.sc-snk-tab-config{box-shadow:10px 10px 5px 20px white;background:white}.tab-config__forward-button.sc-snk-tab-config::after,.tab-config__backward-button.sc-snk-tab-config::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.tab-config__forward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--forward-icon);mask-image:var(--snk-tab-config--forward-icon)}.tab-config__backward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--backward-icon);mask-image:var(--snk-tab-config--backward-icon)}.tab-config__forward-button.sc-snk-tab-config:hover::after,.tab-config__backward-button.sc-snk-tab-config:hover::after{background-color:var(--color--primary, #4e4e4e)}.tab-config__new-button.sc-snk-tab-config:hover ez-icon.sc-snk-tab-config{--ez-icon--color:var(--color--primary, #4e4e4e)}.tab-config__hidden.sc-snk-tab-config{display:none}.tab-config__scroll.sc-snk-tab-config::-webkit-scrollbar{display:none}.tab-config__left-icon.sc-snk-tab-config{padding-right:var(--space--small);--ez-icon--color:var(--text--disable)}.tab-config__left-icon--eye-off.sc-snk-tab-config{--ez-icon--color:var(--text--disable, #AFB6C0)}.tab-config__right-icon.sc-snk-tab-config{visibility:hidden;padding-left:var(--space--small)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{visibility:visible}.tab-config__tab--is-active.sc-snk-tab-config .tab-config__right-icon.sc-snk-tab-config{visibility:visible;--ez-icon--color:var(--color--primary)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--color--secondary, #383c45)}.tab-config__tab--is-active.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--color--primary)}.tab-config__actions-button.sc-snk-tab-config{--ez-actions-button__btn-action--min-width:100px;visibility:hidden;opacity:0;transition:visibility 1s linear,opacity 0.3s linear}.tab-config__tab.sc-snk-tab-config:hover .tab-config__actions-button.sc-snk-tab-config{visibility:visible;opacity:1;transition:visibility 0.2s linear, opacity 0.10s linear}[data-draggable-element].sc-snk-tab-config{cursor:grab}.tab-config__tab-label-disabled.sc-snk-tab-config{color:var(--text--disable, #AFB6C0)}.tab-config__slot.sc-snk-tab-config{margin-left:var(--space--small, 6px)}";
 
 const SnkTabConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {

package/dist/esm/{constants-c4e3341e.js → constants-c6039d3d.js}

@@ -56,5 +56,19 @@ const TYPE_ACTIONS = {
 const TAB_NAMES = {
   main: "__main"
 };
+const TAGS_BY_TYPE = {
+  LONGTEXT: "ez-text-area",
+  FILE: "ez-upload",
+  DATE: "ez-date-input",
+  TIME: "ez-time",
+  DATETIME: "ez-date-time-input",
+  DEFAULT: "ez-text-input",
+  SWITCH: "ez-check",
+  CHECKBOX: "ez-check",
+  OPTIONSELECTOR: "ez-combo-box",
+  SEARCH: "ez-search",
+  INTEGERNUMBER: "ez-number-input",
+  DECIMALNUMBER: "ez-number-input"
+};
 
-export { ACTION_CONFIG as A, CONFIG_EVENTS as C, DEFAULT_TYPE as D, KEY_EVENTS as K, TAB_NAMES as T, VARS_BY_TYPE as V, TYPE_ACTIONS as a, VIEW_MODE as b };
+export { ACTION_CONFIG as A, CONFIG_EVENTS as C, DEFAULT_TYPE as D, KEY_EVENTS as K, TAB_NAMES as T, VARS_BY_TYPE as V, TAGS_BY_TYPE as a, TYPE_ACTIONS as b, VIEW_MODE as c };

package/dist/esm/{index-bafb2cef.js → index-e4121713.js}

@@ -31,6 +31,7 @@ const uniqueTime = (key, measureText) => {
     }
 };
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
 /**
  * Default style mode id
  */
@@ -339,6 +340,31 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'style') {
+            // update style attribute, css properties and values
+            {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
+        }
         else if (memberName === 'key')
             ;
         else if (memberName === 'ref') {
@@ -407,16 +433,36 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
                 catch (e) { }
             }
+            /**
+             * Need to manually update attribute if:
+             * - memberName is not an attribute
+             * - if we are rendering the host element in order to reflect attribute
+             * - if it's a SVG, since properties might not work in <svg>
+             * - if the newValue is null/undefined or 'false'.
+             */
+            let xlink = false;
+            {
+                if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
+                    memberName = ln;
+                    xlink = true;
+                }
+            }
             if (newValue == null || newValue === false) {
                 if (newValue !== false || elm.getAttribute(memberName) === '') {
-                    {
+                    if (xlink) {
+                        elm.removeAttributeNS(XLINK_NS, memberName);
+                    }
+                    else {
                         elm.removeAttribute(memberName);
                     }
                 }
             }
             else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
                 newValue = newValue === true ? '' : newValue;
-                {
+                if (xlink) {
+                    elm.setAttributeNS(XLINK_NS, memberName, newValue);
+                }
+                else {
                     elm.setAttribute(memberName, newValue);
                 }
             }