@sankhyalabs/ezui 7.3.3 → 7.3.4-dev.1

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

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a7b0c73d.js');
+const core = require('@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) {
+    index.registerInstance(this, hostRef);
+    this.ezClick = index.createEvent(this, "ezClick", 7);
+    this.item = undefined;
+    this.enableKey = true;
+    this.compacted = false;
+  }
+  componentWillRender() {
+    this.createDetailList();
+  }
+  componentDidLoad() {
+    var _a, _b;
+    const dataInfo = { id: core.StringUtils.toCamelCase(((_a = this.item) === null || _a === void 0 ? void 0 : _a.key) || ((_b = this.item) === null || _b === void 0 ? void 0 : _b.title) || "") };
+    core.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 = core.StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.label)) === null || _a === void 0 ? void 0 : _a.replace(/<[^>]*>/g, '');
+    const cleanValue = (_b = core.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 index.h("div", { class: `card-item__detail ${this.compacted ? "" : "card-item__detail-default"}`, title: this.buildDetailContentTitle(detail) }, index.h("label", { class: `card-item__detail-label ${this.compacted ? "card-item__detail-label-compacted" : ""}` }, `${detail.label}: `), " ", index.h("label", { class: `card-item__detail-value ${this.compacted ? "card-item__detail-value-compacted" : ""}`, innerHTML: detail.value }));
+  }
+  render() {
+    return (index.h(index.Host, null, this.item &&
+      index.h("div", { class: `card-item ${this.compacted ? "card-item__compacted" : "card-item__expanded"} `, onClick: () => { this.ezClick.emit(this.item); } }, index.h("div", { class: "ez-row card-item__content" }, index.h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, index.h("label", { class: `card-item__title ${this.compacted ? "card-item__title-compacted" : ""}` }, this.enableKey && (index.h("span", { class: "card-item__key", innerHTML: this.item.key })), index.h("span", { innerHTML: this.item.title })), index.h("div", { class: `${this.compacted ? "card-item__details-container_compacted" : "card-item__details-container_default"}` }, index.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);
+      })), index.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);
+      })))), index.h("div", { class: "ez-col ez-col--sd-1 card-item__details-slot" }, index.h("slot", { name: "rightSlot" }))))));
+  }
+  get _element() { return index.getElement(this); }
+};
+EzCardItem.style = ezCardItemCss;
+
+exports.ez_card_item = EzCardItem;