@gurpinderjitsingh/recipe-ui 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -219,7 +219,11 @@ const AppModal = class {
219
219
  render() {
220
220
  if (!this.open)
221
221
  return null;
222
- return (index.h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, index.h("div", { class: "header" }, index.h("h2", null, this.modalTitle), index.h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), index.h("div", { class: "body" }, index.h("slot", null))));
222
+ return (index.h("div", { class: "overlay", onClick: (e) => {
223
+ if (e.target === e.currentTarget) {
224
+ this.close.emit();
225
+ }
226
+ } }, index.h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, index.h("div", { class: "header" }, index.h("h2", null, this.modalTitle), index.h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), index.h("div", { class: "body" }, index.h("slot", null)))));
223
227
  }
224
228
  };
225
229
  AppModal.style = appModalCss();
@@ -8,7 +8,11 @@ export class AppModal {
8
8
  render() {
9
9
  if (!this.open)
10
10
  return null;
11
- return (h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, h("div", { class: "header" }, h("h2", null, this.modalTitle), h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), h("div", { class: "body" }, h("slot", null))));
11
+ return (h("div", { class: "overlay", onClick: (e) => {
12
+ if (e.target === e.currentTarget) {
13
+ this.close.emit();
14
+ }
15
+ } }, h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, h("div", { class: "header" }, h("h2", null, this.modalTitle), h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), h("div", { class: "body" }, h("slot", null)))));
12
16
  }
13
17
  static get is() { return "app-modal"; }
14
18
  static get encapsulation() { return "shadow"; }
@@ -1 +1 @@
1
- import{A as o,d as s}from"./p-BJJZH_Cc.js";const p=o,r=s;export{p as AppModal,r as defineCustomElement}
1
+ import{A as o,d as p}from"./p-DEpkYRgP.js";const s=o,r=p;export{s as AppModal,r as defineCustomElement}
@@ -1 +1 @@
1
- export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BJU3HdRm.js";export{R as RecipeCard}from"./p-B4H61SFd.js";export{R as RecipeSearchBar}from"./p-COHQTgKC.js";export{R as RecipeFilterBar}from"./p-kbrkhGSm.js";export{R as RecipeRating}from"./p-BRKGu69u.js";export{R as RecipeForm}from"./p-DsyQvPDo.js";export{M as MealPlanDay}from"./p-BZBToMAv.js";export{A as AppModal}from"./p-BJJZH_Cc.js";export{A as AppToast}from"./p-BekLK-Pb.js";
1
+ export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BJU3HdRm.js";export{R as RecipeCard}from"./p-B4H61SFd.js";export{R as RecipeSearchBar}from"./p-COHQTgKC.js";export{R as RecipeFilterBar}from"./p-kbrkhGSm.js";export{R as RecipeRating}from"./p-BRKGu69u.js";export{R as RecipeForm}from"./p-DsyQvPDo.js";export{M as MealPlanDay}from"./p-BZBToMAv.js";export{A as AppModal}from"./p-DEpkYRgP.js";export{A as AppToast}from"./p-BekLK-Pb.js";
@@ -0,0 +1 @@
1
+ import{t as e,p as s,H as t,c as o,h as i}from"./p-BJU3HdRm.js";const n=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.close=o(this,"close"),this.open=!1,this.modalTitle=""}render(){return this.open?i("div",{class:"overlay",onClick:e=>{e.target===e.currentTarget&&this.close.emit()}},i("div",{class:"dialog",onClick:e=>e.stopPropagation()},i("div",{class:"header"},i("h2",null,this.modalTitle),i("button",{class:"close-btn",onClick:()=>this.close.emit(),"aria-label":"Close"},"✕")),i("div",{class:"body"},i("slot",null)))):null}static get style(){return":host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;min-width:320px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.header h2{margin:0;font-size:18px}.close-btn{border:none;background:none;font-size:16px;cursor:pointer;color:#666}"}},[257,"app-modal",{open:[4],modalTitle:[1,"modal-title"]}]);function a(){"undefined"!=typeof customElements&&["app-modal"].forEach((s=>{"app-modal"===s&&(customElements.get(e(s))||customElements.define(e(s),n))}))}a();export{n as A,a as d}
@@ -217,7 +217,11 @@ const AppModal = class {
217
217
  render() {
218
218
  if (!this.open)
219
219
  return null;
220
- return (h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, h("div", { class: "header" }, h("h2", null, this.modalTitle), h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), h("div", { class: "body" }, h("slot", null))));
220
+ return (h("div", { class: "overlay", onClick: (e) => {
221
+ if (e.target === e.currentTarget) {
222
+ this.close.emit();
223
+ }
224
+ } }, h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, h("div", { class: "header" }, h("h2", null, this.modalTitle), h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), h("div", { class: "body" }, h("slot", null)))));
221
225
  }
222
226
  };
223
227
  AppModal.style = appModalCss();
@@ -1 +1 @@
1
- import{r as e,c as t,h as i}from"./p-CrZUP9M-.js";const a=class{constructor(i){e(this,i),this.favoriteToggle=t(this,"favoriteToggle"),this.cardClick=t(this,"cardClick"),this.category="",this.favorite=!1,this.onFavoriteClick=e=>{e.stopPropagation(),this.favoriteToggle.emit({favorite:!this.favorite})}}render(){return i("div",{key:"abd19b1d63409b52cf66f348131f5f6f77bb47a6",class:"card",onClick:()=>this.cardClick.emit()},i("div",{key:"1292c3f6dfe7d3b399943004f764c41a3d072188",class:"image-wrap"},this.image?i("img",{src:this.image,alt:this.recipeTitle}):i("div",{class:"placeholder"}),i("button",{key:"0efdc01af349d011ca0e11c4df5438b79876b467",class:{"fav-btn":!0,active:this.favorite},onClick:this.onFavoriteClick,"aria-label":"Toggle favorite"},this.favorite?"★":"☆")),i("div",{key:"66c2c4d845d9cc082c07f24f5d827313f6ad51c4",class:"body"},i("h3",{key:"779fc629c3b97b6158f99440d9bb17fafb708dd3"},this.recipeTitle),this.category&&i("span",{key:"259ec599a43a5c8a279ad5993ba36f8602125b76",class:"category"},this.category),i("div",{key:"58ab20f9682b4b73b7d027571496641cbfa76d0b",class:"actions"},i("slot",{key:"28103422d993e58b133c2350e37c06fddf24300f",name:"actions"}))))}};a.style=":host{display:block;font-family:system-ui, sans-serif}.card{border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:box-shadow 0.15s ease, transform 0.15s ease}.card:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}.image-wrap{position:relative;aspect-ratio:4 / 3;background:#f2f2f2}.image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;background:linear-gradient(135deg, #eee, #ddd)}.fav-btn{position:absolute;top:8px;right:8px;border:none;background:rgba(255, 255, 255, 0.9);border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer;color:#f5a623}.fav-btn.active{color:#ff6b35}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}";const s=class{constructor(i){e(this,i),this.search=t(this,"search"),this.placeholder="Search recipes...",this.value="",this.debounceMs=350,this.internalValue="",this.onInput=e=>{this.internalValue=e.target.value,clearTimeout(this.timer),this.timer=setTimeout((()=>{this.search.emit({value:this.internalValue})}),this.debounceMs)},this.onKeyDown=e=>{"Enter"===e.key&&(clearTimeout(this.timer),this.search.emit({value:this.internalValue}))}}componentWillLoad(){this.internalValue=this.value}onValuePropChange(e){this.internalValue=e}render(){return i("div",{key:"fe5eb2928308fb2496badd784e684b19df52501a",class:"wrap"},i("input",{key:"3d4abb23a1155075a8889e015819b37a8569f6f5",type:"search",placeholder:this.placeholder,value:this.internalValue,onInput:this.onInput,onKeyDown:this.onKeyDown}),i("button",{key:"f33f95b5bfcad9146903a2eb4448932a1d68edb7",onClick:()=>this.search.emit({value:this.internalValue}),"aria-label":"Search"},"🔍"))}static get watchers(){return{value:[{onValuePropChange:0}]}}};s.style=":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:6px}input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #ddd;font-size:14px;outline:none}input:focus{border-color:#ff6b35}button{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:0 16px;cursor:pointer;font-size:15px}";const r=class{constructor(i){e(this,i),this.filterChange=t(this,"filterChange"),this.categories=[],this.active=""}select(e){this.filterChange.emit({value:e})}render(){const e=Array.isArray(this.categories)?this.categories:[];return i("div",{key:"13bc63f39ebfc55c0f05c035b63036121f7b3930",class:"wrap"},i("button",{key:"8aeb99775268204433a8f9831eca9873066c7b9e",class:{chip:!0,active:""===this.active},onClick:()=>this.select("")},"All"),e.map((e=>i("button",{class:{chip:!0,active:this.active===e},onClick:()=>this.select(e)},e))))}};r.style=":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #ddd;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;color:#444}.chip.active{background:#ff6b35;border-color:#ff6b35;color:#fff}";const o=class{constructor(i){e(this,i),this.ratingChange=t(this,"ratingChange"),this.value=0,this.readonly=!1,this.max=5}render(){const e=Array.from({length:this.max},((e,t)=>t+1));return i("div",{key:"1e1c67012185e7aaecfcc89671532946262a6957",class:"wrap",role:this.readonly?void 0:"radiogroup"},e.map((e=>i("span",{class:{star:!0,filled:e<=this.value,clickable:!this.readonly},onClick:()=>!this.readonly&&this.ratingChange.emit({value:e})},"★"))))}};o.style=":host{display:inline-block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:2px}.star{font-size:18px;color:#ddd}.star.filled{color:#f5a623}.star.clickable{cursor:pointer}";const d=class{constructor(i){e(this,i),this.save=t(this,"save"),this.cancel=t(this,"cancel"),this.title="",this.image="",this.category="",this.ingredients=[""],this.instructions="",this.errors={},this.onSubmit=e=>{if(e.preventDefault(),!this.validate())return;const t={id:this.initialData?.id,title:this.title.trim(),image:this.image.trim(),category:this.category.trim(),ingredients:this.ingredients.map((e=>e.trim())).filter(Boolean),instructions:this.instructions.trim()};this.save.emit(t)},this.addIngredient=()=>{this.ingredients=[...this.ingredients,""]},this.removeIngredient=e=>{this.ingredients=this.ingredients.filter(((t,i)=>i!==e))}}componentWillLoad(){this.loadInitialData()}onInitialDataChange(){this.loadInitialData()}loadInitialData(){let e;if("string"==typeof this.initialData&&this.initialData)try{e=JSON.parse(this.initialData)}catch{e=void 0}else this.initialData&&"object"==typeof this.initialData&&(e=this.initialData);e&&(this.title=e.title??"",this.image=e.image??"",this.category=e.category??"",this.ingredients=e.ingredients?.length?[...e.ingredients]:[""],this.instructions=e.instructions??"")}validate(){const e={};return this.title.trim()||(e.title="Title is required."),0===this.ingredients.map((e=>e.trim())).filter(Boolean).length&&(e.ingredients="Add at least one ingredient."),this.instructions.trim()||(e.instructions="Instructions are required."),this.errors=e,0===Object.keys(e).length}updateIngredient(e,t){const i=[...this.ingredients];i[e]=t,this.ingredients=i}render(){return i("form",{key:"bb5c6c7f1b421b55515994f0256c5b39ea781632",onSubmit:this.onSubmit},i("slot",{key:"16940e4c8368aa6b546254ff8db7b28885a4409b",name:"header"}),i("label",{key:"7e3d6ba3231039ecdcca6a4c4314cf27038e1732"},"Title",i("input",{key:"f86056de021f040b8bbf3bf67a0d40ba526ad754",type:"text",value:this.title,onInput:e=>this.title=e.target.value}),this.errors.title&&i("span",{key:"54d552a15e037f54b2c6f0fd13cb4b685c25c76c",class:"error"},this.errors.title)),i("label",{key:"376da4904e7919b5540ee8dabf494f6aab053523"},"Image URL",i("input",{key:"761b64f0e5153ca0e2bf61a7db4c4106ae2f79ef",type:"text",value:this.image,onInput:e=>this.image=e.target.value})),i("label",{key:"0b7ff19b8718540b08921bb7f301be5cacf0df36"},"Category",i("input",{key:"4f1bae8316d588e93006a12e0d824579ddbece43",type:"text",value:this.category,onInput:e=>this.category=e.target.value})),i("div",{key:"280d98b91621defa547dbcc35c0cb6da55a67b5f",class:"field"},i("span",{key:"96a015e055b434441eba85dcb89470823d0ebcc8"},"Ingredients"),this.ingredients.map(((e,t)=>i("div",{class:"ingredient-row"},i("input",{type:"text",value:e,onInput:e=>this.updateIngredient(t,e.target.value)}),i("button",{type:"button",onClick:()=>this.removeIngredient(t),"aria-label":"Remove"},"✕")))),i("button",{key:"697cda22eb5bdf42e50ac40669619fbc04140405",type:"button",class:"add-btn",onClick:this.addIngredient},"+ Add ingredient"),this.errors.ingredients&&i("span",{key:"6a46c393bdd9af8e1e1255792d5532daf433f25b",class:"error"},this.errors.ingredients)),i("label",{key:"6abdbe72d381c3a0a56c46560a92b1e533fcce2a"},"Instructions",i("textarea",{key:"1d3b62d6543e42a4cd0755522f657c13e2d1e4a7",rows:5,onInput:e=>this.instructions=e.target.value},this.instructions),this.errors.instructions&&i("span",{key:"b5845bb5cd0ddd40de21f074307513d376a05f56",class:"error"},this.errors.instructions)),i("div",{key:"778adeff176e2d2b080aad59602db6e92a69ea1c",class:"footer"},i("slot",{key:"c9584d6606ed33f616eb8f3035aa4a0fd5086af3",name:"footer"}),i("button",{key:"b2e17dfb528996a1e6a8a1f8aac36b36e3b07c3a",type:"button",class:"cancel-btn",onClick:()=>this.cancel.emit()},"Cancel"),i("button",{key:"a9e91907aa44c8587a2c492f869d0cb5daa942fe",type:"submit",class:"save-btn"},"Save Recipe")))}static get watchers(){return{initialData:[{onInitialDataChange:0}]}}};d.style=":host{display:block;font-family:system-ui, sans-serif}form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#333;font-weight:600}input,textarea{font-weight:400;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.ingredient-row{display:flex;gap:6px}.ingredient-row input{flex:1}.ingredient-row button{border:none;background:#f4f4f4;border-radius:6px;cursor:pointer;width:30px}.add-btn{align-self:flex-start;border:1px dashed #bbb;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;color:#555}.error{color:#e74c3c;font-size:12px;font-weight:400}.footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.cancel-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer}.save-btn{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:600}";const n=class{constructor(i){e(this,i),this.assignMeal=t(this,"assignMeal"),this.removeMeal=t(this,"removeMeal"),this.day="",this.meals=[]}render(){const e=Array.isArray(this.meals)?this.meals:[];return i("div",{key:"7a0b592fd4b8d9971d7f4912cecb5f9126be11b3",class:"day-col"},i("h3",{key:"b0f1f6a717ad409e6339219ea2f71b73d73bb1f3"},this.day),i("div",{key:"2c978721af3aad27042572dd7825d5f2b5b659fb",class:"meals"},e.map((e=>i("div",{class:"meal-chip"},e.image&&i("img",{src:e.image,alt:e.title}),i("span",{class:"title"},e.title),i("button",{onClick:()=>this.removeMeal.emit({day:this.day,mealId:e.id}),"aria-label":"Remove meal"},"✕")))),0===e.length&&i("p",{key:"326b5f3201df2416f43debc7257918a60a6ab6dd",class:"empty"},"No meals planned")),i("button",{key:"3532de633a1f6cb83bb70f91a2df8fe1a9fcbc14",class:"add-btn",onClick:()=>this.assignMeal.emit({day:this.day})},"+ Add meal"))}};n.style=":host{display:block;font-family:system-ui, sans-serif}.day-col{border:1px solid #eee;border-radius:10px;padding:10px;min-width:150px;display:flex;flex-direction:column;gap:8px;background:#fafafa}h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:0.04em;color:#555}.meals{display:flex;flex-direction:column;gap:6px;min-height:40px}.meal-chip{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #eee;border-radius:8px;padding:4px 6px;font-size:12px}.meal-chip img{width:24px;height:24px;border-radius:4px;object-fit:cover}.meal-chip .title{flex:1}.meal-chip button{border:none;background:none;cursor:pointer;color:#999}.empty{font-size:12px;color:#aaa;margin:4px 0}.add-btn{border:1px dashed #ccc;background:none;border-radius:8px;padding:6px;font-size:12px;cursor:pointer;color:#666}";const c=class{constructor(i){e(this,i),this.close=t(this,"close"),this.open=!1,this.modalTitle=""}render(){return this.open?i("div",{class:"dialog",onClick:e=>e.stopPropagation()},i("div",{class:"header"},i("h2",null,this.modalTitle),i("button",{class:"close-btn",onClick:()=>this.close.emit(),"aria-label":"Close"},"✕")),i("div",{class:"body"},i("slot",null))):null}};c.style=":host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;min-width:320px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.header h2{margin:0;font-size:18px}.close-btn{border:none;background:none;font-size:16px;cursor:pointer;color:#666}";export{c as app_modal,n as meal_plan_day,a as recipe_card,r as recipe_filter_bar,d as recipe_form,o as recipe_rating,s as recipe_search_bar}
1
+ import{r as e,c as t,h as i}from"./p-CrZUP9M-.js";const a=class{constructor(i){e(this,i),this.favoriteToggle=t(this,"favoriteToggle"),this.cardClick=t(this,"cardClick"),this.category="",this.favorite=!1,this.onFavoriteClick=e=>{e.stopPropagation(),this.favoriteToggle.emit({favorite:!this.favorite})}}render(){return i("div",{key:"abd19b1d63409b52cf66f348131f5f6f77bb47a6",class:"card",onClick:()=>this.cardClick.emit()},i("div",{key:"1292c3f6dfe7d3b399943004f764c41a3d072188",class:"image-wrap"},this.image?i("img",{src:this.image,alt:this.recipeTitle}):i("div",{class:"placeholder"}),i("button",{key:"0efdc01af349d011ca0e11c4df5438b79876b467",class:{"fav-btn":!0,active:this.favorite},onClick:this.onFavoriteClick,"aria-label":"Toggle favorite"},this.favorite?"★":"☆")),i("div",{key:"66c2c4d845d9cc082c07f24f5d827313f6ad51c4",class:"body"},i("h3",{key:"779fc629c3b97b6158f99440d9bb17fafb708dd3"},this.recipeTitle),this.category&&i("span",{key:"259ec599a43a5c8a279ad5993ba36f8602125b76",class:"category"},this.category),i("div",{key:"58ab20f9682b4b73b7d027571496641cbfa76d0b",class:"actions"},i("slot",{key:"28103422d993e58b133c2350e37c06fddf24300f",name:"actions"}))))}};a.style=":host{display:block;font-family:system-ui, sans-serif}.card{border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:box-shadow 0.15s ease, transform 0.15s ease}.card:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}.image-wrap{position:relative;aspect-ratio:4 / 3;background:#f2f2f2}.image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;background:linear-gradient(135deg, #eee, #ddd)}.fav-btn{position:absolute;top:8px;right:8px;border:none;background:rgba(255, 255, 255, 0.9);border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer;color:#f5a623}.fav-btn.active{color:#ff6b35}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}";const s=class{constructor(i){e(this,i),this.search=t(this,"search"),this.placeholder="Search recipes...",this.value="",this.debounceMs=350,this.internalValue="",this.onInput=e=>{this.internalValue=e.target.value,clearTimeout(this.timer),this.timer=setTimeout((()=>{this.search.emit({value:this.internalValue})}),this.debounceMs)},this.onKeyDown=e=>{"Enter"===e.key&&(clearTimeout(this.timer),this.search.emit({value:this.internalValue}))}}componentWillLoad(){this.internalValue=this.value}onValuePropChange(e){this.internalValue=e}render(){return i("div",{key:"fe5eb2928308fb2496badd784e684b19df52501a",class:"wrap"},i("input",{key:"3d4abb23a1155075a8889e015819b37a8569f6f5",type:"search",placeholder:this.placeholder,value:this.internalValue,onInput:this.onInput,onKeyDown:this.onKeyDown}),i("button",{key:"f33f95b5bfcad9146903a2eb4448932a1d68edb7",onClick:()=>this.search.emit({value:this.internalValue}),"aria-label":"Search"},"🔍"))}static get watchers(){return{value:[{onValuePropChange:0}]}}};s.style=":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:6px}input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #ddd;font-size:14px;outline:none}input:focus{border-color:#ff6b35}button{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:0 16px;cursor:pointer;font-size:15px}";const o=class{constructor(i){e(this,i),this.filterChange=t(this,"filterChange"),this.categories=[],this.active=""}select(e){this.filterChange.emit({value:e})}render(){const e=Array.isArray(this.categories)?this.categories:[];return i("div",{key:"13bc63f39ebfc55c0f05c035b63036121f7b3930",class:"wrap"},i("button",{key:"8aeb99775268204433a8f9831eca9873066c7b9e",class:{chip:!0,active:""===this.active},onClick:()=>this.select("")},"All"),e.map((e=>i("button",{class:{chip:!0,active:this.active===e},onClick:()=>this.select(e)},e))))}};o.style=":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #ddd;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;color:#444}.chip.active{background:#ff6b35;border-color:#ff6b35;color:#fff}";const r=class{constructor(i){e(this,i),this.ratingChange=t(this,"ratingChange"),this.value=0,this.readonly=!1,this.max=5}render(){const e=Array.from({length:this.max},((e,t)=>t+1));return i("div",{key:"1e1c67012185e7aaecfcc89671532946262a6957",class:"wrap",role:this.readonly?void 0:"radiogroup"},e.map((e=>i("span",{class:{star:!0,filled:e<=this.value,clickable:!this.readonly},onClick:()=>!this.readonly&&this.ratingChange.emit({value:e})},"★"))))}};r.style=":host{display:inline-block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:2px}.star{font-size:18px;color:#ddd}.star.filled{color:#f5a623}.star.clickable{cursor:pointer}";const d=class{constructor(i){e(this,i),this.save=t(this,"save"),this.cancel=t(this,"cancel"),this.title="",this.image="",this.category="",this.ingredients=[""],this.instructions="",this.errors={},this.onSubmit=e=>{if(e.preventDefault(),!this.validate())return;const t={id:this.initialData?.id,title:this.title.trim(),image:this.image.trim(),category:this.category.trim(),ingredients:this.ingredients.map((e=>e.trim())).filter(Boolean),instructions:this.instructions.trim()};this.save.emit(t)},this.addIngredient=()=>{this.ingredients=[...this.ingredients,""]},this.removeIngredient=e=>{this.ingredients=this.ingredients.filter(((t,i)=>i!==e))}}componentWillLoad(){this.loadInitialData()}onInitialDataChange(){this.loadInitialData()}loadInitialData(){let e;if("string"==typeof this.initialData&&this.initialData)try{e=JSON.parse(this.initialData)}catch{e=void 0}else this.initialData&&"object"==typeof this.initialData&&(e=this.initialData);e&&(this.title=e.title??"",this.image=e.image??"",this.category=e.category??"",this.ingredients=e.ingredients?.length?[...e.ingredients]:[""],this.instructions=e.instructions??"")}validate(){const e={};return this.title.trim()||(e.title="Title is required."),0===this.ingredients.map((e=>e.trim())).filter(Boolean).length&&(e.ingredients="Add at least one ingredient."),this.instructions.trim()||(e.instructions="Instructions are required."),this.errors=e,0===Object.keys(e).length}updateIngredient(e,t){const i=[...this.ingredients];i[e]=t,this.ingredients=i}render(){return i("form",{key:"bb5c6c7f1b421b55515994f0256c5b39ea781632",onSubmit:this.onSubmit},i("slot",{key:"16940e4c8368aa6b546254ff8db7b28885a4409b",name:"header"}),i("label",{key:"7e3d6ba3231039ecdcca6a4c4314cf27038e1732"},"Title",i("input",{key:"f86056de021f040b8bbf3bf67a0d40ba526ad754",type:"text",value:this.title,onInput:e=>this.title=e.target.value}),this.errors.title&&i("span",{key:"54d552a15e037f54b2c6f0fd13cb4b685c25c76c",class:"error"},this.errors.title)),i("label",{key:"376da4904e7919b5540ee8dabf494f6aab053523"},"Image URL",i("input",{key:"761b64f0e5153ca0e2bf61a7db4c4106ae2f79ef",type:"text",value:this.image,onInput:e=>this.image=e.target.value})),i("label",{key:"0b7ff19b8718540b08921bb7f301be5cacf0df36"},"Category",i("input",{key:"4f1bae8316d588e93006a12e0d824579ddbece43",type:"text",value:this.category,onInput:e=>this.category=e.target.value})),i("div",{key:"280d98b91621defa547dbcc35c0cb6da55a67b5f",class:"field"},i("span",{key:"96a015e055b434441eba85dcb89470823d0ebcc8"},"Ingredients"),this.ingredients.map(((e,t)=>i("div",{class:"ingredient-row"},i("input",{type:"text",value:e,onInput:e=>this.updateIngredient(t,e.target.value)}),i("button",{type:"button",onClick:()=>this.removeIngredient(t),"aria-label":"Remove"},"✕")))),i("button",{key:"697cda22eb5bdf42e50ac40669619fbc04140405",type:"button",class:"add-btn",onClick:this.addIngredient},"+ Add ingredient"),this.errors.ingredients&&i("span",{key:"6a46c393bdd9af8e1e1255792d5532daf433f25b",class:"error"},this.errors.ingredients)),i("label",{key:"6abdbe72d381c3a0a56c46560a92b1e533fcce2a"},"Instructions",i("textarea",{key:"1d3b62d6543e42a4cd0755522f657c13e2d1e4a7",rows:5,onInput:e=>this.instructions=e.target.value},this.instructions),this.errors.instructions&&i("span",{key:"b5845bb5cd0ddd40de21f074307513d376a05f56",class:"error"},this.errors.instructions)),i("div",{key:"778adeff176e2d2b080aad59602db6e92a69ea1c",class:"footer"},i("slot",{key:"c9584d6606ed33f616eb8f3035aa4a0fd5086af3",name:"footer"}),i("button",{key:"b2e17dfb528996a1e6a8a1f8aac36b36e3b07c3a",type:"button",class:"cancel-btn",onClick:()=>this.cancel.emit()},"Cancel"),i("button",{key:"a9e91907aa44c8587a2c492f869d0cb5daa942fe",type:"submit",class:"save-btn"},"Save Recipe")))}static get watchers(){return{initialData:[{onInitialDataChange:0}]}}};d.style=":host{display:block;font-family:system-ui, sans-serif}form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#333;font-weight:600}input,textarea{font-weight:400;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.ingredient-row{display:flex;gap:6px}.ingredient-row input{flex:1}.ingredient-row button{border:none;background:#f4f4f4;border-radius:6px;cursor:pointer;width:30px}.add-btn{align-self:flex-start;border:1px dashed #bbb;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;color:#555}.error{color:#e74c3c;font-size:12px;font-weight:400}.footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.cancel-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer}.save-btn{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:600}";const n=class{constructor(i){e(this,i),this.assignMeal=t(this,"assignMeal"),this.removeMeal=t(this,"removeMeal"),this.day="",this.meals=[]}render(){const e=Array.isArray(this.meals)?this.meals:[];return i("div",{key:"7a0b592fd4b8d9971d7f4912cecb5f9126be11b3",class:"day-col"},i("h3",{key:"b0f1f6a717ad409e6339219ea2f71b73d73bb1f3"},this.day),i("div",{key:"2c978721af3aad27042572dd7825d5f2b5b659fb",class:"meals"},e.map((e=>i("div",{class:"meal-chip"},e.image&&i("img",{src:e.image,alt:e.title}),i("span",{class:"title"},e.title),i("button",{onClick:()=>this.removeMeal.emit({day:this.day,mealId:e.id}),"aria-label":"Remove meal"},"✕")))),0===e.length&&i("p",{key:"326b5f3201df2416f43debc7257918a60a6ab6dd",class:"empty"},"No meals planned")),i("button",{key:"3532de633a1f6cb83bb70f91a2df8fe1a9fcbc14",class:"add-btn",onClick:()=>this.assignMeal.emit({day:this.day})},"+ Add meal"))}};n.style=":host{display:block;font-family:system-ui, sans-serif}.day-col{border:1px solid #eee;border-radius:10px;padding:10px;min-width:150px;display:flex;flex-direction:column;gap:8px;background:#fafafa}h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:0.04em;color:#555}.meals{display:flex;flex-direction:column;gap:6px;min-height:40px}.meal-chip{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #eee;border-radius:8px;padding:4px 6px;font-size:12px}.meal-chip img{width:24px;height:24px;border-radius:4px;object-fit:cover}.meal-chip .title{flex:1}.meal-chip button{border:none;background:none;cursor:pointer;color:#999}.empty{font-size:12px;color:#aaa;margin:4px 0}.add-btn{border:1px dashed #ccc;background:none;border-radius:8px;padding:6px;font-size:12px;cursor:pointer;color:#666}";const c=class{constructor(i){e(this,i),this.close=t(this,"close"),this.open=!1,this.modalTitle=""}render(){return this.open?i("div",{class:"overlay",onClick:e=>{e.target===e.currentTarget&&this.close.emit()}},i("div",{class:"dialog",onClick:e=>e.stopPropagation()},i("div",{class:"header"},i("h2",null,this.modalTitle),i("button",{class:"close-btn",onClick:()=>this.close.emit(),"aria-label":"Close"},"✕")),i("div",{class:"body"},i("slot",null)))):null}};c.style=":host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;min-width:320px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.header h2{margin:0;font-size:18px}.close-btn{border:none;background:none;font-size:16px;cursor:pointer;color:#666}";export{c as app_modal,n as meal_plan_day,a as recipe_card,o as recipe_filter_bar,d as recipe_form,r as recipe_rating,s as recipe_search_bar}
@@ -1 +1 @@
1
- import{p as e,b as a}from"./p-CrZUP9M-.js";export{s as setNonce}from"./p-CrZUP9M-.js";import{g as i}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,i={};return""!==a&&(i.resourcesUrl=new URL(".",a).href),e(i)})().then((async e=>(await i(),a([["p-e2f3c9b9",[[257,"app-modal",{open:[4],modalTitle:[1,"modal-title"]}],[1,"meal-plan-day",{day:[1],meals:[16]}],[257,"recipe-card",{recipeTitle:[1,"recipe-title"],image:[1],category:[1],favorite:[4]}],[1,"recipe-filter-bar",{categories:[16],active:[1]}],[257,"recipe-form",{initialData:[1,"initial-data"],title:[32],image:[32],category:[32],ingredients:[32],instructions:[32],errors:[32]},null,{initialData:[{onInitialDataChange:0}]}],[1,"recipe-rating",{value:[2],readonly:[4],max:[2]}],[1,"recipe-search-bar",{placeholder:[1],value:[1],debounceMs:[2,"debounce-ms"],internalValue:[32]},null,{value:[{onValuePropChange:0}]}]]],["p-6ef28048",[[1,"app-toast",{message:[1],type:[1],duration:[2]}]]]],e))));
1
+ import{p as e,b as a}from"./p-CrZUP9M-.js";export{s as setNonce}from"./p-CrZUP9M-.js";import{g as i}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,i={};return""!==a&&(i.resourcesUrl=new URL(".",a).href),e(i)})().then((async e=>(await i(),a([["p-9144a213",[[257,"app-modal",{open:[4],modalTitle:[1,"modal-title"]}],[1,"meal-plan-day",{day:[1],meals:[16]}],[257,"recipe-card",{recipeTitle:[1,"recipe-title"],image:[1],category:[1],favorite:[4]}],[1,"recipe-filter-bar",{categories:[16],active:[1]}],[257,"recipe-form",{initialData:[1,"initial-data"],title:[32],image:[32],category:[32],ingredients:[32],instructions:[32],errors:[32]},null,{initialData:[{onInitialDataChange:0}]}],[1,"recipe-rating",{value:[2],readonly:[4],max:[2]}],[1,"recipe-search-bar",{placeholder:[1],value:[1],debounceMs:[2,"debounce-ms"],internalValue:[32]},null,{value:[{onValuePropChange:0}]}]]],["p-6ef28048",[[1,"app-toast",{message:[1],type:[1],duration:[2]}]]]],e))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gurpinderjitsingh/recipe-ui",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "Reusable web component library for the Recipe Finder & Meal Planner app, built with StencilJS.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -1 +0,0 @@
1
- import{t as e,p as t,H as s,c as o,h as n}from"./p-BJU3HdRm.js";const i=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.close=o(this,"close"),this.open=!1,this.modalTitle=""}render(){return this.open?n("div",{class:"dialog",onClick:e=>e.stopPropagation()},n("div",{class:"header"},n("h2",null,this.modalTitle),n("button",{class:"close-btn",onClick:()=>this.close.emit(),"aria-label":"Close"},"✕")),n("div",{class:"body"},n("slot",null))):null}static get style(){return":host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;min-width:320px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.header h2{margin:0;font-size:18px}.close-btn{border:none;background:none;font-size:16px;cursor:pointer;color:#666}"}},[257,"app-modal",{open:[4],modalTitle:[1,"modal-title"]}]);function a(){"undefined"!=typeof customElements&&["app-modal"].forEach((t=>{"app-modal"===t&&(customElements.get(e(t))||customElements.define(e(t),i))}))}a();export{i as A,a as d}