veleta-templates 0.0.8 → 0.0.10

package/dist/cjs/data-helpers-Dv_PXPva.js

@@ -0,0 +1,68 @@
+'use strict';
+
+/**
+ * Carga fuentes usando webfontloader de forma dinámica.
+ * Esta función carga el módulo webfontloader solo cuando es necesario.
+ *
+ * @param fontConfig Configuración de fuentes para webfontloader
+ * @returns Promise que se resuelve cuando las fuentes se cargan
+ */
+async function loadFonts(fontConfig) {
+    if (!fontConfig || (!fontConfig.google && !fontConfig.custom)) {
+        return Promise.resolve();
+    }
+    try {
+        // Importación dinámica de webfontloader
+        // webfontloader puede exportar de diferentes formas según el entorno
+        const webfontloaderModule = await Promise.resolve().then(function () { return require('./webfontloader-CDgRDOZ3.js'); }).then(function (n) { return n.webfontloader; });
+        const WebFont = webfontloaderModule.default || webfontloaderModule;
+        if (!WebFont || typeof WebFont.load !== 'function') {
+            console.warn('webfontloader no está disponible o no tiene el método load');
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => {
+            const config = Object.assign(Object.assign({}, fontConfig), { active: () => {
+                    if (fontConfig.active) {
+                        fontConfig.active();
+                    }
+                    resolve();
+                }, inactive: () => {
+                    if (fontConfig.inactive) {
+                        fontConfig.inactive();
+                    }
+                    // No rechazamos la promesa, solo resolvemos
+                    // para que el template pueda renderizarse con fuentes por defecto
+                    resolve();
+                } });
+            WebFont.load(config);
+        });
+    }
+    catch (error) {
+        console.error('Error loading webfontloader:', error);
+        // Resolvemos en lugar de rechazar para que el template pueda renderizarse
+        return Promise.resolve();
+    }
+}
+/**
+ * Aplica la familia de fuente al elemento raíz del componente.
+ *
+ * @param element Elemento HTML al que aplicar la fuente
+ * @param fontFamily Familia de fuente CSS (ej: "Roboto, sans-serif")
+ */
+function applyFontFamily(element, fontFamily) {
+    if (fontFamily && element) {
+        element.style.fontFamily = fontFamily;
+    }
+}
+
+/**
+ * Formatea un precio como string con símbolo de euro.
+ * Si es un número entero, no muestra decimales.
+ */
+function formatPrice(price) {
+    return (price % 1 === 0 ? price.toString() : price.toFixed(2)) + '€';
+}
+
+exports.applyFontFamily = applyFontFamily;
+exports.formatPrice = formatPrice;
+exports.loadFonts = loadFonts;

package/dist/cjs/{index-rvPH40G4.js → index-Q72R0i75.js}

@@ -29,6 +29,10 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
+
+// src/utils/constants.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var HTML_NS = "http://www.w3.org/1999/xhtml";
 var reWireGetterSetter = (instance, hostRef) => {
   var _a;
   const cmpMeta = hostRef.$cmpMeta$;
@@ -97,6 +101,7 @@ var registerHost = (hostElement, cmpMeta) => {
   hostElement.__stencil__getHostRef = () => ref;
   return ref;
 };
+var isMemberInElement = (elm, memberName) => memberName in elm;
 var consoleError = (e, el) => (0, console.error)(e, el);
 
 // src/client/client-load-module.ts
@@ -119,10 +124,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'veleta-boston-template.cjs':
+                case 'veleta-brooklyn-template.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './veleta-brooklyn-template.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'veleta-umami-template.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './veleta-boston-template.cjs.entry.js')); }).then(processMod, consoleError);
+                        './veleta-umami-template.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(
@@ -481,6 +490,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
   if (oldValue === newValue) {
     return;
   }
+  let isProp = isMemberInElement(elm, memberName);
   memberName.toLowerCase();
   if (memberName === "class") {
     const classList = elm.classList;
@@ -511,7 +521,40 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else ;
+  } else if (memberName === "key") ; else {
+    const isComplex = isComplexType(newValue);
+    if ((isProp || isComplex && newValue !== null) && !isSvg) {
+      try {
+        if (!elm.tagName.includes("-")) {
+          const n = newValue == null ? "" : newValue;
+          if (memberName === "list") {
+            isProp = false;
+          } else if (oldValue == null || elm[memberName] != n) {
+            if (typeof elm.__lookupSetter__(memberName) === "function") {
+              elm[memberName] = n;
+            } else {
+              elm.setAttribute(memberName, n);
+            }
+          }
+        } else if (elm[memberName] !== newValue) {
+          elm[memberName] = newValue;
+        }
+      } catch (e) {
+      }
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(memberName) === "") {
+        {
+          elm.removeAttribute(memberName);
+        }
+      }
+    } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
+      newValue = newValue === true ? "" : newValue;
+      {
+        elm.setAttribute(memberName, newValue);
+      }
+    }
+  }
 };
 var parseClassListRegex = /\s/;
 var parseClassList = (value) => {
@@ -536,7 +579,9 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
           elm,
           memberName,
           oldVnodeAttrs[memberName],
-          void 0);
+          void 0,
+          isSvgMode2,
+          newVnode.$flags$);
       }
     }
   }
@@ -545,7 +590,9 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
       elm,
       memberName,
       oldVnodeAttrs[memberName],
-      newVnodeAttrs[memberName]);
+      newVnodeAttrs[memberName],
+      isSvgMode2,
+      newVnode.$flags$);
   }
 };
 function sortedAttrNames(attrNames) {
@@ -558,6 +605,7 @@ function sortedAttrNames(attrNames) {
   );
 }
 var hostTagName;
+var isSvgMode = false;
 var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   const newVNode2 = newParentVNode.$children$[childIndex];
   let i2 = 0;
@@ -566,16 +614,23 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   if (newVNode2.$text$ !== null) {
     elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
   } else {
+    if (!isSvgMode) {
+      isSvgMode = newVNode2.$tag$ === "svg";
+    }
     if (!win.document) {
       throw new Error(
         "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component."
       );
     }
-    elm = newVNode2.$elm$ = win.document.createElement(
+    elm = newVNode2.$elm$ = win.document.createElementNS(
+      isSvgMode ? SVG_NS : HTML_NS,
       newVNode2.$tag$
-    );
+    ) ;
+    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
+      isSvgMode = false;
+    }
     {
-      updateElement(null, newVNode2);
+      updateElement(null, newVNode2, isSvgMode);
     }
     if (newVNode2.$children$) {
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
@@ -585,6 +640,13 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
         }
       }
     }
+    {
+      if (newVNode2.$tag$ === "svg") {
+        isSvgMode = false;
+      } else if (elm.tagName === "foreignObject") {
+        isSvgMode = true;
+      }
+    }
   }
   elm["s-hn"] = hostTagName;
   return elm;
@@ -713,10 +775,14 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
   const newChildren = newVNode2.$children$;
+  const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   if (text === null) {
     {
-      updateElement(oldVNode, newVNode2);
+      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
+    }
+    {
+      updateElement(oldVNode, newVNode2, isSvgMode);
     }
     if (oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
@@ -731,6 +797,9 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     } else ;
+    if (isSvgMode && tag === "svg") {
+      isSvgMode = false;
+    }
   } else if (oldVNode.$text$ !== text) {
     elm.data = text;
   }

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-rvPH40G4.js');
+var index = require('./index-Q72R0i75.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["veleta-boston-template.cjs",[[256,"veleta-boston-template",{"dataJson":[1,"data-json"],"data":[16]}]]]], options);
+  return index.bootstrapLazy([["veleta-brooklyn-template.cjs",[[256,"veleta-brooklyn-template",{"dataJson":[1,"data-json"],"data":[16]}]]],["veleta-umami-template.cjs",[[256,"veleta-umami-template",{"dataJson":[1,"data-json"],"data":[16]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/veleta-brooklyn-template.cjs.entry.js

@@ -0,0 +1,93 @@
+'use strict';
+
+var index = require('./index-Q72R0i75.js');
+var dataHelpers = require('./data-helpers-Dv_PXPva.js');
+
+const brooklynTemplateCss = () => `.bk-wrapper{min-height:100vh;width:100%;padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bk-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}.bk-container{max-width:1280px;margin:0 auto;position:relative;z-index:10;padding:3rem 1.5rem;-ms-flex:1;flex:1;width:100%}.bk-insta-header{margin-top:0.5rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:0.2rem}.bk-instagram-link{display:-ms-flexbox;display:flex;gap:0.8rem;text-decoration:none;color:currentColor;font-weight:700;font-size:.9rem;text-transform:lowercase;letter-spacing:0;border-bottom:none;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;text-decoration:underline}@media (min-width: 768px){.bk-instagram-link{font-size:1.1rem}}.bk-instagram-link:hover{opacity:1}.bk-checkerboard{width:100%;height:80px;background-image:conic-gradient(currentColor 90deg,
+            transparent 90deg 180deg,
+            currentColor 180deg 270deg,
+            transparent 270deg);background-size:80px 80px;opacity:1}.bk-header{text-align:center;margin-bottom:3rem}.bk-header h1{font-size:3rem;text-transform:uppercase;font-weight:700;margin:0;letter-spacing:-2px;line-height:1}@media (min-width: 768px){.bk-header h1{font-size:3.5rem}}.bk-sections{display:grid;grid-template-columns:1fr;gap:3rem}@media (min-width: 768px){.bk-sections{grid-template-columns:repeat(2, 1fr);-moz-column-gap:4rem;-webkit-column-gap:4rem;column-gap:4rem;-ms-flex-align:start;align-items:start}}.bk-section{text-align:center;-moz-column-break-inside:avoid;-webkit-column-break-inside:avoid;break-inside:avoid}.bk-section-heading{background-color:currentColor;display:inline-block;padding:0.5rem 2rem;margin-bottom:2rem;min-width:250px;max-width:100%}.bk-section-heading h2{color:#fff;margin:0;text-transform:uppercase;font-size:1.2rem;font-weight:700;letter-spacing:0.2em}.bk-section-desc{color:currentColor;font-size:0.95rem;line-height:1.5;text-align:start}.bk-dishes-grid{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1.5rem;width:100%}.bk-dish{text-align:left}.bk-dish-row{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:baseline;align-items:baseline;padding-bottom:0;}.bk-dish-name{font-weight:700;text-transform:uppercase;font-size:1rem}.bk-dish-price{font-weight:700;font-size:1rem;}.bk-dish-desc{margin:0.25rem 0 0 0;color:var(--bk-secondary);font-size:0.85rem;line-height:1.4}@media (min-width: 768px){.bk-section-heading h2{font-size:1.5rem}.bk-dish-name,.bk-dish-price{font-size:1.2rem}.bk-section-desc{font-size:1.1rem}.bk-dish-desc{font-size:1rem}}.animate-item{opacity:1;-webkit-transform:none;transform:none;}.is-visible{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}`;
+
+const BrooklynTemplate = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Menu data as JSON string
+         */
+        this.dataJson = '{}';
+        this.fontConfig = {
+            google: {
+                families: ['Oswald:700', 'Courier Prime:400,700'],
+            },
+        };
+    }
+    async componentWillLoad() {
+        await dataHelpers.loadFonts(this.fontConfig);
+        // Courier Prime será la base por defecto
+        dataHelpers.applyFontFamily(this.el, 'Courier Prime, monospace');
+    }
+    componentDidLoad() {
+        this.initObserver();
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    initObserver() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('is-visible');
+                    this.observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.1 });
+        const elements = this.el.querySelectorAll('.animate-item');
+        elements.forEach((el) => this.observer.observe(el));
+    }
+    render() {
+        var _a;
+        let menuData = null;
+        if (this.data) {
+            menuData = this.data;
+        }
+        else if (this.dataJson && this.dataJson !== '{}') {
+            try {
+                menuData = JSON.parse(this.dataJson);
+            }
+            catch (e) {
+                console.warn('Invalid dataJson provided:', e);
+            }
+        }
+        const theme = (_a = menuData === null || menuData === void 0 ? void 0 : menuData.templateData) === null || _a === void 0 ? void 0 : _a.theme;
+        const primary = (theme === null || theme === void 0 ? void 0 : theme.primaryColor) || '#000000';
+        const secondary = (theme === null || theme === void 0 ? void 0 : theme.secondaryColor) || '#000000';
+        const background = (theme === null || theme === void 0 ? void 0 : theme.backgroundColor) || '#ffffff';
+        if (!menuData)
+            return index.h("div", { class: "bk-wrapper" });
+        // Data setup
+        const { business, sections } = menuData;
+        const sortedSections = (sections || []).sort((a, b) => a.order - b.order);
+        // Tipografías
+        const fontHeader = 'Oswald, sans-serif'; // Solo para el restaurante
+        const fontTypewriter = 'Courier Prime, monospace'; // Para todo lo demás
+        return (index.h("div", { class: "bk-wrapper", style: {
+                backgroundColor: background,
+                color: primary,
+                '--bk-secondary': secondary,
+            } }, index.h("div", { class: "bk-checkerboard top" }), index.h("div", { class: "bk-container" }, (business === null || business === void 0 ? void 0 : business.name) && (index.h("header", { class: "bk-header" }, (business === null || business === void 0 ? void 0 : business.instagramUrl) && (index.h("div", { class: "bk-insta-header" }, index.h("h1", { style: { fontFamily: fontHeader } }, business.name), index.h("a", { href: business.instagramUrl, target: "_blank", rel: "noopener noreferrer", class: "bk-instagram-link", style: { fontFamily: fontTypewriter } }, "S\u00EDguenos en Instagram", index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 14", id: "Instagram--Streamline-Core", height: "14", width: "14" }, index.h("desc", null, "Instagram Streamline Icon: https://streamlinehq.com"), index.h("g", { id: "instagram" }, index.h("g", { id: "Group 4546" }, index.h("path", { id: "Vector", stroke: primary, "stroke-linecap": "round", "stroke-linejoin": "round", d: "M10.3332 3.64404c-0.1381 0 -0.25 -0.11193 -0.25 -0.25s0.1119 -0.25 0.25 -0.25", "stroke-width": "1" }), index.h("path", { id: "Vector_2", stroke: primary, "stroke-linecap": "round", "stroke-linejoin": "round", d: "M10.3332 3.64404c0.1381 0 0.25 -0.11193 0.25 -0.25s-0.1119 -0.25 -0.25 -0.25", "stroke-width": "1" })), index.h("path", { id: "Rectangle 2", stroke: primary, "stroke-linecap": "round", "stroke-linejoin": "round", d: "M0.858276 3.43141c0 -1.42103 1.151974 -2.573012 2.573014 -2.573012h6.86141c1.421 0 2.573 1.151982 2.573 2.573012v6.86139c0 1.421 -1.152 2.573 -2.573 2.573H3.43129c-1.42104 0 -2.573014 -1.152 -2.573014 -2.573V3.43141Z", "stroke-width": "1" }), index.h("path", { id: "Ellipse 11", stroke: primary, "stroke-linecap": "round", "stroke-linejoin": "round", d: "M4.312 6.862a2.55 2.55 0 1 0 5.1 0 2.55 2.55 0 1 0 -5.1 0", "stroke-width": "1" })))))))), index.h("div", { class: "bk-sections" }, sortedSections.map((section) => {
+            const sectionDishes = (section.dishes || []).sort((a, b) => a.order - b.order);
+            if (!sectionDishes.length)
+                return null;
+            return (index.h("section", { key: section.id, class: "bk-section animate-item" }, index.h("div", { class: "bk-section-heading" }, index.h("h2", { style: { fontFamily: fontTypewriter } }, section.title)), section.description && (index.h("p", { class: "bk-section-desc", style: { fontFamily: fontTypewriter } }, section.description)), index.h("div", { class: "bk-dishes-grid" }, sectionDishes.map((dish) => (index.h("div", { key: dish.id, class: "bk-dish" }, index.h("div", { class: "bk-dish-row" }, index.h("span", { class: "bk-dish-name", style: { fontFamily: fontTypewriter } }, dish.name), index.h("span", { class: "bk-dish-price", style: { fontFamily: fontTypewriter } }, dataHelpers.formatPrice(dish.price))), dish.description && (index.h("p", { class: "bk-dish-desc", style: { fontFamily: fontTypewriter } }, dish.description))))))));
+        }))), index.h("div", { class: "bk-checkerboard bottom" })));
+    }
+    get el() { return index.getElement(this); }
+};
+BrooklynTemplate.style = brooklynTemplateCss();
+
+exports.veleta_brooklyn_template = BrooklynTemplate;

package/dist/cjs/veleta-templates.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-rvPH40G4.js');
+var index = require('./index-Q72R0i75.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["veleta-boston-template.cjs",[[256,"veleta-boston-template",{"dataJson":[1,"data-json"],"data":[16]}]]]], options);
+  return index.bootstrapLazy([["veleta-brooklyn-template.cjs",[[256,"veleta-brooklyn-template",{"dataJson":[1,"data-json"],"data":[16]}]]],["veleta-umami-template.cjs",[[256,"veleta-umami-template",{"dataJson":[1,"data-json"],"data":[16]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/veleta-umami-template.cjs.entry.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var index = require('./index-Q72R0i75.js');
+var dataHelpers = require('./data-helpers-Dv_PXPva.js');
+
+const umamiTemplateCss = () => `.menu-wrapper{min-height:100vh;width:100%;padding:1.5rem 1rem;font-family:'Merriweather', serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;display:block}.menu-wrapper *,.menu-wrapper *::before,.menu-wrapper *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.animate-item{opacity:0;-webkit-transform:translateY(30px);transform:translateY(30px);-webkit-transition:opacity 0.8s ease-out, -webkit-transform 0.8s ease-out;transition:opacity 0.8s ease-out, -webkit-transform 0.8s ease-out;transition:opacity 0.8s ease-out, transform 0.8s ease-out;transition:opacity 0.8s ease-out, transform 0.8s ease-out, -webkit-transform 0.8s ease-out;will-change:opacity, transform}.animate-item.is-visible{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.menu-wrapper h1,.menu-wrapper h2,.menu-wrapper h3,.menu-wrapper h4,.menu-wrapper h5,.menu-wrapper h6,.menu-wrapper p,.menu-wrapper ul,.menu-wrapper ol,.menu-wrapper li,.menu-wrapper header,.menu-wrapper section,.menu-wrapper article,.menu-wrapper aside,.menu-wrapper nav,.menu-wrapper blockquote,.menu-wrapper figure,.menu-wrapper figcaption{margin:0;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0}.menu-wrapper ul,.menu-wrapper ol{padding:0}@media (min-width: 640px){.menu-wrapper{padding:2rem 1.5rem}}@media (min-width: 768px){.menu-wrapper{padding:2rem 1rem}}.menu-container{max-width:1280px;margin:0 auto}.menu-header{text-align:center}@media (min-width: 768px){.menu-header{margin-bottom:3rem}}.restaurant-title{padding-top:1rem;font-size:2rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;line-height:1.1;margin:0 0 2rem 0 !important}@media (min-width: 640px){.restaurant-title{text-align:start;font-size:2.5rem;margin:0 0 3.5rem 0 !important}}@media (min-width: 768px){.restaurant-title{font-size:3rem}}@media (min-width: 1024px){.restaurant-title{font-size:3.5rem}}.sections-container{display:grid;grid-template-columns:1fr;gap:4rem}@media (min-width: 768px){.sections-container{grid-template-columns:repeat(2, 1fr);gap:3rem}}.menu-section{display:-ms-flexbox;display:flex;width:100%;position:relative}.section-label-wrapper{position:relative;width:3rem;-ms-flex-negative:0;flex-shrink:0;margin-right:1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.section-label-line{position:absolute;right:0;top:0;bottom:0;width:1px;border-right:1px solid}.section-label{font-weight:700;font-size:1.125rem;text-transform:uppercase;letter-spacing:0.15em;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;-webkit-transform:rotate(180deg);transform:rotate(180deg);text-align:right;white-space:nowrap;margin:0 0 0.5rem 0;-webkit-margin-after:0.5rem;margin-block-end:0.5rem;position:absolute;top:0}@media (min-width: 640px){.section-label{font-size:1.2375rem}}@media (min-width: 768px){.section-label{font-size:1.35rem}}@media (min-width: 1024px){.section-label{font-size:1.51875rem}}.section-content{-ms-flex:1;flex:1;padding-top:0.25rem}.section-description{font-size:0.875rem;font-style:italic;margin:0 0 1rem 0 !important;-webkit-margin-after:1rem;margin-block-end:1rem;opacity:0.75;color:inherit}@media (min-width: 640px){.section-description{font-size:0.9625rem}}@media (min-width: 768px){.section-description{font-size:1.05rem}}@media (min-width: 1024px){.section-description{font-size:1.18125rem}}.dishes-list{list-style:none;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1rem}.dish-item{position:relative}.dish-header{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;width:100%;gap:0.5rem}.dish-name{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;-ms-flex-negative:1;flex-shrink:1;min-width:0;overflow-wrap:break-word}@media (min-width: 640px){.dish-name{font-size:1.1rem}}@media (min-width: 768px){.dish-name{font-size:1.2rem}}@media (min-width: 1024px){.dish-name{font-size:1.35rem}}.dish-dots{-ms-flex:1;flex:1;opacity:0.25;border-bottom:2px dotted;margin:0 0.55rem;position:relative;-webkit-transform:translateY(-5px);transform:translateY(-5px);border-color:currentColor;min-width:1rem}.dish-price{font-size:1rem;font-weight:700;-ms-flex-negative:0;flex-shrink:0;text-align:right;min-width:3ch}@media (min-width: 640px){.dish-price{font-size:1.1rem}}@media (min-width: 768px){.dish-price{font-size:1.2rem}}@media (min-width: 1024px){.dish-price{font-size:1.35rem}}.dish-description{font-size:0.8125rem;margin-top:0.25rem;line-height:1.4;opacity:0.7;color:inherit;width:100%}@media (min-width: 640px){.dish-description{font-size:0.9425rem}}.menu-footer{margin-top:4rem;padding-top:2rem;text-align:center;border-top:1px solid currentColor;opacity:0.8}@media (min-width: 768px){.menu-footer{margin-top:5rem;padding-top:2.5rem}}.instagram-link{display:inline-block;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;text-decoration:none;color:inherit;padding:0.75rem 1.5rem;border:2px solid currentColor;border-radius:0.25rem;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;position:relative;overflow:hidden}.instagram-link::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background-color:currentColor;opacity:0.1;-webkit-transition:left 0.3s ease;transition:left 0.3s ease;z-index:-1}.instagram-link:hover::before{left:0}.instagram-link:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);box-shadow:0 4px 8px rgba(0, 0, 0, 0.15)}@media (min-width: 640px){.instagram-link{font-size:1.1rem;padding:0.875rem 2rem}}@media (min-width: 768px){.instagram-link{font-size:1.125rem}}`;
+
+const UmamiTemplate = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Menu data as JSON string (for compatibility with HTML attributes)
+         * @deprecated Use `data` prop instead for better type safety
+         */
+        this.dataJson = '{}';
+        this.fontConfig = {
+            google: {
+                families: ['Oswald:400,600,700', 'Merriweather:300,400,700'],
+            },
+        };
+    }
+    async componentWillLoad() {
+        await dataHelpers.loadFonts(this.fontConfig);
+        dataHelpers.applyFontFamily(this.el, 'Merriweather, serif');
+    }
+    componentDidLoad() {
+        this.initObserver();
+    }
+    componentDidUpdate() {
+        this.initObserver();
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    initObserver() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    const target = entry.target;
+                    target.classList.add('is-visible');
+                    // Stop observing once visible to avoid re-animating
+                    this.observer.unobserve(target);
+                }
+            });
+        }, {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px',
+        });
+        const elements = this.el.querySelectorAll('.animate-item');
+        elements.forEach((el) => this.observer.observe(el));
+    }
+    render() {
+        var _a;
+        let menuData = null;
+        // Priority 1: Use object data if provided
+        if (this.data) {
+            menuData = this.data;
+        }
+        // Priority 2: Parse JSON string
+        else if (this.dataJson && this.dataJson !== '{}') {
+            try {
+                menuData = JSON.parse(this.dataJson);
+            }
+            catch (e) {
+                console.warn('Invalid dataJson provided to veleta-umami-template:', e);
+            }
+        }
+        const theme = (_a = menuData === null || menuData === void 0 ? void 0 : menuData.templateData) === null || _a === void 0 ? void 0 : _a.theme;
+        const primary = (theme === null || theme === void 0 ? void 0 : theme.primaryColor) || '#1a365d';
+        const background = (theme === null || theme === void 0 ? void 0 : theme.backgroundColor) || '#FFFFFF';
+        const fontBody = 'Merriweather, serif';
+        const fontTitle = 'Oswald, sans-serif';
+        if (!menuData) {
+            return (index.h("div", { class: "menu-wrapper", style: { color: primary, backgroundColor: background } }));
+        }
+        const { sections, business } = menuData;
+        // Ordenar secciones por 'order'
+        const sortedSections = (sections || []).sort((a, b) => a.order - b.order);
+        return (index.h("div", { class: "menu-wrapper", style: { color: primary, backgroundColor: background } }, index.h("div", { class: "menu-container" }, (business === null || business === void 0 ? void 0 : business.name) && (index.h("header", { class: "menu-header" }, index.h("h1", { class: "restaurant-title animate-item", style: { fontFamily: fontTitle } }, business.name))), index.h("div", { class: "sections-container" }, sortedSections.map((section) => {
+            const sectionDishes = (section.dishes || []).sort((a, b) => a.order - b.order);
+            if (!sectionDishes.length)
+                return null;
+            return (index.h("section", { key: section.id, class: "menu-section animate-item" }, index.h("div", { class: "section-label-wrapper" }, index.h("div", { class: "section-label-line", style: { borderColor: primary } }), index.h("h2", { class: "section-label", style: { fontFamily: fontTitle, color: primary } }, section.title)), index.h("div", { class: "section-content" }, section.description && (index.h("p", { class: "section-description", style: { fontFamily: fontBody } }, section.description)), index.h("ul", { class: "dishes-list" }, sectionDishes.map((dish, index$1) => (index.h("li", { key: dish.id, class: "dish-item animate-item", style: { transitionDelay: `${index$1 * 50}ms` } }, index.h("div", { class: "dish-header" }, index.h("h3", { class: "dish-name", style: { fontFamily: fontTitle, color: primary } }, dish.name), index.h("div", { class: "dish-dots" }), index.h("span", { class: "dish-price", style: { fontFamily: fontTitle, color: primary } }, dataHelpers.formatPrice(dish.price))), dish.description && (index.h("p", { class: "dish-description", style: { fontFamily: fontBody } }, dish.description)))))))));
+        })), (business === null || business === void 0 ? void 0 : business.instagramUrl) && (index.h("footer", { class: "menu-footer animate-item" }, index.h("a", { href: business.instagramUrl, target: "_blank", rel: "noopener noreferrer", class: "instagram-link", style: { fontFamily: fontTitle, color: primary } }, "S\u00EDguenos en Instagram"))))));
+    }
+    get el() { return index.getElement(this); }
+};
+UmamiTemplate.style = umamiTemplateCss();
+
+exports.veleta_umami_template = UmamiTemplate;

package/dist/collection/collection-manifest.json

@@ -1,6 +1,7 @@
 {
   "entries": [
-    "components/boston-template/boston-template.js"
+    "components/umami-template/umami-template.js",
+    "components/brooklyn-template/brooklyn-template.js"
   ],
   "compiler": {
     "name": "@stencil/core",