@sankhyalabs/ezui 7.3.5-dev.1 → 7.3.5

package/dist/collection/components/ez-record-navigation/ez-record-navigation.js

@@ -1,246 +0,0 @@
-import { Action, ElementIDUtils } from '@sankhyalabs/core';
-import { Fragment, Host, h } from '@stencil/core';
-import initI18n from '../../utils/i18n';
-export class EzRecordNavigation {
-  constructor() {
-    this._dataUnitInitialized = false;
-    this.leftButtonDisabled = undefined;
-    this.rightButtonDisabled = undefined;
-    this.dataUnit = undefined;
-    this.primaryKeys = undefined;
-    this.textPosition = 'right';
-    this.disabled = false;
-  }
-  /**
-   * Navega para a página anterior.
-   */
-  async previousRecord() {
-    if (!this.dataUnit) {
-      return;
-    }
-    await this.dataUnit.previousRecord();
-  }
-  /**
-   * Navega para a próxima página.
-   */
-  async nextRecord() {
-    if (!this.dataUnit) {
-      return;
-    }
-    await this.dataUnit.nextRecord();
-  }
-  onDataUnitChange() {
-    this.initializeDataUnit();
-  }
-  onDisabledChange() {
-    this.setStatusButtonPagination();
-  }
-  renderPageTitle() {
-    if (!this.primaryKeys) {
-      return null;
-    }
-    return this.primaryKeys.map((key, index) => {
-      var _a;
-      const fieldValue = this.dataUnit.getFieldValue(key);
-      const fieldLabel = (_a = this.dataUnit.getField(key)) === null || _a === void 0 ? void 0 : _a.label;
-      const isLast = index === this.primaryKeys.length - 1;
-      return (h(Fragment, null, h("ez-tooltip", { message: fieldLabel !== null && fieldLabel !== void 0 ? fieldLabel : fieldValue }, h("span", { class: "record-navigation__label", "aria-live": "polite", "aria-atomic": "true" }, fieldValue !== null && fieldValue !== void 0 ? fieldValue : '-')), !isLast && h("span", { class: "record-navigation__divider" })));
-    });
-  }
-  dataUnitObserver(action) {
-    switch (action.type) {
-      case Action.SELECTION_CHANGED:
-      case Action.PREVIOUS_SELECTED:
-      case Action.NEXT_SELECTED:
-        this.setStatusButtonPagination();
-        break;
-      default:
-        break;
-    }
-  }
-  getLeftButtonDisabledStatus() {
-    if (!this.dataUnit || this.disabled)
-      return true;
-    return !this.dataUnit.hasPrevious();
-  }
-  getRightButtonDisabledStatus() {
-    if (!this.dataUnit || this.disabled)
-      return true;
-    return !this.dataUnit.hasNext();
-  }
-  setStatusButtonPagination() {
-    this.leftButtonDisabled = this.getLeftButtonDisabledStatus();
-    this.rightButtonDisabled = this.getRightButtonDisabledStatus();
-  }
-  initializeDataUnit() {
-    if (!this.dataUnit || this._dataUnitInitialized) {
-      return;
-    }
-    this.setStatusButtonPagination();
-    this._dataUnitObserverBound = this.dataUnitObserver.bind(this);
-    this.dataUnit.subscribe(this._dataUnitObserverBound);
-    this._dataUnitInitialized = true;
-  }
-  addInfoId() {
-    if (this._element) {
-      ElementIDUtils.addIDInfo(this._element);
-    }
-  }
-  async connectedCallback() {
-    this.i18n = await initI18n();
-    this.initializeDataUnit();
-  }
-  componentDidLoad() {
-    this.addInfoId();
-  }
-  disconnectedCallback() {
-    if (this.dataUnit && this._dataUnitInitialized && this._dataUnitObserverBound) {
-      this.dataUnit.unsubscribe(this._dataUnitObserverBound);
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        "record-navigation__container": true,
-        "record-navigation-text-right": this.textPosition === 'right'
-      } }, h("div", { class: "record-navigation__container-label" }, this.renderPageTitle()), h("div", { id: "grid-record-navigation-tooltip", class: "record-navigation__buttons-container" }, h("ez-tooltip", { message: this.i18n("ez-record-navigation.previousRecord") }, h("ez-button", { iconName: "chevron-left", mode: "icon", isDisabled: this.leftButtonDisabled, onClick: () => this.previousRecord(), label: this.i18n("ez-record-navigation.previousRecord") })), h("ez-tooltip", { message: this.i18n("ez-record-navigation.nextRecord") }, h("ez-button", { iconName: "chevron-right", mode: "icon", isDisabled: this.rightButtonDisabled, onClick: () => this.nextRecord(), label: this.i18n("ez-record-navigation.nextRecord") }))))));
-  }
-  static get is() { return "ez-record-navigation"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ez-record-navigation.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ez-record-navigation.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "dataUnit": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "DataUnit",
-          "resolved": "DataUnit",
-          "references": {
-            "DataUnit": {
-              "location": "import",
-              "path": "@sankhyalabs/core"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "DataUnit."
-        }
-      },
-      "primaryKeys": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Chaves prim\u00E1rias dos registros, usadas para visualizar o registro atual."
-        }
-      },
-      "textPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'left' | 'right'",
-          "resolved": "\"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "text-position",
-        "reflect": false,
-        "defaultValue": "'right'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Desabilita a navega\u00E7\u00E3o entre os registros."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "leftButtonDisabled": {},
-      "rightButtonDisabled": {}
-    };
-  }
-  static get methods() {
-    return {
-      "previousRecord": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Navega para a p\u00E1gina anterior.",
-          "tags": []
-        }
-      },
-      "nextRecord": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Navega para a pr\u00F3xima p\u00E1gina.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "_element"; }
-  static get watchers() {
-    return [{
-        "propName": "dataUnit",
-        "methodName": "onDataUnitChange"
-      }, {
-        "propName": "disabled",
-        "methodName": "onDisabledChange"
-      }];
-  }
-}

package/dist/collection/components/ez-scroller/EzScrollNavigationMode.js

@@ -1,5 +0,0 @@
-export var EzScrollNavigationMode;
-(function (EzScrollNavigationMode) {
-  EzScrollNavigationMode["SCROLLBAR"] = "scrollbar";
-  EzScrollNavigationMode["BUTTONS"] = "buttons";
-})(EzScrollNavigationMode || (EzScrollNavigationMode = {}));

package/dist/esm/FormLayout-bda67973.js

@@ -1,9 +0,0 @@
-var FormLayout;
-(function (FormLayout) {
-  FormLayout[FormLayout["CASCADE"] = 0] = "CASCADE";
-  FormLayout[FormLayout["CLASSIC_CASCADE"] = 1] = "CLASSIC_CASCADE";
-  FormLayout[FormLayout["SIDE_BY_SIDE"] = 2] = "SIDE_BY_SIDE";
-  FormLayout[FormLayout["CLASSIC_SIDE_BY_SIDE"] = 3] = "CLASSIC_SIDE_BY_SIDE";
-})(FormLayout || (FormLayout = {}));
-
-export { FormLayout as F };

package/dist/esm/FormMetadata-112f11d8.js

@@ -1,276 +0,0 @@
-import { DateUtils } from '@sankhyalabs/core';
-import { b as buildFieldMetadata } from './DataBinder-81d15b1b.js';
-import { g as getI18n } from './index-d37095f4.js';
-
-const DETAIL_PATTERN = /child\[([^\]]+)\]/;
-const REGEX_DEFAULT_VAR_KEY = /\$\{.+\}/;
-class FormMetadata {
-  constructor() {
-    this._sheets = new Map();
-    this._requiredFields = [];
-    this._cleanOnCopyFields = [];
-    this._defaultValues = {};
-  }
-  static getDetailName(name) {
-    const result = DETAIL_PATTERN.exec(name);
-    return result ? result[1] : undefined;
-  }
-  getSheet(name) {
-    return this._sheets.get(name);
-  }
-  getAllSheets() {
-    return this._sheets;
-  }
-  addSheet(sheet) {
-    this._sheets.set(sheet.name, sheet);
-  }
-  addRequiredFields(fields) {
-    this._requiredFields = this._requiredFields.concat(fields);
-  }
-  getRequiredFields() {
-    return this._requiredFields;
-  }
-  addCleanOnCopyFields(fields) {
-    this._cleanOnCopyFields = this._cleanOnCopyFields.concat(fields);
-  }
-  getCleanOnCopyFields() {
-    return this._cleanOnCopyFields;
-  }
-  addDefaultValues(defaultValues) {
-    return this._defaultValues = Object.assign(Object.assign({}, this._defaultValues), defaultValues);
-  }
-  getDefaultValues() {
-    const result = {};
-    Object.entries(this._defaultValues).forEach(([key, value]) => {
-      if (typeof value === "string") {
-        const result = REGEX_DEFAULT_VAR_KEY.exec(value);
-        if (result) {
-          value = this.getDefaultVar(result[0]);
-        }
-      }
-      result[key] = value;
-    });
-    return result;
-  }
-  getDefaultVar(name) {
-    if (name === "${data}") {
-      return DateUtils.getToday();
-    }
-    if (name === "${datahora}") {
-      return DateUtils.getToday(true);
-    }
-    return this._defaultVars ? this._defaultVars.get(name) : undefined;
-  }
-  setDefaultVars(vars) {
-    this._defaultVars = vars;
-  }
-}
-const buildFormConfigFromDataUnit = (dataUnit) => {
-  const unitMD = dataUnit.metadata;
-  let fields;
-  if (unitMD) {
-    fields = unitMD.fields
-      .filter(descriptor => descriptor.visible !== false)
-      .map(descriptor => { return { name: descriptor.name, defaultValue: descriptor.defaultValue }; });
-  }
-  return { emptyConfig: false, fields };
-};
-function handleDetailTabs(dataUnit, config, sheets) {
-  const unitMD = dataUnit.metadata;
-  if (unitMD === undefined || unitMD.children === undefined)
-    return;
-  unitMD.children.forEach((child) => {
-    const tabConfig = getTabFromConfig(child.label, config);
-    if (tabConfig) {
-      sheets.set(Object.assign(tabConfig, { name: buildChildName(child), isDetail: true }), []);
-      return;
-    }
-    const { label, name, fields } = buildDetailSheet(child);
-    sheets.set({ name, label, isDetail: true }, fields);
-  });
-}
-function handleCustomTabs(customGuides, config, sheets) {
-  customGuides.forEach((guide) => {
-    const tabConfig = getTabFromConfig(guide.label, config);
-    const ctxProps = {};
-    Object.entries(guide).forEach(([key, value]) => {
-      if (!isReservedKey(key)) {
-        ctxProps[key] = value;
-      }
-    });
-    if (tabConfig) {
-      sheets.set(Object.assign(tabConfig, { name: guide.id, isCustom: true, ctxProps }), []);
-      return;
-    }
-    const sheet = { label: guide.label, name: guide.id, isCustom: true, visible: true, ctxProps };
-    sheets.set(sheet, []);
-  });
-}
-function isReservedKey(key) {
-  return ['id', 'label'].includes(key);
-}
-function parseTabToFormSheet(key, fields) {
-  const i18n = getI18n();
-  return {
-    label: (key.label === "__main") ? i18n("ez-form.mainTab") : key.label,
-    name: key.name || key.label,
-    isCustom: key.isCustom,
-    isDetail: key.isDetail,
-    ctxProps: key.ctxProps,
-    fields
-  };
-}
-function handleFields(config, sheets, hiddenTabs, dataUnit, requiredFields, cleanOnCopyFields, defaultValues) {
-  var _a;
-  (_a = config === null || config === void 0 ? void 0 : config.fields) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
-    var _a, _b, _c, _d, _e, _f;
-    if (field.visible === false) {
-      return;
-    }
-    if (!field.tab && ((_b = (_a = dataUnit.getField(field.name)) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.isPrimaryKey)) {
-      field.tab = "__main";
-    }
-    const tabConfig = getTabConfig(field.tab || "Geral", sheets, config);
-    if (hiddenTabs.has(tabConfig.label)) {
-      return;
-    }
-    const descriptor = dataUnit.getField(field.name);
-    const fieldVisible = (descriptor === null || descriptor === void 0 ? void 0 : descriptor.visible) == undefined || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.visible) === true;
-    if (descriptor && fieldVisible && tabConfig.visible) {
-      if (!sheets.has(tabConfig)) {
-        sheets.set(tabConfig, []);
-      }
-      const formField = buildFieldMetadata(descriptor, field);
-      (_c = sheets.get(tabConfig)) === null || _c === void 0 ? void 0 : _c.push(formField);
-      if (formField.required) {
-        requiredFields.push(field.name);
-      }
-      const cleanOnCopy = field.cleanOnCopy == undefined ? (_d = descriptor.properties) === null || _d === void 0 ? void 0 : _d.cleanOnCopy : field.cleanOnCopy;
-      if (cleanOnCopy || ((_e = descriptor.properties) === null || _e === void 0 ? void 0 : _e.cleanOnCopy)) {
-        cleanOnCopyFields.push(field.name);
-      }
-      let defaultValue = field.defaultValue == undefined ? (_f = descriptor.properties) === null || _f === void 0 ? void 0 : _f.defaultValue : field.defaultValue;
-      if (defaultValue && defaultValue.value != undefined) {
-        const { type, value } = defaultValue;
-        if (type) {
-          if (type === "V") {
-            defaultValue = value;
-          }
-          else {
-            try {
-              const parsed = JSON.parse(value);
-              if (parsed && "value" in parsed) {
-                defaultValue = parsed;
-              }
-              else {
-                defaultValue = value;
-              }
-            }
-            catch (_g) {
-            }
-          }
-        }
-        defaultValues[field.name] = defaultValue;
-      }
-    }
-  });
-}
-function getDistinctTabs(config) {
-  var _a, _b;
-  const fieldTabs = (_b = (_a = config.fields) === null || _a === void 0 ? void 0 : _a.map((field, index) => ({
-    label: field.tab,
-    name: field.tab,
-    order: index,
-    visible: true,
-    isDetail: false,
-    isCustom: false,
-  }))) !== null && _b !== void 0 ? _b : [];
-  return fieldTabs.reduce((total, item) => {
-    if (!total.some((tab) => tab.name === item.name)) {
-      return [...total, item];
-    }
-    return total;
-  }, []);
-}
-const buildFormMetadata = (config, dataUnit, includeDetails = false, customGuides) => {
-  var _a;
-  if (config == undefined || (config === null || config === void 0 ? void 0 : config.emptyConfig) === true) {
-    config = buildFormConfigFromDataUnit(dataUnit);
-  }
-  const sheets = new Map();
-  const hiddenTabs = new Map();
-  const requiredFields = [];
-  const cleanOnCopyFields = [];
-  const defaultValues = {};
-  const tabs = (_a = config === null || config === void 0 ? void 0 : config.tabs) !== null && _a !== void 0 ? _a : getDistinctTabs(config);
-  tabs.forEach((tab) => {
-    if (!hiddenTabs.has(tab.label) && tab.visible === false) {
-      hiddenTabs.set(tab.label, tab);
-    }
-  });
-  handleFields(config, sheets, hiddenTabs, dataUnit, requiredFields, cleanOnCopyFields, defaultValues);
-  const metadata = new FormMetadata();
-  metadata.setDefaultVars(config.defaultVars);
-  if (includeDetails) {
-    handleDetailTabs(dataUnit, config, sheets);
-  }
-  if (customGuides) {
-    handleCustomTabs(customGuides, config, sheets);
-  }
-  Array.from(sheets.entries())
-    .sort(sortTabs)
-    .forEach(([tab, fields]) => {
-    if (!hiddenTabs.has(tab.label)) {
-      metadata.addSheet(parseTabToFormSheet(tab, fields));
-    }
-  });
-  metadata.addRequiredFields(requiredFields);
-  metadata.addCleanOnCopyFields(cleanOnCopyFields);
-  metadata.addDefaultValues(defaultValues);
-  return metadata;
-};
-const getTabFromConfig = (tab, config) => {
-  var _a;
-  if (!config) {
-    return;
-  }
-  const tabs = (_a = config === null || config === void 0 ? void 0 : config.tabs) !== null && _a !== void 0 ? _a : getDistinctTabs(config);
-  return tabs === null || tabs === void 0 ? void 0 : tabs.find(t => t.label === tab);
-};
-const getTabConfig = (tab, sheets, config) => {
-  if (typeof tab !== "string") {
-    return tab;
-  }
-  if (config) {
-    const tabConfig = getTabFromConfig(tab, config);
-    if (tabConfig) {
-      return tabConfig;
-    }
-  }
-  const tabConfig = Array.from(sheets.keys()).find(t => t.label === tab);
-  return tabConfig || { label: tab, visible: true };
-};
-function sortTabs(a, b) {
-  var _a, _b;
-  if (a[0].label === '__main' && b[0].label !== '__main') {
-    return -1;
-  }
-  if (a[0].label !== '__main' && b[0].label === '__main') {
-    return 1;
-  }
-  const aOrder = (_a = a[0].order) !== null && _a !== void 0 ? _a : Number.MAX_VALUE;
-  const bOrder = (_b = b[0].order) !== null && _b !== void 0 ? _b : Number.MAX_VALUE;
-  return aOrder - bOrder;
-}
-const buildChildName = (child) => {
-  return `child[${child.name}]`;
-};
-const buildDetailSheet = (child) => {
-  return {
-    name: buildChildName(child),
-    label: child.label,
-    fields: []
-  };
-};
-
-export { buildFormMetadata as b };

package/dist/esm/ez-card-item.entry.js

@@ -1,58 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
-import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
-
-const ezCardItemCss = ":host {  \n  /*@doc Define o tamanho da fonte do componente.*/\n  --ez-card-item--font-size: var(--text--medium, 14px);\n\n  /*@doc Define o tamanho da fonte do componente no modo compacto.*/\n  --ez-card-item--font-size-compacted: var(--text--extra-small, 10px);\n\n  /*@doc Define a família da fonte do componente.*/\n  --ez-card-item--font-family: var(--font-pattern, Arial);\n\n  /*@doc Define o peso da fonte do componente.*/\n  --ez-card-item--font-weight: var(--font-weight--semi-bold, 600);\n\n  /*@doc Define o peso da fonte do title do componente.*/\n  --ez-card-item--font-weight-large: var(--font-weight--semi-bold, 600);\n\n  /*@doc Define a cor da fonte do componente.*/\n  --ez-card-item--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte da key do componente.*/\n  --ez-card-item__key--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte do label do detalhe do componente.*/\n  --ez-card-item__detail-label--color: var(--text--secondary, #A2ABB9);\n\n  /*@doc Define a cor da fonte do valor do detalhe do componente.*/\n  --ez-card-item__detail-value--color: var(--color--petroleum-500, #404E65);\n\n  /*@doc Define o espaçamento inferior dos detalhes do componente.*/\n  --ez-card-item__detail--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define o espaçamento inferior do title do componente.*/\n  --ez-card-item__title--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define a cor do highlight / marcação nos textos do componente.*/\n  --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);\n\n   /*@doc Define o peso da fonte do componente.*/\n   --ez-card-item--detail-label--font-weight: var(--text-weight--large, 400);\n\n  width: 100%;\n  display: flex;\n  cursor: pointer;\n}\n\n.card-item {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: pointer;\n  z-index: 0;\n  position: relative;\n  container-type: inline-size;\n  container-name: box;\n  white-space: pre-line;\n}\n\n.card-item__detail{\n  display: inline-block;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  opacity: 0.95;\n}\n\n\n\n.card-item__expanded {\n  padding: var(--space--medium);\n}\n\n.card-item:hover {\n  background: #F0F3F7;\n  border-radius: 12px;\n}\n\n.card-item__title {\n  display: flex;\n  align-items: center;\n  line-height: 18px;\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight-large);\n  color: var(--ez-card-item--color);\n  padding-bottom: var(--ez-card-item__title--padding-bottom);\n  gap: var(--space--small, 6px);\n}\n\n.card-item__key {\n  /*public*/\n  color: var(--ez-card-item__key--color);\n}\n\n.card-item__details {\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.card-item__details-container__left {\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  cursor: pointer;\n  width: 50%;\n}\n\n.card-item__details-container__right {\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  width: 50%;\n  cursor: pointer;\n}\n\n.card-item__detail{\n  cursor: pointer;\n}\n\n.card-item__detail-default:not(:last-child) {\n  padding-bottom: var(--ez-card-item__detail--padding-bottom);\n}\n\n.card-item__detail-label {\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--detail-label--font-weight);\n}\n\n.card-item__detail-value {\n  cursor: pointer;\n  line-break: anywhere;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight);\n  color: var(--ez-card-item__detail-value--color);\n}\n\n.card-item__highlight {\n  position: relative;\n  border-radius: 8px;\n  z-index: -1;\n\n  /*public*/\n  background-color: var(--ez-card-item__highlight--color);\n  outline: 2px solid var(--ez-card-item__highlight--color);\n  box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color);\n}\n\n.card-item__content{\n  display: flex;\n  align-items: center;\n}\n\n.card-item__details-container_default{\n  display: flex;\n}\n\n.card-item__details-slot{\n  margin-left: auto;\n}\n\n/* Modo compacto */\n.card-item__compacted {\n  padding: var(--space--2xs) var(--space--small);\n}\n\n.card-item__detail-label-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__detail-value-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__title-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__details-container__left-compacted{\n  width: 100%;\n}\n\n.card-item__details-container__right-compacted {\n  width: 100%;\n}\n\n\n@container box (max-width: 550px) {\n  .card-item__details {\n    flex-direction: column;\n  }\n\n  .card-item__details-container__left {\n    width: 100%;\n  }\n  \n  .card-item__details-container__right {\n    width: 100%;\n  }\n}\n\n@container box (max-width: 200px) {\n  .card-item__title {\n    font-size: 10px;\n  }\n\n  .card-item__detail-label {\n    font-size: 10px;\n  }\n\n  .card-item__detail-value {\n    font-size: 10px;\n  }\n\n}";
-
-const EzCardItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ezClick = createEvent(this, "ezClick", 7);
-    this.item = undefined;
-    this.enableKey = true;
-    this.compacted = false;
-  }
-  componentWillRender() {
-    this.createDetailList();
-  }
-  componentDidLoad() {
-    var _a, _b;
-    const dataInfo = { id: StringUtils.toCamelCase(((_a = this.item) === null || _a === void 0 ? void 0 : _a.key) || ((_b = this.item) === null || _b === void 0 ? void 0 : _b.title) || "") };
-    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-  }
-  createDetailList() {
-    var _a, _b, _c;
-    this._details = { detailsLeft: [], detailsRight: [] };
-    let cont = 0;
-    if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.details) {
-      for (const attribute in this.item.details) {
-        cont < 3 ?
-          this._details.detailsLeft.push({ label: attribute, value: (_b = this.item.details[attribute]) === null || _b === void 0 ? void 0 : _b.toString() }) :
-          this._details.detailsRight.push({ label: attribute, value: (_c = this.item.details[attribute]) === null || _c === void 0 ? void 0 : _c.toString() });
-        cont++;
-      }
-    }
-  }
-  buildDetailContentTitle(detail) {
-    var _a, _b;
-    if ((detail === null || detail === void 0 ? void 0 : detail.label) == undefined && (detail === null || detail === void 0 ? void 0 : detail.value) == undefined)
-      return;
-    const cleanLabel = (_a = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.label)) === null || _a === void 0 ? void 0 : _a.replace(/<[^>]*>/g, '');
-    const cleanValue = (_b = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.value)) === null || _b === void 0 ? void 0 : _b.replace(/<[^>]*>/g, '');
-    return `${cleanLabel}: ${cleanValue}`;
-  }
-  buildDetailContent(detail) {
-    return h("div", { class: `card-item__detail ${this.compacted ? "" : "card-item__detail-default"}`, title: this.buildDetailContentTitle(detail) }, h("label", { class: `card-item__detail-label ${this.compacted ? "card-item__detail-label-compacted" : ""}` }, `${detail.label}: `), " ", h("label", { class: `card-item__detail-value ${this.compacted ? "card-item__detail-value-compacted" : ""}`, innerHTML: detail.value }));
-  }
-  render() {
-    return (h(Host, null, this.item &&
-      h("div", { class: `card-item ${this.compacted ? "card-item__compacted" : "card-item__expanded"} `, onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: `card-item__title ${this.compacted ? "card-item__title-compacted" : ""}` }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: `${this.compacted ? "card-item__details-container_compacted" : "card-item__details-container_default"}` }, h("div", { class: `card-item__details-container__left ${this.compacted ? "card-item__details-container__left-compacted" : ""}` }, this._details.detailsLeft.map(detail => {
-        return this.buildDetailContent(detail);
-      })), h("div", { class: `card-item__details-container__right ${this.compacted ? "card-item__details-container__right-compacted" : ""}` }, this._details.detailsRight.map(detail => {
-        return this.buildDetailContent(detail);
-      })))), h("div", { class: "ez-col ez-col--sd-1 card-item__details-slot" }, h("slot", { name: "rightSlot" }))))));
-  }
-  get _element() { return getElement(this); }
-};
-EzCardItem.style = ezCardItemCss;
-
-export { EzCardItem as ez_card_item };