veleta-templates 0.0.17 → 0.0.19

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

@@ -19,7 +19,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'veleta-templates';
-const BUILD = /* veleta-templates */ { hydratedSelectorName: "hydrated", lazyLoad: true, prop: true, propChangeCallback: false, updatable: true};
+const BUILD = /* veleta-templates */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: false, state: true, updatable: true};
 
 /*
  Stencil Client Platform v4.39.0 | MIT Licensed | https://stenciljs.com
@@ -29,10 +29,6 @@ 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$;
@@ -77,7 +73,7 @@ var registerInstance = (lazyInstance, hostRef) => {
   if (!hostRef) return;
   lazyInstance.__stencil__getHostRef = () => hostRef;
   hostRef.$lazyInstance$ = lazyInstance;
-  if (hostRef.$cmpMeta$.$flags$ & 512 /* hasModernPropertyDecls */ && (BUILD.prop)) {
+  if (hostRef.$cmpMeta$.$flags$ & 512 /* hasModernPropertyDecls */ && (BUILD.state)) {
     reWireGetterSetter(lazyInstance, hostRef);
   }
 };
@@ -124,10 +120,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'veleta-brooklyn-template.cjs':
+                case 'veleta-default-template.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './veleta-brooklyn-template.cjs.entry.js')); }).then(processMod, consoleError);
+                        './veleta-default-template.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'veleta-umami-template.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -491,7 +487,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     return;
   }
   let isProp = isMemberInElement(elm, memberName);
-  memberName.toLowerCase();
+  let ln = memberName.toLowerCase();
   if (memberName === "class") {
     const classList = elm.classList;
     const oldClasses = parseClassList(oldValue);
@@ -521,9 +517,27 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else {
+  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+    if (memberName[2] === "-") {
+      memberName = memberName.slice(3);
+    } else if (isMemberInElement(win, ln)) {
+      memberName = ln.slice(2);
+    } else {
+      memberName = ln[2] + memberName.slice(3);
+    }
+    if (oldValue || newValue) {
+      const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+      memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
+      if (oldValue) {
+        plt.rel(elm, memberName, oldValue, capture);
+      }
+      if (newValue) {
+        plt.ael(elm, memberName, newValue, capture);
+      }
+    }
+  } else {
     const isComplex = isComplexType(newValue);
-    if ((isProp || isComplex && newValue !== null) && !isSvg) {
+    if ((isProp || isComplex && newValue !== null) && true) {
       try {
         if (!elm.tagName.includes("-")) {
           const n = newValue == null ? "" : newValue;
@@ -566,6 +580,8 @@ var parseClassList = (value) => {
   }
   return value.split(parseClassListRegex);
 };
+var CAPTURE_EVENT_SUFFIX = "Capture";
+var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/runtime/vdom/update-element.ts
 var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
@@ -614,21 +630,14 @@ 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.createElementNS(
-      isSvgMode ? SVG_NS : HTML_NS,
+    elm = newVNode2.$elm$ = win.document.createElement(
       newVNode2.$tag$
-    ) ;
-    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
-      isSvgMode = false;
-    }
+    );
     {
       updateElement(null, newVNode2, isSvgMode);
     }
@@ -640,13 +649,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
         }
       }
     }
-    {
-      if (newVNode2.$tag$ === "svg") {
-        isSvgMode = false;
-      } else if (elm.tagName === "foreignObject") {
-        isSvgMode = true;
-      }
-    }
   }
   elm["s-hn"] = hostTagName;
   return elm;
@@ -775,12 +777,8 @@ 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) {
-    {
-      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
-    }
     {
       updateElement(oldVNode, newVNode2, isSvgMode);
     }
@@ -797,9 +795,6 @@ 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-Q72R0i75.js');
+var index = require('./index-DgFTJj_U.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-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);
+  return index.bootstrapLazy([["veleta-default-template.cjs",[[256,"veleta-default-template",{"data":[16],"dataJson":[1,"data-json"],"expandedDishes":[32],"searchQuery":[32]}]]],["veleta-umami-template.cjs",[[256,"veleta-umami-template",{"dataJson":[1,"data-json"],"data":[16]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -0,0 +1,62 @@
+'use strict';
+
+var index = require('./index-DgFTJj_U.js');
+
+const defaultTemplateCss = () => `.dish-desc-smooth{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;transition:max-height 0.8s cubic-bezier(0.25, 1, 0.5, 1), -webkit-line-clamp 0.8s cubic-bezier(0.25, 1, 0.5, 1);will-change:max-height}.dish-desc-smooth.collapsed{-webkit-line-clamp:1;max-height:1.5rem}.dish-desc-smooth.expanded{-webkit-line-clamp:15;max-height:12rem}`;
+
+const DefaultTemplate = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.expandedDishes = {};
+        this.searchQuery = '';
+        /**
+         * Menu data as JSON string (for compatibility with HTML attributes)
+         */
+        this.dataJson = '{}';
+    }
+    toggleDish(id) {
+        this.expandedDishes = Object.assign(Object.assign({}, this.expandedDishes), { [id]: !this.expandedDishes[id] });
+    }
+    render() {
+        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 to veleta-default-template:', e);
+            }
+        }
+        if (!menuData) {
+            return (index.h("div", { class: "default-template-empty" }, "No data provided for Default Template"));
+        }
+        const { sections, business } = menuData;
+        const sortedSections = (sections || []).sort((a, b) => a.order - b.order);
+        return (index.h("div", { class: "default-template-wrapper p-4 bg-gray-100 flex flex-col gap-4 min-h-screen", "data-theme": "light" }, business && (index.h("header", { class: "text-center mt-6 mb-2" }, index.h("h1", { class: "text-4xl font-bold uppercase" }, business.name))), sortedSections.map((section) => {
+            const sectionDishes = (section.dishes || [])
+                // .filter((dish) => {
+                //   if (!this.searchQuery) return true;
+                //   const term = this.searchQuery;
+                //   return (
+                //     dish.name.toLowerCase().includes(term) ||
+                //     (dish.description &&
+                //       dish.description.toLowerCase().includes(term))
+                //   );
+                // })
+                .sort((a, b) => a.order - b.order);
+            if (!sectionDishes.length)
+                return null;
+            return (index.h("div", { key: section.id, class: "flex flex-col gap-3 w-96 mx-auto mb-4" }, index.h("div", { class: "divider text-lg" }, section.title), sectionDishes.map((dish) => {
+                const isOpen = !!this.expandedDishes[dish.id];
+                return (index.h("div", { key: dish.id, class: "card w-96 bg-base-100 card-xs shadow-sm cursor-pointer", onClick: () => this.toggleDish(dish.id) }, index.h("div", { class: "card-body p-4" }, index.h("div", { class: "flex justify-between items-center w-full" }, index.h("h2", { class: "card-title min-w-0 flex-1 mr-2" }, index.h("span", { class: "truncate block w-full" }, dish.name)), index.h("div", { class: "badge badge-primary text-xs shrink-0" }, dish.price, " \u20AC")), index.h("p", { class: `dish-desc-smooth ${isOpen ? 'expanded' : 'collapsed'}` }, dish.description))));
+            })));
+        })));
+    }
+    get el() { return index.getElement(this); }
+};
+DefaultTemplate.style = defaultTemplateCss();
+
+exports.veleta_default_template = DefaultTemplate;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Q72R0i75.js');
+var index = require('./index-DgFTJj_U.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-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);
+  return index.bootstrapLazy([["veleta-default-template.cjs",[[256,"veleta-default-template",{"data":[16],"dataJson":[1,"data-json"],"expandedDishes":[32],"searchQuery":[32]}]]],["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

@@ -1,7 +1,69 @@
 'use strict';
 
-var index = require('./index-Q72R0i75.js');
-var dataHelpers = require('./data-helpers-Dv_PXPva.js');
+var index = require('./index-DgFTJj_U.js');
+
+/**
+ * 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 (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)) + '€';
+}
 
 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}.umami-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}.umami-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}}`;
 
@@ -20,8 +82,8 @@ const UmamiTemplate = class {
         };
     }
     async componentWillLoad() {
-        await dataHelpers.loadFonts(this.fontConfig);
-        dataHelpers.applyFontFamily(this.el, 'Merriweather, serif');
+        await loadFonts(this.fontConfig);
+        applyFontFamily(this.el, 'Merriweather, serif');
     }
     componentDidLoad() {
         this.initObserver();
@@ -85,7 +147,7 @@ const UmamiTemplate = class {
             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 umami-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 umami-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)))))))));
+            return (index.h("section", { key: section.id, class: "menu-section umami-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 umami-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 } }, 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 umami-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); }

package/dist/collection/collection-manifest.json

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

package/dist/collection/components/default-template/default-template.css

@@ -0,0 +1,17 @@
+.dish-desc-smooth {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  transition: max-height 0.8s cubic-bezier(0.25, 1, 0.5, 1), -webkit-line-clamp 0.8s cubic-bezier(0.25, 1, 0.5, 1);
+  will-change: max-height;
+}
+
+.dish-desc-smooth.collapsed {
+  -webkit-line-clamp: 1;
+  max-height: 1.5rem;
+}
+
+.dish-desc-smooth.expanded {
+  -webkit-line-clamp: 15;
+  max-height: 12rem;
+}

package/dist/collection/components/default-template/default-template.js

@@ -0,0 +1,117 @@
+import { h } from "@stencil/core";
+export class DefaultTemplate {
+    constructor() {
+        this.expandedDishes = {};
+        this.searchQuery = '';
+        /**
+         * Menu data as JSON string (for compatibility with HTML attributes)
+         */
+        this.dataJson = '{}';
+    }
+    toggleDish(id) {
+        this.expandedDishes = Object.assign(Object.assign({}, this.expandedDishes), { [id]: !this.expandedDishes[id] });
+    }
+    render() {
+        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 to veleta-default-template:', e);
+            }
+        }
+        if (!menuData) {
+            return (h("div", { class: "default-template-empty" }, "No data provided for Default Template"));
+        }
+        const { sections, business } = menuData;
+        const sortedSections = (sections || []).sort((a, b) => a.order - b.order);
+        return (h("div", { class: "default-template-wrapper p-4 bg-gray-100 flex flex-col gap-4 min-h-screen", "data-theme": "light" }, business && (h("header", { class: "text-center mt-6 mb-2" }, h("h1", { class: "text-4xl font-bold uppercase" }, business.name))), sortedSections.map((section) => {
+            const sectionDishes = (section.dishes || [])
+                // .filter((dish) => {
+                //   if (!this.searchQuery) return true;
+                //   const term = this.searchQuery;
+                //   return (
+                //     dish.name.toLowerCase().includes(term) ||
+                //     (dish.description &&
+                //       dish.description.toLowerCase().includes(term))
+                //   );
+                // })
+                .sort((a, b) => a.order - b.order);
+            if (!sectionDishes.length)
+                return null;
+            return (h("div", { key: section.id, class: "flex flex-col gap-3 w-96 mx-auto mb-4" }, h("div", { class: "divider text-lg" }, section.title), sectionDishes.map((dish) => {
+                const isOpen = !!this.expandedDishes[dish.id];
+                return (h("div", { key: dish.id, class: "card w-96 bg-base-100 card-xs shadow-sm cursor-pointer", onClick: () => this.toggleDish(dish.id) }, h("div", { class: "card-body p-4" }, h("div", { class: "flex justify-between items-center w-full" }, h("h2", { class: "card-title min-w-0 flex-1 mr-2" }, h("span", { class: "truncate block w-full" }, dish.name)), h("div", { class: "badge badge-primary text-xs shrink-0" }, dish.price, " \u20AC")), h("p", { class: `dish-desc-smooth ${isOpen ? 'expanded' : 'collapsed'}` }, dish.description))));
+            })));
+        })));
+    }
+    static get is() { return "veleta-default-template"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["default-template.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["default-template.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Menu",
+                    "resolved": "Menu",
+                    "references": {
+                        "Menu": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::Menu"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu data as object (recommended for frameworks like Angular, React, Vue)"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "dataJson": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu data as JSON string (for compatibility with HTML attributes)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data-json",
+                "defaultValue": "'{}'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expandedDishes": {},
+            "searchQuery": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components.js

@@ -1 +1,2 @@
 export * from './components/umami-template/umami-template';
+export * from './components/default-template/default-template';

package/dist/components/index.js

@@ -1,5 +1,5 @@
 const NAMESPACE = 'veleta-templates';
-const BUILD = /* veleta-templates */ { hydratedSelectorName: "hydrated", lazyLoad: false, prop: true, propChangeCallback: false, updatable: true};
+const BUILD = /* veleta-templates */ { hydratedSelectorName: "hydrated", lazyLoad: false, propChangeCallback: false, state: true, updatable: true};
 
 /*
  Stencil Client Platform v4.39.0 | MIT Licensed | https://stenciljs.com
@@ -9,10 +9,6 @@ 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$;
@@ -68,7 +64,7 @@ var registerHost = (hostElement, cmpMeta) => {
   }
   const ref = hostRef;
   hostElement.__stencil__getHostRef = () => ref;
-  if (cmpMeta.$flags$ & 512 /* hasModernPropertyDecls */ && (BUILD.prop)) {
+  if (cmpMeta.$flags$ & 512 /* hasModernPropertyDecls */ && (BUILD.state)) {
     reWireGetterSetter(hostElement, hostRef);
   }
   return ref;
@@ -411,7 +407,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     return;
   }
   let isProp = isMemberInElement(elm, memberName);
-  memberName.toLowerCase();
+  let ln = memberName.toLowerCase();
   if (memberName === "class") {
     const classList = elm.classList;
     const oldClasses = parseClassList(oldValue);
@@ -441,9 +437,27 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else {
+  } else if (memberName === "key") ; else if ((!elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
+    if (memberName[2] === "-") {
+      memberName = memberName.slice(3);
+    } else if (isMemberInElement(win, ln)) {
+      memberName = ln.slice(2);
+    } else {
+      memberName = ln[2] + memberName.slice(3);
+    }
+    if (oldValue || newValue) {
+      const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+      memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
+      if (oldValue) {
+        plt.rel(elm, memberName, oldValue, capture);
+      }
+      if (newValue) {
+        plt.ael(elm, memberName, newValue, capture);
+      }
+    }
+  } else {
     const isComplex = isComplexType(newValue);
-    if ((isProp || isComplex && newValue !== null) && !isSvg) {
+    if ((isProp || isComplex && newValue !== null) && true) {
       try {
         if (!elm.tagName.includes("-")) {
           const n = newValue == null ? "" : newValue;
@@ -486,6 +500,8 @@ var parseClassList = (value) => {
   }
   return value.split(parseClassListRegex);
 };
+var CAPTURE_EVENT_SUFFIX = "Capture";
+var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/runtime/vdom/update-element.ts
 var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
@@ -534,21 +550,14 @@ 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.createElementNS(
-      isSvgMode ? SVG_NS : HTML_NS,
+    elm = newVNode2.$elm$ = win.document.createElement(
       newVNode2.$tag$
-    ) ;
-    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
-      isSvgMode = false;
-    }
+    );
     {
       updateElement(null, newVNode2, isSvgMode);
     }
@@ -560,13 +569,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
         }
       }
     }
-    {
-      if (newVNode2.$tag$ === "svg") {
-        isSvgMode = false;
-      } else if (elm.tagName === "foreignObject") {
-        isSvgMode = true;
-      }
-    }
   }
   elm["s-hn"] = hostTagName;
   return elm;
@@ -695,12 +697,8 @@ 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) {
-    {
-      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
-    }
     {
       updateElement(oldVNode, newVNode2, isSvgMode);
     }
@@ -717,9 +715,6 @@ 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/components/veleta-default-template.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VeletaDefaultTemplate extends Components.VeletaDefaultTemplate, HTMLElement {}
+export const VeletaDefaultTemplate: {
+    prototype: VeletaDefaultTemplate;
+    new (): VeletaDefaultTemplate;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;