esinergia-card 0.1.0

package/dist/card.component.yml

@@ -0,0 +1,25 @@
+name: card
+version: 1.0.0
+renderer: web_component
+custom_element: esidcm-card
+props:
+  field_title:
+    type: string
+    required: true
+  field_summary:
+    type: string
+    required: false
+  field_image:
+    type: image
+    required: false
+  field_image_alt:
+    type: string
+    required: false
+  field_link:
+    type: url
+    required: false
+  field_target:
+    type: target
+    required: false
+slots: []
+dependencies: []

package/dist/card.css

@@ -0,0 +1,36 @@
+.esidcm-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  max-width: 90vw;
+  background: #ffffff;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
+}
+
+.esidcm-card__media img {
+  display: block;
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  background: #f3f4f6;
+}
+
+.esidcm-card__content {
+  padding: 1rem;
+}
+
+.esidcm-card__title {
+  margin: 0 0 0.5rem;
+  font-size: 1.125rem;
+}
+
+.esidcm-card__description {
+  margin: 0 0 0.75rem;
+  color: #4b5563;
+}
+
+.esidcm-card__link {
+  color: #1d4ed8;
+  text-decoration: none;
+  font-weight: 600;
+}

package/dist/card.html

@@ -0,0 +1,10 @@
+<article class="esidcm-card">
+  <div class="esidcm-card__media">
+    <img src="{{field_image}}" alt="{{field_image_alt}}">
+  </div>
+  <div class="esidcm-card__content">
+    <h3 class="esidcm-card__title">{{field_title}}</h3>
+    <p class="esidcm-card__description">{{field_summary}}</p>
+    <a class="esidcm-card__link" href="{{field_link}}" target="{{field_target}}">Ver más</a>
+  </div>
+</article>

package/dist/card.js

@@ -0,0 +1,61 @@
+(function () {
+  if (customElements.get("esidcm-card")) {
+    return;
+  }
+
+  class ESIDCMCard extends HTMLElement {
+    static get observedAttributes() {
+      return ["field_title", "field_summary", "field_image", "field_image_alt", "field_link", "field_target"];
+    }
+
+    connectedCallback() {
+      this.render();
+    }
+
+    attributeChangedCallback() {
+      this.render();
+    }
+
+    render() {
+      const title = this.getAttribute("field_title") || "Título de la card";
+      const summary = this.getAttribute("field_summary") || "Descripción de la card";
+      const image = this.getAttribute("field_image") || "";
+      const imageAlt = this.getAttribute("field_image_alt") || "";
+      const linkUrl = (this.getAttribute("field_link") || "").trim();
+      const linkTarget = this.normalizeTarget(this.getAttribute("field_target") || "_self");
+      const linkMarkup = linkUrl
+        ? `<a class="esidcm-card__link" href="${this.escapeAttr(linkUrl)}" target="${this.escapeAttr(linkTarget)}">Ver más</a>`
+        : "";
+
+      this.innerHTML = `
+        <article class="esidcm-card">
+          <div class="esidcm-card__media">
+            <img src="${this.escapeAttr(image)}" alt="${this.escapeAttr(imageAlt)}">
+          </div>
+          <div class="esidcm-card__content">
+            <h3 class="esidcm-card__title">${this.escapeHtml(title)}</h3>
+            <p class="esidcm-card__description">${this.escapeHtml(summary)}</p>
+            ${linkMarkup}
+          </div>
+        </article>
+      `;
+    }
+
+    escapeHtml(value) {
+      return String(value)
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+    }
+
+    escapeAttr(value) {
+      return this.escapeHtml(value).replace(/"/g, "&quot;");
+    }
+
+    normalizeTarget(value) {
+      return value === "_blank" ? "_blank" : "_self";
+    }
+  }
+
+  customElements.define("esidcm-card", ESIDCMCard);
+})();

package/dist/index.js

@@ -0,0 +1,2 @@
+import "./card.js";
+import "./card.css";

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "esinergia-card",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Componente web card de ESIDCM",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./card.js": "./dist/card.js",
+    "./card.css": "./dist/card.css",
+    "./card.component.yml": "./dist/card.component.yml",
+    "./card.html": "./dist/card.html"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node ../../scripts/build-card.mjs",
+    "test": "echo \"test pendiente para @esidcm/card\""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "UNLICENSED"
+}